Flash交互式课件开发技能案例三

本节以初中化学实验仪器展示课件的制作，来讲解如何运用Flash制作简单的交互性课件。

（一）教学对象、内容和目标的分析

与数学和物理的操作性实验不同的是，化学的实验往往是一次性成型的，反复的实验会带来实验材料的消耗和仪器的损耗，而学生对实验规则却缺少经验性的认识，往往造成许多不必要的损失。因此，化学课程通过Flash课件来展示教学仪器和模拟实验环境进行交互式操作是必需的。

Flash的交互式课件能让学生在进入实验室做实验前通过课件上的展示和交互操作，熟悉整个实验的仪器以及流程，为实际操作做好充分的准备。

初中的学生第一次的化学实验课是认识实验仪器，之前的讲授课主要是对化学元素的认识，并没有在课堂上介绍仪器。所以为了让学生对实验仪器有一个感性上的认识，可以通过制作一个相关的课件推送给学生，在家里或课前进行观看和操作。

（二）设计思路

以多个实验仪器的图片作为课件的导航，这种图片而非文字的导航能让没有见过这些仪器的学生产生感性的认识。同时当鼠标移动到仪器图片时，会发出相对应的声音和小动画，以加强情景认知。最后当单击某个仪器图片后，进入具体的介绍界面。然后可以返回并重复观看。课件效果如图5-11所示。

（三）课件的设计与开发

Flash交互式课件在展示过程中可以对用户的互动进行响应，如播放、停止、选择、退出等动作，从而让用户对课件进行各种控制。它使得学生不仅是课件的观看者，同时也是课件的参与者。

图5-11　Flash课件制作效果

Flash课件的交互主要通过ActionScript脚本程序来实现，比如基本控制语句play（）、stop（）、goto And Play（）、goto AndStop（）和条件判断语句if、else、else if等。在案例中将教授创建一个非线性导航课件。在学生单击导航图片按钮的时候，ActionScript脚本语言可以控制Flash播放头跳到时间轴的不同帧，而这些不同的帧包含不同内容，从而使课件展现这些内容。

（四）制作图片按钮模块

同影片剪辑和图形一样，按钮是Flash交互式课件制作中不可或缺的一种元件。它的独特之处表现在它有“弹起”、“指针经过”、“按下”、“点击”这四种特殊状态，用于确定按钮的显示形态。使得用户通过点击、双击、鼠标经过等事件触发按钮进行事件触发相关的代码以进行交互。所以要制作交互式的课件，第一步就是制作好按钮。

按钮的四种形态。

“弹起”：当鼠标不接触按钮时，按钮处于弹起状态。

“指针经过”：显示鼠标移动到按钮上时按钮的显示效果。

“按下”：显示按下鼠标键时按钮的显示效果。

“点击”：划分对鼠标做出反应的区域。只有当鼠标进入这个区域时，才会有鼠标经过和按下的事件。

1.创建按钮元件

（1）在库面板上创建文件夹，命名为“仪器”。

（2）点击插入菜单→新建元件。

（3）在“创建新建元件”对话框中，选择元件类型为“按钮”，设置元件名称为“量筒”（如图5-12所示）。点击确定，将量筒移至“仪器”文件夹中。

图5-12　创建量筒按钮元件

（4）双击创建的量筒按钮，进入量筒元件的编辑界面。

（5）点击文件菜单→导入→导入到舞台。将之前准备好的量筒图片导入并放置在编辑区中间。

（6）在“时间轴”上选择点击帧，然后点击插入菜单→时间轴→帧，以扩展时间轴至点击帧。“量筒”元件现在将出现“弹起”、“指针经过”、“按下”和“点击”着四个状态（如图5-13所示）。

图5-13　创建图层1

2.添加“更多信息”信息框图层

（1）插入一个新的图层。点击“指针经过”帧，然后点击插入菜单→时间轴→关键帧（如图5-14所示）。

图5-14　创建图层2

（2）在库面板中，展开“获取更多框/基础元件”文件夹，并把名称为“量筒1”的影片剪辑元件添加到“舞台”，调整其合适大小。并在“属性”检查器中，调整X、Y的值，使得信息框能较好地覆盖住量筒图形的位置。此时，当鼠标经过量筒图形按钮时，在量筒上都会显示“更多信息”这个信息框。

3.添加声音交互图层

