Flash高级教程：制作简单的涂鸦板
1. 定制滑动条
2.标准的Web安全色调色板（可直接输入数值选色），并可赋予不同的反馈动作
3.拷贝数组，要知道，是不能用“=”来拷贝数组的，这里面的拷贝数组函数具有通用性，大家可以看看
4.基本画图
5.回放
6.SharedObject的使用
| //标准简易涂鸦板，作者: chenlangeer@eastday.com //通用函数，设置RGB值 function mySetRGB(r:Number, g:Number, b:Number):Number { return r << 16 | g << 8 | b; } //通用函数，规整颜色数值 function colorToStr(_color:Number):String { var _str:String = _color.toString(16).toUpperCase(); while (_str.length<6) { _str = "0"+_str; } return _str; } //调色板函数 function setTempColor(_color:Number, _mc:MovieClip) { (new Color(_mc.show_color_mc)).setRGB(_color); _mc.color_str.text = colorToStr(_color); } //调色板函数 function setNowColor(_color:Number, _mc:MovieClip) { (new Color(_mc.show_color_mc)).setRGB(_color); _mc.value = _color; } ////设置调色板的鼠标响应 function setColorMouseFun(color_mc:MovieClip) { color_mc.useHandCursor = false; color_mc.onRollOver = function() { this.swapDepths(this._parent.getNextHighestDepth()); (new Color(this.border_mc)).setRGB(0xFFFFFF); setTempColor(this.color_num, this._parent); }; color_mc.onRollOut = color_mc.onReleaseOutside=function () { (new Color(this.border_mc)).setRGB(0); }; color_mc.onRelease = function() { setNowColor(this.color_num, this._parent.parent); this._parent.fun(); this._parent.removeMovieClip(); }; } //生成调色板(_mc:宿主，now_color:初始颜色，d_width:色块宽度，fun:结束时调用的函数) function crtColorBoard(_mc:MovieClip, now_color:Number, d_width:Number, fun:Function) { _mc.fun = fun; var color_array:Array = new Array(0, 0x333333, 0x666666, 0x999999, 0xCCCCCC, 0xFFFFFF, 0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0x00FFFF, 0xFF00FF); for (i=0; i<12; i++) { var color_mc:MovieClip = _mc.attachMovie("color_dot", "dot"+_mc.getNextHighestDepth(), _mc.getNextHighestDepth()); color_mc._width = color_mc._height=d_width; color_mc._x = 0; color_mc._y = i*d_width; color_mc.color_num = color_array[i]; (new Color(color_mc.dot)).setRGB(color_mc.color_num); setColorMouseFun(color_mc); } for (var R = 0; R<6; R++) { for (var G = 0; G<6; G++) { for (var B = 0; B<6; B++) { var color_mc:MovieClip = _mc.attachMovie("color_dot", "dot"+_mc.getNextHighestDepth(), _mc.getNextHighestDepth()); color_mc._width = color_mc._height=d_width; color_mc._x = B*d_width+R%3*6*d_width+d_width; color_mc._y = G*d_width+Math.floor(R/3)*6*d_width; color_mc.color_num = mySetRGB(0x33*R, 0x33*B, 0x33*G); (new Color(color_mc.dot)).setRGB(color_mc.color_num); setColorMouseFun(color_mc); } } } setTempColor(now_color, _mc); //设置颜色手动输入，回车结束 _mc.color_str.onSetFocus = function() { this.text = ""; this.onChanged = function() { (new Color(_mc.show_color_mc)).setRGB(parseInt(this.text, 16)); }; _mc.onEnterFrame = function() { if (Key.isDown(13)) { setNowColor(parseInt(this.color_str.text, 16), this.parent); this.fun(); this.removeMovieClip(); } }; }; _mc.color_str.onKillFocus = function() { delete this.onChanged; delete _mc.onEnterFrame; }; } //初始化滑杆（_mc:宿主,value:初始值, min_num:最小值, max_num: 最大值,len:滑杆长度,is_int:是否取整数） function initBar(_mc:MovieClip, value:Number, min_num:Number, max_num:Number, len:Number, is_int:Boolean) { _mc.line._width = len; _mc.value = value; _mc. min_num = min_num; _mc. max_num = max_num; _mc.depth = ( max_num- min_num)/len; _mc.is_int = is_int; _mc.dot._x = (value- min_num)/_mc.depth; _mc.dot._y = 0; _mc.dot.useHandCursor = false; _mc.dot.onPress = function() { this.startDrag(false, 0, 0, len, 0); this.onMouseMove = function() { this._parent.value = this._parent. min_num+this._x*this._parent.depth; if (this._parent.is_int) { this._parent.value = Math.round(this._parent.value); } updateAfterEvent(); }; }; _mc.dot.onRelease = _mc.dot.onReleaseOutside=function () { this.stopDrag(); delete this.onMouseMove; }; } //开始画线 function crtNewLine(width:Number, color_num:Number, alpha:Number):MovieClip { var line:MovieClip = canvas.createEmptyMovieClip("line"+canvas.getNextHighestDepth(), canvas.getNextHighestDepth()); line.lineStyle(width, color_num, alpha); line.moveTo(line._xmouse, line._ymouse); return line; } //设置背景色 function setBG() { (new Color(canvas.bg)).setRGB(bg_color_mc.value); } //清除_mc中所有_name以_str开始的MC function clearAll(_mc:MovieClip, _str:String) { var str_len:Number = _str.length; for (i in _mc) { if (_mc[i]._name.substr(0, str_len) == _str) { _mc[i].removeMovieClip(); } } } //回放 function replay(_mc:MovieClip, _array:Array, speed:Number) { if (_array.length) { var line = _array.shift(); var current_mc:MovieClip = _mc.createEmptyMovieClip("line"+_mc.getNextHighestDepth(), _mc.getNextHighestDepth()); var style:Object = line.shift(); var pos:Object = line.shift(); current_mc.lineStyle(style.width, style.color, style.alpha); current_mc.moveTo(pos.x, pos.y); onEnterFrame = function () { drawALine(current_mc, line, speed); }; } } function drawALine(_mc:MovieClip, _array:Array, speed:Number) { for (var i = 0; i<speed; i++) { if (_array.length == 0) { delete onEnterFrame; replay(canvas, replay_array, speed); break; } var pos:Object = _array.shift(); _mc.lineTo(pos.x, pos.y); } } //拷贝记录数组 function copyArray(_array):Array { var out_array = new Array(); for (var i = 0; i<_array.length; i++) { out_array[i] = new Array(); for (var j = 0; j<_array[i].length; j++) { out_array[i][j] = new Object(); for (name in _array[i][j]) { out_array[i][j][name] = _array[i][j][name]; } } } return out_array; } //main var width_num:Number = 2; var alpha_num:Number = 80; var color_num:Number = 0x000000; var bg_color_num:Number = 0xFFFFFF; var replay_speed:Number = 5; setNowColor(color_num, line_color_mc); setNowColor(bg_color_num, bg_color_mc); initBar(width_bar, width_num, 0, 50, 100, true); initBar(alpha_bar, alpha_num, 0, 100, 100, true); initBar(speed_bar, replay_speed, 1, 30, 100, true); line_color_mc.onRelease = function() { attachMovie("color_board", "color_board", 10); color_board._x = this._x; color_board._y = this._y+50; color_board.parent = this; crtColorBoard(color_board, this.value, 10); }; bg_color_mc.onRelease = function() { attachMovie("color_board", "color_board", 10); color_board._x = this._x; color_board._y = this._y+50; color_board.parent = this; crtColorBoard(color_board, this.value, 10, setBG); }; setBG(); //回放数组 var history_array:Array = new Array(); //SO var his_so:SharedObject = SharedObject.getLocal("cg001_canvas", "/"); if (!his_so.data._array) { his_so.data._array = history_array; } else { history_array = his_so.data._array; replay_array = copyArray(history_array); replay(canvas, replay_array, speed_bar.value); } //canvas交互 canvas.setMask(canvas_mask); canvas.useHandCursor = false; canvas.onPress = function() { var current_mc:MovieClip = canvas.createEmptyMovieClip( "line"+canvas.getNextHighestDepth(), canvas.getNextHighestDepth()); current_mc.lineStyle(width_bar.value, line_color_mc.value, alpha_bar.value); current_mc.moveTo(this._xmouse, this._ymouse); // history_array.push(new Array({width:Number=width_bar.value, color:Number=line_color_mc.value, alpha:Number=alpha_bar.value}, {x:Number=this._xmouse, y:Number=this._ymouse})); current_array = history_array.length-1; // this.onMouseMove = function() { current_mc.lineTo(this._xmouse, this._ymouse); history_array[current_array].push({x:Number=this._xmouse, y:Number=this._ymouse}); updateAfterEvent(); }; }; canvas.onRelease = canvas.onReleaseOutside=function () { his_so.flush(); delete this.onMouseMove; }; //clear btn clear_btn.onRelease = function() { clearAll(canvas, "line"); history_array = new Array(); replay_array = new Array(); his_so.data._array = history_array; }; replay_btn.onRelease = function() { clearAll(canvas, "line"); replay_array = copyArray(history_array); replay(canvas, replay_array, speed_bar.value); }; |
