ASP+FLASH+ACCESS教程.docx
《ASP+FLASH+ACCESS教程.docx》由会员分享，可在线阅读，更多相关《ASP+FLASH+ACCESS教程.docx（49页珍藏版）》请在冰豆网上搜索。
ASP+FLASH+ACCESS教程
用Flash做网站（初学想做者必看）
2005-4-210:
48:
29 来源：
本站 评论：
4
<>
视力保护色-
字体：
大 中 小
Flash作为矢量动画制作软件，其用途和功能已超越了普通动画制作软件的标准，正在向一个交互平台的方向前进。
利用Flash实现交互式多媒体网站，可以将不同类型的多媒体元素集成，实现声、形、画的动态酷炫效果，使你的网络别具一格，更具个性。
本文以FlashMX2004为基础，以一个虚拟公司网站建设为实例，向你讲述交互式多媒体网站实现的方法与技巧。
一、Flash网站的开发流程分析
一个Flash网站的开发首先是从分析着手，我们必须根据实际需要来分析整个网站的需求，并整理出相应的策划方案。
1.网站结构分析
网站的结构分析一般是从网站的功能或内容角度进行，我们往往把网站内具有相同功能或内容类别的部分归为一个栏目，然后对这个栏目下包容的元素重新进行划分，从而得到相应的子栏目。
例如我们现在要建设的这个网站就是根据内容方面的需求来划分网站结构的。
在大多数情况下，出于减少下载时间的考虑，我们会将比较大的文件（例如声音、图片、网站栏目间公用的一些符号等）单独放置在主文件的外部，在需要这些元素的时候再动态载入到Flash网站文件中。
2.网站功能分析
网站中除了栏目的分析和策划外，很多情况下需要对网站涉及到的功能进行预先分析和策划。
常见的Flash网站涉及到的功能包括音乐开关、栏目导航切换、与后台数据库交互等。
本实例中所涉及到的功能主要包括音乐开关功能（如图2中标识2）和栏目切换功能。
3.网站界面的风格
Flash网站的界面风格是后期设计制作的重点，我们需要根据栏目的划分、功能的设计以及网站的视觉效果设计来确定网站界面的风格。
在设计界面的同时，我们必须要考虑到用户的使用，必须让规划出来的界面适合用户的使用，方便信息的交互。
4.其他问题
以上的分析是所有网站都必须要做的工作，但是在一些大型的网站项目开发前期，我们还有其他工作要做，比如日程表、人力分配和前后台配合规划等，考虑到本文篇幅和范围，这里不再细谈。
5.素材准备
完成相关的策划工作后，我们需要根据网站的内容来收集相关的设计素材，并预先处理成Flash可导入格式导入到Flash项目文件中。
其中，图片要根据需要导入，声音文件要预先将需要的部分转换成WAV或者MP3格式后导入。
以上工作完成，建设一个Flash网站的前期工作已准备就绪，下面根据我们前期的工作来具体进行设计制作。
二、网站背景设计与制作
网站背景设计是网站风格的体现，因此我们首先进行Flash网站背景的设计与制作。
1.层结构设计与制作
层结构设计就是根据网站的内容，在Flash文件中建立一个合理的层结构，为后面的设计和制作打下一个铺垫。
（1）启动Flash，建立一个新文档。
在Properties（属性）面板中，单击“Size”（大小）按钮，在出现的对话框中修改其“Width”（宽）为“700px”，“height”（高）为“350px”高，“Backgroundcolor”（背景色）为“白色”，“Framerate”（帧频）为“24fps”。
（2）在Timeline（时间轴）面板中，单击（插入图层）按钮，根据网站涉及到的功能和内容插入5个图层，并按照我们的需要对其重命名。
action层：
脚本控制层，用来存放网站内的一些脚本程序。
sound层：
声音层，用来存放网站背景音乐和控制。
content层：
内容层，用来存放网站的各个栏目以及其他浮动面板。
menu层：
导航栏层，用来放置和导航有关的元素。
background层：
背景层，存放网站的背景。
2.背景的设计与制作
在时间轴面板上单击“background”层，使它处于编辑状态。
（1）按下Ctrl+L组合键打开Library（库）工作面板，并从库面板的“movs”文件夹中拖动“mov_back”符号到场景中（库中的所有元素需要你在制作前预先导入，可根据需要自行设计，下同）。
选中“mov_back”符号，在其属性面板中单击“Size”（大小）按钮，在出现的对话框中修改其宽为“385px”，高为“394px”，x轴坐标为“-127”，y轴坐标为“-37”，透明度为“25%”，在“InstanceName”（实例名称）输入框中输入“back_mc”。
（2）选取工具箱中的矩形工具，在场景中绘制一个矩形，删除绘制矩形的填充效果，并利用属性面板设置矩形边框属性为宽“700px”，高“350px”，x轴坐标为“0”，y轴坐标为0，颜色为“#CCCCCC”。
（3）选取工具箱中的文本工具，在场景的左上方键入公司的名称（本例中为“”）。
完成以上步骤后，按下Ctrl+Enter组合键测试影片，可以看到我们设计的背景效果。
在很多情况下，Flash网站的背景是以动画的形式存在的。
而在一些特殊需求下，用户还可以对背景图案或效果进行定制，这些部分的内容涉及到Flash本身的特殊功能，有兴趣的读者可参考相关书籍。
三、网站导航与栏目设计
网站导航是网站至关重要的组成部分。
一般来说，导航从表现形式上有弹出式（如Windows系统的“开始”菜单）、渐隐渐现式（如WindowsXP的渐隐渐现菜单）、切换式和异型导航等。
但无论导航的表现形式如何，其后面的导航控制都是类似的，即根据用户选择的栏目名称来进行栏目的切换。
1.制作弹出式菜单
（1）在时间轴面板上单击“menu”层。
按下Ctrl+F7组合键打开Components（组件）工作面板，并从“UIComponents”列表中拖拉“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菜单
varmenu1=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菜单
varmenu2=menu.addMenu（"About"）;
//转换控制到menu2控制域
with（menu2）{
//为menu2（即About菜单栏目）增加子栏目
addMenuItem（"Ourhistory"）;
addMenuItem（"Copyright"）;
}
//新生成一个listenerObject对象
listenerObject=newObject（）;
//为新生成的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层的第一帧增加欢迎标题（本例中为“welcometohuiyi”）和介绍文字。
（6）在时间轴面板上单击“action”层。
选择该层的第一帧，并按F9键弹出脚本编辑窗口，输入“stop（）;”脚本。
欢迎状态（即网站没有接受到如何用户交互时）下的界面基本制作完成，其他子栏目创建方法类似，这里不再重复。
如图5所示。
3.制作滚动文本框
在网站的内容显示部分，我们预留的显示空间往往不够容纳下当前部分的所有文字。
此时，我们需要使用滚动文本框组件来完成。
（1）在时间轴面板上单击“background”层，并将播放头移动到Product1标签处，用来编辑需要的文字内容。
（2）按下Ctrl+F7组合键打开组件面板，并从“UIComponents”列表中拖动“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
varstatus:
String="none";
//设置子栏目的变量类型为String，并设置初始值为“default”
varsubmenu:
String="default";
//设置中心位置的变量类型为Number，并设置初始值为当前剪辑的x坐标
varcenterx:
Number=_x
//为content_mc增加一个change方法
functionchange（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的透明度提高，并相右移动一定距离
elseif（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”命令，出现“LinkageProperties”（属性）对话框。
（2）选中“ExportforActionScript”（为动作脚本导出）以及“ExportinfirstFrame”（在第一帧导出）选项，并且在“Identifier”（标识符）框中键入“bgmusic”，单击“OK”按钮退出。
注意：
如果你导入到Flash中的音乐是WAV格式，Flash在默认的声音输出时会将WAV格式的声音文件转换为MP3格式。
如果对测试的效果不满意，建议你进行每一个声音的定制化处理，即针对每一个声音文件进行MP3质量的测试和调节，以便得到最佳的声效。
2.音乐波形动画的制作
创作音乐的波形动画效果可以有很多种方法，在创作这些波形动画时要尽量避免与音乐结构不和谐的情况发生。
因此创作波形动画时，我们通常将动画的节奏设置快一些。
在本实例中，我们将创作一个柱状波形动画。
（1）按下Ctrl+F8组合键，在出现的对话框中创建一个新的影片剪辑符号，命名为“mov_sound”，单击“OK”按钮。
（2）为mov_sound建立以下栏目层结构：
action：
声音脚本控制层。
label：
波形图状态标签层。
button：
声音状态切换按钮层。
Title：
波形图注释层。
soundeq：
波形动画层。
（3）单击时间轴面板上的插入图层按钮增加一个新层，双击层将其命名为“action”。
同样操作，添加label、button、Title和soundeq层。
（4）以soundeq为当前编辑层，选取工具箱中的矩形工具在第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帧增加“SoundON”标签，为第16帧增加“SoundOFF”标签。
以上波形动画主要分成2个功能区域，从第1到第15帧的动画是声音开关处于“开”状态下的动画，而后面的16到23帧之间的动画，是从播放到静止状态（即“关”状态）的切换动画。
如图6所示。
完成以上操作，一个音乐波形动画已有了一个基本的雏形，下面我们来看看如何进行波形动画的控制。
3.音乐开关的脚本控制
音乐开关的控制包括声音对象（soundobject）的初始化以及利用按钮来控制声音对象的状态（切换声音状态）。
（1）以button层的第一帧为当前编辑层与帧，按下Ctrl+L组合键打开库面板，并拖动“btn_sound”按钮到场景中。
选取工具箱中的变形工具调节按钮的大小，使按钮可以覆盖整个波形动画区域。
（2）单击该按钮，按F9键打开脚本编辑窗口，输入下列代码：
//鼠标在按钮上单击时，执行release事件内的脚本
on（release）{
//调用声音bg_snd对象的stop方法，停止bg_snd对象的播放
bg_snd.stop（）;
//影片剪辑跳转到声音停止“SoundOFF”部分的切换动画
this.gotoAndPlay（"SoundOFF"）;
}
（3）在第16帧处，按下F6键，生成一个新的关键帧，并改变当前帧内按钮的脚本为：
//鼠标在按钮上单击时，执行release事件内的脚本
on（release）{
//调用声音对象，bg_snd对象的start方法，开始bg_snd对象的播放
bg_snd.start（0,9999）;
升级会员 