使用Button组件

2022-02-09 08:27:46

Button组件是可调整大小的矩形按钮，用户可以使用鼠标或空格键按下它以便在应用程序中发起一个动作。 你可以在Button实例中添加自定义图标。 你也可以将Button实例的行为从按压方式改变为拨动方式。 拨动按钮在点击时处于按下状态并且在再次点击之后返回弹起状态。按钮是许多表单和web应用程序的基本组成部分。 你可以在你希望用户启动事件的任意位置使用按钮。 例如，大多数表单具有一个Submit按钮。 你也可以在演讲胶片中添加Previous和 Next按钮。下面将描述使用该组件的最流行和有用的方法。

注：下面的范例均要求你的文档库包含一个Button组件。

使用ActionScript创建Button 组件的实例

为了能够使用 ActionScript动态地创建Button类的一个新实例，首先你需要从 Components面板中将该组件的一个拷贝拖拽至你当前的 Flash 文档库中。 然后，你需要使用import语句导入fl.controls.Button类。 这一步骤是必需的，因为组件文件不是以隐含方式导入的，就像flash.* 包一样。 一旦 Button类导入你的当前文档，你可以使用new运算符创建一个新的Button 实例。 最后，使用addChild() 方法可以将新的实例添加至显示列表中。

注：如需看到哪个文件是以隐含方式导入的， 参见Adobe Flash CS3 Configuration\ActionScript 3.0 文件夹中的implicitImports.xml XML文件。

范例

下面的范例动态地创建Button组件的一个新的实例并且将其添加至显示列表中。 你必须首先从Component的面板中将该组件的一个拷贝拖拽至文档库中。

import fl.controls.Button; var myButton:Button = new Button(); addChild(myButton);

结果

你需要为本范例下载下列源文件：

设置Button 组件的标签

通过设置Button组件实例的 label属性可以改变在该组件实例上显示的文本。 该标签只能接受纯文本 (不能接受HTML格式文本)，但可以通过使用 setStyle() 方法创建一种文本格式并且将其应用于该按钮来对文本进行格式化。 如需了解关于如何处理按钮文本格式化的更多信息，参见设置文本格式。

如果你正在使用 Button实例的图标，则你可以控制文本标签与图标的相对摆放位置，通过使用ButtonLabelPlacement类的一个常量来设置 labelPlacement属性可以实现这一任务。 如需了解关于如何处理按钮图标的更多信息，参见设置图标。

注：对一个Button组件设置label属性将会下发一个labelChange事件(由fl.events.ComponentEvent.LABEL_CHANGE 常量表示)。

范例

下面的范例创建一个新的Button实例并且将按钮的标签设置为 "Click me"。

import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "Click me"; addChild(myButton);

结果

你需要为本范例下载下列源文件：

调整按钮的尺寸和位置

有若干种你可以用于在Stage中调整实例大小和改变实例位置的方法和属性。 使用下列两种技巧之一即可实现对组件实例进行大小调整： 1) 设置 width和 height 属性，或 2) 调用 setSize()方法(继承自fl.core.UIComponent)。setSize() 方法带有两个参数(width和height) 并且能够对组件的大小进行相应的调整。 使用上述两种技巧之一将产生一个下发的resize事件 (由fl.events.ComponentEvent.RESIZE常量表示) 。 通过监听该事件，你可以侦听到什么时候组件实例已经进行大小调整以及必要时给出响应。使用setSize()方法替代width和height 属性的一个优点是 resize 事件只下发一次而不是两次 (一次用于width 属性，另一次用于height属性)。

除了使用x和y属性设置组件的x-轴和y-轴之外，你也可以使用 move()方法 (它类似于 setSize()方法，由UIComponent类继承而来) 在Stage中调整组件的位置。 设置组件的x属性或y属性、或调用实例的move()方法均会引起组件下发一个move事件(由 fl.events.ComponentEvent.MOVE 常量表示)。

范例

下面的范例创建一个Button实例，并且使用 setSize()方法对其进行大小调整以及使用move()方法对其进行位置调整。

import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "Click me"; myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton);

结果

你需要为本范例下载下列源文件：

范例

下面的范例创建一个新的Button实例并且侦听其下发的resize 和move 事件。

// Import the required component classes. import fl.controls.Button; import fl.events.ComponentEvent; // Create a new TextField object, and add it to the display list. var myTextField:TextField = new TextField(); myTextField.autoSize = TextFieldAutoSize.LEFT; myTextField.multiline = true; myTextField.text = ""; myTextField.x = 140; myTextField.y = 10; addChild(myTextField); /* Create a new Button component instance, add listeners for the move and resize events, and add it to the display list. */ var myButton:Button = new Button(); myButton.label = "Click me"; myButton.addEventListener(ComponentEvent.RESIZE, resizeHandler); myButton.addEventListener(ComponentEvent.MOVE, moveHandler); myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton); /* Handler function for the Button component instance. This function appends text to the text field after the button was resized. */ function resizeHandler(evt:ComponentEvent):void { var btn:Button = evt.currentTarget as Button; myTextField.appendText("component was resized. w:" + btn.width + ", h:" + btn.height + "\n"); } /* Handler function for the Button component instance. This function appends text to the text field after the button was moved. */ function moveHandler(evt:ComponentEvent):void { var btn:Button = evt.currentTarget as Button; myTextField.appendText("component was moved. x:" + btn.x + ", y:" + btn.y + "\n"); }

结果

你需要为本范例下载下列源文件：

检测按钮何时按下

通过侦听下发的click事件 (使用flash.events.MouseEvent.CLICK 常量) 或 change事件 (使用flash.events.Event.CHANGE常量) ，你可以检测到一个Button实例何时按下。 通过利用ActionScript 3.0，你可以使用addEventListener() 方法侦听各种事件。 关于ActionScript 3.0的事件处理的更多信息，请参阅Event handling Quick Start 文章。

注：ActionScript 2.0 能够提供三种事件处理模型。 ActionScript 3.0可以通过使用一种简单事件处理模型简化相应的处理过程。 另外，ActionScript 2.0不使用常量作为事件名称，但ActionScript 3.0使用常量作为事件名称。

下面范例为一个名称为myButton的Button实例的click事件创建一个侦听器。

// Requires a Button component instance on the Stage with an instance name of "myButton". myButton.addEventListener(MouseEvent.CLICK, clickHandler); function clickHandler(eventObj:MouseEvent):void { trace("clicked"); }

关于处理组件事件的更多信息，请参阅Flash CS3 用户界面组件入门 （Getting started with Flash CS3 user interface components ）的 Handling events部分：快速入门文章。

如需了解关于Button组件事件的更多信息，参见创建自动重复按钮和创建拨动按钮。

范例

下面范例使用一个事件侦听器来检测何时按钮的click事件已经下发以及相应地更新标签。

// Import the required component classes. import fl.controls.Button; // Create a new Button component instance, and add it to the display list. var myButton:Button = new Button(); myButton.label = "Click me"; myButton.move(10, 10); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); /* Handler function for the Button component instance. This function updates the button's label property when the button is clicked. */ function clickHandler(event:MouseEvent):void { myButton.label = "Ouch!"; }

前面的范例能够侦听该click事件。 在本文的后面章节中，你还将了解到如何才能侦听buttonDown和change事件。

结果

你需要为本范例下载下列源文件：

范例

如果你希望在鼠标落在实例上时按钮能够显示一个手型光标，你需要将按钮实例的useHandCursor 属性设置为true：

import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "useHandCursor = true"; myButton.width = 160; myButton.move(10, 10); myButton.useHandCursor = true; addChild(myButton);

结果

你需要为本范例下载下列源文件：

开启和禁止Button实例

在许多情形下，你可能希望在你的应用程序中禁用按钮。 例如，你可能希望防止用户两次敲击Submit按钮，或你可能希望禁用Submit按钮直到用户首先选择了复选框。

注：当一个Button实例被禁用时，你可以指定使用替代的图标、皮肤和文本格式。 如需了解更多信息，参见ActionScript 3.0 Reference for the Adobe Flash Platform中的继承的disabledIcon、isabledSkin、disabledTextFormat、selectedDisabledIcon和selectedDisabledSkin式样。

范例

下面范例创建两个Button实例。 第一个实例在启动之后将允许用户点击按钮。 第二个实例将其enabled 属性设置为false，这将能够防止用户与组件进行互动以及下发其click事件：

// Import the required component classes. import fl.controls.Button; // Create a new Button component instance and add it to the display list. var enabledButton:Button = new Button(); enabledButton.label = "enabled = true"; enabledButton.move(10, 10); enabledButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(enabledButton); /* Create a new Button component instance, set the enabled property to false, and add it to the display list. */ var disabledButton:Button = new Button(); disabledButton.enabled = false; disabledButton.label = "enabled = false"; disabledButton.move(120, 10); disabledButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(disabledButton); /* Handler function for the enabledButton and disabledButton button instances. This function updates the target button's label property when the button is clicked. */ function clickHandler(event:MouseEvent):void { var btn:Button = event.currentTarget as Button; btn.label = "Ouch!"; }

结果

你需要为本范例下载下列源文件：

设置按钮式样

ActionScript 3.0 User Interface组件也具有一个支持skinning和styling组件的全新方法。 现在可以使用setStyle() 方法处理Button的式样设置。 你可以通过使用 getStyleDefiniton()方法获得每个Button组件的本机和继承式样的列表。 通过设置各种Button式样，你可以完成下列任务：

  • 设置按钮使用的图标
  • 为按钮的标签指定一种文本格式
  • 嵌入字体
  • 通过改变Button皮肤来改变其外观
  • 为自动重复按钮指定时间间隔以便下发buttonDown事件。
