`
ritlv97d
  • 浏览: 16654 次
社区版块
存档分类
最新评论

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

 
阅读更多

Flex AIR)创建“不规则形状”的Air透明窗体
2010年06月02日
  重要提醒:系统检测到您的帐号可能存在被盗风险,请尽快查看风险提示,并立即修改密码。  |  关闭
  网易博客安全提醒:系统检测到您当前密码的安全性较低,为了您的账号安全,建议您适时修改密码    立即修改  |  关闭
  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/6dcb9c133ac8328c 6438dbfa.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 窗口会有一个原大小的矩形边框;
  ③  是设置项目的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);
  (本文完)
  ************************************************** **********
  敬请关注下一篇:
  Flex AIR)创建“不规则形状”的Air透明窗体(二)--使用Flex SDK4.5.1
  http://hi.baidu.com/taotao5453/blog/item/29d97c8dc c768708b31bba93.html?timeStamp=1312284922255 -
  转载请附源:http://hi.baidu.com/taotao5453,感谢
  - 本篇完 -
  
  
  
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics