皮卡丘。生活。工坊

2013年3月22日星期五

starling好夥伴~~Feathers

聽到了狗語訊息
為了在Starling上放上UI組件去估狗廟餵狗狗
那就是---Feathers

Starling對Feathers的介紹
http://www.starlinglib.com/wiki/News:Starling_Feathers

等等來研究
---------------------------------
官網有例子
可是每個例子都用4~5個組件作成
想各別使用還要一一拆解
看哪個部位是哪個@@

List
清單
東西要放在這裡面才能給別的物件使用
dataProvider: ListCollection 例如下面這個
const collection:ListCollection = new ListCollection(
[
{ label: "Facebook", texture: this._iconAtlas.getTexture("facebook") ,event: "ooo"},
{ label: "Twitter", texture: this._iconAtlas.getTexture("twitter") ,event: "ooo"},
]);
layout:顯示的物件這個有點複雜例子是用TiledRowsLayout 移到下面再看

scrollerProperties.snapToPages: true;
scrollerProperties.scrollBarDisplayMode: Scroller.SCROLL_BAR_DISPLAY_MODE_FLOAT;
scrollerProperties.horizontalScrollPolicy: Scroller.SCROLL_POLICY_ON;
itemRendererFactory:function 建立list裡的物件時都會執行的function

TiledRowsLayout
paging:換頁的方式 :
PAGING_HORIZONTAL:左右換頁
PAGING_NONE :全部成一頁
PAGING_VERTICAL:上下捲動

useSquareTiles:每個Tile是否用正方形

tileHorizontalAlign: tile各自的排列位置
TILE_HORIZONTAL_ALIGN_RIGHT:靠右對齊
TILE_HORIZONTAL_ALIGN_CENTER:置中對齊
TILE_HORIZONTAL_ALIGN_JUSTIFY
TILE_HORIZONTAL_ALIGN_LEFT:靠左對齊

horizontalAlign: 整體排列位置有左中右可選
HORIZONTAL_ALIGN_CENTER:置中對齊
HORIZONTAL_ALIGN_RIGHT:靠右對齊
HORIZONTAL_ALIGN_LEFT:靠左對齊

PageIndicator
滾動頁面下的點點
提示現在是第幾頁

normalSymbolFactory = function():Image 建立非選擇中的點時執行的function
selectedSymbolFactory = function():Image 建立選擇中的點時執行的function
direction = PageIndicator. 對齊方式
gap:Number 點點中間的間距

pageCount: int 值如為2~~顯示2個點點
paddingTop:Number 上面留白
paddingRight:Number 右邊留白
paddingBottom:Nnumber 下面留白
paddingLeft:Number 左邊留白

LEFT
雖然可以改圖
CENTER
可是還是不知道哪邊修改按下圖片時改變圖片內容
看來只能之後再研究了Orz

2013.03.22 近日發現

這個禮拜為了製作手持裝置的APP
在調整畫面上做了一些工夫
比較有印象的是~~~在原生flash上addchild物件

首先~為了在原生flash層上放物件
會利用
Starling.current.nativeOverlay.addChild(物件);

接著starling有一招可以檢查手持裝置的解析度
再把starling物件調整成對應的尺寸

public function Main():void {
_starling = new Starling(Game, stage, viewPortRectangle, null, "auto", "baseline");

stage.addEventListener(Event.RESIZE, resizeStage); //在stage改變size時觸發
}

private function resizeStage(e:Event):void{
var viewPortRectangle:Rectangle = new Rectangle();
viewPortRectangle.width = stage.stageWidth;
viewPortRectangle.height = stage.stageHeight;
Starling.current.viewPort = viewPortRectangle; //將viewport大小改成裝置的解析度
}

然而產生的問題是~~原生的物件座標不會隨著starling做變化
所以要先抓取變化的值~~再以此改變物件的座標與大小

private function rootCreatedHandler(e:starling.events.Event):void{
var gameInstance:Game;
gameInstance = Starling.current.stage.getChildAt(0) as Game; //抓取game物件
gameInstance.newWidth = _starWidth; //將值傳入game裡
gameInstance.newHeight = _starHeight;
}

利用上面的函式~~就可以將抓到的解析度數值傳入starling物件裡
再進而做調整~~~

[starling]TextureAtlas

今天嘗試將lobby做出來

首先是用TexturePacker將所有圖包成一大張圖
http://www.codeandweb.com/texturepacker

然後在程式裡load圖片跟XML進來後

_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, onLoadImgComplete);
_loader.load( new URLRequest("/png/Img.png"));

var lobbyImg:Bitmap = (LoaderInfo(evt.currentTarget).content as Bitmap);
_lobbyImg_texture = Texture.fromBitmap(lobbyImg);

_xmlLoader = new URLLoader(new URLRequest("/png/Img.xml"));
_xmlLoader.addEventListener(flash.events.Event.COMPLETE, onXMLLoadComplete);

_xmlLoader = evt.target as URLLoader;
_Img_xml = new XML(_xmlLoader.data);

再加上 _Img_atlas = new TextureAtlas(_Img_texture, _Img_xml);
這個atlas就包含所有的圖在裡面
之後要創建顯示的圖片時
就可以從裡面抓取

由於是使用starling的關係
之前embed的圖都不能用了
只好一個一個重建

