g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

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 →

Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Twitter Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Facebook Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to MySpace Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Del.icio.us Digg Adding+a+Drop+Shadow+to+Flash+Animated+Object+ Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Yahoo My Web Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Google Bookmarks Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Stumbleupon Add Adding+a+Drop+Shadow+to+Flash+Animated+Object+ to Reddit


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

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

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


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor