Printer Friendly Version

BellaOnline's Flash and Animation Editor

Adding a Drop Shadow to Flash Animated Object

One of the best additions to the FlashR techniques was the ability to animate filters. In this tutorial, we will create a very simple bouncing ball animation and then animate a shadow to follow the ball.
  1. Start a new project in Flash CS3. Use the default document settings for an ActionScript 3.0 movie.

  2. On the Timeline, rename Layer 1 to "Shadow". This layer will contain our shadow animation.

  3. On Frame 1 of the Shadow layer, draw a circle with the Oval tool. In the Property Inspector, set the Fill to any color you like and the Stroke to null. Set the Width and Height to about 80 pixels. We want the ball to start in the upper left corner of the stage. Set the X and Y positions to 50.

  4. In order to animate the ball, we need to convert it to a symbol. The ball should still be selected. From the Menubar, click Modify Convert to Symbol. In the dialog box, name the symbol "Ball" and set the Type to Movie Clip.

  5. Our animation will be about 30 frames long, which will make the mid point for our animation Frame 15. On Frame 15, add a Keyframe (Insert Timeline Keyframe) and move the ball to the bottom center of the stage. In the Property Inspector, set the X position to 260 and the Y position to 300. This will leave enough space at the bottom for the shadow.

  6. Frame 30 is the last frame for our animation. On Frame 30, add a Keyframe and move the ball to the upper right of the stage (X 480, Y 120).

  7. It's time to create the animation. Right click on any frame between 1 and 15 and choose Create Motion Tween from the menu. Repeat this for the second section of the animation.

    Click Control Test Movie. Your ball should bounce once across the stage and then repeat.

    Now we are ready to add the Drop Shadow filter. For the example, I decided that the sun will be high in the sky and the shadow will be directly under the ball. Therefore, I set the Angle of the Drop Shadow filter to 90 degrees. You may wish to experiment with the Angle property of the filter to suggest that the light source is at a different angle.

  8. We want the shadow to be at the bottom of the stage even when the ball is at the top. Therefore the Distance between the ball and its shadow will be larger than when the ball is close to the bottom of the stage. Also, when the ball is at the top, the Strength of the shadow will be less.

    On Frame 1 of the Timeline, select the ball. Go to the Filters tab and click on the Plus sign. Choose Drop Shadow from the Filters menu and set the following values.

    Blur X and Y: 20
    Strength: 30%
    Quality: High
    Angle: 90
    Distance: 150

Next →

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor