日志 教程
当前位置: 教程  >  动漫设计  >  FLASH动画制作  >  正文

Flash游戏制作:杀狗大赛

作者:宋姗姗 发表于 2011/6/13 18:23:35     评论(3)     阅读(7987)     
在internet无比火爆的今天,网络技术日新月异,而macromedia的flash无疑是其中的佼佼者,flash技术以无与伦比的速度被广大用户所接受,并越来越展现出其强大的生命力。

  它提供给设计者和开发者轻松创建新一代网络应用的编辑新经验。从可口可乐爱华电子,越来越多的用户选择flash制作高压缩性的,富含声音与动画的交互式网站。创意,互动,趣味,实用,一切结合得是如此完美....

     而要想学好flash,其形变动画,运动动画,蒙板动画等并不难,最大难点无疑是在macromedia flash5.0中嵌入的actionscript脚本功能,actionscript脚本语言是特有的一种非常强大的网络动画编程语言,其语法结构虽与javascript脚本语言相类似,但又有很多不同于javascript的独到之处。50多个action行为,数百个子符串,运算符与函数,而很多的书辑,教程过于隆统,抽象,让人很难一时间完全弄懂。

  本文的目的就是通过几个简单的flash游戏,让已对掌握flash基本操作的使用者对actionscrip脚本有较直接的了解,掌握常用的actionscript脚本语言,并通过多动手,多动脑,在实战中提高自己的flash水平。   

实例说明:

  本游戏有9个地洞,小狗随机的在这9个洞中出现,你的任务就是在小狗把头缩回洞内之前打中它,越快击中得分数越高,小狗每出现一次为一轮,20轮后游戏结束,并给出得分。  

    原理分析:

     用遮照完成小狗在黑洞里一进一出的效果,用startdrag来替换鼠标,利用ramdon取随机数使小狗随机出现,而把时间轴上每一帧给予不同的分值使得越快打到分越高,最后用input text来显示得分。我希望您能你了解这个游戏的原理,而不是简单的照做,举一反三是很重要的,只有真正了解了一个作品的原理,算法之后,您才能做出自己更好的作品。为了您能看得更清楚并使之适合于一些flash的初学者,
我将以层为单位逐层的来讲解并尽可能详细的介绍操作,由于这种讲解的顺序和我们在实际中完成一件作品的顺序是相同的,因此有必要提醒大家注意:

background层

     打开您的flash,本例使用的是macromedia flash5.0版本,单击file,在下拉菜单中,单击new新建一个文件。(这些操作都有快捷键,为使您更好理解,将写成file---new,下同)modify---movie,在出现的影片信息中将影片宽(width)改为400,高(height)改为300,并设定背景色为浅黄色。insert---symbol...新建一个图型(graphic)原件命名为hole,在hole中画一个黑色的椭圆,返回scene 1,window---library显示出原件列表,把hole拖放到scene 1的第一层,复制成9个,window---panels---align调出对齐面板把9个hole对齐排好,再用文字工具在
右下方输入“得分”,最后将这一层改名为 background。   

