Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over
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
Hi Mike,
Want to thank you for your zoom effect. really nice!
also want to let you know what a great supporter you are. had some extra things i wanted to add and found it all in your answers!
super thanks
Cheesan
Hi, I have been searching for a tutorial like this for forever. My problem is that I need to use as3 for a project, so is there an as3 version available? If there is can I also zoom in on something and then have it play a movie clip?
thanks
Hi Kirsty,
Unfortunately I don’t have an AS3 version of this tutorial (I’m still learning AS3 myself…). I’m sure what you are looking for is possible though.
There are lots of tutorial sites out there such as:
http://www.tutorialized.com
http://www.flashandmath.com
http://www.good-tutorials
http://flashfridge.com
http://www.flashperfection.com
Most of them are as2.0 tutorials, but more an more you can find 3.0 tutorials. Hopefully one of these can help you out.
Sorry I couldn’t answer your question, but if I have time, I’ll try and find something that will help.
Thanks for reading.
– Mike
Hi Mike,
I’m new to Flash and found your tutorial SO easy to follow! Thank you so much for posting it. I got mine working perfectly but I’d like to extend it one step further. I want some text to display under the rectangle when you rollover and then the text to disappear when you rollout. Can you help me and tell me how to do that?
Thanks so much!!
Jaime
Hi Jaime,
Thanks, I’m glad you found it easy to follow.
I’ve gotten some other questions about how to enhance this similar to what you’re looking for, so I think I’ll add to this in the next day or too. A little too busy to get into the explanation now, but check back soon and I’ll help you out.
Thanks for reading.
– Mike
Great!! Thanks so much
hi, i really liked your tutorial, but i have a problem that you didn’t quite address that maybe now might be. i have a project due in two days and i still have quite a few things that need to be done, but i don’t know how.
i’m doing an interactive movie of a panda bear, and i have it so where it’s just him and the tools on the stage in the project. i want to make it so that when you select one of the tools he becomes angry because your trying to change/modify him (which i’ve already done) but i want to make it so that when you select a certain button he becomes enraged and it zooms in on his face. i have the actionscript for the buttons, but i don’t know how to do this. another problem i have is when you select one if the buttons, he gets angry, and i need that to happen after you select the button and then select him. please PLEASE reply. time is running out.
Hi Steve,
Unfortunately, I don’t have the time right now to go fully into it, but hopefully I can point you in the right direction…
What you would want to do is put the panda bear animation in one movieclip, and give it an instance name (say, mc_panda). Then you would make each tool it’s own movie clip as well. Then, you can add the on Release script to each tool and have it play the panda clip:
on(Release) {
_root.mc_panda.gotoAndPlay(“angry”);
}
Where “angry” is the name of the frame you want the clip to start from.
Again, this is just the quickie explanation but hoepfully it points you in the right direction…
Thanks for reading!
– Mike
A great tutorial! Big help as once \i had done the example i had enough knowledge to really expand on it for my site
Hi Mike,
just wanted to thank you for this tutorial… very handy for what I was trying to do. thanks so much!
BiL
Very nice, very easy to follow, and very useful.
Hopefully you are still taking comments and questions…
I could like to use this for a technical diagram zoom in/out.
In parallel to the zoom in, which I am applying to sections of the drawing by creating a number of mc (mcZoomX), I want to mute the background image (full diagram). To do that I have created a mc called “mcDiagramMask”. Which code should I add to the rollOver and rollOut of my various mcZoomX to trigger mcDiagramMask which is outside mcZoomX, on its own layer?
Thanks in advance for your help. K
OK… late night, blame it on something. The code I thought would be right was right (just add mDiagramMask after the play(); in onRollOver – I just didn’t remember I had modified the name of the mc and not reflected that in the mc instance name.
Thanks again for the good tutorial
OK, I gave up last night after realizing that what was making my mcDiagramMask play was an invisible button, not the code in the mcZoomX. So my initial question is still valid
Thank you in advance.
Hi Lou,
Yes, I still try to take questions, but I don’t always have as much time as I’d like to answer them. Not exactly sure what you are trying to do, but there are actually 2 ways that come to mind for doing what I think it is you’re looking for. I’m a little swamped right now, but check back in a day or two and I should have the answer.
Thanks for reading.
– Mike
thanks Mike.
I have a technical diagram, for portions of which I want to offer a zoom in option.
As the area is magnified (zoom in), I want the diagram in the background to be muted (same effect as a photoshop screen or overlay) so that it doesn’t distract from the zoomed in section (a smaller window that floats over the main diagram).
I have a mc to mask the diagram (65% alpha white mask), and i am trying to use your code to play both the zoom and the diagram mask movie clips under the same rollover / rollout action.
If that explains it better.
I will probably try it with an invisible button on my own but would still love to see if I can do that with your solution.
Thanks!
Hey Lou…
Hmmm… again, couple ways to do that, one is using the “attacheMovie” action or the other is setting a mask movieclip.
For beginners, I think the easiest way is to just have a “mask” movie clip (whcih I think is the route you are doing). Create a mask movie clip with 2 frames: frame 1 blank, frame 2 your overlay (you can have it animate to the overlay if you want, but the first frame needs to be blank). Also, give the first and last frames a “stop” action. Place the “mask” movie clip on the stage in it’s own layer, below all the items you want to be able to zoom. Give it an instance name (“mc_mask”), and then in the last frame of your “zoom” animations, insert the following code:
_root.mc_mask.gotoAndStop(2);
on the frame before the last frame, insert the following code:
_root.mc_mask.gotoAndStop(1);
What this does is basically toggle between the empty frame and the overlay frame of your “mask” mc. On the last frame of the zoom, you are turning your mask “on”, on the frame before the last, you are turning it “off”.
Hopefully this makes sense, but if not, let me know and I’ll try and do a quick mockup in Flash for you.
Thanks for reading!
Mike
Excellent. I already had a blank frame on frame 1 of my mc_mask.
This works great when I remove the tween in mc_mask.
I would like to have the diagram mask be progressive, and reveal/hide as the zoom mc plays, so I’ll play with this some more and try to figure it out. I will let you know if I can’t
The other thing I would like is to add a “close” button in the corner of my zoomed in section, so that users who don’t think about rolling out of the image can still get back to the full diagram.
Could you point me in the right direction for the script I should use in my on(release) event?
Thanks for your help, you make learning this fun.
Hey Lou,
Hopefully you can figure it out, but for the progressive reveal/hide, you would just have that animation take place in the mc_mask clip, but instead of “gotoAndStop(2)” on the zoom, use “gotoAndPlay(2)”. Hope that helps.
As far as the close button, not sure why you would need that because if they roll onto the “close” button, they are essentially rolling off the zoomed object, which makes the object zoom out. Maybe I’m just misunderstanding what you are looking for.
This particular way of zooming in and out really doesn’t support a “close” button… there are other ways that are fairly simple to accomplish that. Busy holiday weekend so not sure if I will be able to give you a full response for a few days, but definitely keep me posted if you need some help.
– Mike
Hi Mike – glad you have good plans for the holiday weekend – Happy 4th!
The close button would be in the upper right corner of the zoomed object.. I am concerned my user is going to complain that the need to rollout to go back to background diagram is not intuitive enough (don’t ask).
If the result of clicking the button is not closing the window but zooming out of it, that’s fine. So I am in fact looking for a way to have a little clickable button that achieves the same result as rolling off…
K
Hi Lou,
I see what you mean now, and I don’t have a quick fix yet… I’ll need a little time to try and find something as it relates to this particular tutorial. If not, then I’ll have to write something up that accomplishes this. Sorry that I don’t have an immediate answer, but hopefully in the next few days.
Mike
Hi Mike
That would be great. In the meantime, I’ll leave the button out.
There are 9 zoomable sections on the diagram, lots of fun. It makes a bit tricky for the users as they have to follow the zoom mc w/ their mouse as it magnifies, otherwise it creates a conflict with the other zoomable areas, but I don’t think that can be avoided. Let me know if you know otherwise.
If you haven’t figured it out yet, I have pretty basic ActionScript knowledge
Thanks for all your help.
K
Mmmm… made lots of progress, but realize the need to follow the zoom mc w/ the mouse is going to create an issue…
Not all the areas of the diagram that can be magnified are centered on the stage, quite to the contrary.
Any suggestions so that as long as the user has mouse over, the mc will play until it’s fully zoomed in?
Hey Lou,
Yeah, following the object with the mouse will be a big issue. Let me ask you this… Can you initiate the zoom on click instead of on rollover? I think for what you want to do, this might be a better plan. You can even have on rollover, some instructional copy that says “click to zoom” or something to that effect. If you use on click, I wouldn’t necessarily use the same ActionScript as this tutorial (although you can, but you would need to set some variables and so there might be a little more advanced AS than what’s here). I’ve actually been working on a project that does something similar to what you need (not a zoom, but when you rollover a word, it expands for a full definition).
Let me know if you’d be ok with a click instead of a rollover for the zoom, and I’ll try to get something for you tonight. Glad to hear you’re making progress on your own though. Good to know my tutorials are helping people think beyond the one lesson and using them in real-world projects.
– Mike
Hi Mike – thanks for the response, and yes, your tutorial did exactly that for me: how can I take this further and use it for my project.
Back to the issue at hand, I thought about the same thing. I actually have a separate mc called “mcZoomAreaX” for each of the zoomable sections. It highlights the area the user can mouse on, with a 5% alpha fill and a border that runs around it. I had been thinking about placing an invisible button on top of it, that the user would have to click to trigger the zoom. Your suggestion to include “click to zoom” on mouseover is great, I would like to include that.
Of course, I don’t know how this approach would impact the zoom script I am currently using. Can it be modified, or should I create a zoom in / zoom out mc for each section, with simple tween (instead of your zoom script, which is so cool) and have those mc trigerred by separate button actions?
Let me know if seeing the file would help.
K
Hey Lou,
Sorry I don’t have the time to explain this fully, been swamped lately, but I didn’t want to leave you hanging. I mocked up a file (which I emailed to you) that I think covers the zoom in/out on click instead of rollover. It’s similar to the script for the rollover zoom, but modified slightly and uses an invisible button (zoom in) and a close button (zoom out), with the same variable settings as the rollover script.
It’s not fully commented, sorry, but take a look… hopefully it will at least get you started. You’re not the first person who wanted to do something similar to this with this tutorial, so I plan to do a follow up tutorial on this that handles it on click as soon as I have more time.
Hope this helps you out though, and if you have any questions, I’ll try to get back to you as soon as I can.
– Mike
Hi Mike,
I am a beginner of Flash and am doing my Uni by Internet. This is my first Uni Flash assignment. I logged onto this Flash tutorial. I copied every step but somehow it didn’t zoom. It just stay on the screen staring at me! Perhaps I did something wrong with it.
Many thanks.
Katie
I ended up with Layer 1, Layer 2 and actions layer.
Mike – very grateful you could put this together for me – I thought I had to go the route of separate mc for zoom in and zoom out.
Tried applying to a couple of the sections, successfully. Then started getting a script error w/ the on(release) event on a third section – that tells me it’s time to get some sleep!
I’ll finish converting to this approach in the morning and will let you know about either success, or additional questions!
K
Hi Katie,
Sorry you are having problems with this. I’d be happy to try and help you out, but without some more info, not sure what’s wrong. Are you getting any errors in the Output window? (note: the output window will popup automatically when you test a movie that has code errors). If you can send me the file (contact@spitshine-design.com), I can take a look.
Also, the source file (with comments) is included at the end of this tutorial. If you haven’t already, try downloading that and taking a look to see if you can find any differences.
Thanks for reading,
– Mike
Hey Lou,
Glad I was able to help and that you are making some progress. Hopefully you will get the other sections working (if you already have 2 working I’m sure you will). Let me know if you have any other questions, I’ll try to help you out.
Good luck!
Mike
Hi Mike, I’m back!
OK, figured out the initial problem (something faulty in the close button).
I’ve implemented the revised approach on all 9 sections, and it works for the most part except 2 issues:
1.there is a “hiccup” on the close event. I want the diagram screen mcMask go back to frame one (empty frame) and the mcMaskOut play so the transition is not as abrupt. Both happen, but there is a small “flash” before mcMaskOut plays that I can’t figure out.
2. other issue is that I still have overlap conflict between zoomable areas and zoomed in window – this time on the close button. For instance, zoomed in on mcZoom3, the magnified window overlaps the clickable area of mcZoom2 and when I try to close mcZoom3 it triggers mcZoom2.
I am emailing you the .fla because without that it’s harder to visualize what I am trying to describe.
If you could help me troubleshoot I would be very grateful.
K
Hi Mike – I just realized that the file I sent you was CS3, do you need it in Flash 8 instead?
K
Hey Lou,
Sorry I didn’t respond… I did get your email. I do have CS3, so shouldn’t be a problem. However, not sure I’ll have the time to check it out today… might have to wait a day or two. I’m sure you can understand.
I’ll get back to you as soon as I can.
– Mike
Mike – of course I understand. I am so past due on this project, a couple of days can’t possibly get me in more trouble!
In the meantime, I will continue to try and figure it out on my own.
Thanks in advance for your help.
K
Ok Lou, I just sent you a new file via email, with a very lengthy (and possibly confusing…) explanation. Hopefully it solves your problems. The button issue had to do with the stacking order of the layers, and the “hiccup” I believe had to do with the place where you were initiating the “mc_mask” clip to switch frames. The email will give you the full rundown.
If you’re still having problems, let me know and I’ll take another crack at it.
– Mike
Mike – got your email, not confusing at all.
Can’t wait to try it tomorrow morning. Will let you know end result.
Again, I really do appreciate all your help, couldn’t have done this without it.
Take care,
K
Hi Mike – I cleaned up my file but not quite there yet. One small issue remaining with the mcMaskOut on certain zooms.
I sent you an email with the details and the file. If you have time to look, that would be so great
Thanks, K
[…] it creates a similar effect created in one of my own Flash tutorials on http://www.mikestickney.com: Flash zoom tutorial. Differences being my tutorial is written for AS 2.0 and uses tween animation, while this animation […]
Mike,
Does it matter if I use ActionScript 2.0 or 3.0? Also, I tried your tutorial in each, and when I preview it, it doesn’t work for some reason.
I don’t even know where to start looking to see what I may have done wrong. Any suggestions on how to investigate? Thanks.
Hi New B,
This tutorial is for ActionScript 2.0 only.
Sorry you’re having problems with this, not sure what is going wrong without more info. Are you getting any error message in the output panel? (the output panel will automatically popup when you test the movie if there are code errors). If you followed the tutorial exactly, my first thought is that you may have the same problem as some of the other readers with smart quotes. When you copy/paste from the web, it uses smart quotes instead of regular quotes in Flash. you need to replace the smart quotes with regular quotes. Hope this helps, but let me know if you still have a problem.
Thanks for reading!
– Mike
Mike,
Thanks for the speedy response. I got these errors from the output panel:
Scene 1, Layer ‘actions’, Frame 1, Line 4 1120: Access of undefined property zoom. if(zoom == true){
Scene 1, Layer ‘actions’, Frame 1, Line 10 1120: Access of undefined property zoom. zoom = false;
Scene 1, Layer ‘acrions’, Frame 1, Line 15 1120: Access of undefined property zoom. zoom = true;
I looked in the code you post in the directions, and for the life of me, I don’t see any ‘quotes’ that can be changed into ‘smart quotes’…please write out the part of the code that would have quotes.
Thanks again.
New B
Mike,
P.S.: typo in the last error. ‘acrions’ is, of course, ‘actions’.
Hi New B,
You are right, there are no quotes in this tutorial (it’s a problem that people were having with other tutorials, so I thought it might be a quick solution… sorry for the added confusion).
As far as your error, not sure why you would be getting that… You can try sending me the file (contact@spitshine-design.com), or try pasting the code here and I can try taking a look at it. Also, the source files are available for download at the end of this tutorial. If you haven’t already, try downloading them and taking a look and see if you can find any discrepancies in the code.
Thanks for reading, hopefully we can get this working for you.
– Mike
Hi,
Nice and easy , I applied it, but couldnt make some adjustment on it which is :
1- want to make it OnPress.
2- want several object on the stage not only one, and when press the object it zoom in, at the same time all others disappear. and when press on a back button, the object zoom out again, then all others show up again.
can you help in this adjustment pls ?
Hi Emad,
What you’re asking for is actually something that I’ve been working on with another reader for quite some time… It’s well beyond the scope of this tutorial, but I’m hoping to take what I’ve done and write a separate tutorial for that type of functionality. Unfortunately, I’ve been swamped with other projects and haven’t had the time necessary to write it. Check back on the site and I hope to have something as soon as possible.
Thanks for reading!
– Mike
tnx mike, untill you post the tutorial, I will try to play and adjust maybe I can work it out.
I will be checking this site for yours
tnx again
hi Mike,
my project displays a series of images in chess board format and when clicked on 1 they shud be zoomed in to with a border and on click again zoom out to the initial screen. please help me to work out this.
the thing i want is something similar to this http://www.flashloaded.com/flashcomponents/3dwall/example2.html
but not exactly this one.. i just need the zoom in and zoom out effects. could you please help on it
thanks a heap..
Hi Gowri,
Wow, talk about out of the scope of this tutorial..
The example you have is really quite complex and I imagine is done using primarily ActionScript. This tutorial was meant for beginners to get their feet wet in Flash.
That said, I have been working on a tutorial to do zoom in and out on click, but it’s nothing compared to what your example does. Check back soon for that tutorial, since it might start you on the road to doing something like that.
Thanks for reading!
– Mike
Hi Mike,
and yeah i know that web site is real complex thou… me too a beginner trying to wet my feet but then my 1st project gotta be so “EASY” i jus like to get a link to start up with…
Regards
Gowri
hi Mike i am now stuck with a small problem. my client wants the flash file as exe. i managed to find the converter, but since my case involves requiremnet of picture files n other xml and actionscript files.. converting only the swf to exe doesnt display the movie properly. kindly help,
thanks and regards
Gowri