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:
Want More Starling Tutorials?
Let us know in the comments!
Comments