Toxiclab.org

Circular picture apperance by mask

20.7.2007, 14:20
Submited in: Flash | Total Views: 42250

Using this lesson, you will see how to create a picture apperance using the mask and circle. This is so practical effect and you can use it for any apperance animation.To create this lesson, you don't have to use action script code. Let's go!



Example:




Step 1

Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select #EAEAD7 as background color. Set your Flash movie's frame rate to 28 and click ok.





Step 2


Find on internet or somewhere any picture that You will be use for this example.You can also, if You like donwload my picture that I will be use for this example.



Step 3

Go back in flash. Double click on layer 1 to rename its name in picture. Then, click on frame 10 and press F6 key. While you're still on frame 10, choose File > Import > Import to Stage, and import the picture that You want to use for this example.

Step 4

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



Step 5

While the new made Movie Clip is still selected, go to the Align Panel (Shorcut key:Ctrl+K) and do the following:

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.



Now, you have aligned the picture with the background. See the picture below.

Step 6

Click on frame 25 and press F6 key.



Step 7

Then, go back on frame 10, take the Selection Tool (V) and click once on the picture to select it.Then, go to the Properties Panel (Ctrl+F3) below the stage and click on Filters tab. After that, click on the plus icon and select Glow. Make the adjustements as follows:

1.Blur X and Y : 100
2.Strength : 1000%
3.Quality : High.
4.Color : #FFFFFF.
5. Turn on Inner glow options.



Step 8

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 9

Create a new layer above the layer picture and name it mask.

Step 10

Click on frame 10 of layer mask and press F6 key.

Step 11

Then, take the Oval Tool (O). 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 white color and draw a "circle" about 140x140px.

Step 12

While the circle is still selected, repeat step 5 to aligned it with the background.

Step 13

Click on frame 25 of layer mask and press F5 key.

Step 14

Select mask layer and convert it to a mask by right-clicking on the mask layer and selecting Mask. See the picture below.



Step 15

Create a new layer above the mask layer and name it circle.



Step 16

Click on frame 10 of layer mask and press Ctrl+C key (Copy). After that, click on the first frame of layer circle and press Ctrl+Shift+V key (Paste in Place).

Step 17

Lock mask and picture layer, click on frame 10 of layer circle and press F6 key.

Step 18

Go back on the first frame of layer circle, take the Free Transform Tool (Q) and decrease the circle like it is shown on the picture below.



Step 19

Take the Selection Tool (V) and click on the first frame of layer circle. Then, go again to the Properties Panel (Ctrl+F3) below the stage. On the left side you will see Tween drop down menu . Select Shape on it. See the picture below.



Step 20

Take again the Selection Tool (V) and select the all frames, starting from frame 11 to frame 25 of layer circle. Then, choose right click and select Remove Frames. See the picture below.



Now, you have this:



Step 21

Lock all layers and test your Movie (Ctrl+Enter).

Bye!

Download example

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

Browse by category


Most popular tutorials