Gallery 102 by CyanBlue
Gallery 103
Gallery 102 + RollOver Effect
by CyanBlue
 

This version adds some pleasure to your eyes. I have added a mouse rollOver effect by utilizing two external ActionScript class files. You can get more information on how you can utilize this Laco's Tween Prototypes from this website.(http://laco.wz.cz/tween/)
 
This version is very simple one that mainly talks about two different things.
  • How to use an external ActionScript file.
  • How to utilize the Laco's Tween Prototypes.
 
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, let's get down to the business.
 
1. Loading External ActionScript Files
  
  1. #include "DrawBox.as"
  2. #include "lmc_tween_as1.as"
It's rather simple if you see the code. I just use '#include' plus the name of the external ActionScript file name to include the content of the file. One thing you will have to remember is that #include includes the file when compiling the Flash movie, period.
What I mean by the 'compiling' is that you do not require to have the external ActionScript files residing in the same directory everytime when you are executing the Flash movie because the content of the external file is already included. I also mean that you cannot dynamically use #include command like this.(I am sure you know what I mean.) 
  1. if (FlashPlayerVersion < 7)
  2. {
  3.     #include "AS1.0.as"
  4. }
  5. else
  6. {
  7.     #include "AS2.0.as"
  8. }
 
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. 
  1. MovieClip.prototype.drawBox = function(x, y, w, h, lineWidth, lineColor, lineAlpha, bgColor, bgAlpha)
  2. {
  3. 	// x         : The starting x point of the box
  4. 	// y         : The starting y point of the box
  5. 	// w         : The width of the box
  6. 	// h         : The height of the box
  7. 	// lineWidth : The width of the line
  8. 	// lineColor : The color of the line
  9. 	// lineAlpha : The alpha of the line
  10. 	// bgColor   : The color of the background
  11. 	// bgAlpha   : The alpha of the background
  12. 	this.beginFill(bgColor, bgAlpha);
  13. 	this.lineStyle(lineWidth, lineColor, lineAlpha);
  14. 	this.moveTo(x, y);
  15. 	this.lineTo(x + w, y);
  16. 	this.lineTo(x + w, y + h);
  17. 	this.lineTo(x, y + h);
  18. 	this.endFill();
  19. }
 
2. Applying the RollOver Effect
 
The script is rather simple but its effect is quite good. 
  1. _mc._alpha = 50;
  2. _mc.onRollOver = function()
  3. {
  4. 	this.alphaTo(100, 0.5, "easeOutQuad");
  5. 	this.createEmptyMovieClip("line_mc", 99999);
  6. 	this.line_mc.drawBox(_x + 1, _y + 1, this._width - 2, this._height - 2, 2, 0xFFFFFF, 100, 0x000000, 5)
  7. };
  8. _mc.onRollOut = function()
  9. {
  10. 	this.alphaTo(50, 0.25, "easeOutQuad");
  11. 	this.line_mc.removeMovieClip();
  12. };
Line 1   _mc._alpha = 50;
  This line basically sets the default _alpha property to 50 to all the image thumbnails when they are initially loaded.
Line 4   this.alphaTo(100, 0.5, "easeOutQuad");
  This line is where I am using the Laco's Tween prototype. The prototype has lots of premade functions such as alphaTo(), colorTransformTo(), contrastTo() or scaleTo() functions, but simple alphaTo() function worked well with the sample image files. You might also want to play with colorTransformTo() function as well.
Line 5 - 6   this.createEmptyMovieClip("line_mc", 99999);
this.line_mc.drawBox(_x + 1, _y + 1, this._width - 2, this._height - 2, 2, 0xFFFFFF, 100, 0x000000, 5)
  I created a movieClip called 'line_mc' here. When I say 'this' in these lines, 'this' refers the thumbnail movieClip. In that movieClip, I created a holder that will contain the border that is 2 pixels smaller than the actual thumbnail image.
Line 10 - 11   this.alphaTo(50, 0.25, "easeOutQuad");
this.line_mc.removeMovieClip();
  This block gets executed when the mouse gets rolled out, so the effect that has been applied on rollOver handler should be turned back to normal state. Hence, I am using alphaTo() function to reset the alpha value back to 50, which is the initial value, and removes the drawn border by using the removeMovieClip() function.
 
Well, That's the end of this simple revised version. Hopefully there isn't hard thing in this version.
 
Please post the question to the forum if you have any or if you have suggestion/correction.
 
Download the file from here : Gallery103.zip
 
   |      |      |      |   Last Modified: July 17, 2009 @ 4:25 am