facebook google plus twitter
Webucator's Free Adobe Flash CS6/CC Tutorial

Lesson: Advanced Animation

Welcome to our free Adobe Flash CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Flash CS5 Training course.

If you ask ten Flash designers to build the same file, you will likely find ten different approaches. This is possible because Flash is very flexible and gives you many options. Let's take a look at some of the additional ways of working with animation.

Lesson Goals

  • Learn to create masks.
  • Learn to create motion with inverse Kinematics.
  • Learn to morph with Shape Tweens.

Demo: Copy and Paste Motion

In Flash movies, it is very common to repeat motion. For example, if you have a series of text chunks that will all slide in performing the same fade in, there is no need to create the motion several times. If you create one motion, it is easy to repeat it for the other objects, therefore making sure they match.

Try it with us by opening AdvancedAnimation/demos/Animation1.fla. Scrub the timeline to see what is provided. Notice that there are a number of words waiting to slide in from the left side of the screen. The word "run" is already animated. Let's repeat that motion for the other words.

  1. Right-click on the tween on the timeline (run layer) and select Copy Motion (or select Edit > Timeline > Copy Motion).
  2. Now, select frame 1 on the layer named "with". Again, right-click on the frame and select Paste Motion (or select Edit > Timeline > Paste Motion).
  3. Scrub the timeline. Does it do what you expect?

We will work on this file further in the next section.

Demo: Creating Motion Presets

If you want to repeat a motion again and again you can store it as a Motion Preset. These stay with the application, so you will be able to use your custom presets on other documents in the future.

  1. Either continue with your own file or open AdvancedAnimation/demos/Animation2.fla.
  2. First, let's replace the animation for the word "run" with a Motion Preset for a more complicated animation.
  3. Open the Motion Presets Panel and select the tween on the race layer.
  4. Apply the "fly-in blur left" preset. You will be asked whether you want to replace the existing motion. Choose "Yes."
  5. Modify the animation any way you like (for example, adjust the position at the end of the tween stretch the animation to take more or fewer frames, adjust the path of the animation, etc...).
  6. Add the drop shadow filter back to the first keyframe for the tween. (It was removed since it was not a part of the Motion Preset.)
  7. When you are satisfied with your changes, you are ready to save it as a Motion Preset. Right-click on the timeline in the Motion Tween and select Save as Motion Preset...
  8. Name your preset something like "fly in words".
  9. You are now ready to apply your custom preset to the other words. Click on the next word and open the Motion Presets Panel. In the Custom Presets folder you will find your new preset!
  10. Click Apply.

Create Photo Gallery using Motion Presets

Duration: 20 to 30 minutes.

In this exercise you will build a photo gallery that automatically slides photos in and out. They will also fade in as they enter, and fade out as they leave.

Import and Prepare Images

  1. Open the file AdvancedAnimation/exercises/PhotoGallery.fla
  2. Import several images to the Library from AdvancedAnimation/exerices/galleryphotos.
  3. Create a new layer and name it Photo1.
  4. Drag an instance of one of the images to the new layer just off the stage to the left.
  5. If desired, use the Transform Panel to set the height and width.
  6. Convert the image into a symbol.
  7. Drag each of the photos out to the stage make any size adjustments. Convert them each into symbols named photo2, photo3, photo4, etc.Use a Motion Preset to Slide in Pictures
  8. With the first photo positioned off the screen in the starting position, Single-click on the photo. Open the Motion Presets Panel.
  9. Find fly-in-left and click Apply. It will add about 24 frames.
  10. We want this photo to remain visible for about 1 full second, and then fly out to the right. To do this, add a Blank Keyframe in the very next frame (frame 25).
  11. Copy the photo from frame 24 and paste it in place (Control+Shift+V) on frame 25. The photo will stay in this location until the next keyframe.Photo Slide-out
  12. Add another keyframe in Frame 50.
  13. Using another motion preset, add a motion tween to slide the photo out. This should run from frames 50 to 75.
  14. Position the photo off the screen in the ending position.
  15. Test your movie!Add Additional Photos
  16. To add several additional photos, you may repeat the above steps. Or, follow this shortcut:
  17. Add an additional layer. Remove any frames in the new layer.
  18. Click on the name of the "Photo1" layer. Choose Edit > Timeline > Copy Frames to copy all the frames of this layer.
  19. Click on the first frame of the new layer and paste the frames (Edit > Timeline > Paste Frames)
  20. Single click on a photo to select it. In the Properties Panel, click on the Swap... Button.
  21. Select the next photo. Finishing the animation
  22. So far, our photos will all slide in simultaneously. Probably not what we want!
  23. To fix this drag each of the animations farther down the timeline so that they play one at a time.
  24. Test your movie!

If you are done early...

  • Add additional photos to the gallery.
  • Use other motion presets to change some animations

Creating Masks

A mask creates a hole through which you can see the layers below. Masks in Flash are very similar to masks in Photoshop or other graphics programs. Imagine looking through a set of binoculars. You can only see through the lenses. As you move around, you can see other areas. A mask works the same way.

Open the following example saved as AdvancedAnimation/demos/Mask.fla.

