Flash Zoom In

[ReadyToLearn]

Hi everyone,

I am trying to create a flash zoom effect. I have a picture on the stage. On frame one it's small. On frame 30, it's large. Then on frame 60 it's small again.

When onRelease it gotoAndPlays from frame 2. When I onRelease it gotoAndPlay frame 31. Frames 1, 30 and frame 60 have stop(); action. On frame 30 I have var big:Boolean = true.

Then I test for big, if true. I go to frame 31 and play. If false, i go to frame 2 and play.

This all works great. But I have 60 images to do this to.

Is there an easier and quicker way than having the same AS block for all 60 buttons. I think for loop should be used here but I can't get it to work.

Also, my movie takes forever to load because it has 60 pictures, I guess. Is there a way to reduce load time?

[Medyman]

Whoa! OVERCOMPLICATED

You can cut back a lot on all of that repetition. You certainly don't need the same code block 60 times.

Three things I'd recommend:

1) Get the tweening off the timeline. This will reduce your file size and load time as well as make your movie more manageable. Use MC Tween.

2) Get the actual images out. Use the MovieClipLoader class to load external images as needed. I've linked to documentation on it in some of your other posts. This will greatly reduce your load time

3) As you correctly figured out, use a for loop to assign all the actions on the Movieclip. You can reduce all 60 blocks of code into two functions.

It looks like you're going to be getting pretty familiar with the MC Tween documentation. Again, let me know if you have any specific questions on implementation.

[ReadyToLearn]

Two functions sounds amazing! But I have no idea where to begin.

I've looked into the links that you gave in all of my topics (thanks so much for all the help by the way). A lot of it is just over my head.

I think I'm going to start with this project first and then do the others. So I will do the things in the order you have written them. Is that correct?

I dl'ed mc tween and installed it.

I have one image on the stage. I turned it into a movie clip and gave it an instance name of image1.

What I am trying to do is that if you click on it it should get bigger.

I added AS like this:

image1.resizeTo(200, 100 [, 1, linear]);

But it doesn't work! What am I doing wrong? That's exactly how it appears on the website for mc tween. I tried so many different combonations, but it doesn't work.

[Medyman]

I think I understand what you're trying to do. I can forsee several obstacles that you're going to encounter using the technique that I think you're employing.

It's good that you installed MC Tween. A lot of people are confused by the fact that it's actually an extention that you have to install and not a native Flash class. Have you also included it at the top of your ActionScript?

Before you begin to use MC Tween, you have to declare an invocation to the class to tell Flash to pull that tool out of the toolkit. You do this by adding the following to the top of your ActionScript:

#include "mc_tween2.as"

I'm not sure what mc_tween1 was, but regardless...this is the include call.

Next, your syntax isn't actually "exactly" how it appears in the documentation. I can see where you made the mistake. The syntax guidelines in the documentation use a different kind of notation to specify optional parameters (using the square bracket).

If you look at the actual examples you the same page, you'll see the bracket removed. So, the correct way to write what you've written above would be:

image1.resizeTo(200, 100, 1, "linear");

Notice that the square brackets are gone and that the animation type is in quotes. Just so that you're clear what you're doing with the above code it says: resize the image1 movieclip to the 200px by 100px over 1 seconds using "linear" animation. If that's what you want...that's what you'll get. It should work.

A word of advice, though. I tend to not like using resizeTo in most instances. I'm not sure about your setup and this might not apply but using scaleTo is a bit more flexible. Say you have imges of varying sizes. Resizing these to 200 x 100 might not yeild the best results. Using scale to, you maintain the aspect ratios because you specify a percetage increase instead of hard coding a value.

Using scaleTo() would give you something like this:

#include "mc_tween2.as"
image1.scaleTo(120, 1, "linear");

There are also the xScaleTo() and yScaleTo() methods if you only want to increase one axis.

Since you're just beginning, I suggest you study the animation types in the MC Tween documentation really well. Choosing the right animation type is key! For example, when creating something like what I'm imaging you're creating, I usually use easeOutQuad. It's a very smooth motion with easing applied towards the end of the animation. This creates a nice transition. Using linear animation at times can be abrupt, though there are certainly uses for it -- perpetual motion, for example.

Using easeOutQuad would look something like this. Sources are included with that, feel free to play around.

I've probably given you more information that you need. Hope that helped.

[ReadyToLearn]

Perfect! Thank you so much. It works now.

I like your example.
You're right. It does look smoother.

I now want to do this so that it automatically zooms in when you mouse over it. And then when you mouse out it zooms out again.

I did this on the image

