Sunday, 7 February 2010

Banner selector in Actionscript 3 part 3

This is part 3 of the Banner selector in Actionscript 3 tutorial where I will add a fade transition effect between the images using code. The fade effect is created using the tweelite plugin which can be downloaded here. You can alternatively create the same transition effect using only the timeline, checkout this tutorial. Make sure you have completed the banner selector tutorial before attempting this one as addition code will be added.


Banner selector part 3

Step 1

Open your Banner selector tutorial then on the timeline select the ‘images’ layer then on the stage convert each of the images into movie clips (F8).




Step 2

Give each of your movie clips the following instance names accordingly: image1_mc, image2_mc, image3_mc and image4_mc.




Step 3

Select each of your images in turn then on the properties panel open up the colour effect panel and set the style to Alpha at 0%.




Step 4

On the timeline select the ‘Actions’ layer then open up the Actions panel (F9) and enter the additional code shown in red.

//This is the initial fade effect for the first image.
TweenLite.to(image1_mc, 5, {alpha:1});

// This function plays the appropriate banner.
function playBanner(event:MouseEvent):void {
switch (event.target) {
case button1 :
gotoAndStop(1);
TweenLite.to(image1_mc, 2, {alpha:1});
break;
case button2 :
gotoAndStop(2);
TweenLite.to(image2_mc, 2, {alpha:1});
break;
case button3 :
gotoAndStop(3);
TweenLite.to(image3_mc, 2, {alpha:1});
break;
case button4 :
gotoAndStop(4);
TweenLite.to(image4_mc, 2, {alpha:1});
break;
}
}

Step 5

Test your movie clip Ctrl + Enter. Now trying pressing each buttons and you should see a fade transition effect between the images.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP