电大多媒体技术实验6.docx

电大多媒体技术实验6.docx

《电大多媒体技术实验6.docx》由会员分享，可在线阅读，更多相关《电大多媒体技术实验6.docx（18页珍藏版）》请在冰豆网上搜索。

电大多媒体技术实验6

计算机科学与技术专业《多媒体技术基础》

实训报告

实训名称

用Flash制作电子贺卡

学生姓名

学号

班级

分组

实训报告

一、实验目的

学习网页制作的基本方法

2、实验要求

自己设计和制作一个网页

3、实验设备

Flash工作环境

4、实验内容

创建新页面、使用特殊字符、超级连接、设置页面背景属性和美化网站页面

5、实验步骤

1.创建运动过渡动画——淡入的缩放旋转运动和直线运动

步骤1:

在工作区中创建文本。

执行菜单【File】/【New】命令，创建一个新的电影文件Movie1。

单击工具箱中的文本工具，在工具参数区中将字体颜色设置为淡紫色，单击按钮

，将文本加粗，然后在工作区中单击，键入“FlashWorld”。

步骤2:

将文本转换为符号。

单击工具箱中的

箭头工具，选中工作区中的文本，执行菜单【Insert】/【ConverttoSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称title，并选择Graphic（图形）类型，单击OK。

步骤3:

编辑最初文字的大小。

将标准工具栏上的ZoomControl（查看控制）下拉框设置为25%，单击工具箱中的箭头工具，然后单击工具参数区中的缩放按钮，此时文字被虚框包围，然后按住鼠标左键拖动控制点将文字拉大，如图6.3所示。

图6.3缩放运动开始时文字的大小

步骤4:

设置缩放运动的结束帧。

双击图层的名称Layer1，将“Layer1”改为“title”，单击时间轴上title图层的第15帧单元格，执行菜单【Insert】/【Keyframe】命令，插入一个关键帧。

步骤5:

编辑缩放运动结束后文字的大小。

单击工具箱中的箭头工具，然后单击缩放按钮，此时文字被虚框包围，将标准工具栏上的ZoomControl（查看控制）下拉框设置为ShowFrame，然后按住鼠标左键拖动控制点将文字缩小，如图6.4所示。

图6.4缩放运动结束后文字的大小

步骤6:

制作淡入效果。

单击title图层的第1帧，然后用右键单击工作区中的文本，在弹出的菜单中执行【Properties...】命令，打开InstanceProperties（实例属性）对话框，在ColorEffect（颜色效果）选项卡中设置参数，如图6.5所示，单击确定。

这时“FlashWorld”将变为完全透明。

图6.5实例属性对话框

步骤7:

创建具有加速度的缩放旋转运动。

双击时间轴上title图层的第1帧到第15帧中的任意一帧，打开FrameProperties（帧属性）对话框，选择Tweening（过渡）选项卡，按照如图6.6所示进行设置，单击确定。

可以看到，在时间轴上的两个关键帧被一条黑色的带箭头的线段连接起来。

单击时间轴上的第1帧，敲击Enter键，可以看到“FlashWorld”在渐渐从透明变为淡紫色的同时也旋转着由大变小。

图6.6帧属性对话框

步骤8:

下面创建直线运动。

首先插入一个关键帧。

单击时间轴上title图层的第20帧单元格，执行菜单【Insert】/【Keyframe】命令，这时第20帧变为关键帧。

步骤9:

调整工作区中文本的位置。

单击第20帧单元格，用箭头工具选中工作区中的文本，然后将它拖放到工作区的右上角，如图6.7所示。

图6.7文本的位置

步骤10:

创建具有加速度的直线运动。

双击title图层中时间轴上第16帧到第20帧中的任意一帧，打开FrameProperties（帧属性）对话框，选择Tweening（过渡）选项卡，参数设置如图6.8所示，单击确定。

图6.8帧属性对话框

步骤11:

让“FlashWorld”作为网页的标题从始至终出现在页面上。

单击第100帧单元格，然后执行菜单【Insert】/【frame】命令或敲击F5键，使title图层的帧数增加至100帧。

步骤12:

测试影片。

单击时间轴上的第1帧，敲击Enter键，可以看到“FlashWorld”在渐渐从透明变为淡紫色的同时旋转着由大变小，最后移动到工作区的右上角。

步骤13:

保存文件为title_1.fla。

2.创建运动过渡动画——沿指定路径运动

步骤1:

打开上次保存的title_1.fla文件，创建一个电影剪辑符号。

执行菜单【Insert】/【NewSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称“bg_1”，并选择MovieClip（电影剪辑）类型，单击OK。

进入电影剪辑符号编辑模式。

步骤2:

创建要做运动的图形。

单击工具箱中的椭圆工具，并将椭圆工具参数区中的填充色设置为淡紫色，单击

按钮，将轮廓线颜色设置为“无颜色”，在工作区中绘制一个圆形。

步骤3:

将图形转换为图形符号。

单击工具箱中的箭头工具，选中工作区中的圆形，执行菜单【Insert】/【ConverttoSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称“circle”，并选择Graphic（图形）类型，单击OK。

这一步是将图形转换为图形符号，因为只有符号（Symbol）才能创建运动过渡动画。

步骤4:

调整圆形的大小和相对于中心的位置。

用箭头工具将绘制的圆形选中，执行菜单【Window】/【Inspectors】/【Object（对象）】命令，打开对象监控板，按照图6.9所示设置对话框，选中UseCenterPoint（使用中心点）选项，单击Apply（应用）按扭。

图6.9对象监控板

步骤5:

双击工作区中的圆形，打开InstanceProperties（实例属性）对话框，在ColorEffect（颜色效果）选项卡中设置参数，如图6.10所示，单击确定。

这时“circle”将变为半透明。

图6.10实例属性对话框

步骤6:

选中Layer1图层，执行菜单【Insert】/【MotionGuide（移动导线）】命令，在Layer1图层上方插入一个名为GuideLayer1的导向层。

这一步的作用是让图符沿着导向层中所画的路径运动。

在沿指定路径运动的动画中，路径必须画在导向层。

步骤7:

单击时间轴上导向层：

Layer1的第1帧单元格，在工具箱中选择椭圆工具，并将椭圆工具参数区中的填充色设置为“无填充”，轮廓线颜色设置为黑色，在工作区中绘制一个圆形，如图6.11所示。

这是淡紫色圆形实例的运动路径。

图6.11绘制的圆形

步骤8:

用箭头工具将绘制的圆形选中，执行菜单【Window】/【Inspectors】/【Object】命令，打开对象监控板，按照图6.12所示设置对话框，选中UseCenterPoint选项，单击Apply按扭。

调整圆形路径的大小和相对于中心的位置。

图6.12对象监控板

步骤9:

单击导向层GuideLayer1，选择工具栏中的箭头工具，在圆形的下方拖拽一个矩形，矩形中间的一段弧将被选中，如图所示。

步骤10:

执行菜单【Edit】/【Clear】命令，将选中的弧线段删除，做出路径的开始点和结束点。

如图6.14所示。

图6.13被选中的一段弧线图6.14将选中的弧线段删除

步骤11:

单击工作区中的circle实例，将它拖动到导向层弧形开口的右端点处，如图6.15所示。

设置circle开始运动的位置。

步骤12:

依次选中各层的第100帧单元格，然后执行菜单【Insert】/【frame】命令，使所有图层的帧数都增加至100帧。

这一步的作用是控制动画的速度。

步骤13:

设置动画的结束帧。

用鼠标右键单击Layer1图层的第100帧单元格，从弹出的菜单中执行【InsertKeyframe】命令，将第100帧变为关键帧。

步骤14:

在第100帧中将circle实例拖动到导向层弧形线段开口的左端点处。

步骤15:

创建运动过渡。

用鼠标右键单击时间轴上Layer1图层的第1帧到第100帧中的任意一帧，然后执行菜单【Insert】/【CreateMotionTween（产生运动过渡）】命令，使淡紫色圆形沿弧线路径运动。

步骤16:

测试影片。

单击时间轴上的第1帧，按Enter键，可以看到淡紫色半透明的圆形沿弧线路径运动的效果。

图6.15将实例拖动到导向层弧形开口的右端点处

步骤17:

下面将电影剪辑插入到影片中。

首先单击时间轴左上角的Scene1，退出符号编辑模式，回到场景编辑模式。

执行菜单【Insert】/【Layer】命令，新建一个图层，命名为“bg_1”。

步骤18:

设置开始播放电影剪辑的关键帧。

单击时间轴上bg_1图层的第帧单元格，执行菜单【Insert】/【Keyframe】命令，这时第15帧变为关键帧。

步骤19:

执行菜单【Window】/【Library（库）】命令，打开Library（库）窗口，从中选择bg_1电影剪辑，用鼠标左键按住库窗口中的bg_1电影剪辑并将它拖拽到工作区中。

拖放到适当位置，如图6.16所示。

图6.16bg_1电影剪辑的大小和位置

步骤20:

保存文件为bg.fla。

3.创建变形过渡动画

步骤1:

打开上次保存的bg.fla文件，执行菜单【Insert】/【Layer】命令，新建一个图层，命名为“title_2”。

步骤2:

设置变形运动的起始帧。

单击时间轴上title_2图层的第20帧单元格，执行菜单【Insert】/【Keyframe】命令，这时第20帧变为关键帧。

步骤3:

单击工具箱中的椭圆工具，并将椭圆工具参数区中的填充色设置为淡紫色，轮廓线颜色设置为“无颜色”，在工作区中“FlashWorld”的下方绘制一个圆形。

步骤4:

调整圆形的大小和位置。

用箭头工具将绘制的圆形选中，执行菜单【Window】/【Inspectors】/【Object】命令，打开对象监控板，按照图6.17所示设置对话框，选中UseCenterPoint选项，单击Apply按扭。

完成后如图6.18所示。

图6.17对象监控板图6.18调整后的圆形

步骤5:

设置变形运动的结束帧。

单击时间轴上title图层的第40帧单元格，执行菜单【Insert】/【Keyframe】命令，这时第40帧变为关键帧。

在第40帧处将刚才所画的圆形删除。

步骤6:

单击工具箱中的矩形工具，并将矩形工具参数区中的填充色设置为淡紫色，轮廓线颜色设置为“无颜色”，然后单击

按钮，打开RectangleSettings（矩形设置）对话框，将CornerRadius（圆角半径）设置为，单击OK。

在工作区中“FlashWorld”的下方绘制一个圆角矩形。

步骤7:

调整圆角矩形的大小和位置。

用箭头工具将它选中，执行菜单【Window】/【Inspectors】/【Object】命令，打开对象监控板，按照图6.19所示设置对话框，选中UseCenterPoint选项，单击Apply按扭。

完成后如图6.20所示。

图6.19对象监控板图6.20调整后的圆角矩形

步骤8:

单击时间轴上title_2图层的第40帧单元格，选择文字工具，将字体颜色设置为白色，选择粗体，在工作区中的淡紫色圆角矩形区域中单击，键入“ActiveMedia”，再将它移动到适当的位置，如图6.21所示。

图6.21“ActiveMedia”的大小和位置

步骤9:

创建变形过渡。

用鼠标右键单击时间轴上title_2图层的第20帧到第40帧中的任意一帧，在弹出的菜单中执行【Properties...】命令，打开FrameProperties（帧属性）对话框，选择Tweening（过渡）选项卡，参数设置如图6.22所示，单击确定。

图6.22帧属性对话框

步骤10:

测试影片。

执行菜单【Control】【TestMovie（测试影片）】命令，可以看到“FlashWorld”在渐渐从透明变为淡紫色的同时旋转着由大变小，在移动到工作区的右上角后停止，然后一个淡紫色半透明的圆形循环往复的做沿弧线路径运动，同时，在“FlashWorld”的下方有一个圆形逐渐拉长变成圆角矩形，最后出现“ActiveMedia”的字样。

步骤11:

保存文件为title_2.fla。

4.创建按钮

步骤1:

打开上次保存的title_2.fla文件，首先做一个文字按钮。

