This morning I presented about how you can use some of the preset eases in Flash to create animation really quickly. This post provides a real quick overview about how I built the files, and has the source FLAs for you to look at in Flash CS4.
I provided an overview of the Motion Editor near the beginning of my part of the presentation. This may be better as a separate blog entry, so watch for that soon here (or in the mean time, check out product docs).
I started off with a FLA where I moved a car up and down using a Random ease (to create pseudo random movement of the Y property). If you start with this file, car-rain-start.fla, you create a motion tween inside the car instance for both the headlights and the car body. Move to the end of the tween span, select the car on the stage, and press the down key three times to move the car downwards on the Stage. Now open the motion editor and add the Random ease in the Eases section (use the Add button). Change the value to 100. Then apply the Random ease to the Y property. I then repeated this for the headlights, applying random to the Y movement again, and also the Alpha and Glow Blur X and Y properties. Here’s the finished FLA file,car-rain.fla, and SWF below:
Make sure you have Flash Player 10 installed to see the 3D: http://www.adobe.com/go/getflashplayer.
View full size animation (need Flash Player 10)
Next I demonstrated how to use a different ease, a Sine Wave, to create an animation that gradually fades in and out. In the following animation, I have 5 movie clips that contain a transparent FLV file of fog. All of them are stacked over top of each other and have a different tint color applied, and I flipped some of them horizontally or vertically so the video looks different in each. I want to fade them in and out over the entire tween span so you can see the overlapping colors more (cross fades) and they fade in at the beginning of the animations so they don’t start abruptly because they’re offset by 50 frames each. Here’s a SWF:
View full size animation
So what I did was open this starter file, fog-start.fla (extract and test the file and see what it looks like to compare the untweened instances), and right-clicked the static spans of frames and chose Create Motion Tween. So you have tween spans that you can animate. Select one of them, and add a Sine ease in the Eases section of the Motion Editor. Change the value (the hot text) to 8 (it needs to be an even value to fade in at the beginning and out at the end). Go up to the Alpha property of the color effect, and make sure the playhead is at the first frame of the tween span (playhead is at the leftmost position in the motion editor). Change the Alpha property to 0. Then move the playhead to the end of the tween span (frame 722). Change the alpha property to 100%. Now there’s a tween that fades in across the entire span from 0% to 100%. Apply the Sine ease to the Alpha property using the menu. This means it will fade in and out for that property.
Now right-click the property graph for Alpha, and choose Copy Curve. Select the other tweened instance, and right-click the property graph and choose Paste Curve. Add a Sine ease to this second instance (I set mine to a different value – 10, again, needs to be even) and then apply it to the Alpha property. Done! Here is the finished version of the file.
Let us know of any questions in the comments, and we’ll be posting more information about eases soon.