当处理式样时，你将经常使用下列方法：
  • setStyle() – 在 Button实例中设置一个式样属性。
  • getStyle() – 检索一个style属性，该属性是在按钮的式样查找链中设置的。
  • clearStyle() – 从 Button实例中删除一个式样属性。
  • getStyleDefinition() – 为当前按钮检索默认的式样图。

范例

下面的范例使用getStyleDefinition()方法来显示Button组件的式样名称和默认值的列表。 在数据栅格中点击皮肤格式能够显示选中皮肤的预览。 该范例要求文档库中包含Button、DataGrid和 UILoader组件。

// Import the required component classes. import fl.containers.UILoader; import fl.controls.Button; import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider; // Create some variables. var styleArray:Array = new Array(); var styleObject:Object = Button.getStyleDefinition(); var styleName:String; /* Convert the styles returned from the getStyleDefinition() method into an array of objects so it can be converted to a data provider. */ for (styleName in styleObject) { styleArray.push({name:styleName, value:String(styleObject[styleName]), data:styleObject[styleName]}); } // Sort the items in the styleArray array alphabetically by name. styleArray.sortOn("name", Array.CASEINSENSITIVE); // Create a new DataGridColumn object. var nameCol:DataGridColumn = new DataGridColumn("name"); nameCol.headerText = "Style name:"; // Create a new DataGridColumn object. var valueCol:DataGridColumn = new DataGridColumn("value"); valueCol.headerText = "Default value:"; /* Create a new DataGrid component instance, add the two DataGridGolumn objects created earlier, set the data provider to the styleArray array, and add to the display list. */ var styleGrid:DataGrid = new DataGrid(); styleGrid.addColumn(nameCol); styleGrid.addColumn(valueCol); styleGrid.dataProvider = new DataProvider(styleArray); styleGrid.setSize(530, 300); styleGrid.move(10, 10); styleGrid.addEventListener(Event.CHANGE, changeHandler); addChild(styleGrid); /* Create a UILoader component instance, and add it to the display list. This UILoader will be used to display the selected style, as long as it is a visual asset. */ var previewLoader:UILoader = new UILoader(); previewLoader.setSize(530, 70); previewLoader.move(10, 320); addChild(previewLoader); /* Handler function for the UILoader component instance. This function gets the currently selected item in the data grid and attempts to set the UILoader instance's source property to the selected item's data property. If the item cannot be displayed in a UILoader, the UILoader instance's source property is set to null which causes any previously displayed content to be cleared. */ function changeHandler(event:Event):void { var item:Object = DataGrid(event.currentTarget).selectedItem; try { previewLoader.source = getDefinitionByName(item.data); } catch (error:*) { previewLoader.source = null; } }

结果

你需要为本范例下载下列源文件：

关于使用setStyle()方法设置式样的范例，参见下列章节：

设置文本格式

当定制一个按钮时，你将很可能希望从改变其标签的文本格式入手。 改变textFormat式样允许你指定一个新的TextFormat对象 (flash.text.TextFormat) 以便在显示该标签时使用。 这使得你可以修改标签的对齐方式（alignment）、颜色（color）、字体粗细（font weight）（黑体）、字体强调（font emphasis）（斜体）、字体风格（font face）和 字体大小（font size）以及其它属性。

注： 应用程序并不支持TextFormat类的所有属性。 例如，为 TextFormat对象设置url属性对 Button实例不起作用。

当处理文本格式时，你将经常使用下列属性和式样：

  • textFormat式样 – 用于显示按钮标签的TextFormat 对象，通过设置TextFormat 属性，例如字体、颜色和大小等，可以实现这一任务。
  • disabledTextFormat式样 – 当按钮被禁用时，用于显示按钮标签的TextFormat 对象。
  • embedFonts式样 – 表示嵌入字体外形是否用于显示文本字段。 如需了解更多信息，参见嵌入字体部分。
  • textField 属性 – 一个按钮内部文本字段的引用。

范例

下面的范例创建一个新的TextFormat对象并且将按钮的文本设置为红色粗体字体。

// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used for the button's label. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.bold = true; myTextFormat.color = 0xFF0000; /* Create a new Button component instance and set the textFormat style to the TextFormat object created earlier. */ var myButton:Button = new Button(); myButton.label = "Click me"; myButton.move(10, 10); myButton.setStyle("textFormat", myTextFormat); addChild(myButton);

结果

你需要为本范例下载下列源文件：

你也可以为禁用的Button实例设置文本格式。

范例

下面范例演示如何为禁用的Button实例设置文本格式：

// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used when the button is enabled. var enabledTextFormat:TextFormat = new TextFormat(); enabledTextFormat.bold = true; enabledTextFormat.font = "Comic Sans MS"; enabledTextFormat.size = 14; // Create a new TextFormat object which will be used when the button is disabled. var disabledTextFormat:TextFormat = new TextFormat(); disabledTextFormat.color = 0xFF0000; disabledTextFormat.font = "Comic Sans MS"; disabledTextFormat.italic = true; disabledTextFormat.size = 12; /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var enabledButton:Button = new Button(); enabledButton.label = "enabled = true"; enabledButton.setStyle("textFormat", enabledTextFormat); enabledButton.setSize(140, 40); enabledButton.move(10, 10); addChild(enabledButton); /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var disabledButton:Button = new Button(); disabledButton.enabled = false; disabledButton.label = "enabled = false"; disabledButton.setStyle("disabledTextFormat", disabledTextFormat); disabledButton.setSize(140, 40); disabledButton.move(160, 10); addChild(disabledButton);

结果

你需要为本范例下载下列源文件：

你可以通过textField属性访问Button实例的内部textField对象。

范例

下面范例演示如何使用textField属性创建具有多行标签的按钮，以便访问Button实例的内部textField对象：

// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object and set the align property to "center". var myTextFormat:TextFormat = new TextFormat(); myTextFormat.align = TextFormatAlign.CENTER; /* Create a new Button component instance, set the textFormat style to the TextFormat object created earlier, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "The quick brown fox jumped over the lazy dog"; myButton.textField.wordWrap = true; myButton.setStyle("textFormat", myTextFormat); myButton.setSize(120, 60); myButton.move(10, 10); addChild(myButton);

结果

你需要为本范例下载下列源文件：

嵌入字体

Flash文档的嵌入字体允许你在不改变字体的情形下旋转文本字段 (例如按钮标签)。 此外，它还允许你应用高级的消除锯齿技术，该技术能够增加小尺寸（例如10点或10点以下）字体的可读性。 使用嵌入字体还允许你使用你的Flash文档中的字体，而用户可能没有在他们的计算机中安装这些字体。

注：使用嵌入字体的最大不足之处是它增加你的应用程序的文件大小或下载文件大小。

使用具有Button实例的嵌入字体是一个多步骤过程：

  1. 通过在Library面板的弹出菜单（Library面板的右上角）中选中New Font，在Flash文档库中创建一个新的字体符号。
  2. 在 Font Symbol Properties 对话框中，选中期望的字体风格（font face）和属性。
  3. 为 Font 符号设置链接信息。
  4. 使用 ActionScript创建一个新的Font 符号实例。
  5. 创建一个新的 TextFormat 对象并且指定嵌入字体风格的名称。
  6. 将Button实例的embedFonts 式样设置为true。
  7. 将Button实例的textFormat式样设置为在步骤5创建的TextFormat对象。

如需了解关于嵌入字体的更多信息，参见嵌入字体快速入门文章。

提示：如果你正在使用具有Button实例的嵌入字体，你可以启动高级消除锯齿功能以便改善较小尺寸字体的视觉质量。

范例

下面范例创建两个Button实例，为其中一个实例开启嵌入字体，然后对每个按钮进行90度旋转操作。 该范例需要在你的Flash文档库中提供一种具有 MyFont的链接类的字体。

// Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); /* Create a new TextFormat object and set the font name to the Font object's fontName property. */ var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to true, set the textFormat style to the previously created TextFormat object, and add the button to the display list. */ var embedTrue:Button = new Button(); embedTrue.rotation = 90; embedTrue.width = 120; embedTrue.label = "embedFonts = true"; embedTrue.move(30, 10); embedTrue.setStyle("embedFonts", true); embedTrue.setStyle("textFormat", myTextFormat); addChild(embedTrue); /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to false (default), set the textFormat style to the previously created TextFormat object, and add the button to the display list. Since the font is not embedded for this button instance, the button's label will not display any text after the button is rotated. */ var embedFalse:Button = new Button(); embedFalse.rotation = 90; embedFalse.width = 120; embedFalse.label = "embedFonts = false"; embedFalse.move(60, 10); embedFalse.setStyle("embedFonts", false); embedFalse.setStyle("textFormat", myTextFormat); addChild(embedFalse);

结果

你需要为本范例下载下列源文件：

范例

下面范例演示如何使用textField 属性针对Button实例的嵌入文本字段应用高级消除锯齿功能。该范例需要在你的Flash文档库中提供一种具有MyFont的链接类的字体。

// Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); // Create a new TextFormat object and set the font name and font size. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; myTextFormat.size = 8; /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "normal", and add the button to the display list. */ var normalAliasButton:Button = new Button(); normalAliasButton.label = "AntiAliasType.NORMAL"; normalAliasButton.setStyle("embedFonts", true); normalAliasButton.setStyle("textFormat", myTextFormat); normalAliasButton.textField.antiAliasType = AntiAliasType.NORMAL; normalAliasButton.width = 140; normalAliasButton.move(10, 10); addChild(normalAliasButton); /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "advanced", and add the button to the display list. */ var advancedAliasButton:Button = new Button(); advancedAliasButton.label = "AntiAliasType.ADVANCED"; advancedAliasButton.setStyle("embedFonts", true); advancedAliasButton.setStyle("textFormat", myTextFormat); advancedAliasButton.textField.antiAliasType = AntiAliasType.ADVANCED; advancedAliasButton.width = 140; advancedAliasButton.move(160, 10); addChild(advancedAliasButton);

