Flash动画制作课程设计报告

级绩1.计目标阐述该Flash动的设计意图和创意，简单介绍动画内容。2.计思想阐述该动画的设计方案，对动画的设计思路进行阐述和分析。3计步对该动画的设计实现过程进行阐述和分析细明制作该动画的步骤使的对象以及该对象的操作方法。4计小对整个设计报告做归纳性总结设计过程中的困难及如何解决的提出展望。

基于As3.0“青跳”游的设计实一、设计标：本次设计是制作的一个测试智力的小游--“青蛙跳通过单击鼠标移动两边的青蛙左边的小青蛙右边的小青蛙位置互换中包括两个动画效果，一个是跳另一个是跃他们都是通过逐帧动画来实现要使两边的青蛙互换，就要通过Actionscript3.0语句进行控制，最终效果如下图：游戏开始界面：游戏完成界面：

二、设计案：这个动画可以按照绘制背景创建元件布局场景和添加句4个步骤来完成首先需要绘制一个荷塘月色的背景画面然后在绘制该动画中要出现的“动画角色青蛙等，并将场景中的元件、图形放置在相应的位置，最后在为对象添加动作语句，其中最重要的步骤就是添加Actionscript语句，它是实现这个游戏的关键所在，它是根据整个游戏规则来编辑的。其游戏规则是：只要前面有空位置青蛙就能跳到该位置上且一次只能跳一格或越过一个障碍跳一格，但不能反向跳动。直到左边的青蛙与右边的青蛙位置互换才算成功。中途若单击到不能跳或不能跃的青蛙或者玩到无退路的情况可单“再来一次”从新开始游戏。三、设计骤：（一）制作背景：使用Flash面板中的基本绘图工具绘制游戏中的背景，并填充多彩的颜色要应用的知识点包括动画的基础知识图与编辑图形、填充颜色以及图层的基本操作。具体步骤如下：1、新建一个文Actionscript3.0小为750*300像素，将背景颜色设置为白色。保存文件，命名为“青蛙跳fla2、在图层1中使用矩形工具在场景中画一个矩（750*150代表夜空，并设置矩形大小和颜色。3、在夜空（刚才所绘制的矩形绘制一些白色点和一个圆代表星星和月亮。4、在用矩形工具在场景中绘制矩(750*150)表小河，并设置颜色和大小。5、在小河中绘制一个白色线条作为河水，并绘制一些小草形状的图形，设置小草的填充颜色，并将小草复制多个，移动到河边，然后再河边绘制草堆和土坡。6、绘制的背景图片的最终效果如下图所示：

（二）创建元件:创建动画中的主要原件青蛙跳的影片剪辑元件再来一次的按钮元件、青蛙跳的台阶元件等。（1）、先将所绘制的背景图片转换为图形元件Ctrl+A选中场景中所有图形按F8将其转换为图形元件并命名为“背景（2）、创建“再来一次”的按钮元件：（3创建一个“过关”的图形元件：（4）、创建名为“按钮与文件”的影片剪辑元件：

将“再来一次”按钮和“过关”图形，以及事先导入到库中的“lihua.gif”图片，拖入场景，并设置按钮的滤镜效果中，如下图：（5）、创建“台阶”影片剪辑元件：在场景中用矩形工具绘制一个大小为“51*20”像素的矩形，边框为黑色。（6）、创建“青蛙”影片剪辑元件:创建“青蛙”元件，在图层一帧处绘制青蛙的大致形状并填充颜色，命名图层“身体出分别绘制青蛙不同的动作和位置，作为“跳”的动作；新建图层，命名为“身体2图层2的11-20帧绘制青蛙的不同动作和位置，作为“跃”的动作，如下图所示：（7）、同步骤（6创建一个“青蛙1”影片剪辑元件，将青蛙身体设置成另外的颜色：效果如下图所示：

（三）场景布局：将整个动画中所用到的元件拖放到场景中，与背景相搭配、映衬，并为某些元件设置滤镜，使之看起来有立体感。再在属性面板中为某些需要添加语句的元件实例命名，具体步骤如下。创建“青蛙图层”和“台阶图层”青蛙蛙1左至右相对放置命名为f1,f2,f3,f4,f5,f6将“台阶”从左至右放置，放7个，每两个之间大概100像素距离，并命名为p1,p2,p3,p4,p5,p6,p7创建“复位图层”和“重新开始图层”将按钮元“再来一次放“复位图层例名“钮和文字”元件放到“重新开始图层”实例名为“下图所示：

（四）添加Actionscript语：在库面板中双“青蛙件图层的最上面建一个的图层。在第1帧处输入以代码：Stop();在第10帧处插入关键帧入以下代码示青蛙x距离增加，并跳到第1帧开始播放：this.x+=100;this.gotoAndPlay(1);在第20帧处插入关键帧入以下代码示青蛙x距离增加，并跳到第1帧开始播放：this.x+=200;this.gotoAndPlay(1);效果如下图所示：同理在库面板中双击“青蛙1设置相同的代码：

回到主场景，并在主场景中最上面新建一个Actionscript图层第一帧处输入以下代码：success.replay.addEventListener(MouseEvent.CLICK,resetit);reset.addEventListener(MouseEvent.CLICK,resetit);functionresetit(evt:MouseEvent){init();}functioninit(){f1.mp=1;f2.mp=2;f3.mp=3;f4.mp=5;f5.mp=6;f6.mp=7;

//青蛙”与“青蛙1元件实例在场景中的坐标位置“x”}init();//面这段代码表示青蛙只能跳一格越过一个障碍跳一格且不能反向跳动，如果跳跃成功，则显示按钮与文字元件。f1.addEventListener(MouseEvent.CLICK,clickHandler1);functionclickHandler1(event:MouseEvent){}f2.addEventListener(MouseEvent.CLICK,clickHandler2);functionclickHandler2(event:MouseEvent){}f3.addEventListener(MouseEvent.CLICK,clickHandler3);functionclickHandler3(event:MouseEvent){}f4.addEventListener(MouseEvent.CLICK,clickHandler4);functionclickHandler4(event:MouseEvent){}f5.addEventListener(MouseEvent.CLICK,clickHandler5);functionclickHandler5(event:MouseEvent){

}f6.addEventListener(MouseEvent.CLICK,clickHandler6);functionclickHandler6(event:MouseEvent){}functionvarnowpos=(getChildByName("f"+i)if(nowpos+1<8&&!(getChildByName("p"+(nowpos+1))asMovieClip).getSta()){MovieClip).mp+=1;MovieClip).sta=1;(getChildByName("p"+nowpos)MovieClip).sta=0;}if(nowpos+2<8&&!(getChildByName("p"+(nowpos+2))MovieClip).getSta()){MovieClip).jumpit();MovieClip).mp+=2;MovieClip).sta=1;(getChildByName("p"+nowpos)MovieClip).sta=0;}{trace("能"}}functionhowto2(i:int){varnowpos=(getChildByName("f"+i)if(nowpos-1>0&&

!(getChildByName("p"+(nowpos-1))as

MovieClip).getSta()){asMovieClip).sta=2;(getChildByName("p"+nowpos)MovieClip).sta=0;}else&&!(getChildByName("p"+(nowpos-2))MovieClip).getSta()){MovieClip).jumpit();asMovieClip).sta=2;(getChildByName("p"+nowpos)MovieClip).sta=0;}{trace("能"}}functionif(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{reset.visible=false;}}

as

除了这上面的代码外，还需要对“青蛙”和“台阶”等元件分别编写相应的代码，与主动画时间轴的代码相对应，具体操作如下：（1）打开新建文档，新建一个Actionscript文件存为“相同方法创建另外两个文件分别命名为”和“（2）打开“frog.as文件，输入以下代码：flash.display.MovieClip;flash.events.MouseEvent;classMovieClip{functionfrog():void{}functionmoveit(){this.gotoAndPlay(1);}functionjumpit(){this.gotoAndPlay(11);}varmp:int;functiongetMp(){mp;}}}（3）、打开“frog1.as”文件，在其窗口中输入以下代：flash.display.MovieClip;

flash.events.MouseEvent;classMovieClip{functionfrog1():void{}functionmoveit(){this.gotoAndPlay(1);}functionjumpit(){this.gotoAndPlay(11);}varmp:int;functiongetMp(){mp;}}}（4）、打开“”文件，在其窗口中输入如下代码：flash.display.MovieClip;classextendsvarfunctionpos():void{}functiongetSta(){}}}

（5）、在“库”面板中用鼠标右键单击“青蛙”元件，在弹出的快捷菜单中选中“属性”命令，展开“高级”选项，再打开的“链接属性”对话框中选中“为出”复选框，在“类”文本框中输入将元件与类链接起来。如图：（6）、同理将“青蛙”元件与“frog1”类连接起来，将“台阶”元件与“pos链接起来。到此所有的设计阶段就做完了，接下来就是游戏的运行和结果分析。四、设计果分析：游戏的运行结果如下：

当点击不能跳或者跃的青蛙时会在输出面板中输出“不能”五、设计结：这次设计其实是一个比较简单的小游戏的制作，通过本次设计让我对Flashcs5.5这个软件的操作更加熟练对Flash交互式动画制作的步骤有了进一步的掌握，对As3.0的编程语言及编程方法也有了一定掌握。再游戏场景的编排上，为了使游戏看起来更加美观大方，所有的场景和布局都根据相应的主题进行制作使颜色与主题相符合让玩家在视觉上首先有所享受然后通过在游戏中的操作，体会游戏的乐趣。在编写青蛙动作的程序时，想了很久，不知道如何才能让青蛙检测前面是否有另外一只青蛙是跳还是跃其中出现多不少错误最后通过上网查资料和还有到图书馆借书都一一解决本次设计收获很大让我对的学习更加感兴趣，以后定更加努力学习flash动画制作、游戏制作，体会其中的乐趣。

基于As3.0“青跳”游的设计实六、设计标：本次设计是制作的一个测试智力的小游--“青蛙跳通过单击鼠标移动两边的青蛙左边的小青蛙右边的小青蛙位置互换中包括两个动画效果，一个是跳另一个是跃他们都是通过逐帧动画来实现要使两边的青蛙互换，就要通过Actionscript3.0语句进行控制，最终效果如下图：游戏开始界面：游戏完成界面：

七、设计案：这个动画可以按照绘制背景创建元件布局场景和添加句4个步骤来完成首先需要绘制一个荷塘月色的背景画面然后在绘制该动画中要出现的“动画角色青蛙等，并将场景中的元件、图形放置在相应的位置，最后在为对象添加动作语句，其中最重要的步骤就是添加Actionscript语句，它是实现这个游戏的关键所在，它是根据整个游戏规则来编辑的。其游戏规则是：只要前面有空位置青蛙就能跳到该位置上且一次只能跳一格或越过一个障碍跳一格，但不能反向跳动。直到左边的青蛙与右边的青蛙位置互换才算成功。中途若单击到不能跳或不能跃的青蛙或者玩到无退路的情况可单“再来一次”从新开始游戏。八、设计骤：（三）制作背景：使用Flash面板中的基本绘图工具绘制游戏中的背景，并填充多彩的颜色要应用的知识点包括动画的基础知识图与编辑图形、填充颜色以及图层的基本操作。具体步骤如下：7、新建一个文Actionscript3.0小为750*300像素，将背景颜色设置为白色。保存文件，命名为“青蛙跳fla8、在图层1中使用矩形工具在场景中画一个矩（750*150代表夜空，并设置矩形大小和颜色。9、在夜空（刚才所绘制的矩形绘制一些白色点和一个圆代表星星和月亮。10、在用矩形工具在场景中绘制矩形(750*150)代表小河设置颜色和大小。11、在小河中绘制一个白色线条作为河水绘制一些小草形状的图形，设置小草的填充颜色，并将小草复制多个，移动到河边，然后再河边绘制草堆和土坡。

12、绘制的背景图片的最终效果如下图所示：（四）创建元件:创建动画中的主要原件青蛙跳的影片剪辑元件再来一次的按钮元件、青蛙跳的台阶元件等。（3）、先将所绘制的背景图片转换为图形元件Ctrl+A选中场景中所有图形按F8将其转换为图形元件并命名为“背景（4）、创建“再来一次”的按钮元件：（3创建一个“过关”的图形元件：

（8）、创建名为“按钮与文件”的影片剪辑元件：将“再来一次”按钮和“过关”图形，以及事先导入到库中的“lihua.gif”图片，拖入场景，并设置按钮的滤镜效果中，如下图：（9）、创建“台阶”影片剪辑元件：在场景中用矩形工具绘制一个大小为“51*20”像素的矩形，边框为黑色。（10）、创建“青蛙”影片剪辑元件:创建“青蛙”元件，在图层一帧处绘制青蛙的大致形状并填充颜色，命名图层“身体出分别绘制青蛙不同的动作和位置，作为“跳”的动作；新建图层，命名为“身体2图层2的11-20帧绘制青蛙的不同动作和位置，作为“跃”的动作，如下图所示：（11）、同步骤（）创建一个“青蛙1”影片剪辑元件，将青蛙身体设置成另外的颜色：

效果如下图所示：（五）场景布局：将整个动画中所用到的元件拖放到场景中，与背景相搭配、映衬，并为某些元件设置滤镜，使之看起来有立体感。再在属性面板中为某些需要添加语句的元件实例命名，具体步骤如下。创建“青蛙图层”和“台阶图层”青蛙蛙1左至右相对放置命名为f1,f2,f3,f4,f5,f6将“台阶”从左至右放置，放7个，每两个之间大概100像素距离，并命名为p1,p2,p3,p4,p5,p6,p7创建“复位图层”和“重新开始图层”将按钮元“再来一次放“复位图层例名“钮和文字”元件放到“重新开始图层”实例名为“下图所示：

（六）添加Actionscript语：在库面板中双“青蛙件图层的最上面建一个的图层。在第1帧处输入以代码：Stop();在第10帧处插入关键帧入以下代码示青蛙x距离增加，并跳到第1帧开始播放：this.x+=100;this.gotoAndPlay(1);在第20帧处插入关键帧入以下代码示青蛙x距离增加，并跳到第1帧开始播放：this.x+=200;this.gotoAndPlay(1);效果如下图所示：同理在库面板中双击“青蛙1设置相同的代码：

回到主场景，并在主场景中最上面新建一个Actionscript图层第一帧处输入以下代码：success.replay.addEventListener(MouseEvent.CLICK,resetit);reset.addEventListener(MouseEvent.CLICK,resetit);functionresetit(evt:MouseEvent){init();}functioninit(){f1.mp=1;f2.mp=2;f3.mp=3;f4.mp=5;f5.mp=6;f6.mp=7;

//青蛙”与“青蛙1元件实例在场景中的坐标位置“x”}init();//面这段代码表示青蛙只能跳一格越过一个障碍跳一格且不能反向跳动，如果跳跃成功，则显示按钮与文字元件。f1.addEventListener(MouseEvent.CLICK,clickHandler1);functionclickHandler1(event:MouseEvent){}f2.addEventListener(MouseEvent.CLICK,clickHandler2);functionclickHandler2(event:MouseEvent){}f3.addEventListener(MouseEvent.CLICK,clickHandler3);functionclickHandler3(event:MouseEvent){}f4.addEventListener(MouseEvent.CLICK,clickHandler4);functionclickHandler4(event:MouseEvent){}f5.addEventListener(MouseEvent.CLICK,clickHandler5);functionclickHandler5(event:MouseEvent){

}f6.addEventListener(MouseEvent.CLICK,clickHandler6);functionclickHandler6(event:MouseEvent){}functionvarnowpos=(getChildByName("f"+i)if(nowpos+1<8&&!(getChildByName("p"+(nowpos+1))asMovieClip).getSta()){MovieClip).mp+=1;MovieClip).sta=1;(getChildByName("p"+nowpos)MovieClip).sta=0;}if(nowpos+2<8&&!(getChildByName("p"+(nowpos+2))MovieClip).getSta()){MovieClip).jumpit();MovieClip).mp+=2;MovieClip).sta=1;(getChildByName("p"+nowpos)MovieClip).sta=0;}{trace("能"}}functionhowto2(i:int){varnowpos=(getChildByName("f"+i)

if(nowpos-1>0&&!(getChildByName("p"+(nowpos-1))MovieClip).getSta()){asMovieClip).sta=2;(getChildByName("p"+nowpos)MovieClip).sta=0;}else&&!(getChildByName("p"+(nowpos-2))MovieClip).getSta()){MovieClip).jumpit();asMovieClip).sta=2;(getChildByName("p"+nowpos)MovieClip).sta=0;}{trace("能"}}functionif(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{reset.visible=false;}

asas

}除了这上面的代码外，还需要对“青蛙”和“台阶”等元件分别编写相应的代码，与主动画时间轴的代码相对应，具体操作如下：（4）打开新建文档，新建一个Actionscript文件存为“相同方法创建另外两个文件分别命名为”和“（5）打开“frog.as文件，输入以下代码：flash.display.MovieClip;flash.events.MouseEvent;classMovieClip{functionfrog():void{}functionmoveit(){this.gotoAndPlay(1);}fu