Welcome to the blog for Spitshine Design

Here you can find tips, tricks, tools and tutorials as well as other musings from Mike Stickney, Web Designer and Online Marketer.

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:

This movie requires Flash Player 8

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).

Flash tutorial image 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.

Flash Tutorial image 3

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).

Flash tutorial image 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

Share and Enjoy:
  • LinkedIn
  • Twitter
  • Facebook
  • DZone
  • Digg
  • del.icio.us
  • Slashdot
  • Mixx
  • Google Bookmarks
  • Technorati
  • Internetmedia
  • Scoopeo
  • StumbleUpon
  • Add to favorites
  • FriendFeed
  • Propeller
  • Reddit

119 Responses to “Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over”

Julia on March 31st, 2008 at 12:06 am said:

First of all thank you for this great tutorial. I was looking for it for a while. I have a question, though – my growing buttons work perfectly in Mozilla but IE is not letting the buttons grow and I have a border around the swf file – is there a trick to make it compatible with IE as well as Firefox??

Thanks a lot,

Cheers

Mike on March 31st, 2008 at 1:37 pm said:

Hi Julia,

I believe what you are referring to is one of the new security features in IE that forces the user to click on the flash element in order for it to have any interaction with it. I’m thinking there is a script to add to get around that, but it’s escaped me right now. I’ll try to do some research on it later, and hopefully provide a link or something on what to do.

For starters though, try clicking on the flash element first in IE and see if the zoom effect works just to make sure we are indeed talking about the same issue.

Thanks for reading!
Mike

Jun on March 31st, 2008 at 1:50 pm said:

thanks…………a lot :grin:

links for 2008-04-01 | Zoe Zombie on April 1st, 2008 at 12:42 am said:

[...] mikestickney.com » Flash Tutorial: Quick and Easy Zoom Effect on Mouse Over [...]

kid on April 1st, 2008 at 8:08 am said:

Thanks for the tutorial1 :grin:

Julia on April 5th, 2008 at 5:55 am said:

Question nr.2:

How to apply get url?
I tried to create an invisible button inside a Movie Clip, but no luck.
The Movie Clip (growing button) script uses on rollout event and when I apply on release to an invisible button it doesn’t work.

Mike on April 5th, 2008 at 3:17 pm said:

Hi Julia,

To add a “getURL” action to this movie clip, you can simply add the following code to the Actions on Frame 1 of your box mc (under the “zoom” code):

this.onRelease = function(){
getURL(“http://www.yourdomain.com”, “_blank”);
}

What this does is opens a url in a new window when the user releases their mouse button. Technically, you could add an invisible button to the movie clip (not sure where the code is going wrong in your case…), but I think this way should be much simpler.

Thanks for reading my tutorials, I hope you are finding them helpful! And if you have any other questions, please let me know.

- Mike

Julia on April 6th, 2008 at 8:28 pm said:

Thank you so much again for all the detailed instructions. I still have troubles though – my button goes to the url as soon as I point at it, doesn’t wait for a click or release as it supposed to. I do add the get url script to the 1st frame of the actions in mc.

sajin on April 7th, 2008 at 11:43 am said:

Thanks for the tutorial OOOOOOh sory! Thanks for the help…………..

Mo on April 9th, 2008 at 1:49 pm said:

this sucked… it doesnt even work on my computer

Mike on April 9th, 2008 at 2:14 pm said:

Mo,

Before you start bashing this, why don’t you try and find out where the problem is. This has been tested, and seems to be working fine for others. If you’re having problems, I would be happy to help trouble shoot for you if you describe the problem or possibly send me the file.

- Mike

Alev on April 14th, 2008 at 9:23 pm said:

Thank you this really helped with my project but i have a problem. Im new to Flash, so im not sure where exactly i need to place the stop(); action in the actions panel. Do i place it straight after the code before that?
Another question I wanted to ask- is it possible to add animated text into the object?

thanks again

Mike on April 14th, 2008 at 9:44 pm said:

Hi Alev,

Not sure I understand your question about the stop(); action…. Yes, the stop(); action goes on the action panel, on Frame 1, there would be a stop(); action at the beginning of the code. On Frame 15, the stop(); action is the only code you would use.

As for the animated text, yes, you can add it as a nested movieclip. In other words, you would make a separete movie clip with your text animation, and then add that to the movie clip symbol that you have the zooming effect on (does that make sense… I’m in a bit of rush right now, so I’m trying to give you a quick explanation.). If you give me an example of what you’re trying to do, I’d be happy to give a better explanation if needed.

Thanks for reading.

- Mike

Alev on April 15th, 2008 at 6:37 am said:

Hi Mike

Thank you so much for responding. :smile:
Ok, the problem with my movie clip is i cant get the object to remain zoomed in as long as the mouse is over it, it zooms in and then it just moves back to it orginial size. It jus wont function the way it should.

As for my project, theres a link below you could have a look at which is similar to what i want to do..accept i want to apply animated text and sound. To be specific, when a box is zoomed in I want the text animation and sound to play, does that makes sense?:???:

thanks for you time
Alev

Alev on April 15th, 2008 at 6:38 am said:

Sorry forgot to give you the link :roll:

http://epimone.net/pieces/wave2/index.html

Suely (Snakesue) on April 15th, 2008 at 9:23 am said:

Hi Mike,
First of all thank you for this great tutorial. I was looking for it for a while like Julia said. I love the Lakers and I found amazing the effects (www.nba.com/lakers/roster/index.html) until to found your tutorial.I tried and it works, but I have a question because I’m new to Flash – version 8. I added a new keyframe on frame 30, new Motion Tween and I used the blur effect.Ok!
I put five mcs on stage. I want when we roll over one movie clip the others and only the others go to (“blur”)or (16).
Thansk for help me and forgive my bad english (I”m learning too)

Clara on April 15th, 2008 at 12:38 pm said:

Hi Mike,
Thank you for this useful tutorial.
I want too zoom in and zoom out upon click .How should I change the script to meet my need?

Mike on April 15th, 2008 at 12:54 pm said:

Wow… lot’s of comments this morning… I’m very excited that people are reading my tutorials!

Ok, Clara, Suely and Alev, I promise to get back to you sometime within the next day or two… I’m at my full-time job right now, so it’s tough to get to this stuff immediately, but I didn’t want to leave you hanging.

Suely, there’s a lot going on on the Lakers site, not sure where the blur effect you are referring to is… I assume the player “enlargement” is what you are referring to fro teh zoom effect (that effect can be accomplished with this tutorial). If you can send me the file you are having problems with, I can more easily get an idea of what you are doing and troubleshoot it if necessary. You can email it to contact@spitshine-design.com. (Note, if you email me I will not share the file without your permission).

I hope to help everyone as soon as possible. Thanks for reading!

- Mike

Mike on April 16th, 2008 at 12:59 pm said:

Ok, trying to get back to some of these comments this morning….

Clara, what you are looking to do is similar to this, but this tutorial actually isn’t the way to go. What this tutorial is doing is toggling between commands based on 2 different mouse actions (rollover and rolloff). What you need is to toggle between 2 different commands using the same action (mouse click). So, while at first you might think we just simply change the on roll over to on click, this would play our clip (zoom in), but when the user clicked again, it would go back to the beginning of our timeline instead of reversing the timeline (zooming out). Does that make sense?

What you want to have happen is fairly simple to do, but it really requires a different tutorial in order to not confuse people. That said, I will work on a new tutorial to show you this process, but it will take another day or two. I will get back to you as soon as possible.

Thanks for reading

- Mike

Mike on April 16th, 2008 at 1:08 pm said:

Hi Alev,

I reviewed your comment/question above… The first problem is probably that you didn’t add the “stop();” action to the last frame of the zoom animation. On the actions layer, add a new keyframe to the last frame and paste the following in the Actions Panel:

stop();

That should do the trick and it should stop as long as your mouse stays on the clip, but then zoom out wehn you roll off.

For the second part of your comment, if I’m understanding it correctly, you can add a movieclip with your animated text to the last frame of your zoom animation. When your zoom hits the last frame, this text animation would play. On rollout, it would not play and your zoom would zoom out. Might be a little confusing to understand here, so as soon as I get some time, I will do a quick mockup. I apologize that I’ve been very busy the last couple days.

Thanks for reading!
- Mike

Mike on April 16th, 2008 at 1:11 pm said:

Hi Suely,

I’ve tried to take another look at your comment above… What you want to do is possible, and not terribly difficult, but it does require some actionscript that is well beyond the scope of this tutorial. I will be happy to help you out with a solution, but it will take me a few days to get to it. I will try my best to have an answer for you as soon as possible.

Thansk for reading!
- Mike

Suely(Snakesue) on April 16th, 2008 at 11:10 pm said:

Hi Mike,
When I add more frames with another motion guide (for blur image), if the var zoom = true make the movie back to frame 1. Else if var=false, the movie play (not even so many stops) until stoped in frame 1.
Only you can salve me. I am sending now my file.
Thanks again for your care.
Suely/Rio de Janeiro/Brasil – Yeah!

Mike on April 17th, 2008 at 12:42 pm said:

Hi Suely,

I did receive your files this morning. I will take a look at it later today and get back to you.

- Mike

Alev on April 17th, 2008 at 2:35 pm said:

Hey Mike

i can understand your busy, and thank you for not leaving me hanging.
i would very much appeciate it if you could explain how i need to follow through the whole procedure of creating the zoom images and adding the text animation (if different from the above tutorial). Do follow the tutorial above and then create the nested movieclip for my animated text? do i do this before adding the 15 frames?

I dont know if im making any sense, i do apologise if im not.
All i need to know is the order of prceeding what i wana do.

Also, im not just creating one box, im creating a row of boxes that zoom in and out.. and im guessing i require following the same procedure for each box. (?)

Sorry for being a pain..i just really want to know what im doing.

Many thanks

Alev

Mike on April 17th, 2008 at 2:48 pm said:

Hi Alev,

I will have some time hopefully later tonight to go through this for you. Yes, the first stip is to follow the tutorial above as is. If you want multiple boxes that are the same thing, then you can just use this same symbol multiple times. If you want each box to be different (i.e. if the text is different), then you would can duplicate the symbol and give it a new name for each box you need.

If I’m understanding it correctly, you want the box to zoom in and then the animated text to start once the “box” is zoomed in all the way. If that is the case, then yes, you would make the animated text it’s own movieclip and add that clip to the last frame of your zoom mc (in the case of this tutorial, frame 15). Now I hope I’m making sense.. :wink:

Hope this helps you get started, but I will get back to you as soon as I can spend some more time with it.

- Mike

Alev on April 17th, 2008 at 3:43 pm said:

Thanks Mike. I think i understand, im gona give it a go and see if i can do it until i hear from you again hopefully. :smile:

Alev

Le$o on April 17th, 2008 at 6:58 pm said:

Hi Mike,

Tnx you for your great, awesome and explained perfectly tutorial :wink: .
Like Julia, i wanted to apply a link at the animation. Initially I’ve had some problem with it, but now it works perfectly!
I want to say thank you for your works! :wink:

Le$o

Mike on April 17th, 2008 at 7:15 pm said:

Thanks Le$o… glad you found this helpful.

- Mike

Mike on April 17th, 2008 at 11:52 pm said:

Hey Suely,

I have sent you an email with the updated files… hopefully it helps you out. Any other problems, just let me know. I’d be interested to see your final result, and share the file here for readers who may have been following along. Let me know how it turns our, and send me the .swf if you’d like.

Good luck, and any questions, just let me know.

- Mike

Mike on April 17th, 2008 at 11:54 pm said:

Hi Alev,

I sent you an email about your questions. I think I described the approach you would take already in the comments, but if you have any questions, just let me know.

To help you out, I also created a simple file that shows what I think you are looking for:

http://mikestickney.com/wordpress/wp-content/uploads/2008/03/zoom_tut1_animatedText_flash8.fla

Let me know if this helps. Hopefully you get it working. I’d be interested to see your final results, and maybe show it here for people who have been following along.

Any other questions, just let me know.

- Mike

Alev on April 18th, 2008 at 5:07 am said:

Hey Mike

I have managed to get my boxes function properly and i have apply sound to each of them, and i think i know how to apply the animated text aswel.
The only thing about the text is that i want them to start the same time as the sound and also want to put a stop action to them aswel. Im sending you my file to the email address youve given, so if you could listen to the sounds (conversation between two characters from the film Smokin Aces), i want the text to be the same as what is being said and want it to play only once as long as the mouse is over each box (or card shall i say).

However, i have another problem unfortunatly. If you test the movie, when a card zooms in, it appears behind the other cards!! I dont know how to resolve this, please help!

I’d like to add that Im trying to get the animated text from the Abobe After Effects text animation presets and then export into flash somehow, but dont know it that is possible. Any ideas?

Im really glad i got in touch with you, I wouldnt have been able to do this without your help. :)

thanks

Alev

Suely(Snakesue) on April 18th, 2008 at 6:15 am said:

Hail Mike,
You are AMAZING! Only one day to solve my problem.
It’s exactly what I wanted. I found your code so pretty and clean.
Perfect!!!!
When I think how much the Lakers paid for their site, HOHOHO!
So easy for you.
Thanks a lot.
I go to finish it. Soon I’ll be back!
Kisses

Mike on April 18th, 2008 at 12:48 pm said:

Hi Alev,

I would be happy to take a look at your file, but unfortunately I didn’t seem to receive your email. If you can try sending it again, I’ll take a look: contact@spitshine-design.com. Your projects sounds really interesting. Unfotunately, I’m not too familiar with AfterEffects, so not sure if I can help you with that part, but I’ll take a shot at the flash and see what I can come up with.

- Mike

Mike on April 18th, 2008 at 12:49 pm said:

Hi Suely,

Glad I was able to help you out. Nice to know my tutorials are being used to help others learn flash!

- Mike

Alev on April 18th, 2008 at 2:17 pm said:

Hey Mike

Sorry, ive sent you the file again via email. You should receive it now hopefully.

Alev

Mike on April 18th, 2008 at 9:12 pm said:

Alev,

Took a look at your file…

For starters, the issue with it appearing behind the other cards on rollover is a simple fix… Simply add a swapDepth action to the first frame of your zoom movie clips under your rollover function:

this.onRollOver = function() {
zoom = false;
play();
this.swapDepths(100);
};

Note, “this.swapDepths(100); is the only line of NEW code. Also note, the “100″ is an arbitrary number, it can be anything, but it needs to be higher than the number of clips in your movie. In theory, each clip is on it’s own Depth, so if you have 20 cards, you have depths 1-20. To get the clip to go to be higher than all the clips, you need to use a number higher than your top depth. Does that make sense?

To get the sound to coincide with the animated text, I would add the sound to the text animation clip rather than the zooming clip you have now. That way it will only activate when you hit the same frame as your animated text. Also, this would make so you can set the sound to stop on rollOut… right now, if I rollon and off, the sound plays to the end, which means I can hae the same sound clip running at the same time (I don’t think that’s what you want). I didn’t work on that for the attached file, but if you have any problems let me know and I can do a mockup for you.

Any other questions, just let me know.

- Mike

Alev on April 19th, 2008 at 9:02 pm said:

Hi Mike

ive added the actionscript youve given and it works.. yey! thanks for that, didnt think it was that easy!! Although im not sure if it will still work if i was to play it on flash mx(?)

Im really struggling with the text animation, beacuse im creating the animation from scratch with the help from another tutorial, and im trying to follow through what you said earlier about making the text into a movie chip and then applying it to the last frame of the zoom animation :???: 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.

Or is it best to do it in the way you have explained above, to add the sound into the text animation? But i know im gona get stuck, so could you please explain how to go about doing it in more detail? im really sorry!

thank you

Alev

Mike on April 20th, 2008 at 12:02 am said:

Alev,

The code I gave you is AS 2.0, and should work fine if you are using Flash MX. As far as your next step, I’ll try and mock something up for you and send you a new file in case you are stil lhaving problems.

