Friday, 29 January 2010

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 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.

//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 ( {
case button1 :
case button2 :
case button3 :
case button4 :

Step 6 – Test your movie

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


N 31 January 2011 at 14:02  

I've tried this tutorial twice. Can't get the actionscript code to execute without compile errors. My fla file does loop the images. The problem is the actionscript code. Here is the error I receive.

Scene 1, Layer 'actions', Frame 1, Line 12 1120: Access of undefined property button1.

I get the error above for all four buttons.


iliketo 6 February 2011 at 11:17  


Take a look at this post

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP