Banner selector in Actionscript 3

In this tutorial you will learn how to create a simple banner selector in Actionscript 3.0. A banner selector is commonly seen on many websites used as advertising. You can select the different adverts by clicking on the appropriate button on the banner.

This tutorial will be split into three parts. The first part will setup the initial images; the second part will create the buttons and the third part will add the Actionscript code. Some knowledge of basic buttons will be needed for this tutorial. I have also used free vector graphics for the different banners which can be downloaded at vecteezy.com. You can find a list of places for free vector graphics here.


Banner selector in Actionscript 3

Step 1 – Initial images step up

Open a new Flash AS3 file and set the stage size to the same size as your images.
Import all your images into the library by selecting File > Import > Import library.


Step 2

Create the following three layers for your timeline. The first layer will contain the Actionscript code. The second layer will hold the buttons, and the third layer will hold the individual images. Note, I have four empty key frames for the ‘Images’ layer. If you want more images in your banner then you can increase the number of key frames.




Step 3

On the timeline select the ‘Images’ layer then drag each image from the library into each key frame on the stage. So, each key frame should contain one different image. Your timeline should now look like below.




Step 4 - Create the buttons

On the timeline lock the ‘images’ layer then select the ‘Buttons’ layers then create your button on the stage. I have created four simple square buttons, but you can create whatever kind of button you wish.



Convert each of your buttons into movie clips (F8) and give them the following instance names accordingly: button1, button2, button3 and button4.


Step 5 – Add the Actionscript code

Select the ‘Actions’ layer on the timeline then open up the action layer (F9) and enter the following code.

//1.Stops the timeline play head from moving to the next frame.
stop();

//2. Array to hold all the button instances.  
var buttonArr:Array=new Array(button1,button2,button3,button4);

//3. This loops through all the buttons.
for (var i:uint = 0; i < buttonArr.length; i++) {
 buttonArr[i].addEventListener(MouseEvent.CLICK, playBanner);
}

//4. This function plays the appropriate banner.
function playBanner(event:MouseEvent):void {
 switch (event.target) {
  case button1 :
   gotoAndStop(1);
   break;
  case button2 :
   gotoAndStop(2); 
   break;
  case button3 :
   gotoAndStop(3);
   break;
  case button4 :
   gotoAndStop(4);
   break;
 }
}

Step 6 – Test your movie

Test your movie clip by pressing Ctrl + Enter. Now try pressing the buttons and you should a different banner.

Magic 8 ball tutorial in AS3 part 2

This is part 2 of the Magic 8 ball tutorial where I will be using XML to display the responses of the magic 8 ball. XML is a mark up language used to structure external content. This tutorial assumes you have completed the previous tutorial as additional code will be added to this one.


Magic 8 ball tutorial in AS3 part 2

Step 1

Open up notepad and copy the following XML code, and save is as magic8answers.xml in the same folder as the magic 8 ball FLA file. XML is made up from plain text so can be created in any text editor.

<?xml version="1.0" encoding="utf-8"?>
<Magic8Answers>
<Answer title="Response0"> YES </Answer>
<Answer title="Response1"> MOST LIKELY </Answer>
<Answer title="Response2"> IT IS CERTAIN </Answer>
<Answer title="Response3"> OUTLOOK GOOD </Answer>
<Answer title="Response4"> NO </Answer>
<Answer title="Response5"> DOUBTFUL </Answer>
<Answer title="Response6"> REPY IS NO </Answer>
<Answer title="Response7"> ASK AGAIN </Answer>
<Answer title="Response8"> TRY AGAIN </Answer>
<Answer title="Response9"> BETTER NOT </Answer>
<Answer title="Response10"> MAYBE </Answer>
</Magic8Answers>


Step 2

Open up the magic 8 ball FLA file then on the timeline open the Actions panel and enter the following code.

//Array to hold all the responses.
var responseArr:Array;
//Creates a new instances URL loader class.
var my_loader:URLLoader = new URLLoader();
//Variable to hold the load XML.
var my_xml:XML;
//The load method use to load the XML file.
my_loader.load(new URLRequest("magic8answers.xml"));

//Event listener to listen to when the file has finished loading.
my_loader.addEventListener(Event.COMPLETE, xmlLoader);


function xmlLoader(event:Event):void{
my_xml = new XML(event.target.data);

//Array to hold all the responses.
responseArr = new Array();

//Loop through the answer tag in the XML.
for each(var item:XML in my_xml.Answer){
//store values in the response array.
responseArr.push(item);
}
}

Step 3

Inside the showAnswer() function remove the response array and all the responses
elements, so that the first line of code in the function should be.

var r:int=Math.floor(Math.random()*responseArr.length);

Step 4

Test your movie clip Ctrl + Enter. Your responses should now be generated using
XML.

Hiding movie clips in AS3

In Actionscript 3 there are two ways of hiding movie clips using inherited properties from the movie clip class. The two properties are visible and alpha. If you were using Actionscript 2 you would need an underscore before the property name, but in AS3 the properties would look like below.

//Hides movie clip using the alpha property.
myMoveclip.alpha = 0;

//Hides movie clip using the visible property.
myMovieclip.visible = false;

This is a simple example of hiding a movie clip using a button component, and a horse image which has been converted into a movie clip. When the movie clip is hidden it gets temporally removed will from the stage,so will be unclickable to the user.

//Adds an event listener to the button component with the mouse click event.
horse_mc.addEventListener(MouseEvent.CLICK, hideObject);

//This function hide the horse movie clip.
function hideObject (event:MouseEvent):void {
horse_mc.visible = false;
}

To show the hidden movie clip, we need to add another button component and add some additional code.

//Initially disable the show button.
show_btn.enabled = false;

//Adds an event listener to the button component with the mouse click event.
hide_btn.addEventListener(MouseEvent.CLICK, hideObject);
show_btn.addEventListener(MouseEvent.CLICK, showObject);

//This function hide the horse movie clip, and disables the hide button.
function hideObject (event:MouseEvent):void {
horse_mc.visible = false;
show_btn.enabled = true;
hide_btn.enabled = false;
}

//This function show the horse movie clip, and disables the show button.
function showObject(event:MouseEvent):void {
horse_mc.visible = true;
show_btn.enabled = false;
hide_btn.enabled = true;
}

Notes that the alpha and visible properties are not the same. The alpha property deals with the transparency of an object, so setting the alpha value to 0 will set the transparency to invisible. The invisible object will still be on the display list, but won't be visible to the user.

Whereas the visible property deals with the actual visibility of an object. If you set the visible to false. The object gets temporally removed from the display list, so frees up system resources. If you set the visible to true, the object return visible. Since, the visible property temporally removed an object from the display list. A visible = false object cannot accept any mouse events, but a alpha = 0 object can. This is because the object is transparent but still exist on the display list therefore will be able to accept mouse events.

To clarify, the alpha property handles the transparency of a display object. And the visible property handles whether a display object is visible or not.

Screen wrapping in AS3

I previously created a post called limit stage boundaries in AS3 where the object was limited to the edges of the stage boundaries. In this tutorial I will provide code for screen wrapping which is when an object disappears at one side of the screen to reappear at the opposite side. This will give the illusion of a never ending loop. You will need to have completed the key control in AS3 tutorial as code will be added to this tutorial.


Screen wrapping in AS3

Step 1

Open up the key control AS3 tutorial.


Step 2

On the timeline select Actions layer then open up the Action panel (F9) and enter the following code.

function ScreenWrapping(object:MovieClip) {
  //1.
  var objectHalfWidth:uint=object.width/2;
  var objectHalfHeight:uint=object.height/2;

  //2.
  if (object.x - objectHalfWidth>stage.stageWidth) {
      object.x=0-objectHalfWidth;
  }
  else if (object.x +  objectHalfWidth <0) {              
      object.x=stage.stageWidth+objectHalfWidth;      
  }        

  //3.     
  if (object.y + objectHalfHeight<0) {              
     object.y=stage.stageHeight+objectHalfHeight;     
  }      
  else if (object.y - objectHalfHeight > stage.stageHeight) {
      object.y=0-objectHalfHeight;
  }
}

