ActionScript Mobile Project Splash Screen

The question was posed on Twitter : “How can you add a Splash Screen to an ActionScript only AIR for Android project using FlashBuilder”. Flex mobile projects have the luxury of defining ‘splashScreenImage’, ‘splashScreenMinimumDisplayTime’ & ‘splashScreenScaleMode’ properties within the default application mxml header, pure ActionScript projects do not.

I remembered a pure-AS3 project I worked on last year where the client wanted a custom preloader and I stumbled across Keith Peters solution:

http://www.bit-101.com/blog/?p=946

A splash screen is essentially the same thing as a preloader, a screen that fires up whilst the main application is loading so I figured it could work for the AS3 mobile splashScreen issue. Here’s the results:

Main Application File

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	[SWF(backgroundColor='#000000', frameRate='60')]
	[Frame(factoryClass="SplashFactory")]
	public class ASMobileSplash extends Sprite
	{
		public function ASMobileSplash()
		{
			(stage) ? init() : addEventListener( Event.ADDED_TO_STAGE, init );
		}

		public function init(event:Event=null):void
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var sprite:Sprite = new Sprite();
			sprite.graphics.beginFill(0xffee00);
			sprite.graphics.drawRect(0,0,100,100);
			sprite.graphics.endFill();

			addChild(sprite);
		}
	}
}

Splash Factory Class:

package
{
	import flash.display.DisplayObject;
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.utils.getDefinitionByName;

	public class SplashFactory extends MovieClip
	{
		[Embed(source="./Default.png")]
		public var SplashScreenImage:Class;

		private var _splash:DisplayObject;

		public function SplashFactory()
		{
			stop();
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			addEventListener( Event.ENTER_FRAME, frameHandler, false, 0, true );

			_splash = new SplashScreenImage() as DisplayObject;

			addChild( _splash );
		}

		private function frameHandler( e:Event ) : void
		{
			var percent:int = Math.round( ( root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal ) * 100 );
			if( framesLoaded >= totalFrames )
				initApp();
		}

		private function initApp() : void
		{
			removeEventListener( Event.ENTER_FRAME, frameHandler );

			removeChild(_splash);

			var app:ASMobileSplash = new ASMobileSplash();
			addChild(app);

			nextFrame();
		}
	}
}

You’ll prob have to add some framework swc’s to your project in order to make this work:

It seems to do the job in the debug simulator, not sure about actual devices though. Maybe you could let me know?