结果

你需要为本范例下载下列源文件：

创建具有emphasized属性的按钮

在创建应用程序过程中，你可能希望强调某个按钮。 例如，如果你有一个带有一个Submit 和一个Cancel 按钮的简单反馈表格，你可能希望在Submit按钮周围添加边框以便用户能够更易于看见它。 使用Button组件可以方便地为Button实例添加强调效果，因为你只需将emphasized 属性设置为true。当处理具有强调属性的按钮时，你将经常使用下列属性和式样：

  • emphasized 属性 – 一个布尔（Boolean）值，表示当按钮处于弹起状态时是否在Button组件周围添加边框。
  • emphasizedPadding式样 – 填料，用像素表示，用于定义Button边界的双线之间。
  • emphasizedSkin式样 - 皮肤，当按钮添加强调效果时使用。

范例

下面范例创建一个具有强调效果的按钮。

// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the emphasized property to true, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "emphasized = true"; myButton.emphasized = true; myButton.width = 120; myButton.move(10, 10); addChild(myButton);

结果

你需要为本范例下载下列源文件：

范例

下面范例使用Slider组件的一个实例来控制Button实例的emphasizedPadding式样的值。 该范例要求文档库中包含Button组件和Slider组件。

// Import the required component classes. import fl.controls.Button; import fl.controls.Slider; import fl.events.SliderEvent; /* Create a new Button component instance, set the emphasized property to true, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "emphasized = true"; myButton.emphasized = true; myButton.width = 120; myButton.move(10, 10); addChild(myButton); /* Create a new Slider component instance, set the liveDragging property to true, and add the slider to the display list. */ var mySlider:Slider = new Slider(); mySlider.liveDragging = true; mySlider.minimum = 0; mySlider.maximum = 10; mySlider.value = 2; mySlider.tickInterval = 1; mySlider.width = 120; mySlider.move(10, 65); mySlider.addEventListener(SliderEvent.CHANGE, changeHandler); addChild(mySlider); /* Handler function for the Slider component instance. This function sets the emphasizedPadding style to the value of the slider. */ function changeHandler(event:SliderEvent):void { myButton.setStyle("emphasizedPadding", event.value); }

提示：具有强调效果的边界是从 Button 实例的外围边界估算的。 如果 Button实例放置于 x 和y 的坐标均为 20像素的位置，并且其emphasizedPadding式样设置为5，则具有强调属性的边界的左上角将位于 15像素位置。

结果

你需要为本范例下载下列源文件：

设置图标

当使用Button组件时，你可以有选择地指定按钮标签旁边的图标。 这使得你能够方便地为一个Submit按钮添加一个检查标志图标以及为一个Cancel按钮添加一个红色X，或你能够将一个产品徽标放置在其名称的旁边。

当处理图标时，你将经常使用下列式样：

  • icon – 类的名称，当没有选中拨动按钮并且鼠标没有落在按钮上时用作图标。
  • disabledIcon – 类的名称，当按钮禁用时用作图标。
  • downIcon – 类的名称，当没有选中拨动按钮并且鼠标处于按下状态时用作图标。
  • overIcon – 类的名称，当没有选中按钮并且鼠标落在组件之上时用作图标。
  • upIcon – 类的名称，当没有选中拨动按钮并且鼠标没有落在按钮上时用作图标。
  • selectedDisabledIcon – 类的名称，当按钮被选中并且禁用时用作图标。
  • selectedDownIcon – 类的名称，当选中按钮并且鼠标按钮处于按下状态时用作图标。
  • selectedOverIcon – 类的名称，当选中按钮并且鼠标落在组件之上时用作图标。
  • selectedUpIcon – 类的名称，当选中按钮并且鼠标按钮处于弹起状态时用作图标。

如需了解关于拨动按钮的更多信息，参见 创建拨动按钮。

注：设置 Button 实例的icon式样能够为每个按钮的状态 (up, down, over, disabled等) 设置默认图标。

范例

下面范例演示如何设置一个Button实例的icon式样。 注意，范例中只设置了icon式样，并且该图标可以自动传导至其它图标式样。

// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the icon style to the BulletCheck linkage in the library, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "Confirm"; myButton.move(10, 10); myButton.setStyle("icon", BulletCheck); addChild(myButton);

结果

你需要为本范例下载下列源文件：

你可以使用 labelPosition 属性确定按钮标签与图标的相对位置。

范例

下面范例演示labelPosition 属性的4个可能值，使用的常量源自ButtonLabelPosition类 (fl.controls.ButtonLabelPosition)。 该范例需要在你的Flash文档库中提供一个具有AdobeLogo的链接类的符号。

