Monday, 20 September 2010

Black and white gallery part 3

This is part 3 of the black and white gallery where I will be creating the gallery dynamically using Actionscript 3 code, so no objects will be initially on the stage. I have again used the same six images from the last tutorial.

Black and white gallery part 3

Step 1

Open a new AS3 file with stage dimensions 450 x 300 and import your images into the library by selecting File > Import > Import to library

Step 2

Drag each of the images on the stage and convert them into movie clips (F8). Check the ‘Export to Actionscript’ box and give each movie clips the class name: image1, image2, image3 etc. Once you have given all the movie clips class names delete them all from the stage. The movie clips will be added dynamically, so will not be needed on the stage.

Step 3

Open up the Actions panel (F9) and enter the following code:

//Import the TweenMax plugin.
import com.greensock.*;
import com.greensock.easing.*;

//Array to hold all the picture instances. 
var picArr:Array = new Array();

//This adds all the movie clip instances into the array using the 
//getDefinitionByName() methodto get the class name
for (var i:uint = 1; I  < 10; i++) {
 var ImageClass:Class=getDefinitionByName("Image"+i) as Class;
 picArr.push(new ImageClass());

//Variable to hold the number of columns in the gallery.
var cols:int=3;

//The spacing between the x and y positions of the images.
var xOffset:Number = 149.95;
var yOffset:Number = 88;

for (var ii:uint = 0; ii < picArr.length; ii++) {
 //Initally sets the images to black and white.[ii], 0, {colorMatrixFilter:{colorize:0xFFFFFF}});
 //This creates 9 containers to hold the images and add them on the stage.
 var container:Sprite = new Sprite();;,0, 136, 73);;
 //This postitions the containers on the stage into a 3x3 formation
 //with x and y offset.
 container.x = 9.35 + xOffset * (ii%cols);
 container.y = 10.85 + yOffset * int(ii/cols);
 //This adds the images inside the containers. 

 //This displays a cursor hand all the containers. 
 //This adds the mouse over and mouse out event to the containers.
 container.addEventListener(MouseEvent.MOUSE_OVER, over);
 container.addEventListener(MouseEvent.MOUSE_OUT, out);

//This displays a coloured image when the image is over and 
//a black and white one when it not.
function over(event:MouseEvent):void {, 1, {colorMatrixFilter:{}});

function out(event:MouseEvent):void {, 1, {colorMatrixFilter:{colorize:0xFFFFFF}});
Step 4

Test your movie Ctrl + Enter.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP