[AIR]AIR程序外观透明效果教程
2008-4-30
之前做完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>
很感谢 不过 我也找到了另一种解决方案 可以通过修改 xml 文件 而不修改 mxml 源文件来 实现这一效果!
真的很谢谢!