Class: Name: Class Number: Date: Computer Animation Basis A. What is Animation? Animation is the illusion of motion created by the consecutive display of images of static elements. In film and video production, this refers to techniques by which each frame of a film or movie is produced individually. [Source: http://en.wikipedia.org/wiki/animation] Traditional animation is a sequence of frame drawn manually. An animation movie needs to play at 24 frames per second (fps) so a ten second animation requires 240 frames. To save time and effort, designers usually keep most of the images identical (e.g. the background behind a character) but only draw moving parts such as individual characters. As computers have become more powerful, computer generated animation has become more popular. Computer generated animation has many advantages over the traditional hand-drawn animation. Furthermore, they can generate highly detailed mathematical graphics with such as precision that cannot be drawn by hand. [Reference: http://en.wikipedia.org/wiki/computer_animation] Graphics file formats like GIF, MNG, SVG and Flash(SWF) allow animation to be viewed on a computer or over the Internet. B. Why Flash Animation? Flash movies are graphic and animation for web sites. They consist primarily of vector graphics, but they can also contain imported bitmap graphic and sound. Flash movies are compact, so it is small in file size and therefore quick to download. Flash can be used for basic interaction. It also supports the user s own programming capabilities which allows both beginners and advanced users to use their imaginations more fully (e.g. using Flash Action Scripts). [Example: http://www.eye4u.com] C. Knowing the working environment of Macromedia Flash (The version of Flash currently discussed in this set of note is Flash MX 2004, on the day of issuing this note, Flash 8.0 has been released to market, for further details, please visit: ) Typical startup of Flash MX Professional 2004 pp.1/8
D. Starting the first animation Motion tween Working in Flash is pretty simple. There is a Tools Panel on the left of the working environment. Try using Pencil Tool and Brush Tool to draw line and shape. The Paint Bucket Tool will help you fill colour to shapes. The Transform Tool helps you to modify the appearance of the shape you made by rotating, shearing, or resizing. Remind you, if the Tools Panel is not on the working environment, find it at Window Menu > Tools. Once you start to work in Flash, you are at the stage the working environment. Timeline Stage Properties Panel Task 1: Drawing a car [Familiarize the usage of tools in Flash] File > New a) Create a car which looks like this: b) Fill the car like this: c) Convert the car into a symbol by selecting all the image > Modify menu > convert to symbol with Behaviour as Graphic and name this symbol as car. (Select centre as the Registration) Save this file in your folder as car.fla, which allows you to go on your editing. Check the presence of the car symbol by viewing Window > Library. Task 2: Make the car move! [Motion Tween in straight line] 1. Now the car symbol is on the stage, put it to the right and resize it. You should notice that your car symbol is on the first frame on the Timeline Panel. 2. Then create a Keyframe at the 48 th frame in the Timeline by right-clicking the 48 th frame and choose Insert Keyframe. 3. Move the car on the stage to the left, which is supposed to be the ending position of the animation. That means in the pp.2/8
animation, the car moves from the right to the left. 4. Select the first Keyframe and right-click it, select Create Motion Tween. A successful Motion Tween is created if you see Keyframes a light blue background formed with a solid arrow on the Timeline. 5. Click Enter at the keyboard to test the animation. Or CTRL+Enter to preview it. Please note that when you click CTRL+Enter, somehow you have exported the *.fla to *.swf, which can be viewed by Flash Player alone. Challenge: What can be changed to speed up the animation? Task 3: Car moving in the street [Working with Layers] You should have recognized that what you are working with the car is the Layer 1 in the animation. We are going to put a background for the car to make it like moving in the street. 1. Click the Add Layer button in the Timeline. 2. Change the name of the layers for easier recognition, e.g. Layer 1 > Car, Layer 2 > Background. 3. Drag the Background to the bottom of the stack of layer. This will make sure the scene you are going to draw will not cover the movement of the car. 4. Draw a nice scene on Background layer and test the animation. pp.3/8
E. Motion along a curve Motion Guide Task 4: Car moving on the curve! [Guide layer] To make a symbol move along a non-linear path, you can use the Guide Layer to help you. 1. Find the Add Guide Layer button in the Timeline Panel. Click the button and add a Guide Layer right above the layer with the symbol you want to move. 2. When the Guide Layer is still activated, draw a curve with Pencil Tool on the stage. With starting and ending position against the first frame and the last frame of the animation. 3. Adjust the registration (mark) of the symbol so that it will fall on the guide you have drawn. 4. Test the animation to see if the symbol run on the curve. In preview mode, the guide will be invisible. F. Changing the symbols Shape tween Task 5: Let s tween the shapes 1. Draw a circle for the first frame. 2. Insert a Keyframe in the 48th frame. 3. Delete the circle and draw a square on the stage instead, it can be on the same position as the circle or change the position if you like to. (Note that, so far, you are not asked to convert anything into symbol!) pp.4/8
4. Select the first frame and note the change to the Properties Panel, select Tween > Shape. A green background will be shown on the Timeline Panel against a solid arrow. This means your shape tweening is successfully made. 5. Test the animation and you will see the circle dissolve into a square in shape tweening. If the location of the shapes are not the same, they will move while having the shape tweening. Task 6: Shape tween with text [Break apart] 1. Start a new file. Work at the first frame. 2. Click the Text Tool on the Tools Panel. Enter a line of text (e.g. Hello World! ) in the text box. Select font face with thick stroke will show better effect (e.g. Arial Black). 3. At the 48 th frame, insert a Keyframe and delete the original text box with Hello World!. Insert another text box of similar size and key in another line of words (e.g. Wonderful! ). 4. As Flash MX 2004 will treat all text boxes as symbol, you have to break apart the text boxes before instructing for a shape tweening. Modify > Break Apart. For a line of words, you have break apart twice until all the text completely covered with dots. Remember to break apart the text boxes for both first frame and the last frame. 5. Select first frame, go to the Properties Panel and choose Shape for Tween. Test the animation. 6. You will find it funny to see the in-between of the shape tweening of text. Challenge: Try to modify the car.fla so that the car finally changes to a rocket in the animation. pp.5/8
G. Using Mask in animation Mask effect can create the spotlight effects and transitions. You can use a mask layer to create a hole through which the contents of one or more underlying layers are visible. You can group multiple layers together under a single mask layer to create sophisticated effects. You can also use any type of animation, except Motion Guide, to make the mask move. To create a mask layer, you place a filled shape on the layer. The mask layer reveals the area of linked, underlying layers that lie beneath the filled shape, and it conceals all other areas. Mask layers can contain only a single shape, instance, or type object. Task 7: Let s make the mask layer! 1. Select or create a layer containing the content that will be visible through the holes in the mask. 2. With the layer selected, add a new layer above it. 3. Draw a filled shape, place type, or create an instance of a symbol on the mask layer. Any filled area will be completely transparent in the mask; any non-filled area will be opaque. Here in the example, a very big letter A is placed on the mask layer. 4. Same as motion tween, create another Keyframe for the mask (in this case, it is frame 48). Then choose Create Motion Tween in the menu after right-clicking the first frame. 5. Right-click the layer to be the mask (Layer 7), select Mask. To help you to observe the mask with greater ease, a grey layer (Layer 9) is inserted behind Background Layer. 6. Observe the change at the icon next to the layers. pp.6/8 7. Move the layers to observe the changes in the relationship of the mask layer and others. If the layers are on the wrong match, the solid arrow will become broken line, indicating a failed tweening resulted.
H. Some additional fun with motion tween i) Orientation of object In motion tweening along a curve, it will be quite awkward if the object skids along the path. Imaging what it looks like for a car running on a curve without changing the direction of its head. 1. Create a circular path for the car as shown. 2. After setting the starting and ending position of the car, select frame 1 and go to the Properties Panel. 3. Check the box Orient to Path and adjust the position of the head of the car by the Transform Tools. ii) Rotation Rotation may help rolling object look more normal. 1. Create a ball as a symbol. 2. Insert a Keyframe and relocate the ball, making it rolling downhill. 3. Create motion tween as usual. 4. Select the Rotate as either CCW (counter-clockwise) or CW (clockwise) and let the symbol rotate twice in the motion tween. 5. Test the animation. pp.7/8
iii) Easing Easing helps the symbol in the animation move in different speed. You may test the effect with the ball animation created in the last example. 1. On the last example with a ball, select the value of 100% for the Ease box. 2. Observe the speeding up motion of the ball. Remarks: A positive easing value means a slowing down action (deceleration). A negative easing value creates a speeding up action (acceleration). Easing can be applied on rotation, motion tweening, shape tweening and motion tweening with guide layer. iv. Changing Alpha, Tint and Brightness When we want to create some changes in the colours of symbol during the playing of the animation, we can select the Keyframes and click the instance of the symbol. You have to do for the both starting and ending Keyframe. The Properties Panel will change accordingly and allow you to change the colour properties at the Colour box. Alpha: changing the transparency of the instance Brightness: changing the brightness Tint: changing the colour of the instance pp.8/8