FLEX-AIR实践之电视台手机号抽奖程序

这个小程序作为我使用FLEX AIR做的第一个正式的程序，虽然看起来很简单，但还是涵盖了很多关于FLEX及FLEX AIR开发的知识点和一些细节上的小难点，正所谓麻雀虽小，五脏俱全，本人觉得对于初学者来说还是很有用的。下面是这个程序涵盖的知识点：

1、Timer的应用。如果使用JAVA制作抽奖程序来实现屏幕手机号的滚动效果，一般人都会想到使用线程，因为线程的wait方法可以控制手机号滚动的速度，另外suspend和resume方法也可以实现抽奖的暂停和恢复。但是很遗憾，FLEX不支持多线程，就只能使用Timer类来模仿线程的效果。

2、对文件的读写。抽奖时需要读取抽奖文件中的手机号，在抽取之后将中奖号码输出到新的中奖文件中，并将中奖手机号从抽奖文件中删除。

3、一些基本类的使用，如字符串处理和随机数生成等，这里是核心业务逻辑。

4、事件处理。如Timer事件和按键事件。事件和事件处理是FLEX的核心。

5、简单的特效使用，可以让你的程序看起来更炫。

6、AIR程序UI的设置。包括全屏显示、去掉AIR默认边框、背景透明等。

7、AIR程序的属性设置、发布和安装。

需求：

1、一个全屏显示的抽奖程序，中间一个Label滚动手机号，按下空格或回车后label停止滚动，显示中奖号码，中间四位掩盖。

2、从指定位置读取手机号码（一行一个号码）文件中的手机号，中奖号码输出到指定文件中以方便查阅记录，号码不能重复中奖。

使用工具：

FLEX BUILDER或FLEX BUILDER ECLIPSE PLUGIN皆可。

实现步骤：

1、建立AIR工程，FILE->NEW->FLEX PROJECT，工程名称为lot，下面的APPLICATION TYPE选择DESKTOP APPLICATION->FINISH.

2、UI显示设置：

在lot-app中设置背景透明：

<systemChrome>none</systemChrome>

<transparent>true</transparent>

在lot.mxml中设置去掉FLEX默认边框：

在<mx:WindowedApplication/>中设置showFlexChrome="false"，如果你想让程序一直在前台可以设置alwaysInFront="true".

设置全屏显示：

我们需要程序一开始就是全屏显示的，全屏显示可以使用如下语句：

systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

通常我们可能会想到在<mx:WindowedApplication/>中设置initialize或createComplete来调用上面的语句来实现开始全屏，但是我们实际操作发现会出错，提示空对象操作。这是为什么呢？因为在组件创建过程中stage并未被实例化，直到整个程序初始化结束后才被实例化，因此我们需要使用applicationComplete来调用。

设置面板大小为1024*768，这部看自己喜好来定。

设置面板不自动显示滚动条，因为这个程序是要在电视直播中使用，除了面板背景图片和显示号码的LABEL，其他的东西都不应该显示出来，因此我们要把滚动条全部去掉，通过在<mx:WindowedApplication/>中设置verticalScrollPolicy="off" horizontalScrollPolicy="off".

3、添加特效：

我们要给程序添加打开、关闭IRIS特效，在MXML中添加如下代码：

<mx:Iris id="irisIn" duration="500" showTarget="false"/>
<mx:Iris id="irisOut" duration="500" showTarget="true"/>

然后在<mx:WindowedApplication/>中设置closeEffect="irisIn" creationCompleteEffect="irisOut" unminimizeEffect="irisOut" minimizeEffect="irisIn"

4、业务逻辑：

