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 (http://www.visualbinary.net/files/tutorials/zoom-in/). 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.

[Medyman]

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.

That's certainly one route to take. It's not the most dynamic or flexible, as you well know. I suggest that you create these movieclips via ActionScript. Since they're empty movieclips you will want to use the createEmptyMovieClip() method not the duplicateMovieClip method.


I borrowed eval from one of your earlier posts. Is that the correct technique?
It certainly works and I do use it in some instances. Technically it was deprecated after Flash 5 & AS1, but it will still work. The official way is to do it with arrays, but I find arrays to be a little cumbersome in some instances. If you're going to do the rest of setup with the same logic as you currently have, eval will work fine for you. Otherwise, switch to an array.


The first image starts 100 pixels from the left hand edge. I would like to make it flushed against it.
That's because you're starting your loop at i=1 and then setting the _x property with i*100. So the first one will have a _x property of 100. You'll want to start the loop at 0, so that the first value will equal 0.

Also, instead of doing all of those if statements, you can declare a variable that keeps track of how many items you've added to the stage. When you reach the limit, reset the variable and increment the _y variable by 100.


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.

Here (http://www.visualbinary.net/files/tutorials/dynamic-grid/) is an example of how it is done. It's a full browser width application. If you resize the browser and refresh, it will automatically calculate how many images to add to each row. When you test it locally (the source is included on the page, as always) it looks a little better because the images load more organically. When I just tested it online, the images load sequentially, which is not what I wanted. If I were deploying this I'd change that. But, alas, I'm not.

It's random so when you refresh, images will switch. I also added a fun little mouse over effect to light/dim the movies. This also proves my point about keeping things simple. The only "animation" I'm doing here is an alpha (transpareny) tween on a black layer that's above each image. It's two/three lines of code but it makes a dramatic impact.

This should get you started. I've commented out the source so you shouldn't have any problems adapting it.

[ReadyToLearn]

WOW!

Medyman, that example is spectacular! It's beautiful and functional. I've changed my design after seeing that. You are 1000000% right about the less is more.

I might still bother you with the techinque as I am keen to learn the techniques.

I downloaded the source files you provide. Thank you for providing the source for your examples, Medyman. It is great to learn from.

I have two/three question:
1) You did not include XML or Text files with source? How are you able to know which image to display. When I test on my system, your same images come up.
2) How did you do the light trail effect? It is breathtaking!
3) These images will be my portfolio. I want to show larger image of my project when you click on the image for that project. I am a graphic artist. What and how do you recommened I use to show the larger image? I want to make it simple like you have recommended.

I wish to know as much as you one day! Thank you! By the ways, how long have you been using Flash?

Thank you to Medyman.

- Nidhi

[Medyman]

Thank you for the kind words. I'm glad you like it. Programming-wise, it's nothing worthy of much praise. The most affective designs, I believe, are ones which let content do most of the talking and only supplement/augment where necessary. Here, I had some attractive icons of various international celebrities (most of whom you'll probably recognize judging by your name. forgive me if that's being presumptive) and I really didn't need to create much visual appeal.


You did not include XML or Text files with source? How are you able to know which image to display. When I test on my system, your same images come up.
They appear on your computer when you test it because they're hard-linked to my server. The images are coming directly online. So, if you were to test without being connected to the Internet, it wouldn't work. Of course, you can easily replace the images with your own.

The reason that I don't need a text file or XML file or anything like that is because all the images have a numerical naming convention -- 1.jpg, 2.jpg, 3.jpg, 4.jpg etc... So, when calling the images, I simply pick a random number between 1 and 123 (that's how many images are on the server for this demo...i got carried away) and display them.

A little trick that I came up with a while go to do non-repeating random numbers is this:

Create an array with all the necessary numbers (1 to 123 in my case)
Randomly choose one from that array (math.random() comes in handy here)
When you choose a number, replace it with a non-numberical value (I usually choose "x"). To do this you would use the array.splice() method.
Pick another random number
Test to see if that "number" is "x" or an actual number
If "x", choose another number
Repeat until done


The important thing to remember here is that when I say randomly pick a number..that number is the index of the array. So index 123 would yield 123. But once I've choosen 123, it now equals x. If math.random() spits out 123 again, I can easily test to see if the value is 123 or "x". If "x", I rerun the math.random() call.

Hope that makes sense.


How did you do the light trail effect? It is breathtaking!
I love when simple things look complicated. I read a tutorial on how to do this effect a while ago when I was just starting to learn AcrtionScript. I also was amused by it so I followed the tutorial and created the effect. If I remember correctly, it was close to 70-80 lines of ActionScript. In my example, I use MC Tween and it's 2 lines of ActionScript.

The logic is quite simple. First, there is a black square on top of each image. In the state you see it with the mouse off it's at 50% opacity. When you mouse on it, it reduces to 0%. When you mouse off of it, it returns to the 50%. The magic lines in MC Tween's delay parameter. When you mouse off, the alpha tween doesn't kick in until .25 seconds after you mouse off of it, thus creating a "trail" of where you've moused over. Clever, huh?


These images will be my portfolio. I want to show larger image of my project when you click on the image for that project. I am a graphic artist. What and how do you recommened I use to show the larger image? I want to make it simple like you have recommended.

