Monday, 1 February 2010

Banner selector in Actionscript 3 part 2

This is part 2 of the banner selector in Actionscript 3 tutorial where the images will transition to the next image. Make sure you have completed the previous tutorial before attempting this one as additional code and modifications are added. I have also used the tweenlite plugin for the tweening which can be downloaded here.

Banner selector in Actionscript 3- part 2

Step 1

Open up your Banner selector FLA file. On the timeline select the images layer and remove all the key frames (Shift + F6). This will leave you with an empty Images layer on the timeline and nothing on the stage. Your timeline should look like below.

Step 2

Still on the Images layer, drag your images from the library onto the stage so there horizontally next to each other. Make sure your first image is exactly matching the dimensions of the stage area, so the x and y positions are at 0.

Step 3

Select all your images on the stage and convert it into a movie clip (F8) and then give the instance name: banner_mc.

Step 4

Open the Rulers by selecting View > Rulers on the menu bar then find the horizontal starting positions for each of your images. My image starting positions are: 0, 400, 800, and 1200, but your position will be different.

Step 5

On the timeline select the Actions layer then open up the action panel (F9) and make the following modifications. I assume you have completed the previous banner selector tutorial as most of the code has been left out.

//Import the tweenlite packages.
import com.greensock.*;

//This function tweens to appropriate image on the banner. Note my image starting
//positions are negative as they are moving to the left which is backwards.
function playBanner(event:MouseEvent):void {
switch ( {
case button1 :, 2, {x:0});
case button2 :, 2, {x:-400});
case button3 :, 2, {x:-800});
case button4 :, 2, {x:-1200});

Step 6

Test your movie Ctrl + Enter. You should notice that the images transition instead of jumping to the next image.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP