承上一篇,我們接著來講最後一個IAnimatable類別,MovieClip。Starling的MovieClip跟native的MovieClip不太一樣,它只能接收一個Vector.<Texture>,來指定每個frame的貼圖,而不能像native一樣當DisplayObjectContainer,加入一堆東西。不過透過一些工具,我們可以把native做好的MovieClip,輸出成一張Sprite sheet,以及一個XML檔,再將這張圖片與XML匯入Starling產生一個TextureAtlas,最後由這個TextureAtlas轉出Vector.<Texture>給MovieClip使用。

先來介紹一下產生Sprite sheet的工具,TexturePacker。這套軟體有Windows版與Mac版,可以輸出給很多framework使用。我們可以先下載Essential版來試用。下載安裝後,我們打開Flash Professional,新增一個movieClip.fla,隨便做一段動畫,然後發布movieClip.swf。接著我們打開TexturePacker,把movieClip.swf直接拖曳到面板的右邊區塊,或按上面的"Add Sprites"按鈕。在介面中間的區塊,就可以看到TexturePacker幫我們把movieClip.swf時間軸的動畫排成一張Sprite sheet。左邊的設定面版,我們只要設定Data Format為Sparrow,勾選Autosize與Allow free sizes大概就可以了。設定選項的位置如下圖:

接著按下上方的"Publish"按鈕,這時候會先跳出一個視窗,告訴我們用了一些功能是需要購買License才能正常使用,否則會隨機將兩張圖貼上奇怪的字。這邊我們先做測試,所以直接按Continue。接著會讓我們分別儲存Data file(XML)以及Texture file(PNG)。我們分別存成movieClip.xml與movieClip.png。

我們可以打開movieClip.xml看一下,root node為TextureAtlas,裡面有很多SubTexture,name應該都為"movieClip.swf/00xx",等等我們會需要透過這個name的命名方式把它們取出來。

接下來就可以進入程式的部分了,先把程式碼貼出來:

publicclassGame7extendsSprite
{
privatevar _container:Sprite;
[Embed(source ="/assets/movieClip.xml", mimeType="application/octet-stream")]
privatestaticconstSpriteSheetXML:Class;//embed Sprite sheet data file
[Embed(source ="/assets/movieClip.png")]
privatestaticconstSpriteSheet:Class;//embed Sprite sheet
[Embed(source ="/assets/pon.mp3")]
privatestaticconstSoundPon:Class;//embed一個聲音檔

publicfunctionGame7()
{
super();
addEventListener(Event.ADDED_TO_STAGE, init);
}

privatefunction init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);

_container =newSprite();
addChild(_container);
addChild(newStats());

var bitmap:Bitmap=newSpriteSheet();
var texture:Texture=Texture.fromBitmap(bitmap);//將Sprite sheet轉成Texture
var xml:XML = XML(newSpriteSheetXML());//產生一個Sprite sheet data的XML

var textureAtlas:TextureAtlas=newTextureAtlas(texture, xml);//新增一個TextureAtlas,把texture與xml傳進去

var frame:Vector.<Texture>= textureAtlas.getTextures("movieClip.swf/");//將textureAtlas裡名稱為"movieClip.swf/"開頭的SubTexture取出來
var movieClip:MovieClip=newMovieClip(frame,30);//新增一個MovieClip,第一個參數傳入剛產生的frame,第二個參數設定fps
movieClip.x =0;//設定movieClip座標
movieClip.y =0;//設定movieClip座標
movieClip.setFrameDuration(0,0.5);//我們可以設定某個frame的停留時間,frame數由0開始
var soundPon:Sound=newSoundPon();//新增一個Sound
movieClip.setFrameSound(18, soundPon);//我們可以設定某個frame播放聲音,frame數由0開始
_container.addChild(movieClip);//將movieClip加到場景上
Starling.juggler.add(movieClip);//最後別忘了加到Starling.juggler開始播放
}
}

首先我們將movieClip.png與movieClip.xml embed進來。將圖片轉成texture,data存到xml,然後新增一個TextureAtlas,將texture與xml傳進去。接著用

textureAtlas.getTextures("movieClip.swf/") 

把我們剛剛在movieClip.xml裡看到name開頭為"movieClip.swf/"的texture都取出來給frame。這時終於輪到MovieClip登場,新增一個MovieClip,第一個參數把剛剛的frame丟進去,第二個參數可以設定fps。

順便介紹兩個好用的method。第一個為setFrameDuration(),可以另外再設定某個影格的停留時間,影格數從0開始。而setFrameSound()可以設定播放到某影格時播放一個聲音檔。

最後,把movieClip加到場景上,並且記得加到Starling.juggle才會開始播放。Demo如下:

點我或圖看Demo

一起來玩鳥 Starling Framework(7)MovieClip的更多相关文章

  1. 一起來玩鳥 Starling Framework 簡介

    開場 Starling Framework是一套Flash 2D遊戲開發"工具",是使用Flash最新的Stage3D API建構出來的一套Framework.最大優點在於使用GP ...

  2. 一起來玩鳥 Starling Framework(5)Multi-Touch

    這篇來談談Starling的Multi-Touch.前一篇也提到,Multi-Touch一樣是監聽TouchEvent.TOUCH,然後由TouchEvent的e.getTouches()取回多點的資 ...

  3. 一起來玩鳥 Starling Framework(2)效能測試以及Image與Texture

    上一篇我們放了一個Quad與TextField在舞台上慢慢轉.眼尖的可能會發現轉起來邊緣有點鋸齒,這可以透過設定Starling的反鋸齒來解決,在Main.as裡,新增了_starling之後,可以加 ...

  4. 一起來玩鳥 Starling Framework(1)一定要的Hello World!

    雖然已經一堆Hello World的介紹文章跟影片了,但中文資料畢竟是比較少,所以不能免俗的來一篇中文版Hello World.首先開啟一個AS3.0專案,fps不用客氣,設為60,Starling很 ...

  5. 一起來玩鳥 Starling Framework(6)Juggler、Tween、以及DelayCall

    這篇開始來講Starling裡的Animation.Juggle是個簡單的Class,用來控制動畫的進行.他負責管理經由add()加進來的實現IAnimatable介面的物件,然後當Juggler的a ...

  6. 一起來玩鳥 Starling Framework(9)Particle

    最後,來看看Starling裡一個很炫的功能:Particle.Particle屬於extension,所以要另外下載檔案:Starling-Extension-Particle-System.下載之 ...

  7. 一起來玩鳥 Starling Framework(4)TouchEvent,Touch,以及TouchPhase

    這一篇來介紹一下TouchEvent.我們先來談單點的touch,下一篇再介紹MultiTouch.翻過Starling文件的應該會發現,Starling裡面沒有MouseEvent,而是整合在Tou ...

  8. 一起來玩鳥 Starling Framework(3)Button!

    週末夜來介紹個簡單的DisplayObject就好.不論是在電腦上或行動裝置上,跟使用者互動次數最多的,大概就是按鈕了.因此,Starling有個Button類別,來做出這個常用的互動元件. 同樣是因 ...

  9. 一起來玩鳥 Starling Framework(8)BitmapFont

    所謂BitmapFont,就是事先將我們會用到的字型,會用到的字,輸出成一張圖片,類似Sprite sheet,以及一個xml格式的Data file,然後我們一次將這文字圖片轉成Texture,up ...

随机推荐

  1. Google I/O完整盘点,这才是地球上最「性感」的发布会

    https://news.cnblogs.com/n/569588/ Google.ai:展现 AI 最好的一面 Google 今天新发布了第二代的 Tensor 处理单元(TPU),这是一个云计算硬 ...

  2. Spring MVC的静态和动态概念

    MVC模式: 图释:用户请求通过HTTP协议到达Front controller,Front controller把请求送给Controller,Controller了解业务逻辑细节并且调用业务逻辑数 ...

  3. 神器mimikatz使用命令方法总结

    神器mimikatz使用命令方法总结 文章地址:http://www.isharepc.com/300.html mimikatz是一款功能强大的轻量级调试神器,通过它你可以提升进程权限注入进程读取进 ...

  4. (13)python 正则表达式

    匹配单个字符 f. o    f和o之间是任意字符   例如:fbo123 .. 任意两个字符 \.用来匹配. 边界匹配 the     表示包含the的任何字符串 ^from 表示以from开头的所 ...

  5. HDU 变形课 1181【DFS/BFS】

    变形课 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Submissi ...

  6. 洛谷——P2719 搞笑世界杯

    题目背景 很久很久以后,一次世界杯,. 题目描述 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰,让人心痛不已. 于是有人组织了一场搞笑世界杯,将这些被淘汰的强队重新组织起来和世界杯一同比 ...

  7. cogs 双服务点设置

    4. 双服务点设置 ☆   输入文件:djsb.in   输出文件:djsb.out   简单对比时间限制:1 s   内存限制:128 MB 问题描述为了进一步普及九年义务教育,政府要在某乡镇建立两 ...

  8. HDU 1251 统计难题 (字典树)(查询是否为前缀)

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  9. [BZOJ 4082] Surveillance

    Link: BZOJ 4082 传送门 Solution: 对于链上这样的问题贪心就好了 如果在一个环上,肯定需要将环转化成链,$O(n)$确定起点才能计算 但枚举每个节点拆环再贪心的复杂度为$O(n ...

  10. POJ 3177 Redundant Paths(边双连通分量)

    [题目链接] http://poj.org/problem?id=3177 [题目大意] 给出一张图,问增加几条边,使得整张图构成双连通分量 [题解] 首先我们对图进行双连通分量缩点, 那么问题就转化 ...