Home >> Tutorials >> Motion Tween Animation with Motion Guides and Masks

Classic Tween Animation with Motion Guides and Masks

Introduction

In this tutorial you will be learning different ways to create animation using the unique layer types in Flash: mask/maked layers and motion guide/guided layers.

Making the Butterfly

1. Make a new Flash document, 550 x 400 pixels. Keep the background color white.
2. Using the oval tool, create a black circle, without a stroke. Make the circle approximately 100 pixels in diameter.
3. Select the circle, choose Modify -> Convert to Symbol and name it “circle – no stroke.” Give it movie clip behavior and make sure the registration point is in the center. The circle you just created will be the basis of your butterfly’s body.
4. Since the circle is already on the stage, (now as an instance of the “circle – no stroke” symbol), lets morph it into the butterfly’s body.
   1. Use the Free Transform tool to make the circle an oval that is wider than it is high (about 50 pixels high and 100 pixels wide)
   2. In the Property Inspector, in the Color Effect Drop Down Menu, change the tint of the circle to a pretty blue.
5. Now lets draw the wings. Choose a light green stroke color and the same fill color. Use the pencil tool (in smooth mode) to draw the following shape.
   
   You may need to smooth it out a bit after your draw it. Make sure the shape is closed, then fill the shape with the fill color. Remove the stroke.
6. Onece you are happy with the wing shape (above), select it and convert it to a symbol (Modify -> Convert to Symbol). Name it “wing,” and assign in movie clip behavior. Make the registration point in the bottom center.
7. Position the wing on the butterfly.
8. Go the Effects panel in the Property Inspector and choose Alpha. Lower it to about 60%.
9. Copy and paste the wing – so that you have two instances of the wing symbol on the stage, and position the second wing on the butterfly body.
10. Select one of the wings and move it behind the butterfly body (Modify -> Arrange -> Send to Back).
    
11. To put an eye on the butterfly, drag two instances of the “circle – no stroke” symbol on to the stage. Change their tints (via the Color Effect drop down menu in the Property Inspector) so that one is white and the other is black. Scale them down (using the Free Transform tool) so that they are very small (the black circle smaller than the white circle) and position them on the butterfly.
12. Your butterfly should now look something like this:
    

Now lets make the butterfly flap its wings.

1. Select everything on the stage and convert it to a symbol called “butterfly.” Choose movie clip behavior.
2. Double-click on this new symbol so that you can edit it.
3. Now you are no longer in your main movie, but rather editing the butterfly symbol.
4. First, move all contents of this symbol - just slightly so that the orgin point of the symbol is near the middle of the butterfly body.
   
5. We want this symbol to be 2 frames long. In the first frame, we will keep the butterfly as is, but in the second frame we want its wings to separate. Add a keyframe. (Insert -> Timeline -> Keyframe). By adding a keyframe you are copying the contents of the previous keyframe into the new keyframe.
6. While on frame 2, lets modify the butterfly’s wings.
   1. Select the wing in the foreground and then choose Modify ->Transform -> Flip Vertical. Move it back into place.
   2. Select the wing in the background, choose the Free Transform tool to flatten it vertically. Before you start transforming it, you should move the transformation registration point to the bottom of the wing.
   3. The butterfly in frame 2 should look like this:
      
7. If you hit enter you can preview the butterfly flapping its wings.

Setting the butterfly on its course

1. Return to the main movie (Scene 1) by clicking on the Scene 1 button in the top left corner of the stage.
2. There is just one layer in the movie. Rename it "butterfly".
3. Create a new layer - convert it to a GUIDE layer by double-clicking on the icon next to the layer name to open the Layer Properties dialog box. Then rename the layer “crazy path.” This layer should be above "butterfly."
4. Double-click on the icon next to the "butterfly" layer to open the Layer Properties dialog box and convert the layer type to GUIDED.
5. With “crazy path” as your active layer, use the pencil tool (in smooth mode) to draw a crazy path. Your path may look like the following:
   
6. Click on frame 30 in the “crazy path” layer. Choose Insert-> Timeline -> Frame. Now the path you just drew in the “crazy path” layer should extend for 30 frames. Lock the crazy path layer.
7. Click on frame 30 in the “butterfly” layer and Insert -> Timeline -> Keyframe.
8. Make sure that "Snap to Objects" is on. (View -> Snap to Objects).
9. While you are on frame 30, position the butterfly at the end of the path. Make sure it locks onto the path. You will see an open circle appear when you are about to lock the butterfly on to the path.
10. Now go to frame 1 and lock the butterfly's position to the beginning of the path.
11. Click on frame 1 of the butterfly layer, then Insert -> Classic Tween.
12. Preview the animation by scrubbing through the movie. You will notice that the butterfly wings do not flap. This is because Movie clip symbols do not preview while scrubbing through a movie. You must use Control -> Test movie to see the butterfly flap it's wings while flying along the path. You will see that the butterfly flies along the path but always stays oriented in the same direction.
13. Click on frame 1 on the "butterfly" layer then go back to the Property Inspector and under Tweening, check “Orient to Path.” The butterfly's nose will now follow the path.
14. Now prerview and then save your animation.

Adding an Animated Signature
We are now going to add your name to the bottom of this composition. An beam of light is going to pass through your name.

1. Click on your "Crazy Path" layer and then create a new layer - name it "Name." For now - the layer type should be Normal.
2. On this new layer, type your name somewhere near the bottom of the stage.
   1. Make sure that in the Property Inspector, the text type is "Static Text"
   2. Use about a 44 point, bold font
   3. Don't worry about the color – for now just make it a color that contrasts the stage.
3. In the Name layer, click on frame 30.
4. Choose Insert -> Timeline -> Frame
5. Add a new layer and name it “Gradient.” Move it so that it is below the “Name” layer.
6. Open the Color Palette. We are going to create a custom gradient by modifying an existing gradient.
   1. Choose the black/white linear gradient
   2. Click under the center of the bar displaying a preview of the gradient and add a color stop in the middle of it.
   3. Change the color of the outer color stops to the same dark color.
   4. Change the color of the center color stop to a light color.
      
      
      
7. The gradient you just made will now be your fill color. Draw a rectangle with no stroke and your new gradient fill on the Gradient layer. It should be a little bit taller than your text and at least 2.5 times as long. Place it so that the right edge just covers the name.
8. Modify the gradient using the Transform Fill Tool so that the light color is a small sliver. Also - angle it slightly.
   
   
   
9. Select the rectangle and convert it to a symbol called “gradient.” (Modify -> Convert to Symbol). Choose movie clip behavior.
10. In frame 30 of the Gradient Layer, insert a keyframe.
11. With frame 30 selected in the Gradient Layer, move the rectangle to the right so that it is still at the same height on the stage (hold down shift while moving it) but the left end of the gradient is aligned with the left end of your name.
12. Select frame one of the Gradient Layer and choose Insert -> Classic Tween
13. With the Name layer selected, choose Modify -> Timeline -> Layer Properties and change this layer to a Mask Layer.
14. Now select the Gradient layer and choose Modify -> Timeline -> Layer and change this layer to a Masked Layer
15. Lock both layers and hit enter to preview the results.
16. Save the animation. Test your movie. (Control -> Test Movie). You should see a white beam pass through your name.