Embedding swf files in blog post

I would like to share my friend's searching effort on this topic.  Useful in blogging.... happy trying..!

http://author-hailiz.blogspot.com/2012/06/how-to-embed-swf-files-in-blog-post.html

Rotating a 3d object

I’m going to create a 3D Box and animate it using the new 3D Tools and Features in Flash CS4.

Step 1: Create a square shape

Start by drawing out simple square. Hold down the shift key to constrain the proportions. Now lets change the solid fill to a gradient by going the color palette, and lets change the type to a Linear gradient. Next lets remove the stroke, just goto the stroke color picker and choose the None option.

Now lets make sure our square is in the center of the stage, we can do that by going to the align panel and click on the horizontal and vertical align buttons.

Step 2: Position & Convert into a Movie Clip

Okay next lets convert this shape into a movie clip, just right click and select Convert to Symbol… alright now lets nest this symbol inside another movie clip, and lets name this one 3D Box. So inside the 3D box movie clip is where we’ll be setting up the 3D layers.

Step 3: Duplicate Layers for Each Box Side

Alright so now we can just copy and paste a few of these squares on some new layers. And lets name each copy after a side of the 3D Box such as top, bottom, left and right.

Step 4: Rotate Each Side 90º & Position in Place

Now lets convert all the frames into motion tweens by selecting them, right clicking and Create Motion Tween. Now lets start with the top layer and rotate the X axis 90 degrees. You can hold down the shift key to constrained your rotation. Next we can go inside the motion editor to ensure our rotation was a either a positive value, or a negative one. Just to make sure everything is set the name.

Now we’ll want to move this top layer up about half of the way. So just calculate half the height of the square and move it up so it sets on top. I like to use the 3D Position and View Panel to do this because you can easily change the values there.

Now lets repeat this process for the bottom layer. But this time we’ll want move the half way down, so again just change the value in the 3D Position and View Panel. Alright so next lets start on the left and right squares. Starting with left, lets rotate the Y axis 90 degrees and shift it over to the left about half of the width of the square. Again we can go inside the motion edition to check our values. Alright now we can repeat the same process for the right square, but don’t forget to move it to the right side instead of the left!

Step 5: Test 3D Box Rotation

So once we finish all rotating and positioning, we should be left with a picture frame looking set of rectangles. So lets jump out of the movie clip and goto scene 1. Now lets select our 3D rotation tool and watch as I rotate the box on its Y axis. Pretty sweet huh?

Step 6: Add Drop Shadow

Lets select our bottom layer, and lets goto the filters section in the properties panel and licks pick drop shadow. Lets change the blur X and Y values to something big like 100 pixels, change the quality to high, and distance to 0.

Step 7: Animate 3D Box Rotating

So now lets jump out to our main timeline and lets add a few move frames. Now Ill be using the motion editor to animate the 3D Box and have spin on it Y axis. So lets convert it the frames into a motion tween by right clicking on the frame bar and selecting convert to motion tween. Now we can scrub over to the last frame and then goto the motion editor. So if we want to just rotate the box spinning from left to right, we can simply change the Rotation Y value to 360 degrees.

Test out the animation by pressing cmd+renturn (cntrl+return on PC).

http://noeruiz.com/tuts/how-to-create-3d-box-in-flash-cs4/

http://www.youtube.com/watch?v=PfR9n0eZJvs&feature=related

Combine Flash Movies

1) Open the first Flash FLA movie in Flash you want to combine with another movie. Open the second
    movie

2) Right-click any frame in the Timeline panel (in the second movie) and choose "Select all Frames" from the
    fly-out menu. Right-click the selected frames and choose "Copy Frames" from the fly-out menu.

3) Go to the first movie. Scroll to the end of Timeline to the first column of blank frames.
    Right-click the first blank frame in the first (top) layer and choose "Paste Frames" from the fly-out menu.
    Flash pastes all the layers and frames---and their contents---into the Timeline, appending the movie and  
    extending the Timeline to hold the new content

4) Repeat these steps for each additional movie you want to add to this one.

Combining Movies with Scenes

1) Open the first Flash FLA movie in Flash you want to combine with another movie. Open the second

    movie

2) Right-click any frame in the Timeline panel (in the second movie) and choose "Select all Frames" from the

   fly-out menu. Right-click the selected frames and choose "Copy Frames" from the fly-out menu.

