Handling Animation States With Starling

The Starling Framework is an AS3 API that mimics the display list, with one crucial difference: it uses Flash Player 11′s new features to render all content by the GPU. In this tutorial, you will learn to add multiple animations to a sprite using the Starling Framework. It assumes a basic understanding of using spritesheets with Starling.

Final Result Preview

Click here to view the demo we’ll be working towards. Click left or right of the monkey to make it walk in that direction; notice how it displays a walking animation when moving and a static frame when standing still.

Initial Code

The entire demo’s source files (in both the initial and final states) are in the source download. However, we’ll mainly be working with one file, MonkeySprite.as, so here are the contents, for reference:

package
{
	import flash.utils.getTimer;
	
	import starling.animation.Juggler;
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	
	public class MonkeySprite extends Sprite
	{
		private var standMovie:MovieClip; // standing animation
		private var mouseX:Number = -1; // location of mouse click on x axis
		private var lastTime:int; // last onFrame movement
		private var movieVector:Vector.<MovieClip>;
				
		public function MonkeySprite()
		{
			var atlas:TextureAtlas = Assets.getTextureAtlas();

			var standFrames:Vector.<Texture> = atlas.getTextures("monkey_1");
			standMovie = new MovieClip(standFrames, 7 );
			standMovie.loop = true;
			addChild(standMovie);
			
			pivotX = this.width * 0.5;
			this.addEventListener(Event.ENTER_FRAME, onFrame);
		}		
		
		public function onFrame(e:Event):void
		{
			if(mouseX == -1)
				return;

			// snap
			if(this.x <= mouseX+5 && this.x >= mouseX-5)
			{
				this.x = mouseX;
			}
			else
			{
				var timeDiff:int = getTimer()-lastTime;
				lastTime += timeDiff;

				if(mouseX > this.x)
				{
					this.x += timeDiff*.15;
				}
				else
				{
					this.x -= timeDiff*.15;
				}				
			}						
		}
		
		public function moveToPoint(pointX:Number):void
		{
			mouseX = pointX;
			lastTime = getTimer();
		}
	}
}

Watch the Screencast

Here are the URLs mentioned in the video:

• The Starling Framework
• Flash Builder
• mrdoob’s Hi-ReS-Stats
• Vicki Wenderlich’s Free Art Archive

Want More Starling Tutorials?

Let us know in the comments!