Flex AIR）创建“不规则形状”的Air透明窗体

Adobe AIR 是使用Flash /Flex 编程方式开发桌面应用的一种方式，

由于Flash /Flex 快速构建界面、基于互动的编程api 等优点，越来越多的使用者选择使用Adobe AIR 开发桌面程序。目前国内很多网络游戏的启动/更新程序，也叫Launcher ，采用Adobe AIR来进行开发。这些程序界面往往非常富有创意，形状多式多样，而且结合flash 动画令整个程序异常漂亮。

比如：


 (点击可查看大图)

这里将要讲的就是，如何使用Flex AIR 创建不规则的窗体，隐藏掉不需要的多余部分。以下内容均基于Flex
AIR 2.0 SDK ，开发软件即IDE是Flash Builder 正式版 （Flex 3也适用），开发环境是Windows系统。

关于Adobe AIR 2.0 开发环境配置，SDK下载与使用，可参考这一篇：hi.baidu.com/taotao5453/blog/item/6dcb9c133ac8328c6438dbfa.html

这里指的窗体可以是 mx:WindowApplication 、mx:Window 。

我们用下面这个球鞋的图，来做界面，这个图是png 格式的，背景色为透明：


 （点击可查看大图）

-
步骤：

转载请附源：http://hi.baidu.com/taotao5453， 感谢

1、使用Flash Builder 创建一个“Flex 项目”，选择并使用AIR 2.0 SDK 。

应用程序类型我们选择“桌面”，如图：



Flex 项目结构如下，我们通过css 来将上面球鞋的图作为窗体背景：



-

-
2、为了实现我们的效果，需要更改的有三处：

1）style.css 文件

内部代码：



说明：

① backgroundColor : ""; 这一项是关键，将背景色置空，不设置的话，程序界面没有图像的部分会呈现默认的灰色。

-

2）AirTransparentExample.mxml 增加代码内容如下图，

代码如下：（红圈部分为我们添 加的代码，其他的是创建项目时默认代码）



说明：

①showStatusBar="false" showTitleBar="false" ，这两个属性是为了去除Air 窗口原有菜单、标题栏；

② borderStyle="none" ，是将Air 窗口边框线去除，否则程序运行时Air 窗口会有一个原大小的矩形边框；

③ <mx:Style source="css/style.css"/> 是设置项目的css 样式表为css文件夹下的style.css ；

④ styleName="application" 是指定本组件（AirTransparentExample.mxml）使用的css样式 是样式表style.css 中名称为application 的样式；

-

3）Air 的配置文件 AirTransparentExample-app.xml

比较传统的，网上很多资料都只是让我们设置这里，我们需要更改这里面的两项：

<!--<systemChrome></systemChrome>-->

<!--<transparent></transparent>-->

改为：

<systemChrome>none</systemChrome>

<transparent>true</transparent>

-
3、启动“运行” 或 “调试”。

-

这样，我们就完成了我们要做的工作，创建出一个“不规则形状”的Air 透明窗体！！！

实际项目运行效果图：



-

其他窗体 ，比如mx:Window，属性设置的方式基本一样，只不过如果这个window 不是默认主程序，那么更改AIR 配置文件也是没用的。我们可以在弹出方法中设置 systemChrome 和transparent ，比如：

var window:ExampleWindow = new ExampleWindow(); //ExampleWindow 即是一个由mx:Window 创建的窗口

window.systemChrome = "none";

window.transparent = true;

window.open(true); 

 

（本文完）

源地址链接:http://hi.baidu.com/nibegqkojzamvyr/item/838cb9d5595bb84edcf9befc