Tutorial > Animate instances
Animate instancesFlash offers several different ways of animating instances using either frame-by-frame or tweening techniques. In tweening animation, you define how an instance appears in one keyframe, then define how the same instance appears in the next keyframe. Flash automatically creates the animation between the two keyframes. For this tutorial, you'll create two different types of tweening effects: motion tweening of the kite and shape tweening of the kite string.
How will you know which kite to animate if your movie has nine possible kite combinations (three kite models multiplied by three kite colors)? Will you have to animate all nine kites? Fortunately, no. Instead, you will use a kite placeholder to assist you with setting up the animation. Later in this tutorial you'll create a function that determines which kite the customer selected. Based on the information the function receives, an external SWF movie clip of the selected kite will appear in the animation instead of the placeholder.
In preparation for tweening, you need to change the registration point of the kite media.
By default, the registration point of a symbol in a SWF file is in the symbol's upper left corner.
The tutorial links a kite placeholder to external SWF files of kites, which will rotate slightly in your movie. You need to move the registration point of the kite instance placeholder, so that when it's replaced by a kite SWF, the SWF will rotate around its center point rather than around its upper left corner.
The Edit Center command lets you make an instance's center of rotation different from that of the symbol.
1 | In the Timeline's labels layer, locate the first frame labeled kite flight loop (Frame 168) and click the frame to move the playhead to that location. |
2 | Select the kite that appears on the Stage. |
3 | If the Instance panel is not open, click the Instance Panel button in the Launcher bar.
![]() |
Note that when the kite symbol is selected, in the Instance panel its symbol name is placeholderKite, and its instance name is demoKite. Later in the tutorial, after you add ActionScript to your movie, the kite the customer selects will replace the demoKite instance while the movie plays.
![]() |
|
4 | Choose Modify > Transform > Edit Center. |
The registration point becomes visible and selected. | |
5 | On the Stage, drag the registration point, the small cross, to the approximate center of the kite.
![]() |
![]() |
Create motion tweening for the kite
After customers select a kite, they click the Fly It! button to see the invoice while the kite flies. To achieve the effect of the kite floating around the sky, you'll add motion tweening to your movie.
For this motion tweening, you will define kite properties such as position, size, and rotation for an instance at one point on the Timeline, and then you will change those properties in keyframes that you insert in the Timeline. Flash creates the content of the frames in between the keyframes.
Add the keyframe for the end of your animation
As you add keyframes, keep in mind that you can insert the keyframes anywhere you want the animation to change; except for the first and last keyframes, you don't need to insert the keyframes in the exact frames specified in the tutorial.
1 | In the Timeline's kite layer, verify that the playhead is on Frame 168. |
Note the keyframe, which will indicate the start of your animation. Also notice the guideline on the Stage, which displays the path the kite will snap to. In the Timeline, this path is in the Guide:kite layer, which is a guide layer, a special layer you can create to assist in placing objects on the Stage. | |
Guidelines exist only to help authors assemble media along a path; they do not appear in the published Flash movie. You can recognize guide layers in the Timeline by their icon.
![]() ![]() |
|
2 | Use the pop-up menu at the lower left of the application window to increase the Stage size to 800%.
![]() |
Now notice that the path is not one continuous shapeit has a small break where the animation ends. | |
3 | In the Timeline's kite layer, move the playhead to Frame 229 and choose Insert > Keyframe. |
Check the status display at the bottom of the Timeline to confirm that you selected the correct frame. | |
An ending keyframe appears in Frame 228, which is where the motion tween will end. | |
4 | With the Stage still zoomed, and the playhead on Frame 229 of the kite layer, drag the kite slightly to the right, so that the registration point is on the other side of the path. |
You're defining where the kite will be at the end of the animation.
![]() |
|
Note: If your registration point is already on the other (right) side of the path, your animation will not work. Redo the steps to change the registration point, this time moving the point to the left of where you placed it before. | |
5 | Resize the Stage to 100%. |
![]() |
Now that you have defined the start and end of your animation, you will use the Frame panel to specify that the tween will be a motion tween.
1 | In the Timeline's kite layer, click any frame between 168, the beginning of the animation, and 228, the end of the animation, so that just the frames in between those two keyframes are selected. |
2 | Choose Window > Panels > Frame and select Motion from the Tweening pop-up menu. |
3 | Verify that Snap is selected. |
Snap ensures that the kite instance attaches to the guideline by its registration point.
![]() |
|
In the Timeline, you can tell that the motion tweening is implemented correctly if a solid line appears between the keyframes, and the frames have a light blue background. | |
A dashed line between keyframes indicates the tweening is not implemented correctly, which often occurs when a beginning or ending keyframe is accidentally deleted.
![]() |
|
![]() |
Add the intermediate keyframes
Now you'll add the intermediate keyframes that define where the animation will change.
1 | In the Timeline's kite layer, with the playhead on Frame 175, press F6 to insert a keyframe. |
On the Stage, the kite has moved along the path to its position relative to Frame 175.
![]() |
|
2 | Also in the kite layer, insert keyframes in Frames 184, 198, 207, and 214. |
![]() |
The animation will be more realistic if the kite changes in size and rotates as it moves along its path. To achieve this effect, you will make the kite larger and smaller where you've added keyframes, and you'll rotate the kite.
1 | With the kite layer still selected, move the playhead back to Keyframe 175. |
![]() |
Note: If you inserted keyframes in different frames from those specified in the tutorial, you can scale and rotate the kite wherever you inserted a keyframe.
2 | In the toolbox, select the Arrow tool and the Scale modifier. On the Stage, click and drag one of the outside corner sizing handles around the kite to make the kite slightly larger.
![]() |
3 | Select the Rotate modifier. On the Stage, move the mouse pointer over one of the kite's corner handles.
![]() |
The pointer changes into four curved arrows.
![]() |
|
4 | Click and drag the corner handle to rotate the kite approximately 30° clockwise. |
5 | Move the playhead to Frame 184. On the Stage, use the Rotate modifier to move the kite approximately 60° counterclockwise. Use the Scale modifier to make the kite smaller. |
During the animation, the kite will appear to be flying farther away. | |
6 | Move the playhead to Keyframe 198. On the Stage, use the Scale modifier to make the kite smaller.
![]() |
7 | For Keyframes 207 and 214, use the Scale tool to make the kite larger. |
8 | To view the kite-flying animation, drag the playhead from Frame 168 to Frame 228. |
![]() |
Note: Remember to save your work frequently.
The kite animation stops when the playhead reaches Frame 228. To make the kite fly continuously, you'll add a looping attribute.
1 | In the Timeline's actions layer, insert a keyframe in Frame 228, and then double-click it to open the Frame Actions panel. |
2 | Click the Actions icon to expand that category, then double-click goto in the Toolbox list.
![]() |
3 | In the Type pop-up menu, select Frame Label. |
4 | In the Frame pop-up menu, select kite flight loop. |
The Timeline includes a label called kite flight loop. The first frame within the kite flight loop label is Frame 168. You are specifying that the playhead loop from Frame 228, where you inserted the keyframe, back to Frame 168, the start of the animation. | |
5 | Verify that Go to and Play is selected, then close the Frame Actions panel. |
![]() |
Create shape tweening for the kite string
To animate the kite, you used motion tweening. To animate the kite string, you will use shape tweening: you will draw a shapein this case, the stringat one point in the Timeline, and you will change that shape at later points. Flash alters the shape for the frames between the beginning and ending keyframes to create the animation.
1 | In the Timeline's string layer, insert a keyframe (F6) in Frame 168, which is the frame where you started the kite motion tween. |
2 | In the toolbox, select the Pencil tool. Click the color box to display the pop-up window, and select a pale shade of yellow. |
3 | From the Pencil Mode modifier, select Smooth. |
4 | To open the Stroke panel, choose Window > Panels > Stroke. In the Stroke Size pop-up menu, move the slider to select 2, or type 2 in the Stroke Size text box. |
5 | On the Stage, draw a line that curves from the spool to the target "bull's-eye" in the approximate center of the kite.
![]() |
6 | If necessary, use the Arrow tool to select the string on the Stage and select the Smooth modifier repeatedly until the line resembles a string.
![]() |
7 | In the Timeline, add a keyframe to Frame 230 of the string layer. |
In addition to the keyframe in Frame 230, an end keyframe appears in Frame 229. | |
8 | In Frame 231, choose Insert > Blank Keyframe so the string will not appear in the movie from that frame on. |
![]() |
To prepare for shape tweening, you might find it helpful to lock the kite, sky, and Guide:kite layers in the Timeline to avoid accidentally moving those objects on the Stage.
1 | In the Timeline's string layer, click any frame between Frames 168 and 229 so that just the frames in between those two keyframes are selected. |
2 | If the Frame panel is not open, choose Window > Panels > Frame and select Shape from the Tweening pop-up menu. |
As with motion tweening, a solid line between keyframes tells you that you executed the tween correctly. The Timeline indicates shape tweening with a light green background. | |
3 | Move the playhead to Frame 168. Slowly drag the playhead to the right across the Timeline until the string appears to have separated from the kite. Add another keyframe at this point in the Timeline. |
![]() |
Note: The gap between the kite and string can be fairly prominent before you need to add a keyframe. You do not need to add a keyframe for a small separation between the kite and string.
4 | Select the Arrow tool in the toolbox. If the entire string is selected, click anywhere on the Stage to deselect it, then drag the top of the string so that it again appears to be attached to the bull's-eye. |
5 | Use the Arrow tool, with the Smooth modifier selected, to maintain the line's curved shape by selecting and dragging from a point around the middle of the line. |
You are setting up the animation so that the kite string never looks as though it has separated from the kite.
![]() |
|
6 | As you continue to move the playhead slowly to the right, add a keyframe to the string layer each time you see a prominent gap between the kite and the string, then repeat steps 4 and 5 as often as necessary until you reach the end of the animationFrame 229. |
7 | To view the animation, move the playhead to Frame 168 and choose Control > Play. When you finish viewing the animation, choose Control > Stop. |
![]() |
Note: Remember to save your work frequently.