Starling Button

先看看它的签名：

public function Button(upState:Texture, text:String="", downState:Texture=null)

默认情况下，Button对象中有一个内置的TextField对象来负责文本的显示，且该文本默认摆放在按钮的居中位置。

在下面的代码中，我们用一个嵌入资源作为皮肤来创建了一个简单的按钮：

      package{import flash.display.Bitmap;import starling.display.Button;import starling.display.Sprite;import starling.events.Event;import starling.textures.Texture;public class Game4 extends Sprite{[Embed(source = "../media/textures/button_normal.png")]private static const ButtonTexture:Class;public function Game4(){addEventListener(Event.ADDED_TO_STAGE, onAdded);}private function onAdded (e:Event):void{// create a Bitmap object out of the embedded imagevar buttonSkin:Bitmap = new ButtonTexture();// create a Texture object to feed the Button objectvar texture:Texture = Texture.fromBitmap(buttonSkin);// create a button using this skin as up statevar myButton:Button = new Button(texture, "Play");// createa container for the menu (buttons)var menuContainer:Sprite = new Sprite();// add the button to our containermenuContainer.addChild(myButton);// centers the menumenuContainer.x = stage.stageWidth - menuContainer.width >> 1;menuContainer.y = stage.stageHeight - menuContainer.height >> 1;// show the buttonaddChild(menuContainer);}}}

注意到我们这里再次使用了fromBitmap方法来完成从嵌入资源获取按钮皮肤的工作。

（注：）

                  var buttonSkin:Bitmap = new ButtonTexture();var texture:Texture = Texture.fromBitmap(buttonSkin);var myButton:Button = new Button(texture, "Play");var menuContainer:Sprite = new Sprite();menuContainer.addChild(myButton);

上面的代码写成这样是不是更简洁呢！

                         var button:Button = new Button(Texture.fromBitmap(new texture(),false));addChild(button);

// create a Texture object to feed the Button object
var texture:Texture = Texture.fromBitmap(buttonSkin);
接下来让我们把包含在一个Vector对象中的文本做成一个菜单，只需要使用一个简单的循环即可完成：

      package{import flash.display.Bitmap;import starling.display.Button;import starling.display.Sprite;import starling.events.Event;import starling.textures.Texture;public class Game4 extends Sprite{[Embed(source = "../media/textures/button_normal.png")]private static const ButtonTexture:Class;// sectionsprivate var _sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);public function Game4(){addEventListener(Event.ADDED_TO_STAGE, onAdded);}private function onAdded (e:Event):void{// create a Bitmap object out of the embedded imagevar buttonSkin:Bitmap = new ButtonTexture();// create a Texture object to feed the Button objectvar texture:Texture = Texture.fromBitmap(buttonSkin);// createa container for the menu (buttons)var menuContainer:Sprite = new Sprite();var numSections:uint = _sections.lengthfor (var i:uint = 0; i< 4; i++){// create a button using this skin as up statevar myButton:Button = new Button(texture, _sections[i]);// bold labelsmyButton.fontBold = true;// position the buttonsmyButton.y = myButton.height * i;// add the button to our containermenuContainer.addChild(myButton);}// centers the menu menuContainer.x = stage.stageWidth - menuContainer.width >> 1;menuContainer.y = stage.stageHeight - menuContainer.height >> 1;// show the buttonaddChild(menuContainer);}}}

测试以上代码你会得到一个简单的由多个按钮组成的菜单。

在这个例子中，我们没有用一个SpriteSheet来设置一个按钮的全部状态的皮肤（普通状态、按下状态及鼠标移入状态）。而是通过fromBitmap方法直接向GPU上传了一个Texture对象作为按钮的唯一皮肤。如果你准备为全部按钮都用同一个皮肤的话这么做当然没什么问题。不过一个更加好的习惯是将一个按钮的全部状态素材都放在SpriteSheet中，就像之前我们在创建男孩及屠夫的movieClip例子中做的那样。
现在，我们来看看Button对象提供的全部API：
∗ alphaWhenDisabled : 当按钮处于不可用状态时的透明度
∗ downState : 当按钮被按下时的皮肤纹理
∗ enabled : 此属性决定按钮是否可用、可交互
∗ fontBold : 按钮文本是否为粗体
∗ fontColor : 按钮文本的颜色
∗ fontName : 按钮文本所用字体。可以是一个系统字体也可以是一个已经注册了的位图字体
∗ fontSize : 按钮文本大小
∗ scaleWhenDown : 按钮按下时将被缩放到的值。如果你设置了downState，那么按钮在按下后将不会被缩放
∗ text : 按钮显示的文本
∗ textBounds : 按钮文本所在区域
∗ upState : 当按钮未产生交互时的皮肤纹理与原生Flash相反的一点在于，Starling中的Button类是DisplayObjectContainer类的子类，这意味着你创建的Button按钮外观将不受限于其提供的几个皮肤属性。

你可以像在用其他容器类一样，往其中加任何你想加入的东西，把你的按钮布置成你想要的效果。
注意，一个Button对象将会在你点击它的时候派发一个特殊的事件：Event.TRIGGERED:

// listen to the Event.TRIGGERED event
myButton.addEventListener(Event.TRIGGERED, onTriggered);
private function onTriggered(e:Event):void
{
trace ("I got clicked!");
}

Event.TRIGGERED事件是一个冒泡事件，你可以在事件派发者的父容器中侦听到它：

      package{import flash.display.Bitmap;import starling.display.Button;import starling.display.Sprite;import starling.events.Event;import starling.textures.Texture;public class Game4 extends Sprite{[Embed(source = "../media/textures/button_normal.png")]private static const ButtonTexture:Class;// sectionsprivate var _sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);public function Game4(){addEventListener(Event.ADDED_TO_STAGE, onAdded);}private function onAdded (e:Event):void{// create a Bitmap object out of the embedded imagevar buttonSkin:Bitmap = new ButtonTexture();// create a Texture object to feed the Button objectvar texture:Texture = Texture.fromBitmap(buttonSkin);// createa container for the menu (buttons)var menuContainer:Sprite = new Sprite(); var numSections:uint = _sections.lengthfor (var i:uint = 0; i< 4; i++){// create a button using this skin as up statevar myButton:Button = new Button(texture, _sections[i]);// bold labelsmyButton.fontBold = true;// position the buttonsmyButton.y = myButton.height * i;// add the button to our containermenuContainer.addChild(myButton);}// catch the Event.TRIGGERED eventmenuContainer.addEventListener(Event.TRIGGERED, onTriggered);// centers the menumenuContainer.x = stage.stageWidth - menuContainer.width >> 1;menuContainer.y = stage.stageHeight - menuContainer.height >> 1;// show the buttonaddChild(menuContainer);}private function onTriggered(e:Event):void{// outputs : [object Sprite] [object Button]trace ( e.currentTarget, e.target );// outputs : triggered!trace ("triggered!");}}}

上述代码创建了几个使用自定义皮肤的按钮，接下来让我们一起来创建一个滚动着的背景

      package{import flash.display.Bitmap;import starling.display.Button;import starling.display.Image;import starling.display.Sprite;import starling.events.Event;import starling.textures.Texture;public class Game4 extends Sprite{[Embed(source = "../media/textures/button_normal.png")]private static const ButtonTexture:Class; [Embed(source = "../media/textures/background.jpg")]private static const BackgroundImage:Class;private var backgroundContainer:Sprite;private var background1:Image;private var background2:Image;// sectionsprivate var sections:Vector.<String> = Vector.<String>(["Play", "Options", "Rules", "Sign in"]);public function Game4(){addEventListener(Event.ADDED_TO_STAGE, onAdded);}private function onAdded (e:Event):void{// create a Bitmap object out of the embedded imagevar buttonSkin:Bitmap = new ButtonTexture();// create a Texture object to feed the Button objectvar texture:Texture = Texture.fromBitmap(buttonSkin);// create a Bitmap object out of the embedded imagevar background:Bitmap = new BackgroundImage();// create a Texture object to feed the Image objectvar textureBackground:Texture = Texture.fromBitmap(background);// container for the background texturesbackgroundContainer = new Sprite();// create the images for the backgroundbackground1 = new Image(textureBackground);background2 = new Image(textureBackground);// positions the second partbackground2.x = background1.width;// nest thembackgroundContainer.addChild(background1);backgroundContainer.addChild(background2);// show the backgroundaddChild(backgroundContainer);// create container for the menu (buttons)var menuContainer:Sprite = new Sprite();var numSections:uint = sections.lengthfor (var i:uint = 0; i< 4; i++){// create a button using this skin as up statevar myButton:Button = new Button(texture, sections[i]);// bold labelsmyButton.fontBold = true;// position the buttonsmyButton.y = myButton.height * i; // add the button to our containermenuContainer.addChild(myButton);}// catch the Event.TRIGGERED event// catch the Event.TRIGGERED eventmenuContainer.addEventListener(Event.TRIGGERED, onTriggered);// on each framestage.addEventListener(Event.ENTER_FRAME, onFrame);// centers the menumenuContainer.x = stage.stageWidth - menuContainer.width >> 1;menuContainer.y = stage.stageHeight - menuContainer.height >> 1;// show the buttonaddChild(menuContainer);}private function onTriggered(e:Event):void{// outputs : [object Sprite] [object Button]trace ( e.currentTarget, e.target );// outputs : triggered!trace ("triggered!");}private function onFrame (e:Event):void{// scroll itbackgroundContainer.x -= 10;// resetif ( backgroundContainer.x <= -background1.width )backgroundContainer.x = 0;}}}

运行指挥可以看到，我们的背景在菜单之后不停地滚动。

Starling Button相关推荐

Starling实现的硬皮翻书效果
原文:Starling实现的硬皮翻书效果作者:郭少瑞 ---------------------------------------– 更新(2012-12-31): 在今年的最后一天,这个效果终于 ...
Starling浅尝
来自:http://www.cnblogs.com/tankaixiong/archive/2012/11/28/2792047.html starling 笔记 : 基于Stage3Dg开发出来的一 ...
starling 笔记
starling 笔记 : 基于Stage3Dg开发出来的一个可以使用GPU加速2D应用程序的框架.是一个渲染框架! 特色:直观,轻量,免费. Starling与Sparrow框架很相近. 驱动关系: ...
Starling flash 简单应用
转自: http://www.riadev.com/flex-thread-1929-1-1.html 学习:http://www.adobe.com/cn/devnet/flashplayer/ar ...
Flash AIR和Starling、Feathers的经验积累
1.iOS中加载本地json文件,其键值必须是字符串,如{"tileWidth":"106"} 否则decode时报错(待验证). 2.File.applica ...
feathers button 支持中文（非bitmap字体）
研究了好久才把flash builder 下的 feathers的helloworld搞出来了, 但是有发现按钮上整中文显示不出来,原来,别个用的bitmapfont... 于是乎网上搜索,只找到一篇 ...
Starling Feathers Controls Drawers
说明: The Drawers class provides a container that supports main content in the center with "drawe ...
starling 笔记总结
starling笔记: 基于Stage3Dg开发出来的一个可以使用GPU加速2D应用程序的框架.是一个渲染框架! 特色:直观,轻量,免费. Starling与Sparrow框架很相近. 驱动关系: G ...
（新手入门）AS3基于starling引擎移动开发之Starling入门
Starling入门上一期介绍了基于starling的AS3在移动开发上的大致情况,这一期我向各位新手朋友介绍starling的使用,建立第一个可以运行的starling程序,让大家初步了解star ...

Starling Button

Starling Button相关推荐

最新文章

热门文章