Flex中通过调用autoRepeat属性和buttonDown事件创建一个自动重复用户按下时动作按钮(Button)的例子

By Minidxer | July 19, 2008

接下来的例子演示了Flex中通过调用autoRepeat属性和buttonDown事件,创建一个自动重复用户按下时动作按钮(Button)。比较拗口,简单的说就是用户按下鼠标,并且保持按下状态,该按钮一直执行鼠标按下时的动作,直到结束。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.core.UIComponent;
  10.  
  11.             private function moveLeft(target:UIComponent):void {
  12.                 var t1:int = target.x - 10;
  13.                 var t2:int = 0;
  14.                 target.x = Math.max(t1, t2);
  15.             }
  16.  
  17.             private function moveRight(target:UIComponent):void {
  18.                 var t1:int = target.x + 10;
  19.                 var t2:int = Application.application.width - target.width;
  20.                 target.x = Math.min(t1, t2);
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.  
  25.     <mx:Box id="box" width="100" height="100" backgroundColor="red" />
  26.  
  27.     <mx:HBox>
  28.         <mx:Button id="leftButton"
  29.                 label="left"
  30.                 autoRepeat="true"
  31.                 repeatDelay="{button_repeatDelay.value}"
  32.                 repeatInterval="{button_repeatInterval.value}"
  33.                 buttonDown="moveLeft(box)" />
  34.  
  35.         <mx:Button id="rightButton"
  36.                 label="right"
  37.                 autoRepeat="true"
  38.                 repeatDelay="{button_repeatDelay.value}"
  39.                 repeatInterval="{button_repeatInterval.value}"
  40.                 buttonDown="moveRight(box)" />
  41.     </mx:HBox>
  42.  
  43.     <mx:Form>
  44.         <mx:FormItem label="repeatDelay ({button_repeatDelay.value}):">
  45.             <mx:HSlider id="button_repeatDelay"
  46.                     minimum="50"
  47.                     maximum="950"
  48.                     value="100"
  49.                     snapInterval="50"
  50.                     tickInterval="100"
  51.                     dataTipPrecision="0" />
  52.         </mx:FormItem>
  53.         <mx:FormItem label="repeatInterval ({button_repeatInterval.value}):">
  54.             <mx:HSlider id="button_repeatInterval"
  55.                     minimum="10"
  56.                     maximum="910"
  57.                     value="10"
  58.                     snapInterval="10"
  59.                     tickInterval="100"
  60.                     dataTipPrecision="0" />
  61.         </mx:FormItem>
  62.     </mx:Form>
  63.  
  64. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:minidxer

Topics: Flex | No Comments » | Tags: , , , , ,

Search Posts