As you can see the code is similar to the limit stage boundaries in AS3 code as the values and reversed.

1. This creates two local variables called objectHalfWidth and objectHalfHeight which stores half of the objects width and height.
2. If the object moves over the width of the stage then the object will appear at the opposite end by setting the values and the stage edges.
3. If the object moves over the height of the stage then the object will appear at the opposite end by setting the values and the stage edges.


Step 3

Add the ScreenWrapping() function inside the moveObject() function to enable the screen wrapping of the object.

ScreenWrapping(lemon_mc);

Step 4

Test your movie clip Ctrl + Enter. Now move the object using the mouse and you should see the object appear at the opposite side of the screen.

First person tetris

I found an interesting twist on the classic Tetris game at: firstpersontetris.com. In firstpersontetris the game mechanics of Tetris are exactly the same as all forms of the game. However, the main difference is that the game pieces don’t rotate as normal. Instead of the game pieces being rotated, the whole game screen gets flipped and rotated. This makes the game more challenging as the game pieces could be falling in the left, right, up or down direction.

The design of the game is quite unique. The game is displayed inside a television set which occasionally flickers. On top of the television there is a VCR player and some old fashion VHS tapes. There is also the old NES video game console below the television.

If you like Tetris then why not give this Flash game a try. Its free and you don’t need to download anything.

Colour line Graphics in AS3

I found an old post over at theflashblog.com which demonstrates the capabilities of the Actionscript 3 graphic API. The example shows a single line that displays random colours when the mouse moves and when you click, the movie clears. I have decided to slightly modify the code, so that you have to hold down the mouse to display a randomly colour line and double click to clear the movie.

My Actionscript 3 code is shown below.

//Create a new instances of a shape and add it to the stage.
var myShape:Shape = new Shape();
addChild(myShape);

//Double click property must be enabled before it will generate an event.
stage.doubleClickEnabled = true;

//Adds event listeners to the stage.
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawLine);
stage.addEventListener(MouseEvent.MOUSE_UP, drawUp);

//This adds the drawMove function and sets the inital start position
//of the line.
function drawLine(event:MouseEvent):void {
 myShape.graphics.moveTo(mouseX, mouseY);
 stage.addEventListener(MouseEvent.MOUSE_MOVE, drawMove);
}

//This function creates the random coloured line with different thicknesses.
function drawMove(event:MouseEvent):void {
 var randomNumber:uint = Math.floor(Math.random()*15)+5;
 myShape.graphics.lineStyle(randomNumber, Math.random()*0xFFFFFF);
 myShape.graphics.lineTo(mouseX, mouseY);
}

//This removes the drawMove function and adds the clearMovie function.
function drawUp(event:MouseEvent):void {
 stage.removeEventListener(MouseEvent.MOUSE_MOVE, drawMove);
 stage.addEventListener(MouseEvent.DOUBLE_CLICK, clearMovie);
}

//This function clears the line.
function clearMovie(event:MouseEvent):void {
 myShape.graphics.clear();
}

Now hold down the mouse to draw randomly coloured lines and double click to clear the movie.

Change movie clip colour randomly in AS3 – part 2

This is part 2 of the Change movie clip colour randomly in AS3 where the movie clip will change colour without a button. I will be using the Timer class to change the colour every two seconds. Make sure you have completed step 1 and step 2 of the previous tutorial as I will only be providing the code.


Change movie clip colour randomly in AS3 – part 2

Step 1

On the timeline create a new layer called 'Actions' then open the actions panel and add the following code.

//Create a new instance of the timer class with the delay set at
//2000 milliseconds (2seconds)
var myTimer:Timer=new Timer(2000);

//Add an eventlistener to the timer object.
myTimer.addEventListener(TimerEvent.TIMER, changeColour);

//Start the timer object.
myTimer.start();

function changeColour(event:TimerEvent):void {
   //Creates a new instance of the ColorTrasform class.
   var myColorTransform:ColorTransform = new ColorTransform();
 
   //Sets the new random colour using the Math.random().
   myColorTransform.color = (Math.random() * 0xFFFFFF);
     
   //Apply the colour changes to the movie clip.
   oval_mc.transform.colorTransform=myColorTransform;

}

Step 2

Test your movie clip Ctrl + Enter. You movie clip should now change colour randomly.

Change movie clip colour randomly in AS3

I previously wrote a post called change movie clip colour in Actionscript 3 where the movie clip changed colour by using the colourPicker component. In this tutorial the colour of the movie clip will change randomly using the ColorTransform class and the Math.random method. Some knowledge of basic buttons will be needed for this tutorial.


Change movie clip colour randomly in AS3

Step 1

Open a new Flash AS3 file.
Select the Oval tool (O) and create an oval shape with no stroke on the stage like below. I have used a black colour for my oval, but you can use any colour you wish.




Step 2

Covert your oval shape into a movie clip by pressing the F8 key on the keyboard, and the give the instance name: oval_mc




Step 3

On the menu bar select Window > Component and drag a button component on the stage. You can alternatively create your own button on the stage if you wish.



Give the instance name: ‘random_btn’ to your button component, and change the button label to ‘Change colour’


Step 4

On the timeline insert a new layer called Actions. Then open up the Actions panel and enter the following code.

//Adds event listener to the button component.
random_btn.addEventListener(MouseEvent.CLICK, changeColour);

function changeColour(event:MouseEvent):void {

//Creates a new instance of the ColorTrasform class.
var myColorTransform:ColorTransform = new ColorTransform();

//Sets the new random colour using the Math.random().
myColorTransform.color = (Math.random() * 0xFFFFFF);

//Apply the colour changes to the movie clip.
oval_mc.transform.colorTransform=myColorTransform;

}

Step 5

Test your movie clip Ctrl + Enter. Now click on the buttons and you should see the colour of the oval change change.



You should now be able Change movie clip colour randomly in Actionscript 3.0.

Tweenlite and TweenMax V11 released

Versions 11 of the Tweenlite and TweenMax tweening platforms from blog.greensock.com have been recently released. This update is the most significant and biggest upgrade with new capabilities and faster speeds. Below I will list some of the features of the new versions. Be sure you visit the Greensocks website for more information.

New plugins – There are five new plug-ins which are: tranformMatrix, motionBlur, physics2D, phsicsProps and dynamicProps.

TweenLite and TweenMax improvements – The following methods have now been added to TweenLite: play(), restart() pause(), resume() and reverse(); the useFrame property is now supported which means you make a tween based on the frames instead of seconds; the allTo() and allFrom() properties have been added to Tweemax.

Faster performance – There is a 3 – 15% speed improvement to the tweening engines from the internal algorithms which can execute calculations faster.


For details of all the features and changes, checkout the Greensocks website. I have only mentioned the main updates. There are lots of little changes and modifications in the new versions. For example, the base package has been changed to “com.greensock”, and also many property names have been renamed.

Flash CS4 Easter eggs

In Flash CS4 there are some Easter eggs which I will reveal you. Easter eggs are basically hidden messages or features purposefully left by the developers as some kind of funny prank.

To find the Easter eggs you need to open up Flash CS4. Choose an AS3 Flash file then from the menu bar select Help > About Adobe Flash CS4. The following window should appear.




You will notice the credits of the Flash developers appearing from the bottom of the window. Now click on the following three places shown below and “Easter eggs” will be revealed. The first EE will reverse the credits from appearing; the second EE will speed up the credits and the third EE will show a slideshow of the developers.





If you know any more Easter egg, feel free to leave any comments below.