VIEWS: 29 PAGES: 7 POSTED ON: 4/17/2010
Animations in Flash Objectives: 1. To learn different kinds of animations in Flash 2. To be familiar with tweening production in Flash 3. To learn the usage of masks 4. To grasp other concepts: group (群組), library (元件庫), importing (匯入) external objects, and layers As we have learnt from last lecture, Flash can generate in-between frames between two keyframes, so that when the series of frames are played, the animation effect is produced. There are three main types of animation in Flash: Motion tweening Shape tweening (color, size, or shape) Tweening with a motion path In general, we follow the procedures below to achieve animations: 1. Insert a keyframe on the time line where the animation starts 2. Draw the object which it looks like at first 3. Insert a keyframe on the time line where the animation ends 4. Draw the object which it looks like after the animation, which may include a change in: Position (either following a moving path or not) Any one or a combination of the followings: Color Size Shape 5. Create the tweening from the property window of the begining frame Let’s go through the following activities to learn each of the above types of animation. We will also learn how to use mask layers in Flash to produce special animation effects. Activity Two A: Tweening Motion In this activity, we learn how to creating motion tweens in Flash. Motion tweenings require the corresponding objects to be grouped. This is also covered in this activity. 1 Insert the First Keyframe 1. Open a new document in Flash. 2. Draw a square on the stage as shown. (this automatically adds a keyframe to frame one) Insert the Last Keyframe 1. Click on frame 15. 2. Select 插入時間軸關鍵影格. 3. Use 選取工具 to move the square to the right hand side of the stage. [Now press Enter to play the scene. You will notice that the square stay at the original place as frame 1 through out the first 14 frames, but “jump” to its new position in frame 15.] Grouping the Shapes 1. Go to frame 1. 2. Use 選取工具 to double click on the square (this select both the stroke and fill). 3. Select 修改群組. The square is now enclosed by a blue rectangle. 4. Go to frame 15 and repeat the Step 1 to 3. Create Motion Tween 1. Go to frame 1. 2. On 屬性視窗 (if it is not on the workspace, click 視窗屬性), select 移動 for 補間動畫) 3. You can notice that the time line now becomes: 4. On 屬性視窗, 旋轉: choose 順時針 and 1 次. 5. Play the movie by pressing Enter. 2 [Note: If the shapes are not grouped, motion tweening is not possible.] Activity Two B: Tweening Size, Color and Effects (Shape Tweening) In this activity, we learn how to perform tweening on size, color and effects with shape tweening. Unlike motion tweenings, shape tweenings require all the objects involved to be broken apart (or ungrouped). Insert the First Keyframe 1. Open a new document in Flash. 2. On frame 1, draw an orange circle. Insert the Final Keyframe 1. Insert a keyframe in frame 15. 2. Delete the circle and draw a green rectangle on frame 15. 3. You can also apply other effect on the square. Create Shape Tween 1. Go to frame 1. 2. On 屬性視窗 (if it is not on the workspace, click 視窗屬性), select 形 狀 for 補間動畫). 3. You can see that the time line now becomes what is shown on the figure. Now play the movie to see what happens. You can also add more shapes to frame 15 to observe the effect. [Note: If the objects are grouped, or are texts themselves, you must break them apart before shape tweening is applied. This can be done by 修改打散 (for objects that are broken apart, there will be no blue rectangle enclosing them)] Activity Two C: Tweening with Motion Path (Optional) Go through Activity One B on last lecture to revise tweenings with motion path. [Note: For this type of tweening, an object is placed at one end of the motion path at the first frame, and placed at another end at the last frame.] Activity Two D: Creating Spotlight Effect with Masks The mask layer reveals the area of linked layers beneath the filled shape. To create a 3 mask, you specify that a layer is a mask layer, and either draw or place a filled shape on that layer. You can use any filled shape, including groups, text, and symbols, as a mask. In this activity, we also learn how to import external objects into the Flash library. External objects refer to the files that are not created inside Flash, such as image files, sound files and video files. They need to be imported (匯入) before they become part of the Flash movie. You can think of the library (元件庫) as a depository where a copy of the objects can be withdrawn from it and can be used at any part of the current Flash movie. Importing External Objects 1. Download 2d.jpg from the course homepage and save it on your local computer. 2. Open Flash MX 2004 Professional. Select 檔案匯 入匯入至元件庫 3. Now 2d.jpg has been imported into the library (元件庫). [Select 視窗元件庫 to view the library if it is not there] Add the Image and the Mask 1. Drag the image of 2d.jpg from 元件庫 to the stage. 2. Name the current layer as “image”. 3. Insert a new layer and name it as “mask”. Right click on it and select 遮色片. Drawing the Mask (1) 1. On the mask layer, draw a circle at the upper left hand corner. 2. An alert message as shown will pop up. Click 是 to proceed. 4 3. Draw the circle. And group the circle. Drawing the Mask (2) 1. On the image layer, insert a frame (choose 插入時間軸 影格) in frame 20. 2. On the mask layer, insert a key frame in frame 20. 3. Move the circle on frame 20 of the mask layer to the right hand side. And group the circle. Add Motion to the Mask 1. On frame 1 of the mask layer, on 屬性視窗 (if it is not on the workspace, click 視窗屬 性), select 移動 for 補間動畫). 2. Preview the movie from a browser by choosing 檔案 發佈預覽預設. Add a Dark Background 1. Insert a new layer under the wrong image layer. Name it “darkness” (Make sure this layer is placed as the position shown in the “right” figure) right 2. On frame 1 of darkness layer, draw a rectangle (with dark stroke and dark fill. Hint: You need to set up the fill and stroke color before you draw the rectangle) which exactly enclose the image. 5 Layer Concepts in Flash After the above activities, you will start to notice about the layer concept in Flash. Layers are used on the timeline to organize objects. Placing objects on their own layer makes them easier to work with. The layers are viewed from top to down, which is illustrated in the following figure (Rectangle is at the topmost layer and Circle is at the bottommost): You can also perform the followings on layers: Through the previous activities, you can experience that there are different types of layers. In Flash, there are six types of layers: 1. Normal-default layer: All objects on these layers appear in the movie 2. Guide (Standard and Motion): Standard guide layers serve as a reference point for positioning objects on the stage; while Motion guide layers are used to create a path for 6 animated objects to follow 3. Guided: a layer that contains an animated object, linked to a Motion Guide layer 4. Mask: a layer that contains and reveals portions of another layer 5. Masked: a layer that contains the objects that are hidden and revealed by a Mask layer 6. Folder: a layer that can contain other layers Exercise: Simulation using mask, guided motion and tweened animation Study the two Flash files: earth0.fla and earth1.fla to analyze the technique that have been covered in this lecture. [Note: For both files, you need to double click on the earth to open its details (because the contents are converted to symbols, which will be covered in next lecture)] 7
"Animations in Flash"