整个lot.mxml代码如下，不懂的地方请看注释：

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication showFlexChrome="false" alwaysInFront="false" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" applicationComplete="initComplete()" layout="absolute" closeEffect="irisIn" creationCompleteEffect="irisOut" unminimizeEffect="irisOut" minimizeEffect="irisIn" width="1024" height="768" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off">

	<mx:Script>
		<!--[CDATA[
			 import mx.controls.Alert;
			 import util.NumberUtilities;
			 import mx.utils.StringUtil;
			 private var fileStream:FileStream = new FileStream();
			 private var array:Array = new Array();//号码存储数组
			 private var flag:Boolean = false;//用来标识号码是滚动还是停止
			 private var timer:Timer = new Timer(20,0);//设置计时器每0.02秒响应一次，即号码滚动速度
			 private var result:String; //抽奖结果
			 //初始化程序，并读取E:/Txt/code.txt的手机号，一个手机号一行：
			 private function init():void{
			 	this.nativeApplication.addEventListener(KeyboardEvent.KEY_UP,keyHandler);//添加键盘事件监听器
			 	this.timer.addEventListener(TimerEvent.TIMER,timerEventHandler);//添加计时器事件监听器
			 	//读取数据：
			 	var file:File = new File();
			 	try{
					file.nativePath = 'E://Txt//code.txt';
					if(!file.exists){//如果文件不存在
						Alert.show("E://Txt//code.txt 查无此文件！","错误提示");
						this.close();
					}else{//文件存在
						fileStream.open(file,FileMode.READ);
						var text:String = fileStream.readUTFBytes(fileStream.bytesAvailable) //只读方式打开文件，将内容放到text中
						array = text.split('/r/n');//将文本按照回车分割出号码并存在数组中，XP记事本文件中一行结尾是/r/n，这点要特别注意
						//以下为保险起见，为了防止文件出现空格等多余字符进行的处理
						if(array.length==1){
							array = text.split('/r');
						}
						while(array.indexOf("",0)!=-1){//消除因文本输入错误而出现的空格
							array.splice(array.indexOf("",0),1);//去掉空元素
						}
						if(array.length==0){
							Alert.show("文件中无号码！","错误提示");
						}
						fileStream.close();
						this.setFocus();//这句很重要，如果面板不设置成焦点是不能响应键盘事件的
					}
				}catch(e:Error){
					trace(e.toString());
					trace("File Path："+file.nativePath);
				}
		 	 }
		 	 //全屏显示程序：
		 	 public function initComplete(){
		 	 	systemManager.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
		 	 }
		 	 //关闭程序
		 	 private function windowclose():void{
		 	 	this.close();
		 	 }
		 	 //键盘事件:只响应回车或空格键
		 	 public function keyHandler(event:KeyboardEvent):void{
		 	 	if(event.keyCode==32||event.keyCode==13){//回车或空格
		 	 		if(!flag){//如果号码尚未开始滚动
		 	 			timer.start();//那就开始滚
		 	 			flag = true;
		 	 		}else{//激动人心的一刻，字幕此时停止滚动！奇迹出现了！谁会获得这五块钱的现金大奖呢？？
		 	 			timer.stop();//停止滚动
		 	 			flag = false;
		 	 			try{
		 	 				//输出中奖号码到指定文件
							var file:File = new File();
							var date:Date = new Date();
							var datestring:String = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
							file.nativePath = "E://中奖号码//"+datestring+"中奖号码.txt";
							fileStream.open(file,FileMode.APPEND); //APPEND方式打开
							//var date:Date = new Date();
							//var datestring:String = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
							fileStream.writeUTFBytes("一等奖中奖号码："+"/r/n"+this.result+"/r/n");  //将内容写入文件
        					fileStream.close();
        					//以下是将中奖号码从抽奖号码中删除，方便接下来的抽奖
        					var file1:File = new File();
        					file1.nativePath = "E://Txt//code.txt";
        					fileStream.open(file1,FileMode.WRITE); 
        					array.splice(array.indexOf(result,0),1); 
        				
        					var temp:String = "";
        					for(var i:int=0;i<array.length;i++){
        						temp = temp+array[i]+"/r/n";
        					}
        					fileStream.writeUTFBytes(temp);
        					fileStream.close();
						}catch(e:IOError){
							trace(e);
							//Alert.show("出错了！","错误提示");	
						}
		 	 		}
		 	 	}
		 	 }
		 	 //计时器事件处理
		 	 public function timerEventHandler(event:TimerEvent):void{
		 	 	if(array.length>0){
		 	 		var ran:Number = NumberUtilities.random(0,array.length-1);//生成一个[0,length)的随机整数，这里NumberUtilities.as在util包中
		 	 		var a:String = array[ran];//取出位置为上面随机数的元素
		 	 		tel.text = a;//显示号码
		 	 		result = a;
		 	 	}else{
		 	 		flag = false;
		 	 	}
		 	 }
		 	 

		]]-->
	</mx:Script>
	<mx:Style/>
	
	<mx:Iris id="irisIn" duration="500" showTarget="false"/>
	<mx:Iris id="irisOut" duration="500" showTarget="true"/>
	
	<mx:Image x="0" y="0" width="1030" height="780" source="image/1.jpg"/>
	<mx:Image x="999" y="10" height="13" width="13" source="image/windx_r1_c3.png" autoLoad="true" scaleContent="true" click="windowclose()"/>
	<mx:Label x="358" y="431" height="67" width="406" color="#D30000" fontSize="50" fontWeight="bold" enabled="true" text="    抽奖开始" id="tel"/>
