多语言展示
当前在线:1863今日阅读:84今日分享:32

FLASH中使用组件实现简单画板(AS3)

FLASH中有功能比较强大的绘画函数,借助它可以绘制线、圆形等基本的形状,在这里,我们通过组件ColorPicker和绘画函数结合,实现简单的画板效果。
工具/原料

FLASH CS5/CS6/CC或者Animate CC

方法/步骤
1

打开制作软件,新建AS3文档。

2

打开组件面板,快捷键(Ctrl+F7)。

3

找到ColorPicker组件,并拖动到舞台上

4

选择舞台上的ColorPicker组件,并给它设置实例名为color_picker

5

自行制作一个按钮,用于清除绘制出的内容,实例名设置为btn_clear。如下图

6

再制作一个影片剪辑,里面放一个矩形形状,大小和舞台一样大,放到舞台上以后实例名设置为mc,注意要左上角对齐舞台,注册点在左上角。

7

最后在主时间轴加如下代码:var shape:Shape=new Shape();//定义形状,主要在这个对象里进行绘制mc.addChild(shape);//将形状对象放到影片剪辑中mc.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownEvent);//给影片剪辑添加鼠标按下事件mc.addEventListener(MouseEvent.MOUSE_UP,MouseUpEvent);//给影片剪辑添加鼠标弹起事件function MouseDownEvent(e:MouseEvent):void{ shape.graphics.moveTo(mc.mouseX,mc.mouseY);//将绘制的初始位置设置为鼠标位置 shape.graphics.lineStyle(2, color_picker.selectedColor, 1, false, LineScaleMode.VERTICAL,                               CapsStyle.NONE, JointStyle.MITER, 10); //设置绘制出的线的样式,参数说明在参考资料里 mc.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveEvent);//添加鼠标移动事件,也就是绘制方法}function MouseUpEvent(e:MouseEvent):void{ mc.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMoveEvent);//移除鼠标移动事件}function MouseMoveEvent(e:MouseEvent):void{ shape.graphics.lineTo(mc.mouseX,mc.mouseY);//绘制线条}btn_clear.addEventListener(MouseEvent.CLICK,ClearShape);function ClearShape(e:MouseEvent):void{ shape.graphics.clear();//清除绘制出的内容}

8

导出测试效果如图所示

注意事项
1

理解该教程需要一定的FLASH操作基础。

2

有什么不明白的或者其它FLASH代码方面的问题可以私信。

推荐信息