Thursday, 3 June 2010

Image roll over effect AS3 code

I wrote the Image rollover effect tutorial quite a while ago. I have now decided to write an Actionscript 3 code version of this tutorial. This means that if you use lots of images it will take less time to create. The step up for this tutorial is similar to the previous, but you wont’ need any motion tweens in the timeline. I have also used the tweenlite plugin for the tweening effect.

Image roll over effect AS3 code

Step 1

Open a new AS3 file. Then import all the images you wish to use by selecting File > Import > Import to Library. Drag the individual images from the library onto separate layers on the timeline, so each layer only contains one image.

Step 2

Convert each of your images into movie clips (F8) and give them following instance names accordingly: image1_mc, image2_mc etc.

Step 3

On the timeline create a new layer called AS and then open up the Actions panel (F9) and enter the following code.

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

//Array to hold all the movie clip instances.
var mcArray:Array=[ image1_mc, image2_mc, image3_mc];

//Counter to hold the position of the array.
var counter:uint=0;

//Adds the mouse over event to all the images.
for (var i:uint = 0; i < mcArray.length; i++) {

//This function causes the images to fade out when moused over.
function imageOver(event:MouseEvent):void {[counter],1,{alpha:0, onComplete:playNext});

//This function increments the counter and moves the second image on the timeline to
//top of the stack. When all the images have faded out, the counters get reset and all
//the images fade back to with the first image on the top of the stack.
function playNext():void {
if (counter==mcArray.length-1) {

setChildIndex(mcArray[0], numChildren - 1);

for (var ii:uint = 0; ii < mcArray.length; ii++) {[ii],1,{alpha:1});

} else {
setChildIndex(mcArray[counter], numChildren - 1);

Step 4

Test your movie Ctrl + Enter.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP