教程部分：创建一个照片相册项目

这个教程将带你详细了解使用外部素材和模板制作一个Flash项目的过程，最终的成型的产品是一个照片相册的浏览器，它的显示方式是，在底部有一些缩略图，点击缩略图并拖拽到上面的区域，就可以查看大图。

这个教程将专注于项目开发的工作流，但是也会涉及到一些其它的相关的内容，比如代码的包路径，如何组织代码，如何生成代码模板文件等等。你将会创建一个FLA文件，并将图片等素材导入到这个FLA文件中修改，在开始之前，建议你先看一看在上一个章节中你下载的文件中的最终的项目文件目录结构。

了解项目工作流

创建一个Flash项目是非常容易的，你需要先创建一个项目的目录，并设计一个结构来确定如何保存里面的文件。以下是工作流的详细步骤：

1. 设计项目
2. 创建你的文件目录，图片素材，和其它的素材资源
3. 创建一个新的FLA文件并保存到项目目录
4. 使用Quick Project选项自动生成一个Flash 项目
5. 导入素材到FLA文件
6. 定义需要的Action Script模板
7. 定义XML数据源
8. 定义文档类
9. 添加链接ActionScript类
10. 发布测试和部署文件

再往下是每个步骤的具体制作步骤：

步骤一：设计项目

 首先来让我们设计一下这个项目是什么样子的，以及计划一下里面的交互过程如何完成。下面是一张图片，用于说明整个项目的设计过程：

通过这张图片，我们可以了解到：这个照片相册是需要载入外部的数据源和图片的，整体的UI布局可以在图片中看到，上面显示大图，下面显示缩略图的列表，外部的图片保存在一个目录中，并且还有一个对应的XML文件，这个XML文件里面保存了图片的列表信息。而在源文件的部分，需要先使用Illustrator先完成界面的设计工作，然后导入到FLA中，并完成ActionScript的逻辑代码编写，最终发布为可运行的SWF文件。

步骤二：创建文件目录和素材

首先需要创建一个项目的目录，用于保存项目文件和素材，然后创建一个FLA文件。因为本文的重点不在设计部分，因此请大家打开在上一个章节中下载到的“ flash_project.zip”文件，解压到你的硬盘上，这个目录里包含了Adobe Illustrator的设计文件，图片目录，和一些包含了Action Script文件的目录，还有一个目录包含了代码模板，也是非常有用的。

你可以把你想浏览的照片，放到上述的图片目录中，图片目录已经包含了默认的12张图片，你可以删除或覆盖它们。对照片的要求如下：

1. 图片宽度：800像素
2. 图片高度：532像素
3. 图片格式：JPEG，GIF，或PNG
4. 图片大小：50-100K

同样对于UI的设计部分，你可以直接打开AI文件进行修改，可以使用Adobe Illustrator，也可以使用Fireworks。

步骤三：创建FLA文件并保存

打开Flash CS4，创建一个AS3版本的FLA文件，保存文件到项目目录，并命名为“PhotoGallery.fla”。修改场景的尺寸为800×573，背景色为“0x333333”，保存文件。

步骤四：使用Quick Project选项自动创建Flash项目

现在就到了全文的重点了，我们开始使用无比强大的项目面板来创建一个Flash项目，步骤如下：

保持PhotoGallery处于打开状态，打开项目面板（窗口-->其它面板-->项目）

选择快速项目菜单，然后你就会注意到，在项目面板上已经可以看到项目的文件结构了。来花一些时间浏览一下包含的素材吧。

你会发现在图片目录中的文件没有列出来，这是因为这个目录中包含的都是图片，而这些图片格式并不是项目面板默认支持显示的格式，你可以通过以下的步骤来更改项目设置以显示这些图片：

1. 在选项菜单中选择项目属性
2. 将ai输入到过滤格式中，点击加号，然后输入字符串“ai”
   
3. 同理，将jpg这个格式也输入进去
4. 点击OK来保存上面的更改，现在你打开artwork和images目录，就会看到里面的文件了

步骤五：导入素材到FLA文件

这个步骤主要是将AI文件导入到FLA文件中，你可以在AI中预先做好了UI界面，那么在这个步骤之后，就可以直接在Flash里面使用了，因为都是矢量格式，所以导入的过程非常简便。

在Flash中，选择“文件” --> “导入” --> “导入到场景”，效果如下图所示：

下面的步骤就是将素材元件转换为ActionScript组件，使用项目面板，你可以将一个元件转换为MovieClip，并且绑定到一个ActionScript类。对这些素材的详细处理部分，请参考原文的第五部分：

http://www.adobe.com/devnet/flash/articles/flash_project_panel_03.html

步骤六：定义ActionScript模板

