Resize:

1

im making a portfolio site, and im having a small problem: i want the images to resize when they are loaded in a specific area:

the link: http://greg.ohmuffin.com/ex247.html
fla: http://greg.ohmuffin.com/ex247.fla

click on the digital button, then click on icon 3, i want them to fix in the right betweent the boarders, any clue?

thanks

2

The essence of what you need to do is wait for the image to load then figure out what its dimensions are and see if it needs to be resized. If it does need to be resized then you need to figure out which dimension is the determining factor – the width or the height. Once you have that figured out then you shrink the image accordingly.

One limitation is that when you load a movie it dumps all the contents so if you define an onLoad event handler it will get deleted whenever you try to load an image into the movieclip. In order to get around this I usually create a container for the container. It’s like a box inside a box. That way I can use teh outside box to determine whether or not the image has loaded by checking the movieclip’s width property.

The first thing we need to do is change the code on yor little icon button to the following:

on (press) {
	loadImage("http://greg.ohmuffin.com/images/random_art/ex3_i_swear.jpg");
}

loadImage is a function we are about to define. Go back to the first frame of the main timeline and create the following function:

_global.loadImage = function(img) {
	//reference to loadMe movieclip
	lm_mc = _root.loadMe;
	//create container for images inside loadMe movieclip
	if(img_mc == undefined) {
		img_mc = lm_mc.createEmptyMovieClip("imageContainer", 1);
	}
	//load image movieclip
	img_mc.loadMovie(img);
	//check to see if image has loaded
	//if it has...quit looping and resize the image
	lm_mc.onEnterFrame = function() {
		if(img_mc._width > 0 ) {
			delete this.onEnterFrame;
			resizeImage();
		}
	}
}

Now we need to create the resizeImage function that is called once the image has loaded:

_global.resizeImage = function() {
	//maximum image dimensions
	wMax = 292;
	hMax = 362;
	
	if(img_mc._width > wMax || img_mc._height > hMax) {
		//which dimension is the most oversized
		wDiff = img_mc._width - wMax;
		hDiff = img_mc._height - hMax;
		//calculate ratio
		if(wDiff > hDiff) {
			ratio = (wMax/img_mc._width) * 100;
		} else {
			ratio = (hMax/img_mc._height) * 100;
		}
		
	} else {
		//if image doesn't need to be resized set ratio to 100
		ratio = 100;	
	}
	img_mc._xscale = img_mc._yscale = ratio;
}

Now you chould be able to just call the loadImage function from your little icon buttons and load your images. It might be a better idea though to just resize your images outside of flash. It will cut down on download times for your users.

3

wow, that worked great, thanks a lot,

link: http://greg.ohmuffin.com/ex247.html

4

I think it may be buggy. I just went to the page and sometimes the images would resize and sometimes they wouldn’t. It seems like every other time it resizes. Hmmm…

5

Ok…I got it. I ended up having to dump img_mc and create it fresh each time an image load is called. The revised code looks like this:

//reference to loadMe movieclip
lm_mc = _root.loadMe;

_global.loadImage = function(img) {
	//dump old container
	img_mc.removeMovieClip();
	//create container for images inside loadMe movieclip
	img_mc = lm_mc.createEmptyMovieClip("imageContainer", 1);
	//load image movieclip
	img_mc.loadMovie(img);
	//check to see if image has loaded
	lm_mc.onEnterFrame = function() {
		if(img_mc._width > 0) {
			resizeImage();
			delete this.onEnterFrame;
		}
	}
}

_global.resizeImage = function() {
	
	//maximum image dimensions
	wMax = 292;
	hMax = 362;
	
	if(img_mc._width > wMax || img_mc._height > hMax) {
		//which dimension is the most oversized
		wDiff = img_mc._width - wMax;
		hDiff = img_mc._height - hMax;
		//calculate ratio
		if(wDiff > hDiff) {
			ratio = (wMax/img_mc._width) * 100;
		} else {
			ratio = (hMax/img_mc._height) * 100;
		}
		
	} else {
		//if image doesn't need to be resized set ratio to 100
		ratio = 100;	
	}
	img_mc._xscale = img_mc._yscale = ratio;
}