3) Go back to the first movie. Click "Window" on the menu bar and choose "Other Panels," and then select

    "Scene" from the Other Panels fly-out menu. This opens the Scene panel.

4) Click the "Add Scene" button in the Scene panel (first button in the lower-left corner of the panel). Flash

    creates a new scene and displays it in the document window. Right-click frame "1" on "Layer 1" and   

    choose "Paste Frames" from the fly-out menu. Flash pastes the content from the movie where you  
    copied the frames into this scene. When you test or export the movie to a SWF file, Flash Player will play
    each scene, one after the other.

Repeat these steps for each additional movie you want to add to this one.

Source:
http://www.ehow.com/how_6002759_combine-flash-movies-one-movie.html
Read more: How to Combine Flash Movies Into One Movie | eHow.com http://www.ehow.com/how_6002759_combine-flash-movies-one-movie.html#ixzz1wt1rRDVW

Learning About Layers

Let's learn about layers and the importance of layers

Layers, in graphic arts programs, give you a way of organizing objects in your documents and controlling their front-to-back stacking order. Illustrator, InDesign, and Photoshop all have layers, and share most basic layer features: you can create, move, hide, and show layers, and you can assign objects to layers.

We should first understand that Flash uses two types of spatial (space) organization
1) position of objects on stage
2) stacking order of objects that overlap

Therefore, layers  in Flash are used on the Timeline as a way to ORGANIZE objects and actions.  Placing objects and actions in their own layer makes them easier to work with and provide the necessary documentation that can be easily edited by other developers.

By having layers, the developer can draw and edit objects in one layer without affecting other overlapping objects in another layer. This is done by hiding the unnecessary layer.  If the overlapped objects are all done in one layer, they are merged together and specific selection of an object will be impossible.  By using layers, the object in that layer will be easily selected if we want to reshape them or reposition them on stage.

The second reason of having layers, as mentioned earlier is to provide necessary documentation for easy editing.  The developer will know which layer is for what function, that is which layer contains the first object, the second object ande so on, which layer contains the action script, which layer contains sound, which layer contains animation, etc.  A simple file may not need different layers, but by practicing using layers, will be ready to use the same concept when we develop more complex application.

We can also perform operation on the layer itself
1) Lock the layers (to protect their embedded objects from unwanted editing)
2) Hide the layers OR make them visible (i.e. you can see OR not see their objects in the workspace)
3) Switch between normal to outline mode
4) Move layers to change order of overlapped or stacked objects

There are six types of layers:

1) Normal (the one that we use)

2) Guide (Standard and Motion) 
    a) A Standard Guide serves as a reference point for positioning objects on stage
    b) A Motion Guide is used to create a path for animated objects to follow

3) Guided - A layer that contains the animated object (link to Motion Guide layer)

4) Mask - A layer that hides and reveals portions of another layer (widely used in Photoshop)

5) Masked - A layer that contains the objects that are hidden and revealed by a Mask layer

6) Folder - A layer that contain other layers

In this course, we have learned about layer type 1, 2 and 3.  More to come if we further this course in the future.

Source of information:

Dr Zaidatun Tasir - Universiti Teknologi Malaysia

Adobe Flash CS3 Revealed - Jim Shuman

http://edutechwiki.unige.ch/en/Flash_layers_tutorial

Skills Learned in Flash

Well everyone.. these are what I've learned so far in Flash during the past weeks...of course using Flash CS3 and also Flash CS5

1) Drawing and coloring objects using pencil tool, line tool, rectangle tool and so on

2) Create the various forms of text: static, dynamic and input

3) Work with the 3 kinds of symbol : button, graphic and movie clips

4) Work with different layers and different frames

5) Create auto animation by jumping frame to frame or frame to a frame in another layer, scene to scene..

6) Create animation based on user response

7) Run simple action scripts to control how our animation behave: GoToandStop, GotoandPlay, StartDrag, etc...

8)Animation: Frame by Frame, Motion Tween, Shape Tween, Motion Guides, etc,...

9) Various type of interactivity: based on button click, <Enter>, text entry , drag and drop, etc....

Maybe the only part we haven't covered is the Behavior and Component..

(According to the book Haslinda and I borrowed from the library, these are all the basics that we need to learn in flash. The rest should be explored along the way..)

