Toxiclab.org

FadeIn FadeOut effect

28.2.2006, 13:6
Submited in: Flash | Total Views: 105423

In this lesson, I will explain to you, how to create a simple FadeIn Fadeout effect with no Action Script. You will also learn how to aligned the picture with the background using the Align Panel, How to apply Alpha effect from the Properties Panel on any picture and more.




Example:



Before you open Flash and go to work, Find a five larger pictures on the Internet or somewhere. After you have find that picture, set their dimensions in photoshop or any other graphic program (could be done in flash also) to 300x225px. You can also download my pictures.

Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 300 pixels and the height to225 pixels (see 1 below). For Frame rate choose 24 fps (Frames per Second), and click ok. See the picture below.





Step 2


Take the Selection Tool (V), and double click on layer 1 and rename its name in background. After that lock that layer.

Step 3

Create a new layer above background layer and name it pictures.



Step 4

Then click on the first frame of layer picture and press Ctrl+R (Import to stage) and import the first picture. After you imported the first picture, go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the image is still selected do the following in the Align panel:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Select again that picture (Ctrl+A), and press F8 key (Convert to symbol), to convert this image into a Movie Clip Symbol. See the picture below.



Step 6

Click on frame 20 of layer pictures and press F6. After that go back on the first frame, Open the Properties Panel (Ctrl+F3) and for Tween choose Motion.



Step 7

Then, while you're still on the first frame, take the Selection Tool (V), click once on picture to select it and go to the Properties Panel below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 8

Click then, on frame 50 of layer picture and press F5 key. Then click on frame 51 and press F6 key(Changing points). After click onframe 70 and press again F6 key. Take the Selection Tool again and click once on picture to select it, go to the Properties Panel again, and for Color choose Alpha and put it down to 0%. After that go back on frame 51 and in the Properties Panel for Tween choose Motion. See the picture below.



Step 9

Now, we're done with the first picture and it's time to import another picture, so click on frame 71  and press F7 key (Blank Keyframe). After that press Ctrl+R key (Import to stage) and import another picture. Then take the Selection Tool (V), and click once on that picture to select it. Then, go to the Align Panel (shortcut: Ctrl+K) and repeat step 4.
Step 10

While the picture is still selected, press F8 key (Convert to symbol) to convert it into a Movie Clip Symbol.



Step 11

Click then on frame 90 and press F6 key. After that go back on frame 71, go to the Properties Panel below the stage, and for Tween choose Motion. See the picture below.



While you're still on frame 71, click once on the picture to select it, and in Properties Panel for Color choose Alpha and put it down to 0%.



Step 12

Click on frame 120 and press F5 key. See the picture below. 



Step 13

After that click on frame 141 and  and press F6 key.



Step 14

While you're still on frame 141, take the Selection Tool (V), click once on picture to select it, open the Properties Panel, and for Color choose Alpha and put it down to  0%. After that go back on frame 121 and in Properties Panel (Ctrl+F3) for Tween choose Motion.




Repeat the previous steps for every other picture.

We're done!

Enjoy!

Download example (107 KB)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials