Advanced mask effect

Date: 27.3.2007, 1:8    Total views: 56971
Page:  1  2

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create advanced mask effect in flash using the Action Script code. Using this lesson, You will also learn how design 3D cube, how to apply advanced color settings from the Properties Panel on it, how to convert any object into a Graphic Symbol and much much more! Let's start!

Example:



Step 1

Start Flash. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 250 pixels and the height to 200 pixels. Select #E8E8E8 as background color. Set your Flash movie's frame rate to 30 fps and click ok. See the picture below.





Step 2


Now, it's time to create a modern 3d cube. So, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage.Then, choose the Following options:

1.Select a black as line color.
2.Choose Solid as type of line, with thickness set to 1.



Step 3

Then, draw this part of cube:



Step 4

After that, draw this:



and then, this:



and finally this:



Step 5

Take the Paint Bucket Tool (B), for Fill color set #D90504 and paint the cube. See the picture below.



Step 6

Take the Selection Tool (V) and select a cube. Then, press F8 key (Convert to Symbol) to convert this cube into a Graphic Symbol. See the picture below.



Step 7

Click on frame 10 and press F5 key.

Step 8

Create a new layer and name it masked layer. After that, using the "drag and drop" technique, move it below the first layer (layer 1). See the picture below.



Step 9

Select masked layer and take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose any color and draw a "rectangle" about 800x200px and place it on the position like it is shown on the picture below.



Step 10

While the rectangle is still selected, go to the Color Mixer Panel (Shift + F9). Then, set the following options:

1. Click on the paint bucket icon to access the fill color options.
2. Select the Linear option in the Type drop-down menu.
3. Click the small color square on the left.
4. In the color hex code input field, enter #FFFFFF .
5. Click on the right small square and enter #FFFFFF in the hex code field and turn down its alpha factor to 0%.



Now, you have this:



Step 11

While the rectangle is still selected, press F8 key (Convert to Symbol) to convert this recatngle into a Movie Clip Symbol.



Step 12

Click on frame 10 and press F6 key.

Step 13

Then, take the Selection Tool (V) and place the rectangle on the position like it is shown on the picture below.



Step 14

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 15

Go back on the first frame of layer 1 and press Ctrl+C key (Copy).

Step 16

Create a new layer (layer 3) and place it below the all layers. See the picture below.



Step 17

Click on frame 11 of layer 3 and press F6 key. After that, press Ctrl+Shift+V key (Paste in Place).

Step 18

Press F6 key twelve time. Go back on keyframe 2, take the Selection Tool (V), click once on the cube to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and set the following options:



Step 19

Select keyframe 4 and repeat the previous step.

Step 20

Click on keyframe 5, take again the Selection Tool (V), click once on the cube to select it and go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select again Advanced in it, click on Settings button and set the following options:



Step 21

After that, select keyframe 6 and set the following options:



Step 22

Select keyframe 7 and set the following options:

Next:  Part 2
  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!
Share
ShareSidebar