Do you mean design wise? or ActionScript wise? As mentioned earlier, external images should be loaded using the MovieClipLoader class. If you're talking about design, that would really depend on how you've set up these thumbnails. Maybe you want to send me the link of or screenshot of what you're working from. I'll make my design recommendations. That's funny. Most people don't really ask for design recommendations.


I wish to know as much as you one day! Thank you! By the ways, how long have you been using Flash?

I'm really not that good. I started maybe 1 1/2 years ago..fully self taught. Until AS3 came out, I hadn't purchased a single book about Flash/AS2. www.gotoandlearn.com has been my greatest resource as well as Blizzard here on this forum (he's busy now but you'll see his name pop up a lot in the older threads) and random online tutorials found via Google. So, you too can easily get up to my skill level. It's not that hard!

[ReadyToLearn]

Wow, so much to take in a learn. I'm getting overwhelmed by all of this. But you've given me a fantastic start, Medyman. Thank you!

If you don't mind, can I email or pvt msg you a link to my site for you to look at? I would love to get your opinion. I'm not ready for full relase so I will not post it here.

I've decided to go away from the full screen option. There seem to be too many variables to account for.

1. How would I limit the number of columns with the effect you have shown?
2. How to get rid of the white border around the images?

[Medyman]

How would I limit the number of columns with the effect you have shown?

First, you should change all the instances of rowCount to colCount. I don't know why I called it rowCount, it's actually the columns. With that, I think, you should probably be able to figure it out. The name doesn't really matter but it's good to maintain clean, semantic code.

You'll find this line in the code:

var rowCount = Math.ceil(Stage.width/(imgWidth + imgBorder)); // Number of items in one row

You can just change that computation and hard code a number.

- or -

When you're embedding the Flash in the HTML page, just limit the width of the div that it's in. If you're using the same embed dimensions that I am in my example, the width of the flash will be 100% of it's container. So if you only want a three column display, just change the width to 300px (assuming you have no spacing between the images like I do).


How to get rid of the white border around the images?
Umm...

var imgBorder:Number = 1; // Border between images

I see why you're probably confused. I didn't use the variable for the vertical borders.

In the Movie Configuration section, add this:

var imgWidth:Number = 100; // Width of the images
var imgHeight:Number = 100; // Height of the images
var imgBorder:Number = 1; // Border between images

Change the "Create New Row" conditional statement to this:

if (count == rowCount-1) {
count = -1;
yPos += imgHeight + imgBorder;
}

That should fix it for you :D




If you don't mind, can I email or pvt msg you a link to my site for you to look at? I would love to get your opinion. I'm not ready for full relase so I will not post it here.
Sure, you can email or PM me through the forums.

[ReadyToLearn]

Thanks Vishal.

I've emailed you another link to my site. I look forward to whatever comments you have.

I now have this completed. The Flash works PERFECTLY. I've also been able, through assistance from some of your old posts, to get XML to work in tandem with this effect. My next goal is to tie in Drupal to this.

Any suggestions that?

[Medyman]

Drupal...*shudder*

My suggestion? Run! The only content management system that I use (and will ever use from now on) is ExpressionEngine (http://www.expressionengine.com/index.php?affiliate=visualbinary) (EE). That's the only one that I can recommend as well*.

Why do I recommend EE so emphatically? First, it's exteremely flexible. Second, it's very extensible (in a few months, it will be even more so). Third, the support is amazing. This means that I have no real limitations in creating sites. There are some of course, but EllisLab (the company behind EE) is releasing a new version in the coming months that will be built on CodeIgniter, which is one of the leanest, meanest PHP frameworks I've worked with. The benefit? I'll be able to build any application I need/want in PHP and drop that on top of EE. So...no real limitations but my own (or my developer's, more realistically) coding skills.

End plug.

*Wordpress is powerful for what it is -- a blogging tool. Customizing it is another beast.

[ReadyToLearn]

Thanks Vishal. I'll check out ExpressionEngine.

How hard is that system to pick up? I know Drupal so it might be easier to go with that, no?

[Medyman]

It depends on how quickly you can pick things up. It didn't take me long at all but I find I'm quite good at reading code a few times and understanding it. Others can't be bothered with that and need step-by-step-by-substep instructions on how to do it.

My personal opinion of people that find EE hard to grasp is that they're just lazy and/or biased. Biased in the sense that your paradigm of what CMS should be might be shaped by another CMS (Drupal in your case). So the general inclination is to find equivalents of the Drupal workflow inside of EE. That's not possible. EE and Drupal are created with an entirely different philosophy.

So, if you can shed your Drupal prejudices, I'm sure you'll pick it up very fast. The only thing the developers recommend you know prior to starting is basic HTML/CSS.

But, in the end, both accomplish the same thing. I find EE to be better because it's easier to manage and the HTML output is standards compliant. But if you're happy with Drupal and can do what you want with it right now (or know how to), then there probably isn't a valid reason to switch.

[denlowe]

Hello Medyman, Really like the dynamic grid. Is there Action Scrip that will tell the .swf file to auto refresh. Many thanks!

[Medyman]

Hello Medyman, Really like the dynamic grid. Is there Action Scrip that will tell the .swf file to auto refresh. Many thanks!

Not in the example, but you could write it.

You would have to reset the arrays and rerun the loading functions. If you wanted it on a timer, use setInterval().