Glad I could help you out.

- Mike

Suely(Snakesue) on April 20th, 2008 at 8:51 pm said:

Hi Mike
I’m suffering. My little project sounds easy but isn’t.
Can you make a tutorial about loadMovie, attachMovie,when the right code is this.do this, _root.do that?
I changed your code many times, again and again and only thing that works, is not how I liked.
Please, forgive me and have patience with me.
I’m sending files for you.
Thanks
“I have a dream”

Natasha on April 23rd, 2008 at 11:30 pm said:

Hi,

Looks pretty easy. I am very new to flash and I am getting this error:
“1120: Access of undefined property zoom….”
I am using CS3 and AS3

Thanks in advance,

Natasha

Pradeep on April 24th, 2008 at 6:50 am said:

:eek:
hey its working good
and you explain your code in an excellent way
thanks

Divya on April 24th, 2008 at 11:39 am said:

Thanks for helping me in learning flash. If possible pls try to help in future and also can mail me by sending flash ads to the above my personal mail id.

Thanks and regards
Divya:wink:

Mike on April 24th, 2008 at 12:49 pm said:

Hi Natasha,

This tutorial is for AS2 only. You can create it in CS3, but you would need to change your publish settings to be ActionScript 2.0.

- Mike

alev on April 24th, 2008 at 2:38 pm said:

Hey Mike

ive managed to finish my piece..ive used after effects text animation and imported them onto flash..they are workin perfectly fine.

i just want to say thank you for all your help, dont think i would hav managed without ur assistance, i still would have been struggling. :smile:

i could send you the finished piece for you to have a look if you like.

Thanks again

Alev

Mike on April 24th, 2008 at 4:26 pm said:

Hi Alev,

Glad to see you got everything working. Happy to help!

I’d love to take a look at the final piece.

contact@spitshine-design.com

- Mike

Bradley on April 25th, 2008 at 10:21 pm said:

Thanks for the article!

Quick question though. If I want to have multiple getURLs on the zoomed movieClip how is this possible? I have tried to give each “button” within the MC a unique instance name and then targeting it like so…

