Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

How to handle your Flash Starling animations using the Juggler

You already know I am making my next Flash game using Starling, today I will unveil which game I am working on and how to create an animated title screen using Starling’s Juggler.

The juggler takes anything that can be animated and executes the animation, so you just have to define your tweens and add them to the juggler.

First things first, here is the screenshot of the actual title screen we are going to do:

Yes, I am working on the sequel of Circle Chain, my very first Flash game you can also get for free for iOS.

I decided to use Starling for the sequel, called Circle Chain Grid Edition, to easily port it to mobile devices.

Anyway, here is the title screen: first, the name of the game comes from the top, then “Grid Edition” text slides from right, and finally both “Normal Mode” and “Time Attack Mode” buttons fade on, with a slight delay between the first and the second.

Here is the source code:

I decided not to use the texture atlas in this step so you can easily see how many objects we have on the stage in the debug panel. For more information about texture atlas, read how to properly optimize your Starling Flash projects.

Following the code is easy, as I wrote it in top down order, which upper functions being called first.

The first interesting function is showGameTitle which I am going to explain:

Line 42: creation of new sprite called splashSprite, this will be the container of all title screen images

Line 43: adding splashSprite to Display List

Line 44: loading GameTitle bitmap into gameTitleTexture image

Line 45: creation of gameTitleImage using gameTitleTexture

Lines 46-47: positioning gameTitleImage. Notice it’s outside the screen (y=-100)

Line 48: adding gameTitleImage to Display List as a child of splashSprite

Line 49: this is the core of the function: the creation of a new tween involving gameTitleImage (first argument) which will last 0.7 seconds (second argiment).

Line 50: now it’s time to specify the kind of animation to assign to the tween. In our case, we are moving gameTitleImage down.

Line 51: this is the callback of the function. Once the tween is completed, we are calling showGridEdition which basically does the same thing with “Grid Edition” text.

Line 52: Finally, the tween is added to the juggler, which process it immediately.

Why did I say “immediately”? Because you can set a delay before the tween starts, as I did at line 87:

The rest of the script is just following the same concept, creating a tween and executing it, then calling a function which will create next tween.

Finally, when the player presses “Normal Mode”, the whole splash screen moves up and disappears.

And this is the result:

You may have to reload the page to see how splash screen is created, then press “Normal Mode” button.

Next time, I’ll show you how to use the juggler to create a level selection screen.

Download the source code.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 5.00 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 9 comments

  1. chicky

    on July 29, 2013 at 5:45 pm

    Sorry to say, but using the juggler s**ks. I’m not really sure what pros I have when using the juggler instead of an additional library like tweenlite or caurina, but a definite contra is IMO the bloatedness

    Why exactly should I give the juggler 2 params for x and y, when I only want to modify y? Why do I need (n+2) lines of code to make tween which I can define in a single line using the other libs (alpha, x, y, ease, rotation, etc…)? Plus, it doesn’t make my code more readable. Given, I could define my own function which takes an object with all params (like the other libs do), but still, using the juggler seems very clunky to me :/

  2. Emanuele Feronato

    on July 29, 2013 at 5:54 pm

    You can use the juggler with only one param (such as x or y) if you prefer.

  3. Deryost

    on July 29, 2013 at 6:44 pm

    I started a project using the juggler and I had to went back using Greensock Tweenlite.

    Like you said Chicky, the juggler is adding to much bloatedness.

    Anyway, I can’t live now without Greensock Timelines, and using the Juggler is not mandatory.

  4. solewalker

    on July 29, 2013 at 8:23 pm

    That’s awful lot of code, in comparison to cocos2d or cocos2d-x imho.But good tutorial.

  5. Joey Clover

    on July 29, 2013 at 10:01 pm

    gridEditionTween.onComplete=function():void{showButtons();};

    Just wondering why you created an anonymous function there, instead of just:

    gridEditionTween.onComplete = showButtons; ?

  6. Zync

    on July 29, 2013 at 11:01 pm

    Yeah TimelineMax from Greensock for the win here. Way more robust and battle tested to oblivion. Can speed up slow down the entire sequence, call for listeners when specific events occur and so much more. Good article none the less though. Learned a few things about starling.

  7. Henry

    on August 1, 2013 at 3:59 am

    You can simplify this by using Juggler’s tween() method. E.g. You could replace the last four lines of showGameTitle() with a single line. from:

    var gameTitleTween:Tween=new Tween(gameTitleImage,0.7);
    gameTitleTween.moveTo(192,80);
    gameTitleTween.onComplete=function():void{showGridEdition();};
    Starling.juggler.add(gameTitleTween);

    to

    Starling.juggler.tween(gameTitleImage, 0.7, { y: 80, onComplete: function():void{showGridEdition();} });

    Also, you could use Tween’s delay property to schedule later tweens so you won’t need to use onComplete to sequence the all the tweens. E.g. omitting the asset loading code the three show…() functions could be reduced to:

    Starling.juggler.tween(gameTitleImage, 0.7, { y: 80 });
    Starling.juggler.tween(gridEditionImage, 0.7, { x: 358, delay: 0.7 });
    Starling.juggler.tween(normalModeButton, 0.7, { alpha: 1, delay: 1.4 });
    Starling.juggler.tween(timeAttackModeButton, 0.7, { alpha: 1, delay: 1.6 });

  8. Managing multiple iOS resolutions with Starling – real world example - Emanuele Feronato

    on August 13, 2013 at 4:31 pm

    […] I am showing you how I am managing this in an actual project, the sequel of Circle Chain game I showed you in the post how to handle your Flash Starling animations using the Juggler. […]

  9. Detect swipe gestures with Flash and Starling: two examples - Emanuele Feronato

    on September 12, 2013 at 6:03 pm

    […] The scrolling animation will be managed by Starling’s juggler. Read more information about it in the post how to handle your Flash Starling animations using the Juggler. […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×