使用Flex3.0 AIR 创建“不规则形状”的Air透明窗体

使用Flex3.0 AIR 创建“不规则形状”的Air透明窗体
2011年10月16日
　　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系统。
　　这里指的窗体可以是 mx:WindowApplication 、mx:Window 。
　　我们用下面这个球鞋的图，来做界面，这个图是png 格式的，背景色为透明：
　　步骤：
　　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 窗口会有一个原大小的矩形边框；
　　③  是设置项目的css 样式表为css文件夹下的style.css ；
　　④ styleName="application" 是指定本组件（AirTransparentExample.mxml）使用的css样式 是样式表style.css 中名称为application 的样式；
　　-
　　3）Air 的配置文件 AirTransparentExample-app.xml
　　比较传统的，网上很多资料都只是让我们设置这里，我们需要更改这里面的两项：
　　-->
　　-->
　　改为：
　　none
　　true
　　-
　　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);
　　（本文完）