Flash游戏开发二.docx
《Flash游戏开发二.docx》由会员分享，可在线阅读，更多相关《Flash游戏开发二.docx（77页珍藏版）》请在冰豆网上搜索。
Flash游戏开发二
第2章可控游戏类
2.1文字特效生成器
（1）
游戏说明
这是一个文字类的游戏，可以在“输入想要变化的英文字母”文本框中输入要发生变化的文字（只适合用于英文字母），然后选择下面的变化特效方式，直接回车或单击“开始”按钮就可以实现变化效果，在变化的过程中通过选择下面的8种特效可以相应地实现各种特效变化。
如图2-1所示。
图2-1文字特效生成器
设计技巧
（1）“输入想要变化的英文字母”文本框是用来输入文字的，因此要把这个文本框设置成输入文本框，才能实现人机交互性。
（2）在中间显示动态效果的区域中，需要制作一个嵌套了“动态文本”的影片剪辑。
动态文本只需要一个英文字母大小即可，为了实现后面的命令实现，需要定义变量名。
主要用到DuplicateMovieClip命令，该命令实现文字的复制累加。
（3）下面是8个与文本功能相对应的按钮，对于它们，主要的设计技巧在于“点击”区的设置。
制作步骤
1．游戏背景层的制作
（1）启动FlashMX2004，单击“属性”面板中的“大小”按钮，打开“文件属性”对话框，设置影片宽为600px，高为450px，背景颜色为橙黄色，其色值为#FF9900，播放速度帧频为12fps，如图2-2所示。
然后单击“确定”按钮。
图2-2设置影片属性
（2）先保存文件。
执行菜单栏“文件”|“保存”命令，将要制作的游戏文件保存，如图2-3所示。
图2-3保存文件
（3）本实例的制作素材比较多，所以采取逐层制作的方法。
先来绘制背景的一些静态素材，双击“图层1”，改其名称为“背景”，在这里将放置一些衬景及说明。
（4）双击工具箱中的“矩形工具”按钮
，弹出“矩形设置”对话框，设置“边角半径”为2点，单击“确定”按钮完成设置，如图2-4所示。
图2-4设置边角半径
（5）在整个场景中绘制3个圆角化的矩形边框，作为背景的基本外形，可以在“属性”面板中把最外框的线条宽度设置为5px，其余的设置为1px，绘制的样式如图2-5所示。
（6）单击工具箱中的“文本工具”按钮
，在场景中输入说明的文字“使用说明：
这是文字特效合成的文字展示，通过输入英文字母，选择特效的种类，就可以实现文字的特效。
”，按F8键，把输入的文字转换成图形对象，并命名为“文字说明”。
同样地输入“flash文字游戏”和“输入想要变化的英文字母：
”，并分别将其转换成图形组件，命名为“文字说明1”和“文字说明2”，文字说明的大小及字形可以根据设计的需要自行安排，这里设计的样式如图2-6所示。
图2-5绘制背景效果图2-6输入文字说明
制作说明：
为了保证在每台电脑上的播放效果一样，可以把该层的元素均转换成组件。
（7）在第6帧处按F5键，在各帧中插入相同的关键帧，这样就完成了第1个图层上背景元素的制作。
2．play层的制作
（1）在时间轴上单击“插入图层”按钮
新建一个图层，并命名为“play”。
在该图层建立一个输入文本及两个按钮。
单击工具箱中的“文本工具”按钮
，在文字的“属性”面板中设置文本的属性为“输入文本”，变量值设为“ilkyazi”（这是为了后面制作中函数的调用），如图2-7所示。
在场景中的“输入想要变化的英文字母：
”下面的矩形为参照，绘制一个空的文本框。
图2-7设置输入文本框的变量值
（2）执行菜单栏“窗口”|“其他面板”|“公用库”|“按钮”命令调出“库-按钮”面板，选中其中的两个同类的按钮，并把它们从“库”中拖放到场景中；高速按钮的方向后分别双击按钮进入按钮的编辑区，在时间轴上单击“插入图层”按钮
新建一个图层，再单击工具箱中的“文本工具”按钮
，分别输入“开始”和“返回”，如图2-8所示。
（3）在play图层的第2帧处按F6键，插入一个关键帧，并在第1帧处只留一个“开始”按钮和一个空的输入文本，后面几帧只留一个“返回”按钮。
把按钮放置在场景中“文字说明”的下面。
注意，保持两个按钮在同一个地方，第1帧的效果如图2-9所示。
图2-8建立两个控制按钮图2-9加入文本框及按钮的样式
（4）在第1帧处选择“开始”按钮，执行菜单栏“窗口”|“开发面板”|“动作”命令（或者按F9键）调出“动作-按钮”面板，在其中输入“开始”按钮的命令：
on（press,keyPress""）{
if（Number（effectno）<>Number（""））{
gotoAndStop
（2）;
}
}//按下按钮或者按下回车键时，如果选择了特效的样式就跳播到第2帧
（5）在第2帧中选择“返回”按钮，在“动作-按钮”面板中输入如下的命令：
on（release）{
gotoAndStop
（1）;
while（Number（c）>=1）{
removeMovieClip（c）;
c=c-1;
}
}//当单击鼠标后跳播到第1帧，并且移除影片“C”
3．效果按钮层的制作
（1）在时间轴上单击“插入图层”按钮
新建一个图层，命名为“effectbuttons”，在这个图层里制作实现动画的各种控制按钮及动画演示的动态文本框。
下面先制作文字变化的8种特效文本框。
执行菜单栏“插入”|“新建元件”命令，新建立一个影片剪辑，命名为Symbol3，把Symbol3从“库”面板中拖入到场景，并将实体命名为“1seviye”，如图2-10所示。
图2-10新建影片剪辑并设置其属性
2.1文字特效生成器
（2）
（2）进入影片的编辑区，在该编辑区里建立两个图层，上面一层为引导层，下面的“图层1”为8种文字动画实现的合成，在下面的操作中给每种动画变化的帧上加上不同的Lable名称，以方便函数的调用。
在Symbol3中再建立一个影片，在“属性”面板中设置实体名为“2seviye”，如图2-11所示，在该影片中建立一个动态文本框，并设置大小、颜色及字型，输入字母“Ａ”，这里的字形表示后面要演示的动画字体属性。
图2-11设置影片剪辑的实体名为“2seviye”
（3）以建立的2seviye影片为元素，在第1~10帧处建立从上往下掉的动画，并在第1帧及第10帧中加上“Stop（）;”停止函数命令，用鼠标选择中间的任意帧，在“属性”面板中设置标签值为“birinci”，这时在时间轴中会出现一面小红旗及标签的名称，第1种文字动画（从上往下掉）的制作步骤就完成了，如图2-12所示。
图2-12设置第1种文字动画
（4）同步骤（3）分别在11~20帧、21~35帧、36~55帧、56~75帧、76~90帧、91~110帧、111~150帧7个轴间断之间建立不同的以2seviye影片为元素的文字运动动画，并分别设置标签名为“ikinci”，“ucuncu”，“dorduncu”，“besinci”，“altinci”，“yedinci”，“sekizinci”，并分别在各动画之间加上停止命令，绘制好的时间轴如图2-13所示。
由于本步骤制作比较复杂，读者可以到光盘中直接找到该实例组件，打开原文件进行参照。
图2-13完成的时间轴
（5）接下来在该图层上继续制作其他的组件，单击
返回到主场景；单击工具箱中的“文本工具”按钮
，在文字“属性”面板中设置文字的输入方式为“动态文本”，变量值设为“effectno”，用鼠标在场景中单击，出现文本框，在里面输入“特效的种类提示”，其“属性”面板如图2-14所示；再在文字“属性”面板中设置文字的输入方式为“静态文本”，输入说明文字“选择特效=”，并按F8键将其转换成Symbol4图形元件，结果如图2-15所示。
图2-14动态文本的“属性”面板
图2-15输入文字后的效果
（6）执行菜单栏“插入”|“新建元件”命令，建立一个按钮，命名为“效果1”，在按钮的场景中输入“1坠落效果”，并将其竖排，在“点击”帧中绘制一个红色的矩形盖住所有的文字，以方便后面鼠标的单击，如图2-16所示。
图中“图层1”是用来显示鼠标经过或者单击按钮时起的不同效果，“图层2”是输入的“坠落效果”文字。
图2-16建立第1个按钮
（7）把新建立的按钮拖到场景中，在“动作-按钮”面板中加入如下的函数命令：
on（release）{
animasyon="birinci";
effectno="1";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式1的动画播放
（8）同步骤（6）~（7）制作类似的按钮，把这些按钮编排成如图2-17所示的样式，然后分别设置按钮效果2~8相对应的函数命令。
图2-178个按钮的编排效果
按钮2：
on（release）{
animasyon="ikinci";
effectno="2";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式2的动画播放
按钮3：
on（release）{
animasyon="ucuncu";
effectno="3";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式3的动画播放
按钮4：
on（release）{
animasyon="dorduncu";
effectno="4";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式4的动画播放
按钮5：
on（release）{
animasyon="besinci";
effectno="5";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式5的动画播放
按钮6：
on（release）{
animasyon="altinci";
effectno="6";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式6的动画播放
按钮7：
on（release）{
animasyon="yedinci";
effectno="7";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式7的动画播放
按钮8：
on（release）{
animasyon="sekizinci";
effectno="8";
setProperty（"arrow",_visible,"0"）;
}//鼠标按下时，场景中进行样式8的动画播放
2.1文字特效生成器（3）
4．动作层的建立
（1）最后在时间轴上新建一个图层，并命名为“Actions”。
在这个图层中，将输入相关的函数命令，把前面几个图层中所有的组件控制起来以实现整体的效果。
分别在第2、5、6帧按F6键建立关键帧。
（2）在第2帧中输入如下的函数命令：
duplicateMovieClip（"1seviye",c,c）;
setProperty（c,_x,Number（headx）+Number（（c*k）））;
setProperty（c,_y,heady）;
gotoAndPlay（3）;
//此段函数用来设置影片1seviye的累加播放
（3）在第5帧中加入如下的函数命令：
set（cadd"/2seviye:
yazi",substring（ilkyazi,c,1））;
if（animasyoneq"birinci"）{
tellTarget（c）{
gotoAndPlay（"birinci"）;
}
}
if（animasyoneq"ikinci"）{
tellTarget（c）{
gotoAndPlay（"ikinci"）;
}
}
if（animasyoneq"ucuncu"）{
tellTarget（c）{
gotoAndPlay（"ucuncu"）;
}
}
if（animasyoneq"dorduncu"）{
tellTarget（c）{
gotoAndPlay（"dorduncu"）;
}
}
if（animasyoneq"besinci"）{
tellTarget（c）{
gotoAndPlay（"besinci"）;
}
}
if（animasyoneq"altinci"）{
tellTarget（c）{
gotoAndPlay（"altinci"）;
}
}
if（animasyoneq"yedinci"）{
tellTarget（c）{
gotoAndPlay（"yedinci"）;
}
}
if（animasyoneq"sekizinci"）{
tellTarget（c）{
gotoAndPlay（"sekizinci"）;
}
}
if（Number（Number（headx）+Number（（c*k）））==500）{
heady=Number（heady）+20;
headx=headx-450;
}
l=length（ilkyazi）;
if（Number（c）==Number（l））{
gotoAndStop（4）;
}
if（Number（c）gotoAndStop
（2）;
}
temp=Number（headx）+Number（（c*k））;
trace（temp）;
c=Number（c）+1;
//此段函数用来实现当按下8个不同的按钮时，主场景跳播到相应的动画效果场景
（4）本例制作完成，执行菜单栏“控制”|“测试影片”命令，即可测试动画效果。
2.2自由绘图板
（1）
游戏说明
读者可能已经注意到，任何在Windows平台上操作的绘图软件都有其工具栏、颜色板及其他的功能键，由它们组合构成了基本的绘图功能。
用Flash也可以开发出一个自由绘图板，完成绘图功能，这是一个很好玩的Flash绘图小游戏。
游戏过程中，通过单击鼠标选择要绘制图形的模板，接着选择颜色，然后在白色的绘图区中便可以自由地绘制各式各样的图案。
在绘制的时候，绘图区的下面还有文字说明。
绘图板的场景如图2-18所示。
图2-18绘图板的场景
设计技巧
（1）本绘图游戏的制作核心在于如何实现鼠标、键盘与Flash中的按钮及影片的交互控制。
应事先绘制好提示工具按钮，并分别命名实体名，以方便后面函数的调用，主要应用到的命令如下：
·onClipEvent（enterFrame）实现键盘的输入交互命令。
·onClipEvent（mouseDown）实现鼠标的单击交互命令。
·onClipEvent（mouseMove）实现鼠标的移动交互命令。
（2）本游戏中另外两个关键之处在于，“返回”和“重绘”两个按钮的功能实现及填充色的选择，制作的过程中也是把所有的功能键全部做成按钮，再分别通过命令来实现，主要应用到的命令如下：
·removeMovieClip（""）实现清屏效果。
·c=newColor（）;和c.setRGB（）;实现色值的控制。
制作步骤
1．绘图板中基本工具的绘制
（1）启动FlashMX2004，单击“属性”面板中的“大小”按钮，打开“文件属性”对话框，设置影片宽为550px，高为400px，背景颜色为天蓝色（其色值为#639ACE），播放速度帧频为12fps，如图2-19所示。
单击“确定”按钮进入编辑场景。
（2）第一个制作环节是制作各提示按钮（最好先打开光盘观看源代码），共5个，为所有工具的按钮。
执行菜单栏“插入”|“新建元件”命令，新增5个按钮，分别命名“btnLine”、“btnOVAL”、“btnRec”、“btnPaintOVAL”和“btnPaintRec”（分别单击工具箱中的“线条工具”按钮
、“椭圆工具”按钮
、“矩形工具”按钮
及“文本工具”按钮
，配合使用就可以绘制出如图2-20所示的工具按钮，每个按钮的大小为50px×50px）。
图2-21所示的是btnLine按钮的编辑界面。
图2-19设置影片属性图2-20绘制的提示工具按钮
制作说明：
Flash按钮主要有“弹起”、“指针经过”、“按下”和“点击”4个帧。
每帧所绘制的图形效果在按钮触发的时候就会显示出相关帧上的动画效果，如在鼠标经过按钮的时候，就会显示该帧上面所绘制的图形效果。
在这里，“指针经过”帧上输入文字“直线”是为了实现鼠标经过的时候可以显示其相关说明。
通过4个图层的设计，可以实现当鼠标经过按钮的时候，背景颜色变亮，同时显示相关的文字说明的效果。
图2-21btnLine按钮的编辑界面
（3）执行菜单栏“插入”|“新建元件”命令，再新增5个影片剪辑，分别命名为“McLine”，“McOval”，“McRec”，“McPaintOval”，“McPaintRec”，然后分别把步骤
（2）中创建的5个按钮放入其中，并分别在第2帧处按F5键插入空白关键帧，在场中绘制相应的图形，如图2-22所示的为5个影片剪辑第2帧中的图形，它们是按钮被按下时的样子。
图2-22绘制按钮按下的样式
（4）执行菜单栏“插入”|“新建元件”命令，新增两个按钮组件，命名为“btnUndo”和“btnclear”，将其作为“返回”和“重绘”按钮，效果如图2-23所示。
图2-23制作“返回”和“重绘”按钮
2.2自由绘图板
（2）
（5）执行菜单栏“插入”|“新建元件”命令，新增一个按钮组件，命名为“c”。
单击工具箱中的“矩形工具”按钮
，按住Shift键绘制一个小方形按钮（大小为40px×40px），为绘图板上方的颜色选择按钮，可以先设置为红色，如图2-24所示。
图2-24绘制一个正方形色块
（6）执行菜单栏“插入”|“新建元件”命令，新增5个影片剪辑组件，分别命名为“line1”，“Oval”，“line”，“PaintOval”及“PaintRec”，并分别在5个影片剪辑中绘制一个正方形线条、一个圆形线条、一条倾角为135°的直线、圆形及方形色块，所有图形的位置可以放置在编辑场景外面，这样是为了防止后面使用时挡到了绘制的效果，如图2-25所示。
图2-25绘制绘图模板
（7）单击
返回到主场景，在时间轴上单击“插入图层”按钮
新建一个图层，命名为“按钮”，把步骤（3）中创建的5个影片剪辑从“库”中拖入，把步骤（4）和步骤（5）中创建的按钮也拖入，并复制出11个小的红色方块。
单击工具箱中的“选择工具”按钮
，在这11个复制的小色块的“属性”面板中，分别更改其RGB色调值，便可制作出不同颜色的按钮，可参照光盘中的“绘图板”文件（光盘中的“no2\绘图板\绘图板.fla”）中的源代码进行设置，效果如图2-26所示。
图2-26复制出的色块效果
（8）设置直线工具影片剪辑McLine实体名称为“Mc1”（如图2-27所示），圆形线条工具影片剪辑McOval实体名称为“Mc2”，方形线条工具影片剪辑McRec实体名称为“Mc3”，圆形色块工具影片剪辑McPaintOval实体名称为“Mc4”，方形色块工具影片剪辑McPaintRec实体名称为“Mc5”。
图2-27命名按钮实体名
（9）在时间轴上单击“插入图层”按钮
新建一个图层，命名为“方块”，并把正方形线条、图形线条、135°角直线、圆形及方形色块放进场景中，把正方形线条实体名称设为“Rec”，图形线条实体名称设为“Oval”，135°角直线实体名称设为“Line”，圆形色块实体名称设为“PaintOval”，方形色块实体名称设为“PaintRec”，如图2-28所示的为直线实体名称“Line”。
图2-28命名模板实体名
（10）选择“按钮”图层，再单击工具箱中的“文本工具”按钮
，在场景中绘制一个动态文字方块，不用写任何内容，把变量设为“state”，同时再输入一个静态文本，并输入文字“绘图板”，然后把所有的绘制组件编排成如图2-29所示的游戏场景。
图2-29设置动态文本的变量及游戏的场景
2．绘图命令的加入
（1）下面加入动作。
执行菜单栏“插入”|“新建元件”命令，在“按钮”图层中新增一个空的影片剪辑组件，命名为“action”，不用画任何内容，回到“场景1”中，然后直接把组件从“库”中拖入，会看到一个小圆点，选中它并设置该组件的实体名称为“mcLine”，如图2-30所示。
图2-30空影片剪辑的实体名称为mcLine
制作说明：
在Flash中经常会加入一个空的影片剪辑，在影片剪辑中加入一些命令，可实现对其他影片调动或是控制的效果。
2.2自由绘图板（3）
（2）保持空影片的选中状态，执行菜单栏“窗口”|“开发面板”|“动作”命令（或者按F9键）打开“动作-影片剪辑”面板，再加入如下动作：
onClipEvent（enterFrame）{
//
i=_root.i;
//
if（_root.mode==""）{
_root.state="单击要选择的工具ctrl+z可返回ctrl+a可重新开始";
}
if（_root.mode=="_root.Line"）{
_root.state="利用鼠标绘制直线";
}
if（_root.mode=="_root.Oval"）{
_root.state="按住Shift键可以绘制正圆形";
}
if（_root.mode=="_root.Rec"）{
_root.state="按住Shift键可以绘制正方形";
}
if（_root.mode=="_root.PaintOval"）{
_root.state="按住Shift键可以绘制正圆形";
}
if（_root.mode=="_root.PaintRec"）{
_root.state="按住Shift键可以绘制正方形";
}//所有汉字为文字方块所显示的文字
if（Key.isDown（17）&&Key.isDown（90））{
i=_root.i;
removeMovieClip（"_root.Copy"addi）;
i--;
if（i<=0）{
_root.i=0;
}else{
_root.i=i;
}
}//设定按下ctrl+z可删除上次画出的内容
if（Key.isDown（17）&&Key.isDown（65））{
for（i=_root.i;i!
=0;i--）{
removeMovieClip（"_root.Copy"addi）;
}
_root.i=0;
}
}//设定按下ctrl+a可删除所有画出的内容
onClipEvent（mouseDown）{
startX=_root._xmouse;
startY=_root._ymouse;
setProperty（_root.mode,_x,startX）;
setProperty（_root.mode,_y,startY）;
setProperty（_root.mode,_xscale,0）;
setProperty（_root.mode,_yscale,0）;
setProperty（_root.mode,_visible,1）;
}//单击鼠标左键设置绘图的位置
onClipEvent（mouseUp）{
if（_root._xmouse-startX!
=0）{
i++;
Objectx="Copy"addi;
duplicateMovieClip（_root.mode,Objectx,i）;
setProperty（Objectx,_x,startX）;
setProperty（Object
升级会员 