Macromedia Flash MX

Timeline Panel This panel is important in organizing and control flash elements (contents) movement. Cinema movie consists of a number of snapshots with small differences among them. When these snapshots are displayed quickly one after another, you will see moving elements.

Timeline Panel Flash artificial movies has the same concept. Time Line consists of: Layer panel: It is used to isolate and organize the different elements and shapes found in the stage and distribute it into different layers.

Timeline Panel 2. Frame panel: It shows the frames of each layer. These are the snapshots that forms artificial movements when displayed one after the other

Frame Part of timeline panel 1: the current frame number 2:number of frames displayed per second 3: seconds elapsed The most important part of frame part is the frames themselves. You could see two strips in the frame part: The above: shows a number for each frame The below: shows the frame itself.

Frame Part of timeline panel The red line in the frame part is (playhead). By moving it, you could notice the consecutive movements of the frames. You could do that frequently to test your constructed movie. Types of frames: normal frame:

Frame Part of timeline panel Normal frames can be empty without any element inserted in it. They also could contain one or more static shapes. The goal of these frames is to increase the time interval during which these shapes exist. 2. Blank keyframe: It appears at the beginning and before adding any shape in the stage It indicates that nothing is found in this frame (point). You can add other blank keyframes at any normal frame.

Frame Part of timeline panel 3. keyframe: It is a frame in which a clear change occurs. This change is like appearing of new elements or a change occur on the existing elements. Important points regarding frames: Ex) create new flash file The fisrt frame appearing in the frame part of the timeline panel is blank keyframe Now, use the toolbox to draw a circle inside the stage.

Frame Part of timeline panel Notice how the frame changed to key frame. So, Any change on content require a keyframe The circle now is in the fisrt frame and it will appear for (1/12) seconds only. If we want the circle to stay on screen for 3 seconds, we have to use 36 frame (because every 12 frames represents one second) To do that, right click on frame # 36 then (insert frame). Notice the figure below: The shapes are static from frame 1 to 36 (no change)

Frame Part of timeline panel Now, on frame 37, right click on frame # 37 and (insert blank keyframe). You notice that there is nothing inside the stage. So, the blank key frame is used to clear the stage from the previous shapes and elements. Click on frame #10 and change the circle color using (fill color) from tool box. You notice that the circle color was changed in all the frames and not only on frame #10. So, to change the element in a certain frame, we should use (key frame)

Frame Part of timeline panel Now, right click on frame # 10 and (insert keyframe). You notice that there is nothing inside the stage. Change the circle color. you deduce that the circle color has changed starting from frame 10 to the end. Frames moving: One or more frames can be moved from one place to another by : firstly, selecting them and draging and dropping it in another place

Frame Part of timeline panel Frames copying and pasting: One or more frames can be cut and pasted from one place to another by : firstly, selecting them and then cutting them from their place and placing them to another.

Frame Part of timeline panel You can remove normal frames from a certain layer by (MRC + Remove Frames). Using (MRC+ Clear frames) will remove the content of normal frames (keeping their places reserved). To clear content of both blank keyframes and keyframes press (MRC + Clear Keyframe) Mouse right click

Shortcut Keys Frames (with all types) can be created and removed using the following shortcut keys: select that frame and: F5: to create normal frame F6: to create Keyframe F7: to create Blank Keyframe And finally, if you want to remove any type of them, just precede its shortcut key with (shift)

Layer part of timeline panel Layer part shows the layers making up the current scene. The frames of each layer are displayed in front of it. If you want to make two shapes move on the stage at the same time, you can put each one on a different layer. To create a new layer: Press on appearing on the layer part, or Using menu: (Insert  Timeline  Layer)

Layer part of timeline panel To delete a layer: Select it, the MRC and select (Delete Layer) To rename a layer: Double click on layer and type the new name. To hide a certain layer: Click on of that layer. To prevent user from changing objects inserted in a certain layer: Click on of that layer

Layer part of timeline panel Ex) Using multilayers: Create a flash file Create a new layer and rename it to (MyLayer) Draw a rectangle in the first layer and make it appear on the stage for 2 seconds. Draw a circle in the second layer and make it appear on the stage for 3 seconds. Test the movie (Ctrl + Enter) hide the layer (MyLayer) Test it again.

Animation Animation in flash can be done using: Frame by Frame animation You can create motion here by drawing shapes (with small changes) in each frame. Tween Animation Tween (from between) is to ask the flash to determine the behavior of an object if we give it the initial and last state of that object.

Frame by Frame animation The following example shows how we can prepare animated shape using frame by frame approach ex) a growing line (growingLine.fla) Create a flash file In frame #1, draw a small square. Select that square and take a copy of it. (it will be pasted to other keyframes) MLC on next frame, press F6 (Insert Keyframe) Paste that square in that frame and put it in front of the previous square(connected with it). Repeat the steps (4,5) a number of times. Test the movie (ctrl + Enter)

Tween Animation Tween Animation could be done using two main methods: Shape tween: Simply, It is the transformation of an object shape from one case to another. Motion tween: Simply, It is moving an object from one place to another.

Shape Tween Ex) transforming an object from a circle to rectangle. (shapeTween.fla) Create a flash file Draw a circle in the first frame. MRC on frame#35, then, Insert Blank Keyframe. Draw a rectangle in that frame. MLC on frame#1, then go to (property inspector) and choose (shape) from Tween DropDownList. Click (Ctrl+Enter) to test the work

Shape Tween Create a new layer. Write any text on the stage using (Text Tool) from toolbox. Convert it to shape by : selecting it and choosing (modifyBreak Apart) twice. After that, insert Blank Keyframe in frame#35 Add another text on a different place of the stage and apply step 9 again. MLC on frame#1, then go to (property inspector) and choose (shape) from Tween DropDownList. Click (Ctrl+Enter) to test the work