Notice that the icons for the layers in the screenshot above are different than most layers. The circle layer is the mask layer. Also, the masked layer (flowers) appears to be indented as if it were in a layer folder. Any additional layers may be added to the masked section by dragging underneath the mask layer. To remove a layer from the mask, just drag it up or down.

Please be aware that if the layers are not locked in the Flash Timeline, you will not be able to see the mask on the stage. This phenomenon only occurs in the flash program, once the animation is properly previewed, or published, the mask layers work properly.

Any layer can be turned into a mask layer.

  1. Right-click on the layer and select Mask.
  2. Or, right-click on layer and select Layer Properties (or Modify > Timeline > Layer Properties).

Animating Masks

Animating a mask is no different than animating any other layer. Any object on a mask layer may be converted into a symbol and tweened.

Open the example saved as AdvancedAnimation/demos/Mask-Animated.fla. Scrub the timeline and you will see the mask moves across the screen. Test the movie to see the final product. If the animation does not render out the way you expected, please check to make sure your layers are locked.

Motion with Inverse Kinematics

Animating a ball bouncing or car stopping is one thing, but what if you want to create animation with a natural looking structure for movement - like a skeleton? Flash CS4 introduced Inverse Kinematics which allows for lifelike movement of objects. You can literally create a bone structure that spans between instances on the stage. This allows for different poses that are animated much like tweens are animated.

In order to use the Bone Tool in this way, your objects must be symbols. (In a later section you will see how to use the Bone Tool on Shapes.)

Open our example, saved as AdvancedAnimation/demos/IK-demo-done.fla. Use the selection tool to drag the pieces and watch how they move.

If you would like to try, open AdvancedAnimation/demos/IK-demo.fla. Using the Bone Tool (), click and drag from the first piece to the second. Then, click again from the second to the third. The point you click will be the joint.

Above, you can see the first bone in place. Below, you can see how they move together when dragged.

Constraining Joints

To ensure your bone structure doesn't bend in unnatural ways, you will need to contain the movement of some joints. Think about how an elbow works. You probably cannot bend your elbow in all directions. It is constrained to a certain range of motion.

You may also assign constraints to any joint in the Properties Panel. When you check the constrain box, you will see a small guide which shows the angles to which motion is constrained. Change the angle values in the Properties Panel.

Click on any of the bones and look in the Properties Panel. You will find categories related to the joint. Rotation is enabled by default, but uncheck the box if you do not want the join to rotate.

Demo: Inverse Kinematics

Let's get some practice with IK animation!

  1. Open AdvancedAnimation/demos/IK-runner.fla.
  2. Select the Bone Tool. To create a natural skeleton, start on the upper torso, and then click and drag to the head.
  3. Go back to your original starting point. Click and drag to one shoulder. Then, click and drag from the shoulder to the elbow. Repeat for the second arm starting again at the torso.
  4. Continue adding bones. Connect the torso to the pelvis. Connect the pelvis to the legs.
  5. Once your skeleton is built, switch to the selection tool. Drag the bones and watch the connected bones move!
  6. Add additional frames. Click at some point in the future and add a pose by reposition the figure.
  7. Add several different poses and test the movie.

Inverse Kinematics with Shapes

You may add similar bone structures to simple shapes. Maybe you will want a tree that blows in the wind or a fire that flickers back and forth. Create any shape and select the bone tool. You can click and drag within the shape to provide a structure for movement.

The screenshot above shows a drawing of a fire. Notice that several keyframes have been added and the flames have been repositioned to provide the animation.

Morphing with Shape Tweens

Shape Tweening morphs one shape into another. You have learned by now that Motion Tweening must be done on instances of symbols. Shape Tweening, on the other hand, must be done on shapes.

To create a Shape Tween, place a shape in a keyframe. Add a blank keyframe later on the same layer with a different shape in that keyframe. Hoover over the proper frame and layer, then Right-click on the timeline between the two keyframes and select Shape Tween.

Open our example, saved as AdvancedAnimation/demos/ShapeTween.fla.

Using Shape Hints

The closer your two shapes, the easier the transition between them. If you have many complicated shapes involved in the tween, you may end up with some odd looking shapes in between. Shape Hints will help! Shape hints allow you to decide how the shapes will morph by placing hint markers at the beginning and ending shapes.

Click on the first keyframe of a shape tween. Select Modify > Shape > Add Shape Hint. A small letter will be placed on the stage. The placement of this shape is important. Place it at a spot you want to control. Then, click the next keyframe and reposition the small letter at the end where you wish the beginning to morph to. The hints guide the way the shapes morph. Keep in mind, more is not always better. You will want to test after each placement as each placement will affect the outcome.

Open our example, it is saved as AdvancedAnimation/demos/ShapeTween-hints.fla.

If you are done early...

  • Add poses in later frames to make the dog move.

Animation with Inverse Kinematics

Duration: 15 to 20 minutes.

In this exercise, you will use an IK animation for lifelike animation using our silhouette of a dog.

  1. Open AdvancedAnimation/exercises/dog.fla. Click around to discover which objects are on the dog layer.
  2. Click on the Bone Tool. Start in the upper torso and build a skeleton that connects the torso to the legs, tail and head.
  3. In the first keyframe, position the dog in the starting position.
  4. Add a new keyframe in a later frame and reposition.
  5. Test your movie. Does your dog move as expected?