TimelineMax-Powered Mega Mask

by carl schooff on November 24, 2010 · View Comments

in GreenSock Tweening Platform Tips

Here we take advantage of TimelineMax’s sequencing prowess to do a series of tweens on clips that are being used to reveal an image. We’ll talk a bit about the offset parameter when using append() as well as have a little yoyo fun.

This movie requires Flash Player 9


Beautiful fall trees image provided by DJ GIRISH: www.nepalirapper.com

Easy Breezy AS3

import com.greensock.*;
import com.greensock.easing.*;

bars.cacheAsBitmap=true;
img.cacheAsBitmap=true;
img.mask=bars;

//create TimelineMax instance and set to repeat infinitely
var timeline:TimelineMax=new TimelineMax({repeat:-1,repeatDelay:1,yoyo:true});

//speed vars
var duration:Number=.5;

//loop through each bar in bars clip
for (var count:Number = 1; count <=10; count++) {
	//create reference to each individual clip
	var mc:MovieClip=bars["bar"+count];
	timeline.append(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), -.4);
}

Download Flash CS3 File

snorkl_mask_bars

Want more masking fun?

Check out my Grid and Tile Mask Transitions

Happy Thanksgiving!

Post to Twitter Post to Facebook

  • http://twitter.com/djgirish DJ Girish Khatiwada

    Nice Tut Carl. Thanks for the Photo and Website Credit.

  • http://twitter.com/nijgadh Nijgadh.com

    hey bro m watching it

  • http://twitter.com/djgirish DJ Girish Khatiwada

    Great – Nijgadh.com. You will find many useful flash tutorials for web developers like you. Enjoy Snorkl.tv

  • http://www.snorkl.tv/ carl schooff
  • Nasimshab

    Thank you so much for your beautiful tutorial site. I was trying to use Masking with timelineMax, but I have problem with this compiler error massage .
    Scene 1, Layer 'AS3', Frame 1, Line 5 1120: Access of undefined property img.
    Scene 1, Layer 'AS3', Frame 1, Line 6 1120: Access of undefined property img.
    Could you help
    Thanks
    Nasim

  • http://www.snorkl.tv/ carl schooff

    Hello Nasim

    Make sure the movie clip with your image has the proper instance name.

    Click on the movie clip and check the top of the properties panel.

    thx for watching!

    Carl

  • Nasimshab

    Thank you Carl , it was my fault. I saved my image in JPEG format , after I replaced it with Bitmap it came out great.
    Thanks again for your nice job.
    Nasim

  • nedal

    very interesting
    i imagine how an one do with flash … according to his interest

    thanks alot

  • x10

    Carl, not only are your videos informative, there’s also some excellent humour!!
    Thank you.
    X10

  • Tomas Seli

    Hi,

    Great tutorial, but I can’t figure out how can I add this transition if I have more than one image? Can you give me some tip please. 

    Thanks

  • http://www.snorkl.tv/ carl schooff

    Hi Tomas,

    someone on the greensock forums already tried this and had good results.

    check out the attached file at the bottom of this page:

    http://forums.greensock.com/viewtopic.php?f=1&t=4214&p=20737#p20737

  • Tomas Seli

    OH I searc all forum but missed that one. This is great. I will play a litlle with that one.

    Thx for this great tutorial

  • bishop riggs

    Awesome effect!

    I’m trying to use this effect twice as a transition but i want it triggered by  buttons. Im a greensock newbie and would really appreciate your help.

    Thanks!

  • http://www.snorkl.tv/ carl schooff

    it really depends how you are getting your images into flash, if you are loading them or if they are just symbols on the stage.
    someone on the greensock forums built a whole gallery using this as a transition between multiple images.

    give it a look

    http://forums.greensock.com/viewtopic.php?f=1&t=4214&p=20737#p20737

    you can download the files at the bottom of the post.

    to add buttons you would need to have them call the loadSlide method but instead of it being random, you would have to specify which image to load.

  • bishop riggs

    thanks for the quick reply!

    basically, i have 4 images that i have in the timeline and i want to use the effect on them with the use of buttons. i placed the 4 images in their own frames in the timeline and the actions above them but that didnt work (even if i had changed the instances and the vars).i also tried separating them into scenes but no luck either.

    i checked out the link above and i’m gonna try to study it also.

    but, if you could just point me to the elements in the script that i need to change to make it work the way i want to, i’d really appreciate it.

    thanks a million!

  • http://www.snorkl.tv/ carl schooff

    I’m in the middle of a big ImageLoader series. I will soon be getting into making a gallery that you can navigate and perhaps I will add a nifty mask transition. until then i don’t know of an easy way to point you to the elements you need to change as their is quite a bit you need to add for starters:

    your images should not be on separate frames. they need to all be in the same frame. you can’t make a smooth transition between 2 images if they aren’t present at the same time.

    in the most basic terms:
    when you click a button you need to place the requested image on top of all the other images. apply the mask to that image. tell the mask to play.
    i would start by just getting each image to go on top of all the other images and fade in (don’t worry about the mask right away).

    when you click a button you need to something like:

    function showImage(requestedImage){
    requestedImage.alpha = 0;
    addChild(requestedImage);
    TweenLite.to(requestedImage, .5, {alpha:1});
    }

  • bishop riggs

    i did it! i don’t know if the methods i used were the “smart ones” but it worked.

    i made 4 separate .swf movies containing my 4 images with the effect to fire on load, then i used the loader on buttons to load each one of them on a click.

    it took many hours of figuring out but its really worth it when it comes together.

    thanks carl!

    i’m very much looking forward to your upcoming image loader series.

    i owe you a bottle of beer. heck, make it two.

    cheers!

  • http://www.snorkl.tv/ carl schooff

    glad to hear you got it working. feels good doesn’t it?

    Thanks for the update on your progress

    Carl

  • Fstyler

    Hi Carl, it´s great tutorial. I want to ask you If you can show us, how we can use this mask without naming movie clips, because it´s ok when we use 10 bars, but when we want to use f.e. 300 bars is there a method how we can solve it. I was trying it with “numChildren”  but no chance. Can you help please ?

  • http://www.snorkl.tv/ carl schooff

    The best thing in that case would be to use actionscript to dynamically create and position the bars for you.

    check out this tutorial on creating a grid: http://www.snorkl.tv/2011/08/tile-transitions-for-grid-building-and-masking/
    to make that tutorial’s sample fla use a single a row of bars, just set numTiles and cols to be the same

    var numTiles:uint = 300;
    var cols:uint = numTiles;

    —

    if a grid isn’t necessary at all just do a simple loop that adjusts the x position of each bar:

    for(var i:Number = 0; i<300; i++){
    var bar:MovieClip = new Bar() // must have linkage of symbol in library set
    bar.x = i * bar.width;
    someContainer.addChild(bar);
    }

  • http://www.imagemaskingservices.com Image Masking

    Excellent tut Carl ! But but…Carl can you let me know where am I going wrong?
    Pls read this
    Scene 1, Layer ‘AS3′, Frame 1, Line 5 1120: Access of undefined property img.Scene 1, Layer ‘AS3′, Frame 1, Line 6 1120: Access of undefined property img. 

    Help wud be largely appreciated.

  • http://www.snorkl.tv/ carl schooff

    It sounds like you don’t have a movie clip with the instance name img.
    Have you had any luck?

    Sorry for the late response

    C

blog comments powered by Disqus

Previous post:

Next post: