This action might not be possible to undo. Are you sure you want to continue?
A N I M A T I O N
Table of Content
1. Creating and Editing symbols 2. The library panel 3. Using layers 4. Using the Timeline 5. Flash Animation Motion Tweening Tweening size and rotation Tint tweening Alpha tweening Shape tweening Ease option 6. Flash Animation Part 2 Motion Tweening using Motion Guide layer Shape tweening using shape hint Masking effect
1. To familiarize with Flash animation techniques.
1. Creating and editing symbols
However an instance can be very different from its symbol in color. 2. Movie clips i. animation or button. size.1. You can say the occurrence is the copy of a symbol that is placed on the stage. and function. Flash can handle three types of symbols: a. sounds. Movie clips have their own multi-frame Timeline that plays independent of the main movie's Timeline—think of them as mini-movies inside a main movie that can contain interactive controls. sound clips. Graphics i. An instance is an occurrence of a symbol on the stage. Use button symbols to create interactive buttons in the movie that respond to mouse clicks. Use movie clip symbols to create reusable pieces of animation. c. A symbol is a reusable image. 3. Whenever you modified any symbol such as the shape or color. b. The library panel 1. The Library panel displays a scroll list with the names of all items in the library. 2. Graphic symbols operate in sync with the movie's Timeline. A symbol can have many occurrence or copy where you do not need to draw the same shape. and then assign actions to a button instance. Use graphic symbols for static images and to create reusable pieces of animation that are tied to the Timeline of the main movie. An icon next to an item's name in the Library panel indicates the item's file type. To display the library panel choose Window > Library . 2. The library in a Flash document stores symbols created in Flash. bitmaps. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. rollovers or other actions. it automatically modifies the instances or the copy of the symbol. Buttons i. animation or button. Any symbol you create automatically becomes part of the library for the current document. For example. 4. You define the graphics associated with various button states. allowing you to view and organize these elements as you work. plus imported files such as video clips. and even other movie clip instances. Interactive controls and sounds won't work in a graphic symbol's animation sequence. and imported vector artwork. you can have more than one button in one page but you do only need to create one button and copy them on the stage.
Then the symbol properties will appear. or otherwise modify a layer or folder. You can also edit the symbol itself and change all the instances of that symbol. Where there is nothing on a layer. Using Layers 1. To edit symbol you have to go to symbol editing mode. When you create a new Flash document. skew. so that the instance is now a separate drawing. d. You can add more layers to organize the artwork. Create two or three instances. A pencil icon next to a layer or folder name indicates that the layer or folder is active. Symbols can have all the functionality that you can create with Flash. and transparency of an instance through the property inspector. Now. animation. To draw. You can transform. g. You can change or modify the properties of each instance without affecting other instances. You can create a symbol from selected objects on the Stage. Only one layer can be active at a time (although more than one layer can be selected at a time).3. you can edit the symbol as drawing where you can use all the drawing tools. you can convert your drawing into symbols. and other elements in your document. Layers are like transparent sheets of acetate stacked on top of each other. You can draw and edit objects on one layer without affecting objects on another layer. you select the layer to make it active. including animation. For example. Note that you cannot change the color using the drawing tool. To create instances drag the symbol icon to the stage. In this symbol editing mode. Once you created a symbol. 2. only the symbol itself will appear and the rest of the document will disappear. paint. you can see through it to the layers below. Choose Insert > Convert to Symbol. e. In the Library panel you can see that the symbol is listed. and rotate. 3. Creating and Editing symbols a. you can use instances of it anywhere on the stage. The . Give a name to the symbol and choose the appropriate type of behavior. or you can create an empty symbol and make or import the content in symbol-editing mode. You can also break apart the instance to break the link to the symbol. 3. c. Layers help you organize the artwork in your document. Click on an instance and choose Edit > Edit Symbol. You can also change the brightness. h. scale. Then you can modify this drawing and convert it to a different symbol. b. it contains one layer. f. To go back to the stage choose Edit > Edit Document. tint color.
9. It's a good idea to use separate layers or folders for sound files. and layers do not increase the file size of your published movie. You need to be careful not to draw. Rearranging layers a. . Creating layers and layer folders. You can also organize and manage layers by creating layer folders and placing layers in them. 6. create animation or insert symbols in the wrong layer. click the lock icon. or rearrange layers. To create a layer or layer folder click the Add layer or Add folder button at the bottom of the time line. Click the dot under the lock column on the layer you want to lock. 5. lock. Delete layers a. 11. Layers are very important because each layer can contain only one animation. You can expand or collapse layers in the Timeline without affecting what you see on the Stage. Click again on the red X to make to content visible again. To lock layer’s content a. 8. a. 7. 4. Click the dot under the eye column on the layer you want to hide.number of layers you can create is limited only by your computer's memory. To delete a layer click a layer and click the trashcan button at the bottom of the timeline. actions. To hide layer’s content a. to make sure you are working on the correct layer the pencil icon will appear next to the layer’s name to indicate an active layer. frame labels. You can hide. Look at the timeline panel. This helps you find these items quickly when you need to edit them. and frame comments. A red X will appear to indicate that the content of the layer is not visible. A lock icon will appear and to unlock the layer. To rearrange the position of the layer simply drag the layer up and down to desired position. You can lock the layer avoid accidentally modifying the content of the layer. 10.
you define properties such as position. 4. change color. motion tweening and shape tweening. Frames contained in each layer appear in a row to the right of the layer name. In short. The major components of the Timeline are layers. Layers in a document are listed in a column on the left side of the Timeline. or text block at one point in time. other changes. Tweened animation. 3. rotation. rotate. Flash varies the object's size. There are two methods for creating an animation sequence in Flash: tweened animation. a. In tweened animation. i. The Timeline header at the top of the Timeline indicates frame numbers. frames. 2. 3. or in concert with. . In motion tweening. you create the image in every frame which can be very difficult because you have drawn the changes in every frame. group. size. or change shape. You create animation in a Macromedia Flash MX document by changing the contents of successive frames. and the playhead. 5. You can make an object move across the Stage. you create starting and ending frames and let Flash create the frames in between. For example. Layers Playhead Timeline header Frames Current frame indicator Frame rate 5.4. and rotation for an instance. and frame-by-frame animation. Flash Animation 1. and then you change those properties at another point in time. fade in or out. The playhead indicates the current frame displayed on the Stage. 2. In frame-by-frame animation. increase or decrease its size. you can make an object rotate and fade in as it moves across the Stage. tweening is the graduated changes between two keyframes. color. Flash can create two types of tweened animation. Changes can occur independently of. Using the Timeline 1. 4. or other attributes evenly between the starting and ending frames to create the appearance of movement. You can also apply a motion tween along a path.
and then you change that shape or draw another shape at another point in time. and choose Insert > Create Motion Tween. While keyframe 25 is selected click on the object and under the Property Inspector. you create keyframes at important point in the timeline and let Flash creates the frames in between.ii. A keyframe is a frame when you specify changes in an animation. While keyframe in Frame 25 is selected. b. Tint Tweening (Color) a. Flash interpolates the values or shapes for the frames in between. you can see the empty keyframe is now become a filled keyframe indicating there is a graphic or object in it. If you open a new document. When you draw an object. there is an outline and fill. Press Enter to see the result. So . 5. automatically. Draw a shape and convert it into graphic symbol. 8. Draw a shape and convert it into graphic symbol. 7. choose Color > Tint and change to different color. Tweening motion is graduated changes in the position of the object. you draw a shape at one point in time. b. there will be one layer and in that layer is an empty keyframe. Change the percentage to 200% to make the object twice larger and under rotation change to 180 to create a rotation motion. Next Select Frame 25 and insert a keyframe. Tweening size and rotation a. Motion tweening. Keyframes are indicated by a circle in a frame. In tweened animation. Remember that if you draw a shape. there is an outline and fill. use the Arrow tool to move the instance to a different position. Add another layer and rename as alpha tweening. 9. In shape tweening. Now select Frame 15 and insert a keyframe. Alpha Tweening (Fade out) a. go to the transform panel. creating the animation. click the Frame 1 of the tint tweening layer and choose Insert > Convert to Symbol. Tint tweening is the graduated changes in the color of the object. Click on the first keyframe which will select the object you have drawn. Alpha tweening is the graduated changes of the transparency of the object. If it doesn’t appear choose Window > Transform. So you must select both to convert them into symbol. a. under the Property Inspector choose motion under the tween droplist. Keyframes that contains no graphics will be blank. Remember that if you draw a shape. Next go to frame 25 of tint tweening layer and insert a keyframe. 6. Using keyframes in animation. Next go to the first frame of the tint tweening layer. While keyframe 15 is still selected. Note that Flash will automatically convert your graphic into symbol. Add another layer and rename as tint tweening. b. Press Enter to see the result. a. To be safe. c.
To be safe. You can see on the time line. Shape tweening is the graduated changes of the shape of the object. While keyframe 25 is selected click on the object and under the Property Inspector. Next go to frame 25 of shape tweening layer and insert a blank keyframe. Click Frame 1 of guide layer and draw a line using the pencil tool. Start drawing from the center of the object to the position you want the object to move. However shape tweening cannot be used on a symbol or a group. 2. Ease option a. or text blocks can be animated. Draw a shape. 4. the frames for shape tweening is green instead of purple. there is an option under the Property Inspector called ease. Motion tweening using Motion Guide layers 1. choose Color > Alpha and change the percentage to 0. If it is set with positive value the tweening effect will begin rapidly but slowing towards the end. Add another layer and rename as shape tweening. c. the tweening effect will start slowly but accelerate near to the end of animation. b. While in keyframe 25. groups. You can link multiple layers to a motion guide layer to have multiple objects follow the same path. Next go to frame 25 of alpha tweening layer and insert a keyframe. Open a new document and then create a shape and convert it to graphic symbol. If you set the ease settings to negative value. Motion Guide 3. Click the motion guide button at the bottom of the timeline to insert a motion guide layer. For both motion and shape tweening. A normal layer that is linked to a motion guide layer becomes a guided layer. Similar to motion tweening. under the Property inspector. choose shape under the tween pop-up list. 10. 6. . but you use it to change the shape of the image. Rename Layer 1 as Motion. It lets you specify a route or path the object is going to follow to move from one place to another. under the Property Inspector choose motion under the tween pop up list. click the Frame 1 of the alpha tweening layer and choose Insert > Convert to Symbol. Shape tweening a. d. Next select frame 20 and insert a keyframe. draw a different shape.you must select both to convert them into symbol. It can only be used on drawings. Motion guide layers let you draw paths along which tweened instances. b. Make sure you use the smooth modifier. 11. Next go to the first frame of the alpha tweening layer. Then go back to Frame 1 of shape tweening layer.
Press ENTER to see the result. c. Position the shape hint on the top and bottom of both characters in both Frame 1 and Frame 20. e. iv. instead of the face becoming an amorphous tangle while the shape change takes place. In frame 20 change number 1 to two. Create two layers and name the top layer “Circle” and the bottom one “text”. Go back to Frame 1 of Motion layer and under the Property Inspector motion in the tween pop-up list.5. b. let us create one shape tweening example. an instance of a graphic symbol. if you are tweening a drawing of a face as it changes expression. Create a circle on the circle layer and convert it to a graphic symbol named “circle” d. iii. you can use a mask layer to create a hole through which underlying layers are visible. You can group multiple layers together under a single mask layer to create sophisticated effects. make it a large and thick font. A mask item can be a filled shape. b. Repeat the step again to add another shape hint. each eye remains recognizable and changes separately during the shift. a. Open a new document. . To use the shape hint click Frame 1 and choose Modify > Shape > Add shape hint. To see the difference with and without using shape hint. i. ii. Go to Frame 20 of Motion layer use the arrow tool and make sure the snap button is activated and move the object at the end of the line. 2. a type object. You can use a movie clip as a mask to create a hole through which the contents of another movie clip are visible. For example. then choose Modify > Break Apart to turn it into shape. 7. you can use a shape hint to mark each eye. Shape hints identify points that should correspond in starting and ending shapes. Do the same in Frame 1 and choose Modify > Break Apart to turn ‘1’ into shape. On frame 1 of the text layer type in the word “Masking”. Then. 6. you can use shape hints. Choose Insert > New symbol and choose movie clip as the behaviour. or a movie clip. Open a new document. Insert a keyframe at frame 30 on the text layer. Masking effect 1. Under the property inspector choose shape in the tween pop-up list and press ENTER to see the result. For spotlight effects and transitions. 8. To control more complex or improbable shape changes. Next click on Frame 20 and insert a keyframe. Shape tweening using Shape hint. c. Make sure the center of the object is on the very end of the line. Using the text tool type number 1 on the stage using a large and black font on Frame 1. Press ENTER to see the result. a.
f. h. In your circle layer on frame 1 place the circle on the left side of the masking text. Add motion tweening from frame 1 to frame 30 on the circle layer. j. Right click and select Mask. Go back to the main stage. Place your cursor on the Layer name Circle. open the Library panel and drag your masking movie clip to the stage. The circle should move across the text now. i. k. On frame 30 places the circle on the opposite side of the masking text. g. Insert a keyframe at frame 30 on the circle layer. .
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.