摘要:介紹了在Flash8中使用ActionScript2.0制作交互型課件時,如何實現(xiàn)進(jìn)度控制、臨時板書、繪圖的幾點技巧。
關(guān)鍵詞:Flash; ActionScript2.0; 課件; 繪圖
中圖分類號:TP391文獻(xiàn)標(biāo)識碼:A文章編號:1009-3044(2008)08-11ppp-0c
1 引言
Flash是最廣泛使用的多媒體課件制作軟件之一。利用Flash課件能將抽象的知識以動畫的形式生動對表現(xiàn)出來,化抽象為形象,從而幫助學(xué)生理解抽象內(nèi)容。另外,在實際教學(xué)過程中,教師通常要使用多媒體課件做兩類控制:一是控制課件內(nèi)容的演示順序,二是根據(jù)當(dāng)時學(xué)生的反饋信息,在計算機上做臨時的板書說明、指示難點和重點等。因此,在課堂演示型課件制作過程中,需要實現(xiàn)簡單人機交互,也就是要實現(xiàn)一定的交互功能。
2 需求分析
在多媒體課堂演示型課件實際操作中,對教師需要的功能實現(xiàn)方法的分析結(jié)果:
(1)控制課件內(nèi)容的演示順序的需求實現(xiàn)方法
只需要在課件中添加能跳轉(zhuǎn)到前一幀、下一幀、第一幀、退出系統(tǒng)的功能按鈕即可。
(2)在計算機上做臨時的板書說明、指示難點和重點的需求實現(xiàn)方法
可以通過在課件上增加畫直線、畫矩形的功能來實現(xiàn)。使用畫直線功能,相當(dāng)于拿著一支筆在課件上一筆一劃地寫字,也可以直接在重點、難點下劃線;使用帶填充色的畫矩形功能,可以覆蓋一些課堂內(nèi)容,便于課堂提問以及知識點的回顧。這個需求的實現(xiàn)方法可以歸結(jié)為設(shè)置繪圖格式。
課件需要功能的整體功能可以用圖1的用例圖表示。
圖1
控制演示進(jìn)度功能的需求分析結(jié)果如圖3的用例圖所示。
圖2
設(shè)置繪圖格式功能的需求分析結(jié)果用圖2的用例圖表示。
圖3
3 實現(xiàn)方法
3.1 控制演示進(jìn)度功能的實現(xiàn)方法
(1)對照圖2的分析結(jié)果,在Flash8中新建一個名為“按鈕”的層,然后在舞臺的適當(dāng)位置(如右下角)添中圖4所示的四個按鈕,依次對應(yīng)圖2的各個用例。
圖4
(2)分別單擊圖4中的各個按鈕,然后在“動作”面板中輸入以下的語句:
3.2 設(shè)置繪圖格式功能的實現(xiàn)方法
(1)這項交互功能的實現(xiàn)方法比上面所述的要復(fù)雜,在實現(xiàn)這項功能的時候,如果利用Flash這個軟件自帶的示例文檔和幫助文件,可以提高效率。在Flash8安裝文件夾內(nèi)“example”子文件夾中有一個 “drawingapi.fla”的文件,提供了畫直線,矩形,選擇線的顏色的方法。在幫助中的搜索“removeListener”,可以找到Mouse.removeListener 方法的示例,其中提示了如何利用單擊鼠標(biāo)這個操作,實現(xiàn)畫線與取消畫線功能的循環(huán)轉(zhuǎn)換。
(2)對照圖3的分析結(jié)果,在Flash8中新建一個名為“繪圖控制”的層,然后在舞臺的適當(dāng)位置(如舞臺的最下方)添中圖5所示的四個控件,依次對應(yīng)圖3的各個用例。這四個控件可以直接從“drawingapi.fla”復(fù)制后再修改標(biāo)簽來實現(xiàn)。
圖5
(3)在“繪圖控制”的層輸入以下語句。
// 使用多重循環(huán)創(chuàng)建一個保存WEB顏色設(shè)置的陣列
var colors = new String(\"00,33,66,F(xiàn)F,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; //設(shè)置可以選擇的繪圖類型 shape_cb.dataProvider = ['直線', '矩形']; //下面的實現(xiàn)方法來自幫助中“removeListener”的搜索結(jié)果 //下面的實例在舞臺上附加三個按鈕,并讓用戶在運行時用鼠標(biāo)指針在 SWF 文件中繪制線條。一個按鈕從 SWF 文件中清除所有線條。第二個按鈕刪除鼠標(biāo)偵聽器,所以用戶無法繪制線條。第三個按鈕在鼠標(biāo)偵聽器被刪除后添加鼠標(biāo)偵聽器,所以用戶可以再次繪制線條。將下面的 ActionScript 添加到時間軸的第 1 幀: //把按鈕的X坐標(biāo)改為負(fù)數(shù),避免顯示出這三個按鈕 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'}); //三個按鈕都設(shè)為不可見 clear_button.visible=1; stopDrawing_button.visible=1; startDrawing_button.visible=1; startDrawing_button.enabled = 1; //下面的示例每當(dāng)用戶在運行時單擊、拖動和松開鼠標(biāo)時使用 Drawing API 繪制一個矩形。 var thisClip:MovieClip=this.createEmptyMovieClip(\"canvas_mc\", this.getNextHighestDepth()); //當(dāng)按下和釋放鼠標(biāo)時創(chuàng)建一個mouse監(jiān)聽器 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); //根據(jù)不同的選擇繪制直線或矩形 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; } } }//結(jié)束if(this.isDrawing)語句 updateAfterEvent(); }; mouseListener.onMouseUp = function() { this.isDrawing = 1; }; 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 = 1; 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 = 1; stopDrawing_button.enabled = true; }; startDrawing_button.addEventListener(\"canvas_mc\", startDrawingListener); this.createEmptyMovieClip(\"\", this.getNextHighestDepth()); canvas_mc.onRelease = function() { this.clear(); }; 4 結(jié)束語 使用Flash能快速地制作課堂中使用的課件,制作出來的課件能生動顯示出教學(xué)內(nèi)容,在其中增加類似板書功能的交互操作后,能大大豐富和增強了課件的教學(xué)功能,提高教學(xué)效果。 通常采用ActionScript2.0實現(xiàn)交互功能,在明確需求后,如果能夠研究Flash自帶的示例文件和幫助,會使到制作交互功能的時候少走彎路,增強制作課件的水平。