Fade in/Fade out moving movie clips in Flash

This is a step by step tutorial for fading moving movie clips in Flash.
In this tutorial we will be fading in or out moving objects in flash using a simple technique. You are sure to learn new tricks in this flash tutorial. Fade in and fade outs are common in flash web, well, lets make it fade while moving.

Tutorial Overview

Completion time: 20 mins
Difficulty level: Advanced
Programs used: Adobe flash cs4 or lower

Step 1
We need to make the canvass. Choose any dimension you want.


Step 2
In my example I've used a simple rectangle which I animated to fade in while going from left to right.Use the rectangle tool(R)  and draw a rectangle.

Step 3
Use the selection tool(V) to select the rectangle(both its fill and border).

Step 4

Convert the selected rectangle into a movie clip by pressing F8.I named my movie clip "rectangle".

Step 5
In the timeline, click on frame 20(you can also change this).
Then make a key frame by pressing F6. And create a classic motion tween by right-clicking between frames 1and 20. And choose Create classic tween.

Step 6
Lets animate, step a:start by pressing frame one in the timeline.
step b:And move the rectangle to a new position which we can think of as point a (the faded rectangle is the previous position which is the same in frame, 20 which we can call point b).
*Remember that motion tweening needs two different position of the same object(namely point A and B) for it to render frames for it. If you tween an object that has the same position in its point a and b flash will continue to tween it. But it will not move.

*this is what we have at the moment

Step 7

Here's the cool part, remember that we want to fade in the rectangle as it moves.

Again, go to frame one and click(this is important) the "rectangle" movie clip. 

Be sure that you are in frame one and have selected the rectangle movie clip.

Then show the properties window by pressing CTRL+F3. 

And changing the Color Effect to Alpha. I set the opacity at around 50%.

*This means that at the start of the the animation, the rectangle will have 50% opacity and tween to be 100%. Making it fade in.Also no need to change the color effect of the rectangle on frame 20, just the rectangle in frame 1.

click here for larger image

Final Result

How hot is that?
In this flash tutorial we have learned that you can tween more than one attributes of an object.
In our case its the position and opacity. Feel free to apply this technique to your animations and experiment on what other attributes you can tween. Now thats hot -flame




Was this tutorial helpful? follow me on twitter @ryujinxryuk and follow my blog.