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

摘要：介紹了在Flash8中使用ActionScript2.0制作交互型課件時，如何實現進度控制、臨時板書、繪圖的幾點技巧。

關鍵詞：Flash; ActionScript2.0; 課件; 繪圖

中圖分類號：TP391文獻標識碼：A文章編號：1009-3044(2008)08-11ppp-0c

1 引言

Flash是最廣泛使用的多媒體課件制作軟件之一。利用Flash課件能將抽象的知識以動畫的形式生動對表現出來，化抽象為形象，從而幫助學生理解抽象內容。另外，在實際教學過程中，教師通常要使用多媒體課件做兩類控制：一是控制課件內容的演示順序，二是根據當時學生的反饋信息，在計算機上做臨時的板書說明、指示難點和重點等。因此，在課堂演示型課件制作過程中，需要實現簡單人機交互，也就是要實現一定的交互功能。

2 需求分析

在多媒體課堂演示型課件實際操作中，對教師需要的功能實現方法的分析結果：

（1）控制課件內容的演示順序的需求實現方法

只需要在課件中添加能跳轉到前一幀、下一幀、第一幀、退出系統的功能按鈕即可。

（2）在計算機上做臨時的板書說明、指示難點和重點的需求實現方法

可以通過在課件上增加畫直線、畫矩形的功能來實現。使用畫直線功能，相當于拿著一支筆在課件上一筆一劃地寫字，也可以直接在重點、難點下劃線；使用帶填充色的畫矩形功能，可以覆蓋一些課堂內容，便于課堂提問以及知識點的回顧。這個需求的實現方法可以歸結為設置繪圖格式。

課件需要功能的整體功能可以用圖1的用例圖表示。

圖1

控制演示進度功能的需求分析結果如圖3的用例圖所示。

圖2

設置繪圖格式功能的需求分析結果用圖2的用例圖表示。

圖3

3 實現方法

3.1 控制演示進度功能的實現方法

（1）對照圖2的分析結果，在Flash8中新建一個名為“按鈕”的層，然后在舞臺的適當位置（如右下角）添中圖4所示的四個按鈕，依次對應圖2的各個用例。

圖4

（2）分別單擊圖4中的各個按鈕，然后在“動作”面板中輸入以下的語句：

3.2 設置繪圖格式功能的實現方法

（1）這項交互功能的實現方法比上面所述的要復雜，在實現這項功能的時候，如果利用Flash這個軟件自帶的示例文檔和幫助文件，可以提高效率。在Flash8安裝文件夾內“example”子文件夾中有一個 “drawingapi.fla”的文件，提供了畫直線，矩形，選擇線的顏色的方法。在幫助中的搜索“removeListener”，可以找到Mouse.removeListener 方法的示例，其中提示了如何利用單擊鼠標這個操作，實現畫線與取消畫線功能的循環轉換。

（2）對照圖3的分析結果，在Flash8中新建一個名為“繪圖控制”的層，然后在舞臺的適當位置（如舞臺的最下方）添中圖5所示的四個控件，依次對應圖3的各個用例。這四個控件可以直接從“drawingapi.fla”復制后再修改標簽來實現。

圖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=1;

stopDrawing_button.visible=1;

startDrawing_button.visible=1;

startDrawing_button.enabled = 1;

//下面的示例每當用戶在運行時單擊、拖動和松開鼠標時使用 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 = 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 結束語

使用Flash能快速地制作課堂中使用的課件，制作出來的課件能生動顯示出教學內容，在其中增加類似板書功能的交互操作后，能大大豐富和增強了課件的教學功能，提高教學效果。

通常采用ActionScript2.0實現交互功能，在明確需求后，如果能夠研究Flash自帶的示例文件和幫助，會使到制作交互功能的時候少走彎路，增強制作課件的水平。