执行菜单【Insert】/【NewSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称“button_1”，并选择Button（按钮）类型，单击OK。

进入按钮符号编辑模式。

步骤2:

单击Up帧单元格，选择文字工具，将字体颜色设置为黑色，在工作区中输入一行文本“”，再将它移动到工作区的中心位置，如图6.23所示。

为了定位，可以执行菜单【View】/【Grid（网格）】命令打开网格，并执行菜单【View】/【Snap（捕捉）】命令打开捕捉网格。

步骤3:

在Over帧加入一个关键帧，刚才Up帧的黑色文字还保留在工作区，在工作区的空白处输入一行文本“”，字体颜色为橙色，然后将它移动到黑色文字的上面，形成阴影效果，如图6.24所示。

图6.23Up帧的效果图6.24Over帧的效果

步骤4:

使按钮在被触摸时发出声音。

首先导入一个声音文件。

执行菜单【File】【Import（导入）】命令，打开Import（导入）对话框，导入一个文件类型为WAV的声音文件，它被存放在Library（库）窗口中。

步骤5:

双击Over帧单元格，打开FrameProperties（帧属性）对话框，选择Sound选项卡，在Sound下拉菜单中选择要插入的声音文件，其它默认，单击确定按扭。

可以看到Over帧单元格内出现了这个声音的波形。

步骤6:

在Down帧加入关键帧，然后把橙色文字向右下方移回原来的位置，将黑色文字覆盖，如图6.25所示。

这样在鼠标单击时，看起来有被按下的效果。

步骤7:

定义按钮响应鼠标事件的区域范围。

在Hit帧加入关键帧，在文字上画一个矩形，填充任何颜色均可，如图6.26所示。

Hit帧的图形在电影中是不显示的，但是它定义了按钮响应鼠标事件的区域范围，如果没有在Hit帧中指定范围，就以Up帧中对象的范围作为响应鼠标事件的区域范围。

因此当所用的按钮的形状不规则时（例如文本），就要在Hit帧中指定范围。

图6.25Down帧的效果图6.26按钮响应鼠标事件的区域范围

步骤8:

单击工作区左上角的场景名称Scene1，退出按钮符号编辑模式，回到场景编辑模式。

步骤9:

执行菜单【Insert】/【Layer】命令，新建一个图层，命名为“button_1”。

在button_1图层的第20帧加入关键帧。

步骤10:

执行菜单【Window】/【Library】命令，打开Library（库）窗口，从中选择button_1按钮符号，用鼠标左键按住库窗口中的button_1并将它拖拽到工作区中。

拖放到适当位置，如图6.27

图6.27按钮button_1的大小和位置

步骤11:

测试按钮。

执行菜单【Control】/【TestMovie】命令，可以看到按钮在被触摸和点击时的效果。

步骤12:

制做图形按钮。

执行菜单【Insert】/【NewSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称“button_2”，并选择Button类型，单击OK。

进入按钮符号编辑模式。

步骤13:

单击Up帧单元格，执行菜单【File】/【Import】命令，打开Import（导入）对话框，选择一个图形文件，单击打开按钮，导入一个图形文件。

和制作文字按钮一样，如果想要按钮在被鼠标触摸和点击时有不同的效果，就在Over帧和Down帧各加入一个关键帧，并导入不同的图形。

步骤14:

制做动画按钮。

执行菜单【Insert】/【NewSymbol】命令，打开SymbolProperties（符号属性）对话框，在Name中输入符号名称“button_3”，并选择Button类型，单击OK。

进入按钮符号编辑模式。

步骤15:

单击Up帧单元格，执行菜单【Window】/【Library】命令，打开Library（库），从中选择一个事先做好的电影剪辑，将它拖拽到工作区中。

在按钮中，可以使用电影剪辑符号和图形符号，但是不能在一个按钮中再使用按钮。

如果要制作动画按钮，就需要使用电影剪辑。

步骤16:

单击工作区左上角的场景名称Scene1，退出按钮符号编辑模式，回到场景编辑模式。

步骤17:

执行菜单【Insert】/【Layer】命令，新建两个图层，命名为“button_2”和“button_3”。

分别在这两个图层的第20帧加入关键帧。

分别单击两个图层的第20帧单元格，在Library（库）窗口中，将做好的两个按钮“button_2、button_3”分别拖拽到工作区中的适当位置，如图6.28所示。

步骤18:

双击时间轴上图层的第40帧单元格，打开FrameProperties（帧属性）对话框，选择Actions（动作）选项卡，单击

按钮，在弹出的菜单中选择Stop（停止播放）语句，单击确定。

这时在时间轴的第40帧上出现了一个字母“a”，表示电影播放到这一帧时暂停播放，等待发出执行某个动作的信号。

步骤19:

保存文件为button.fla。

图6.28三个按钮的大小和位置

5.创建交互性

步骤1:

打开上次保存的button.fla文件，为文本做超级链接。

双击工作区中的button_1按钮符号，打开InstanceProperties（实例属性）对话框，选择Actions选项卡，单击

按钮，在弹出的菜单中选择GetURL（取得URL）语句，然后在右边的参数区中进行设置，如图6.29所示，单击确定。

这一步的作用是当单击此按钮时打开一个新窗口并连接新浪网。

步骤2:

为图形做超级链接。

双击工作区中的button_2按钮符号，打开InstanceProperties（实例属性）对话框，选择Actions选项卡，单击

按钮，在弹出的菜单中选择GoTo（跳转到）语句，然后在右边的参数区中进行设置，如图6.30所，单击确定。

这一步的作用是当单击此按钮时使电影跳转到当前场景的第1帧并开始播放。

图6.29实例属性对话框

图6.30实例属性对话框

步骤3:

为动画做超级链接。

双击工作区中的button_3按钮符号，打开InstanceProperties（实例属性）对话框，选择Actions选项卡，单击

按钮，在弹出的菜单中选择StopAllSounds（关闭所有声音）语句，单击确定。

这一步的作用是当单击此按钮时在不打断电影播放的情况下，停止所有声轨的播放。

步骤4:

测试按钮。

执行菜单【Control】/【EnableButtons（启动按钮）】命令，然后单击工作区中的button_2按钮，进行测试。

其余两个按钮在单击时没有动作，是因为button_1要执行的动作是打开一个新窗口并连接新浪网，因此它必须在Flash文件发布后或在浏览器中预览时才起作用，button_3要执行的动作是关闭所有声音，因此它必须在加入声音后才能测试效果。

步骤5:

保存文件为action.fla。

6.加入背景音乐

步骤1:

打开上次保存的action.fla文件，首先导入一个声音文件。

执行菜单【File】/【Import】命令，打开Import对话框，导入一个文件类型为WAV的声音文件。

导入的声音文件被存放在Library窗口中。

步骤2:

执行菜单【Insert】/【Layer】命令，新建一个图层，命名为“sound”。

步骤3:

双击sound图层中的第1帧，打开FrameProperties（帧属性）对话框，选择Sound选项卡，在Sound下拉框中选择要加入的声音文件，在Sync（同步）下拉框中选择Start（开始）方式，将Loops（循环次数）设置为100或更大数值，单击确定。

步骤4:

保存文件为music.fla。

最后，电影的时间轴窗口如图6.31所示：

图6.31时间轴窗口

7.文件的发布（Publish）

发布（Publish）是Flash十分独特的输出功能，经过发布的作品，在网上就有了“版权”的保护，作品是不容易被剽窃的。

步骤1:

执行菜单【File】/【PublishSettings..】命令，打开PublishSettings（发布设置）对话框，设置文件的各项参数，这里我们选择默认设置，单击确定。

步骤2:

执行【File】/【PublishPreview】命令，分别预览设定好参数的不同格式的文件。

步骤3:

执行【File】/【Publish】命令或按Shift+F2组合键，发布以上的文件。

经过发布后，生成了两个文件，一个是可以激活Flash播放器（FlashPlayer）的HTML文档，另一个是ShockwaveFlash（.swf）格式的电影文件，这两个文件都保存在Flash的安装路径或上次存储的默认目录下。

教师评语

教师签字日期

成绩