ok.oc.onPress = function(){getURL(“http://www.yahoo.com”, “_blank”)}

But no dice … any thoughts?

Thanks!

Mike on April 26th, 2008 at 3:49 pm said:

Hi Bradley,

Hmmm… not sure exactly what the problem here is (only have a few minutes to try and answer comments). First question is where are you putting your getURL script? It looks correct, but you would need to point to the path of the button you are pressing…

So, if your clip is called “ok” (and it is on the main timeline) and your button is called “oc” (and is on the “ok” movieclip timeline), then you would need to write the code like this:

_root.ok.oc.onPress = function(){getURL(”http://www.yahoo.com”, “_blank”)}

and put this code in the actions panel on the main timeline. Does that make sense?

If you still have trouble, feel free to send me the file (contact@spitshine-design.com) and I would be happy to help trouble shoot if for you.

Thanks for reading!

- Mike

furkan yavuz on April 28th, 2008 at 11:29 am said:

hi i used this and its working wery good bu i need more than this if some one help me.when object zoom there will be informatin window i will write some text and i will put some pictures.really i need help

Vanrooj on April 29th, 2008 at 1:43 pm said:

quote:
“This tutorial is for AS2 only. You can create it in CS3, but you would need to change your publish settings to be ActionScript 2.0!”

Ah! That’s answered a few questions I’ve been pulling my hair out over! Just for the line above it was worth reading :roll:

andy on April 30th, 2008 at 8:12 pm said:

GREAT tutorial! Tought me exactly what I need! Thanks you much!:smile::smile:

Cheesan on May 5th, 2008 at 1:47 pm said:

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

kirsty on May 6th, 2008 at 12:58 pm said:

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

Mike on May 6th, 2008 at 1:32 pm said:

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

zakari muhammad on May 14th, 2008 at 8:22 pm said:

:roll:

Jaime on May 16th, 2008 at 2:00 pm said:

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

Mike on May 16th, 2008 at 3:17 pm said:

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

Jaime on May 16th, 2008 at 3:18 pm said:

Great!! Thanks so much :smile:

steve on May 17th, 2008 at 9:57 pm said:

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.

Mike on May 19th, 2008 at 1:19 pm said:

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

Shane jackson on May 28th, 2008 at 8:07 pm said:

A great tutorial! Big help as once \i had done the example i had enough knowledge to really expand on it for my site

Anonymous Crappy Coder on June 11th, 2008 at 7:49 pm said:

Hi Mike,

just wanted to thank you for this tutorial… very handy for what I was trying to do. thanks so much!

BiL

Lou on July 3rd, 2008 at 4:50 am said:

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

Lou on July 3rd, 2008 at 5:13 am said:

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 :)

Lou on July 3rd, 2008 at 11:40 am said:

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 :oops:
Thank you in advance.

Mike on July 3rd, 2008 at 12:26 pm said:

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

Lou on July 3rd, 2008 at 5:03 pm said:

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!

Mike on July 3rd, 2008 at 6:51 pm said:

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

Lou on July 3rd, 2008 at 8:12 pm said:

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.

Mike on July 3rd, 2008 at 9:48 pm said:

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

Lou on July 5th, 2008 at 3:07 am said:

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

Mike on July 6th, 2008 at 4:54 pm said:

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

Lou on July 6th, 2008 at 6:31 pm said:

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

Lou on July 7th, 2008 at 4:07 am said:

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?

Mike on July 7th, 2008 at 12:29 pm said:

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

Lou on July 7th, 2008 at 1:29 pm said:

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

Mike on July 8th, 2008 at 2:06 am said:

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

Katie Clarke on July 8th, 2008 at 2:33 am said:

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.

Lou on July 8th, 2008 at 4:33 am said:

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

Mike on July 8th, 2008 at 12:22 pm said:

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

Mike on July 8th, 2008 at 12:23 pm said:

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

Lou on July 8th, 2008 at 7:43 pm said:

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

Lou on July 9th, 2008 at 1:54 am said:

Hi Mike – I just realized that the file I sent you was CS3, do you need it in Flash 8 instead?
K

Mike on July 9th, 2008 at 12:28 pm said:

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

Lou on July 9th, 2008 at 12:47 pm said:

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

Mike on July 10th, 2008 at 1:16 am said:

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

Lou on July 10th, 2008 at 3:15 am said:

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

Lou on July 10th, 2008 at 8:59 pm said:

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

gotoandlearnflash.com » Blog Archive » Bouncing text animation using ActionScript 3.0 on July 19th, 2008 at 4:27 pm said:

[...] 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 [...]

New B on July 28th, 2008 at 8:58 pm said:

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.

Mike on July 28th, 2008 at 9:17 pm said:

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

New B on July 29th, 2008 at 1:34 pm said:

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

New B on July 29th, 2008 at 1:40 pm said:

Mike,

P.S.: typo in the last error. ‘acrions’ is, of course, ‘actions’. :)

Mike on July 29th, 2008 at 2:53 pm said:

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

Emad on August 18th, 2008 at 7:14 am said:

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 ?

Mike on August 18th, 2008 at 5:33 pm said:

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

Emad on August 19th, 2008 at 7:50 am said:

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

gowri on August 22nd, 2008 at 9:40 am said:

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..

Mike on August 22nd, 2008 at 1:30 pm said:

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

gowri on August 25th, 2008 at 2:21 am said:

Hi Mike,

:mrgreen: 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…

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

gowri on August 26th, 2008 at 1:43 am said:

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

SuziQ on September 6th, 2008 at 8:27 am said:

Hi there, Im reading this site for the 1st time and Mike, youre a bit of a genious I must say. Looking forward to trying out some of your tutorials.
I was most interested in the tutorial that Lou was asking for help about, the zoom in on technical diagram. If youre out there Lou, any chance I could get in touch and get a sneak peak of your project? I’m currently exploring a similar zoom idea. That would be awesome!
-SuziQ

Mike on September 7th, 2008 at 1:55 pm said:

Hi Gowri,

Unfortunately, I haven’t had a lot of experience exporting for .exe, however I believe the .exe only compiles the Flash player assets. You would still need to include the other assets (.xml and as files) in the same folder as the .exe file. I apologize that I don’t have much free time these days to try and look into a better answer for you, but hope this helps.

- Mike

Mike on September 7th, 2008 at 2:01 pm said:

Hi SuziQ,

A couple other readers have shown interest in the project that Lou was working on. Lou and I worked together on that quite a bit, and so I’ve come up with quite a few ideas of writing a similar tutorial. Unfortunately, I just haven’t had the time lately to get it done… working full-time, new freelance projects, and moving into a new apartment… Things are starting to settle down a little now that summer is coming to an end, so hopefully get some new tutorials (including that one) up soon. Lou’s project came out pretty good (a few glitches that needed some work…), so it’s definitely something I plan to write a tutorial based on. However, Lou’s project was a real-world project with copyrighted imagery and information so I am unable to share the actual project with my readers, but I am anxious to write a similar tutorial, so check back soon.

Thanks for reading,
Mike

MB on September 22nd, 2008 at 10:55 pm said:

Hi Mike
thanks for the great tutorial. I can make it work (after switching to Actionscript 2.0) but the part i just cant get right is the nested graphic symbol. (I created mine without the text). When I try to create a symbol nested in another…my breadcrumb doesn’t look like figure 1…it simply creates another in scene 1? I’ve tried everything, I am making sure i am in symbol editing mode before creating the new symbol, but no luck. help?!

BG on October 20th, 2008 at 12:39 am said:

Hey Mike,
I am using a very old version of flash (5) and I can’t get the zoom affect to work. I’ve followed step by step 3 times and think it has something to do with my version. Any thoughts? I don’t have the ability to select ActionScripts 2.0 at the beginning, so I am wondering if that might have something to do with it?

Thanks!
Brendan

Mike on October 20th, 2008 at 12:31 pm said:

Hi BG,

It might be your version of Flash. I’m not sure which version AS 2.0 started (I’ll have to do a little research), but you should be able to select AS 2.0 or 1.0. Try going to Edit > Publish Settings and see if you can change it there. This tutorial is for AS 2.0, so that could be your problem. Sorry I couldn’t be of more help, but I’ll try and research the version thing.

Thanks for reading,
Mike

Matt on January 16th, 2009 at 4:34 am said:

Mike,
Thanks for posting this tutorial – it’s really just what I was looking for. As a newb to flash, it seems the perfect thing.

However, I’m finding that your graphics links seem to be broken. Just thought you would want to know.

~Matt

kritsana on January 28th, 2009 at 8:21 am said:

hi Mike
my zoom effect on mouse over application have been used with thumbnail images but the problem is sompart of zoomed image is covered by the other thumbnail images. what can I do to make my zoomed image uncoverable. On the other hand, I want to solve this problem by do the same like this website “http://www.centerpoint.co.th/new/main.asp”. what can I do

hinsel on February 23rd, 2009 at 9:49 pm said:

hello! nice tutorial – has good applications as a button for nav.
thats where i am stuck now…i have a movieclip that expands on mouseover (menuLeft) inside of which are intended to be several buttons (btnOne, btnTwo, etc) but when I click one it always opens the last buttons url, or depending on variation in code opens all the movieclips urls at once regardless of what is clicked…

i have all my actions in the main _root of the movie like thus:

_root.menuLeft.onRelease function = ()
{
btnOne.getURL (“http://www.google.com”);
}

_root.menuLeft.onRelease function = ()
{
btnTwo.getURL (“http://www.yahoo.com”);
}

any ideas???

Mike on February 27th, 2009 at 1:31 am said:

Hi Hinsel,

Not sure if I understand it correctly, but I think the code ou would need to use would be this:

_root.menuLeft.btnOne.onRelease function = ()
{
getURL (”http://www.google.com”);
}

_root.menuLeft.btnTwo.onRelease function = ()
{
getURL (”http://www.yahoo.com”);
}

Hopefully that helps. Thanks for reading!

- Mike

eddcase on March 31st, 2009 at 9:52 pm said:

Great tute thanks Mike. Just one point, and I think it’s an issue that’s given rise to several “it’s not working” comments is that in the tute you don’t say that in the actions layer frame 15 should be made a keyframe before you add the stop() action. You could change the tute to something like:

In the movie clip, right click on frame 15 of the “actions” layer, and select ‘insert keyframe’ then add the following code to that frame in the Actions Panel:

stop();

I know you cover this in a post and it’s shown in the source file but if it’s not mentioned in the tute, beginners will get confused!
All the best Mike and thanks for a great tutorial.
Ed

Sarah on July 17th, 2009 at 7:19 pm said:

Hi Mike
I’m a bit late to the party here, but I only recently found your excellent tutorial. I’m fairly new to web design, but have recently completed some exams and have found a few clients for my services.
I just have one small problem with the zoom technique: Is it possible to have multiple instances of the zoom within the same movie clip?
I am trying to build a page which shows thumbnail images of other sites I have built, and I want each one to zoom up on rollover (or on cllick would be better!). The problem is that when I rollover any image, they all zoom up together!
I have so far set up two layers in Flash 8, both the same length of 15 frames, and a third layer containing your actionscript code. The Zoom function works exactly as it should (except that it judders when the mouse hovers over the image border!); however, my problem is that I can’t get only one image to zoom up, its all or nothing!
Any thoughts?

Thanks
Sarah
x

bernadette on August 11th, 2009 at 10:39 am said:

Hey Mike,
I was also very happy to have found your tutorial and I’m amazed by the effort and time you put in to help people like me (flash-beginners …very much so..)..
I scanned the questions that have been asked already but nobody seemed to have my problem….
when I want to choose insert>timeline>motion tween….it’s just not available to choose…basically…..I tried choosing the classic tween but then it just moves the picture and showing it bigger at the end instead of zooming like it does in your example …I did however choose motion tween without the timeline….then I get a lightblue but nothing happens….no arrow appearing…
any thoughts on that?
Hope you still receive and answer questions….
Thanks a lot in advance!!! Bernadette

Ken on August 20th, 2009 at 5:45 pm said:

Mike

it is possible to change the “zoom” code to others which suite the CS3 without changing the publish setting? as im try to perform an action with code that only suite for CS3, i cant change the publish setting to CS2.

thank you

Lisa on August 21st, 2009 at 2:50 pm said:

hello, I’m very new to Flash but learning as I go… I finished my project and I have made ads flow in and out for our website…. now want to add links to some of those ads and it would be nice too for it to stop when the user puts his cursor over it…. can someone help me? I’m not good with action script writing….

Appie on December 10th, 2009 at 10:16 pm said:

Hi Mike,

Thank you very much, also for everyone else who has published a comment or question! My banner turns out great, still working on it though :)

Regards, Appie

marco on December 23rd, 2009 at 8:13 pm said:

hi mike. thanks for this great tutorials. so…i have a question.
if you have a look at: http://cdr.webhat.it in the index page….there is a gallery almost like you have done. you can see it in “prodotti” section. how can i obtain that effect? thanks a lot.

wc on December 24th, 2009 at 10:16 pm said:

Great tutorial.

I’m struggling to make the swapDepth work. I finally got the objects to layer correctly, after I added the first line to the code for each of my objects (see below) that would bring each item back to the base level.

What is happening now is that the zoomed items remain on the stage (in their unzoomed states), even after I switch to another movie clip (the zoom function is one image in a gallery).

this.swapDepths(1);
stop();
this.onEnterFrame = function(){
if(zoom == true){
prevFrame();
}
}

this.onRollOver = function(){
zoom = false;
play();
this.swapDepths(2);
}

this.onRollOut = function(){
zoom = true;
}

Mike on January 16th, 2010 at 6:17 pm said:

Due to overwhelming response to this tutorial, comments for this post are closed. If you are having problems, please refer to other users comments above, as the issue may already have been addressed.

Thanks for reading,
Mike