[AIR]AIR程序外观透明效果教程

之前做完AIR账本程序的时候就想分享一下制作AIR的一些~~技巧吧~~因为网上有关AIR的教程实在太少。但后来没激情了，就罢了。今天一位网 友问我怎样把AIR的外观制作成我那种不规则形状的有点半透明的效果的。嗯~反正有空，就写个详细制作过程吧~~我是用FLEX3做的，至于在FLASH 里怎么做我就不知道了~~没试过~~~第一次写教程，难免表达等方面会有些问题，这个BLOG又不能插图，所以只有文字，不能图文并茂，看起来该会痛苦 点~~凑合着看吧。。

一、基础

打开FLEX3 新建一个AIR工程：File-New-Flex Project

输入工程名   在Application type处选择 Desktop application(runs in Adobe AIR)  直接点finish

打开这个工程所在的文件夹，默认是：我的文档/Flex Builder 3/工程名

打开src文件夹 拖张有透明效果的PNG图片进去。

因为不知道怎么直接在FLEX的工程面板里直接添加文件，所以我直接跑到文件夹去添加，知道的人知会一声啊~~~

接下来插入这张图片，在<mx:Application>标签内插入<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>

bg1.png是刚才那张PNG图片的文件名。

按CTRL+F11看下，图片是插入了 但有窗口 不透明，接下来就去掉窗口，让它透明。

二、透明

把<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:WindowedApplication>

改成<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”></mx:Application>

因为只要是WindowedApplication就会有窗口出现，貌似是这样。。

在此标签内加入

<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>

打开跟example.mxml在同一目录下的example-app.xml，是个配置文件。

里 面可以设置的所有属性都列好了，只是很多都用<!–  –>注释掉了，按需求去掉注释添加属性。这里我们需要设置的是<initialWindow>里 的<systemChrome>、<transparent>和<visible>标签。去掉这三个标签的注释，在 这三个标签里分别输入none，true，true。结果就是这样：

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

也可以直接添加这三行到<initialWindow>标签里。

好 这时候按ctrl+F11看效果，已经是透明不规则窗体了。

三、拖动

但这窗体不能拖动，又没有关闭跟最小化按钮，现在我们来实现这些功能。

在mxml文件的<mx:Application>标签里插入如下语句：

<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>

再插入

<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />

到<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>后面，插入到前面的话按钮会没有响应，因为图片的鼠标事件优先了。。

再为<mx:Application>标签添加一个属性：applicationComplete=”init();” 结果是这样:<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();”>

代码很简单。程序运行完成的时候执行init()函数，函数里为bgImage就是刚才添加的png图片添加鼠标事件侦听，鼠标按下就开始移动。

下面两个按钮，不用多说~~基本功能就这样实现啦~~~

附：完整example.mxml和example-app.xml代码：

example.mxml：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” applicationComplete=”init();” width=”440″ height=”310″>
<mx:Style>
Application
{
background-color:””;
background-image:””;

}
</mx:Style>
<mx:scrīpt>
<![CDATA[
private function init():void{
bgImage.addEventListener(MouseEvent.MOUSE_DOWN, onStartMove)
}
//窗口最小化、关闭、拖动函数
public function minimizeWindow():void{
this.stage.nativeWindow.minimize();
}

public function closeWindow():void{
this.stage.nativeWindow.close();
}
public function onStartMove(event:MouseEvent):void{
this.stage.nativeWindow.startMove();
}
]]>
</mx:scrīpt>
<mx:Image x=”0″ y=”0″ source=”bg1.png” id=”bgImage”/>
<mx:Button click=”closeWindow();” x=”10″ label=”close” y=”10″  />
<mx:Button click=”minimizeWindow();” x=”100″ y=”10″ label=”min” />
</mx:Application>

example-app.xml：

<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0″>
<id>example</id>
<filename>example</filename>
<name>example</name>
<version>v1</version>
<initialWindow>
<content>[This value will be overwritten by Flex Builder in the output app.xml]</content>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

</initialWindow>
</application>