The Timeline robot flash tutorial

4. The Timeline

• A view of all the frames and layers in your movie. Layers • Similar to other applications like Illustrator. Each layer has its own set of content. • Layers are part of the timeline. • Layers can be locked, hidden, and organized in folders. Create layers • Put each element of the RobotMovie into its own separate layer. • Use the Create New Layers tool on the Timeline panel. • Create layers for each of the elements and name them appropriately Face, Left Eye, Right Eye, and Mouth layer. Put the corresponding elements in their respec- tive layers. • Edit Paste in Place pastes elements at the same place they were copied. • Create an Other Mouths layer and place the other outlines except the neutral mouth in this layer. Hide the contents of this layer by clicking on the dot under Eye icon. • Create layers for Actions and Labels. It is good practice to separate them from the rest of the movie elements. 10 • Create frames • You will create frames to represent the different moods of our robot. Each mood will be shown for 1 second. • Select 10 frames in the Timeline panel and select Insert Frame. You can also do this by using the context menu. • Select frame 1 on the Labels layer and enter “neutral” in the Frame Label text field in the Properties panel. • The black dot means that the frame 1 is a keyframe. • All frames following a keyframe contains the same content as the keyframe, thus the gray frames 2–10 have the same content as the frame 1. • The hollow white rectangle means that it is the end of the span of frames. • Insert a keyframe on the Mouth layer at the 11th frame. Select Insert Keyframe. 11 • This copies the previous keyframe’s contents, which you will change by replacing it with the sad mouth. • You can also create a blank keyframe by selecting Insert Blank Keyframe. • Insert a keyframe on the Labels layer at the 11th frame and label it “sad”. Copy the sad mouth from the Other Mouths layer into the Mouth layer in this keyframe. • To delete the Other Mouth layer, highlight the layer and click on the Trash can icon on the Timeline panel. • Test our animation by selecting Test Movie. • Proceed to create 10 frames for each of the other mouths sad, happy, angry, yucked, and jittery. Label each keyframe. Draw mouths appropriate to the rest of the newly keyframed mood. 12 Animate by motion tweening • Create an animation by filling in the missing frames between a start and an end posi- tions. • You will move the tongue of the yucked robot from left to right and back. • Create a separate Tongue layer by clicking on the Create New Layers tool on the Timeline panel. • Add a keyframe and frames corresponding to the yucked sequence. The keyframe is at frame 41. The frames should extend to frame 50. • Delete the frames on the Tongue layer beyond frame 50 by highlighting them and selecting Remove Frames on the contextual menu. • Convert the tongue shape to a Graphic symbol by selecting Modify Convert to Symbol and name it TongueGraphic. Copy it to the Tongue layer. • Add keyframes at frame 50 and at frame 45. At frame 45, move the tongue to the right. • Select a frame between the keyframe at 40 and the keyframe at 45. Select Insert Timeline Create Motion Tween. You can also right-click to bring up the context menu and select Create Motion Tween. • In the Properties panel, select the Motion option under Tween. • Do the same as above for a frame between the keyframe at 45 and keyframe 50. 13 • Frames that have Motion Tweens are highlighted light purple. • Test the movie. Notice that the animation moves the graphic between the keyframes. Animate by shape tweening • Create an animation by filling in the missing frames between a initial shape and a final shape. • You will animate the jittery robots mouth. • At keyframe 51, set the Motion Tween to Shape in the Properties panel. • Add keyframes at frame 60 and at frame 55. At frame 55 and with the jittery mouth se- lected, select Modify Transform Flip Vertical. 14 • Frames that have Shape Tweens are highlighted light green. • Test the movie. Notice that the animation blends the shapes between the keyframes. 15

5. Programming