楊鵬飛，王瑩

摘要：隨著計算機應(yīng)用的普及，許多行業(yè)普遍采用多媒體技術(shù)進行輔助演示，而電子白板因其直觀易用，對軟硬件環(huán)境要求不高，深得相關(guān)行業(yè)人員的青睞。文章以Flash8.0和AS2.0為主要工具設(shè)計了一款電子白板，以供參考。

關(guān)鍵詞：Flash；ActionScript；電子白板

中圖分類號：TP311文獻標識碼：A文章編號：1009-3044(2012) 02-0432-04

Flash based Design and Implementation of Whiteboard

YANG Peng-fei1，WANG Ying2

(1.Zhengzhou Tourism Vocational College, Zhengzhou 450009, China; 2.Zhengzhou Financial Technician Institute, Zhengzhou 450013, China)

Abstract: With the popularity of computer application, many industry generally use of multimedia technique in auxiliary presentation, and electronic white board because of its intuitive and easy to use, the environment of software and hardware requirements is not high, won the favor of related industries. Taking Flash8.0 and AS2.0 as the main tool to design a whiteboard, for reference.

Key words: Flash; ActionScript; whiteboard

1開發(fā)環(huán)境概述

Flash8.0是一款非常優(yōu)秀的2D矢量動畫設(shè)計軟件，利用它可將聲音、動畫及圖片融合在一起，制作出高品質(zhì)的動畫，廣泛應(yīng)用于網(wǎng)絡(luò)、影視、音樂、游戲，教學和手機等諸多領(lǐng)域。此外，8.0版本還內(nèi)置了腳本語言ActionScript2.0，可以用來制作交互式元素，交互性是flash動畫的最大優(yōu)勢，可以通過點擊按鈕、選擇菜單來控制動畫的播放。這剛好可以滿足電子白板的設(shè)計需求。

2功能設(shè)計

對于一般性需求，電子白板的核心功能應(yīng)能滿足對各類幾何圖形如矩形、橢圓、星形、三角型以及鼠標軌跡的支持，對各類幾何圖形的外邊框的磅值、顏色等進行設(shè)置的功能也應(yīng)具備。其他功能包括刪除上一步的繪圖結(jié)果，清除屏幕的功能，全屏切換，關(guān)閉程序等。另外，主繪圖區(qū)也必不可少。總體來看，電子白板功能設(shè)計應(yīng)包含：核心功能，輔助功能兩大類，其中核心功能又分為圖形選擇功能和主繪圖區(qū)功能；輔助功能包括磅值及顏色選擇功能，易用性功能等。如圖1所示：

圖1電子白板功能示意圖

3界面設(shè)計

用戶界面（UI，User Interface）設(shè)計是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。好的用戶界面設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。軟件界面要求簡易、清楚、一致。要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能，在視覺效果上便于理解和使用，界面元素風格必須一致或接近，減少風格迥異的設(shè)計元素出現(xiàn)。

按照功能設(shè)計的要求，界面中需要包含圖形選擇、磅值及顏色調(diào)整、刪除、清屏、全屏、退出等指令按鈕，且結(jié)構(gòu)布局要求清晰，視覺偏差不可太大。整體界面風格如圖2所示：

圖2軟件界面示意圖

4具體實現(xiàn)

4.1圖層布局

在設(shè)計實現(xiàn)階段，根據(jù)功能劃分，將各元素分布在不同圖層中，圖形繪制類統(tǒng)一安排在graphics_btn圖層中，磅值類安排在line_thickness_btn圖層中，顏色類安排在color_btn圖層中，易用性功能類安排在function_btn圖層中，此外還應(yīng)加入兩個圖層inter? faceBG和AS，分別用作為背景層和腳本層。如圖3所示。

圖3圖層布局示意圖

4.2腳本實現(xiàn)

在AS圖層的第一幀寫入腳本，因篇幅所限，只列舉部分代碼。

creatPencil(); //默認圖形

_root.line1.onPress = function() {

lineThickness = 1;

};//磅值選擇，共4種，其他從略

_root.color_gray.onPress=function(){

selectedColor="0x999999";

}//顏色選擇，共9種，其他從略

_root.circle.onPress = function() {

creatCircle();

};//畫圓的函數(shù)調(diào)用

_root.star.onPress = function() {

creatStar();

};//畫星形的函數(shù)調(diào)用，其他從略

i = 0;

function creatCircle() {

onMouseDown = function () {

var x0 = _xmouse;

var y0 = _ymouse;

onMouseMove = function () {

r = Math.sqrt((_xmouse-x0)*(_xmouse-x0)+(_ymouse-y0)*(_ymouse-y0));

creat(x0, y0, r);

};

};

onMouseUp = function () {

onMouseMove = undefined;

i++;

};

function creat(x1, y1, r1) {

_root.createEmptyMovieClip("mc"+i, i);

with (_root["mc"+i]) {

lineStyle(lineThickness, selectedColor, 100);

beginFill(fillcolor, 100);

moveTo(x1+r1, y1);

curveTo(r1+x1, Math.tan(Math.PI/8)*r1+y1, Math.sin(Math.PI/4)*r1+x1, Math.sin(Math.PI/4)*r1+y1);

curveTo(Math.tan(Math.PI/8)*r1+x1, r1+y1, x1, r1+y1);

curveTo(-Math.tan(Math.PI/8)*r1+x1, r1+y1, -Math.sin(Math.PI/4)*r1+x1, Math.sin(Math.PI/4)*r1+y1);

curveTo(-r1+x1, Math.tan(Math.PI/8)*r1+y1, -r1+x1, y1);

curveTo(-r1+x1, -Math.tan(Math.PI/8)*r1+y1, -Math.sin(Math.PI/4)*r1+x1, -Math.sin(Math.PI/4)*r1+y1);

curveTo(-Math.tan(Math.PI/8)*r1+x1, -r1+y1, x1, -r1+y1);

curveTo(Math.tan(Math.PI/8)*r1+x1, -r1+y1, Math.sin(Math.PI/4)*r1+x1, -Math.sin(Math.PI/4)*r1+y1);

curveTo(r1+x1, -Math.tan(Math.PI/8)*r1+y1, r1+x1, y1);

}}

}//畫圓

function creatStar() {

onMouseDown = function () {

_root.createEmptyMovieClip("mc"+i, i);

line = this["mc"+i];

drawing = true;

x1 = _xmouse;

y1 = _ymouse;

};onMouseMove = function () {

if (drawing == true) {

line.clear();

line.lineStyle(lineThickness, selectedColor, 100);

xm = _xmouse-x1;

ym = _ymouse-y1;

rm = Math.sqrt(xm*xm+ym*ym);

drawO(line, x1, y1, rm);

}};

onMouseUp = function () {

drawing = false;

i++;

};

function drawO(mc, x, y, r) {

mc.moveTo(x, y-r);

mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38,y-Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38); mc.lineTo(x+Math.cos(Math.PI/2-Math.PI*2/5)*r, y-Math.sin(Math.PI/2-Math.PI*2/5)*r);

mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.60, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.17); mc.lineTo(x+Math.cos(2*Math.PI*2/5-Math.PI/2)*r, y+Math.sin(2*Math.PI*2/5-Math.PI/2)*r);

mc.lineTo(x+Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.0004, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.5); mc.lineTo(x-Math.cos(2*Math.PI*2/5-Math.PI/2)*r, y+Math.sin(2*Math.PI*2/5-Math.PI/2)*r);

mc.lineTo(x-Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.60, y+Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.17); mc.lineTo(x-Math.cos(Math.PI/2-Math.PI*2/5)*r, y-Math.sin(Math.PI/2-Math.PI*2/5)*r);

mc.lineTo(x-Math.cos(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38, y-Math.sin(Math.PI*2/10+Math.PI/2-Math.PI*2/5)*r*0.38);

mc.lineTo(x, y-r);

//mc.lineTo(x+Math.cos(Math.PI*0.1)*r, y-Math.sin(Math.PI*0.1)*r);Math.PI/2-Math.PI*2/5=Math.PI*0.1}}//畫五星

以下為易用性按鈕“刪除”和“清屏”的AS代碼：_root.delete_btn.onRollOver = function() {

delete0();

};//刪除剪輯的函數(shù)調(diào)用

_root.clear_btn.onRollOver = function() {

clearscreen();

};//清屏的函數(shù)調(diào)用

function delete0() {

onMouseDown = function () {

if (i>0) {_root["mc"+(i-1)].removeMovieClip();

}};

onMouseUp = function () {

i--;

if (i<=0) {

i = 0;

}};

}//刪除剪輯函數(shù)

function clearscreen() {

onMouseDown = function () {

for (i; i>0; i--) {

removeMovieClip("mc"+(i-1));

}};

onMouseUp = function () {

if (i<0) { i = 0;

}};

}//清除屏幕函數(shù)

//以下為初始值

fscommand("fullscreen", "true");//默認全屏顯示

fsc=true;//初始時全屏標志位為真

lineThickness = 0;//默認磅值為0

selectedColor = "0x000000";//默認顏色為黑

“全屏”按鈕和“關(guān)閉”按鈕的代碼則需要寫在相關(guān)實例上，而非幀上，其代碼如下：

on (release) {

if (fsc == true) {

fscommand("fullscreen", "false");

fsc = false;

} else {

fscommand("fullscreen", "true");

fsc = true;

}

}//全屏，此處設(shè)標志位fsc，一次判斷目前全屏的狀態(tài)為“真”或“假”

on(release){

fscommand("quit","true");

}//關(guān)閉

5測試總結(jié)

因為沒有安裝Flash Player插件的計算機不便于執(zhí)行.swf文件，所以利用Flash的導(dǎo)出功能，生成一個可執(zhí)行文件.exe，可運行于所有的Window平臺工作環(huán)境。在實際運行中，該程序無需安裝，直接運行，能夠滿足一般性工作需求。

參考文獻：

[1]閆菲.軟件工程[M].北京:中國水利水電出版社,2005.

[2] Robert Penner.Flash MX編程與創(chuàng)意實現(xiàn)[M].北京:清華大學出版社,2003.