项目面板一个非常有用的特性就是支持ActionScript类模板的创建，一个ActionScript类模板实际上是定义了一个规则，当你创建一个类的时候，Flash会根据模板为你创建一些预定义的代码，来减轻你的工作量，并减少出错的几率。

要查看这个项目的ActionScript类模板，请打开templates目录，查看下面的boundClass_as3.as和standardClass_as3.as两个文件，当你创建类的时候，实际上会以这两个模板文件为基础

要自定义你的ActionScript类模板，你可以选择项目属性，然后定义你自己的ActionScript类模板所在的路径。

步骤七：定义XML数据源

这一部分比较简单，实际上在Images目录中已经包含了预定义好格式的XML文件，你需要做的工作是，修改XML中对应的字段，以匹配你的照片列表。

步骤八：定义文档类

使用Flash创建RIA应用，比较好的方式就是使用文档类，虽然你也可以把代码写在时间轴上，但从项目的维护和分工的角度考虑，这不是一个好的做法，而使用文档类的方式，使你更易于理解代码的结构，以及面向对象的机制。同样这个过程我们也会基于项目面板来做，下面是详细的步骤：

1. 在项目面板中点击创建Class的图标，类的名称如下：Class: src.gallery.PhotoGallery
2. 点击创建Class的按钮来创建这个类，注意创建后的文件会自动打开，你会看到基于模板创建的这个类已经包含了一些必要的代码，包括XML载入，键盘事件，和全屏的方法。
3. 要应用文档类到FLA的主时间轴，需要场景的空白部分点击以下，然后到属性面板中的文档类部分输入：Class: src.gallery.PhotoGallery
4. 在这个教程中你可以应用完整的代码以更快完成学习，请打开templates目录中的“PhotoGallery_completed.as”文件
5. 删除PhotoGallery.as中的代码，将刚才打开的那个文件中的代码复制到这里
6. 保存文件以应用刚才的更改
7. 按下Ctrl+Enter键测试代码

步骤九：添加链接ActionScript文件到项目

 在Flash中，我们通常制作一个电影剪辑，然后给它绑定一个类文件，以完成组件的功能，而使用项目面板和代码模板，我们可以很容易做到这一点，比如，在这个应用中，我们需要添加一个状态的显示文本用来显示当前的图片编号以及所有图片的总数，这个组件本身足够简单，实际上通过一个简单的文本框就可以做到了，这里为了演示这个功能，就把这个文本框放在电影剪辑内，并使用绑定到类的方式完成其中的逻辑，这样的好处是可以使用面向对象的思路，把这个组件作为单独的一个功能模块来考虑，减轻对主体代码的依赖，并易于维护。

要创建这个照片状态的组件，请遵循如下的步骤：

1. 在主时间轴上创建一个图层，命名为“status”
2. 添加一个动态文本框，命名为“status_txt”，将这个文本框定位到你想要的位置
3. 选择文本框，转换为MovieClip，并命名为"PhotoStatus"
4. 将实例名称改为status_mc
5. 选中库面板中的PhotoStatus元件，然后点击项目面板中的“创建Class”图标，设置类名称为src.gallery.PhotoStatus，并选择绑定类到库元件
6. 点击“创建Class”按钮，创建一个类，这个类将会被打开
7. 将类的代码替换为：
   

   package src.gallery
   {
      import src.core.Component;
    
      /**
      *    Class creates a status field component.
      *
      *    @langversion ActionScript 3.0
      *   @playerversion Flash 9.0
      *   @tiptext
      */  
      public class PhotoStatus extends Component
      {
         //*********************************
         // Properties:
    
         private var _index:uint = 1;
         private var _total:uint = 1;
    
         //*********************************
         // Initialization:
    
         public function PhotoStatus():void
         {
            // Initialize...
         }
    
         //*********************************
         // Properties:
    
         public function get index():uint
         {
            return _index;
         }
    
         public function set index(i:uint):void
         {
            _index = i;
            status_txt.text = "Image "+index+" of "+total;
         }
    
         public function get total():uint
         {
            return _total;
         }
    
         public function set total(i:uint):void
         {
            _total = i;
            status_txt.text = "Image "+index+" of "+total;
         }
      }
   }

8. 保存文件
9. 回到PhotoGallery.as文件，并添加下面的代码到300行的showImage方法
   

   / Update status
   status_mc.index = selectedIndex + 1;
   status_mc.total = imagesTotal;
   setChildIndex(status_mc, numChildren-1);

10. 保存文件
11. 测试应用

步骤十：发布文件

现在你就可以发布整个项目文件（按下F12键），并上传到网络上使用了。注意在FLA的发布设置中选中导出HTML文件，并且你不需要上传FLA和类文件到服务器。