Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over
This entry was posted on Saturday, March 29th, 2008 at 12:57 am and is filed under Flash, Flash Tutorial, Tutorials, Web Design.
You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over
Level: This is a beginner level tutorial, but knowledge of the Flash drawing tools is assumed.
Version: I will be using Flash CS3 and AS2 (although tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.
Description: In this tutorial, I will demonstrate a quick and easy zoom in/out technique using a motion tween and a little ActionScript.
Demo:
Let’s get started!
Select “File > New” (command-”N”) and select Flash File (ActionScript 2.0) to open a new Flash document file.
Save the file, and give it an appropriate name. I will call this “zoom_tut1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document or “command-J”), but for the purpose of this tutorial, I will use 350×200 pixels.
The first thing we need to do is draw the object that we want to have zoom in and out. You can have this be whatever you like, but I will just use a simple rectangle with some text inside it. To do this, select the rectangle tool, give a fill color (whatever you like, it doesn’t matter), and a stroke if you desire (I chose a black fill with no stroke). Draw a small rectangle on the center of your stage. With the selection tool, select your rectangle (click-drag around your shape or double click on the shape) and choose “Modify > Convert to Symbol” (F8). Give your symbol an appropriate name (I called mine “box”), select the Movie Clip radial and hit “OK”. Your rectangle is now a movie clip symbol and should be available in your Library window (Window > Library or cmd-L).
Double click on your symbol (either on the stage or in your Library) to bring you into symbol editing mode. Within your movie clip symbol, select your rectangle and choose “Modify > Convert to Symbol” (F8) again, however this time choose the Graphic radial and give this symbol a new name (I chose “img_box”) and hit “OK”. We now have a “nested” symbol… a graphic symbol that is within our movie clip symbol. Now, click on your rectangle to bring you into editing mode for the graphic symbol. Tip: you will see a “breadcrumb” of what symbol your are currently in mode under your timeline (Fig. 1).
Add a new layer to your graphic symbol and with the Text tool, draw a box in the center of your rectangle and type “Zoom” (or whatever you like). While you don’t really need text for this symbol, I wanted to try and illustrate that this tutorial will work whether your object is on one layer, or if you have a symbol with multiple layers.
We now need to edit our movie clip symbol, so you can either double click on the symbol in your Library, or use the “breadcrumb” link under the timeline (Fig. 1). Tip: you will only see the breadcrumb of a nested symbol if you select your symbol by double clicking the object on your stage. If you select your symbol in the Library, you will only see the name of the symbol you selected. It is important to remember that whether you select the symbol directly from your library or by clicking on it’s instance on the stage, you are editing ALL instances of the symbol.
—- ads by google —-
In our movie clip symbol, click on frame 15 and choose “Insert > Timeline > Keyframe” (F6). On frame 15, select your rectangle (clicking only once) and scale the symbol to about 300% (or the maximum size you want your object to be able to zoom). Tip: to easily scale an object use the “Transform” pallette (Window > Transform or cmd-T) and input a number (Fig. 2).
Still in our movie clip symbol, click on a frame between 1 and 15 in our timeline and choose “Insert > Timeline > Create Motion Tween”. The color of the timeline on this layer should turn a light blue and you will see a solid arrow between frames 1 and 15 (Fig. 3). What we now have is an animation of a rectangle that goes from small to large. Now, we need to add some simple ActionScript that will control the zoom effect.
Let’s start by adding a new layer to our movie clip symbol. Move this layer to the top and name it “actions”. On frame 1, add the following code to our Actions Panel (Windows > Actions or alt-F9):
stop();
this.onEnterFrame = function(){
if(zoom == true){
prevFrame();
}
}this.onRollOver = function(){
zoom = false;
play();
}this.onRollOut = function(){
zoom = true;
}
On frame 15 of our “actions” layer, add the following code to the Actions Panel:
stop();
One last thing we want to do is change the frame rate (fps) in order to give our zoom a smoother animation. To do this, choose “Modify > Document” or cmd-J to open the document properties window, and change the number in the “Frame Rate” field (Fig. 4).
The default rate of Flash is 12, and the most common rates are 12, 24 or 30 with 30 being probably the fastest you would want to make it. For this tutorial, I have chosen to use 30 fps. Tip: “fps” stands for “frames per second”, thus changing the frame rate will also change the speed of your animation (your zoom effect). The higher the frame rate, the faster your animation. 12 fps works well for the web, especially if there is a lot of animation. Since this was a simple animation, we can get a nice smooth zoom by upping the fps to 30. We could also control the smoothness of our animation by adding or subtracting the number of frames in our movie clip timeline. The important thing to do is to find a nice balance of frame rate and length of timeline, and in most cases this is done simply by testing your movie. However, it is my recommendation to not tweak the fps once your movie is built but to add or subtract frames from your timeline.
That’s it! Go ahead and test your movie. Place your mouse over the rectangle, and you should see your object zoom in… move your mouse off the object and it will zoom out and return back to the original size.
Now my favorite part – explaining the code!
stop();
This is a simple stop action that tells our movie clip to stop playing since we want to control the animation with our mouse.
this.onEnterFrame = function(){
This is saying everytime our player enters the frame, perform the actions between the curly brackets. Note: “this.” refers to the movie clip that this action is placed in. It is optional, but good practice to use it.
if(zoom == true){
prevFrame();
}
}
The “if” statement is asking if a variable of “zoom” is true, and if it is, then perform the actions between the curly brackets.
this.onRollOver = function(){
zoom = false;
play();
}
This is saying when we roll over our object (remember “this.” is referring to the movie clip this script is in) perform the actions between the curly brackets. The actions are telling the player that “zoom” is equal to “false“, which means we are not performing the “if” statement above, but so we will “play” our movie (zooming in).
this.onRollOut = function(){
zoom = true;
}
This is telling the Flash player that when we roll off our object, our “zoom” is equal to “true“, so we will perform the if statement above which is telling the player to go to the previous frame and basically rewinding our timeline (zooming out).
While the same type of zooming effects can be created using just ActionScript rather than motion tweens (which I hope to show in a future tutorial), I hope you find that this is a very quick and simple way to create a zoom effect in Flash. And if you’re creative and understand the code, you can use this to control any type of animation, not just a zoom in/out.
I hope you enjoyed this Flash tutorial and thanks for reading. As always, feel free to leave comments below.
Source file (Flash 8): Flash Tutorial: Quick and Easy Zoom effect on Mouse Over
Flash Tutorial: Animating a button using a mask effect
But i cant seem to do it, Im not sure what to do when i double click to go inside the text animation movie clip..because the stage appears blank..is that supposed to happen?? I dont know what to do after that. 
i know its out of scope but then i thot if i know how to get for 1 thing i just ud reuse the code for n number of boxes… 
