当前页面位置: » 丰搜网 » 文档中心 » 详细内容
flash游戏制作--涂鸦板
windows操作系统自带的工具--画图程序,想必大家都很熟悉了，虽然与专业绘图软件相比，其功能很有限，但是画图程序经常在用户手中没有任何处理工具的关键时刻起到巨大的作用，所以虽然其简陋且简单，但是仍然有许多忠实的用户一直在使用画图程序，我也是这些用户中的一名，怀着对画图程序的强烈热爱之情，使用flash模拟制作了一个功能和画图程序类似的小游戏，虽然功能比不上画图的强大，但是从中也可以看出画图程序的雏形，也希望通过此例，能系统的讲解flash中对色彩对象的应用。(本例的.swf文件和.fla文件点击这里下载)
此游戏的主界面如图1所示：
图1
操作方法：
游戏界面主要分为两部分，左部为绘画控制部分，右边为绘画区。左边的控制区包含有调色板，画笔大小调节杆和三个绘画控制按钮，在绘画前，可以先从调色板中选取一种合适的绘画颜色，然后调节画笔大小调节杆调整画笔大小到合适位置，然后就可以通过鼠标控制画笔在右方的绘画区进行绘画了。如果在绘画中对某一笔不满意的话，可以点击控制按钮”回上一笔”，撤消上一步的操作，当绘制完成一幅作品后，可以点击控制按钮”打印作品”，将作品从打印机中打印出来，然后点击控制按钮”清除面板”将绘画区清除，然后就可以进行下一幅作品的绘制了。
制作步骤：
1．既然是画图游戏，当然少不了一只画笔了，不过这里的画笔是比较特殊的，就是当选取某种颜色后，笔杆也会相应的呈现出这种颜色，可以使绘画者对当前绘画颜色一目了然。所以画笔由两部分组成，笔杆和画笔显示颜色的部分。我们先制作画笔显示颜色的部分，新建一个mc，并命名为pencolor,,然后在编辑区绘制如图2所示的图形，
图2
其形状很象一个画笔，将作为画笔颜色的显示部分。接下来制作画笔的笔杆，新建一个mc,并命名为pen,笔杆由画笔的主体和显示颜色的部分组成，为了便于编辑，这里需要两个图层分别放置主体和显示颜色的部分,所以在编辑区中首先绘制如图3所示的画笔轮廓；
图3
在新建一个图层，将组件pencolor放到此层，并和图3画笔轮廓对齐，并在属性面板中设置对象pencolor的instance name为pencolor,对齐后画笔整体效果如图4所示：
图4
这里需要注意的是：需要将画笔颜色组件所在层放置到画笔轮廓所在层的下方，不然画笔轮廓将被完全遮住。这样，一个简单的画笔就制作好了：）
2．在绘画前可以使用鼠标调整画笔大小，所以这步来制作画笔大小调节杆，并制作成button组件。新建一个button组件，命名为tangbutton,进入编辑区后，在up桢绘制如图5所示的滑头：
图5
然后分别在over和down桢插入两个关键桢，并在down桢将滑头的填充色改变，这样在拖动调整滑杆的时候可以看到滑杆颜色的变化，可以明确目前的操作，down桢如图6所示：
图6
新建一个mc,命名为sizep,将组件tangbutton拖到编辑区中，然后在建一个mc,命名为switch,在编辑区中新建三个图层，有上到下分别放置组件sizep,三角形的粗细模拟图形和提示文本，如图7所示：
图7
同时在属性面板中设置对象sizep的instance name为sizepointer.
3.接下来制作三个功能按钮，三个按钮主体一样，只不过有不同的提示文本罢了，新建一个button按钮，简单的绘制一个圆角矩形即可，如图8所示：
图8
4．既然是绘画程序，画布当然是少不了的，因为游戏中绘画是由鼠标进行的，所以需要将画布制作成button,新建一个button组件，命名为canvas,在编辑区中绘制一个大小适中的正方形即可。
5．游戏中的调色板是动态生成的，由action进行控制，我们只需要制作一个调色板中的一个色块作，然后使用action对其进行复制等操作即可自动生成调色板结构。首先建一个button组件，命名为boxbutton,在编辑区中up桢绘制一个矩形，填充色可以随意设置，如图9所示：
图9
同时在over和down桢个插入一个关键桢。再新建一个mc,命名为dyebox,将组件从boxbutton从库中拖到编辑区即可。
6．所有组件准备好后，接下来就布置主场景了。回到主场景中，将默认的图层layer1重命名为背景，然后绘制一个和舞台一样大小的矩形，并填充上蓝色。在背景层上面新建一个图层命名为画笔，将组件pen和dyebox分别拖到场景中，然后在舞台左上角输入游戏标题，如图10所示：
图10
同时在属性面板中设置组件pen的instance name为pen,设置组件dyebox的instance name为dye.再新建一层命名为按钮，将组件switch放到舞台的左下角，然后分三次将组件pbutton放到滑块的下面，并分别输入按钮的标题，如图11所示：
图11
新建一个图层命名为画布，将组件canvas放置到舞台的左方，如图12所示：
图12
然后将所有图层都延续到第3桢，因为此绘图程序具有打印的功能，而在flash中如果要实现打印功能，需要给要打印的那一祯设置一个特殊的桢标签:#p,所以这里我们在随便一层的第三祯设置祯标签为#p即可。到此，主场景就布置完毕了
7．最后的任务就是编写action动作脚本了，这也是本游戏的主要部分，游戏的大部分功能需要借助于action实现。在主场景中新增一个图层，命名为action,早第1桢添加如下as:
i = 1;
//定义并初始化变量i
for (r=0; r<=0xff; r += 0x33) {
//第一层循环，循环变量为r
for (g=0; g<=0xff; g += 0x33) {
//第二层循环，循环变量为g
for (b=0; b<=0xff; b += 0x33) {
//第三层循环，循环变量为b,此循环用来绘制调色板
dye.duplicatemovieclip("d"+i, i);
//复制影片剪辑dye,也就是调色板的最小单位
cc = new color(eval("d"+i));
//定义新的color对象，color 对象能够设置影片剪辑的 rgb 颜色值和颜色转换，并可以在设置后获取这些值，必须使用构造函数 new color() 创建 color 对象的实例后，才可调用其方法。
eval("d"+i)._x = 25+int((i-1)/18)*11;
eval("d"+i)._y = 60+((i-1)%18)*8;
//设置复制出的色块的坐标，使其排列为一个矩阵
cc.setrgb(r*256*256+g*256+b);
i++;
//最后设置色块的颜色，这里使用了setrgb函数，其参数为要设置的十六进制或 rgb 颜色，//对于 rr、gg 和 bb，每种代码由两个十六进制数字组成，这些数字指定每种颜色成分的//偏移量。0x 告知动作脚本编译器该数字是十六进制数值。
}
}
}
mouse.hide();
//因为在绘图板中只出现画笔，所以这里将系统的鼠标隐藏
pen.duplicatemovieclip("penp", 100000);
//因为初始时画笔是在舞台之外的，所以这里需要复制一个画笔，然后应用到游戏中
penp.startdrag(true);
//使画笔成为可拖动的对象
dye._visible = false;
pen._visible = false;
//设置原始的调色板色块和画笔均不可见
dyecolor = new color(_root.penp.pencolor);
dyecolor.setrgb(0);
//定义画笔上显示画笔颜色的部分为color对象，然后设置其初始颜色为黑色
n = 217;
p = 0;
x0 = 0;
pensize = 10;
//定义并初始化一系列变量，其中pensize为画笔尺寸
在第2桢添加如下as:
if (p == 1) {
if (x0 == 0) {
x0 = _xmouse;
y0 = _ymouse;
}
//取得画笔的坐标
else {
x1 = _xmouse;
y1 = _ymouse;
if ((x1-x0)*(x1-x0)>4 (y1-y0)*(y1-y0)>4) {
n = n+1;
dx = x1-x0;
dy = y1-y0;
dd = math.sqrt(dx*dx+dy*dy);
ang = math.atan2(dy, dx);
//利用画笔前后两次的坐标值，使用数学函数求得两此画笔位置之间的直线距离
_root.attachmovie("rect", "l"+n, n);
with (eval("l"+n+"/hc1")) {
_height = pensize;
_width = pensize;
}
with (eval("l"+n+"/hc2")) {
_height = pensize;
_width = pensize;
_x = dd;
}
with (eval("l"+n+"/lb")) {
_height = pensize;
_width = dd;
}
with (eval("l"+n)) {
_x = x0;
_y = y0;
_rotation = ang*180/math.pi;
}
//根据复制出的l的不同对象，设置画笔的笔划尺寸为对象l的宽和高
cc = new color(eval("l"+n));
cc.setrgb(_root.dyecolor.getrgb());
x0 = x1;
y0 = y1;
}
}//为笔划设置颜色，即画笔画出的线条的颜色
}
//
在第3桢添加如下as:
gotoandplay(2);
//返回到第2桢
8.为了实现三个按钮的功能，还需要分别给按钮添加as.
清除面板按钮的as为：
on (release) {
i = 218;
while (i<=n) {
removemovieclip ("/l"+i);
i++;
}
n = 217;
}
//清除所有复制出的mc对象
回上一笔按钮的as为：
on (release) {
if (n>217) {
removemovieclip ("/l"+n);
n--;
}
}
//使用removemovieclip清除复制的mc对象
打印作品按钮的as为:
on (release) {
print("", "bframe");
}
//使用print函数打印祯内容，其用法为print (level, "bounding box")，其中参数level 为要打印的级别，在“动作”面板的标准模式下，如果选择一个级别，则 print 动作将切换到 printnum 或 printasbitmapnum；在专家模式下，必须指定 printnum 或 printasbitmapnum。默认情况下，打印该级别中的所有帧。如果要打印该级别中的特定帧，可将 #p 帧标签分配给这些帧，所以我们在前面设置第三祯的标签为#p,目的就是可以打印此祯。
参数bounding box 设置影片打印区域的修饰符，此参数是可选的，可以选择下列值之一：
1．bmovie 将影片中某特定帧的边框指定为该影片中所有可打印帧的打印区域。需要为要将其边框用作打印区域的帧分配一个 #b 帧标签。
2．bmax 将所有可打印帧的所有边框的合并区域指定为打印区域。当影片中可打印帧的大小各不相同时，可指定 bmax 参数。
3．bframe 指定将每个可打印帧的边框用作该帧的打印区域。这将为每个帧更改打印区域，并缩放对象以符合打印区域。如果在每个帧中有不同大小的对象，而您希望每个对象都充满打印页面，则可使用 bframe。
到此，游戏就制作完成了，接下来您就可以在这个涂鸦板上一展身手了。试试看，是不是有点画图程序的感觉，虽然功能稍微弱了点，不过您完全可以在此基础上继续添加其它功能，使其成为真正的画图程序。
