How to handle your Flash Starling animations using the Juggler

Emanuele Feronato Actionscript 3, Flash, Game design, Starling

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.

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!

Comments 9

  1. chicky

    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 :/

    1. Post
      Author
  2. Deryost

    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.

  3. Joey Clover

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

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

    gridEditionTween.onComplete = showButtons; ?

  4. Zync

    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.

  5. Henry

    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 });

  6. Pingback: Managing multiple iOS resolutions with Starling – real world example - Emanuele Feronato

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

Leave a Reply

Your email address will not be published. Required fields are marked *