（1）插入一个新的图层。点击“按下”帧，然后点击插入菜单→时间轴→关键帧（如图5-15所示）。

图5-15　创建图层3

（2）将之前准备好的量筒“仪器声音1.mp3”导入到舞台上。

（3）选择其中显示有声音形式的“按下”关键帧，在“属性”里选择“同步”设置为“事件”（如图5-16所示）。

图5-16　设置声音属性

单击“舞台”上方“场景1”按钮，退出量筒元件的编辑模式，返回主“时间轴”。此时就创建了一个交互式的图形按钮元件。

4.通过直接复制的方法添加新的按钮元件

当添加好一个按钮元件后，能很容易的添加相似按钮元件。直接复制当前按钮，更改图像和声音来完成新按钮。

（1）在库面板里右击选中“量筒”元件，在弹出的菜单栏中选择“直接复制”菜单（如图5-17所示）。

（2）选择复制后的按钮，并且重命名为“锥形瓶”。点击“确定”。

（3）在库面板里，双击“锥形瓶”按钮打开该元件的编辑状态。

（4）选择舞台上量筒图像，在“属性”面板中单击“交换”按钮，在弹出的对话框中选择“锥形瓶”图片。点击“确定”。

（5）点击“指针经过”关键帧，单击量筒可在属性栏中看到量筒的属性信息（如图5-18所示）。

图5-17　直接复制菜单

图5-18　量筒信息框

（6）点击“交换元件”按钮，在弹出的对话框中选择“锥形瓶”元件进行替换，在“属性”检查器中，调整X、Y的值（如图5-19所示）。

图5-19　锥形瓶元件效果

（7）点击“图层3”中的“按下”帧，在属性栏中选择“声音/名称”按钮，将“仪器声音1.mp3”的声音改为“仪器声音2.mp3”。

用同样的方法制作出“烧杯”按钮和“试管”按钮。

5.将按钮元件放置在舞台上进行排列

（1）在整个课件的主“时间轴”上新建一个图层，命名为“按钮”。

（2）在库面板中将之前建设好的多个按钮元件拖动到舞台上，输入相对应的实验仪器名称。

（3）选择舞台上的所有按钮，点击窗口菜单→对齐菜单，在弹出的菜单栏中选择取消“与舞台对齐”，再单击“水平平均间隔”，然后单击顶对齐按钮。使得按钮间水平方向上平均分布且垂直方向上底对齐（如图5-20所示）。

6.对舞台上的按钮添加实例命名

当库中的元件被拖放到主场景的舞台上时，就产生了一个该元件在舞台上的实例。这个元件在整个课件体系下可以有许多实例。这些实例存在着但并不占用太多的存储空间。如果要增加实例的交互性就需要借助ActionScript脚本语言，但是必须首先对这些实例进行命名。

图5-20　图形排列效果

（1）点击选择量筒按钮。

（2）在属性面板里的“实例名称”框里输入“liangtong”（如图5-21所示）。

图5-21　添加实例命名

（3）对后续按钮分别命名为“shiguan”、“shaobei”、“zhuixingping”。

（五）扩充交互式课件的执行时间

该项目的当前所有层都只有一个帧。必须对“时间轴”的各个图层添加更多的帧，以增加更多的时间来添加更多的内容。

选择按钮图层上的第50帧，右键单击该帧，在弹出的菜单栏中选择“插入帧”。然后分别选择另外两个图层的第50帧，重复上述操作。

“时间轴”上的3个图层都有50个帧（如图5-22所示）。

图5-22　各图层添加帧后的效果

（六）使课件停在第1帧

“时间轴”上有50个帧的播放时长后，课件将会从第1帧播到第50帧，然后循环播放。但是，这是一个交互性的课件，需要在一开始时停止在第一帧的位置，当使用者点击其他按钮后再跳转到后面的某个帧去播放，这种交互性需要ActionScript脚本语言来实现。

（1）在顶层插入一个新的层。命名为“动作”。

（2）选择第一帧，打开“动作”面板输入“stop（）；”代码表示停止（如图5-23所示）。

图5-23　stop（）代码

（3）在“动作”图层的第一个关键帧中出现一个极小的小“a”，指示它包含ActionScript语句（如图5-24所示）。

图5-24　图层添加代码效果

（七）添加事件侦听和响应函数

Flash可以检测并且响应在Flash环境中发生的事件。Flash的交互采用的是事件机制，即发生了什么事然后触发什么响应。事件可以由用户发出，也可以由程序执行过程中满足某种条件后发出。利用ActionScript还可以编写代码检测事件，并且利用事件处理程序响应它们。

添加ActionScript程序，用于侦听每个按钮上的鼠标单击事件。响应程序是将跳转到主时间轴上的特定帧以显示不同的内容。

（1）选择“动作”层的第一帧并打开“动作”面板。

（2）在“脚本”窗口的第二行，输入代码：

liangtong.add Event Listener(MouseEvent.CLICK,liangtong);

（3）在“脚本”窗口的第三行，输入代码：

当Flash监听到liangtong按钮出发了鼠标单击事件后，就会执行liangtong（）函数，使主时间轴的指针转到第10帧并停留在那里的指令。这时，就完成了用于名为“liangtong”的按钮代码。

（4）在“脚本”窗口内，输入余下3个按钮的额外代码：

（8）添加目标关键帧

当点击课件中按钮时，Flash将根据ActionScript程序指令把指针移动到“时间轴”上指定的地方。

1.添加关键帧

（1）在顶层插入一个新的层。命名为“标签”。

（2）点击“标签”图层中的第10帧，点击插入菜单→时间轴→关键帧，以插入一个新的关键帧（如图5-25所示）。

图5-25　添加一个关键帧(www.xing528.com)

（3）分别在20帧、30帧和40帧处插入新的关键帧。此时，“时间轴”在“标签”层中具有4个空白关键帧（如图5-26所示）。

图5-26　添加一系列关键帧

（4）点击第10帧处的关键帧。将量筒的介绍类影片剪辑元件移到“舞台”上。在“舞台”上会显示量筒的仪器信息介绍（如图5-27所示）。

图5-27　添加介绍信息

（5）在“属性”面板中，调整X和Y的值，实例名称为“liangtong_introduction”。

（6）点击第20帧处的关键帧。将试管的介绍类影片剪辑元件移到“舞台”上。在“舞台”上会显示试管的仪器信息介绍。实例名称为“shiguan_introduction”。

（7）点击第30帧处的关键帧。将烧杯的介绍类影片剪辑元件移到“舞台”上。在“舞台”上会显示烧杯的仪器信息介绍。实例名称为“shaobei_introduction”。

（8）点击第40帧处的关键帧。将锥形瓶的介绍类影片剪辑元件移到“舞台”上。在“舞台”上会显示锥形瓶的仪器信息介绍。实例名称为“zhuixingping_introduction”。

每个关键帧都应该包含一个关于化学仪器的不同影片剪辑元件。

2.使用标签来标识关键帧

前面的代码表示，当用户点击按钮时，Flash跳转至不同的帧编号。但是，如果“时间轴”添加或删除了几帧，就需要回到As代码中重新改变要跳转到哪一个帧，这是非常麻烦的事情。为了避免这个问题，可以使用帧标签代替固定帧编号。帧标签是给关键帧命名。在As中使用帧标签，必须用引号。命令goto AndStop（Label1）使播放头跳转至标签为Label1关键帧上。

（1）在“标签”层点击第10帧。在“属性”面板“标签名称”框里输入“label1”（如图5-28所示）。

图5-28　添加标签名称信息

（2）在“标签”层点击第20帧。在“属性”面板“标签名称”框里输入“label2”。

（3）在“标签”层点击第30帧。在“属性”面板“标签名称”框里输入“label3”。（4）在“标签”层点击第40帧。在“属性”面板“标签名称”框里输入“label4”。在具有标签的每个关键帧上方将会出现红色旗帜图标（如图5-29所示）。

图5-29　红色旗帜图标

（5）选择“动作”层的第一帧并打开“动作”面板。在代码中，将每个goto AndStop（）命令中所有固定的帧编号都改为对应的帧标签。

3.添加返回第1帧的事件代码

返回事件可以使指针回到时间轴上的第一帧，或者是向使用者提供选择原始设置或主菜单的一个关键帧。可以通过“代码片断”面板向项目中添加As代码。

（1）点击窗口菜单→代码片断，显示“代码片断”面板。代码片断被设置在描述它们的功能文件夹里（如图5-30所示）。

图5-30　代码片断内容

（2）点击“标签”图层第19帧，选取“舞台”上的“liangtong_introduction”按钮。

（3）在“代码片断”面板中点击展开“时间轴导航”文件夹，并选择“单击以转到帧并停止”选项（如图5-31所示）。

