Using masks with Greensock

[robtarren]

Hi guys,

 

Absolute newbie here, so please go gently!

 

I have simple masking animation that starts with a background image, a rectangle then slides across from the left which exposes a masked layer, the rectangle then increases in size to fully expose the layer. I've knocked up a simple version of what I mean using the Flash timeline and the workspace, but I'd like to replicate this using purely AS3 and the Greensock plugins if possible so I can neatly slot it into my code.

 

I've had a search around the forums, but can't see what I'm after, but then I don't really know the terminology of what I'm after! Could anybody point me in the right direction of how I go about doing this please!

 

Here's what I've done using the timeline, but am trying to achieve using solely actionscript - http://www.robtarren.co.uk/flash_example/test.swf

 

Oh, I will also want to animate the image (movie clip) after it has been exposed.

 

Thanks in advance.

[Carl]

please familiarize yourself with the GreenSock basics: http://www.greensock.com/get-started-tweening/

 

assuming your mask is called rectangle_mc and your image is called image_mc

 

import com.greensock.*;

//set overwrite mode to auto. read getting started guide
OverwriteManager.init(2)

//tells the image to be revealed by rectangle_mc (google AS3 mask for more)
image_mc.mask = rectangle_mc

//move the rectangle to the right for a duration of 2 seconds. substitute your own values
TweenLite.to(rectangle_mc, 2, {x:300});

//tween the width of the rectangle after 1.5 seconds. when done call doSomthing function
TweenLite.to(rectangle_mc, 2, {width:600, delay:1.5, onComplete:doSomething});

//function that will run when the animation is over
function doSomething(){
   trace("animation over");
}

[robtarren]

Thanks for the heads up Carl and the example code, probably one of the simpler questions you've had to answer!