日志 教程
当前位置: 教程  >  游戏开发  >  FLASH游戏开发  >  正文

Flash游戏制作--涂鸦板教程

作者:宋姗姗 发表于 2011/6/13 18:24:25     评论(4)     阅读(3673)     
Windows操作系统自带的工具--画图程序,想必大家都很熟悉了,虽然与专业绘图软件相比,其功能很有限,但是画图程序经常在用户手中没有任何处理工具的关键时刻起到巨大的作用,所以虽然其简陋且简单,但是仍然有许多忠实的用户一直在使用画图程序,我也是这些用户中的一名,怀着对画图程序的强烈热爱之情,使用Flash模拟制作了一个功能和画图程序类似的小游戏,虽然功能比不上画图的强大,但是从中也可以看出画图程序的雏形,也希望通过此例,能系统的讲解Flash中对色彩对象的应用。

此游戏的主界面如图1所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181227.jpg">

图1

操作方法:

游戏界面主要分为两部分,左部为绘画控制部分,右边为绘画区。左边的控制区包含有调色板,画笔大小调节杆和三个绘画控制按钮,在绘画前,可以先从调色板中选取一种合适的绘画颜色,然后调节画笔大小调节杆调整画笔大小到合适位置,然后就可以通过鼠标控制画笔在右方的绘画区进行绘画了。如果在绘画中对某一笔不满意的话,可以点击控制按钮”回上一笔”,撤消上一步的操作,当绘制完成一幅作品后,可以点击控制按钮”打印作品”,将作品从打印机中打印出来,然后点击控制按钮”清除面板”将绘画区清除,然后就可以进行下一幅作品的绘制了。

制作步骤:

1.既然是画图游戏,当然少不了一只画笔了,不过这里的画笔是比较特殊的,就是当选取某种颜色后,笔杆也会相应的呈现出这种颜色,可以使绘画者对当前绘画颜色一目了然。所以画笔由两部分组成,笔杆和画笔显示颜色的部分。我们先制作画笔显示颜色的部分,新建一个MC,并命名为pencolor,,然后在编辑区绘制如图2所示的图形,

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181224.jpg" real_src="http://school.gaoshou.net/upload/1078181224.jpg">
图2
其形状很象一个画笔,将作为画笔颜色的显示部分。接下来制作画笔的笔杆,新建一个mc,并命名为pen,笔杆由画笔的主体和显示颜色的部分组成,为了便于编辑,这里需要两个图层分别放置主体和显示颜色的部分,所以在编辑区中首先绘制如图3所示的画笔轮廓;

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181220.jpg" real_src="http://school.gaoshou.net/upload/1078181220.jpg">
图3

在新建一个图层,将组件pencolor放到此层,并和图3画笔轮廓对齐,并在属性面板中设置对象pencolor的Instance name为pencolor,对齐后画笔整体效果如图4所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181217.jpg" real_src="http://school.gaoshou.net/upload/1078181217.jpg">
图4

这里需要注意的是:需要将画笔颜色组件所在层放置到画笔轮廓所在层的下方,不然画笔轮廓将被完全遮住。这样,一个简单的画笔就制作好了:)

2.在绘画前可以使用鼠标调整画笔大小,所以这步来制作画笔大小调节杆,并制作成Button组件。新建一个Button组件,命名为tangButton,进入编辑区后,在Up桢绘制如图5所示的滑头:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181213.jpg" real_src="http://school.gaoshou.net/upload/1078181213.jpg">
图5

然后分别在Over和Down桢插入两个关键桢,并在Down桢将滑头的填充色改变,这样在拖动调整滑杆的时候可以看到滑杆颜色的变化,可以明确目前的操作,Down桢如图6所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181209.jpg" real_src="http://school.gaoshou.net/upload/1078181209.jpg">
图6

新建一个MC,命名为sizeP,将组件tangButton拖到编辑区中,然后在建一个mC,命名为switch,在编辑区中新建三个图层,有上到下分别放置组件sizeP,三角形的粗细模拟图形和提示文本,如图7所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181206.jpg" real_src="http://school.gaoshou.net/upload/1078181206.jpg">
图7

同时在属性面板中设置对象SizeP的Instance name为sizepointer.

3.接下来制作三个功能按钮,三个按钮主体一样,只不过有不同的提示文本罢了,新建一个Button按钮,简单的绘制一个圆角矩形即可,如图8所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181203.jpg" real_src="http://school.gaoshou.net/upload/1078181203.jpg">
图8

4.既然是绘画程序,画布当然是少不了的,因为游戏中绘画是由鼠标进行的,所以需要将画布制作成Button,新建一个Button组件,命名为Canvas,在编辑区中绘制一个大小适中的正方形即可。
5.游戏中的调色板是动态生成的,由Action进行控制,我们只需要制作一个调色板中的一个色块作,然后使用Action对其进行复制等操作即可自动生成调色板结构。首先建一个Button组件,命名为boxbutton,在编辑区中Up桢绘制一个矩形,填充色可以随意设置,如图9所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181199.jpg" real_src="http://school.gaoshou.net/upload/1078181199.jpg">
图9

同时在Over和Down桢个插入一个关键桢。再新建一个MC,命名为dyebox,将组件从boxbutton从库中拖到编辑区即可。

6.所有组件准备好后,接下来就布置主场景了。回到主场景中,将默认的图层layer1重命名为背景,然后绘制一个和舞台一样大小的矩形,并填充上蓝色。在背景层上面新建一个图层命名为画笔,将组件pen和dyebox分别拖到场景中,然后在舞台左上角输入游戏标题,如图10所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181193.jpg" real_src="http://school.gaoshou.net/upload/1078181193.jpg">
图10

同时在属性面板中设置组件pen的Instance name为pen,设置组件dyebox的Instance name为dye.再新建一层命名为按钮,将组件switch放到舞台的左下角,然后分三次将组件pButton放到滑块的下面,并分别输入按钮的标题,如图11所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181189.jpg" real_src="http://school.gaoshou.net/upload/1078181189.jpg">
图11

新建一个图层命名为画布,将组件Canvas放置到舞台的左方,如图12所示:

游戏制作--涂鸦板教程 style="FONT-FAMILY: " alt=[东华艺宗]Flash游戏制作--涂鸦板教程 src="http://school.gaoshou.net/upload/1078181184.jpg" real_src="http://school.gaoshou.net/upload/1078181184.jpg">
图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_r("d"+i));

//定义新的Color对象,Color 对象能够设置影片剪辑的 RGB 颜色值和颜色转换,并可以在设置后获取这些值,必须使用构造函数 new Color() 创建 Color 对象的实例后,才可调用其方法。

eval_r("d"+i)._x = 25+int((i-1)/18)*11;

eval_r("d"+i)._y = 60+((i-1))*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

评论
显示
悄悄话
    张琛
  • 张琛的评论:
  •   楼主...图挂了
    2012-12-09 15:15
    王紫逸
  • 王紫逸的评论:
  •   为什么看不到图片的呢?
    2012-06-02 09:54
    林先进
    2011-07-14 22:45
    毛鹏飞
    2011-06-13 19:07
汇众教育官网 | 联系方式 | 版权声明 | 友情链接
Copyright 2008© 汇众益智(北京)教育科技有限公司. All Rights Reserved
京ICP备09092043号 京公网安备11010802009023号