// Import the required component classes. import fl.controls.Button; import fl.controls.ButtonLabelPlacement; /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "left", and add the button to the display list. */ var buttonLeft:Button = new Button(); buttonLeft.label = "ButtonLabelPlacement.LEFT"; buttonLeft.labelPlacement = ButtonLabelPlacement.LEFT; buttonLeft.setStyle("icon", AdobeLogo); buttonLeft.setSize(200, 60); buttonLeft.move(10, 10); addChild(buttonLeft); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "right", and add the button to the display list. */ var buttonRight:Button = new Button(); buttonRight.label = "ButtonLabelPlacement.RIGHT"; buttonRight.labelPlacement = ButtonLabelPlacement.RIGHT; buttonRight.setStyle("icon", AdobeLogo); buttonRight.setSize(200, 60); buttonRight.move(10, 80); addChild(buttonRight); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "top", and add the button to the display list. */ var buttonTop:Button = new Button(); buttonTop.label = "ButtonLabelPlacement.TOP"; buttonTop.labelPlacement = ButtonLabelPlacement.TOP; buttonTop.setStyle("icon", AdobeLogo); buttonTop.setSize(200, 60); buttonTop.move(10, 150); addChild(buttonTop); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "bottom", and add the button to the display list. */ var buttonBottom:Button = new Button(); buttonBottom.label = "ButtonLabelPlacement.BOTTOM"; buttonBottom.labelPlacement = ButtonLabelPlacement.BOTTOM; buttonBottom.setStyle("icon", AdobeLogo); buttonBottom.setSize(200, 60); buttonBottom.move(10, 220); addChild(buttonBottom);

结果

你需要为本范例下载下列源文件：

通过设置textPadding 属性，你可以在按钮图标和其标签之间指定留出的空间大小。

范例

下面范例使用Slider组件来控制Button实例的图标和标签之间文本填料的数量。 该范例需要在你的文档库中提供一个具有AdobeLogo的链接类的符号以及一个Button和Slider组件。

// Import the required component classes. import fl.controls.Button; import fl.controls.Slider; import fl.events.SliderEvent; /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the textPadding style to 5 pixels, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "textPadding: 5"; myButton.setStyle("icon", AdobeLogo); myButton.setStyle("textPadding", 5); myButton.setSize(140, 40); myButton.move(10, 10); addChild(myButton); /* Create a new Slider component instance, set the liveDragging property to true, and add the slider to the display list. This slider will be used to control the amount of text padding between the button instance's icon and label text. */ var mySlider:Slider = new Slider(); mySlider.minimum = 0; mySlider.maximum = 15; mySlider.value = 5; mySlider.liveDragging = true; mySlider.tickInterval = 1; mySlider.width = myButton.width; mySlider.move(10, 60); mySlider.addEventListener(SliderEvent.CHANGE, changeHandler); addChild(mySlider); /* Handler function for the Slider component instance. This function sets the button instance's textPadding style based on the current value of the slider. */ function changeHandler(event:SliderEvent):void { myButton.setStyle("textPadding", event.value); myButton.label = "textPadding: " + event.value; }

结果

你需要为本范例下载下列源文件：

通过设置一个或更多Button的图标式样，你可以为任何Button状态指定不同的图标。

范例

下面范例为一个Button实例设置一个icon式样：

// Import the required component classes. import fl.controls.Button; import fl.controls.CheckBox; /* Create a new Button component instance, set the various icon styles, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "icons"; myButton.enabled = true; myButton.toggle = true; myButton.setStyle("upIcon", BulletCheck); myButton.setStyle("overIcon", BulletWarning); myButton.setStyle("downIcon", BulletCritical); myButton.setStyle("disabledIcon", IconCheck); myButton.setStyle("selectedUpIcon", BulletCheckSelected); myButton.setStyle("selectedOverIcon", BulletWarningSelected); myButton.setStyle("selectedDownIcon", BulletCriticalSelected); myButton.setStyle("selectedDisabledIcon", IconCheckSelected); myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton); /* Create a new CheckBox component instance, and add it to the display list. This button will control whether or not the button instance is enabled. */ var enabledCheckBox:CheckBox = new CheckBox(); enabledCheckBox.label = "enabled"; enabledCheckBox.selected = myButton.enabled; enabledCheckBox.move(10, 60); enabledCheckBox.addEventListener(Event.CHANGE, enabledChangeHandler); addChild(enabledCheckBox); /* Create a new Button component instance, and add it to the display list. This button will control whether or not the button instance is toggled. */ var toggleCheckBox:CheckBox = new CheckBox(); toggleCheckBox.label = "toggle"; toggleCheckBox.selected = myButton.toggle; toggleCheckBox.move(10, 80); toggleCheckBox.addEventListener(Event.CHANGE, toggleChangeHandler); addChild(toggleCheckBox); /* Handler function for the enabled check box. This function gets called when the value of the enabledCheckBox is changed, and sets the button's enabled property based on whether the enabledCheckBox instance is currently selected. */ function enabledChangeHandler(event:Event):void { myButton.enabled = enabledCheckBox.selected; } /* Handler function for the toggle check box. This function gets called when the value of the toggleCheckBox is changed, and sets the button's toggle property based on whether the toggleCheckBox instance is currently selected. */ function toggleChangeHandler(event:Event):void { myButton.toggle = toggleCheckBox.selected; }

