Here we have a very cool effect that, although fairly simple, is a bit difficult to do with basic timeline motion tweens. By relying on some core ActionScript fundamentals we can hammer it out in no time. The important thing to note is that the transition is non-linear, meaning we can navigate TO any image FROM any image. Click buttons in the swf above then come on in to see how we create this nifty effect.
Watch the Video
Six Core Fundamentals of ActionScript
In the video I harp on my belief that you can build just about anything using a mish-mash of the following code elements:
- Variables
- Buttons / EventListeners
- Conditional Statements
- Arrays / Loops
- GreenSock Tweening Platform: TweenLite/Max TimelineLite/Max
- Loading External Data and Assets with LoaderMax
This non-linear cross-fade and zoom technique uses the first 5! I can say with confidence that these fundamentals make up 90% of the things I’m paid to do with Flash.
AS3 Code Used in this File
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
TweenPlugin.activate([ScalePlugin]);
var clips_arr:Array = [audioJungle, themeForest, graphicRiver, activeDen, ocean, codeCanyon];
TweenMax.allTo(clips_arr, 0, {autoAlpha:0});
TweenMax.to(clips_arr[0], 0, {autoAlpha:1});
nav_mc.audioJungle_btn.ID = 0;
nav_mc.themeForest_btn.ID = 1;
nav_mc.graphicRiver_btn.ID = 2;
nav_mc.activeDen_btn.ID = 3;
nav_mc.ocean_btn.ID = 4;
nav_mc.codeCanyon_btn.ID = 5;
nav_mc.buttonMode = true;
nav_mc.addEventListener(MouseEvent.CLICK, crossFade);
nav_mc.addEventListener(MouseEvent.MOUSE_OVER, btnOver);
nav_mc.addEventListener(MouseEvent.MOUSE_OUT, btnOut);
//this variable stores a reference to the currently visible clip
var currentClip:MovieClip = clips_arr[0];
function crossFade(e:MouseEvent):void{
//create a reference to the movieclip related to the button you just clicked
var thisBtnsMovie:MovieClip = clips_arr[e.target.ID]
trace(thisBtnsMovie.name);
//make sure the currentClip isn't related to the button you just clicked
if(currentClip != thisBtnsMovie){
//hide the current clip
TweenLite.to(currentClip, .5, {autoAlpha:0, scale:2, ease:Quad.easeIn});
//show the clip related to the btn you just pressed
TweenMax.fromTo(thisBtnsMovie, .8, {scale:0}, {autoAlpha:1, scale:1, delay:.2});
}
//reset currentClip to reflect the clip related to the button you just clicked
currentClip = thisBtnsMovie;
addChild(currentClip);
addChild(nav_mc);
}
function btnOver(e:MouseEvent):void{
TweenMax.to(e.target, .5, {tint:0xffffff});
}
function btnOut(e:MouseEvent):void{
TweenMax.to(e.target, .5, {tint:null});
}
With all that fancy code commenting and the thorough explanation in the video, don’t know what else I can add:) The source files should be pretty self-explanatory. As always, if you have any questions, just ask below!
Get the Goods: Flash CS4 Source Files
Club GreenSock Membership Giveaways!
Winners will also have the rare opportunity to become Shockingly Green for only $50 (marked down from $99!). I will be giving away the memberships for a variety of reasons, including but not limited to: re-tweeting articles, participating in the comments, and following on youtube, twitter or facebook.
I will be announcing the complete details shortly. To stay aware of your opportunities to win, simply get involved on:
Twitter: Follow
Facebook: Like
Youtube: Subscribe
The more you get involved, the higher your chances are of winning!
