Emanuele Feronato

Talking about Actionscript 3, Flash, Game development and 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:

package {

	import starling.display.Sprite;
	import starling.display.Image;
	import starling.textures.Texture;
	import starling.events.Event;
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.display.Button;

	public class Game extends Sprite {

		[Embed(source="assets/mainbg.png")]
		private static const MainBG:Class;

		[Embed(source="assets/gametitle.png")]
		private static const GameTitle:Class;

		[Embed(source="assets/gridedition.png")]
		private static const GridEdition:Class;

		[Embed(source="assets/normalmode.png")]
		private static const NormalMode:Class;

		[Embed(source="assets/timeattackmode.png")]
		private static const TimeAttackMode:Class;

		private var splashSprite:Sprite;
		
		public function Game() {
			addBackground();
			showGameTitle();
		}
		
		private function addBackground():void {
			var backgroundTexture:Texture=Texture.fromBitmap(new MainBG());
			var backgroundImage:Image=new Image(backgroundTexture);
			addChild(backgroundImage);
		}

		private function showGameTitle():void {
			splashSprite=new Sprite();
			addChild(splashSprite);
			var gameTitleTexture:Texture=Texture.fromBitmap(new GameTitle());
			var gameTitleImage:Image=new Image(gameTitleTexture);
			gameTitleImage.x=192;
			gameTitleImage.y=-100;
			splashSprite.addChild(gameTitleImage);
			var gameTitleTween:Tween=new Tween(gameTitleImage,0.7);
			gameTitleTween.moveTo(192,80);
			gameTitleTween.onComplete=function():void{showGridEdition();};
			Starling.juggler.add(gameTitleTween);
		}
		
		private function showGridEdition():void {
			var gridEditionTexture:Texture=Texture.fromBitmap(new GridEdition());
			var gridEditionImage:Image=new Image(gridEditionTexture);
			gridEditionImage.x=641;
			gridEditionImage.y=122;
			splashSprite.addChild(gridEditionImage);
			var gridEditionTween:Tween=new Tween(gridEditionImage,0.7);
			gridEditionTween.moveTo(358,122);
			gridEditionTween.onComplete=function():void{showButtons();};
			Starling.juggler.add(gridEditionTween);
		}
		
		private function showButtons():void {
			var normalModeTexture:Texture=Texture.fromBitmap(new NormalMode());
			var normalModeButton:Button=new Button(normalModeTexture);
			splashSprite.addChild(normalModeButton);
			normalModeButton.x=266;
			normalModeButton.y=240;
			normalModeButton.alpha=0;
			normalModeButton.scaleWhenDown=0.95;
			var normalModeTween:Tween=new Tween(normalModeButton,0.7);
			normalModeTween.fadeTo(1);
			Starling.juggler.add(normalModeTween);
			normalModeButton.addEventListener(Event.TRIGGERED,startNormalGame);
			var timeAttackModeTexture:Texture=Texture.fromBitmap(new TimeAttackMode());
			var timeAttackModeButton:Button=new Button(timeAttackModeTexture);
			splashSprite.addChild(timeAttackModeButton);
			timeAttackModeButton.x=247;
			timeAttackModeButton.y=310;
			timeAttackModeButton.alpha=0;
			timeAttackModeButton.scaleWhenDown=0.95;
			var timeAttackModeTween:Tween=new Tween(timeAttackModeButton,0.7);
			timeAttackModeTween.delay=0.2;
			timeAttackModeTween.fadeTo(1);
			Starling.juggler.add(timeAttackModeTween);
		}

		private function startNormalGame(e:Event):void {
			e.target.removeEventListener(Event.TRIGGERED,startNormalGame);
			var removeSplashTween:Tween=new Tween(splashSprite,0.7);
			removeSplashTween.moveTo(0,-480);
			removeSplashTween.onComplete=function():void{removeChild(splashSprite,true)};
			Starling.juggler.add(removeSplashTween);
			//showLevels();
		}		
	}
}

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:

private function showGameTitle():void {
	splashSprite=new Sprite();
	addChild(splashSprite);
	var gameTitleTexture:Texture=Texture.fromBitmap(new GameTitle());
	var gameTitleImage:Image=new Image(gameTitleTexture);
	gameTitleImage.x=192;
	gameTitleImage.y=-100;
	splashSprite.addChild(gameTitleImage);
	var gameTitleTween:Tween=new Tween(gameTitleImage,0.7);
	gameTitleTween.moveTo(192,80);
	gameTitleTween.onComplete=function():void{showGridEdition();};
	Starling.juggler.add(gameTitleTween);
}

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:

timeAttackModeTween.delay=0.2;

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.