You've created a motion tween and have tried drawing. This lesson will teach you how to have your motion tween follow a predefined path, how to create a shape tween, and how to use basic text.
Let's return to our last Flash movie where you took your red circle and added keyframes at frame 20 and then frame 10. Save a copy of this .fla movie and name it 'motion_tween2.fla'.
1. Delete the keyframe at frame 10 by right clicking on the keyframe and choosing 'clear keyframe' from the context-sensitive drop-down menu. Now you will have a keyframe in frame 1 and in frame 20.
2. Next we'll add a special kind of new layer. We will add a motion guide layer and create a path on the guide. First, be sure that your layer is named 'circle.' On the bottom left of the timeline to the right of the 'add new layer' icon is the 'Add Motion Guide' icon.
When you click the Add Motion Guide layer button, a few things happen to your layers.
The new layer that is created is already named. It's named 'Guide,' followed by the name of the layer beneath it. The image for a motion guide appears to the left of the name. The circle layer becomes indented underneath the guide layer so that you can distinguish these layers from the others that are following the guide.
Of course you can change the name of the guide layer but Flash names it appropriately to assist you in organizing the content of your movie. The guide layer is the current layer. You can tell because it's black with reversed white text and has the pencil indicating that you can create or edit objects on that layer. Guide layers are never displayed in your final movie. They are only there to help you position objects.
3. With the guide layer selected and the playback head in frame 1, get your pencil and set the options to smooth.
Draw a curvy line like hills and valleys similar to those in the graphic below. It's OK if your line starts or ends in the gray canvas area.
4. Make sure your snap to magnet is on. You can do this on the main toolbar or in the options for the arrow tool in the toolbox. When Snap To is on, you can grab the center of your symbol (or wherever you position the registration point of your symbol) with the arrow tool and move it to the beginning of the curvy line you drew in the guide layer above.
You'll notice that the crosshairs remain in the center of the symbol and as you drag the symbol, only an apparent outline of the round shape with a small bold round ring in the center seems to move. Snap this small round ring to the beginning of the guide line and the entire symbol will snap into place or appear to jump into position. You have now snapped the symbol in frame 1 to the beginning of the guide in the layer above it.
The outline of the shape with the center identified as a bold ring moves but the actual selected symbol stays in place until you snap the center to the guide and release the mouse button. Then the symbol jumps into position and is considered snapped to the guide.
Make sure you put your cursor in the center of the symbol and drag to snap it to the motion guide.
5. Go to frame 20 of the circle layer and do the same procedure with the instance of the symbol, snapping it to the end of the line. Press enter to play your movie. Is your symbol now going up THE hills and down THE valleys as it animates from red to blue and large to small? Your stage and symbols should be larger than mine below, but the tween and movement should be similar.
If you got your motion tween movie done correctly, it's time to move on and swap symbols. Download this .fla file now to get the symbol of a mouse. You're going to exchange the circle symbol with the mouse symbol as described in the instructions below.
Note: If you are unable to download the mouse.fla, please just draw a simple represeNtation of a mouse - the animal, not the computer accessory!
Download this mouse-mx Flash.fla file into the same folder where you are creating your homework for this course. To get this mouse symbol into the library of your current movie, you can do one of these two things:
1. Go to File>Open as Library and select the mouse.fla. This will open ONLY the library for this .fla movie, NOT the movie itself. Then, you can drag the mouse symbol from the open library onto your stage or into your open library for your current movie.
OR
2. You can open the mouse.fla movie and drag the mouse symbol from its library into your library or onto your stage.
Either way, once the mouse symbol is in your current movie, you can close the original mouse.fla or its library.
If you don't see the mouse in the upper pane of the library window select the symbol named 'Mouse' in the bottom part of the library. This will display the image of the mouse in the top part of the library. Take your computer mouse and click on the mouse image, hold down, and drag the mouse image onto your stage. This will make the mouse graphic symbol part of your library so you can close the other library. View the library associated with your current movie by using Control + L. You now have the red circle symbol and the mouse symbol in your library.
Speaking of Libraries, take time to explore the common libraries of buttons, sounds, and animations accessible under the Window Menu - Window>Common Libraries. Using these pre-made symbols can assist you in learning. You can always exchange them with your own designed symbols after you get your animations developed. Flash has a Swap button on the Properties Panel that makes it very easy to use these as placeholders and then insert your individual graphics later. As a matter of fact, I'm going to show you how to exchange a symbol right now.
1. Delete the mouse symbol image from the stage. Remember that it's automatically added to your current movie's library. Open your library and check for sure. You should have 2 graphic symbols: the circle and the mouse. Select the red circle. Open your Properties Panel if it's not already open. You'll see information about the selected instance. Below you can see that the name of my selected symbol is 'red circle'; it has been assigned the behavior of a graphic symbol. It says 'Loop' in the drop-down menu and 1 in the First: field. Notice that the selected object is an 'Instance of: red circle.'
Ignore the 'Loop' and 'First: 1' fields for now but notice the first button on the left which is the Swap button. Click the Swap Symbol button to open the Swap Symbol Window. This is a list of all the symbols in your library. I have only two in this library but I had 234 symbols in the library for the toolbox interface movie. The symbol that is selected will be highlighted and a black dot will appear to the left of the symbol's name. A preview of the symbol shows in the preview window on the upper left.
7. Click on the mouse symbol's name to select the mouse symbol and press the OK button. You can also double click on the mouse symbol's name to select it and automatically close the Swap Symbol window. If you re-open the window, the mouse symbol should now have the black dot to the left of its graphic icon and name.
You just swapped your symbol in your movie and positioned the mouse on the stage in frame 1. You won't be able to see this happen because once you double click on another symbol, Flash closes the swap symbol window. Open the window again to be sure that the mouse is selected or just look at your stage and see that the mouse has replaced the red circle in frame 1.
8. Go to frame 20 and replace the instance of the red circle symbol with the mouse symbol again. Now, press your enter key to play the movie. Is the mouse moving up the hills and dales to get across the stage? Did the mouse take on the effects and transformation attributes that you assigned to the circle in frame 20? It should!
Make your mouse do some tricks!
Note: There is a difference between clicking on a frame to select the frame, and clicking on (selecting) the object on the stage at a particular frame. Make sure to view the PI to see the element you have selected. The PI is context-sensitive and will highlight whatever is selected. Sometimes students try to change the color of an object on the stage but they have the frame selected and not the object. Review Lesson 2 for PI samples with different elements selected.
Go back to frame 1. Lock the guide layer so that you don't accidentally select the line. Select frame 1 of the circle layer. In the Property Inspector (PI) panel, change the Tween drop-down to Motion. Some new parameters will appear in the Property Inspector. Below the Tween parameter, click on the Rotate drop-down, and set it to CW, which means Clockwise. Next to it is a "Times" box; set it to 3. This will cause your object to rotate clockwise 3 times. Now play the movie.
Go back to the PI for the frame and move the slider for easing up to 100. Play the movie again. Now set the ease slider to -100. Notice the difference? With easing at 100, the mouse begins to tumble fast but ends more slowly. With easing at -100, the mouse begins slowly and picks up speed as it nears the end.
What if I want both the red circle and mouse to animate at the same time?
Do you have any ideas how to achieve this? In order to motion tween more than one symbol simultaneously each motion tween has to be on its own layer. Not only is this helpful for organizing your content, it simply won't work if you don't! (At least not for basic linear animations - more things are possible when you animate with scripting but that's beyond the scope of this course).
1. With the 'circle' layer selected, click on the 'Insert Layer' button. Don't click the add motion guide layer. This is an important step. You must be on the 'circle' layer and click the add new layer button. The new layer will appear on top of the circle layer but still beneath the 'guide' layer. This will enable you to use the same motion guide for both motion tweens.
2. Rename the layers appropriately because the layer you originally named 'red circle' has the mouse symbol on the stage. Change the original layer name to mouse and call the new layer red circle.
3. Select frame 4 of the 'red circle' layer. Insert a blank keyframe at frame 4 (F7) of the red circle layer. Drag an instance of the 'red circle' to the stage and position it on the left side of the stage. Snap it to the guide.
4. Insert a keyframe at frame 30 of the 'red circle' layer. Did your guide path and mouse disappear from the stage? Mine did. That's because the mouse and guide layers end at frame 20. To extend them to frame 30 select frame 30 of the guide layer and Insert Frames by going to the Insert Menu - Insert>Frame. I use the F5 keyboard shortcut. Select frame 30 of the mouse layer and insert frames to extend all the layers to 30 frames. You now have a keyframe at frame 30 with the symbol of the red circle in that frame.
5. Select frame 21 of the renamed 'mouse' layer and insert a blank keyframe by right clicking and selecting insert blank keyframe from the context-sensitive menu. I use F7 keyboard shortcut. You can also go to the Insert Menu - Insert>Blank Keyframe. The blank keyframe stops the animation of the mouse at frame 20. You want to stagger BOTH the entry and the exits of the two symbols. The mouse will disappear from the stage at frame 20. Make sure you have this part correct before moving on.
6. Return to frame 30 of the red circle layer and reposition the instance of the red circle. You can apply tint or alpha effects, scale, transform, etc. I distorted mine by shrinking the width but maintaining the height creating an oval. I made the color yellow in the tint options of the PI color drop-down menu. Snap the instance to the end of the guide in frame 30. Select a frame between frame 4 and 30 and open the Properties Inspector. Add a motion tween and select a counter clockwise rotation (CCW) of 3. Play your movie. Here's my finished motion_tween2.swf. Note that the mouse comes on stage before the circle (oval) and the mouse disappears while the oval is still moving across the stage. Please note that the PI panel will reflect properties for the selected frame.
The real power of symbols is re-using them. So here's one with a cotillion of mice, all created from one symbol. I still have only two symbols in my library: the red circle and the mouse. When Flash publishes my movie, it will reference the symbol once, keeping my file size small. The file size of the movie above is 3K. The file size of the movie below is 5K. Re-using symbols is one of Flash's greatest features. Use it freely and have fun!
What if I want to make the mouse morph into the circle?
This is where shape tweening comes in. If you have a solid understanding of the basics of motion tweening, go on to shape tweening. Otherwise, spend some more time with this lesson.
Please continue to the next section of this lesson.
