【实现效果】
点击左边的画线按钮,可以自由画线,点击右边的清除按钮,则可以清除所有画线,在画线过程中,若再次点击画线按钮,则可以停止画线。在画线过程中,点击中间的按钮,则会弹出一个调色板,在弹出的调色板中,我们只要将鼠标滑动到相应的色块上,会出现选中标志,同时在调色板左上角的框内会出现相应的颜色,右边动态文本框中也会出现相应的颜色代码。当鼠标点击某一色块后,该调色板会自动隐藏,同时上方中间打开调色板的按钮内部出现所选中的颜色,此时拖动鼠标画线,就是不同的线条颜色了。
【制作过程】
- 新建一个名为“调色板”的影片剪辑,在该影片剪辑内部时间线的第一帧放三个按钮或者是影片剪辑,并在第二帧插入帧,如下图中的图层19和图层21。
2.另外在如上图中的中间一个按钮上再放一个影片剪辑,透明度为0,其大小正好与按钮中间黑色部分一样大,并取实例名称为banes1。
- 下面具体来制作调色板,在第二帧插入空白关键帧,先制作底板作为装饰,在此我们不讲解,底板制作好后,在底板的上面放一些按钮,并给这些按钮取上实例名称,如第一个黑色按钮实例名称为an1_btn。然后双击该按钮,进入级别,在“指针经过”插入关键帧,并画一个白线框套住该按钮,表示鼠标滑过时出现的状态。第一个按钮都按这样的方法去完成,同时注意它们的颜色。
4.在该调色板的左上角画一个长方形的影片剪辑,透明度为0,实例名称为banes。
5.然后作一个动态文本框,放在如下图所示的位置,并取变量名为sema。
6.返回场景,将名为“调色板”的影片剪辑拖入场景,并取实例名称为tsb。
7.选中场景中的“调色板” 影片剪辑,打开动作面板,输入代码:
onClipEvent(load){
candraw=-1;
this.lineStyle(3,0xff0000,100);
}
onClipEvent(mouseDown){
draw=true;
this.moveTo(_xmouse,_ymouse);
}
onClipEvent(mouseMove){
if(candraw==1&draw==true){
this.lineTo(_xmouse,_ymouse);
}
updateAfterErent();
}
onClipEvent(mouseUp){
draw=-1;
}
8.双击“调色板” 影片剪辑,进入级别,在时间线的第一帧输入stop(),在第二帧插入空白关键帧,以第一竖排按钮为例输入代码:
var myColor = new Color(bianse);
//第一竖排
an1_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an2_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an3_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an4_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an5_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an6_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an7_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an8_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an9_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an10_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an11_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
an12_btn.onRollOver = function() {
myColor.setRGB(0x000000);
sema = "#000000";
};
//按钮变色并跳到第一帧
myColor1 = new Color(bianse1);
//第一竖排
an1_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an2_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an3_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an4_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an5_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an6_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an7_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an8_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an9_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an10_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an11_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
an12_btn.onRelease = function() {
_root.tsb.gotoAndStop(1);
myColor1.setRGB(0x000000);
sema = "#000000";
};
9.选中画线按钮,打开动作面板,输入代码:
on (release) {
candraw *= -1;
}
10.选中清除按钮,打开动作面板,输入代码:
on (release) {
this.clear();
}