Toxiclab.org

Mask Picture Effect

14.2.2006, 14:3
Submited in: Flash | Total Views: 104454

In this detailed tutorial I will show you how to create advanced mask picture effect using the Action Script. You will also learn how to use Info Panel, how to use Color Mixer Panel to make a gradient, how to aligned the picture with the background and more.

Example:



Before we start with work, find any picture on Internet which will use for this example. Set in photoshop or any other graphic program (could be done in flash also) the dimensions of picture to 200x150 px. You can also if you want download my picture.

Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J). Set the width of your document to 250 pixels and the height to 200 pixels. Select #5A6999 as background color, for Frame rate choose 24 fps (Frames per Second) and click OK.



Step 2


Take the  Rectangle Tool (R), for Fill color choose white color, for Stroke color choose no color and draw a "rectangle". While the "rectangle" is still selected, go to the Info Panel (Ctrl+I), and for Width choose 200, and for Height 150 px, such as picture whic we'll insert later. See the picture below. 



Step 3

Take the Selection Tool (V), click once on the "rectangle" to select it, go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the "rectangle" 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.





Take the Selection Tool (V), and double click on layer 1 to rename its name in shape. See the picture below.



Step 4

Create a new layer and name it shine.



Step 5

Using the "drag and drop technique", move the shine layer below the shape layer. See the picture below.



Step 6

Take again the Rectangle Tool (R), for Stroke color choose no color, and create a rectangle about 2 times bigger than the  first rectangle. See the picture below.



Select that new made "rectangle", and go to the Color Mixer panel (Window > Color Mixer) and choose the following options: 

Click on the little square to the right of the pencil icon and when the color palette appears, click on the little square with the red diagonal line crossing it .This will effectively block the stroke (outline) color. In the Type drop-down menu select the Linear option. RGB set like it is shown on the picture below. See the picture below.



Step 8

Click on the small square situated on the left side of the gradient strip.Select pure white (#FFFFFF) as its color and turn down its alpha factor to 0%. Do that also for the right small square. For the middle square select #AFB6CD color and turn down its alpha factor to 100 %. See the picture below.



Now, you get this:



Step 9

Select the "rectangle" again and press F8 (Convert to symbol). to convert this "rectangle" into a Movie Clip Symbol.



Step 10

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





Step 11

Go back on the shape layer and press F5 on tenth frames. See the picture below.



Step 12

Select the Shape layer and convert it to a mask by right-clicking on the shape layer and selecting Mask.





Step 13

Lock shape layer, and create a new layer above shape layer and name it picture.



Step 14

Click on frame 10 of layer picture and press F6 key (changing points).



Step 15

Press Ctrl+R or choose File - Import - Import to Stage and import  a picture whose dimensions are 200x150 which we have refered at the head of tutorial. While the picture is still selected, go to the Align panel. If it isn't opened already, just select Window > Align or press Ctrl+K to open it. While the "rectangle" 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 16

After that, while the picture is still selected, press F8 (Convert to symbol) to convert this image into a Movie Clip Symbol.



Step 17

Click on frame 20 of picture layer and press F6 key. After that, go back on frame 10, take the Selection Tool (V), click once on the picture to select it, go to the Properties Panel (Ctrl+F3), under for Color choose Alpha and put it down to 7%. See the picture below.







Step 18

Click again on frame 10 and in the Properties Panel below the stage for Tween choose Motion. See the picture below.





Step 19

Create a new layer above picture layer and name it Action.



Click on frame 20 and press F6 key. Then, open the Action Script Panel (F9) and enter the following Action Script code:

stop ();

Now we have stopped animation when it comes at the end.

We're done!

Download example (48 KB)

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

Browse by category


Most popular tutorials