Dragging apple fruit to apple tree - Apps 4 (4)

Ha!  One of the easiest part of flash animation has just been completed... after copying the previous drag and drop exercise from the iPad..

(click on the image above to start the exercise)

Ok! Here we go! We will be working with 3 layers in this animation

Layer 1 - tree

Layer 2 - apples

Layer 3 - instruction

1) First, put a tree into the stage.. (Sorry doc, this part i just import from internet.. he he.).  Rename the layer as "tree"

2) Insert a new layer and rename it as "apple". 

3) Draw an apple using pencil tool and colour it. (actually I tried to import an apple from the internet but could not find a beautiful one... so I guess my drawing skills is needed here..)

4) Convert this apple to a movie object. After that, duplicate the apples

5) Put Action Script behind each apple..

 on(press){
 startDrag(this, true);
}

on(release){
 stopDrag();
}

6) Insert another layer and rename it as "instruction".  Put the instruction on the scene.

There you go... Ctrl-Enter and ask your kid to follow the instruction :)

Check out the result here

Interactive Menu Buttons - Apps 4 (3)

Now, one of the most tedious part is creating the interactive menu buttons. Well, you would think that the menu page is one page only. Actual situation... it has to consist of several pages that the buttons in the menu point to.. that is if we have 5 buttons in the menu, we will have to create 5 similar page layout that will highlight the content of each of the button. There will be action script behind each button that will point to scene containing the page holding the information of the button.

You can test the application by clicking the image above

The pages in flash can be differentiated by scenes.  That is if we have 5 pages, then we will need to create 5 different scenes.

In this application, I created a 3 page application, yes, with 3 different scenes

1) home
2) pengenalan
3) rukun

1) Scene 1 - renamed as "home"

    This holds introduction to the application.  I created several layers here. From top to bottom
    a) stop
    b) buttons
    c) title
    d) background

   Firstly create the "background" layer. I import the Kaabah image to the library and then drag it onto the
   stage to become the background

  Secondly, I created the "title" layer and insert a static text that shows the title for the page

  Thirdly I created the "buttons" layer and insert the 3 menu buttons.  There will be an action script behind  
  the three buttons

 Behind button "Pengenalan"
  on (release) {
 gotoAndStop("pengenalan",1);
  }

 Behind button "Rukun"
  on (release) {
 gotoAndStop("rukun",1);
  }

 Behind button "Tabung Haji"
  on (release) {
 getURL(http://www.tabunghaji.gov.my/);
  }

Lastly, I don't want the scene to autonavigate to the next scene. Therefore I insert another layer and rename it as stop.  In this layer, in the first frame, create an action script that contains on the followin action:
        stop();


2) Duplicate "home" scene to "pengenalan" scene so that we can maintain the layout



    Firstly, remove the "background" layer so that we can put some readable notes on the stage

    Secondly, remove the stop layer because we are going to use "gotoAndStop"

  Thirdly, create another layer and rename it as "isi". In this layer, put in the static text as definition of
  rukun haji.

  Fourth, I want to insert the "dalil".  Therefore, I created another button called "dalil". Put this action script:
 

  on (release) {
  gotoAndStop("pengenalan", "dalil");
  }

  Fifth, I want to insert notes in one of the frame.  Therefore, first we create a keyframe, say, frame 30, for  
  all the layers.

 Sixth, in the "isi" layer, insert a keyframe in frame 15. Name this frame in the properties panel as "dalil" and 
 input the static text for dalil

Seventh, we want to be able to get back to "home" scene.  Therefore, I insert another button called "home" so that user will be able to go back to "home" page.  Behind the button is the action script:

 on (release) {
 gotoAndStop("home",1);
  }

3) Duplicate  "pengenalan" scene to "rukun" scene



First, put in the definition of rukun by inserting static text

Secondly, put in 6 different buttons to point to 6 different rukuns. Behind the buttons are the following action script:

on (release) {
 gotoAndStop("rukun","rukun1");
  }

for each of the button and so on until

on (release) {
 gotoAndStop("rukun","rukun6");
  }

Thirdly, to show the content of Rukun 1, I insert a keyframe in frame 3. Here, I input a static text for Rukun 1.



Fourthly, I insert another keyframe in frame 6 and input static text for Rukun 2.

The process is repeated until the last rukun.



I think the process is almost comprehensive enough..

 Time to test it here