Gallery 104 by CyanBlue
Gallery 104
Gallery 103 + Resizing/Centering
by CyanBlue
 
Okay, this version mainly adds image resizing & centering effect for the images that are not regular as it used be on the previous tutorials. Also, some more clean up on the codes, of course.
 
Take a look at the final version so that you will have better idea on what you need to do.
 
 

FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT

You do not have the Flash plugin installed, or your browser does not support Javascript.

  
 
Okay, I am going to skip the stuff that has been dealt on the previous tutorials, so if there is something that you are not understanding correctly, please check out the previous tutorials.
 
1. Setup
 
First, take a look at the stage. Three distinct changes in this version is that #1) I have made the stage wider, #2) the thumbnails are set in three columns, #3) there is a white border on the stage.
The first two are minor cosmetic changes but the third one is very important for this tutorial.
Open up the Flash file and click on that white border. It is not the regular graphic image. It is an instance of a movieClip with its instance name set to 'border_mc'. Do you see that?
Okay. Let me explain that part first. I am using that movieClip as a guide on resizing & centering. In other words, I check the size of that movieClip when I need to resize the image and do the math appropriately.
For example, if you have a bigger stage and you want to display the image bigger, then all you need is to change the size of that border_mc. Mind you that you will need to open up the movieClip and set the registration point to the left top corner as I have in the sample file.
 
I am not going to go over the whole details of each files, but here you can take a look at one of the file. You should be able to get the meaning of this prototype just by reading the comments in there. This basically draws a box with given parameters. You will see how I am using it soon.
 
2. Image Resizing & Centering
 
This routine exists within the loadImage function and gets executed only when the image is fully loaded. It is logical to put the routine to there because you have no way of knowing the dimension of the image file unless it is fully loaded into the Flash, right? 
  1. if ((l >= t) && (t > 20) && (_mc._width > 1))
  2. {
  3. 	var _w = _mc._width;
  4. 	var _h = _mc._height;
  5.  
  6. 	var _b_mc = this._parent.border_mc;
  7. 	var maxW = _b_mc._width;
  8. 	var maxH = _b_mc._height;
  9.  
  10. 	var scaleX = scaleY = scaleFactor = 100;
  11.  
  12. 	if (_w > maxW)
  13. 	{
  14. 		scaleX = maxW / _w * 100;
  15. 	}
  16. 	if (_h > maxH)
  17. 	{
  18. 		scaleY = maxH / _h * 100;
  19. 	}
  20. 	scaleFactor = Math.min(scaleX, scaleY);
  21.  
  22. 	_mc._alpha = 1;
  23. 	_mc._xscale = _mc._yscale = scaleFactor;
  24. 	_mc._x = _b_mc._x + Math.floor((maxW - _mc._width) / 2);
  25. 	_mc._y = _b_mc._y + Math.floor((maxH - _mc._height) / 2);
Line 1   if ((l >= t) && (t > 20) && (_mc._width > 1))
  This line checks whether the image is fully loaded or not.
Line 3 ~ 4   var _w = _mc._width;
var _h = _mc._height;
  I am declaring several variables that holds the dimension of the actual image file that is loaded into the movieClip holder(_w and _h).
Line 6 ~ 8   var _b_mc = this._parent.border_mc;
var maxW = _b_mc._width;
var maxH = _b_mc._height;
  Another variables(maxW and maxH) that get the size of the border_mc.
Line 10   var scaleX = scaleY = scaleFactor = 100;
  Other variables(scaleX, scaleY and scaleFactor) that we need to do the math.
Line 12 ~ 15   if (_w > maxW)
{
     scaleX = maxW / _w * 100;
}
  Here we are checking if the actual image width is bigger than the border, and if that's the case, we do the math which we can use to scale down the image. (The same thing is happening in line 16 ~ 19 for the height calculation.)
Line 20   scaleFactor = Math.min(scaleX, scaleY);
  One more line of math which we use to determine which one is smaller. We only need to get the smallest value when we want to scale the image proportionally.
Line 23   _mc._xscale = _mc._yscale = scaleFactor;
  This is the actual line that does the resizing with the value that we've got.
Line 24 - 25   _mc._x = _b_mc._x + Math.floor((maxW - _mc._width) / 2);
_mc._y = _b_mc._y + Math.floor((maxH - _mc._height) / 2);
  And these are the lines which do the centering.
 
3. Some other small stuff
 
Here are some other stuff that's worth mentioning. 
  1. this.thumb_mc["thumb" + i + "_mc"]._x = ((i % 3) * (50 + gap));
  2. this.thumb_mc["thumb" + i + "_mc"]._y = Math.floor(i / 3) * (33 + gap);
Line 1 ~ 2   This is the line that I have changed to make 3 columns within the scrollPane. 
  1. if ((_global.selectedImage != this.num) && (_global.imageLoaded) && (_global.imageFaded))
Line 1   I have added one more variable here, _global.imageFaded, to make sure that the image gets loaded before the user selects another image. 
  1. this["img" + currentHolder + "_mc"].removeMovieClip();
  2. this.createEmptyMovieClip(["img" + currentHolder + "_mc"], theDepth++ + 10000);
Line 1 ~ 2   Here I am deleting the movieClip to make sure that we are getting the correct dimension not the dimension of the previously loaded image. 
  1. var _mc1 = this._parent["img" + currentHolder + "_mc"];
  2. var _mc2 = this._parent["img" + ((currentHolder + 1) % 2) + "_mc"];
Line 1 ~ 2   I am assigning a variable to the actual movieClip instance throughout this sample. I am doing that to get rid of unnecessary calls to the same path which could slow down the Flash Player. The basic rule of thumb is that it is a good time to use this sort of approach when you are calling an instance with more than 3 dots like _root.some_mc.another_mc._x where you can assign that movieClip to another variable as I have done in the sample.
 
Well, This is another ending of this simple revised version. Hopefully you've learned something new from this version.
 
Please post the question to the forum if you have any or if you have suggestion/correction.
 
Download the file from here : Gallery104.zip
 
   |      |      |      |   Last Modified: July 17, 2009 @ 4:25 am