项目五“旅行者网站” 综合项目 一、项目概述 1．项目概述

Presentation on theme: "项目五“旅行者网站” 综合项目 一、项目概述 1．项目概述"— Presentation transcript:

1 项目五“旅行者网站” 综合项目 一、项目概述 1．项目概述
旅行者网站中收录了8个精彩特色旅行目的地,提供各地介绍、 照片、游记、美食、购物等旅游信息，为喜欢旅行的人们展现一些 地方风貌，提供旅游攻略。本项目网站的导航结构如下图：

2 项目五 “旅行者网站” 综合项目 二、项目效果 重点与难点：网站的结构设计，Flash网站中常用的动作脚本，网站的导航

3 项目五“旅行者网站” 综合项目 三、操作步骤 1．导入页 先在photoshop中设计处理“导入页.psd”的文件。
（1） 启动Flash，设置文档属性，将文档保存为“index.fla”。 （2）导入“导入页.psd”文件并分层放置图形。如图： （3）根据设想制作动画。动画效果如下：

4 项目五“旅行者网站” 综合项目 2．首页 先在photoshop中设计处理“首页.psd”的文件。
（1） 新建文档，设置文档属性，将文档保存为“D航.fla” （2）创建各个链接按钮，如下图：

5 项目五“旅行者网站” 综合项目 （3）在这8个按钮上分别添加动作脚本，分别调用链接不同的页面， 本段代码调用“冰岛”页，如下图。其他代码类似，略。

6 项目五“旅行者网站” 综合项目 （4）回到“主场景”，制作“主菜单”影片剪辑元件，并将 影片剪 辑实例命名为“mc1”，然后在该实例上添加如下的动作脚本： onClipEvent （enterFrame） ｛ this._alpha += （my_alpha - this._alpha） * 0.3;｝ （5） 在“加载页面”层新建空白影片剪辑，实例名命名为“mc”。 （6） “加载菜单”层新建空白影片剪辑元件，命名为“menu”，添 加代码。在“menu”里创建影片剪辑元件“butt1” ，添加代码加 载页面。在“butt1”中制作菜单动画。

7 项目五“旅行者网站” 综合项目 （7）新建一个“帧标签”图层，在第2、8帧分别插入关键帧，命名帧 标签为“p1”和“p2”，新建一个“as”图层，在1、7帧分别插入 关键帧，添加动作脚本stop（），最终“首页”元件的内部图层结 构如下图：

8 项目五“旅行者网站” 综合项目 （8）同样方法制作其它7个底部的导航按钮，实例命名为： butt2- butt8，添加代码。
回到“主场景”，在最上方新建一个“遮罩层”，在上面绘 制一个和舞台大小相同的无边框矩形，设置该图层为遮罩层，所 有其它图层都被其遮罩，测试影片，首页的效果就全部做好了。

9 项目五“旅行者网站” 综合项目 3．冰岛页 先在photoshop中设计处理“冰岛.psd”的文件。
（1） 新建文档，设置文档属性，将文档保存为“D航bd.fla” （2）导入 “冰岛.psd”，保留图层如下图：

10 项目五“旅行者网站” 综合项目 （3）创建“导航总”元件，如下图。
（4）在“导航总”元件内再创建“导航”元件，在“导航”元件 内创建“圆”元件，如下图左，创建“矩形”元件，在“矩形” 内再创建按钮元件，如下图右。添加代码。

11 项目五“旅行者网站” 综合项目 （5）在“子导航”内部创建“菜单1”的影片剪辑元件，实例名 为“mcc”，双击进入该元件内部，创建按钮元件， “指针经 过帧”为一个影片剪辑，制作圆圈放大的效果。按钮实例命名 为“a1”，添加代码。 （6）使用相同的方法制作“菜单2”和“菜单3”，其实例名为 “mcc1”和“mcc2”，按钮分别为“a2”和“a3”，添加代码

12 项目五“旅行者网站” 综合项目 （7）调整 “子导航”元件的图层结构，导入“冰岛.psd图片， 调整内容，内部结构及子导航中各元件位置，如下图。

13 项目五“旅行者网站” 综合项目 （8）制作元件 “菜单11”， “菜单12”， “菜单21”， “菜 单31”，如下图左。子导航元件内部结构如下图右。

