FLASH交互动画设计.docx
《FLASH交互动画设计.docx》由会员分享,可在线阅读,更多相关《FLASH交互动画设计.docx(12页珍藏版)》请在冰豆网上搜索。
FLASH交互动画设计
FLASH交互动画设计
一、总体设计
1.游戏总体概况
本实验为FLASH交互动画之——卡通游戏“接宝石”。
移动小盆接上面落下来的物体,落下的不同物体代表其特定的分值。
加分暂无上限,减分暂无下限,时间限制为20秒。
2.游戏界面及流程
【图1】游戏初始界面
【图1】为游戏初始界面,红宝石、蓝宝石、炸弹、钻石分别为排成一横线的旋转体。
若按[帮助],则出现【图2】游戏规则界面。
【图2】游戏规则界面
【图2】表明接到的物体所代表的分值:
炸弹(-6分)、蓝宝石(+2分)、红宝石(+3分)、钻石(+8分)。
若在【图1】游戏初始界面按[开始]则进入【图3】游戏界面。
【图3】游戏界面
初始状态分数为0,剩余时间为20秒,游戏开始后,移动小盆接上面落下的物体,炸弹(-6分)、蓝宝石(+2分)、红宝石(+3分)、钻石(+8分)。
当剩余时间显示为0时,游戏结束,分数栏显示不再变化,界面自动转到如下【图4】选择界面。
【图4】选择界面
若按[继续],则进入【图3】游戏界面,开始新一轮的游戏;若按[退出],则退到【图1】游戏初始界面。
二、详细设计
1.创建新文档
新建一个AvctionScript2.0空白文档,在其属性栏设置文档大小为600像素╳400像素。
2.元件的准备
(1)创建影片剪辑
创建名为“计分器”的影片剪辑元件
创建两个图层,自上而下分别命名为“action”和“文本”。
“文本”图层上的操作:
输入静态文字“分数”,在“文本”图层第1帧拖曳出一个文本框,将其【属性】中的【文本类型】设置为“动态文本”,【变量】设置为“txt”,在该图层的第2帧处插入帧。
得到结果如下图:
“action”图层上的操作:
在该层第1帧,输入动作语句:
txt=_root.score;
创建名为“计时器”的影片剪辑元件
创建两个图层,自上而下分别命名为“Action”和“文本”。
“文本”图层上的操作:
输入静态文字“剩余时间”,在“文本”图层第1帧拖曳出一个文本框,将其【属性】中的【文本类型】设置为“动态文本”,【变量】设置为“txt”,在该图层的第2帧处插入帧。
得到结果如下图:
并将“文本”层延长至第3帧。
“Action”图层上的操作:
分别在1,2,3帧上插入空白关键帧,然后在Action的第1~3帧分别输入代码:
第1帧代码:
now=newDate();
startTime=now.getTime();
hasTime=20;
txt=hasTime;b
第2帧代码:
now=newDate();
tempTime=now.getTime();
txt=hasTime-Math.round(((tempTime-startTime)/1000));
if(txt==0){
_root.gotoAndStop("end");
this.stop();
}
第3帧代码:
gotoAndplay(_currentframe-1);
if(_currentframe==0)
gotoAndplay
(2);
创建名为“所有下落物”的影片剪辑
a.创建图形元件“bomb”、“blue”、“red”、“diamond”,从左到右分别如下所示:
b.创建名为“炸弹”的影片剪辑,在其编辑状态下,将图形元件“bomb”从【库】中拖至其时间轴的第1帧,在第1帧创建补间动画。
第18帧插入关键帧,然后在第1~17帧之间单击任意一帧,在其【属性】面板,设置【旋转】为逆时针/顺时针,圈数为1圈。
在第18帧添加动作代码“gotoAndplay;”。
用相同方法制作名为“blue”、“red”、“diamond”三个影片剪辑。
将这四个影片剪辑设置为不同的时间轴长度。
c.创建名为“所有下落物”的影片剪辑,在其编辑状态下制作逐帧动画,第1~4帧分别为“炸弹”、“蓝宝石”、“红宝石”、“钻石”的实例,如下所示:
创建名为“下落”的影片剪辑
设置两个图层,分别命名为“Actions”、“下落物”。
“下落物”图层的操作:
将影片剪辑“所有下落物”拖曳至其“下落物”图层第1帧的舞台上,并在该图层第3帧插入帧。
选中“所有下落物”对象,在【属性】-【实例名称】命名为“allthings”。
“Actions”图层的操作:
在该图层的前3帧,插入空白关键帧,分别输入以下代码:
第1帧代码:
varplusScore;//声明变量plusScore
k=Math.random();//k为0~1之间的随机数
if(k<0.5){//如果随机数小于0.5
allthings.gotoAndStop
(1);//设置的角色播放第1帧(炸弹)
plusScore=-6;//炸弹分数设为-6
}elseif(k<0.7){//如果随机数在0.5~0.7之间
allthings.gotoAndStop
(2);//设置的角色播放第2帧(蓝宝石)
plusScore=2;//蓝宝石分数设为2
}elseif(k<0.9){//如果随机数在0.7~0.9之间
allthings.gotoAndStop(3);//设置的角色播放第3帧(红宝石)
plusScore=3;//蓝宝石分数设为3
}else{//如果随机数大于0.9
allthings.gotoAndStop(4);//设置的角色播放第4帧(钻石)
plusScore=8;//钻石分数设为8
}
this._x=random(500)+50;//随机决定对象出现的x轴坐标
this._y=-40;//y坐标均为-40
speed=5+random(30);
第2帧代码:
this._y+=speed;//对象y的坐标布顿增加,增量即速度
if(this._y>400){//如果y坐标大于400,则表示已经跑出舞台
this.removeMovieClip();//删除该影片剪辑
}elseif(this._y<=350&&this._y+speed>=350){//如果y小于350且下一次大于350
disX=Math.abs(this._x-_root.pen._x);//计算两个对象之间的距离
if(disX<60){//如果距离小于60,表明接到了对象
_root.score+=plusScore;//总分加上接到的对象自身的分数
this.removeMovieClip();//然后删掉该对象
}
}
第3帧代码:
gotoAndPlay(_currentframe-1);
对名为“下落”的影片剪辑执行【链接】命令,在【链接属性】输入标识符“wuti”.
创建名分别为“接宝石”、“盆”的影片剪辑
在“接宝石”剪辑中设置渐变文字“接宝石”;在“接宝石”剪辑中绘制盆图形。
(2)创建按钮
分别创建名为“开始”、“帮助”、“继续”、“退出”、“返回”的按钮。
以“开始”按钮为例,在“弹起”帧插入关键帧,绘制按钮图形,在“点击”帧上插入关键帧。
3.主场景的制作
在主时间轴上设置5个图层,分别命名为Actions、计时计分、盆、buttons和bg。
时间轴第1帧上的操作:
a.“bg”层:
绘制渐变色背景,将“钻石”、“炸弹”、“接宝石”影片剪辑到舞台上的合适位置;
b.“buttons”层:
设置两个按钮“开始”、“帮助”,并分别添加动作代码:
【开始】按钮动作代码:
on(release){
gotoAndplay
(2);
}
【帮助】按钮动作代码:
on(release){
gotoAndstop(6);
}
得到效果如下:
时间轴第2帧上的操作:
a.“bg”层:
保持渐变背景,去掉其余对象,且延续至第5帧;
b.“盆”层:
添加“盆”影片剪辑,实例名称命名为“pen”;
c.“计时计分”层:
添加“计分器”、“计时器”两个元件。
时间轴第3,4帧上的操作:
第3帧和第4帧在舞台对象上均与第2帧相同。
时间轴第5帧上的操作:
“buttons”层:
添加两个按钮“继续”、“退出”,并分别添加动作代码:
【继续】按钮动作代码:
on(release){
gotoAndplay
(2);
}
【退出】按钮动作代码:
on(release){
gotoAndplay
(1);
}
时间轴第6帧上的操作:
a.“bg”层:
添加“炸弹”、“蓝宝石”、“红宝石”和“钻石”4个影片剪辑和一些文字;b.“buttons”层:
制作“返回”按钮。
添加【返回】按钮动作代码:
on(release){
gotoAndplay
(1);
}
Actions层上各帧操作:
第1~5帧分别插入空白关键帧,然后为第1~4帧分别添加代码:
第1帧代码:
stop();
第2帧代码:
startDrag("pen",true,50,350,550,350);
mcDepth=0;
score=0;
第3帧代码:
if(Math.random()<0.2){
_root.attachMovie("wuti","s"+mcDepth,mcDepth);
mcDepth++;
}
第4帧代码:
gotoAndplay(_currentframe-1);
选中Actions图层的第5帧,在属性栏添加帧标签“end”。
4.测试影片
三、开放实验小结
一直觉得FLASH设计是一件高难度的工作,对于结构完整故事情节丰富以及功能完善的FLASH来说,工作复杂程度难以想象。
如今,通过对flash简单交互动画的制作,使我对FLASH制作有了新的认识。
在FLASH小游戏的制作过程中,我对基本工具和功能有了深刻的了解,许多词,如“关键帧”、“逐帧动画”、“遮罩动画”等进行了一定的实践。
经过这样一个简单小游戏的制作,我发现小小的实践能启示我一步一步学到应该掌握的基础知识。
对实例的制作,我学会了整理简单项目的制作逻辑。
在这里编码语言的理解非常重要,此时我看到C语言等的学习体现出了一定优势。
遇到错误时,根据所学的语言知识,我能够基本看懂语句的意思,作出一定的修改,尝试运行。
制作过程中遇到了一些困难,在老师的帮助下顺利解决了。
photoshop的协作使用也非常重要,它有助于提高画面的视觉效果。
要将自己的思想演绎成可视的动作画面,需要进一步掌握各个概念并认识到其存在的强大功能,结合扎实的编程知识来创造条件,有了这些,才能在原有的知识层面上作出思维的延伸。