</mx:WindowedApplication>

因为FLEX自带的随机数类并不能满足我们的要求，于是我们要自己写一个随机数类，用来取出指定范围的随机数：建立util包，创建NumberUtilities.as，代码如下：

package util {

  public class NumberUtilities {

	private static var _aUniqueIDs:Array;

    /**
     *  Round a number. By default the number is rounded to the nearest
     *  integer. Specifying a roundToInterval parameter allows you to round
     *  to the nearest of a specified interval.
     *  @param  number             The number you want to round.
     *  @param  nRoundToInterval   (optional) The interval to which you want to
     *                             round the number. The default is 1.
     *  @return                    The number rounded to the nearest interval.
     */
    public static function round(nNumber:Number, nRoundToInterval:Number = 1):Number {
      // Return the result
      return Math.round(nNumber / nRoundToInterval) * nRoundToInterval;
    }
    

    /**
     *  Get the floor part of a number. By default the integer part of the
     *  number is returned just as if calling Math.floor( ). However, by specifying
     *  a roundToInterval, you can get non-integer floor parts.
     *  to the nearest of a specified interval.
     *  @param  number             The number for which you want the floor part.
     *  @param  nRoundToInterval   (optional) The interval to which you want to
     *                             get the floor part of the number. The default is 1.
     *  @return                    The floor part of the number.
     */
    public static function floor(nNumber:Number, nRoundToInterval:Number = 1):Number {
    
      // Return the result
      return Math.floor(nNumber / nRoundToInterval) * nRoundToInterval;
    }

    /**
     *  Get the ceiling part of a number. By default the next highested integer
     *  number is returned just as if calling Math.ceil( ). However, by specifying
     *  a roundToInterval, you can get non-integer ceiling parts.
     *  to the nearest of a specified interval.
     *  @param  number             The number for which you want the ceiling part.
     *  @param  nRoundToInterval   (optional) The interval to which you want to
     *                             get the ceiling part of the number. The default is 1.
     *  @return                    The ceiling part of the number.
     */
    public static function ceil(nNumber:Number, nRoundToInterval:Number = 1):Number {

      // Return the result
      return Math.ceil(nNumber / nRoundToInterval) * nRoundToInterval;
    }

    /**
     *  Generate a random number within a specified range. By default the value
     *  is rounded to the nearest integer. You can specify an interval to which
     *  to round the value.
     *  @param  minimum            The minimum value in the range.
     *  @param  maximum            (optional) The maxium value in the range. If
                                   omitted, the minimum value is used as the maximum,
                                   and 0 is used as the minimum.
     *  @param  roundToInterval    (optional) The interval to which to round.
     *  @return                    The random number.
     */
    public static function random(nMinimum:Number, nMaximum:Number = 0, nRoundToInterval:Number = 1):Number {

      // If the minimum is greater than the maximum, switch the two.
      if(nMinimum > nMaximum) {
        var nTemp:Number = nMinimum;
        nMinimum = nMaximum;
        nMaximum = nTemp;
      }

        // Calculate the range by subtracting the minimum from the maximum. Add
        // 1 times the round to interval to ensure even distribution.
        var nDeltaRange:Number = (nMaximum - nMinimum) + (1 * nRoundToInterval);

        // Multiply the range by Math.random(). This generates a random number
        // basically in the range, but it won't be offset properly, nor will it
        // necessarily be rounded to the correct number of places yet.
        var nRandomNumber:Number = Math.random() * nDeltaRange;

        // Add the minimum to the random offset to generate a random number in the correct range.
        nRandomNumber += nMinimum;

        // Return the random value. Use the custom floor( ) method to ensure the
        // result is rounded to the proper number of decimal places.
        return floor(nRandomNumber, nRoundToInterval);
      }

    /**
     *  Generate a unique number.
     *  @return                    The unique number
     */
    public static function getUnique():Number {

      if(_aUniqueIDs == null) {
      	_aUniqueIDs = new Array();
      }

      // Create a number based on the current date and time. This will be unique
      // in most cases.
      var dCurrent:Date = new Date();
      var nID:Number = dCurrent.getTime();

      // It is possible that the value may not be unique if it was generated
      // within the same millisecond as a previous number. Therefore, check to
      // make sure. If it is not unique, then generate a random value and concatenate
      // it with the previous one.
      while(!isUnique(nID)) {
        nID += NumberUtilities.random(dCurrent.getTime(), 2 * dCurrent.getTime());
      }
      
      _aUniqueIDs.push(nID);

      // Return the number.
      return nID;  
    }

  /**
   *  Check to see if a number is unique within the array of stored numbers.
   *  @param  number            The number to compare.
   *  @return                   True or false
   */
  private static function isUnique(nNumber:Number):Boolean {
    for(var i:Number = 0; i < _aUniqueIDs.length; i++) {
      if(_aUniqueIDs[i] == nNumber) {
        return false;
      }
    }
    return true;
  }

  }
}

