Flash动画制作课程设计报告 (1)

计算机科学与技术学院
课程设计报告
课程名称：多媒体技术
专业：计算机应用技术班级： 1401 班
学号： ************ *名：**
指导老师：***
二〇一六年六月二十日
计算机科学与技术学院课程设计成绩单
基于As3.0的“青蛙跳”游戏的设计与实现
一、设计目标：
本次设计是制作的一个测试智力的小游戏--“青蛙跳”。

通过单击鼠标移动两边的青蛙，让左边的小青蛙与右边的小青蛙位置互换，其中包括两个动画效果，一个是跳，另一个是跃，他们都是通过逐帧动画来实现。

而要使两边的青蛙互换，就要通过Actionscript3.0语句进行控制，最终效果如下图：
游戏开始界面：
游戏完成界面：
二、设计方案：
这个动画可以按照绘制背景、创建元件、布局场景和添加Actionscript语句4个步骤来完成，首先需要绘制一个荷塘月色的背景画面，然后在绘制该动画中要出现的“动画角色”，如青蛙等，并将场景中的元件、图形放置在相应的位置，最后在为对象添加动作语句，其中最重要的步骤就是添加Actionscript语句，它是实现这个游戏的关键所在，它是根据整个游戏规则来编辑的。

其游戏规则是：只要前面有空位置，青蛙就能跳到该位置上，且一次只能跳一格，或越过一个障碍跳一格，但不能反向跳动。

直到左边的青蛙与右边的青蛙位置互换才算成功。

中途若单击到不能跳或不能跃的青蛙，或者玩到无退路的情况，可单击“再来一次”从新开始游戏。

