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


Halloween Magic Ecard Animation

In the previous tutorial, we used the FlashR CS5 Glow filter to make a cat disappear. We will continue working on this ecard project by creating another magical effect using the same Glow filter. This time we will apply the filter to a witch's hat and broom, which will appear on the stage as the cat disappears from the stage. Because both of these tweens occur simultaneously, it appears that the cat turns into the hat and broom.

One decision that needs to be made is whether to use one graphic (the hat and broom together) or two graphics (the hat on one layer and the broom on another layer). The effect will be more realistic if we have the hat and broom on separate layers.

Let's begin with the hat on a layer just above the cat's layer. We will add the hat graphic to the stage on Frame 217 and convert it to a symbol. If you remember, Frame 217 is where the cat begins to disappear. So it would make sense that our hat will begin to appear on this same frame. Let's use the Alpha property over the next 15 frames to make the hat appear. Therefore the Alpha property will begin at 0% on Frame 217 and be 100% on Frame 232.

From Frame 232 to the end of the tween (Frame 287), we will use the Glow filter again, but in reverse. We will also use a Drop Shadow filter applied to the hat. This will create a little separation between the hat and broom so that they don't look like one big green blob.

On Frame 217, we will apply two Glow filters which have the same settings as the cat does at this point in the animation. The X and Y Blur are set to 100 pixels and the Strength is set to 200%. One Glow filter has the Inner Glow turned on. But this time we also add a Drop Shadow filter. We have set the X and Y Blur to 5 pixels, the Strength to 100%, the Angle to 45 and Distance to 5 pixels.

But we don't want the hat and broom to be visible until Frame 232. Let's put a Keyframe on Frame 232. Now we can go back to Frame 217 and set the Alpha to 0. This will cause the hat to gradually appear on the stage over the 15 frames (217 to 232).

For the next 55 frames, we will reduce the Glow filters so that the hat stops glowing. We will begin this transition with the Glow fitler settings as they are and change the settings for the end of the tween. To do this we will add a Keyframe on Frame 287 and reduce the X and Y Blur to 0 px and the Strength to 0% for both Glow filters. We will also adjust the Drop Shadow filter settings for the hat to look more natural now that the glow has been removed. Let's set the X and Y Blur to 17 pixels, the Strength to 145%, the Angle to 31 and the Distance to 0.

Our next step is to work on the witch's broom. We will place the broom graphic on Frame 217 and on a layer just above the hat's layer. One would assume that all we need to do now is to repeat the previous steps for the broom. However, the broom is a different shape than the hat and we will need to adjust the filter settings.

And there you have it. With just a few Flash filter tweens we have turn at cat into a hat and broom.

← Back

View the Pamela Gladding Ecard

Join us in the Flash forum.

Add Halloween+Magic+Ecard+Animation to Twitter Add Halloween+Magic+Ecard+Animation to Facebook Add Halloween+Magic+Ecard+Animation to MySpace Add Halloween+Magic+Ecard+Animation to Del.icio.us Digg Halloween+Magic+Ecard+Animation Add Halloween+Magic+Ecard+Animation to Yahoo My Web Add Halloween+Magic+Ecard+Animation to Google Bookmarks Add Halloween+Magic+Ecard+Animation to Stumbleupon Add Halloween+Magic+Ecard+Animation 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