至此，程序代码部分完成。

5、程序的发布配置：

如果经调试，程序可以正常运行了，我们就可以发布程序了。

在lot-app.xml中进行配置：

这个是用户安装完程序后，在桌面上显示的快捷方式的名称：

<filename>短信抽奖程序</filename>

这个是安装程序中显示的：

<name>XXX节目短信抽奖</name>

这个是安装过程中显示的程序版本号：

<version>v1.0.2</version>

所有权……：

<copyright>XXXX@2009</copyright>

在第一个ICON处设置程序图标，理论上设置一个就可以了，该图标文件与MXML文件在同一目录下：

<image48x48>icon.png</image48x48>

至此程序发布前的工作完成了，接下来就可以发布程序了：

1、右键点工程->EXPORT->FLEX BUILDER->RELEASE BUILD->下面选择发布位置，NEXT

2、这时候需要创建一个数字证书，点create，填好必填项，确定，填写好password，FINISH

这时候你刚才设置的发布位置会有一个.air格式的安装包，你需要安装AIRADOBEINSTALLER才能安装，下载地址：

http://airdownload.adobe.com/air/win/download/latest/AdobeAIRInstaller.exe

安装好之后就可以打开AIR格式的安装包了。

程序安装之后在桌面会有快捷方式，点击即可运行程序了。

附注：本程序在显示手机号时因实际需要未对手机中间号码进行遮盖，如果需要可以使用字符串处理的API很简单地实现遮盖。

实际运行效果(图片显示不完整……)：