Starling核心類別IAnimatable,Juggler、Tween、DelayedCall,MovieClip概述

Starling裡有一個很重要的核心類別IAnimatable..
IAnimatable類別有4種分別是Juggler、Tween、DelayedCall,MovieClip;
1.Juggler是個IAnimatable介面的接口,Tween、DelayedCall,MovieClip都要透過它來執行動畫動作~ 他負責管理經由add()加進來的實現IAnimatable介面的物件,所有的IAnimatable物件都有自己的advanceTime(),包括 Juggler自己本身..然而在Starling裡面，這個方法一般會和EnterFrame事件綁定起來,也就是說你可以透過advanceTime()方法去控制動畫每一個frame的表演劇本..

2.Tween的概念跟native的TweenMax或其他Tween API類似。Tween建構式可傳入三個參數，第一個是要產生動畫的目標，第二個是時間，第三個是transitions也就是動態方式..其中很常用的有delay延遲執行時間,onStart，onUpdate，onComplete等function可以設定

3.DelayedCall顧名思義就是過一定時間之後再去呼叫某function。DelayedCall的建構式，第一個指定要call的function，第二個是delay時間，第三個是function需要的參數，用一個Array依序填入。設定好一樣要加到Juggler才會跑..

4.MovieClip在Starling裡的MovieClip和native的MovieClip有很大的不同,native.MovieClip=一個DisplayObjectContainer可以一直在裡面加東西,
但Starling.MovieClip只能接收一個Vector.＜Texture＞，來指定每個frame的貼圖,透過SpriteSheet的方式你可以方便的做出流暢的角色動畫..它的結構大概是:Starling的MovieClip需要1個TextureAtlas,並且用TextureAtlas.getTextures("atlas.xml的名稱關鍵字")回傳一個Vector.,最開心的是每一個MovieClip都可以控制它的fps速度,new MovieClip(textures:Vector., fps:Number=12);也就是說在建構一個Starling的MovieClip需要先有一個TextureAtlas(材質庫),1個TextureAtlas需要由1個Texture+1個XML(製作SpriteSheet需要),再把它加到Juggler去跑即可~~

 

//--製作一個MovieClip SprieSheet動畫
[Embed(source = "../../bin/assets/atlas.png")]
private static const BmpAtlas:Class;
[Embed(source = "../../bin/assets/atlas.xml",mimeType="application/octet-stream")]
private static const XmlAtlas:Class;

var $textureAtlas:TextureAtlas = new TextureAtlas(Texture.fromBitmap(new BmpAtlas()), XML(new XmlAtlas()));
_mcItem = new MovieClip($textureAtlas.getTextures("walk"), 20); 

以下是小弟自行練習的範例

 

package demo4_movieClip 
{
 import flash.media.Sound;
 import starling.animation.Transitions;
 import starling.animation.Tween;
 import starling.core.Starling;
 import starling.display.MovieClip;
 import starling.display.Sprite;
 import starling.events.Event;
 import starling.textures.Texture;
 import starling.textures.TextureAtlas;
 
 /**
  * ...
  * @author Ray Cheng
  */
 public class SpriteSheepPage extends Sprite 
 {
  [Embed(source = "../../bin/assets/atlas.png")]
  private static const BmpAtlas:Class;
  [Embed(source = "../../bin/assets/atlas.xml",mimeType="application/octet-stream")]
  private static const XmlAtlas:Class;
  [Embed(source = "../../bin/assets/walk.mp3")]
  private static const SoundMp3:Class;
  
  private var _targetY:uint;
  private var _numWalk:uint = 3;  
  private var _mcItem:MovieClip;
  
  public function SpriteSheepPage() 
  {
   this.addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event):void 
  {
   removeEventListener(Event.ADDED_TO_STAGE, init);
   _targetY = Math.floor(stage.stageHeight / 3);
   creat();
  }
  
  private function creat():void 
  {
   var $textureAtlas:TextureAtlas = new TextureAtlas(Texture.fromBitmap(new BmpAtlas()), XML(new XmlAtlas()));
   _mcItem = new MovieClip($textureAtlas.getTextures("walk"), 20);   
   _mcItem.setFrameSound(3, Sound(new SoundMp3()));
   _mcItem.y = _targetY * _numWalk - _mcItem.height;
   addChild(_mcItem);
   Starling.juggler.add(_mcItem);
   
   onReplayWalkLeft();
  }
  
  private function onReplayWalkLeft():void 
  {
   _mcItem.scaleX = 1;
   _mcItem.y = _targetY * _numWalk - _mcItem.height;
   
   var $tween:Tween = new Tween(_mcItem, 5);
   $tween.moveTo(stage.stageWidth + 100, _targetY * _numWalk - _mcItem.height);
   $tween.onComplete = onReplayWalkRight;
   Starling.juggler.add($tween);
   
   _numWalk--;
   if (_numWalk == 0)_numWalk = 3;
  }
  
  private function onReplayWalkRight():void 
  {
   _mcItem.scaleX = -1;
   _mcItem.y = _targetY * _numWalk - _mcItem.height;
   
   var $tween:Tween = new Tween(_mcItem, 5);
   $tween.moveTo(0 - 100, _targetY * _numWalk - _mcItem.height);
   $tween.onComplete = onReplayWalkLeft;   
   Starling.juggler.add($tween); 
   
   _numWalk--;
   if (_numWalk == 0)_numWalk = 3;
  }
  
 }

}