Flex AIR）创建“不规则形状”的Air透明窗体（二）--使用Flex SDK4.5.1

在此之前，我曾写过一篇关于《创建“不规则形状”的Air透明窗体》的教程，但当时使用的是Flex3，SDK使用的版本是SDK3.2（AIR 2.0）版本。前文请参考http://hi.baidu.com/taotao5453/blog/item/4d9fd988275e7f98a5c2722d.html

如果你不明白什么是“不规则形状”的Air透明窗体，请先跳到本文底部看预览图。

 

问题：

随着Adobe对Flex的更新，进入到Flex4以后，css中backgroundColor不能设置为空了，并且机制更建议使用skin皮肤来设置组件样式，而且Application中的一些属性也变更了showTitleBar等属性已不存在或变更了用法。也有几位童鞋按照Flex3类似做法来做未成功而向我提出过疑问。

 

解决方案：

现在使用Flash Builder4.5（SDK4.5.1），并使用新的spark组件库，还使用新的skin皮肤外观机制来为你的WindowedApplication设置皮肤，通过皮肤中的设置去除边框等。这里我会把步骤写详细一些，因为可能有读者对Flex4的api并不很熟悉，即便你会Flex3。

 

具体步骤：

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

一、准备阶段

（注：如果你对Flex4创建带背景的Air项目很熟悉，可以直接无视准备阶段，跳到第二阶段操作步骤）

1、首先使用Flash Builder4.5创建一个AIR项目，

SDK版本选择4.5.1（如果没有此版本，选择SDK 4.5也是可以的），如图：

 

 

点击“完成”我们就创建好了我们的初始项目，项目文件目录如下：

 

 

2、创建一个外观类，

新建一个skin“包”，然后右键这个skin包，选择“新建”-》“MXML外观”，弹出如下界面，按照图中填写名称(ApplicationSkin)、主机组件（spark.components.Window）即可，最下面一栏当你填写主机组件时会自动填充，保持和图中一致即可，其中“名称”一栏可以自定义填写，只要和稍后我们用的一直就可以了：

 

 

 

Flash Builder会在类中为我们创建默认的代码，请自行查看。

 

3、为我们的项目创建css文件

新建一个css“包”，右键这个css包选择“新建”-》css文件，文件名填写“style”，也可任意命名. 

现在我们的项目目录看起来是这样：

 

 

 

 

其中，红框内为我们第2、3步骤新创建的css和外观组件文件。

 

4、设置项目css类，并编写style.css中的内容，

在我们的主文件TestAIR_Launcher2.mxml中添加一行代码，

<fx:Stylesource="css/style.css"/>

表示我们将css/style.css文件作为我们项目的css样式配置文件，如图：

 

 

 

接下来我们要编写css文件中的内容，在这里我们要把我们之前创建的皮肤设置给我们的主文件，打开style.css，编写如下代码：

s|WindowedApplication{

       skinClass:ClassReference("skin.ApplicationSkin");

}

如图，红框中为新加入代码，表示将skin.ApplicationSkin文件作为我们主文件的皮肤，因为项目主文件是WindowedApplication类型标签，所以这里我们用s|WindowedApplication就表示主文件：

 

 

 

这样，通过第4步骤我们就把主文件和皮肤文件关联起来了。

 

5、加入不规则形状的背景图

因为我们要做的是一个无边框不规则的AIR窗体，所以一张不规则的png图片是必须的，这里我从网络上随便下载一张图片，具体你可以根据需要自己选择图片。

1）在项目中创建一个res文件夹，将我们的图片放在这个目录下。

2）打开ApplicationSkin.mxml这个外观类，在layer1和layer2标签之间添加一行代码：

<s:BitmapImagesource="@Embed('res/bg.png')" width="100%"height="100%" />

如图：

 

 

到这里，我们的“准备阶段”完成了。

准备阶段我们主要做了创建我们需要的文件，通过css绑定主文件和skin皮肤，并在皮肤中加入一张背景png图片。

完整项目结构如下图：

 

 

 

调试/运行一下，看下效果：

蜗牛很可爱吧@@@@@@@@@@@@@

 

 

 

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

二、操作阶段

这里我们有三个地方需要修改，分别是：

1）ApplicationSkin皮肤类

2）TestAIR_Launcher2-app.xml项目配置文件

3）TestAIR_Launcher.mxml类，我们的主文件

 

1、  修改ApplicationSkin皮肤类

注释掉layer1的代码，因为layer1为我们主界面绘制了一个默认背景

 

同时注释掉和backgroundFill属性对应的两行代码，如图：

 

 

2、  修改TestAIR_Launcher2-app.xml项目配置文件，这个修改和

 

 

Flex3做法相同

比较传统的，网上很多资料都只是让我们设置这里，我们需要更改这里面的两项：
<!--<systemChrome></systemChrome>-->
<!--<transparent></transparent>-->
改为：
<systemChrome>none</systemChrome>
<transparent>true</transparent>

这么做是为了不显示带有标题和菜单的上边框，以及窗体周围的边框。

 

3、修改TestAIR_Launcher.mxml类，我们的主文件

为主类设置属性showStatusBar="false"，如下图，这样做是为了去除界面中底部一条灰色的状态条，在第一步骤最后的效果图中可以看到:

 

 

 

@@到这里，教程结束了，现在调试/运行一下看看最终效果：

 

 

 

 

是不是很神奇呢？！只显示一个大蜗牛了，边框什么的都不见了，而且在图片颜色不覆盖的不规则区域，鼠标都是可以透过的。

当然这个界面还不能拖动，这需要添加其他代码来完成，如果你会as或mxml语言，那么很容易了，也不是本文要讨论的范围！