FLASH中有功能比较强大的绘画函数,借助它可艮劁飨戽以绘制线、圆形等基本的形状,在这里,我们通过组件ColorPicker和绘画函数结合,实现简单的画板效果。
工具/原料
FLASHCS5/CS6/CC或者AnimateCC
方法/步骤
1、打开制作软件,新建AS3文档。
2、打开组件面板,快捷键(Ctrl+F7)。
3、找到ColorPicker组件,并拖动到舞台上
4、选择舞台上的ColorPicker组件,并给它设置实例名为color_picker
5、自行制作一个按钮,用于清除绘制出的内容,实例名设置为btn_clear。如下图
6、再制作一个影片剪辑,里面放一个矩形形状,大小和舞台一样大,放到舞台上以后实例名设置为mc,注海潍吨燹意要左上角对齐舞台,注册点在左上角。
7、最后在主时间轴加如下代码:var衡痕贤伎shape:Shape=newShape();//定义形状,主要在这个对象里进行绘制mc.addCh足毂忍珩ild(shape);//将形状对象放到影片剪辑中mc.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownEvent);//给影片剪辑添加鼠标按下事件mc.addEventListener(MouseEvent.MOUSE_UP,MouseUpEvent);//给影片剪辑添加鼠标弹起事件functionMouseDownEvent(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);//添加鼠标移动事件,也就是绘制方法}functionMouseUpEvent(e:MouseEvent):void{ mc.removeEventListener(MouseEvent.MOUSE_MOVE,MouseMoveEvent);//移除鼠标移动事件}functionMouseMoveEvent(e:MouseEvent):void{ shape.graphics.lineTo(mc.mouseX,mc.mouseY);//绘制线条}btn_clear.addEventListener(MouseEvent.CLICK,ClearShape);functionClearShape(e:MouseEvent):void{ shape.graphics.clear();//清除绘制出的内容}
8、导出测试效果如图所示