程海生

Flash動(dòng)態(tài)繪圖在課件中的應(yīng)用

程海生

在一些學(xué)科的教學(xué)中經(jīng)常需要畫函數(shù)的圖像，如果能讓計(jì)算機(jī)進(jìn)行動(dòng)態(tài)繪圖，可以讓學(xué)生更清楚地看到函數(shù)變化的過程，能更好地幫助學(xué)生學(xué)習(xí)教學(xué)內(nèi)容。筆者以繪制數(shù)學(xué)函數(shù)圖像為例介紹如何運(yùn)用Flash軟件進(jìn)行動(dòng)態(tài)繪圖。

一、添加靜態(tài)圖形、文字、組件

1.創(chuàng)建新文件

啟動(dòng)Flash MX 2004創(chuàng)建一個(gè)新的Flash文檔，使用默認(rèn)的舞臺(tái)大小550×400。在用程序繪制動(dòng)態(tài)圖像前，先用Flash繪圖工具制作界面和一些靜態(tài)的圖形，這樣可以簡化程序。在制作過程中也要使用一些技巧才能使這些靜態(tài)圖形快速完成，并且與后面的程序繪圖準(zhǔn)確結(jié)合。

2.制作軟件界面

將圖層一重命名為“界面”，并繪制出如圖1所示的矩形界面。圖中間的部分是空的，背景為白色。

圖1 繪制界面

3.繪制坐標(biāo)系

(1)繪制坐標(biāo)原點(diǎn)

①新建圖層，并將其命名為“坐標(biāo)原點(diǎn)”，拖拽到“界面”圖層的下一層。

②在新圖層中，繪制一個(gè)沒有邊線的紅色小圓點(diǎn)，在屬性面板中將其寬和高都設(shè)為2，x設(shè)為274，y設(shè)為199，這樣就精確地使小紅點(diǎn)的中心為(275，200)了(如圖2所示)。

圖2

說明：因?yàn)镕lash中的圖形的坐標(biāo)是其左上角的點(diǎn)的坐標(biāo)，又因?yàn)榧t色小圓點(diǎn)的寬是2，坐標(biāo)x為274，所以它的中心點(diǎn)坐標(biāo)x值是：274+2/2=275；同理，中心點(diǎn)坐標(biāo)y值為200。

(2)繪制x軸

再添加一個(gè)新圖層，將其重命名為“x軸”，并將其拖拽到“坐標(biāo)原點(diǎn)”圖層的下一層，隱藏“界面”圖層，使用線條工具按住Shift鍵繪制一條橫線，在屬性面板中對其做如下設(shè)置，寬：550，x：0，y：200，顯示“界面”圖層后，在“x軸”圖層合適的位置上繪制一個(gè)向右的箭頭，標(biāo)出x軸正方向。

(3)繪制x軸刻度

①在“x軸”圖層上插入一個(gè)新圖層，將其命名為“x軸刻度”，鎖定其他圖層，并隱藏“界面”圖層。

圖3

②在x軸上繪制一條短豎線作為刻度標(biāo)記，在屬性面板中對其進(jìn)行如下設(shè)置，高：5，x：15，y：195，這樣在x軸左邊就有了一個(gè)如圖3所示的刻度。

③選中短豎線，使用組合鍵Ctrl+G將其組合，然后使用組合鍵Ctrl+C對其復(fù)制，然后連續(xù)使用Ctrl+Shift+V組合鍵26次，這樣在同一個(gè)位置就有了27個(gè)刻度了。

④選擇最上層的刻度，在屬性面板中將其x值改為535。設(shè)置完后得到如圖4所示的結(jié)果。

圖4

⑤使用組合鍵Ctrl+A選擇所有x軸刻度，然后使用組合鍵Ctrl+K打開“對齊”面板，單擊“水平平均間隔”按鈕，這些刻度就如圖5所示，均勻地排列到x軸上了，相鄰兩個(gè)刻度之間的距離都是20個(gè)像素，中間的一個(gè)刻度正好在原點(diǎn)上。

圖5

(4)繪制y軸和y軸上的刻度與繪制x軸及其刻度的方法相同

說明：在繪制刻度時(shí)一定要計(jì)算好刻度個(gè)數(shù)、第一個(gè)刻度的位置和最后一個(gè)刻度的位置。本例中y軸刻度可參考如下設(shè)置，刻度個(gè)數(shù)21個(gè)；刻度大小，寬：5，高：0；最上面的刻度位置，x：275，y：400；最下面的刻度位置，x：275，y：0。最后用“垂直平均間隔”將刻度平均分布。

(5)用文字工具，給坐標(biāo)軸上的刻度標(biāo)上刻度值

4.繪制網(wǎng)格線

再添加一個(gè)圖層，將其命名為“網(wǎng)絡(luò)線”，并將其拖至最下一層，使用與繪制坐標(biāo)軸刻度相同的方法繪制網(wǎng)格線。

5.添加文字和組件

在“界面”圖層上添加一個(gè)圖層，將其命名為“文字”，在其上輸入必要的文字。再添加一個(gè)圖層，將其命名為“組件”，用Ctrl+F7打開“組件”面板，如圖6所示，找到“NumericStepper”組件并將其拖拽到舞臺(tái)上，在屬性面板中進(jìn)行如下參數(shù)設(shè)置，maxmum：5；minmum：-5；stepSize：0.1；value：0(如圖7所示)。

圖6

圖7

復(fù)制粘貼這個(gè)組件成3個(gè)，并如圖8所示放置，在屬性面板中將它們的實(shí)例名稱分別命名為a，b，c。至此準(zhǔn)備工作完成。

圖8

二、編寫動(dòng)態(tài)繪圖程序

在“界面”圖層下面，“坐標(biāo)原點(diǎn)”圖層上面，插入一個(gè)新圖層，將其命名為“繪圖程序”，如圖9所示在“繪圖程序”圖層的第一幀上添加如下語句：

//自定義drawfx()函數(shù)，用于畫二次函數(shù)圖像

function drawfx() {

//清除原有圖像

_root.clear();

//x，y是以窗口客戶區(qū)坐標(biāo)系中點(diǎn)(275，200)為原點(diǎn)，一個(gè)像素為一個(gè)單位長度的平面直角坐標(biāo)系中的點(diǎn)的坐標(biāo)x，y值。

x = -275;

//x0，y0是以窗口客戶區(qū)坐標(biāo)系中點(diǎn)(275，200)為原點(diǎn)，20個(gè)像素為一個(gè)單位長度的平面直角坐標(biāo)系中的點(diǎn)的坐標(biāo)x，y值。

x0 = x/20;

//用二次函數(shù)求出y0

y0 = a.value*Math.pow(x0, 2)+b.value*x0+c.value;

y = y0*20;

//x1，y1為窗口客戶區(qū)坐標(biāo)系中點(diǎn)的坐標(biāo)x，y值。

x1 = x+275;

y1 = -(y-200);

//定義線條樣式。

_root.lineStyle(2, 0x0000FF);

//移動(dòng)繪制定點(diǎn)到(x1,y1)

_root.moveTo(x1,y1);

//使用循環(huán)語句繪圖，由499條小線段組成函數(shù)圖像，由于線段都很短，看起來函數(shù)圖像還是很平滑的

for (x=-274; x<=275; x++) {

x0 = x/20;

y0 = a.value*Math.pow(x0, 2)+b.value*x0+c.value;

y = y0*20;

x1 = x+275;

y1 = -(y-200);

_root.lineTo(x1, y1);

_root.moveTo(x1, y1);

}

//強(qiáng)制刷新畫面

updateAferEvent();

}

//調(diào)用drawfx()函數(shù)，畫二次函數(shù)圖像

drawfx();

//新建一個(gè)名為myobj的對象

myobj = new Object();

//為對象添加change事件函數(shù)，在函數(shù)中調(diào)用drawfx函數(shù)畫二次函數(shù)圖像

myobj.change = function() {

drawfx();

};

//分別為三個(gè)組件添加監(jiān)聽對象

a.addEventListener("change", myobj);

b.addEventListener("change", myobj);

c.addEventListener("change", myobj);

圖9

這樣一個(gè)可以動(dòng)態(tài)繪制二次函數(shù)圖像的課件就制作完成了，通過調(diào)整系數(shù)的大小，就可以看到相應(yīng)的函數(shù)圖像了，運(yùn)行結(jié)果如圖10所示。

圖10

(本欄責(zé)任編輯/安健)

2012-05-15

程海生，本科，中教一級。

河北省承德市寬城滿族自治縣龍須門鎮(zhèn)中學(xué)。