dog层

   insert---symbol...新建graphic命名为dogpic,手绘一个可爱的狗头,当然您要是喜欢小猪我也不介意。inster---symbol...新键一个movieclip,命名为dogmovie,从library拖放dogpic到dogmovie,局中。insert---keyframe在第5,10,25帧建立关键帧,单击第10帧,调整此帧上dogpic的位置向上50(可通过window---panel---info来调整,insert---keyframe在第20帧建立关键帧。右键单击第5到第10帧间任一帧,creat motiontween建立运动动画,同样在第20到25帧建立运动动画。inster---symbol...新建一个button命名为grid,insert---keyframe在hit帧上创键关键帧,画一个矩型。返回pigmovie,insert---layer新建一层layer2,insert---keyframe在第5帧建立关键帧,从library中拖放grid到lyer2,删除lyer2上21-25帧。insert---layer新建一层lyer3,insert---blank keyframe在第1,5,20帧建立空白关键帧,左键双击第一帧弹出action面板,
basic action---stop,单击第5帧,window---panel---frame弹出 frame面板,将lable设置为up,同样将20帧的frame lable设为down。我们在这里为frame设置lable值是为了方便我们用actionscript进行跳转,在flash中可以设置是按帧位置数或帧标签跳转,通常使用的是标签方式,可以减少发生错误的机率并使你的actionscript更具有可读性。我们回到scene 1,insert---layer新建一层改名为dog,从library中拖放dogmovie到这一层,复制9个,使每一个dogmovie都正好处在background层中每一个黑色椭圆长轴以下。

mask遮照层

  遮照的概念是:遮罩层可以遮盖任何同遮罩层相关联的图层(被遮层)里的内容。
在scene 1中insert layer并将此层改名为mask,以background层上的黑色椭圆长轴为基准,画一个矩形,并使此矩型比dogmovie稍大一点,复制九个排列好。右击此层在弹出菜单中选mask,这样,我们就做好了一个遮照。也就是说在dog层上的所有原件除非出现在本层9个矩形范围以内否则便都是不可见的了。由于现在dog层上并没有任何的原件在此范围内,所以虽然我们在dog层上放了9个原件但我们将只能看到
background层上9个黑色hole,但记得吗,我们做的dogmovie是上下移动的movieclip,而当其向上云动时就会显示在屏幕上,而向下运动就会从屏幕上消失。这样就达到了我们让小狗一进一出的目的。但是有个严重的问题,我们的9个dogmovie会同时运动,而不是象我们希望的那样一个一个的运动,别急,下面就该我们的主角actionscript出场了。

随机运动

  双击pigmovie中的第一帧,在action面板中的basic action中选取stop()。
单击dog层上的一个dogmovie,window---panels---instance将name设为dog0。依次将其它的dogmovie命名为dog1,dog2.....dog8。在scene1中新建一层action, 在第5帧新建关建帧,双击第5帧,输入actions如下:

tellTarget ("/dog" add random(9)) {    
gotoAndPlay ("up");
}

random(9)是从0-9中任取一数,add 是一个字符传连接符,用来连接"/dog"和random(9)得到的数。telltarget的语法是:

telltarget(target);

target:指定时间轴线的目标路径字符串
statement:目标时间轴线代码
tellTarget ("/dog" add random(9))执行后的结果是调用/dog0,/dog1....../dog8,而gotoAndPlay ("up")从up帧开始播放,这就达到了
我们dogmovie随机出现的目地。 

鼠标替换

  为了使游戏更真实,我们应当屏闭掉默认的鼠标图形,并用我们做好的movieclip来代替它。先insert---symbol...新建一个moviclip原件命名为knife,双击第一帧,在action面板中的basic action中选取stop(),在第二帧画一把刀,第三帧在刀边画上一串血花。回到scene1,把knife拖拽到background层,并命名为knife,在action层的第4帧建立关键帧,并输入如下actions:

mouse.hide()
startDrag ("knife", true);

mouse.hide()把默认的鼠标隐藏起来。startdrag的语法是:

startdrag(target);
startdrag(target,[lock]);
startdrag(target,[,lock[,left,top,right,bottom]]);

target:待拖动的movie clip的目标路径
lock: 布尔值,用来指定是把可拖动的movie clip锁定在鼠标中央位置(真),还是锁定在用户最初在movie clip上单击的位置(假)。
这个参数是可任选的。
left,right,top,bottom:指定动画的父代movie clip的限制矩形区域。这个参数是可任选的。
这样我们就可以用knife来取代默认的鼠标。

计分与轮次:

  我们预定游戏10个回合后结束,并且每个回合都要计算本轮得分与总分。10回合后游戏结束。首先来看看怎样实现计算游戏回合:
  双击action层上第四帧输入:ROUND="0",单击第5帧在frame面板上定义lable为:again,在第30帧建立关键帧,并将其frame lable定义为back,双击action层上第26帧输入actions如下:

ROUND = Number(ROUND)+1;
if (Number(ROUND)<11) {
   gotoAndPlay ("again");
} else {
    gotoAndPlay ("BACK");
}

  这样我们用一个条件选择完成了循环。当ROUND小于11时将不断循环,而ROUND等于11时将跳到结尾。

游戏的计分方式为越快击中小狗分数越高。

在scene1中新建一层名为point,从第5帧到第25帧建立关键帧,并切依次输入

actions如下:POINT="200",POINT="190"......POINT="0"。
在scene1中新建一层名为text,用text tool拖出一个文本框,window---panels---text opion,在text opion面板中定义文本框为input text,
varable为score。双击action层第25帧,输入如下actions:
Tatal = Number(Tatal)+Number(Point);
Score = Tatal;

  其中tatal为总分,point为本轮得分,number是actions中的一个函数,用来将参数,变量或表达式的值转换成数值。而Score = Tatal使得我们可以在score文本框中显示score即tatal的值。

鼠标动作:

  现在的问题是我们该如何使得flash知道我们是否打中了小狗,是否得分,而且一旦我们打中小狗,小狗应当立刻钻回黑洞。要想实现这种效果,显然我们应当使用鼠标动作。还记得我们开始时在dogmovie中加入的按钮grid吗?开始编辑dogmovie原件,新建一层lable,将第5帧的frame lable设为up,第20帧的frame lable设为down。最后给按钮grid加上如下actions:

on (release) {
    gotoAndPlay ("DOWN");
       tellTarget ("../knife") {
        gotoAndPlay ("UP");    }
    tellTarget ("..") {
        gotoAndPlay ("END");
    }
}

on 的语法是:

on(mouseevent)

statement: 鼠标事件发生时执行的代码
mouseevent是鼠标事件,包括有:
press: 鼠标指针在按钮上并单击
release: 鼠标指针在按钮上被释放
releaseoutside: 鼠标指针在按钮外被释放
rollover: 鼠标指针移进按钮区域内
rollout: 鼠标指针移出按钮区域内
dragover: 鼠标指针在按钮上被按下,移出按钮再移回
keypress: 鼠标指针在按钮上,然后鼠标按下,再移出按钮区域

  这段actions的含义是:当此按钮被鼠标点击时,影片跳至framelable为down的帧开始播放,代替鼠标动画的movieclip开始在frame lable为
up处播放,而scene1则跳转至frame lable为end处播放。

加入音乐

  对于一个游戏,音乐是不可或缺的。首先我们来分析一下有哪些地方需要并需要哪种音乐。首先肯定要有背景音乐,而当打中小狗时也应当有声效的配合。回到scene 1,file---import,导入您喜欢的背景音乐,要注意的是,最好导入mp3格式的文件,这样不会导致你的源文件过大,而且音乐的长短最好和你的影片一样长,根据你的影片播放速度(比如12 frames/秒),你就可以估算出大概的播放时间并以此为依据寻找音乐。
  在scene1中新建一层名为sound,从library里把音乐素材拖到sound中,window---panels---sounds弹出sound面板,在sync中设为stream,这样音乐会和动画同步播放,不会有大的失真。编辑knife原件,新建一层,file---import,导入您喜欢的音效,在第2帧新建关键帧,从library里把音效拖放到这一帧。

评论
显示
悄悄话
    辛志强
  • 辛志强的评论:
  •   虽然是基本但还是看不懂     哎  的确的努力了
    2011-11-04 08:11
    李政宇
  • 李政宇的评论:
  •   看不懂,都怪我自己上课没认真听
    2011-09-03 13:44
    毛鹏飞
    2011-06-13 19:07
汇众教育官网 | 联系方式 | 版权声明 | 友情链接
Copyright 2008© 汇众益智(北京)教育科技有限公司. All Rights Reserved
京ICP备09092043号 京公网安备11010802009023号