结果

你需要为本范例下载下列源文件：

你可以从一个远端位置下载图像然后将其用于按钮图标。

范例

下面范例演示如何使用一个Loader 实例和一个UILoader组件实例从一个按钮图标下载一个远端图像：

// Import the required component classes. import fl.controls.Button; import fl.containers.UILoader; // Create a new Loader instance, and load an external PNG image. var logo:Loader = new Loader(); logo.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler1); logo.load(new URLRequest("http://www.helpexamples.com/flash/images/logo.png")); // Create a new UILoader component instance and load an external PNG image. var logo2:UILoader = new UILoader(); logo2.scaleContent = false; logo2.addEventListener(Event.COMPLETE, completeHandler2); logo2.load(new URLRequest("http://www.helpexamples.com/flash/images/logo.png")); // Create a new Button component instance, and add it to the display list. var myButton:Button = new Button(); myButton.label = "Loader"; myButton.move(10, 10); myButton.setSize(140, 100); addChild(myButton); // Create a new Button component instance, and add it to the display list. var secondButton:Button = new Button(); secondButton.label = "UILoader"; secondButton.move(160, 10); secondButton.setSize(140, 100) addChild(secondButton); /* Handler function for the Loader instance. This function sets the icon style for the myButton button instance, and updates the button's display using the validateNow() method. */ function completeHandler1(event:Event):void { myButton.setStyle("icon", logo); myButton.validateNow(); } /* Handler function for the UILoader component instance. This function sets the icon style on the secondButton button instance, and updates the UILoader and Button components display using the validateNow() method. */ function completeHandler2(event:Event):void { secondButton.setStyle("icon", logo2); logo2.validateNow(); secondButton.validateNow(); }

结果

你需要为本范例下载下列源文件：

创建自动重复按钮

当利用Flash创建应用程序或游戏时，你可能常常希望一个按钮连续不断地下发事件，只要用户一直按下Button实例。 例如，如果你希望创建一个自定义数字步进电动机，则你将会希望数字一直增加或减少，只要用户按下箭头键不动。 类似地，如果你希望创建一款游戏，则你可能希望游戏角色一直奔跑，只要用户不断点击按钮。 Button 组件具有一个 autoRepeat 属性 (继承自 fl.controls.BaseButton 类) ，它能够在用户将鼠标按钮在组件上按下保持不动时，控制buttonDown事件 (由 fl.events.ComponentEvent.BUTTON_DOWN常量表示) 的下发次数超过一次。

通过使用 repeatDelay 和repeatInterval 式样 (继承自 fl.controls.LabelButton 类)，你可以控制初始buttonDown 事件之前的延时以及在按钮处于按下状态时事件下发的频率。 repeatDelay 式样能够确定在buttonDown 事件首次被下发之后及在buttonDown事件第二次发送之前的等待 ms数量(默认值为 500 ms)。repeatInterval式样能够确定在由repeatDelay式样指定的延时之后下发的 buttonDown 事件之间的时间间隔，单位为ms (默认值为 35ms)。 例如，如果你将repeatDelay 式样设置为 2000，将repeatInterval 式样设置为500，则第一个 buttonDown 事件将在用户按下按钮之后的 2 秒 (2000 ms) 之后下发，并且只要用户一直按下按钮，则每隔500 ms 下发一次 buttonDown 事件。

范例

下面的范例创建一个Button实例，将其autoRepeat属性设置为true，并且为buttonDown和click事件添加事件侦听器。

// Import the required component classes. import fl.controls.Button; import fl.controls.TextArea; import fl.events.ComponentEvent; var init:Boolean = false; /* Create a new Button component instance, set its autoRepeat property to true, and add it to the display list. */ var myButton:Button = new Button(); myButton.autoRepeat = true; myButton.label = "autoRepeat = true"; myButton.width = 120; myButton.move(10, 10); myButton.addEventListener(ComponentEvent.BUTTON_DOWN, buttonDownHandler); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); // Create a new TextArea component instance, and add it to the display list. var debugTextArea:TextArea = new TextArea(); debugTextArea.setSize(200, 100); debugTextArea.move(10, 40); addChild(debugTextArea); /* Handler function for the Button component instance. This function gets called whenever the button instance dispatches the buttonDown event. This function checks the value of the init variable, and if true clears any existing text from the text area, next a string is appended to the debugTextArea instance, and scrolls the text area to the last line. */ function buttonDownHandler(event:ComponentEvent):void { if (init) { debugTextArea.text = ""; init = false; } debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; } /* Handler function for the Button component instance. This function gets called whenever the button instance dispatches the click event. This function appends a string to the debugTextArea instance, and scrolls the text area to the last line. Finally, the init function is reset to true. */ function clickHandler(event:MouseEvent):void { debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; init = true; }

