|
|
|
|
鬼火的画图板教程 |
| 作者：佚名 来源：闪吧 作者: 鬼火 更新：2007-1-13 20:48:14 错误报告 我要投稿 |
+++鬼火AS,自己也来做画图板++++++++
//复制出一些色块,并且为色块分别设定颜色
//设定色块的位置使他们整齐排列(用余数来实现,每排5个)
for (r=0; r<=0xff; r += 0x33) {
for (g=0; g<=0xff; g += 0x33) {
for (b=0; b<=0xff; b += 0x33) {
duplicateMovieClip("colorbox", "colorbox"+i, i+50);
_root["colorbox"+i]._x = 15+int(i/16)*10;
_root["colorbox"+i]._y = 40+i%16*10;
colors = new Color(_root["colorbox"+i]);
colors.setRGB(r*256*256+g*256+b*256);
i++;
}
}
}
//设定复制铅笔
duplicateMovieClip("pen", "pen1", 400000);
//设定铅笔和小色块不可见
pen._visible = false;
colorbox._visible = false;
Mouse.hide();
startDrag("pen1", true);
//pen._visible=0;
//colorbox._visible=0;
//初始化变量
pencolor = new Color(_root.pen1.pencolor1);
pencolor.setRGB(0);
n=1;
x0=0;
panduan=0;
//as for frame2//
//设定线条的函数是他们事先能够鼠标跟随地画出线条
//鼠标点下的时候记录当时的位置
if (panduan == 1) {
if (x0== 0) {
x0 = _xmouse;
y0 = _ymouse;
//当鼠标起来的时候,再次记录鼠标的位置
} else {
a1 = _xmouse;
a2 = _ymouse;
b1 = _xmouse;
b2 = _ymouse;
n = n+1;
createEmptyMovieClip("xiantiao"+n, n+10000);
with (_root["xiantiao"+n]) {
lineStyle(1, _root.pencolor.getRGB(), 100);
moveTo(x0, y0);
curveTo(a1, a2, b1, b2);
x0 = b1;
y0 = b2;
}
}
}
//as for frame3//
gotoAndPlay(2);
//as for bord button//
on (press, dragOut) {
//设置panduan的值,他将用于frame2的判断
panduan = 1;
}
on (release, dragOut) {
//还原x0的值
panduan = 0;
x0 = 0;
}
//as for color button//
on (release) {
getcolor = new Color(this);
_root.pencolor.setRGB(getcolor.getRGB());
}
//as for"取消" button//
on (release) {
while(n>1) {
_root["xiantiao"+n].clear();
n--;
}
}
//as for "后退" button//
on (release) {
if(n>1) {
_root["xiantiao"+n].clear();
n--;
}
}
//as for blankMC//
onClipEvent(enterFrame){
_root.textx=_root._xmouse-160;
_root.texty=_root._ymouse-30;
}
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
昨天偷懒,把图片和文字分开而且没有为每一步加上图示,被班班大人说了一顿.
5555
今天改过自新,重新整理一番:
我采用仿照一位师兄的源文件来做为例子来讲解这个问题.
在上面我的帖子里面已经详细的讲解了数组对象颜色(color)对象的用法.
也讲过来哦几个线条相关的方法的使用,他们的功能是很强大的,
不像我前面的例子里面那样,画几条小线线而已.
讲一讲思路,大家应该习惯于在做一件flash之前讲要做的步骤考虑好
//建立颜色库,让他们有序的排列
//设置钢笔可以从颜色库里面提取颜色
//设置钢笔落下运行的时候,线条跟着笔尖出现
//设置一个可以取消轨迹的按钮和一个可以逐步取消轨迹的按钮
//设置两个可以显示钢笔现在的位置的文本框
开始正式的工作
大家看看图示--就是很多红圈圈的那张
1:首先我们在五台上面建一个白板,将其转换为按钮对象
见图t1
2:建立两个按钮,在上面分别写上"后退"和"撤销"
见图t2
3:建立两个动态文本框,分别在前面写上x,y;为动态文本框x设置var为text_x,y为text_y
见图t3
--------------------------------------------------------------------------------
4:绘制一只钢笔,钢笔的制作有点儿技巧.为了表示好钢笔的颜色,我们将钢笔作为两层,上面一层放那些修饰性的图案.
下面一层放上一个电影夹子,命名为pencolor,作为待会儿变色的对象
5:将钢笔mc放到五台上面,命名为pen
6:新建一个mc命名为colorboxmc,制作一个10*10的小色块,什么颜色不重要,将小色块的位置设置为(0,0).
7:新建一个button,在之中绘制一个10*10的小色块,只在他的hit帧里是关键帧,其他三帧都是空白的关键帧,设置小色块的位置为(0,0)
8:将7建立botton拖到colorboxmc里面,设置其位置为(0,0)
9:将colorboxmc拖动到五台上面,命名为colorbox
10:在舞台第一帧里面添加如下代码:
for (r=0; r<=0xff; r += 0x33) {
for (g=0; g<=0xff; g += 0x33) {
for (b=0; b<=0xff; b += 0x33) {
duplicateMovieClip("colorbox", "colorbox"+i, i+50);
_root["colorbox"+i]._x = 15+int(i/16)*10;
_root["colorbox"+i]._y = 40+i%16*10;
colors = new Color(_root["colorbox"+i]);
colors.setRGB(r*256*256+g*256+b*256);
i++;
}
}
}
上面的代码的意思是,判断r,g,b的值,以16进制的0x33为单位减淡颜色,复制出来的
新的小色块的位置排列是这两句实现的:
_root["colorbox"+i]._x = 15+int(i/16)*10;
_root["colorbox"+i]._y = 40+i%16*10;
里面的15和40分别是小色块排列的x和y起始值,也就是说,我们的小色块群的左上角的坐标是(15,40)
int(i/16)*10是利用"int取得数字的不大于自身的整数"的性质来判断是否应该变化小色块的横坐标
再详细点就是:当i<16的时候,int(i/16)的值是0,那么没一行就又16个小色块.因为小色块的高是10,
所以乘以10.
第二句里面的i%16*10,是用i除以16的余数来判断是否因该变化小色块纵坐标.这样i=0和i=16时小色块的
--------------------------------------------------------------------------------
11:上面的步骤已经实现了色块的有序排列,那么下面,我们继续来讲钢笔可以从色库里面提取颜色的问题,
其实就是"要再当钢笔再小色块上面点下时,钢笔的颜色制动变化为色块的颜色.
12:我们已经知道钢笔的构成里面有pencolor作为色彩变化的对象
为了在后面画线的时候,钢笔不会被线条取代,我们需要复制一个新的钢笔,命名为pen1,将他放置倒一个很高的层里面,比如999999,呵呵
duplicateMovieClip("pen", "pen1", 400000);
隐藏原来的钢笔
pen._visible=false;
当然
pen._visible=0;
也可以,呵呵
再为钢笔的色彩变化对象pencolor1设置颜色对象pencolor,初始颜色为黑色
pencolor = new Color(_root.pen1.pencolor1);
pencolor.setRGB(0);
13:打开colorboxmx,再上面的按钮上添加下面的as:
on (release) {
getcolor = new Color(this);
_root.pencolor.setRGB(getcolor.getRGB());
}
大体的意思是:
再按下的时候,建立一个颜色装载器getcolor取得当前对象(this)的颜色,
然后设置五台上面的颜色对象pencolor的颜色为getcolor里面所存储的RGB
在第一帧上面再添加几个变量,用于后面的判断
n=1;
x0=0;
panduan=0;
//这几个变量你设初始值为多少那是你的哦事情,呵呵,不要问我为什么一定是1,0,0了.
只要在后面的变化里面设置相应的直就是了.
--------------------------------------------------------------------------------
14:下面解决第三个问题:
再第二帧建一个空白关键帧.
要钢笔在落下的时候实现线条跟着笔尖出现.
我们要利用鼠标点击事件来完成这件工作.
而我们的按钮就是那块白板.
鼠标按下的时候,鼠标有一个位置,鼠标按下再释放的时候
鼠标又有一个位置,那么可以根据这两个位置来确定线条.
但是仅仅有两个点的话,画出来的就是直线了,
所以我们还需要有另外的一帧来和第二帧构成循环,这样我们的
鼠标运动的时候才能够动态的获得鼠标的位置.
设置两个变量,当鼠标press时候和release的时候,我们的鼠标的坐标能够被储存.
在白板按钮上面添加下面的as
on (press, dragOut) {
//设置panduan的值,他将用于frame2的判断
panduan = 1;
}
on (release, dragOut) {
//还原x0的值
panduan = 0;
x0 = 0;
}
15:我们能要在鼠标点下的时候和鼠标起来的时候获得鼠标的位置,用于绘制线条.
//设定线条的函数是他们事先能够鼠标跟随地画出线条
//鼠标点下的时候记录当时的位置
if (panduan == 1) {
//panduan=1的时候也就是鼠标刚按下的时候,赋予x0新的值
if (x0== 0) {
x0 = _xmouse;
y0 = _ymouse;
//因为x0的值变成了鼠标的位置,所以x0不再为0
//当鼠标起来的时候,再次记录鼠标的位置
} else {
a1 = _xmouse;
a2 = _ymouse;
b1 = _xmouse;
b2 = _ymouse;
n = n+1;
//这时候建立许多的空白电影夹子来储存线条
createEmptyMovieClip("xiantiao"+n, n+10000);
//对每个电影夹子里面设定线条对象
with (_root["xiantiao"+n]) {
lineStyle(1, _root.pencolor.getRGB(), 100);
moveTo(x0, y0);
curveTo(a1, a2, b1, b2);
//赋予x0的值为当前的鼠标位置
x0 = b1;
y0 = b2;
}
}
}
//在第三帧里面添加gotoandplay(2);
其他的就是修饰性的工作了.
建立一个空白的mc,为他添加as:
onClipEvent(enterFrame){
_root.textx=_root._xmouse-160;
_root.texty=_root._ymouse-30;
}
里面之所以要减去160和30,是因为我们的图画板的位置在(160,30)
所以为了显示画笔在白板上面的相对位置,我们减去初始值.
//终于完成了,常常的吐了一口气: )
源文件下载：
http://file.flash8.net/2003up/2003/6/7/200367002246158.rar
|
|
| 文章录入：skyuu 责任编辑：skyuu |
|
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
| 网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） |
|
|
|
|
用户登录
