Flash动画制作课程设计报告.docx
- 文档编号:27425725
- 上传时间:2023-06-30
- 格式:DOCX
- 页数:22
- 大小:24.90KB
Flash动画制作课程设计报告.docx
《Flash动画制作课程设计报告.docx》由会员分享,可在线阅读,更多相关《Flash动画制作课程设计报告.docx(22页珍藏版)》请在冰豆网上搜索。
Flash动画制作课程设计报告
Flash动画制作设计报告
学院
专业
班级
学号
姓名
成绩
题目名称
1.设计目标阐述该Flash动画的设计意图和创意,简单介绍动画容。
2.设计思想
阐述该动画的设计方案,对动画的设计思路进展阐述和分析。
3设计步骤
对该动画的设计实现过程进展阐述和分析,详细说明制作该动画的步骤,所使用的对象以及该对象的操作方法。
4设计小结
对整个设计报告做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。
基于As3.0的"青蛙跳〞游戏的设计与实现
一、设计目标:
本次设计是制作的一个测试智力的小游戏--"青蛙跳〞。
通过单击鼠标移动两边的青蛙,让左边的小青蛙与右边的小青蛙位置互换,其中包括两个动画效果,一个是跳,另一个是跃,他们都是通过逐帧动画来实现。
而要使两边的青蛙互换,就要通过Actionscript3.0语句进展控制,最终效果如以下列图:
游戏开场界面:
游戏完成界面:
二、设计方案:
这个动画可以按照绘制背景、创立元件、布局场景和添加Actionscript语句4个步骤来完成,首先需要绘制一个荷塘月色的背景画面,然后在绘制该动画中要出现的"动画角色〞,如青蛙等,并将场景中的元件、图形放置在相应的位置,最后在为对象添加动作语句,其中最重要的步骤就是添加Actionscript语句,它是实现这个游戏的关键所在,它是根据整个游戏规那么来编辑的。
其游戏规那么是:
只要前面有空位置,青蛙就能跳到该位置上,且一次只能跳一格,或越过一个障碍跳一格,但不能反向跳动。
直到左边的青蛙与右边的青蛙位置互换才算成功。
中途假设单击到不能跳或不能跃的青蛙,或者玩到无退路的情况,可单击"再来一次〞从新开场游戏。
三、设计步骤:
(一)、制作背景:
使用Flashcs5.5面板中的根本绘图工具绘制游戏中的背景,并填充多彩的颜色,主要应用的知识点包括Flash动画的根底知识、绘图与编辑图形、填充颜色以及图层的根本操作。
具体步骤如下:
1、新建一个Flash文件〔Actionscript3.0〕,设置大小为750*300像素,将背景颜色设置为白色。
保存文件,命名为"青蛙跳.fla〞。
2、在图层1中使用矩形工具在场景中画一个矩形〔750*150〕代表夜空,并设置矩形大小和颜色。
3、在夜空中〔刚刚所绘制的矩形〕绘制一些白色点和一个圆代表星星和月亮。
4、在用矩形工具在场景中绘制矩形(750*150)代表小河,并设置颜色和大小。
5、在小河中绘制一个白色线条作为河水,并绘制一些小草形状的图形,设置小草的填充颜色,并将小草复制多个,移动到河边,然后再河边绘制草堆和土坡。
6、绘制的背景图片的最终效果如以下列图所示:
(二)、创立元件:
创立动画中的主要原件:
青蛙跳的影片剪辑元件、再来一次的按钮元件、青蛙跳的台阶元件等。
(1)、先将所绘制的背景图片转换为图形元件
Ctrl+A选中场景中所有图形,按F8将其转换为图形元件并,命名为"背景〞。
(2)、创立"再来一次〞的按钮元件:
〔3〕、创立一个"过关〞的图形元件:
(4)、创立名为"按钮与文件〞的影片剪辑元件:
将"再来一次〞按钮和"过关〞图形,以及事先导入到库中的"lihua.gif〞图片,拖入场景,并设置按钮的滤镜效果中,如以下列图:
(5)、创立"台阶〞影片剪辑元件:
在场景中用矩形工具绘制一个大小为"51*20〞像素的矩形,边框为黑色。
(6)、创立"青蛙〞影片剪辑元件:
创立"青蛙〞元件,在图层1第一帧处绘制青蛙的大致形状并填充颜色,命名图层1为"身体〞,在1-10帧出分别绘制青蛙不同的动作和位置,作为"跳〞的动作;新建图层2,命名为"身体2〞,在图层2的11-20帧绘制青蛙的不同动作和位置,作为"跃〞的动作,如以下列图所示:
(7)、同步骤〔6〕创立一个"青蛙1〞影片剪辑元件,将青蛙身体设置成另外的颜色:
效果如以下列图所示:
(三)、场景布局:
将整个动画中所用到的元件拖放到场景中,与背景相搭配、映衬,并为某些元件设置滤镜,使之看起来有立体感。
再在属性面板中为某些需要添加语句的元件实例命名,具体步骤如下。
创立"青蛙图层〞和"台阶图层〞
将"青蛙〞和"青蛙1〞从左至右相对放置,并命名为f1,f2,f3,f4,f5,f6。
将"台阶〞从左至右放置,放置7个,每两个之间大概100像素距离,并命名为p1,p2,p3,p4,p5,p6,p7。
创立"复位图层〞和"重新开场图层〞
将按钮元件"再来一次〞放到"复位图层〞,并实例名为"reset〞。
将"按钮和文字〞元件放到"重新开场图层〞实例名为"success〞。
如以下列图所示:
(四)、添加Actionscript语句:
在库面板中双击"青蛙〞元件,在图层的最上面,新建一个Actionscript的图层。
在第1帧处输入以代码:
Stop();
在第10帧处插入关键帧,输入以下代码,表示青蛙的"x〞距离增加100,并跳到第1帧开场播放:
this.x+=100;
this.gotoAndPlay
(1);
在第20帧处插入关键帧,输入以下代码,表示青蛙的"x〞距离增加200,并跳到第1帧开场播放:
this.x+=200;
this.gotoAndPlay
(1);
效果如以下列图所示:
同理在库面板中双击"青蛙1〞设置一样的代码:
回到主场景,并在主场景中最上面新建一个"Actionscript图层〞,在第一帧处输入以下代码:
stop();
success.replay.addEventListener(MouseEvent.CLICK,resetit);
reset.addEventListener(MouseEvent.CLICK,resetit);
functionresetit(evt:
MouseEvent){
init();
}
functioninit(){
p1.sta=1;
p2.sta=1;
p3.sta=1;
p4.sta=0;
p5.sta=2;
p6.sta=2;
p7.sta=2;
f1.mp=1;
f2.mp=2;
f3.mp=3;
f4.mp=5;
f5.mp=6;
f6.mp=7;
f1.x=166;
f2.x=262;
f3.x=365.7;
f4.x=437.45;
f5.x=538.45;
f6.x=637.47;
//"青蛙〞与"青蛙1〞元件实例在场景中的坐标位置"x〞
reset.visible=true;
success.visible=false;
}
init();
//下面这段代码表示青蛙只能跳一格,越过一个障碍跳一格,且不能反向跳动,如果跳跃成功,那么显示按钮与文字元件。
f1.addEventListener(MouseEvent.CLICK,clickHandler1);
functionclickHandler1(event:
MouseEvent){
howto
(1);
}
f2.addEventListener(MouseEvent.CLICK,clickHandler2);
functionclickHandler2(event:
MouseEvent){
howto
(2);
}
f3.addEventListener(MouseEvent.CLICK,clickHandler3);
functionclickHandler3(event:
MouseEvent){
howto(3);
}
f4.addEventListener(MouseEvent.CLICK,clickHandler4);
functionclickHandler4(event:
MouseEvent){
howto2(4);
}
f5.addEventListener(MouseEvent.CLICK,clickHandler5);
functionclickHandler5(event:
MouseEvent){
howto2(5);
}
f6.addEventListener(MouseEvent.CLICK,clickHandler6);
functionclickHandler6(event:
MouseEvent){
howto2(6);
}
functionhowto(i:
int){
varnowpos=(getChildByName("f"+i)asMovieClip).getMp()
if(nowpos+1<8&&!
(getChildByName("p"+(nowpos+1))asMovieClip).getSta()){
(getChildByName("f"+i)asMovieClip).moveit();
(getChildByName("f"+i)asMovieClip).mp+=1;
(getChildByName("p"+(nowpos+1))asMovieClip).sta=1;
(getChildByName("p"+nowpos)asMovieClip).sta=0;
isplete();
}elseif(nowpos+2<8&&!
(getChildByName("p"+(nowpos+2))asMovieClip).getSta()){
(getChildByName("f"+i)asMovieClip).jumpit();
(getChildByName("f"+i)asMovieClip).mp+=2;
(getChildByName("p"+(nowpos+2))asMovieClip).sta=1;
(getChildByName("p"+nowpos)asMovieClip).sta=0;
isplete();
}else{
trace("不能");
}
}
functionhowto2(i:
int){
varnowpos=(getChildByName("f"+i)asMovieClip).getMp()
if(nowpos-1>0&&!
(getChildByName("p"+(nowpos-1))asMovieClip).getSta()){
(getChildByName("f"+i)asMovieClip).moveit();
(getChildByName("f"+i)asMovieClip).mp-=1;
(getChildByName("p"+(nowpos-1))asMovieClip).sta=2;
(getChildByName("p"+nowpos)asMovieClip).sta=0;
isplete();
}elseif(nowpos-2>0&&!
(getChildByName("p"+(nowpos-2))asMovieClip).getSta()){
(getChildByName("f"+i)asMovieClip).jumpit();
(getChildByName("f"+i)asMovieClip).mp-=2;
(getChildByName("p"+(nowpos-2))asMovieClip).sta=2;
(getChildByName("p"+nowpos)asMovieClip).sta=0;
isplete();
}else{
trace("不能");
}
}
functionisplete(){
if(p1.sta==2)
if(p2.sta==2)
if(p3.sta==2)
if(p4.sta==0)
if(p5.sta==1)
if(p6.sta==1)
if(p7.sta==1)
//returntrue;
{reset.visible=false;
success.visible=true;
}
}
除了这上面的代码外,还需要对"青蛙〞、"青蛙1〞和"台阶〞等元件分别编写相应的代码,与主动画时间轴的代码相对应,具体操作如下:
(1)翻开新建文档,新建一个"Actionscript文件〞,另存为"frog.as〞,用一样方法创立另外两个Actionscript文件分别命名为:
"frog1〞和"pos〞。
(2)翻开"frog.as〞文件,输入以下代码:
package{
importflash.display.MovieClip;
importflash.display.Sprite;
importflash.events.MouseEvent;
publicclassfrogextendsMovieClip{
publicfunctionfrog():
void{
this.buttonMode=true;
}
publicfunctionmoveit(){
this.gotoAndPlay
(1);
}
publicfunctionjumpit(){
this.gotoAndPlay(11);
}
publicvarmp:
int;
publicfunctiongetMp(){
returnmp;
}
}
}
(3)、翻开"frog1.as〞文件,在其窗口中输入以下代码:
package{
importflash.display.MovieClip;
importflash.display.Sprite;
importflash.events.MouseEvent;
publicclassfrog1extendsMovieClip{
publicfunctionfrog1():
void{
this.buttonMode=true;
}
publicfunctionmoveit(){
this.gotoAndPlay
(1);
}
publicfunctionjumpit(){
this.gotoAndPlay(11);
}
publicvarmp:
int;
publicfunctiongetMp(){
returnmp;
}
}
}
(4)、翻开"pos.as〞文件,在其窗口中输入如下代码:
package{
importflash.display.MovieClip;
importflash.display.Sprite;
publicclassposextendsMovieClip{
publicvarsta:
int;
publicfunctionpos():
void{
}
publicfunctiongetSta(){
returnsta;
}
}
}
(5)、在"库〞面板中用鼠标右键单击"青蛙〞元件,在弹出的快捷菜单中选中"属性〞命令,展开"高级〞选项,再翻开的"属性〞对话框中选中"为ActionScript导出〞复选框,在"类〞文本框中输入"frog〞,将元件与类起来。
如图:
(6)、同理将"青蛙1〞元件与"frog1〞类连接起来,将"台阶〞元件与"pos〞起来。
到此所有的设计阶段就做完了,接下来就是游戏的运行和结果分析。
四、设计结果分析:
游戏的运行结果如下:
当点击不能跳或者跃的青蛙时会在输出面板中输出"不能〞
五、设计小结:
这次设计其实是一个比拟简单的小游戏的制作,通过本次设计让我对Flashcs5.5这个软件的操作更加熟练,对Flash交互式动画制作的步骤有了进一步的掌握,对As3.0的编程语言及编程方法也有了一定掌握。
再游戏场景的编排上,为了使游戏看起来更加美观大方,所有的场景和布局都根据相应的主题进展制作,使颜色与主题相符合,让玩家在视觉上首先有所享受,然后通过在游戏中的操作,体会游戏的乐趣。
在编写青蛙动作的程序时,想了很久,不知道如何才能让青蛙检测前面是否有另外一只青蛙,是跳还是跃,其中出现多不少错误,最后通过上网查资料和还有到图书馆借书,都一一解决,本次设计收获很大,让我对flash的学习更加感兴趣,以后定更加努力学习flash的动画制作、游戏制作,体会其中的乐趣。
基于As3.0的"青蛙跳〞游戏的设计与实现
六、设计目标:
本次设计是制作的一个测试智力的小游戏--"青蛙跳〞。
通过单击鼠标移动两边的青蛙,让左边的小青蛙与右边的小青蛙位置互换,其中包括两个动画效果,一个是跳,另一个是跃,他们都是通过逐帧动画来实现。
而要使两边的青蛙互换,就要通过Actionscript3.0语句进展控制,最终效果如以下列图:
游戏开场界面:
游戏完成界面:
七、设计方案:
这个动画可以按照绘制背景、创立元件、布局场景和添加Actionscript语句4个步骤来完成,首先需要绘制一个荷塘月色的背景画面,然后在绘制该动画中要出现的"动画角色〞,如青蛙等,并将场景中的元件、图形放置在相应的位置,最后在为对象添加动作语句,其中最重要的步骤就是添加Actionscript语句,它是实现这个游戏的关键所在,它是根据整个游戏规那么来编辑的。
其游戏规那么是:
只要前面有空位置,青蛙就能跳到该位置上,且一次只能跳一格,或越过一个障碍跳一格,但不能反向跳动。
直到左边的青蛙与右边的青蛙位置互换才算成功。
中途假设单击到不能跳或不能跃的青蛙,或者玩到无退路的情况,可单击"再来一次〞从新开场游戏。
八、设计步骤:
(三)、制作背景:
使用Flashcs5.5面板中的根本绘图工具绘制游戏中的背景,并填充多彩的颜色,主要应用的知识点包括Flash动画的根底知识、绘图与编辑图形、填充颜色以及图层的根本操作。
具体步骤如下:
7、新建一个Flash文件〔Actionscript3.0〕,设置大小为750*300像素,将背景颜色设置为白色。
保存文件,命名为"青蛙跳.fla〞。
8、在图层1中使用矩形工具在场景中画一个矩形〔750*150〕代表夜空,并设置矩形大小和颜色。
9、在夜空中〔刚刚所绘制的矩形〕绘制一些白色点和一个圆代表星星和月亮。
10、在用矩形工具在场景中绘制矩形(750*150)代表小河,并设置颜色和大小。
11、在小河中绘制一个白色线条作为河水,并绘制一些小草形状的图形,设置小草的填充颜色,并将小草复制多个,移动到河边,然后再河边绘制草堆和土坡。
12、绘制的背景图片的最终效果如以下列图所示:
(四)、创立元件:
创立动画中的主要原件:
青蛙跳的影片剪辑元件、再来一次的按钮元件、青蛙跳的台阶元件等。
(3)、先将所绘制的背景图片转换为图形元件
Ctrl+A选中场景中所有图形,按F8将其转换为图形元件并,命名为"背景〞。
(4)、创立"再来一次〞的按钮元件:
〔3〕、创立一个"过关〞的图形元件:
(8)、创立名为"按钮与文件〞的影片剪辑元件:
将"再来一次〞按钮和"过关〞图形,以及事先导入到库中的"lihua.gif〞图片,拖入场景,并设置按钮的滤镜效果中,如以下列图:
(9)、创立"台阶〞影片剪辑元件:
在场景中用矩形工具绘制一个大小为"51*20〞像素的矩形,边框为黑色。
(10)、创立"青蛙〞影片剪辑元件:
创立"青蛙〞元件,在图层1第一帧处绘制青蛙的大致形状并填充颜色,命名图层1为"身体〞,在1-10帧出分别绘制青蛙不同的动作和位置,作为"跳〞的动作;新建图层2,命名为"身体2〞,在图层2的11-20帧绘制青蛙的不同动作和位置,作为"跃〞的动作,如以下列图所示:
(11)、同步骤〔6〕创立一个"青蛙1〞影片剪辑元件,将青蛙身体设置成另外的颜色:
效果如以下列图所示:
(五)、场景布局:
将整个动画中所用到的元件拖放到场景中,与背景相搭配、映衬,并为某些元件设置滤镜,使之看起来有立体感。
再在属性面板中为某些需要添加语句的元件实例命名,具体步骤如下。
创立"青蛙图层〞和"台阶图层〞
将"青蛙〞和"青蛙1〞从左至右相对放置,并命名为f1,f2,f3,f4,f5,f6。
将"台阶〞从左至右放置,放置7个,每两个之间大概100像素距离,并命名为p1,p2,p3,p4,p5,p6,p7。
创立"复位图层〞和"重新开场图层〞
将按钮元件"再来一次〞放到"复位图层〞,并实例名为"reset〞。
将"按钮和文字〞元件放到"重新开场图层〞实例名为"success〞。
如以下列图所示:
(六)、添加Actionscript语句:
在库面板中双击"青蛙〞元件,在图层的最上面,新建一个Actionscript的图层。
在第1帧处输入以代码:
Stop();
在第10帧处插入关键帧,输入以下代码,表示青蛙的"x〞距离增加100,并跳到第1帧开场播放:
this.x+=100;
this.gotoAndPlay
(1);
在第20帧处插入关键帧,输入以下代码,表示青蛙的"x〞距离增加200,并跳到第1帧开场播放:
this.x+=200;
this.gotoAndPlay
(1);
效果如以下列图所示:
同理在库面板中双击"青蛙1〞设置一样的代码:
回到主场景,并在主场景中最上面新建一个"Actionscript图层〞,在第一帧处输入以下代码:
stop();
success.replay.addEventListener(MouseEvent.CLICK,resetit);
reset.addEventListener(MouseEvent.CLICK,resetit);
functionresetit(evt:
MouseEvent){
init();
}
functioninit(){
p1.sta=1;
p2.sta=1;
p3.sta=1;
p4.sta=0;
p5.sta=2;
p6.sta=2;
p7.sta=2;
f1.mp=1;
f2.mp=2;
f3.mp=3;
f4.mp=5;
f5.mp=6;
f6.mp=7;
f1.x=166;
f2.x=262;
f3.x=365.7;
f4.x=437.45;
f5.x=538.45;
f6.x=637.47;
//"青蛙〞与"青蛙1〞元件实例在场景中的坐标位置"x〞
reset.visible=true;
success.visible=false;
}
init();
//下面这段代码表示青蛙只能跳一格,越过一个障碍跳一格,且不能反向跳动,如果跳跃成功,那么显示按钮与文字元件。
f1.addEventListener(MouseEvent.CLICK,clickHandler1);
functionclickHandler1(event:
MouseEvent){
howto
(1);
}
f2.addEventListener(MouseEvent.CLICK,clickHandler2);
functionclickHandler2(event:
MouseEvent){
howto
(2);
}
f3.addEve
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash 动画 制作 课程设计 报告