Resizing Dynamic Images on the Fly!? [Archive] - Flash Tutorials, flash help, action script and flash discussion

View Full Version : Resizing Dynamic Images on the Fly!?

aliasworkshop

06-06-2005, 05:35 PM

I'm trying to figure out this script for a project at work, but I'm at a loss what to do next.

We're trying to make a "media bank" that displays thumbnails of images from a directory in a grid on the stage. This would be easy for me if it weren't for the fact that they want me to make proportional thumbnails on the fly from full images (of varying sizes) and a rollover effect. The only information I'm getting from the database is a .txt file called "flash.txt" with a string of variables for the image names, which looks like this:

&totalfiles=32&path1=im/image1.jpg...

I have 16 movieclips on the stage (s1) for 16 images, each with an empty movieclip inside (c1) - this is where the images are loaded into. The s1 movieclip masks each internal c1 movieclip so that only a portion is shown of the image.

The first frame of the whole movie has the following code on it:

paths = new Array();
initial = 0;
num_mc = 16;
files = new Array();
vars = new LoadVars();
vars.onLoad = function() {
num = this.totalfiles;
counter = num-1;
for (i in this) {
if (i != "onLoad" && i != "totalfiles") {
files[counter] = this[i];
counter--;
}
}
loadImages(initial);
};
vars.load("flash.txt");
function loadImages(resetnext) {
s1.c1.loadMovie(files[resetnext++]);
paths[0] = files[resetnext-1];
s2.c2.loadMovie(files[resetnext++]);
paths[1] = files[resetnext-1];
s3.c3.loadMovie(files[resetnext++]);
paths[2] = files[resetnext-1];
s4.c4.loadMovie(files[resetnext++]);
paths[3] = files[resetnext-1];
s5.c5.loadMovie(files[resetnext++]);
paths[4] = files[resetnext-1];
s6.c6.loadMovie(files[resetnext++]);
paths[5] = files[resetnext-1];
s7.c7.loadMovie(files[resetnext++]);
paths[6] = files[resetnext-1];
s8.c8.loadMovie(files[resetnext++]);
paths[7] = files[resetnext-1];
s9.c9.loadMovie(files[resetnext++]);
paths[8] = files[resetnext-1];
s10.c10.loadMovie(files[resetnext++]);
paths[9] = files[resetnext-1];
s11.c11.loadMovie(files[resetnext++]);
paths[10] = files[resetnext-1];
s12.c12.loadMovie(files[resetnext++]);
paths[11] = files[resetnext-1];
s13.c13.loadMovie(files[resetnext++]);
paths[12] = files[resetnext-1];
s14.c14.loadMovie(files[resetnext++]);
paths[13] = files[resetnext-1];
s15.c15.loadMovie(files[resetnext++]);
paths[14] = files[resetnext-1];
s16.c16.loadMovie(files[resetnext++]);
paths[15] = files[resetnext-1];
}
stop();

There are two buttons on the stage ( < and > ) that load the next set of 16 images. The buttons call the function above using the following script:

//For the forward button
on (release) {
initial+=num_mc;
loadImages(initial);
}

// For the back button
on (release) {
initial-=num_mc;
loadImages(initial);
}

Now, all of this works fine, but how to resize these images proportionally to the clip is what's getting me. I originally tried an onClipEvent(data) for the following code, then an onClipEvent(load), and I also tried putting all the resize code in a function and executing that when the < or > buttons are pressed, but it doesn't work. The following code keeps the functionality of "resetnext" working, but the image continuously blinks because of the onEnterFrame:

//This is on the first frame inside the s1 clip.

this.onEnterFrame = function() {
if (c1.getBytesTotal()>4 && c1.getBytesLoaded()>=c1.getBytesTotal()) {
dw = (142/c1._width)*100;
dh = (108/c1._height)*100;
if (dw<dh) {
c1._xscale = dh;
c1._yscale = dh;
} else {
c1._xscale = dw;
c1._yscale = dw;
}
delete c1.onEnterFrame;
}
};

No matter where I put the "delete. c1.onEnterFrame" the c1 clip continues to blink. And also, if I want the < and > buttons to reset the whole set of images, wouldn't I need onEnterFrame still firing to detect when the new image is loaded into c1 and resize it??

My source file is here: http://galatea.stetson.edu/~dquinone/transfer/bank2.zip

The external files are in the zip.

Ignore the code on the other movieclips in this file, because what I'm implementing here is only on the first s1 clip on the stage (hide everything and unhide the MC layer on the very bottom to get to these clips).

