Flash tutorials
Home 3D (2) Actionscripting (63) Animation (86) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (48) Text Effects (16)

Advanced Alpha Effect

11.1.2007, 1:44    Total views: 84960

In this lesson, I will explain to you how to create advanced alpha effect in flash 8 using the Action Script code and some special flash tisp and tricks.You will also learn how to use Free Transform Tool (Q), how to draw a rectangle that we will use for this example, how to apply alpha effect on it and much, much more! Let's start!



Move the mouse over the "cubes"



Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 400 pixels and the height to 250 pixels. Select #72768B as background color, for Frame rate set 42 fps (Frames per Second), and click ok.



Step 2

Select the Rectangle tool (R).You will draw a rectangle without the outline colors. To do this, click on Stroke color and choose No color, for Fill color choose white color, and draw on the stage a "cube" 35x35px. See the picture below.



Step 3

While the "cube" is still selected, press F8 key (or select Modify > Convert to Symbol ) to convert this "cube" into a Movie Clip symbol.



Step 4

Double-click on the movie clip on stage with the Selection tool (V).You should now be inside the movie clip.



Step 5

While the "cube" is still selected, press Ctrl+C key (Copy), create a new layer (layer2), click on frame 2, press F6 key, and after that Ctrl+Shift+V key (Paste in Place).

Step 6

Go back on layer 1, select it, press F8 key (Convert to Symobl), and convert it into a Button. See the picture below.



Step 7

Take the Selection Tool (V), click once on the "cube" to select it and open the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Alpha in it and put it down to 17% .



Step 8

Click on frame 8 and 13 and press F6 key. After that, go back on frame 8, take the Free Transform Tool (Q), press and hold down Shift key and increase the "cube" a little. See the picture below.



After that, take the Selection Tool (V), click again once on "cube" to select it, go to the Properties Panel below the scene. On the Color menu, select again Alpha in it and put it down to 100% .



Step 9

Right-click anywhere on the gray area between frame 1 and 8 and after that frame 8 and 13 on the timeline and choose Create Motion Tween from the menu that appears.



Step 10

Go back on frame 1, take the Selection Tool (V), click once on the "cube" to select it, press F9 key, or select Window > Actions to open the Actions panel.

Step 11

Enter the following ActionScript code inside the Actions panel:

on (rollOver) {
play();
}

Step 12

Lock layer 1, click on the first frame of layer 2, and in Action Panel (F9), enter the following ActionScript code:

stop ();

Step 13

Click on frame 2 of layer 2 and press F8 key (Convert to Symbol) to convert this "cube" into a Graphic Symbol.



After that, take the Selection Tool (V), click once on the "cube" to select it and go to the Properties Panel below the scene. On the right, you will see the Color menu. Select Alpha in it and put it down to 17% .

Step 14

Click on frame 35 and 45, and press F6 key.

Step 15

Go back on frame 35, take the Free Transform Tool (Q), and increase the "cube" a little, like we have done for the first "cube" (see step 8).



Step 16

Right-click anywhere on the gray area between frame 2 and 35 and after that frame 35 and 45 on the timeline and choose Create Motion Tween from the menu that appears.



Step 17

Go back on the main scene (Scene1), and duplicate your "cube" as many time as you wish.



We're done!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 200465

2. Water effect
Total views: 148651

3. High-tech city animation
Total views: 136523

4. Special Picture Effect
Total views: 136346

5. Photo slide show
Total views: 133555

Related links