在Ｆｌａｓｈ８制作的演示型课件添加交互功能的技巧

• 作 者: 陆远蓉
• 出 处: 电脑知识与技术·学术交流
• 发表日期: 2008年8期
• 关键词: 功能 按钮 课件 鼠标 方法 矩形

　　摘要：介绍了在Flash8中使用ActionScript2.0制作交互型课件时，如何实现进度控制、临时板书、绘图的几点技巧。
　　关键词：Flash; ActionScript2.0; 课件; 绘图
　　中图分类号：TP391文献标识码：A文章编号：1009-3044(2008)08-11ppp-0c
　　
　　1 引言
　　
　　Flash是最广泛使用的多媒体课件制作软件之一。利用Flash课件能将抽象的知识以动画的形式生动对表现出来，化抽象为形象，从而帮助学生理解抽象内容。另外，在实际教学过程中，教师通常要使用多媒体课件做两类控制：一是控制课件内容的演示顺序，二是根据当时学生的反馈信息，在计算机上做临时的板书说明、指示难点和重点等。因此，在课堂演示型课件制作过程中，需要实现简单人机交互，也就是要实现一定的交互功能。
　　
　　2 需求分析
　　
　　在多媒体课堂演示型课件实际操作中，对教师需要的功能实现方法的分析结果：
　　（1）控制课件内容的演示顺序的需求实现方法
　　只需要在课件中添加能跳转到前一帧、下一帧、第一帧、退出系统的功能按钮即可。
　　（2）在计算机上做临时的板书说明、指示难点和重点的需求实现方法
　　可以通过在课件上增加画直线、画矩形的功能来实现。使用画直线功能，相当于拿着一支笔在课件上一笔一划地写字，也可以直接在重点、难点下划线；使用带填充色的画矩形功能，可以覆盖一些课堂内容，便于课堂提问以及知识点的回顾。这个需求的实现方法可以归结为设置绘图格式。
　　课件需要功能的整体功能可以用图1的用例图表示。
　　
　　图2
　　
　　设置绘图格式功能的需求分析结果用图2的用例图表示。
　　
　　图4
　　
　　（2）分别单击图4中的各个按钮，然后在“动作”面板中输入以下的语句：
　　
　　图5
　　
　　（3）在“绘图控制”的层输入以下语句。
　　// 使用多重循环创建一个保存WEB颜色设置的阵列
　　var colors = new String("00,33,66,FF,CC,99").split(",");
　　var color_array:Array = new Array();
　　var color_array_fill:Array=new Array();
　　for (var r = 3; r　　for (var g = 0; g　　for (var b = 0; b　　var rgb = colors[r] colors[g] colors[b];
　　var gbr= colors[g] colors[b] colors[r];
　　color_array.push({data:"0x" rgb, label:"#" rgb});
　　color_array_fill.push({data:"0x" gbr, label:"#" gbr});
　　}
　　}
　　}
　　//将阵列中的颜色组合在下拉列表框中显示出来
　　fillColor_cb.dataProvider = color_array_fill;
　　strokeColor_cb.dataProvider = color_array;
　　//设置可以选择的绘图类型
　　shape_cb.dataProvider = [’直线’, ’矩形’];
　　//下面的实现方法来自帮助中“removeListener”的搜索结果
　　//下面的实例在舞台上附加三个按钮，并让用户在运行时用鼠标指针在 SWF 文件中绘制线条。一个按钮从 SWF 文件中清除所有线条。第二个按钮删除鼠标侦听器，所以用户无法绘制线条。第三个按钮在鼠标侦听器被删除后添加鼠标侦听器，所以用户可以再次绘制线条。将下面的 ActionScript 添加到时间轴的第 1 帧：
　　//把按钮的X坐标改为负数，避免显示出这三个按钮
　　this.createClassObject(mx.controls.Button, "clear_button", this.getNextHighestDepth(), {_x:-110, _y:10, label:’clear’});
　　this.createClassObject(mx.controls.Button, "stopDrawing_button", this.getNextHighestDepth(), {_x:-120, _y:10, label:’stop drawing’});
　　this.createClassObject(mx.controls.Button, "startDrawing_button", this.getNextHighestDepth(), {_x:-230, _y:10, label:’start drawing’});
　　//三个按钮都设为不可见
　　clear_button.visible=false;
　　stopDrawing_button.visible=false;
　　startDrawing_button.visible=false;
　　startDrawing_button.enabled = false;
　　//下面的示例每当用户在运行时单击、拖动和松开鼠标时使用 Drawing API 绘制一个矩形。
　　var thisClip:MovieClip=this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());
　　//当按下和释放鼠标时创建一个mouse监听器
　　var mouseListener:Object = new Object();
　　mouseListener.onMouseDown = function()
　　{
　　this.isDrawing = true;
　　thisClip.pos1 = {x:_xmouse, y:_ymouse};
　　x1=thisClip.pos1.x;
　　y1=thisClip.pos1.y;
　　thisClip.moveTo(x1,y1); //一定不能漏"thisClip"
　　};
　　mouseListener.onMouseMove = function()
　　{
　　thisClip.pos2 = {x:_xmouse, y:_ymouse};
　　x2=thisClip.pos2.x;
　　y2=thisClip.pos2.y;
　　if (this.isDrawing)
　　{/* 使用drawing API在舞台绘图有两种类型的图可供选择 */
　　with (thisClip)
　　{lineStyle(strokeWidth_ns.value 1, strokeColor_cb.selectedItem.data, 100);
　　//根据不同的选择绘制直线或矩形
　　switch (shape_cb.selectedItem.toLowerCase())
　　{case ’直线’ :
　　lineTo(x2,y2);
　　break;
　　case ’矩形’ :
　　beginFill(fillColor_cb.selectedItem.data);
　　lineTo(x2, y1);
　　lineTo(x2, y2);
　　lineTo(x1, y2);
　　lineTo(x1, y1);
　　endFill();
　　break;
　　}
　　}
　　}//结束if(this.isDrawing)语句
　　updateAfterEvent();
　　};
　　mouseListener.onMouseUp = function() {
　　this.isDrawing = false;
　　};
　　Mouse.addListener(mouseListener);
　　var clearListener:Object = new Object();
　　clearListener.click = function() {
　　canvas_mc.clear();
　　};
　　clear_button.addEventListener("click", clearListener);
　　//
　　var stopDrawingListener:Object = new Object();
　　stopDrawingListener.click = function(evt:Object) {
　　Mouse.removeListener(mouseListener);
　　evt.target.enabled = false;
　　startDrawing_button.enabled = true;
　　};
　　stopDrawing_button.addEventListener("click", stopDrawingListener);
　　var startDrawingListener:Object = new Object();
　　startDrawingListener.click = function(evt:Object) {
　　Mouse.addListener(mouseListener);
　　evt.target.enabled = false;
　　stopDrawing_button.enabled = true;
　　};
　　startDrawing_button.addEventListener("canvas_mc", startDrawingListener);
　　this.createEmptyMovieClip("", this.getNextHighestDepth());
　　canvas_mc.onRelease = function() {
　　this.clear();
　　};
　　
　　4 结束语
　　
　　使用Flash能快速地制作课堂中使用的课件，制作出来的课件能生动显示出教学内容，在其中增加类似板书功能的交互操作后，能大大丰富和增强了课件的教学功能，提高教学效果。
　　通常采用ActionScript2.0实现交互功能，在明确需求后，如果能够研究Flash自带的示例文件和帮助，会使到制作交互功能的时候少走弯路，增强制作课件的水平。