今天就嘗試將底圖跟按鈕做出來看看
中間並沒甚麼問題
看來之後可以順利完成

starling的button只能設定正常狀態的圖跟按下的圖
沒有滑入的圖

2013.1.16 Starling初試啼聲

將網頁的水果盤放到AIR裡
初步問題:load 圖片失敗

在Adobe官網的ActionScript Help發現:
Note (iOS only):In AIR applications on iOS, only SWF files that do not contain ActionScript bytecode can be loaded. Instead, create SWC libraries and link them in to your main SWF. This restriction does not apply to the iOS Simulator (ipa-test-interpreter-simulator or ipa-debug-interpreter-simulator) or interpreter mode (ipa-test-interpreter or ipa-debug-interpreter.)

http://bbs.9ria.com/thread-145331-1-1.html
在看了這篇文章後
原本打算試試loader的方式讀圖
在分析出要用的圖片

但最後還是失敗了

後來發現上面那段是說不能load有AS的swf
所以還是可以load圖片吧@@

最後成功了..
原來只是連結有誤
"/png/sex.jpg"

這樣就可以試試load一大張圖
在逐步切割成要的部分

結論:
starling下可以用loader
但不能load有AS控制的swf

雖然進行得頗慢
但能找到好文章還是有收穫
----------------------------------------------------------
http://www.cnblogs.com/tankaixiong/archive/2012/11/28/2792047.html
這是不經意看到的文章

裡面滿多starling的說明
在用starling時可參考

2012年12月25日星期二

工作紀錄12.12.26 -starling初用

　　前幾天學了Starling的皮毛，想說這次要放入新動畫，就索性拿來用吧，畢竟這樣才能學比較快。

成果:
1.從main(原生)去呼叫starling的function
2.Starling跟原生同時顯示要注意圖層關係

1.----------------------------------------------------------------------------------------------------------------------
首先前置作業：
1.fps設為60
2.發佈為Flash Player 11
3.flashdevelop的專案Properties->Compiler Options->Additional....裡加入-swf-version=13

參考網頁:http://grayliao.blogspot.tw/2011/11/starling-framework1hello-world.html

接著先在main.as裡加入starling
    _mariStarling = new Starling(SmallAnime, this.stage);
    _mariStarling.start();

之後加入seven的動畫
-------------------------------------------------------------
public class SevenA extends Sprite{
        private var _mc:MovieClip;

        [Embed(source="/../bin/anime/seven.xml", mimeType="application/octet-stream")]
        private var AtlasXML:Class;

        [Embed(source="/../bin/anime/seven.png")]
        private var AtlasTexture:Class;

        public function SevenA() {
            var texture:Texture = Texture.fromBitmap(new AtlasTexture());
            var xml:XML = XML(new AtlasXML());
            var atlas:TextureAtlas = new TextureAtlas(texture, xml);

            _mc = new MovieClip(atlas.getTextures("seven.swf/"), 30);
            addChild(_mc);
            _mc.loop = false;
            _mc.addEventListener(EnterFrameEvent.ENTER_FRAME, test);
        }

        public function play():void {
            Starling.juggler.add(_mc);
        }

        private function test(e:EnterFrameEvent):void {
            var mc:MovieClip = e.currentTarget as MovieClip;
            if (mc.isComplete) {
                removeChild(mc, true);
            }
        }
    }
--------------------------------------------------------

接著在SmallAnime.as裡加入
     public function sevenStart():void {
          var seven:SevenA = new SevenA();
          addChild(seven);
        seven.play();
      }

原本是要game.as去呼叫sevenStart這個function---->出錯
發現原來starling跟原生的資訊不能混用
所以移到最前端main.as
var game:SmallAnime = Starling.current.root as SmallAnime;
    game.sevenStart();

讓main 去呼叫sevenStart這個function-------->出錯
錯誤原因:Starling.current.root是null

之後去找了相關文章：
rritw.com/a/bianchengyuyan/C__/20121211/269850.html
http://www.starlinglib.com/wiki/News:%E5%85%B3%E4%BA%8EStarling%E7%9A%84%E5%85%A5%E5%8F%A3%E7%B1%BB
找到root被建立後會產生的事件--->"rootCreated"

最後改成
-------------------------------------------------------------
     private function makeStarling():void {
           _mariStarling = new Starling(SmallAnime, this.stage);
           _mariStarling.start();
           _mariStarling.addEventListener("rootCreated",rootCreatedHandler);
       }

       private function rootCreatedHandler():void{
           var game:SmallAnime = Starling.current.root as SmallAnime;
           game.sevenStart();
       }
------------------------------------------------------------
終於讓game.sevenStart可以從main來呼叫

＊如果要創個物件來管理SmallAnime裡的function
也是可以建個原生界的Sprite
把SmallAnime傳進去~~就可以用了
----------------------------------------------------------------------------------------------------------------------

結果發現starling的圖層在原生的下面
所以還是用原生的來做動畫了

不過這道是不錯的經驗
希望下一個遊戲就可以用starling來顯示

工坊再度營業

因為最近比較認真研究Flash的東西

想說有個blog來記錄

比較清楚自己的進度在哪

希望這次不要又只有寫這篇而已

哈哈

2010年4月9日星期五

新生

為了紀錄學習
就重新啟用

2013年3月22日 星期五