Adding a Drop Shadow to Flash Animated Object

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 →

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map








Content copyright © 2023 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.