on (rollover) {
   image1.scaleTo(120, 1, "linear");
}

on (rollout) {
   image1.scaleTo(120, 1, "linear");
}

but I get this error:

Statement must appear with on/onClipEvent handler

I don't know what that means.
I think maybe you can't add animation to the mouse click. Right?
I will download your source and see how it is you did it.

[Medyman]

Hmm...what version of Flash are you using? CS3?

I ask because the error that you have is a CS3 error. You could get it in earlier versions too, but it doesn't seem likely in this situation. In pervious version of flash you could add mouse events to an actual movieclip. In Flash CS3, you cant. You have to add them to the timeline.

Regardless, you can't tween from adding actions to a movieclip. All tweens have to be on the timeline.

So intead of the on(rollover) statement that you have, you would use:

image1.onRollOver = function() {
   this.scaleTo(120, 1, "linear");
}

The same logic applies for the on(rollOut) too.

[ReadyToLearn]

Thanks!
This is what I have so far.

image1.onRollOver = function() {
   this.scaleTo(100, 1, "easeOutQuad");
}
image1.onRollOut = function() {
   this.scaleTo(50, 1, "easeInQuad");
}

My end goal is to have something like the website seen at http://www.lecoqsportif.com/#/us/all/
The differnce will be that they are all images. They are all the same size. When you roll over them they get bigger.

I will add more to it later but this is my main goal. What do I suggest that I learn to be able to do this?

[Medyman]

That's a pretty ambitious project. If you have so much visual interest on the page, I'd urge you to be weary of adding too much to the page. I'm imagining that you want to add all of the techniques that you've asked about to the same page.

Anyway, I'll leave my design critques out of this, though I hope you'll double think the approach if indeed you do want to use all the effects.

Here are some things for you to think about:

1) Which images will be added to the page? How will that information be added into Flash? XML? Textfiles? PHP through a CMS? Flikr API? Other RSS Feeds?

2) What will the design be? How will the images be arranged? How many images will there be?

3) How will you handle different viewport sizes? The same number of images won't fit inside all viewports. Do you want to make the movie viewport aware (i.e. do you want the layout to change when someone resizes the browser).

These are just to get you started. More issues will come up as you progress. Some of these things might not have obvious answers at first. They're more "we'll cross that bridge when we get to it" type of issues.

I suggest that you work on the layout first -- getting all the images to line up in that sort of grid. Then focus on bringing in the images via some sort of dynamic method -- XML, preferably. Then create a way to dynamically load them using MovieClipLoader. Then you can go about creating all your mouse event animation.

This really is a perfect candidate for using Object Oriented Programming techniques. I'm not sure how familar with OOP practices you are. If you are, or are willing to learn, that might be a more organized way to approach this. Though, correct me if I'm wrong, you're just beginning with ActionScript so you might not be at a stage to use OOP.

[ReadyToLearn]

Thank you for your response. It gives me a lot to think about.

Do you have any recommendations for which format I should use? I was thinking text files. Using PHP with a CMS would be convenient but I'm not a good enough programmer to do this, unfortunately. Flickr API also sounds interesting but I just looked at the webpage and it look way too complicating.

I will begin as you have advised. I will create layout first.

I will also research OOP techniques and try to use them where I can. Thank you for your advise and help.

[ReadyToLearn]

Hi Medyman,

I have begun with the layout but am having some troubles.

I have created 60 movieclips in the stage. They have instance names given of image1, image2, image3, image4, etc. The last one in series is image60.

My actionscript is this:

var myArr:Array = new Array("image1", "image2", "image3", "image60");
for (i=0;i<60;i++) {
	var tmp:MovieClip = eval("image"+i);
	tmp._x = i*100;
   if (i >= 0 && i <= 10) {
	 myArr[i]._y = 0;
   }
   
   if (i >= 11 && i <= 20) {
	 myArr[i]._y = 100;
   }
   
   if (i >= 21 && i <= 30) {
	 myArr[i]._y = 200;
   }

   if (i >= 31 && i <= 40) {
	 myArr[i]._y = 300;
   }

   if (i >= 41 && i <= 50) {
	 myArr[i]._y = 400;
   }

   if (i >= 51 && i <= 60) {
	 myArr[i]._y = 500;
   }
}

I borrowed eval from one of your earlier posts. Is that the correct technique? This script works, but it is not 100% as I would like to display the items.

Some issues:
1) The first image starts 100 pixels from the left hand edge. I would like to make it flushed against it.
2) I research createDuplicateMovieClip but I cannot make it work. How do I make it so that I can use any amount of clips, not just 60. How can I make it so that I do not have to create 60 image cliops.