（4）单击“代码片断”面板左上角的“添加到当前帧”按钮（如图5-32所示）。

图5-31　时间轴导航内容

图5-32　添加到当前帧按钮

（5）Flash自动新建了一个“Actions”图层，并向“动作”图层中添加了代码。

（6）在名为“fl_Click ToGoToAndStop AtFrame”的函数内，利用gotoAndStop（1）替换goto AndStop（5）动作。当观众点击“liangtong_introduction”按钮时，希望播放头返回到第1帧，因此要替换gotoAndStop（）动作中的参数。

（7）运用相同的方法对“标签”图层的第29、39、50帧处添加代码片断，设置goto AndStop（）动作中的参数为1，即goto AndStop（1）。

（8）将“Actions”图层中的第19帧、第29帧、第39帧和第50帧代码复制到“动作”面板的第19帧、第29帧、第39帧和第50帧中，并将Actions图层删去。

在演示效果中，如果单击按钮，都将把指针移到“时间轴”中带不同标签的关键帧上，显示也会不同。后面将要完成单击各个介绍框时，返回第1帧，显示最初的界面效果。

（十）在目的地播放动画

可以通过使用goto And Play（）函数，使得指针移动到对应的帧标签头，然后指针从这一点开始播放。来达到交互式课件中用户点击一个仪器后播放对应的介绍界面的效果。

1.创建过渡效果补间动画

（1）把指针移到标签图层的label1帧标签上。鼠标右键点击“舞台”上的量筒信息实例，在弹出的菜单栏中选择“创建补间动画”。

（2）Flash将会自动为实例创建一个“补间”图层，使得我们可以不受干扰地创建补间动画，给自动创建的补间图层命名为“lt”（如图5-33所示）。

图5-33　创建lt补间动画图层

（3）点击lt图层的第10帧，在“属性”面板里，选择色彩效果下拉菜单→样式下拉菜单→选择“Alpha”透明度设置。将Alpha滑块设置为0%（如图5-34所示）。使得该实例在舞台上变成完全透明。

（4）点击lt图层的第19帧，在“舞台”上选择这个透明实例。在“属性”面板里，将Alpha滑块设置为100%（如图5-35所示）。使得该实例在舞台上变成完全不透明。这样从第10帧到第19帧的制作出了一个平滑的淡入显示效果补间动画。

图5-34　设置Alpha值为完全透明

图5-35　设置Alpha值为完全不透明

（5）按照上述方法，对标签图层中label2、label3和label4关键帧创建类似补间动画，给生成的补间图层依次命名（如图5-36所示）。

图5-36　设置好各个过渡效果图层

2.设置指针移到“时间轴”上特定的帧

（1）点击“动作”层中的第1帧，并打开“动作”面板。

（2）在As代码中，把之前编写的goto AndStop（）命令都改为goto AndPlay（）命令，并保持参数不变。这使得当用户点击按钮时，As代码将把播指针移动到指定的帧标签，并从这个位置开始播放后续的补间动画。

3.添加stop（）函数来停止动画播放

如果现在测试影片，将看到当点击每个按钮并跳转至其对应帧标签然后从该位置开始播放，但它会按顺序播放并显示“时间轴”中所有的后续动画，所以必须设定好何时停止播放。

（1）选择“动作”图层第19帧，它正好是“标签”图层中label1变迁结束的那一帧。

（2）右键单击该帧，在弹出的菜单栏中选择“动作”。（如图5-37所示）。以打开“动作”面板。

（3）在“脚本”窗口中第一行输入“stop（）；”函数。这样，当指针播放到达第19帧时，Flash将停止播放。

（4）按照上述方法在第29、39、50帧的代码中分别在第一行输入“stop（）；”函数（如图5-37所示）。

图5-37　添加stop函数以停止播放

再一次测试影片，每个按钮都会转到不同的关键帧，并且播放简短的淡入动画。在动画末尾，影片会停止。并且可点击介绍框返回。

这样，通过上述的讲解，我们就创建了一个化学实验课认识实验仪器的交互式动画课件。当将鼠标经过某个化学仪器的按钮上时，附加信息会出现，并能发出相对应的声音。最后当单击某个仪器图片后，进入具体的介绍界面。当操作者浏览完介绍信息后，可以通过点击这个介绍界面再回到主界面中。从而给用户带来更多的趣味和复杂的交互作用。