三、设计步骤：
（一）、制作背景：
使用Flash cs5.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);
function resetit(evt:MouseEvent){
init();
}
function init(){
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);
function clickHandler1(event:MouseEvent){
howto(1);
}
f2.addEventListener(MouseEvent.CLICK, clickHandler2);
function clickHandler2(event:MouseEvent){
howto(2);
}
f3.addEventListener(MouseEvent.CLICK, clickHandler3);
function clickHandler3(event:MouseEvent){
howto(3);
}
f4.addEventListener(MouseEvent.CLICK, clickHandler4);
function clickHandler4(event:MouseEvent){
howto2(4);
}
f5.addEventListener(MouseEvent.CLICK, clickHandler5);
function clickHandler5(event:MouseEvent){
howto2(5);
}
f6.addEventListener(MouseEvent.CLICK, clickHandler6);
function clickHandler6(event:MouseEvent){
howto2(6);
}
function howto(i:int){
var nowpos=(getChildByName("f"+i) as MovieClip).getMp()
if(nowpos+1<8 && !(getChildByName("p"+(nowpos+1)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).moveit();
(getChildByName("f"+i) as MovieClip).mp+=1;
(getChildByName("p"+(nowpos+1)) as MovieClip).sta=1;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else if(nowpos+2<8 && !(getChildByName("p"+(nowpos+2)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).jumpit();
(getChildByName("f"+i) as MovieClip).mp+=2;
(getChildByName("p"+(nowpos+2)) as MovieClip).sta=1;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else {
trace("不能");
}
}
function howto2(i:int){
var nowpos=(getChildByName("f"+i) as MovieClip).getMp()
if(nowpos-1>0 && !(getChildByName("p"+(nowpos-1)) as
MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).moveit();
(getChildByName("f"+i) as MovieClip).mp-=1;
(getChildByName("p"+(nowpos-1)) as MovieClip).sta=2;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else if(nowpos-2>0 && !(getChildByName("p"+(nowpos-2)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).jumpit();
(getChildByName("f"+i) as MovieClip).mp-=2;
(getChildByName("p"+(nowpos-2)) as MovieClip).sta=2;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else {
trace("不能");
}
}
function iscomplete(){
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)
//return true;
{reset.visible=false;
success.visible=true;
}
}
除了这上面的代码外，还需要对“青蛙”、“青蛙1”和“台阶”等元件分别编写相应的代码，与主动画时间轴的代码相对应，具体操作如下：（1）打开新建文档，新建一个“Actionscript文件”，另存为“frog.as”，用相同方法创建另外两个Actionscript文件分别命名为：“frog1”和“pos”。

（2）打开“frog.as”文件，输入以下代码：
package{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class frog extends MovieClip{
public function frog():void{
this.buttonMode=true;
}
public function moveit(){
this.gotoAndPlay(1);
}
public function jumpit(){
this.gotoAndPlay(11);
}
public var mp:int;
public function getMp(){
return mp;
}
}
}
（3）、打开“frog1.as”文件，在其窗口中输入以下代码：
package{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class frog1 extends MovieClip{
public function frog1():void{
this.buttonMode=true;
}
public function moveit(){
this.gotoAndPlay(1);
}
public function jumpit(){
this.gotoAndPlay(11);
}
public var mp:int;
public function getMp(){
return mp;
}
}
}
（4）、打开“pos.as”文件，在其窗口中输入如下代码：package{
import flash.display.MovieClip;
import flash.display.Sprite;
public class pos extends MovieClip{
public var sta:int;
public function pos():void{
}
public function getSta(){
return sta;
}
}
}
（5）、在“库”面板中用鼠标右键单击“青蛙”元件，在弹出的快捷菜单中选中“属性”命令，展开“高级”选项，再打开的“链接属性”对话框中选中“为ActionScript导出”复选框，在“类”文本框中输入“frog”，将元件与类链接起来。

如图：
（6）、同理将“青蛙1”元件与“frog1”类连接起来，将“台阶”元件与“pos”链接起来。

到此所有的设计阶段就做完了，接下来就是游戏的运行和结果分析。

四、设计结果分析：
游戏的运行结果如下：
当点击不能跳或者跃的青蛙时会在输出面板中输出“不能”
五、设计小结：
这次设计其实是一个比较简单的小游戏的制作，通过本次设计让我对Flash cs5.5这个软件的操作更加熟练，对Flash交互式动画制作的步骤有了进一步的掌握，对As3.0的编程语言及编程方法也有了一定掌握。

再游戏场景的编排上，为了使游戏看起来更加美观大方，所有的场景和布局都根据相应的主题进行制作，使颜色与主题相符合，让玩家在视觉上首先有所享受，然后通过在游戏中的操作，体会游戏的乐趣。

在编写青蛙动作的程序时，想了很久，不知道如何才能让青蛙检测前面是否有另外一只青蛙，是跳还是跃，其中出现多不少错误，最后通过上网查资料和还有到图书馆借书，都一一解决，本次设计收获很大，让我对flash的学习更加感兴趣，以后定更加努力学习flash的动画制作、游戏制作，体会其中的乐趣。

基于As3.0的“青蛙跳”游戏的设计与实现
六、设计目标：
本次设计是制作的一个测试智力的小游戏--“青蛙跳”。

通过单击鼠标移动两边的青蛙，让左边的小青蛙与右边的小青蛙位置互换，其中包括两个动画效果，一个是跳，另一个是跃，他们都是通过逐帧动画来实现。

而要使两边的青蛙互换，就要通过Actionscript3.0语句进行控制，最终效果如下图：
游戏开始界面：
游戏完成界面：
七、设计方案：
这个动画可以按照绘制背景、创建元件、布局场景和添加Actionscript语句4个步骤来完成，首先需要绘制一个荷塘月色的背景画面，然后在绘制该动画中要出现的“动画角色”，如青蛙等，并将场景中的元件、图形放置在相应的位置，最后在为对象添加动作语句，其中最重要的步骤就是添加Actionscript语句，它是实现这个游戏的关键所在，它是根据整个游戏规则来编辑的。

其游戏规则是：只要前面有空位置，青蛙就能跳到该位置上，且一次只能跳一格，或越过一个障碍跳一格，但不能反向跳动。

直到左边的青蛙与右边的青蛙位置互换才算成功。

中途若单击到不能跳或不能跃的青蛙，或者玩到无退路的情况，可单击“再来一次”从新开始游戏。

八、设计步骤：
（三）、制作背景：
使用Flash cs5.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);
function resetit(evt:MouseEvent){
init();
}
function init(){
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);
function clickHandler1(event:MouseEvent){
howto(1);
}
f2.addEventListener(MouseEvent.CLICK, clickHandler2);
function clickHandler2(event:MouseEvent){
howto(2);
}
f3.addEventListener(MouseEvent.CLICK, clickHandler3);
function clickHandler3(event:MouseEvent){
howto(3);
}
f4.addEventListener(MouseEvent.CLICK, clickHandler4);
function clickHandler4(event:MouseEvent){
howto2(4);
}
f5.addEventListener(MouseEvent.CLICK, clickHandler5);
function clickHandler5(event:MouseEvent){
howto2(5);
}
f6.addEventListener(MouseEvent.CLICK, clickHandler6);
function clickHandler6(event:MouseEvent){
howto2(6);
}
function howto(i:int){
var nowpos=(getChildByName("f"+i) as MovieClip).getMp()
if(nowpos+1<8 && !(getChildByName("p"+(nowpos+1)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).moveit();
(getChildByName("f"+i) as MovieClip).mp+=1;
(getChildByName("p"+(nowpos+1)) as MovieClip).sta=1;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else if(nowpos+2<8 && !(getChildByName("p"+(nowpos+2)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).jumpit();
(getChildByName("f"+i) as MovieClip).mp+=2;
(getChildByName("p"+(nowpos+2)) as MovieClip).sta=1;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else {
trace("不能");
}
}
function howto2(i:int){
var nowpos=(getChildByName("f"+i) as MovieClip).getMp()
if(nowpos-1>0 && !(getChildByName("p"+(nowpos-1)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).moveit();
(getChildByName("f"+i) as MovieClip).mp-=1;
(getChildByName("p"+(nowpos-1)) as MovieClip).sta=2;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else if(nowpos-2>0 && !(getChildByName("p"+(nowpos-2)) as MovieClip).getSta()){
(getChildByName("f"+i) as MovieClip).jumpit();
(getChildByName("f"+i) as MovieClip).mp-=2;
(getChildByName("p"+(nowpos-2)) as MovieClip).sta=2;
(getChildByName("p"+nowpos) as MovieClip).sta=0;
iscomplete();
} else {
trace("不能");
}
}
function iscomplete(){
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)
//return true;
{reset.visible=false;
success.visible=true;
}
}
除了这上面的代码外，还需要对“青蛙”、“青蛙1”和“台阶”等元件分别编写相应的代码，与主动画时间轴的代码相对应，具体操作如下：（4）打开新建文档，新建一个“Actionscript文件”，另存为“frog.as”，用相同方法创建另外两个Actionscript文件分别命名为：“frog1”和“pos”。

（5）打开“frog.as”文件，输入以下代码：
package{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class frog extends MovieClip{
public function frog():void{
this.buttonMode=true;
}
public function moveit(){
this.gotoAndPlay(1);
}
public function jumpit(){
this.gotoAndPlay(11);
}
public var mp:int;
public function getMp(){
return mp;
}
}
}
（6）、打开“frog1.as”文件，在其窗口中输入以下代码：
package{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class frog1 extends MovieClip{
public function frog1():void{
this.buttonMode=true;
}
public function moveit(){
this.gotoAndPlay(1);
}
public function jumpit(){
this.gotoAndPlay(11);
}
public var mp:int;
public function getMp(){
return mp;
}
}
}
（7）、打开“pos.as”文件，在其窗口中输入如下代码：package{
import flash.display.MovieClip;
import flash.display.Sprite;
public class pos extends MovieClip{
public var sta:int;
public function pos():void{
}
public function getSta(){
return sta;
}
}
}
（8）、在“库”面板中用鼠标右键单击“青蛙”元件，在弹出的快捷菜单中选中“属性”命令，展开“高级”选项，再打开的“链接属性”对话框中选中“为ActionScript导出”复选框，在“类”文本框中输入“frog”，将元件与类链接起来。

如图：
（9）、同理将“青蛙1”元件与“frog1”类连接起来，将“台阶”元件与“pos”链接起来。

到此所有的设计阶段就做完了，接下来就是游戏的运行和结果分析。

九、设计结果分析：
游戏的运行结果如下：
当点击不能跳或者跃的青蛙时会在输出面板中输出“不能”
十、设计小结：
这次设计其实是一个比较简单的小游戏的制作，通过本次设计让我对Flash cs5.5这个软件的操作更加熟练，对Flash交互式动画制作的步骤有了进一步的掌握，对As3.0的编程语言及编程方法也有了一定掌握。

再游戏场景的编排上，为了使游戏看起来更加美观大方，所有的场景和布局都根据相应的主题进行制作，使颜色与主题相符合，让玩家在视觉上首先有所享受，然后通过在游戏中的操作，体会游戏的乐趣。

在编写青蛙动作的程序时，想了很久，不知道如何才能让青蛙检测前面是否有另外一只青蛙，是跳还是跃，其中出现多不少错误，最后通过上网查资料和还有到图书馆借书，都一一解决，本次设计收获很大，让我对flash的学习更加感兴趣，以后定更加努力学习flash的动画制作、游戏制作，体会其中的乐趣。