用Flex建立一个100%窗口透明的AIR程序，以及打包成.AIR文件

本教程知识点：

Flex建立一AIR程序

窗口透明的AIR程序打包成.AIR文件


第一步：打开FLEX3  创建一个 FLEX project

接着是命名，并选中 Desktop application 在AIR中运行

自动生产XML配置文件

创建好以后FLEX3会自动生产一些文件，再Src文件夹里会有两个XML描述语言：

.MXML文件为前台描述文件

.XML里面可以更改一些系统配置

本例：去除AIR窗口，并让AIR程序边界透明。

 我们打开airia_ex_login-app.xml这个文件

找到： <systemChrime></systemChrime> 和 <transparent></transparent>

修改为下图蓝色区域。

<systemChrime>none</systemChrime>  表示没有系统窗口

<transparent>true</transparent>    表示开启背景透明

    注意：要去掉<!-- --> 也就是说，本身默认文件是把这两项给注释掉了，我们现在把他启用。





    注意2：本教程省略了案例中“AIR界面UI设计”的过程，UI界面源文件在附件内里有。





     





这样我们就完成了第一步。运行一下看看结果？





我们发现FLEX有个默认的STYLE显示了出来。我们现在要想办法把他去掉





第二步：配置MXML文件中的“mx:WindowedApplication”





在 mx:WindowedApplication 内添加一下定制便可去掉FLEX默认的风格界面。





    showFlexChrome="false"      




     alwaysInFront="true"




     layout="absolute"





这里我们再把界面大小设定好。





 width="314"




 height="460"





如图：





再次运行看看：





GOOD！一个完美100%透明的AIR RUN起来了。





 





    也许你还会碰到一下问题





    窗口没办法在桌面拖动？





    没办法关闭和最小化？





    请关注AIRIA.cn原创教程的下一集





 





 





最后把此例的源文件、工程文件、安装.AIR文件全部提供给大家下载参考，忘各位网友支持AIRIA的发展。





 





 附件：





     





     





    扩展参考：flex制作一个用户登录框(含验证码)





    <?xml version="1.0" encoding="utf-8"?>




    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"




                 fontSize="12" horizontalAlign="center" creationComplete="init()">




                




     <mx:Script>




      <![CDATA[




       import mx.controls.Alert;




      




       private function init():void{




        generate.text=generateCheckCode();




       }




      




       //login identifying




       private function loginHandler():void{




          if(user.text==""||pass.text==""){




           Alert.show("user or pass is empty","tips");




          }else{




           if(user.text=="shane"&&pass.text=="shane"




              &&identify.text.toLowerCase()==generate.text.toLowerCase()){




              




            Alert.show("login is OK","tips");




               currentState="hollow";




           




           }else{




            if(identify.text.toLowerCase()!=generate.text.toLowerCase()){




              Alert.show("indentifyCode is error","tips");




              generate.text=generateCheckCode();




            }else{




            Alert.show("user or pass error","tips");




            }




           }




          }




       }




      




      




       //clear




       private function clearHandler():void{




        user.text=pass.text="";




       }




      




       //generate identifying coder




      




       private function generateCheckCode():String{




        //init




        var num:Number;




        var code:String;




        var checkCode:String="";




       




        for(var i:int=0;i<5;i++){




         num=Math.round(Math.random()*100000);




         if(num%2==0){




          code=String.fromCharCode(48+(num%10));




         }else{




          code=String.fromCharCode(65+(num%26));




         }




         checkCode +=code;




        }




        return checkCode;




       }




      ]]>




     </mx:Script>




                




     <mx:Panel id="panel" x="143" y="115" width="350" height="229" layout="absolute" title="login">




     




      <mx:Button id="btnLogin" x="73" y="141" label="login" click="loginHandler()"/>




      <mx:Button id="btnClear" x="167" y="141" label="clear" click="clearHandler()"/>




     




      <mx:Label x="44" y="31" text="user"/>




      <mx:Label x="44" y="64" text="pass"/>




     




      <mx:TextInput id="user" x="81" y="31"/>




      <mx:TextInput id="pass" x="81" y="62" displayAsPassword="true"/>




      <mx:Text x="28" y="100" text="identify"/>




      <mx:TextInput x="81" y="98" width="50" id="identify"/>




      <mx:Label x="139" y="100" width="48" id="generate"/>




      <mx:Label x="195" y="100" text="看不清楚 换个~~" click="generateCheckCode()"/>




     




     </mx:Panel>




     




       <mx:states>




        <mx:State name="hollow">




         <mx:RemoveChild target="{panel}"/>




         <mx:AddChild position="lastChild">




          <mx:Label text="hollow marshane" x="0" y="200" fontSize="200" color="red"/>




         </mx:AddChild>




        </mx:State>




       </mx:states>




     




    </mx:Application>