logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
English Garden
Costuming
Charity
Women's Fashion
Pop Music


dailyclick
All times in EST

Genealogy: 06:00 PM

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash Site
Diane Cipollo
BellaOnline's Flash Editor

g

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 →





RSS | Related Articles | Previous Features | Site Map


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

Digg! g delicious Save to Del.icio.us

g


For FREE email updates, subscribe to the Flash Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
Flash Motion Editor and Presets

Flash CS4 Object-based Animation

Adobe Flash CS4 – 3D Tools

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Driving Amount
Much more
Slightly more
Slightly less
Much less

g


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


BellaOnline Editor