If anyone can help, I'd very much appreciate it!

Thanks in advance,
aliasworkshop

NTD

06-06-2005, 08:39 PM

Hi,

I have not had time to look at your file, but maybe try this to delete the onEnterFrame event.....

this.onEnterFrame = function() {
if (c1.getBytesTotal()>4 && c1.getBytesLoaded()>=c1.getBytesTotal()) {
dw = (142/c1._width)*100;
dh = (108/c1._height)*100;
if (dw<dh) {
c1._xscale = dh;
c1._yscale = dh;
} else {
c1._xscale = dw;
c1._yscale = dw;
}
delete this.onEnterFrame;
}
}

aliasworkshop

06-07-2005, 03:37 PM

When I try to use this. instead of the instance name, the resize script doesn't work (though it does stop blinking)...

NTD

06-07-2005, 06:08 PM

Hi,

I had a quick look at your file. I don't have much time today, but I will try to briefly explain how I would do something like this. I would only use the image names in the textfile and populate an array with that data. You can then use a for loop to use that data however you would like with the array.I would also code the clipHolders to size and position the content dynamically...

Set the position and size manually on each holder clip. Use a generic name for each clip so it can be accessed with a for loop..... clip1,clip2,clip3,etc...
Action for each clipHolder MC.....

onClipEvent (load) {
_alpha = 100;
alpha = true;
}
onClipEvent (enterFrame) {
if (this._width>0) {
with (this) {
_x = 50;
_y = 100;
_width = 50;
_height = 50;
}
}
}

Main timeline actions...

vars = new LoadVars();
vars.onLoad = function(success) {
if (!success) {
trace("Failed to load");
} else {
//Create an object to hold the textfile data
myImageList = [];
//Populate the myImageList with the loadVars data
//retrieved from the text file
myImageList = vars.images.split(",");
trace(myImageList[2]);
for (i=0; i<myImageList.length; i++) {
_root["clip"+i].loadMovie(myImageList[i-1]);
}
}
}
vars.load("imageList.txt");
stop();

The imageList text file would look like.....

images=im/image1.jpg,im/image2.jpg,im/image3.jpg,im/image4.jpg,im/image5.jpg,im/image6.jpg,im/image7.jpg,im/image8.jpg,im/image9.jpg,im/image10.jpg,im/image11.jpg,im/image12.jpg,im/image13.jpg,im/image14.jpg,im/image15.jpg,im/image16.jpg,im/image17.jpg,im/image18.jpg,im/image19.jpg,im/image20.jpg,im/image21.jpg,im/image22.jpg,im/image23.jpg,im/image24.jpg,im/image25.jpg,im/image26.jpg,im/image27.jpg,im/image28.jpg,im/image29.jpg,im/image30.jpg,im/image31.jpg,im/image32.jpg

If I get some time later tonight or early tomorrow, I will post a demo file.

Regards
NTD

aliasworkshop

06-07-2005, 06:10 PM

Thanks man, I appreciate your help!

When I go into work tomorrow, I'll try out the code you've posted.

aliasworkshop

06-08-2005, 12:54 PM

Okay, I got your code working. I placed 12 clips on the stage and used the formatting of the text file as you said.

I'm not sure if this is correct, but this is what I did for the invisible buttons over each clip:

on (release) {
getURL(_root.imageList[0]);
}

Through imageList[11]. Now, for a "next" or "back" button, I'm not sure what my programmer was doing when he gave me the snippet. This is what he came up with for the next button:

on (release) {
initial+=num_mc;
loadImages(initial);
}

His method for loading the images, which was in a function, was called after setting initial to initial + the number of movieclips on the stage (I think). I think initial got an increment during the function and then the paths of the images are reset. Unfortunately, all of this is beyond me... I'm usually the design/animation person here - I don't understand why they're having me make a media bank in flash when it would be so much easier for the programmers to make it in one of their languages (like php?).

NTD

06-08-2005, 06:44 PM

Hi,

You dont need an invisible button for each movieclip. You can use the existing movieclip holders as buttons. Are you just trying to open the image in a new browser window?...

this.onEnterFrame = function() {
for (j=0; j<myImageList.length; j++) {
_root["myClip"+j]=_root["clip"+j];
_root["myClip"+j].num=j;
_root["myClip"+j].onRelease = function() {
getURL(myImageList[this.num-1]);
trace(this.num)
}
}
}