14 项目五“旅行者网站” 综合项目 （9）在“冰岛景色”图层的元件内部制作一个透明的按钮，并在 该按钮上添加脚本。 on （release） ｛
_root.mc.gotoAndPlay（“p6”）;//p6帧是冰岛景色动画 切换的那一帧的帧标签名 ｝ （10）用同样的方法完成各个子菜单的效果制作。

15 项目五“旅行者网站” 综合项目 （11）在“冰岛景色”和“灵动冰岛”两图层中制作动画。如下图。
这样“魅力冰岛”下面的两个导航的效果就做好了。

16 项目五“旅行者网站” 综合项目 （12）用与“魅力冰岛”子菜单制作方法，制作“初探冰岛”和“走遍 冰岛”子菜单。然后制作子菜单展开和向左收的动画效果，子导航 图层结构如下图：

17 项目五“旅行者网站” 综合项目 （13）回到“导航总”元件，制作动画。内部结构如下图：
（14）回到主场景，创建“冰岛”元件，做出冰岛图片变化的动画。 （15）回到主场景，命名帧标签，添加帧代码stop（），如下图：

18 项目五“旅行者网站” 综合项目 （16）导入“冰岛概况.psd”图片，创建“冰岛概况”元件。
（17）导入“经典路线前.psd”、“瓦特纳冰川.psd”等图片，制作动 画。主场景的最终图层结构如下图所示。

19 项目五“旅行者网站” 综合项目 4．玄武湖页 参照“冰岛页”的制作方法完成“玄武湖页”的制作，并把源 文件命名为“D航xh.fla”

20 项目五“旅行者网站” 综合项目 5．途客圈页 参照“冰岛页”的制作方法完成“玄武湖页”的制作，并把 源文件命名为“D航tk.fla”

21 项目五“旅行者网站” 综合项目 6．伦敦页 参照“冰岛页”的制作方法完成“伦敦页”的制作，并把源文 件命名为“D航rd.fla”

22 项目五“旅行者网站” 综合项目 7．丽江页 参照“冰岛页”的制作方法完成“丽江页”的制作，并把源文 件命名为“D航xh.fla”

23 项目五“旅行者网站” 综合项目 8．三亚页 参照“冰岛页”的制作方法完成“三亚页”的制作，并把源文 件命名为“D航sy.fla”

24 项目五“旅行者网站” 综合项目 10．“导入页”嵌入网页中
测试所有源文件，生成swf文件后，使用Dreamweaver软件 新建一个html页面，文件保存在和所有swf文件同一个文件夹 中，命名为“index.html”，然后把“index.swf”嵌入网页 中。双击“index.html”就可以观看整个网站的效果了。

25 项目五“旅行者网站” 综合项目 四、技术拓展 1. 网站动画中常用的动作脚本 （1）loadMovie
格式二：被代替的实例.loadMove（被加载的实例路径） （2）unLoadMovie 格式一：被卸载的影片剪辑实例. unLoadMovie（） 格式二：unLoadMovie（被卸载的影片剪辑实例）

26 项目五“旅行者网站” 综合项目 2. 网站的结构设计
2. 网站的结构设计 由于Flash网站中汇集了高清大图、视频、声效等比较大的 各类素材， Flash网站常会把一个个页面分别做成不同的源文 件，把这些文件在需要的时候再加载，每个文件也相对较小， 运行起来的速度便可以提高不少。在制作一个Flash酷站时网站 的层次结构不宜超过三级，层次太多的话网页之间的关系就会 比较复杂，关系容易混乱。

27 项目五 “旅行者网站” 综合项目 从Z轴的角度来研究一下Flash网站的层次结构， _root就是 level0，向上一层就是level1，依次类推。如下图是一个层级 实例。

28 项目五“旅行者网站” 综合项目 3. 导航菜单的分析
3. 导航菜单的分析 本项目的网站的文字导航，是做在了首页中，而并不是分 别做在某个子页中，一般来说整个网站的导航的这种结构是比 较方便的，如果做在子页中页面之间的链接就会相当的混乱 了，做在首页中，当点击某个按钮时就把相应的子页加载到首 页中，这样的结构是非常清楚的。

29 项目五“旅行者网站” 综合项目 五、练习 1. 制作一个简单的网页，首页按钮包括“公司简介、产品展示、 联系方式”等，要求在“产品展示”中放置同样大小的产品图 片，单击每个产品图片时会链接到相对应产品的大图片。同时 在每一页都要有返回按钮返回到首页。 2.请为自己制作一个Flash个人酷站。