【转】Gaia框架入门指南

http://blog.sina.com.cn/s/blog_55ff5d2d0100oc6l.html

 

1 Download and Installation(下载和安装)

 

入门篇
1.下载与安装
首先下载最新的Gaia框架的MXP文件，并安装。一旦Gaia安装成功，运行Flash，在菜单栏“窗口 > 其他面板 > Gaia Framework”中打开面板。(下载地址：http://www.gaiaflashframework.com/index.php)

2.创建一个Gaia工程
创建Gaia工程的第一步，就是选择你要使用ActionScript的哪个版本。点击 Create AS3 或 Create AS2 。将会引导你进入 Project Panel (工程面板)。
Gaia框架入门指南（Getting <wbr>Started）

3.工程面板
先看图：
Gaia框架入门指南（Getting <wbr>Started）
首先要做的就是命名你的工程。你可以在任何时候修改，所以在这里你可以保留默认值。
3.1. 工程文件夹
下一步，选择一个文件夹来存放你的项目。你可以预先创建好目录，也可以在打开的对话框中创建。
3.2. 属性
一旦你命名了你的工程并且选择了目录，那么现在就可以设置一些基本属性了。你可以设置舞台尺寸，对齐方式，帧率和背景颜色。注意你可以在以后更改这些值，只需点击Gaia就可以应用到你的Flash文件中。
3.3. 文件夹路径
最后一步是可选的，这一步骤是用于修改你的工程文件夹路径。Gaia默认使用行业标准：
* lib - .fla文件存储
* bin - .swf, .html等文件存储
* src - .as文件(类)存储
还有一种通用设置：
* src - .fla文件存储
* src/classes - .as文件存储
* deploy - .swf, .html等文件存储
你可以根据自己的喜好设置成其他值，如"flash"作为你的Flash文件存储目录，或者你喜欢将类文件放在同一目录，例如"flash/classes"。有些人喜欢用"www"作为发布目录路径。Gaia具有足够的扩展性，可以让你根据自己的喜好设置文件夹并方便命名。
你也可以自定义site.xml文件的存放。不过现在，我们将这个项保留空白。
点击 Create New Project，Gaia将在几秒钟内为你创建好你的项目，并且会自动切换到 Scaffold 标签。我们稍后回到这里。现在，我们先去看下Gaia生成的文件吧。

4.工程文件
Gaia框架入门指南（Getting <wbr>Started） 
正如你看到的，Gaia创建了你在面板中设置的文件夹以及文件夹路径。

  • lib 文件夹包含 main.fla , preload.fla
  • bin 文件夹是用于发布文件的
  • src 文件夹包含框架的类文件
  • templates 文件夹包含模板fla和类文件
  • project.gaia 文件夹是一个xml配置文件，它包含了所有关于你的工程的信息

打开bin文件夹。
Gaia框架入门指南（Getting <wbr>Started） 
在这种情况下，它包含了一个 index.html 文件，一个 preload.swf 文件，一个 site.xml 文件，还有一个叫 js 的文件夹，这个文件夹里包含了 SWFObject 和 SWFAddress 。如果你打开 index.html 文件，你将会看到已经使用 SWFObject 嵌入的swf文件，所有的尺寸和对齐方式也包含在内。
那么就让我们来看看 site.xml 文件吧。

5.Site XML
Gaia使用一个XML文件来定义站点结构，文件名叫site.xml。
在你喜欢的xml编辑器中打开 site.xml 文件。缺省的 site.xml 是这样的：
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
5.1. 分支
Gaia使用分支(就像一棵树)作为它组织站点的方式。分支的工作方式就像文件夹路径和url一样，每个页面id使用斜杠分开。
上面的xml表示一个站点仅有一个分支："index/nav/home"。
一个分支包含页面节点，这个节点可以有若干子节点。每个页面节点代表一个swf，这个swf可以载入作为分支的一个部分。
Gaia加载全部分支，从主页到每个节点的最后一个分支(最终页)。在上面的示例中，你不能载入"index/nav"分支，因为页面"nav"至少有一个分支，在这个案例中有一个id为"home"的页面。如果你尝试载入"index/nav"，Gaia将自动载入"index/nav/home"。你可以重写这种行为，通过页面节点定位属性。
更详细的关于 site.xml 节点和他们的属性，你可以从文档的 Site XML 篇章中找到。

6.XML树结构
在我们自定义 site.xml 之前，让我们来看看它的结构，以及如何与Gaia加载内容进行关联的。Gaia按顺序从分支的顶部往底部加载，堆起swf文件，这样子剪辑是在其父剪辑的上层。你可以使用下面描述的depth属性来重写这个行为。
6.1. Site节点
site.xml 的根节点称为 <site>。这个<site>节点不需要属性，有可选标题和菜单属性可由你设置。
6.2. Index页
<site> 节点的第一个孩子节点是 带有 id="index"的<page>节点。Gaia的方便之一就是将第一个页面命名为"index"。
这个"index"页面很特殊，因为两个原因：它可以由自身载入，并且可以在其他页面载入前变化；缺省情况下，它也可以在其他所有页面之后载入。
6.3. 页面
在 site.xml 模板中，第一个子孩子"index"页是一个id为"nav"的页面节点。"nav"页已经设置为全局导航：通过设置可选项"depth"属性为"top",它在所有其他页面之前载入，更重要的是，在这个配置中它是持久的，因为它是"index"页的唯一孩子，是这个树中每个树枝的部分。
下一个孩子页是这个示例分支中的最后一个页，在这个案例中称为"home"。这个页有个标题属性设置为"Home"。它将出现在浏览器标题栏中，你可以在站点节点属性标题中看见这个%PAGE%字符串。它也作为"terminal page"("最终页")而被大家熟知，因为它是分支中最后一个孩子。
唯有分支的最终页(或带有landing="true"的页)会在浏览器标题栏中显示他们的标题，所以你仅仅需要设置一个最终页的标题来替代%PAGE"值。
预加载在其加载过程中显示各个独立页面的标题，因此，为了这个目的你可以为每个页面设置标题如果你愿意，这个话题会在文档的 Preloader 篇章中深入讨论。

7.添加页面到 Site XML
一个站点中如果只有一个分支也不能算是一个站点，所以让我们在天津更多页面吧！
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="people" src="people.swf">
<page id="friends" title="Friends" src="friends.swf" menu="true"/>
<page id="family" title="Family" src="family.swf" menu="true">
<page id="tree" title="The Family Tree" src="familytree.swf"/>
</page>
</page>
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
现在我们有了惊人的三个分支啦！他们是：

  1. "index/nav/people/friends"
  2. "index/nav/people/family/tree"
  3. "index/nav/home"

注意在每个分支中仅仅是最后一个孩子节点有一个标题，在<site>节点有一个属性，以及某个页面有"menu"。
如果你希望从你的站点有个右键菜单导航，添加"menu"属性到site节点并将其设为"true".
如果有某个特殊的页你希望显示右键菜单，设置这个页面节点的menu="true"，并且给这个页面节点一个标题。
注意：页面如果没有标题将不会在右键菜单中显示。
正如你看到的，family页面节点有个右键菜单，但是它不是那个分支的最终页。这很好，因为Gaia将在右键中显示"Family"，但它将指向"index/nav/people/family/tree"。
好吧！我们有一个网站的框架结构，足以让我们测试网站，那让我们开始吧。将上面的xml内容复制并粘贴到 site.xml文件并保存它。

8.脚架
Gaia框架入门指南（Getting <wbr>Started） 
好了，现在是让人兴奋的部分啦。脚架！
8.1. 类包
回到Flash中Gaia框架的面板中。Scaffold标签已经选中了，在顶部的类包输入框中"pages"也已经存在了。
如果你不熟悉类包，没关系，这非常容易。遵循的基本规则是反过来使用客户的网站域名，然后添加项目的名称。
例如，如果你客户的网站是 company.com，并且工程成为 website，你的类包可以是：
com.company.website
现在，让我们保持类包为缺省值"pages"。
8.2. Scallold Project(架构工程)
现在，你需要做的就是点击 Scaffold Project 按钮，Gaia会帮你完成剩下的工作！
Gaia Scaffolding 基于你的 site.xml 里的 .swf 名字创建了这个站点所有的 FLA 文件。它设置了所有它们的发布路径到发布目录(bin)，添加所有页面文件到发布面板，为每个页面创建了一个类文件并将类设置每个Flash页面的文档类。AS2 scaffolding为每个Flash页面创建了 exclude.xml 文件，大大减小了swf文件的大小。
一旦它完成生成所有站点文件，发布标签就可用了，Gaia发布整个站点并运行 main.fla。
使用你的右键菜单吧，你可以浏览网站，观看每个部分的过渡。
你可以打开 lib 和 bin 文件夹看看所有的Flash和swf文件，你可以看看在src文件夹中的"pages"文件夹以及看看所有Gaia生成的根据页面id命令的页面的类。
祝贺你，你在几分钟内完成了你的第一个Gaia框架站点。
现在，是时候到 Pages 文档页面学习一下Gaia是怎么工作的了。

附加资源：
1. MXP是什么文件？
A: MXP是Flash扩展文件类型。

2. 怎么安装MXP文件？
A: 如果Flash完整安装，一般都带有扩展管理器。如果没有扩展管理器，你可以到这里下载：http://www.adobe.com/cn/exchange/em_download/。

posted on 2012-02-20 16:32  格雷普琳斯  阅读(640)  评论(0)    收藏  举报

导航