吴琼香
摘要:针对《多媒体素材与课件制作实训》课程教学中存在的问题:制作各类习题时学生不会编写脚本的问题,该文提供Flash实现各种习题详细的设计思路、实现过程及方法,以便对学生的未来教育教学工作提供可操作性参考。
关键词:动作脚本;FLASH;设计;实现;习题
中图分类号:G64 文献标识码:A 文章编号:1009-3044(2017)30-0109-05
Research on Development Process and Method Based on ActionScript3.0 Exercises
WU Qiong-xiang
(Guangdong Preschool Normal College in Maoming, Maoming 525000, China)
Abstract: Aiming at the existing multimedia courseware and the "training" problem in Teaching: students do not write the script of the production of various types of exercises, this paper provides the design and Realization of Flash implementation process and method with various exercises, in order to students in the future teaching work to provide operational reference.
Key words: action script; FLASH; design; implementation; exercises
在各类学科课程学习中总能见到各类习题,若用Flash设计习题则提高学习效率,用flash设计的习题不用教师改,由Flash批改兼打分并能及时反馈。这样,学生在自主学习过程中有自己考核自己的机会,及时反馈学习情況,知道自己在哪方面还做得不够好,从而加强学习,节省时间,提高学习效率,使课程学习更全面;也省去教师批改作业的麻烦。中小学教师若能掌握在Flash中设计习题,对未来的教学将是事半功倍。我校师范生在二年级开设了《多媒体素材与课件制作实训》课程,此课程的教学目标就是制作多媒体教学课件,在课程中有一内容正是习题的设计。在各种考试中,常见的题型无非就是选和写,即选择题、填写作题。本文针对选择题、填空题,连线题结合我校师范生专业的学生实际情况,详细阐述如何利用Flash设计选择题的实现方法,使业师范生的教育技术水平更上一层楼。
1 单项选择题的设计与实现
1.1 设计单项选择题
1.1.1 利用透明按钮设计单项选择题
几乎每个学科的练习题都有单项选择题,在Flash实现单项选择题的设计方法步骤如下:
1) 建立静态文本,把题目及答案制作成静态文本,排好版。
2) 制作按钮元件,在舞台上创建4个按钮实例,四个实例的透明度都设为0%;4个透明按钮分别盖住4个答案选项,4个按钮实例名分别为answer1_btn,answer2_btn,answer3_btn,answer4_btn。再做一个redo按钮元件,在舞台上创建一个实例,其实例名为redo_btn。
3) 建立一个动态文本,实例名名为answer1_txt。
4) 建立一个图层名为Actions,该图层的第1帧上的脚本如下所示:
answer1_btn.addEventListener(MouseEvent.CLICK, DaAn);
answer2_btn.addEventListener(MouseEvent.CLICK, CuoWu);
answer3_btn.addEventListener(MouseEvent.CLICK, CuoWu);
answer4_btn.addEventListener(MouseEvent.CLICK, CuoWu);
redo_btn.addEventListener(MouseEvent.CLICK, ReDo);
function DaAn(event:MouseEvent):void
{answer_txt1.text="回答正确";}//动态文本框要选择设备字体。
function CuoWu(event:MouseEvent):void
{answer_txt1.text="回答错误,加油!";}
function ReDo(event:MouseEvent):void
{answer_txt1.text="";}
1.1.2 利用RadioButton组件设计单项选择题
利用RadioButton组件实现单项选择题设计的方法步骤如下:
1) 在舞台上建立静态文本,把题目及答案制作成静态文本,排好版;
2) 点击[窗口]-[组件]-[User Interface]-拉出4个[RadioButton]组件;
3) 四个RadioButton实例名分别为A1,B1,C1,D1,改四个RadioButton组件参数的label属性分别为A,B,C,D;
4) 在舞台上建立动态文本,实例名名为answer2_txt;
5) 制作一个影片剪辑播放声音,导入两个音频文件,一个音频播放太棒了,一个播放加油;第1帧空白并在此帧写上脚本stop,停在此帧,第5帧放第一个声音“太棒了”,第8帧空白帧并写上脚本stop,停在此帧,第10帧放第二个声音“加油”。endprint
详细制作此影片剪辑中的方法步骤如下:
第1帧代码如下:
stop();
第5和第10帧分别放置两个音频的方法如下:
首先导入两个音频在库中,创建AS链接如图1所示:
再对两个声音的属性进行AS链接,链接分别为TaiBangLe,JiaYou;
在第5帧写代码如下:
var taibangle:Sound=new TaiBangLe();
taibangle.play();
第8帧代码如下:
Stop();
第10帧代码如下:
var jiayou:Sound=new JiaYou();
jiayou.play();
在第15帧插入普通帧,影片剪辑时间轴如图2所示:
将此影片剪辑拖放到舞台,实例名为shengyinhuida_mc;
6) 在Actions图层相应的帧上输入以下代码即可:
function Zq(event:MouseEvent):void{
shengyinhuida_mc.gotoAndPlay(5);
answer2_txt.text="太棒了!";}
function Cw(event:MouseEvent):void{
shengyinhuida_mc.gotoAndPlay(10);
answer2_txt.text="加油!";}
A1.addEventListener(MouseEvent.CLICK, Cw);
B1.addEventListener(MouseEvent.CLICK, Cw);
C1.addEventListener(MouseEvent.CLICK, Zq);
D1.addEventListener(MouseEvent.CLICK, Cw);
1.2 利用RadioButton組件设计单项选择测验题
在自主学习环境下,用Flash设计的自测题可立即呈现得分,让学生的自主学习更有效率,学生可以选择重新测试加强记忆。自测题选择题的设计原则是:全屏幕进行测试,最后一帧显示测试得的总分。
其设计详细方法和步骤如下:
Flash制作自测题至少需要4个图层:Actions图层(用于编写代码),按钮图层(放置按钮实例),题目(放置题目和RadioButton组件),动态文本框图层(用于显示测试的总得分,动态文本框出现在最后两帧,此图层的前面都是空白帧),除此四个图层外,还可以根据修饰的需要增加其他的图层比如放置背景的图层。
第1帧上的制作如下:
题目图层上用静态文本制作好题目并排好版,在相应的四个答案选项前面,放置四个RadioButton组件和题目一起排好版。四个RadioButton的实例名分别是a_1,b_1,c_1,d_1;它们的lebal属性分别设置为A,B,C,D。他们的组名是一样的,比如都是Group1
在按钮图层上,放置一个按钮,实例名为next1_btn。
Actions图层的第一帧代码如下:
stop();//停止在此帧。
stage.displayState=StageDisplayState.FULL_SCREEN;//全屏幕显示;
var fenshu:int = 0;//设置原始分数为0;
next1_btn.addEventListener(MouseEvent.CLICK,totalfen);//单击next1_btn就执行totalfen函数;
function totalfen(event:MouseEvent):void
{if (a_1.selected == true)//如果A选项被选中,执行下面大括号的代码,否则执行else后面大会括号代码。
{fenshu +=2;// 变量fenshu增加2
nextFrame();}//跳到第下一帧,即下一题。
else
{fenshu +=0;//变量fenshu保持原值;
nextFrame();}}跳到第下一帧,即下一题。
第一帧的效果如图3所示:
第二帧的制作只需要对第1帧进行稍微修改即可,详细制作方法如下:
在题目图层的第2帧插入关键帧(其实是延续了第1帧的内容),只需要把英语题目文本改一下,再把四个RadioButton的实例名分别改为a_2,b_2,c_2,d_2,table标签不变。组名改为Group2。
在按钮图层的第2帧插入关键帧,把按钮实例名改为next2_btn;
Actions第2帧的代码只稍微改实例名即可,详细如下:
next2_btn.addEventListener(MouseEvent.CLICK,totalfen2);
function totalfen2(event:MouseEvent):void
{if (a_2.selected == true)//若正确答案A选项被选中,则执行后面大括号代码,否则执行else后面大会括号代码。
{fenshu +=2;
nextFrame();}
else
{fenshu += 0;
nextFrame();}}endprint
这样就完成的自测题第2帧的制作,后面幀的制作方法一样,就不一一讲解,最后2帧增加了一个动态文本框图层,显示总得分。下面详细讲一下最后两帧的制作方法。
第50帧的详细制作方法:
在题目图层上插入关键帧,修改英语选择题的题目文本,四个RadioButton的实例名分别改为a_50,b_50,c_50,d_50,table标签不变,四个RadioButton的组名都是Group50。在该图层的第51帧插入空白关键帧。
在按钮图层的第50帧插入关键帧,把按钮实例名改为next50_btn。
创建一个图层名为动态文本框,在该图层的舞台上创建一动态文本框,实例名为my_total,在该图层的第51帧插入普通帧。
Actions图层的第50帧的代码如下:
next50_btn.addEventListener(MouseEvent.CLICK,totalfen50);
function totalfen50(event:MouseEvent):void
{if (c_50.selected == true)//若正确答案C项选中
{fenshu +=2;
my_total.text="本次测试您的得分是:"+String(fenshu)+"分";
nextFrame();}//此代码执行后跳到第51帧,题目图层的第51帧是空白帧;
else
{fenshu +=0;
my_total.text="本次测试您的得分是:"+String(fenshu)+"分";
nextFrame();}}
自测题如果是教师用于学生考试用的,那么在按钮的第51帧也插入空白关键帧即可。
若是用于学生自主学习环境中,可设计成由学生自主选择是否重新测试,那么按钮的第51帧插入关键帧,把按钮实例改为redo_btn,Actions图层的第51帧代码只需编写成点击该按钮跳转回到第一帧即可。除此外还可以在改图层的第51帧增加其他按钮,比如退出按钮,返回课件首页等等诸如之类的按钮。
2 利用CheckBox组件实现多项选择题的设计
1) 在舞台上建立静态文本,把题目及答案制作成静态文本,排好版;
2) 点击[窗口]-[组件]-[User Interface]-拖5个[CheckBox]到舞台上;
3) 5个CheckBox实例名分别为A1,B1,C1,D1,E1等,改CheckBox组件参数的label属性,为ABCDE等选项。
4) 在舞台上建立动态文本,实例名名为answer2_txt;
5) 制作一个影片剪辑播放声音,导入两个音频文件,一个音频播放太棒了,一个播放加油;第1帧空白并在此帧写上脚本stop,停在此帧,第5帧放第一个声音“太棒了”,第8帧空白帧并写上脚本stop,停在此帧,第10帧放第二个声音“加油”。详细制作方法参考利用RadioButton制作单项选择题的步骤。
6) 制作一个提交按钮,实例名为tjCB_btn;
7) Actions图层上相应帧上的脚本如下所示:
tjCB_btn.addEventListener(MouseEvent.CLICK, CheckBox_tj);
function CheckBox_tj(event:MouseEvent):void
{if(A2.selected==true&&B2.selected==false&&C2.selected==true&&D2.selected==true&&E2.selected==false){
answer2_txt.text="太棒了";
SYHD.gotoAndPlay(5);}
else{
answer2_txt.text="加油";
SYHD.gotoAndPlay(30);}}
3 填空题的实现
3.1 选词填空题设计与实现
选词填空题利用鼠标拖放词语实现选词效果,鼠标拖动词组在任何区域内释放,当点击提交按钮时反馈答题的分数,也可以在答题处反馈红色的√或红色×,让答题者知道自己的答题情况。
其基本程序设计代码如下:
function 开始拖动函数名(event:MouseEvent):void
{词组实例名.startDrag();}
function 停止拖动函数名(event:MouseEvent):void
{词组实例名.stopDrag();}
判断选词是否正确,要制作一个透明的影片剪辑实例,赋予它相应的实例名,置于答题空白处,判断它是否与相应正确词语相碰,若相碰了就正确不相碰则不正确,使用的程序为选择程序结构if...else...
if(碰撞)
{//满足碰撞执行的语句}
else
{//不满足碰撞执行的语句}
3.2 填空题——填写题的设计与实现
在Flash中利用输入文本类型可以实现填写练习题。
若要反馈出填空题是否答题正确,则赋予输入文本框实例名,判断其内容是否是正确答案的内容,其程序设计为选择程序结构if...else...
If(输入文本框实例名.text==”正确答案”||输入文本框实例名.text==”正确答案”)
{//满足条件执行的语句}/ /若只有一个正确答案可省略||及其后面的内容endprint
else
{//不满足条件执行的语句}
实现的方法步骤:
1) 建立一个图层放置题目(使用静态文本)。
2) 在题目上方建立一个放置输入文本框图层。放置四个输入文本框,实例名称分别为:sr1_txt,sr2_txt,sr3_txt,sr4_txt。另外再放置2个动态文本框,实例名称分别是answer1_txt,answer2_txt。
3) 新建一个影片剪辑的元件,内部含有两帧,第1帧放置√,第2帧放置×。在第1帧stop();
4) 建立一个图层放置4个含有√和×的影片剪辑。实例名称分别是gc1_mc,gc2_mc,gc3_mc,gc4_mc。
5) 建立一个按钮图层,放置三个按钮如下图所示,按钮名称分别是sumbit_btn,redo_btn,help_btn。
6) 建立Actions图层,代码如下:
import flash.events.MouseEvent;
function TKT(event:MouseEvent):void
{if(sr1_txt.text=="too much")
{gc1_mc.gotoAndStop(1);
gc1_mc.visible=true;}
else
{gc1_mc.gotoAndStop(2);
gc1_mc.visible=true;}
if(sr2_txt.text=="much too")
{gc2_mc.gotoAndStop(1);
gc2_mc.visible=true;}
else
{gc2_mc.gotoAndStop(2);
gc2_mc.visible=true;}
if(sr3_txt.text=="looked")
{gc3_mc.gotoAndStop(1);
gc3_mc.visible=true;}
else
{gc3_mc.gotoAndStop(2);
gc3_mc.visible=true;}
if(sr4_txt.text=="find")
{gc4_mc.gotoAndStop(1);
gc4_mc.visible=true;
}
else
{gc4_mc.gotoAndStop(2);
gc4_mc.visible=true;}}
sumbit_btn.addEventListener(MouseEvent.CLICK,TKT);
redo_btn.addEventListener(MouseEvent.CLICK, REDO);
function REDO(event:MouseEvent):void
{gc1_mc.visible=false;
gc2_mc.visible=false;
gc3_mc.visible=false;
gc4_mc.visible=false;
sr1_txt.text="";
sr2_txt.text="";
sr3_txt.text="";
sr4_txt.text="";
answer1_txt.text="";
answer2_txt.text="";}
help_btn.addEventListener(MouseEvent.CLICK, HELP);
function HELP(event:MouseEvent):void
{answer1_txt.text="1、too much much too";
answer2_txt.text="2、looked find";}
測试影片效果如图5所示。
输入相应一些内容,单击sumbit_btn效果如图6所示。
4 连一连习题的设计与实现
连一连练习题一般有两组内容,把两组的内容分别制作成相应的影片剪辑,并赋予实例名。左边实例名分别是a1,a2,a3,a4,右边正确对应左边的影片剪辑的实例名分别是b1,b2,b3,b4;显示是否连线正确的影片剪辑动画的实例名分别为da1,da2,da3,da4。
其代码如下:
import flash.display.Shape;
var drawing:Boolean = false;
da1.alpha = 0;// da1红色√或红色×的影片剪辑的实例名,此处设置其透明度为0;
da2.alpha = 0;
da3.alpha = 0;
da4.alpha = 0;
var curBtn:String;
var streak:Shape = new Shape(); //创建线条对象
addChild(streak); //添加到显示列表
var colour:Number = 0xccff33; //设置线条颜色
var thick:int = 2; //画笔粗细
var start_x:Number; //画笔起点x值endprint
var start_y:Number; //畫笔起点y值
var line1:Shape = new Shape();
var line2:Shape = new Shape();
var line3:Shape = new Shape();
var line4:Shape = new Shape();
addChild(line1);
addChild(line2);
addChild(line3);
addChild(line4);
a1.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
a2.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
a3.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
a4.addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);
function startDrawing(event:MouseEvent):void
{curBtn = event.currentTarget.name;
start_x = event.currentTarget.x;
start_y = event.currentTarget.y;
drawing = true;}
stage.addEventListener(MouseEvent.MOUSE_MOVE, moving);
function moving(event:MouseEvent):void
{if( drawing == true )
{streak.graphics.clear();
streak.graphics.lineStyle(thick, colour);
streak.graphics.moveTo(start_x, start_y);
streak.graphics.lineTo(mouseX, mouseY);}}
stage.addEventListener(MouseEvent.MOUSE_UP, stopDrawing);
function stopDrawing(event:MouseEvent):void
{if( b1.hitTestPoint(mouseX, mouseY) && drawing == true )
{streak.graphics.clear();
line1.graphics.lineStyle(thick, colour);
line1.graphics.moveTo(start_x, start_y);
line1.graphics.lineTo(b1.x, b1.y);
this[curBtn].removeEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
drawing = false;
if(curBtn == "a1")
{da1.gotoAndStop(2);}}
else if( b2.hitTestPoint(mouseX, mouseY) && drawing == true )
{streak.graphics.clear();
line2.graphics.lineStyle(thick, colour);
line2.graphics.moveTo(start_x, start_y);
line2.graphics.lineTo(b2.x, b2.y);
this[curBtn].removeEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
drawing = false;
if(curBtn == "a2")
{da2.gotoAndStop(2);}}
else if( b3.hitTestPoint(mouseX, mouseY) && drawing == true )
{streak.graphics.clear();
line3.graphics.lineStyle(thick, colour);
line3.graphics.moveTo(start_x, start_y);
line3.graphics.lineTo(b3.x, b3.y);
this[curBtn].removeEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
drawing = false;
if(curBtn == "a3")
{da3.gotoAndStop(2);}}
else if( b4.hitTestPoint(mouseX, mouseY) && drawing == true )
{streak.graphics.clear();endprint
line4.graphics.lineStyle(thick, colour);
line4.graphics.moveTo(start_x, start_y);
line4.graphics.lineTo(b4.x, b4.y);
this[curBtn].removeEventListener(MouseEvent.MOUSE_DOWN,startDrawing);
drawing = false;
if(curBtn == "a4")
{da4.gotoAndStop(2);}}
else
{drawing = false;
streak.graphics.clear();}}
clear_btn.addEventListener(MouseEvent.CLICK,ClearF);
function ClearF(e:MouseEvent):void
{for(var i=1; i<5; i++)
{this["line"+i].graphics.clear();
this["da"+i].alpha = 0;
this["da"+i].gotoAndStop(1);
this["a"+i].addEventListener(MouseEvent.MOUSE_DOWN, startDrawing);}}
check_btn.addEventListener(MouseEvent.CLICK,CheckF);
function CheckF(e:MouseEvent):void
for(var i=1; i<5; i++)
{this["da"+i].alpha = 1; }}
5 結束语
新型习题模式是信息时代很流行的学习方式,也必将成为新世纪学校教育教学主要的考核方法。 它不仅给予学生及时有效的课程帮助辅导,而且加强了老师对学生的管理,节省了教师大量时间,势在必行。
基于Flash的多媒课件制作内容丰富、交互性强,多媒体课件的开发和运用,激发了学生学习的积极性,提高了学习的效率,培养了学生的创新精神和实践能力,体现了计算机辅助教学的优越性。endprint