Flash Zoom In

**Medyman** · 05-05-2008, 01:11 AM

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 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** · 05-05-2008, 07:58 PM

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** · 05-05-2008, 11:05 PM

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** · 05-09-2008, 12:20 AM

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** · 05-09-2008, 02:09 PM

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:

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

Code:

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:

Code:

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:

Code:

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

That should fix it for 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.

Sure, you can email or PM me through the forums.

**ReadyToLearn** · 05-16-2008, 11:52 PM

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** · 05-17-2008, 02:43 AM

Drupal...*shudder*

My suggestion? Run! The only content management system that I use (and will ever use from now on) is ExpressionEngine (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** · 05-21-2008, 12:52 PM

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** · 05-21-2008, 01:33 PM

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.