如何给你的AIR应用创建一个启动屏幕

转自riameeting

原文地址http://www.riameeting.com/node/407

说起启动界面，相信读者都很熟悉，当一个软件体积很大，导致加载比较缓慢的时候，通常的做法是显示一个启动界面，告诉用户这个软件正在启动，这在很大程度上改善了用户体验，因为用户通常情况下忍受不了软件的加载速度不是因为你的软件加载慢，而是你没有显示一个界面出来通知用户，这会让用户心理上感觉时间很漫长，可能几秒钟用户都无法等待，而如果有实时的界面显示，几十秒都不是很大的问题，举个例子，Adobe的Photoshop大家可能用过或接触过，它的体积是很大的，如果没有启动界面，你就会感觉启动无法忍受，甚至会怀疑自己点击错误没有成功启动Photoshop而去多点击几下。所以说启动界面在大体积的软件加载过程中的作用是非常大的，也是我们在软件设计的阶段需要考虑到的一个重要的问题。

同理我们在开发AIR应用（注意AIR也是桌面应用）的时候，也可以引入启动界面的机制。下面我们来看看如何在AIR开发中去实现这个功能。

首先需要先准备一张位图，这个图片用于你的程序加载完毕并显示之前，先显示给用户一个界面，可以是你的应用的Logo之类的，你可以用Photoshop或其它的位图处理工具来制作这个图片，在这个例子中，要使用的位图如下图所示：

下面让我们来看看实现的过程。首先我已经在Flex Builder中创建了一个AIR项目，并且我的主程序文件是基于“WindowedApplication”组件的，并且其它的弹出窗口是基于Window或其它的可弹出的绘图组件。window组件使用是非常方便的，所以这里我也将使用window作为我的启动界面的容器，并且需要设置的地方是去除这个Window的边框和系统样式，只保留要显示的那张位图。要删除系统边框和样式，你需要修改应用程序的配置XML并且更改以下的部分：

      <systemChrome>none</systemChrome>

      <transparent>true</transparent>

      <visible>false</visible>

注意通过这样设置之后，系统默认将显示Flex的默认皮肤。在主程序文件的窗体中，这个样式非常酷，但是在启动界面的窗体中，我们还是需要把它的边框删除掉。你可以通过下面的设置来隐藏边框和皮肤：

      type="lightweight"

      showFlexChrome="false"

      transparent="true" 
      visible="false"

然后我们希望启动界面的位置要处于屏幕的中央，可以通过更改这个窗体的坐标来实现，注意窗体跟Flash里其它的显示对象类似，也有自己的坐标定位（x,y），而计算它的位置我们又需要知道屏幕的尺寸，屏幕的尺寸我们可以通过Screen类来获取，代码示例如下：

private function init():void {

      this.nativeWindow.x = Screen.mainScreen.visibleBounds.width/2 - this.width/2;
      this.nativeWindow.y = Screen.mainScreen.visibleBounds.height/2 - this.height/2;
      this.nativeWindow.visible = true;
}

在显示启动界面的同时，我们希望主界面是隐藏的，只是设置visible是false是不够的，我们同时给它设置坐标值是一个很大的负值，比如-2000，然后我们再添加启动界面到显示列表。

      <x>-2000</x>

      <y>-2000</y>

      mainWindow = this.stage.nativeWindow;
      mainWindow.visible = false;
      splashScreen = new Splash_Window();
      splashScreen.open();

在这个应用里，我只是简单的添加了一个Timer（计时器）来控制启动界面和主界面的显示/隐藏，实际上你在开发的时候可以根据具体的真实情况（比如数据的加载情况），来实时的控制这个过程。

源码下载地址：

http://ultravisual.co.uk/blog/sourceFiles/splash_screen_src.zip