TweenLite-Powered Tile Transitions for Grid Building and Masking

by carl schooff on August 26, 2011 · View Comments

in GreenSock Tweening Platform Tips,Special Effects

This movie requires Flash Player 9

Just wanted to provide you guys with a sound starting point for building grids and more importantly animating them in clever ways. I’m going to do a quick rundown in the video and leave you with a few files to poke around in. I’m sure you will find a few ways to implement these strategies into your own projects.

VIDEO: How to use the GridDemo.fla

Watch on YouTube

As mentioned in the video, the main focus of this post is to give you guys the TweenLite-Goodness that creates the animation sequences.

How the Grid is Built

The grid is using a single loop that uses a Modulo trick and some division to generate which Row and Column each tile is in. Based on the position of the tile in the grid, we can use some handy equations to give each tile its own delay. The delay property is what will drive when each tile is used in the animation sequence.

My gridDemo.fla (downloads below) is just a rough template that gives you easy access to experimenting with a variety of animation patterns.

Please read Rich Shupe’s AS3 Arranging Grids article for a thorough breakdown of how to build a grid.

ActionScript 3 Code


var numTiles:uint = 96;
var cols:uint = 12;
var rows:uint = numTiles / cols;

var hspace:uint = 1;
var vspace:uint = 1;

var tl:TimelineMax = new TimelineMax();

function buildGrid()
{

	for (var i = 0; i< numTiles; i++)
	{
		var newTile:Tile = new Tile();

		var currentCol:uint = i % cols;
		var currentRow:uint = uint(i / cols);

		trace("currentCol: " + currentCol  + "\tcurrentRow: " + currentRow);

		//positioning formula

		newTile.x = newTile.width*.5 + currentCol * (newTile.width + hspace);
		newTile.y = newTile.height*.5 + currentRow * (newTile.height + vspace);

		newTile.scaleX = newTile.scaleY = 0;
		newTile.alpha = 0;

		//TWEEN STYLE FORMULAS: choose ONLY one
		//column by column
		tl.insert( TweenLite.to( newTile, .5, {scale:1, alpha:1, delay:currentCol * .1}) );

		//row by row
		//tl.insert( TweenLite.to( newTile, .5, { scale:1, alpha:1, delay:currentRow * .1 }) );

		//1 by 1 horizontal
		//tl.insert( TweenLite.to( newTile, .5, { scale:1, alpha:1, delay:i*.02}));

		//1 by 1 vertical
		//tl.insert( TweenLite.to( newTile, .5, { scale:1, alpha:1, delay:((rows * currentCol) + currentRow) *.02 }) );

		//circular
		//tl.insert( TweenLite.to( newTile, .5, { scale:1, alpha:1, delay:(newTile.y * newTile.x)*.00001 }) );

		//diagonal top left to bottom right
		//tl.insert( TweenLite.to( newTile, .5, { scale:1, alpha:1, delay: (currentCol + currentRow)  *  .05  }) );

		//diagonal bottom right to top left

		//tl.insert(TweenLite.to(newTile, .5, {scale:1, alpha:1, delay: ((numTiles/cols + cols -2)- (currentCol + currentRow))  *  .05  }));

		//END TWEEN STYLES
container.addChild(newTile);

	}

}

I am also providing the gridExplorer.fla source just so you can see how it was built. It is by no means the awesomest way to do this, but illustrates one way of re-using the same grid with multiple tween styles. In the gridExplorer I separated the grid building functionality from the animation building function so that I only had to build the grid once.

Your best bet is to watch the full video and play with gridDemo.fla. By tweaking just a few parameters in the single line of tween code you can generate some really cool effects. Mess with rotationY and rotationX a bit.

Download the Goods

SNORKLtv_gridMagic

More Masks with TimelineMax

Here's a tutorial that spends a bit more time on the TimelineMax Basics and Masks

Enjoy!

Carl

Post to Twitter Post to Facebook

  • http://twitter.com/MerrickBrewer Merrick Brewer

    Nice work again Carl, thanks for making the effort the share this!! There’s enough info between this, and the LoaderMax tutorials to be able to combine the two and start making some really nice slide show effects, that will cycle through all the pics etc.

    Nice one!

    Merrick

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

    no problem. I didn’t want you to go a week without your snorkl-fix. I wish I had more time to get into more of the details, but it seems that a good deal of people are good at taking just a little push and running with it. I hope to someday have a comprehensive LoaderMax Gallery with some cool transitions.

    thx again!

  • Merrickbrewer

    I think this is where the real value in your tutorials are. There’s just enough in them that we can take it and apply it to our own projects often combining multiple tutorials together to build something complete, learning and understanding each part as you go. If the tutorial was complete then we wouldn’t be learning, just copying (swapping symbols and movieclips for example) and not seeing the bigger picture!!

    If we look back throughout them all (study the megalist page) I’ve found I can cherry pick all the bits of functionality and build from there, connecting it all together. Perfect learning environment!!

    Ahhhhhhhhh. I feel better for my fix!!

    M

  • http://twitter.com/Oct_Moon Khalid Robinson

    Thank you yet again Carl!  I’ve been away for a minute but the last couple of tuts blew my mind.  I hope to have something cool for you to check out in the next week or so.  Glad to hear you are doing all right after the storm.

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

    thanks Khalid. very interested in what you have brewing. keep me posted. -carl

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

    Hey Merrick, glad to see you have stabilized:)

    It’s funny, more often than not I’m searching my own site or using mega-list to find what I need. It’s impossible to remember all this stuff!

  • Brandon

    Beaut-abul-astic!

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

    as a connoisseur of ridiculous things… that word really made my day. thanks!

  • ASeitz

    Thx Carl,

    for that  little push :-)
    It’s again an amazing work you share with us there. If you decide to build your comprehensive LoaderMax Gallery with these cool grid transitions, remind yourself do use the OOP concepts you’ve learned and explained so far. To start with there is no need to set up a complex OOP MVC Pattern! But I recommend instead of using FrameScript AS3 set a document class up and build your gallery from there.
    As an old AS2-programmer I know how hard it is to switch to AS3 OOP and the stupid reference errors you get, once you try to access instance names on the stage. Specially because there are a dozen different OOP workflows for the IDEs available.
    Adobe itself recently showed a new workflow regarding CS5.5:

    http://www.adobe.com/devnet/flash/articles/flash_project_panel.html

    It’s not perfect yet, but it might be worth for you to take a look. You probably will get some of these reference errors trying out this workflow and I tried my best to explain how to fix/avoid these:

    http://forums.adobe.com/thread/864992

    If you need help to set up your project, I’m more than happy to help you out there. Just sent me a message.

    greetings from germany ;-)

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

    thanks A, for the great comment.

    I enjoyed reading up on the project panel. It does seem to introduce an accessible workflow for setting up more complex projects and sharing assets through multiple fla files.

    I will be introducing more oop concepts as time goes on and the projects on snorkl.tv become more complex. Right now my main focus is on helping people with *very little ActionScript background* understand the core language elements and the wonderful features of the GreenSock Tweening Platform.
    For the majority of what I do, explaining class paths, packages, access modifiers, encapsulation and such are just a bit too much for people who need to know how a *for* loop works or how to reverse a TimelineMax animation.

    Some have argued that everything should at least be in a document class, I may go that route some day.

    I know when I’ve been learning the GreenSock stuff for myself, I really appreciate that I can read the GreenSock docs and just copy-paste some code into an fla.

    I’m really not a fan of Adobe’s method of supplying code as “class-based”
    examples:

    http://help.adobe.com/en_US/as3/dev/WS9b644acd4ebe599911c828a51243b0939d0-8000.html#WS9b644acd4ebe599911c828a51243b0939d0-7ffe

    I know a lot of my reader’s enjoy being able to just fly in, download some
    files and get cracking. The beginner-folk can get what they need quickly and
    don’t have to worry about how 3 different AS classes are communicating with
    each other or being instantiated.

    And of course there’s the part about me being an old man that doesn’t like
    change:)

    As I learn more about this stuff, I will most definitely bring more of it to
    the table.

    I really appreciate you taking the time to chime in and offer your support
    and encouragement. I’ve learned a lot from the people that comment here and
    I’m always interested in getting feedback.

    Best,

    Carl

  • Harry

    While classes are definitely the way to go for building your own projects, I agree totally with you that classed based examples suck! Going File > New in the Flash IDE is so much quicker than setting up a new project in Flash Develop for example. When I’m learning new stuff from a tutorial I find it much easier to copy/paste the relevant parts into a fla file and play around with it until I understand it then incorporate it in my own class files. Glad to see I’m not the only one with a dislike of Adobe’s approach to examples!

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

    thanks for chiming in Harry. I love opinions that are the same as mine. They are the best!.   :)

    I’ll give Flash Pro / Adobe a little credit, as they make it pretty easy to create a document class file from the properties panel… but I find the workflow of having to save the external as file every time you compile to be another hassle / thing I often forget about which makes my experimentation more frustrating. 

  • Andy

    Hey Carl,

    thanks for all the great tutorials.

    I tried to combine the grid-informations with the flip-tutorial and the XML-informations. So I could finish a learning-card-flipshow. It would never have been possible without your help. You are my hero!

    Perhaps somebody wants to use it. Look at http://www.schule-bw.de/unterricht/faecher/mathematik/3material/sek1/zahl/prozent_basis/index.html. There is also a Link on my E-Mail. Perhaps there is anybody, who likes to get the fla.

    Greetings from the black forest in Germany
    Andy

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

    Hey Andy. That’s great. I love seeing my tutorials being put to good use. You really managed to combine a lot of the techniques I have been covering.
    thanks for sharing!

    Carl

  • ASeitz

    Hi Carl,

    I aggree that its good (right now) to keep the complexity of your sample files simple. I my opinion using a document class instead of pasting all your example code into one timeline frame does not increase the complexity. Quite the contrary, it could help beginner-folk to understand more complex examples as they start understanding about how classes and its attributes and methods work.
    Even copying and pasting code from Greensocks docs into the document class works the same way as pasting it into a timeline frame.

    People who just startet learning a programming language will benefit the most of it. Why? Because once learned how to programm in an OOP language it’s a lot easer to switch from OOP AS3 to other languages like Java, C++, .Net etc…and even PHP is now OOP based.

    I don’t say there is the need to use multiple and complex classes to beginn with. To keep it quick and simple just place your sample code into one document class. I personally do this every time I download one of your sample fla’s and really want to experience with it. I worked a lot with framescripts myself when I was programming AS2. But these times are over now. AS2 is dying out. Framescipts the way you use it in my opinion will soon as well :-)
    Maybe dispatch Events from a framescript might survive a little longer…

    You can’t see the real benefit of a document class if you’re still writing all your code in the F9 AS3 editor from Flash Pro! For beginners I highly recommend to start AS3 coding in another IDE like Flash Builder, FlashDevelop or FDT. The main reason why: they help you a lot to write AS3 commands and organise your imports. Don’t get frustrated searching in the adobe documenation which adobe package needs to be imported when using this or that class. Hotkey Str+Shift+O in Flash Builder will do it for you and all your imports are there, organised. Ohh how I miss code-hinting, code completion and the refactoring options when I open framescipts in Flash Pro. In particular the hotkeys Strg+Space for code-hinting and code-completion and Strg+Click on a function to move directly to that function wherever it may be.
    These are only some reasons why I personally copy all your framescript into one Main.as document class because It helps me to understand your code better and use the ideas behind it in my own projects.

    Have a look and one of these AS3 Programming IDEs:

    http://www.fdt.powerflasher.com/ (free trail)
    http://www.flashdevelop.org/ (freeware)
    http://www.adobe.com/products/flash-builder.html (60days trail)
    http://www.adobe.com/devnet-apps/flex/free/ (Flash Builder 4.5 is free for students and unemployed)

    and try out to convert a carl schoof example file framescript into a document class. Here’s a good explanation to build your first document class:

    http://active.tutsplus.com/tutorials/actionscript/as3-101-oop-introducing-design-patterns/

    Read step1 till step 5 and then try to copy and paste carls example code into you document class. Let me now weather it was easy for you or if you failed somewhere. If we see where the problems for the beginners are, maybe some of us (twinking to carl) could do a little tutorial covering that topic.

    Carl, IMHO you did a really great job when you explained OOP basics:

    http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/

    Please stick to that and try to use a document class in one of your next examples. Keep it simple structured in only one Main.as document class file and we’ll see if it’s not better for all of your blog readers. I would appreciate it. I’m there to help if you need me.

    Greetings from a fan ;-)

    ASEITZ

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

    Thanks for the time and effort you have put in to providing your thoughts and resources.

    I think you nailed it right here:

    “You can’t see the real benefit of a document class if you’re still writing all your code in the F9 AS3 editor from Flash Pro! For beginners I highly recommend to start AS3 coding in another IDE like Flash Builder, FlashDevelop or FDT.”

    That’s the thing, my primary audience are people who use Flash Professional. I want to inspire people with the visual design and animation skills to use ActionScript more. My vision is to empower people to bring new life to their art without the barriers of installing sdks, configuring compilers and debuggers, configuring “projects” or the other intricacies involved. Furthermore, Flash Pro is completely platform agnostic and is available to the greatest number of creative professionals and hobbyists.

    For people who have a singular focus on a career in app development, I agree 100% that these tools and methodologies are the way to go. They will increase efficiency and force some good habits on them.

    When learning any language, whether it be English, German or AS3, the natural progression is that you learn a few nouns and verbs. And then you
    progress into things like present/past tense, sentence structure and other
    formalities.

    Apple!
    Eat Apple!
    I want eat apple
    I would really like to have an apple now. May I have one please.

    My vision for snorkl.tv is to help the people get to “I want eat apple” and
    inspire a passion to move forwards.

    I’m sure along the way I will be dabbling with external editors and document
    classes. trust me, I don’t enjoy the lack of code-completion efficiencies in
    the Flash IDE, but right now using a document class is a bit clumsy in the
    IDE.

    You’ve made a strong case for using a document class, and I know that using
    an external editor doesn’t imply that Flash Pro won’t be used for creating
    and organizing assets and all that. I will continue to weigh the pros and
    cons and stay tuned to the needs of my audience.

    Thanks again for your time and willingness to offer support. I very well may
    take you up on that.

    Carl

  • Sarvan

    Hey folk,
             i found some glitches when i try to rotate the movieclip in x – axis,when i try to implement the tile masking in my project , instead of scale property i change them to rotationX property,but its not properly working,,, i really need ur help and i also new to tweenmax and tweenlite… Here i paste my code,

    import com.greensock.easing.*;import com.greensock.*;import flash.display.MovieClip;var noTiles:Number = 36;var cols:Number = 6;var rows:Number = noTiles / cols;var container:MovieClip = new MovieClip();container.x = 58;container.y = 26;addChild(container);init();function init():void{ for (var i:Number = 0; i<noTiles; i++) { var curCol:uint = i % cols; var curRow:uint = uint(i / cols); var box:Block = new Block(); box.x = (box.width + 0.5) * curCol; box.y = (box.height + 0.5) * curRow; box.alpha = 0; box.rotationX = 0; TweenLite.to(box , 1 , {alpha:1 , rotationX:180 , ease:Bounce.easeOut , delay:(curCol ) * 0.05}); container.addChild(box); }}container.getChildAt(0).visible = false;pic.cacheAsBitmap = true;container.cacheAsBitmap = true;pic.mask = container;

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

    it’s impossible to read your code. Once Flash places an item into 3D space its alignment can get messed up.

    you have to fix things onComplete of your tween like so:

     tl.insert( TweenMax.to( currentTile, .5, {scale:1, rotationX:180, alpha:1, delay:currentCol * .1, onComplete:deBlur, onCompleteParams:[currentTile]}) );

    //kill matrix3D and reset x and y

    function deBlur( box ): void{
    var currentX = box.x; var currentY = box.y;
    box.transform.matrix3D = null;
    box.x = currentX;
    box.y = currentY;
    }

    read:
    http://www.snorkl.tv/2011/04/fun-and-quick-timelinemax-effect-cluster-bomb/

blog comments powered by Disqus

Previous post:

Next post: