Basic Operation of Flash MX Professional 2004 (Main Tutorial) This Tutorial provides you Basic Operation for Flash MX Professional 2004. After this training, you will be able to create simple animation. To create a complex and attractive animation, you need a lot of practice(experience). In this training, the Section 2. [1], please be familiar with Basic drawing in Flash. So please try to draw anything you want. When you draw, please use Drawing Reference which tells you the detail how to use of Tools in Tools Panel. From Section 2. [2] to 3. [1], you will learn a process to create a simple animation. Contents Page 1. Preparation 2 2. Let s create a animation! 3 [1] Let s draw something anyway!! 3 [2] Create an Animation Symbol 4 [3] Create a Car 6 [4] Create a Background 8 3. Create an animation(motion Tween) on the Scene!! 8 [1] Final procedure 8 4. Publish HTML file 10 [1] Publish HTML file 10 5. Another Technique 11 [1] Shape Tween 11 [2] Motion Guide 12 [3] Mask 14
1. Preparation [1]. Open Flash MX Professional 2004. [2]. Open the Document Properties. On the Menu Bar Modify Document Please set the parameters as shown below. Set the Color which you want Set the Frame rate when you need 2
2. Let s create an animation! [1] Let s draw something anyway!! (1) Create New Symbol. (2) Dialog box pops up, give a name for the New Symbol, then click OK. (3) You will get Symbol editing mode Stage below. This tells you that you have Symbol editing mode. This case, you have the editing mode of the Symbol Practice. To close this mode, click Scene1 button. (Stage) (4) Now, you can draw something with Tools. Try to draw whatever you want on the Stage, reference material(flash Drawing Basic) gives you the information of how to use the Tools on the Tools Panel!! (5) When you finish editing, click Scene1 button which is on the upper left corner of the Timeline window to close the editing mode Stage. Note: Created Symbol will be stored in the Library. To open the Library window Menu Bar Window Library 3
[2] Create an Animation Symbol Step1. Create a Element(a tire) which you need in the Animation. (1) Create a New Symbol (Symbol name: tire). (2) Draw a circle with Oval Tool. Then put the text on the circle. (3) Close the editing mode Stage(Click the Scene1), when you finish drawing. Step2. Create an Animation Symbol of the symbol tire which was created in Step1. (1) Create a New Symbol (Symbol name: tiremovie). Then open Library window. Menu Bar Window Library (2) Select Symbol tire in the Library, then drag this onto the Stage. See (Fig.1). (Fig.1) 4
(3) Click the final frame where you want on the Timeline. See (Fig.2). Then insert Keyframe. Menu Bar Insert Timeline Keyframe First Frame Click here!! (Fig.2) (4) You can set Motion Tween for the final frame with the Properties Panel at the below of the Stage. Select Motion on the pull down menu of Tween. (5) Click the first frame, then set Motion and Rotate(CCW, 10times). See (Fig.3). (Fig.3) Note: If you set Motion Tween successfully, you get a arrow line between the first and final frame(fig.4). If you don t get the arrow, you had wrong way with the procedure you had. So you have to check the setting which you have done. (Fig.4) 5
(6) Press Enter key to play the movie. (7) Save. Menu Bar File Save Then close the editing mode Stage(Click the Scene1). [3] Create a Car Step1. (1) Create a New Symbol (Symbol name: body) (2) Draw a body of a car. See (Fig.5). (3) Close the editing mode Stage(Click the Scene1), when you finish drawing. (Fig.5) Step2. (1) Create a New Symbol(Symbol name: car) (2) Open Library window. Menu Bar Window Library 6
(3) Drag the body and two tiremovie into the Stage. See (Fig.6) You can change the size of the objects with Free Transform Tool ( Tools Panel. ) on the (Fig.6) (4) Select 3 elements (body and 2 tiremovie). Menu Bar Edit Select All (5) Make these 3 elements as a group. Menu Bar Modify Group (6) Create Animation Symbol of car. Click the final frame where you want on the Timeline. Then insert Keyframe. Menu Bar Insert Timeline Keyframe (7) You can set Motion Tween for the final frame by the Properties Panel at the bottom of the stage. Select Motion on the pull down menu of Tween. (8) Set Motion Tween for the first frame. (9) Save. Close the editing mode Stage(Click the Scene1). 7
[4] Create a Background (1) Create a New Symbol (Symbol name: background) (2) Draw mountains with Pencil Tool or Brush Tool. See (Fig.7). (3) Close the editing mode Stage, when you finish drawing. (Fig.7) 3. Create an animation(motion Tween) on the Scene!! [1] Final procedure (1) Drag Symbol background onto the Scene. Resize the background with Free Transform Tool, if you need. (2) Click the final frame, then Insert frame. Menu Bar Insert Timeline Frame (3) Click the Insert Layer Button on the left bottom of Timeline window to add New Layer. See (Fig.8). So you will get Layer 2. Insert Layer Button (Fig.8) 8
(4) Click the first frame on the Layer 2, then drag Symbol car onto the Scene. Resize the car with Free Transform Tool, if you need. Locate the car on the right side of the Scene. (5) Click the final frame where you want on the Timeline on the Layer 2, then Insert Keyframe. Menu Bar Insert Timeline Keyframe (6) Set Motion Tween for the final frame on the Layer 2 by the Properties Panel at the bottom of the stage. Select Motion on the pull down menu of Tween. Then locate the car on the left side of the Scene. (7) Set Motion Tween for the first frame on the Layer 2 too. (8) Menu Bar File Save (9) Press Ctrl+Enter to see the result. 9
4. Publish HTML file [1] Publish HTML file (1) To set Publish Setting. Menu Bar File Publish Setting You will get the dialogue box below, please check HTML and Flash are selected on Formats tab. (2) Then click Publish Button. Note: Published files will be created into the same folder which contains original file( ~.fla). Published ~.html and ~.swf file should be in the same folder, and works together. If you want to show your works in the Internet, please put both ~.html and ~.swf files in the same folder. (3) Close the File. Menu Bar File Close 10
5. Another Technique [1] Shape Tween (1) Create New Project. Menu Bar File New (2) Set the Document Properties. Menu Bar Modify Document (3) Create 2 of New Symbol, in this training, I created 2 letters, A and G. (4) Open the Library window. Menu Bar Window Library (5) Drag the one of the Symbol texta into Scene1 Stage. To get the bitmap image of the texta, it is necessary to break apart of the Symbol. Menu Bar Modify Break Apart Note: Shape Tween needs the bitmap image to transform from the Symbol to the Symbol. In this case, twice procedure is necessary to get bitmap image of the text. If you do this procedure successfully, you get the meshed object below. 11
(6) Click the first frame on the Timeline. Set Shape Tween for the first frame by the Properties Panel at the bottom of the Stage. See below. (7) Click the final frame where you want on the Timeline. Then insert Blank Keyframe. Menu Bar Insert Timeline Blank Keyframe (8) Click the final frame, drag the another Symbol textg into the Scene1 Stage. (9) Click the final frame again. Do the break apart twice. Menu Bar Modify Break Apart (10) Click the final frame on the Timeline. Set Shape Tween for the final frame by the Properties Panel at the bottom of the Stage. (11) Press Ctrl+Enter to see the result. (12) Menu Bar File Save (Arrow with light green background) Note: If you do this procedure successfully, you get the Timeline above. (13) Close the File. Menu Bar File Close [2] Motion Guide (1) Create New Project. Menu Bar File New (2) Set the Document Properties. Menu Bar Modify Document 12
(3) Create a New Symbol. Draw Object, then drag the Symbol into the Scene1 Stage. (4) Create the Motion Tween for the Symbol. (5) Click the Add Motion Guide Button on the left bottom to add Motion Guide. So you get a Guide Layer on the Timeline. See below. Click this button (6) Draw a winding(any) line with Pencil Tool on the Guide Layer. Click the first frame on the Guide Layer, then draw a line. (7) Select Arrow Tool. Click the first frame of the Layer1. Place the cursor on the center of the Object, then drag to the beginning edge of the line. See below. When the center of the object come close to the edge of the line, the center automatically stick to the edge. In that instant, release the mouse button. Drag (8) Click the final frame of the Layer1. Drag the object to the end edge of the line with same way above. (9) Press Ctrl+Enter to see the result. Save, then close the File. Menu Bar File Close 13
[3] Mask (1) Create New Project. Menu Bar File New (2) Set the Document Properties. Menu Bar Modify Document Background Color: #333333 (3) Create a New Symbol(Text). Then Drag the Symbol into the Scene1 Stage. (4) Add 2 of New Layers. Change the name of Layers to the same as shown below. Dabble click the name of Layer, so you can rename of it. (5) Select the Layer(text1), click the object(text) on the Scene1 Stage. Copy the object. Menu Bar Edit Copy Select the Layer(text2) just above the Layer(text1). Paste the object on the Layer(text2) at the exactly the same point as Layer(text1). Menu Bar Edit Paste in Place (6) Change the Brightness of the text on the Layer(text2). Click the Layer(text2), then click the object on it. Change the Brightness as 50% on the Properties Panel. 14
(7) Change the Brightness of the text on the Layer(text1) just below the Layer(text2). On the beginning of this procedure, it is necessary to hide the object on the Layer(text2). To do this, click the dot which is on the Layer(text2) below the Eye mark. After click the dot, the dot will change into the Red Cross. Now you can see the object on the Layer(text1). Click the dot here (8) Change the Brightness of the text on the Layer(text1). Click the Layer(text1), then click the object on it. Change the Brightness as -50% on the Properties Panel. (9) Show the object on the Layer(text2). Click the Red Cross on the Layer(text2). (10) Create a New Symbol(circle). You can use any color. Click the Layer(mask). Then Drag the Symbol into the Layer(mask) the Scene1 Stage. Note: How does the Mask work? The circle on the Layer(mask) show only the area on the Layer(text2) which covered with the circle. In this case, we can see the Brightness 50% area on the Layer(text2) through the circle window on the Layer(mask). On the Scene1 Stage, we can also see Brightness 50% area(dark) except the area covered with circle on the Layer(text1). Totally, the Trick shows us that the light shows the letters in the dark place. See below. 15
(11) Extend the duration of both Layer(text1) and Layer(text2). Select Layer(text1), click the frame position of 60. Menu Bar Insert Timeline Frame Select Layer(text2), click the frame position of 60. Menu Bar Insert Timeline Frame (12) Set Motion Tween on the circle. Select Layer(mask), click the first frame of it. Locate the circle on the left edge of letters. Set Tween: Motion on the Properties Panel. Click the frame position of 30. Menu Bar Insert Timeline Keyframe Locate the circle on the right edge of letters. Click the frame position of 60. Menu Bar Insert Timeline Keyframe Locate the circle on the left edge of letters. (13) Place the cursor on the Layer(mask), then right click. On the pull down Menu, select Mask. (14) Press Ctrl+Enter to see the result. (15) Menu Bar File Save Menu Bar File Close 16