楊鵬飛，王瑩

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

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

中圖分類號：TP311文獻(xiàn)標(biāo)識碼：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è)計(jì)軟件，利用它可將聲音、動畫及圖片融合在一起，制作出高品質(zhì)的動畫，廣泛應(yīng)用于網(wǎng)絡(luò)、影視、音樂、游戲，教學(xué)和手機(jī)等諸多領(lǐng)域。此外，8.0版本還內(nèi)置了腳本語言ActionScript2.0，可以用來制作交互式元素，交互性是flash動畫的最大優(yōu)勢，可以通過點(diǎn)擊按鈕、選擇菜單來控制動畫的播放。這剛好可以滿足電子白板的設(shè)計(jì)需求。

2功能設(shè)計(jì)

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

圖1電子白板功能示意圖

3界面設(shè)計(jì)

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

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

圖2軟件界面示意圖

4具體實(shí)現(xiàn)

4.1圖層布局

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

圖3圖層布局示意圖

4.2腳本實(shí)現(xiàn)

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

creatPencil(); //默認(rèn)圖形

_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");//默認(rèn)全屏顯示

fsc=true;//初始時(shí)全屏標(biāo)志位為真

lineThickness = 0;//默認(rèn)磅值為0

selectedColor = "0x000000";//默認(rèn)顏色為黑

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

on (release) {

if (fsc == true) {

fscommand("fullscreen", "false");

fsc = false;

} else {

fscommand("fullscreen", "true");

fsc = true;

}

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

on(release){

fscommand("quit","true");

}//關(guān)閉

5測試總結(jié)

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

參考文獻(xiàn)：

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

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