Flash MX 2004网站开发实战指南
数码时尚
Flash作为矢量动画制作软件，其用途和功能已超越了普通动画制作软件的标准，正在向一个交互平台的方向前进。利用Flash实现交互式多媒体网站，可以将不同类型的多媒体元素集成，实现声、形、画的动态酷炫效果，使你的网络别具一格，更具个性。
本文以Flash MX 2004为基础，以一个虚拟公司网站建设为实例，向你讲述交互式多媒体网站实现的方法与技巧。
一、Flash网站的开发流程分析
一个Flash网站的开发首先是从分析着手，我们必须根据实际需要来分析整个网站的需求，并整理出相应的策划方案。
1.网站结构分析
网站的结构分析一般是从网站的功能或内容角度进行，我们往往把网站内具有相同功能或内容类别的部分归为一个栏目，然后对这个栏目下包容的元素重新进行划分，从而得到相应的子栏目。例如我们现在要建设的这个网站就是根据内容方面的需求来划分网站结构的。如图1所示。
在大多数情况下，出于减少下载时间的考虑，我们会将比较大的文件(例如声音、图片、网站栏目间公用的一些符号等)单独放置在主文件的外部，在需要这些元素的时候再动态载入到Flash网站文件中。
2.网站功能分析
网站中除了栏目的分析和策划外，很多情况下需要对网站涉及到的功能进行预先分析和策划。常见的Flash网站涉及到的功能包括音乐开关、栏目导航切换、与后台数据库交互等。本实例中所涉及到的功能主要包括音乐开关功能(如图2中标识2)和栏目切换功能(如图2中标识1)。
3.网站界面的风格
Flash网站的界面风格是后期设计制作的重点，我们需要根据栏目的划分、功能的设计以及网站的视觉效果设计来确定网站界面的风格。在设计界面的同时，我们必须要考虑到用户的使用，必须让规划出来的界面适合用户的使用，方便信息的交互。
4.其他问题
以上的分析是所有网站都必须要做的工作，但是在一些大型的网站项目开发前期，我们还有其他工作要做，比如日程表、人力分配和前后台配合规划等，考虑到本文篇幅和范围，这里不再细谈。
5.素材准备
完成相关的策划工作后，我们需要根据网站的内容来收集相关的设计素材，并预先处理成Flash可导入格式导入到Flash项目文件中。其中，图片要根据需要导入，声音文件要预先将需要的部分转换成WAV或者MP3格式后导入。
以上工作完成，建设一个Flash网站的前期工作已准备就绪，下面根据我们前期的工作来具体进行设计制作。
二、网站背景设计与制作
网站背景设计是网站风格的体现，因此我们首先进行Flash网站背景的设计与制作。
1.层结构设计与制作
层结构设计就是根据网站的内容，在Flash文件中建立一个合理的层结构，为后面的设计和制作打下一个铺垫。
(1)启动Flash，建立一个新文档。在Properties(属性)面板中，单击“Size”(大小)按钮，在出现的对话框中修改其“Width”(宽)为“700px”，“height”(高)为“350px”高，“Background color”(背景色)为“白色”，“Frame rate”(帧频)为“24fps”。
(2)在Timeline(时间轴)面板中，单击“Insert Layer”(插入图层)按钮，根据网站涉及到的功能和内容插入5个图层，并按照我们的需要对其重命名。如图3所示。
action层：脚本控制层，用来存放网站内的一些脚本程序。
sound层：声音层，用来存放网站背景音乐和控制。
content层：内容层，用来存放网站的各个栏目以及其他浮动面板。
menu层：导航栏层，用来放置和导航有关的元素。
background层：背景层，存放网站的背景。
2.背景的设计与制作
在时间轴面板上单击“background”层，使它处于编辑状态。
(1)按下Ctrl+L组合键打开Library(库)工作面板，并从库面板的“movs”文件夹中拖动“mov_back”符号到场景中(库中的所有元素需要你在制作前预先导入，可根据需要自行设计，下同)。选中“mov_back”符号，在其属性面板中单击“Size”(大小)按钮，在出现的对话框中修改其宽为“385px”，高为“394px”，x轴坐标为“-127”，y轴坐标为“-37”，透明度为“25%”，在“Instance Name”(实例名称)输入框中输入“back_mc”。
(2)选取工具箱中的矩形工具，在场景中绘制一个矩形，删除绘制矩形的填充效果，并利用属性面板设置矩形边框属性为宽“700px”，高“350px”，x轴坐标为“0”，y轴坐标为0，颜色为“#CCCCCC”。
(3)选取工具箱中的文本工具，在场景的左上方键入公司的名称(本例中为“ichingspace.net”)。
完成以上步骤后，按下Ctrl+Enter组合键测试影片，可以看到我们设计的背景效果。如图4所示。
在很多情况下，Flash网站的背景是以动画的形式存在的。而在一些特殊需求下，用户还可以对背景图案或效果进行定制，这些部分的内容涉及到Flash本身的特殊功能，有兴趣的读者可参考相关书籍。
三、网站导航与栏目设计
网站导航是网站至关重要的组成部分。一般来说，导航从表现形式上有弹出式(如Windows系统的“开始”菜单)、渐隐渐现式(如Windows XP的渐隐渐现菜单)、切换式和异型导航等。但无论导航的表现形式如何，其后面的导航控制都是类似的，即根据用户选择的栏目名称来进行栏目的切换。
1.制作弹出式菜单
(1)在时间轴面板上单击“menu”层。按下Ctrl+F7组合键打开Components(组件)工作面板，并从“UI Components”列表中拖拉“MenuBar”组件到场景中。
(2)单击“MenuBar”组件，利用属性面板调整它的属性为宽“700px”，高“21px”，x坐标为“0”，y轴坐标为“40”。并为“MenuBar”组件重命名为“menu”。
(3)在时间轴面板上单击“action”层。选择“action”层的第一帧，并按F9键打开脚本编辑窗口。录入以下脚本：
// 设置全局风格，设置组件颜色风格
_global.style.setStyle("themeColor", "0x00CCFF");
// 设置全局风格，设置组件中文字的尺寸
_global.style.setStyle("fontSize", "9");
// 设置全局风格，设置组件中文字的字体
_global.style.setStyle("fontFamily", "Verdana");
// 设置全局风格，设置组件中的色彩
_global.style.setStyle("color", "0x666666");
// 为场景中名称为menu的MenuBar增加一个Products菜单
var menu1 = menu.addMenu("Products");
// 转换控制到menu1控制域
with (menu1) {
// 为menu1(即Products菜单栏目)增加子栏目
addMenuItem("Product1");
addMenuItem("Product2");
addMenuItem("Product3");
}
// 为场景中名称为menu的MenuBar增加一个Services菜单
menu.addMenu("Services");
// 为场景中名称为menu的MenuBar增加一个Clients菜单
menu.addMenu("Clients");
// 为场景中名称为menu的MenuBar增加一个Contact菜单
menu.addMenu("Contact");
// 为场景中名称为menu的MenuBar增加一个About菜单
var menu2 = menu.addMenu("About");
// 转换控制到menu2控制域
with (menu2) {
// 为menu2(即About菜单栏目)增加子栏目
addMenuItem("Our history");
addMenuItem("Copyright");
}
// 新生成一个listenerObject对象
listenerObject = new Object();
// 为新生成的listenerObject对象增加change方法
listenerObject.change = function(evt){
// 调用content_mc实例的change方法
content_mc.change(evt.menuItem.attributes.label);
}
// 为menu2增加listener(监听)机制
menu2.addEventListener("change", listenerObject)
// 为menu1增加listener(监听)机制
menu1.addEventListener("change", listenerObject)
stop();
上述代码中，黑体部分帮助MenuBar组件捕获用户所选择的菜单项目(evt.menuItem)，并把菜单的标签(evt.menuItem.attributes.label)作为参数传递给content_mc(内容展示movieclip)。
完成以上步骤后，按下Ctrl+Enter组合键测试影片。
从导航部分的介绍，我们已经了解了如何通过脚本来获取用户所选择导航栏目，那么我们应该怎样将这个获取到的信息转换到栏目的切换上呢？下面我们来看看内容演示movieclip以及栏目的切换功能是如何设计和制作的。
2.栏目设计
对于一个完整的网站来说，网站栏目相对于其他部分来说就是一个小型的“网站”，我们通常称之为模块。一个栏目(即模块)可以包含自己的背景、子导航、交互控制等，因此我们通常利用影片剪辑作为栏目的容器。
(1)按下Ctrl+F8组合键，在出现的对话框中创建一个新的影片剪辑符号，命名为“mov_content”，单击“OK”按钮。
(2)为mov_content建立以下栏目层结构：
action：放置栏目脚本控制用的层。
label：放置栏目名称标签(用于栏目的跳转使用)和子栏目内容用。
background：放置背景内容。
(3)单击时间轴面板上的插入图层按钮在时间轴上增加一个新层，并将其命名为action。同样的操作，添加label和background层。
(4)在时间轴面板上单击“background”层。按下Ctrl+L组合键打开库工作面板，将“background_image_01”图片拖动到场景中，并利用属性面板设定其属性为x轴坐标“-73”，y轴坐标“-122”。
注意：你也可以利用绘图工具来绘制一些其他图形，衬托背景图片。
(5)在时间轴面板上单击“label”层。利用属性面板为第一帧增加名称为“default”的标签，然后利用文本工具在label层的第一帧增加欢迎标题(本例中为“welcome to huiyi”)和介绍文字。
(6)在时间轴面板上单击“action”层。选择该层的第一帧，并按F9键弹出脚本编辑窗口，输入“stop();”脚本。
欢迎状态(即网站没有接受到如何用户交互时)下的界面基本制作完成，其他子栏目创建方法类似，这里不再重复。如图5所示。
3.制作滚动文本框
在网站的内容显示部分，我们预留的显示空间往往不够容纳下当前部分的所有文字。此时，我们需要使用滚动文本框组件来完成。
(1)在时间轴面板上单击“background”层，并将播放头移动到Product1标签处，用来编辑需要的文字内容。
(2)按下Ctrl+F7组合键打开组件面板，并从“UI Components”列表中拖动“TextArea”组件到场景中，并利用属性面板调整其属性为宽“169px”，高“207px”，x轴坐标“-260”，y轴坐标“-51”。
(3)按下Alt+F7组合键，打开组件参数设置面板，在“Text”参数的右侧输入介绍文字即可。
4.利用脚本控制栏目切换
实现栏目切换的方法非常丰富，这里，我们使用的是渐隐渐现切换。整个切换的过程完全通过脚本来实现。
(1)回到主场景中，确定当前处于编辑的层为“content”，从库工作面板中拖动“mov_content”到场景中，并利用属性面板调整其属性，x轴坐标为“18”，y轴坐标为“9”，并将其命名为“content_mc”。
(2)单击“content_mc”，按下F9键打开脚本编辑窗口，录入以下脚本：
// 在实例初始载入到当前帧时，执行load事件内的脚本
onClipEvent (load) {
// 设置状态变量的类型为String，并设置初始值为none
var status:String = "none";
// 设置子栏目的变量类型为String，并设置初始值为“default”
var submenu:String="default";
// 设置中心位置的变量类型为Number，并设置初始值为当前剪辑的x坐标
var centerx:Number = _x
// 为content_mc增加一个change方法
function change(sub:String):Void {
// 设置子栏目submenu为指定栏目名称sub
submenu = sub;
// 设置当前状态status为渐隐fadeout
status = "fadeout";
}
}
onClipEvent (enterFrame) {
if (status == "fadeout") {
// 如果当前状态status为fadeout
// 控制content_mc的透明度降低，并相左移动一定距离
_alpha = _alpha + (0 - _alpha) / 3;
_x = _x + (centerx-50 -_x)/4;
if (_alpha <= 5) {
// 如果content_mc的透明度小于5，则跳转到对应的子栏目
// 并设置当前状态为渐现
gotoAndStop(submenu);
status = "fadein";
}
}
// 如果当前状态status为fadein
// 控制content_mc的透明度提高，并相右移动一定距离
else if (status == "fadein") {
_alpha = _alpha + (100 - _alpha) / 3;
_x = _x + (centerx -_x)/4;
if (_alpha >= 95) {
// 如果content_mc的透明度大于95，则调整其透明度到100
// 并设置当前状态为none
status = "none";
_alpha = 100;
}
}
}
完成以上步骤，按下Ctrl+Enter组合键测试影片，可以看到我们设计的效果。
至此，一个Flash网站骨架基本搭建完成，下面我们需要为这个骨架增加一些色彩。
四、为网站添加音乐及音乐控制
音乐能为网站增添效果，因此为许多Flash网站所采用。下面我们设计制作一个波形图动画及对应的音乐开关。
1.声音文件的导入与输出
音乐的控制基本上是由脚本完成的，因此我们需要对背景音乐进行一次“Linkage”输出设置，这样才能够利用脚本语言来控制音乐。
(1)按下Ctrl+L组合键打开库面板，找到“bgmusic”音乐片段，单击鼠标右键，在出现的菜单中选择“Linkage”命令，出现“Linkage Properties”(属性)对话框。
(2)选中“Export for ActionScript”(为动作脚本导出)以及“Export in first Frame”(在第一帧导出)选项，并且在“Identifier”(标识符)框中键入“bgmusic”，单击“OK”按钮退出。
注意：如果你导入到Flash中的音乐是WAV格式，Flash在默认的声音输出时会将WAV格式的声音文件转换为MP3格式。如果对测试的效果不满意，建议你进行每一个声音的定制化处理，即针对每一个声音文件进行MP3质量的测试和调节，以便得到最佳的声效。
2.音乐波形动画的制作
创作音乐的波形动画效果可以有很多种方法，在创作这些波形动画时要尽量避免与音乐结构不和谐的情况发生。因此创作波形动画时，我们通常将动画的节奏设置快一些。在本实例中，我们将创作一个柱状波形动画。
(1)按下Ctrl+F8组合键，在出现的对话框中创建一个新的影片剪辑符号，命名为“mov_sound”，单击“OK”按钮。
(2)为mov_sound建立以下栏目层结构：
action：声音脚本控制层。
label：波形图状态标签层。
button：声音状态切换按钮层。
Title：波形图注释层。
sound eq：波形动画层。
(3)单击时间轴面板上的插入图层按钮增加一个新层，双击层将其命名为“action”。同样操作，添加label、button、Title和sound eq层。
(4)以sound eq为当前编辑层，选取工具箱中的矩形工具在第1帧中绘制出5个宽度为11，高度小于51的无边框矩形，利用属性面板分别调节它们的x轴坐标分别为“-31.9”、“-19”、“-6.2”、“6.8”、“19.6”，并且利用对齐工具使它们底部对齐。同样操作，继续在3、5、7、9、11、13、16帧处，按下F6键，分别生成7个关键帧，并调节这5个矩形的高度。
(5)分别在15和23帧处按下F6键，生成2个新的关键帧，调节5个矩形图形的高度为“5.9”。
(6)1～3、3～5、5～7、7～9、9～11、11～13、13～15、16～23帧之间生成形状过渡动画，并且调节相邻形状过渡的“Easing”值(该值可随意调节，只要相邻的过渡“Easing”值相反即可)，这样就可以产生快速变化的效果了。
(7)以Title为当前编辑层，利用文本工具在波形图的下方添加文字“音乐”，作为该声音影片剪辑的注释文字；以Label为当前编辑层，为第1帧增加“Sound ON”标签，为第16帧增加“Sound OFF”标签。
以上波形动画主要分成2个功能区域，从第1到第15帧的动画是声音开关处于“开”状态下的动画，而后面的16到23帧之间的动画，是从播放到静止状态(即“关”状态)的切换动画。如图6所示。
完成以上操作，一个音乐波形动画已有了一个基本的雏形，下面我们来看看如何进行波形动画的控制。
3.音乐开关的脚本控制
音乐开关的控制包括声音对象(sound object)的初始化以及利用按钮来控制声音对象的状态(切换声音状态)。
(1)以button层的第一帧为当前编辑层与帧，按下Ctrl+L组合键打开库面板，并拖动“btn_sound”按钮到场景中。选取工具箱中的变形工具调节按钮的大小，使按钮可以覆盖整个波形动画区域。
(2)单击该按钮，按F9键打开脚本编辑窗口，输入下列代码：
// 鼠标在按钮上单击时，执行release事件内的脚本
on (release) {
//调用声音bg_snd对象的stop方法，停止bg_snd对象的播放
bg_snd.stop();
//影片剪辑跳转到声音停止“Sound OFF”部分的切换动画
this.gotoAndPlay("Sound OFF");
}
(3)在第16帧处，按下F6键，生成一个新的关键帧，并改变当前帧内按钮的脚本为：
// 鼠标在按钮上单击时，执行release事件内的脚本
on (release) {
//调用声音对象，bg_snd对象的start方法，开始bg_snd对象的播放
bg_snd.start(0,9999);
//影片剪辑跳转到声音播放“Sound ON”部分
this.gotoAndPlay("Sound ON");
}
(4)以action为当前编辑层，在第15和23帧处按下F6键，分别插入一个关键帧，并分别录入以下脚本：
// 跳转到第一帧继续播放
gotoAndPlay(1);
// 停止播放
stop();
(5)退出mov_sound的编辑，回到主场景中。以sound为当前编辑层，按下Ctrl+L组合键打开库面板，并拖动“mov_sound”符号到场景的右下角。选中“mov_sound”符号，按F9键弹出脚本编辑窗口，并录入以下脚本：
// 在初始载入到当前帧时，执行load事件的脚本
onClipEvent (load) {
// 新生成一个命为bg_snd的声音对象
bg_snd = new Sound();
// 为bg_snd声音对象绑定bgmusic声音
bg_snd.attachSound("bgmusic");
// 开始bg_snd声音对象的播放
bg_snd.start(0.1,9999);
}
五、制作浮动面板
大多数网站都会有一个类似于Photoshop工具箱的浮动面板，该面板提供了网站导航以外的设置功能，如背景切换、连接按钮等，如图7左侧的浮动面板。
1.制作浮动面板的背景
(1)回到主场景，按下Ctrl+F8组合键，在出现的对话框中创建一个新的影片剪辑，命名为“mov_panel”，单击“OK”按钮进入编辑界面。
(2)为mov_panel建立以下层目录结构：
button：声音状态切换按钮层。
text：文字注释层。
background：背景内容层。
(3)单击时间轴面板上的插入图层按钮增加一个新层，并将其命名为“button”。同样操作，添加余下的text和background层。
(4)在时间轴面板上单击“background”层。按下Ctrl+L组合键打开库面板，从“Elements”文件夹中拖动“MenuBarBackMiddle”到场景中，并设定它的宽度为“166px”，x轴坐标为“11.8”，y轴的坐标为“-10.5”；按下Ctrl+L组合键打开库面板，从“Elements”文件夹中拖动“MenuBarBackLeft”到场景中，并设定它的x轴坐标为“6.8”，y轴的坐标为“-10.5”；按下Ctrl+L组合键打开库面板，从“Elements”文件夹中拖动“MenuBarBackRight”到场景中，并设定它的x轴坐标为“178.1”，y轴的坐标为“-10.5”。
(5)按下Ctrl+L组合键打开库面板，拖动“btn_drag_bar”到场景中，并设定它的x轴坐标为“7.8”，y轴的坐标为“-9.4”。
2.实现浮动面板的可拖动功能
单击“btn_drag_bar”按钮，并按F9键打开脚本编辑窗口，录入以下脚本；
on (press) {
// 在鼠标按下的时候，开始拖动
startDrag(this,false );
}
on (release, releaseOutside) {
// 在鼠标松开或者在按钮外松开时，停止拖动
stopDrag();
}
3.背景切换的功能实现
浮动面板背景和可拖动效果制作完成后，下面的工作就是为面板增加对应功能的注释文字和按钮功能。
(1)在时间轴面板上单击“text”层。选取工具箱中的文本工具，单击场景并输入文字“背景”，利用属性面板来设定其属性为x轴坐标为“19.8”，y轴坐标为“-8”。
(2)使用文本工具，单击场景并输入文字“-1- 2- 3-”，利用属性面板来设定其属性为x轴坐标为“50.3”，y轴坐标为“-8”；使用文本工具，单击场景并输入文字“首页”，利用属性面板来设定其属性为x轴坐标为“136”，y轴坐标为“-8”；使用文本工具，单击场景并输入文字“￥(?)”，利用属性面板来设定其属性为字体为“Wingdings”，x轴坐标为“163”，y轴坐标为“-8”。
(3)在时间轴面板上单击“button”层。按下Ctrl+L组合键打开库面板，拖动“btn_rect”到场景中，并调整其位置覆盖下层的“-1-”字样。同样操作，拖动2个“btn_rect”按钮到场景，分别覆盖在“2”、“3”。
(4)单击“1”文字上面的按钮，并按F9键打开脚本编辑窗口，录入以下脚本：
on (release) {
// 当鼠标单击时，主场景中的背景切换到第1帧
_root.back_mc.gotoAndStop(1);
}
(5)单击在“2”文字上面的按钮，并按F9键打开脚本编辑窗口，录入以下脚本：
on (release) {
// 当鼠标单击时，主场景中的背景切换到第2帧
_root.back_mc.gotoAndStop(2);
}
(6)单击在“3”文字上面的按钮，并按F9键打开脚本编辑窗口，录入以下脚本：
on (release) {
// 当鼠标单击的时，主场景中的背景切换到第3帧
_root.back_mc.gotoAndStop(3);
}
4.网站连接功能的实现
网站的连接功能在Flash中可以利用行为(Behavior)来实现，但是为了让大家明白具体的操作方式，我们还是从脚本编辑的角度来实现该功能。
按下Ctrl+L组合键打开库面板，拖动“btn_rect”到场景中，并调整其位置覆盖下层的“￥(?)”字样，并保持按钮的选择状态。按F9键打开脚本编辑窗口，录入以下脚本：
on (release) {
// 当鼠标单击时，弹出新的浏览器窗口，并在这个窗口中打开指定网址
getURL("http://ichingspace.vip.sina.com","_blank");
}
完成以上步骤后，按下Ctrl+Enter组合键测试影片，可以看到我们设计的效果。
六、制作Loading预载程序及网站发布
如果我们的Flash网站最后生成的SWF文件较大，那么我们就必须为影片增加一个序幕，给浏览者一个直观的反馈，到底我们的影片已经下载了多少。
(1)按下Ctrl+F8组合键，在出现的对话框中创建一个新的影片剪辑符号，命名为“mov_loader”，单击“OK”按钮界面。
(2)选取工具箱中的矩形工具，在场景中绘制一个无边框矩形，并利用属性面板设置其宽度为“1px”。
(3)在第100帧处插入一个新的关键帧，并利用属性面板设置它的宽度为“300px”。
(4)退出编辑界面回到主场景中，按下Shift+F2组合键打开场景面板，增加一个新的场景，命名为“Loading”，并调整场景的顺序在内容所在的场景之前。
(5)选中“Loading”场景，按下Ctrl+L组合键打开库面板，并拖动“mov_loader”符号到场景中。选中mov_loader符号，按F9键打开脚本编辑窗口，并录入以下脚本：
// 在初始载入到当前帧时，执行load事件内的脚本
onClipEvent (load) {
// 定义百分比变量percent，并设置初始值为1
var percent:Number=1;
// 停止主场景和mov_loader的播放
_root.stop();
this.stop();
}
onClipEvent (enterFrame) {
// 获取当前已载入影片的百分比percent
percent = Math.floor(100*_root.getBytesLoaded()/_root.getBytesTotal());
// 控制序幕动画跳转到和percent对应的部分
this.gotoAndStop(percent)
// 如果当前载入的影片百分比超过99%，序幕结束
if( percent >=99){
// 主场景开始播放
_root.play();
}
}
至此，我们的Flash网站完全制作完毕。
单击“File→Publish(发布)”菜单命令，Flash就会自动生成一个包含网站影片的HTML页面。将这个HTML页面和网站影片SWF文件上传到服务器上即可。
Flash网站的建设内容远远超出本文介绍的范围，并且在实际的操作过程中，脚本控制也远远超出本文提供的控制手段，表现的手法也更加异彩纷呈。但是，标准的Flash网站都是按照本文介绍的流程和思路进行开发，只不过熟练的设计师在实际操作时能更游刃有余而已。