当我们在多媒体教室里对学生进行讲时,有时候我们需要进行一些板书,可能是重点词语或演示计算过程。或者我们PPT课件中插入这么一个工具,它可以使用鼠标进行书写,提醒学生们要注意的重点事项。这就是我们今天的实例——电子稿纸。在电子稿纸中你可以任意书写,并且可以一键清除。闲话少说,说说制作过程吧。
一、材料准备
本实例需要两个组件(组件是Adobe公司为我们准备好的应用程序接口,样式美观,功能强大,为什么不用?):一个是 NumericStepper ,用来设置书写的线条的粗细。另一个是ColorPicker,用来设置线条的颜色。将这两个组件拖入舞台中,设置好大小和位置。分别命名为:cpColor和nuPicker。
二、程序工作过程
当我们在绘制面板上按下鼠标(MouseEvent.MOUSE_DOWN事件)时,就是设置了线条绘制的起点。当我们按照鼠标拖动(MouseEvent.MOUSE_MOVE事件)的时候,开始绘制。此时如果鼠标移出了(MouseEvent.ROLL_OUT事件)绘画面板,绘制停止,我们不得不放开鼠标(MouseEvent.MOUSE_UP事件)。依据这样的设想,我们需要检查是否在绘制的两个条件:鼠标是否按下?;鼠标是否移出绘制面板?这两个条件同时为真,绘制才能进行。最后我们擦除按钮清空面板。
Code:
/*
Flash课件制作
http://www.flashabc.net
*/
var spBoard:Sprite=new Sprite();
this.addChild(spBoard);
spBoard.x = 90;
spBoard.y = 15;
var shDrawing:Shape=new Shape();
spBoard.addChild(shDrawing);
var doDraw:Boolean = false;
var lineSize:Number = 7;
var currentColor:Number;
nuPicker.value = lineSize;
spBoard.graphics.lineStyle(1,0x000000);
spBoard.graphics.beginFill(0xFFFFFF);
spBoard.graphics.drawRect(0,0,230,230);
spBoard.graphics.endFill();
spBoard.filters = [ new DropShadowFilter() ];
spBoard.addEventListener(MouseEvent.ROLL_OUT,boardOut);
spBoard.addEventListener(MouseEvent.MOUSE_MOVE,boardMove);
spBoard.addEventListener(MouseEvent.MOUSE_DOWN,boardDown);
spBoard.addEventListener(MouseEvent.MOUSE_UP,boardUp);
function boardOut(e:MouseEvent):void
{
doDraw = false;
}
function boardDown(e:MouseEvent):void
{
doDraw = true;
currentColor = cpColor.selectedColor;
shDrawing.graphics.lineStyle(lineSize,currentColor);
shDrawing.graphics.moveTo(shDrawing.mouseX,shDrawing.mouseY);
}
function boardUp(e:MouseEvent):void
{
doDraw = false;
}
function boardMove(e:MouseEvent):void
{
var curX:Number = shDrawing.mouseX;
var curY:Number = shDrawing.mouseY;
trace(curX)
trace(mouseX)
//需要满足两个条件才能绘制
if (doDraw && checkMouse(curX,curY))
{
shDrawing.graphics.lineTo(curX,curY);
e.updateAfterEvent();
}
}
//是否移出面板
function checkMouse(a:Number,b:Number):Boolean
{
if (a >= 230 - lineSize / 2 || a <= lineSize / 2 || b >= 230 - lineSize / 2 || b <= lineSize / 2)
{
return false;
}
else
{
return true;
}
}
btnErase.addEventListener(MouseEvent.CLICK, eraseClicked);
function eraseClicked(e:MouseEvent):void
{
shDrawing.graphics.clear();
}
nuPicker.addEventListener(Event.CHANGE, onchange);
function onchange(e:Event):void
{
lineSize = nuPicker.value;
}