结果

你需要为本范例下载下列源文件：

创建拨动按钮

拨动按钮是一种具有两种状态-选中和弃选的按钮，它的行为与 CheckBox组件相似。 这种按钮允许你创建具有两种不同状态按钮的应用程序。 如果你具有带有若干栏的数据栅格并且希望通过一种简单方式允许用户在每个栏之间切换，则这一功能非常有用。

当处理具有切换属性的按钮时，你将经常使用下列属性和式样：

  • Toggle属性 – 布尔（Boolean）值，表示一个按钮是否可以切换。
  • selected 属性 – 布尔（Boolean）值，表示一个拨动按钮是否可以在开或关的位置切换。
  • selectedUpIcon式样 – 类的名称，当选中按钮并且鼠标按钮处于弹起状态时用作图标。
  • selectedOverIcon式样 – 类的名称，当选中按钮并且鼠标落在组件之上时用作图标。
  • selectedDownIcon式样 – 类的名称，当选中按钮并且鼠标按钮处于按下状态时用作图标。
  • selectedDisabledIcon式样 – 类的名称，当按钮被选中并且禁用时用作图标。
  • selectedUpSkin式样 – 类的名称，当选中拨动按钮并且鼠标没有落在组件之上时用作背景和边界的皮肤。
  • selectedOverSkin式样 – 类的名称，当选中拨动按钮并且鼠标落在组件之上时用作背景和边界的皮肤。
  • selectedDownSkin 式样 – 类的名称，当选中拨动按钮并且鼠标按钮处于按下状态时用作背景和边界的皮肤。
  • selectedDisabledSkin式样 – 类的名称，当选中和禁用拨动按钮时用作背景和边界的皮肤。

范例

下面的范例创建一个Button实例，将其toggle属性设置为true，并且为change和click事件添加事件侦听器。

// Import the required component classes. import fl.controls.Button; import fl.controls.TextArea; import fl.events.ComponentEvent; /* Create a new Button component instance, set the toggle property to true, and add it to the display list. */ var myButton:Button = new Button(); myButton.toggle = true; myButton.label = "toggle = true, selected = " + myButton.selected; myButton.width = 200; myButton.move(10, 10); myButton.addEventListener(Event.CHANGE, changeHandler); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); // Create a TextArea component instance, and add it to the display list. var debugTextArea:TextArea = new TextArea(); debugTextArea.setSize(200, 100); debugTextArea.move(10, 40); addChild(debugTextArea); /* Handler function for the Button component instance. This function sets the button's label to the value of the button's selected property, and updates the text area instance with the type of event that was dispatched. */ function changeHandler(event:Event):void { myButton.label = "toggle = true, selected = " + myButton.selected; debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; } /* Handler function for the Button component instance. This function sets the button's label to the value of the button's selected property, and updates the text area instance with the type of event that was dispatched. */ function clickHandler(event:MouseEvent):void { myButton.label = "toggle = true, selected = " + myButton.selected; debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; }

结果

你需要为本范例下载下列源文件：

范例

下面范例创建两个具有切换属性的按钮：flashButton和 flexButton，并且根据当前按钮是否被选中设置 Button实例的 emphasized属性：

// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the button's toggle, selected, and emphasized properties, and add it to the display list. */ var flashButton:Button = new Button(); flashButton.label = "Flash"; flashButton.toggle = true; flashButton.selected = true; flashButton.emphasized = flashButton.selected; flashButton.move(10, 10); flashButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(flashButton); /* Create a new Button component instance, set the button's toggle, selected, and emphasized properties, and add it to the display list. */ var flexButton:Button = new Button(); flexButton.label = "Flex"; flexButton.toggle = true; flexButton.selected = false; flexButton.emphasized = flexButton.selected; flexButton.move(120, 10); flexButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(flexButton); /* Handler function for the flashButton and flexButton instances. This function sets the emphasized properties for the target button based on the value of the target button's selected property. */ function clickHandler(event:MouseEvent):void { var btn:Button = event.currentTarget as Button; btn.emphasized = btn.selected; }

结果

你需要为本范例下载下列源文件：

更多信息

如需了解该话题的更多信息，参见ActionScript 3.0 Reference for the Adobe Flash Platform的"Button class"部分，以及Using ActionScript 3.0 Components的"Using the Button" 部分。

本文转自博客园知识天地的博客，原文链接：使用Button组件，如需转载请自行联系原博主。

上一篇：linux的tar命令详情；linux多个文件压缩打包到一个压缩文件


下一篇：《CCNA学习指南：Cisco网络设备互连（ICND1）（第4版）》——1.6节用户应用程序对网络的影响