Here is just a little overview of a cool effect that appears to use a mask. At the heart of this effect is simple Invert blend mode. We get a little loopy with an Array and TweenLite to make it super dynamic.
This movie requires Flash Player 9
Watch the Video
ActionScript 3.0 Code
import com.greensock.*;
import com.greensock.easing.*;
var navItems:Array = new Array("SUPERMAN", "TAZ", "STONE CRUSHER", "BLUE THUNDER", "BATMAN", "ESCALADE");
var nav:MovieClip = new MovieClip();
nav.x=2;
nav.y=2;
addChild(nav);
//loop through the array and create a mess of navItems
for(var i:Number = 0; i< navItems.length; i++){
var n:navItem= new navItem();
n.cover.width=0;
n.mouseChildren=false;
n.buttonMode=true;
n.y=i*62;
n.label_txt.text = navItems[i]
nav.addChild(n);
}
nav.addEventListener(MouseEvent.MOUSE_OVER, navOver);
nav.addEventListener(MouseEvent.MOUSE_OUT, navOut);
function navOver(e:MouseEvent):void{
TweenMax.to(e.target.cover, 1, {width:475, ease:Bounce.easeOut});
}
function navOut(e:MouseEvent):void{
TweenMax.to(e.target.cover, .5, {width:0});
}
This tutorial was inspired by the fine folks at www.designcharts.com
Download Source Flash CS3 Source Files
click to download snorkl-sample-invertWipe
Related Content
Official Greensock Tweening Platform : Getting Started
Learn about the for loop
