Zoom in Zoom out masking drag animation

Date: 6.7.2009, 15:57    Total views: 12101

In this thoroughly explained, detailed flash lesson, I will show you how to create advanced zoom in zoom out masking drag animation using some special flash tips and tricks and a little action script code. You can use this animation for any flash banner or for some presentation. Using this lesson, you will also learn how to import any image into a flash stage, how to convert it into a Movie Clip Symbol, how to create instance name, how to use Free Transform Tool (Q) to zoom in and zoom out image and much more. Let's go!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of your image. Select any color as background color. Set your Flash movie's frame rate to 32 and click ok.



Step 2

Import any image into a flash stage which you like to use for this lesson as background.

Step 3

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

Step 4

Call the current layer image. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 5

Click now on frame 5, 10 and 15 and hit F6 key. While you're still on frame 15, select the Free Transform Tool (Q) and enlarge image a little like it is shown on the picture below!



Step 6

Go back now on frame 10, select again the Free Transform Tool (Q) and decrease image like it is shown on the picture below.



Step 7

Right-click anywhere on the gray area between frame 1 and 5, frame 5 and 10 and frame 10 and 15 on the timeline and choose Create Motion Tween from the menu that appears.



Step 8

Create a new layer above the layer image and name it mask. After that, select the mask layer and draw a circle shape like it is shown on the picture below!



Step 9

While the circle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 10

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip circle_mc. See the picture below!



Step 11

Select now the first frame of layer mask and go to the AS panel (F9) below the stage. After that, enter this code inside the actions panel:

startDrag ("circle_mc", true);

Step 12

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



We're done now!

Test your movie (Ctrl+Enter) and enjoy!

Download source file (.fla)