Flash Techniques #001 – Fade In/Out

I am recently performing some studies about how to create eye-catching animations using flash 8. I will organized the thread of the topic in a series of number, and try to provide brief explanation text for the title.

For the first of this series, I think the technique I am now try to show you is called Fade In/Out. But this terms may refer to completely different flash effects, or even wrong altogether, so I would rather upload these files (the sample swf and its accompanying html file) for you to verify visually ๐Ÿ™‚ what I effect I am talking about.

Test Fade Sample

Because this is actually a zip file, you should renamed it to .zip extension before doing your extraction process.

You can download the test-fade.html and test-fade.swf to the same directory and fire up appropriate browser to see this swf file in action.

And I also provide the completed test-fade.fla and test-fade.png file as the source file for you to study the #001 technique of flash.

The intended audience for this article is the beginner group, because I’ve also perform study regarding this matter from the very basic.

So here is the necessary steps to create this techniques :

I creates the new flash document with stage of the size of 100px width and 100px height, frame rate 30 fps :

Then I perform the import of test-fade.png file into the library (using menu command File – Import – Import to Library). Now the library will contain one PNG graphic in its repository :

The next steps below that I will describe is very crucial to the success of this study, so pay a very careful attention ๐Ÿ™‚

I will now use the imported graphic into my stage by click and drag the test-fade.png from the library list to the stage and perform necessary repositioning inside the stage.

Next, I will perform the “Convert to Symbol” action using the flash context menu by using right-click :

Flash then will show the dialog box, and I can set the appropriate symbol properties inside this dialog box :

So, I will generate a completely new object based on test-fade.png file to become a movie clip object, in other words, using the magic of flash 8, I will transform the ordinary static graphic file into an animation based file.

There will now 2 symbols inside the library list, and the previously graphic file in the stage is now becoming a movie clip file.

I will play this movie clip for about 1 second, so I click the frame 30 in the timeline window, perform right-click to bring up context menu and generates sequences of still images for 30 frames. This is done by using “Insert keyframe” context menu :

After this action is performed, Flash will create successive still images for 30 consecutive frames, or showing the images for about 1 second :

The greyed area in each of the frame indicates that it is filled with still images for each frame, and if you drag the pale red box (called the player head), you can see no changes in the movie clip object on the stage yet. Its obvious ๐Ÿ™‚ because there is only same object shown in each frame, unless there is some action to change each consecutive frames.

Next, I clicked anywhere between the frame 1 and 30, and then perform right-click activate context menu. And in this context menu, I will invoke the “Create Motion Tween” action :

If everything is okay, the previously greyed frames will be transform to pale-blue color with the arrow line inside the frames :

Well, actually there is still no changes if you drag the player head, and wondering when you will going to get interesting result. So, don’t give it up yet ! The final steps will amaze you about the potential use of flash 8 to create interesting animations ๐Ÿ™‚

I will go back to the very first frame, and change some properties in the movie object using the alpha color property. This is done by first clicking the first frame (one with black dot above) and then click on to the movie object on the stage to bring up this property window. (The UI of flash 8 is sometimes creating confusions, I am actually stucks for a while try to figuring out this step) :

As you can see from the above picture, I changed the color property to Alpha and its percentage value to 0%. Now I can click and drag the player head and see the interesting result.

Although it may seems a rudimentary technique, the simple test-fade.png graphics can be changed into any form of graphics, and the limiting factor is certainly your imagination ๐Ÿ™‚


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: