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.
 TweenMax.to(picArr[ii], 0, {colorMatrixFilter:{colorize:0xFFFFFF}});
 
 //This creates 9 containers to hold the images and add them on the stage.
 var container:Sprite = new Sprite();
 container.graphics.beginFill(0x000000);
 container.graphics.drawRect(0,0, 136, 73);
 container.graphics.endFill();
 addChild(container);
 
 //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. 
 container.addChild(picArr[ii]);

 //This displays a cursor hand all the containers. 
 container.buttonMode=true;
 
 //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 {
 TweenMax.to(event.target, 1, {colorMatrixFilter:{}});
}

function out(event:MouseEvent):void {
 TweenMax.to(event.target, 1, {colorMatrixFilter:{colorize:0xFFFFFF}});
}

Step 4

Test your movie Ctrl + Enter.

Simple slideshow in Actionscript 3

This tutorial is a simple slideshow using the timeline where you can go back and forth between the images. There is also a dynamic text field which displays the current image in the slideshow. I have used free stock images for this tutorial.


Simple slideshow in Actionscript 3

Step 1

Open a new AS3 file and import the images you want to use by selecting File > Import > Import to library. On the menu bar select Insert > New Symbol give an appropriate name, choose movie clip for the type and click ok. Drag an image onto the stage then create an empty key frame (F6) and drag another image onto the stage. Repeats this for the number of the images you have assuring that all the images are lined up. You should eventually have a different image on a different key frame.


Step 2

Return to the main timeline and drag the movie clip onto the stage and give the instance name: slideShow. Create two buttons one for the left and one for the right. And give them the instance name: left and right accordingly.


Step 3  

Select the Text tool with dynamic text and drag a text field onto the stage. You will need to embed the Numerals and the ‘/’ (forward slash character). Give the dynamic text the instance: numSlide_txt. 


Step 4

On the timeline create a new layer called Actions then add the following code:

//Stops the images from looping.
slideShow.stop();

//Add the mouse click event to the left and right buttons.
left.addEventListener(MouseEvent.CLICK, goLeft);
right.addEventListener(MouseEvent.CLICK, goRight);

//Initially hides the left button.
left.visible = false;

//This goes to the next frame on the slideshow timeline and if the current frame is equal
//to the total number of frames then right button is set to invisible. Otherwise
//both buttons are showing.
function goRight(e:Event):void{
slideShow.nextFrame();
slideShow.currentFrame == slideShow.totalFrames ? right.visible = false: right.visible = true; left.visible = true;            
}

//This goes to the previous frame on the slideshow timeline and will
//show the left button if the first images is not showing.
function goLeft(e:Event):void{
slideShow.prevFrame();    
slideShow.currentFrame == 1 ? left.visible = false : right.visible = true; 
}

//Adds the event frame event to the stage.
stage.addEventListener(Event.ENTER_FRAME, frameNumber);

//This displays the current frame in the dynamic text field using the 
//the slideShow.currentFrame property as the current number 
//and the slideShow.totalFrames as the total number of images. 
function frameNumber(e:Event):void{
var sNumber:int = slideShow.currentFrame;
var sTotal:int = slideShow.totalFrames;    
numSlide_txt.text = sNumber+"/" +sTotal;
}

Step 5

Test your movie Ctrl + Enter.

Random card numbers in Actionscript 3

I was contacted with a question about how to create random numbers for a credit or store card. I came up with the following solution below. I have used a For loop to display four sets of random numbers between one and nine. And have displayed the numbers in four separate dynamic text fields using the appendText property. Instead of having four dynamic text fields you can easily display the random numbers in one text field.

//This function displays a random number between a specified 
//minimum and maximum number.
function randomNumbers(min:Number,max:Number) {
    var Results:Number=Math.floor(Math.random()*max)+min;
    return Results;
}

//This creates four sets of random numbers and displays
//them in a dynamic text field.
for(var i:uint =0; i < 4; i++){
    var ran1:String = String(randomNumbers(1,9));
    var ran2:String = String(randomNumbers(1,9));
    var ran3:String = String(randomNumbers(1,9));
    var ran4:String = String(randomNumbers(1,9));

    output1.appendText(ran1);
    output2.appendText(ran2);
    output3.appendText(ran3);
    output4.appendText(ran4);
} 

Dynamic text characters colour in AS3

I was contacted with a question about how to change the colour of the first character in a dynamic text field without affecting the rest of the characters. For my solution I have used the charAt() and the substr() methods from the String class to store the first character and the other characters from the dynamic text in a string. Then I used the htmlText property from the Text class so I could use the font tag to change the colour of the first character.

//This is the text to be displayed in the dynamic text field.
var displayText:String  = "Hello";

//This stores the first character from the displayText using the charAt() method.
//This method returns a character specified by the index parameter value. I have
//use the value 0 which is the first character in a string.
var firstCharacter:String = displayText.charAt(0);

//This stores the other characters in the displayText using the substr() method.
//This method returns characters based on the start position and the length of the
//a string. I have specified the start position to be ‘1’ which is the second character of
//the displayText, and displayText.length of the length of the string which be other
//characters in the displayText.
var otherCharacers:String = displayText.substr(1,displayText.length);   


//This uses the font tag from the htmlText property to assign a different colour
//to the first character.
mytxt_txt.htmlText = '<font color="#DD0000">' + firstCharacter + '</font>'+ otherCharacers;


In the code above the dynamic text field has the instance name ‘mytxt_txt’. You will also need to check the render as html button for the htmlText to work.