zoukankan      html  css  js  c++  java
  • 一起來玩鳥 Starling Framework(3)Button!

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

    同樣是因為由Sparrow移植過來的影響,Button的行為完全是行動裝置上的按鈕。它只有一個一般狀態的Texture,按鈕上的文字,以及壓下狀態的Texture(也可以不要)。事件只有一個:Event.TRIGGERED。沒有mouse over的狀態,也沒有useHandCursor可用。

    Document Class依然不需要更動,再新增一個Game3.as當做Starling的rootClass,程式碼如下



    publicclassGame3extendsSprite
    {
    privatevar _container:Sprite;
    privatevar _msgText:TextField;
    [Embed(source ="/assets/btnBg.png")]
    privatestaticconstBtnBitmap:Class;//embed一張圖片當做Button平常的狀態
    [Embed(source ="/assets/btnDownBg.png")]
    privatestaticconstBtnDownBitmap:Class;//embed一張圖片當做Button壓下的狀態

    publicfunctionGame3()
    {
    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 menu:Sprite=newSprite();//新增一個Sprite當做所有Button的容器
    menu.x =100;//設定menu座標
    menu.y =30;//設定menu座標
    _container.addChild(menu);//menu加到場景上
    _msgText =newTextField(300,20,"No Button Triggered.","Arial",14,0xFF0000,true);//新增一個TextField來顯示Button的狀態
    _msgText.x =100;//設定_msgText座標
    _msgText.y =80;//設定_msgText座標
    _msgText.hAlign =HAlign.LEFT;//設定_msgText文字靠左對齊
    _container.addChild(_msgText);//將_msgText加到場景上

    var btnTexture:Texture=Texture.fromBitmap(newBtnBitmap());//從embed圖片產生button平常狀態的Texture
    var btnDownTexture:Texture=Texture.fromBitmap(newBtnDownBitmap());//從embed圖片產生button壓下狀態的Texture
    var btnTexts:Vector.<String=newVector.<String>();//用一個Vector先將Button的文字存放起來
    btnTexts.push("About");//加入第一個Button文字
    btnTexts.push("Works");//加入第二個Button文字
    btnTexts.push("Video");//加入第三個Button文字
    btnTexts.push("Contact");//加入第四個Button文字
    var btnNum:uint= btnTexts.length;//Button個數
    var button:Button;//button用來當參照
    for(var i:int=0; i btnNum; i++)//用個迴圈設定四個button
    {
    button =newButton(btnTexture, btnTexts[i], btnDownTexture);//新增一個Button
    button.x = i *150;//設定button座標
    button.name ="btn"+ btnTexts[i];//設定button的name
    button.alphaWhenDisabled =0.5;//如果button disable時alpha會自動變成0.5
    menu.addChild(button);將button加到場景上
    }
    button.enabled =false;//寫在迴圈外,我們故意將最後一個button disable
    menu.addEventListener(Event.TRIGGERED, buttonTriggered);//Event.TRIGGERED會bubble,所以只要對menu監聽就好
    }

    privatefunction buttonTriggered(e:Event):void
    {
    _msgText.text =Button(e.target).name +" triggered!";//顯示哪個Button被triggered
    }
    }

     
    首先embed兩張圖分別當做Button的up state與down state時的Texture。然後先用一個Sprite menu當做容器,再將四個Button建立起來,放到這個容器裡面我們另外在場景上加了一個TextField用來顯示等等哪個Button被triggered的訊息。。Button有很多跟font有關的屬性可以設定文字的字型、字級、粗體等等來設定文字的樣式,如果配合BitmapFont就可以做出更多樣性的Button。關於BitmapFont之後再聊。加完四個Button後,我們故意將最後一個Button的enabled屬性設為false,用來觀察alphaWhenDisabled這個屬性的效果。這是當Button disable時,Button自動會改變自己的alpha值,直到恢復enable時,alpha會自動回到1。最後我們對加上menu加上Event.TRIGGERED監聽,因為這個事件預設是會bubble的,所以對外面的容器監聽就好。而事件發生時就會告訴我們哪個Button被triggered了。Event.TRIGGERED的發生跟MouseEvent.CLICK一樣,要在Button被按下,又在Button裡面放開時才會觸發。Demo如下:

    一起來玩鳥 Starling Framework(3)Button! - randomclan - [Random]/v@ny
  • 相关阅读:
    操作数据库pymysql
    深度学习-目标检测(Fast R-CNN)
    解释--全连接层输入大小固定
    深度学习-目标检测(IOU)
    深度学习-目标检测(SPPNet)
    深度学习-目标检测(R-CNN)
    机器学习-Whitening(白化)
    Win10 将slim加入PYTHONPYTH
    tensorboard 使用
    卷积神经网络--padding
  • 原文地址:https://www.cnblogs.com/keng333/p/3334370.html
Copyright © 2011-2022 走看看