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

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

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation 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 →




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


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


Content copyright © 2014 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


g features
Particle Fog in Motion 5 - Scene Graphics

Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor