Tutorial Details
- Difficulty: Intermediate
- Platform: Flash (Flash Player 11+)
- Language: AS3
- Software Used: Flash Builder
- Libraries Used: Starling Framework
- Estimated Completion Time: 15 minutes
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Matthew Chung
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is great work. Please bring more tutorial.
Thank you.
This Framework is awesome, i will definitely try it today. thanks a lot for this post
Thanks, nice tutorial. I have been playing with Starling and it is quite incredible. It is great for games but I am also using it in a trade show display kiosk for the day job, it is very useful for that. I would love to see more tuts!
One thing I would like to see elaborated on is the juggler. In his mini-book, Thibault went through a great deal of info and I read (nearly) the whole thing. I would recommend going there for anybody looking to get started.
In this book, he talks about using the addFrameAt and removeFrameAt API’s to handle animation states, but does not go much further into the subject. It looks like he would be using it to group different states inside a single starling MovieClip, rather than a Vector containing multiple MovieClip objects. What would the differences be between this method and the one you have used here?
thanks!
Nick
Hi Nick,
The addFrameAt/removeFrameAt methods can be used to handle animation states, but that would require you to set your frames every time you changed animations. Multiple movie clips save some code and also allow you to cache your animations.
Another reason I chose this route is because there is not a convenient way to replace the current frames with a new a group of frames – which means instantiating a new MovieClip or adding frames one by one.
However, keep your eyes on new api updates. If it changes to better support multiple animations with one MovieClip, then that’d definitely be the way to go.
Thanks for the kind words regarding the tutorial.
more please.
More of Starling Frameworks tutorial please :)
Thank you!
More of Starling Frameworks tutorial please :)
Thank you! [2]
Thanks and Yes please, moore Starling tutorials!
I was really impressed with what Starling is able to do with AIR 3.2 for iOS and Android. In a way this could be our default way for developing 2D even 3D games for mobile Apps, aswell as web.