动画实例.docx
- 文档编号:8558759
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:9
- 大小:185.30KB
动画实例.docx
《动画实例.docx》由会员分享,可在线阅读,更多相关《动画实例.docx(9页珍藏版)》请在冰豆网上搜索。
动画实例
一、创建文档
1、打开Flash软件,新建一个flash文档。
保存文件名“彩球环绕”。
2、文档属性:
设置背景颜色:
黑色,其他默认。
3、网上搜索一幅火星图片和一幅星空的动画图片(gif),执行文件-导入-导入到库,火星图片和星空的动画图片(gif)导入到库面板。
二、制作图形元件
执行插入-新建元件,在弹出的对话框中设置:
名称:
兰球、类型:
图形元件。
在图形元件的编辑状态,点击图层1的第一帧,选择工具栏中的椭圆工具,关闭笔触颜色,打开混色器面板,填充样式选择放射状,左边色码:
#0099FF,右边色码:
#000099,Alpha:
100%,在场景中绘制一个大小20×20的正园,全居中。
三、制作影片剪辑元件和按钮元件
1、执行插入-新建元件,在弹出的对话框中设置:
名称:
兰环球、类型:
影片剪辑。
在影片剪辑的编辑区,点击图层1的第1帧,选择工具栏中的椭圆工具,关闭填充颜色,笔触颜色选择#FF9900,在场景中绘制一个笔触高度为:
2、大小为300×70的椭圆,全居中于场景,在第50帧插入帧。
添加图层2,点击图层2的第1帧,从库中把兰球图形元件拖入场景,选中图层2,添加引导层,把图层1的第1帧复制粘贴到引导层的第1帧。
利用橡皮擦工具,在椭圆的左上方擦拭个缺口。
点击图层2第1帧上的兰球,把兰球放置在缺口的左端,第50帧插入关键帧,把兰球放到缺口的右端,回到图层2的第1帧,做动画补间。
如图所示:
选中场景中的兰球,鼠标右键,选择“复制”,执行插入-新建元件,名称:
兰按钮、类型:
按钮。
在按钮的编辑状态,点击弹起帧,选择编辑菜单下-粘贴到中心位置。
如图:
2、选中库面板中的兰环球影片剪辑,鼠标右键选择“直接复制”,名称改为:
黄环球,类型:
影片剪辑。
双击进入黄环球影片剪辑的编辑区,分别点击图层2的第1帧和第50帧(别忘了要改两处),选中场景中的兰球,打开属性面板,把兰球颜色改为如图所示:
选中场景中的黄球,鼠标右键,选择“复制”,执行插入-新建元件,名称:
黄按钮、类型:
按钮。
在按钮的编辑状态,点击弹起帧,选择编辑菜单下-粘贴到中心位置。
3、选中库面板中兰环球影片剪辑,运用同样的方法,制作“红环球”、“绿环球”影片剪辑和“红按钮”、“绿按钮”。
如图所示:
、执行插入-新建元件,在弹出的对话框中设置:
名称:
火星球、类型:
影片剪辑。
在影片剪辑的编辑状态,点击图层1的第1帧,从库中把图1拖入场景,居中于场景。
点击修改菜单下分离,图片打散。
选择工具栏中的椭圆工具,关闭填充颜色,笔触颜色选择随意,在场景中绘制一个笔触高度为:
极细,按着AIT键从场景中心画个圆,大小与图中圆球相似,用选择工具选择圆球外部分按Delete删除(包括画的圆圈)只留下圆球部分,设置大小:
35×35,转换成火星图形元件,全居中于场景。
点击第10帧、第20帧、第25帧插入关键帧,选中第1帧,打开变形面板,把火图形元件改成最小,第10帧把火球大小改为:
25×25,第25帧Alpha设置为:
0。
选中图层1做动画补间。
第1帧、第10帧做随时针旋转1次。
5、新建元件,名称:
隐形按钮。
类型:
按钮。
在按钮的编辑状态,点击“点击”帧插入空白关键帧,在场景中绘制一个颜色随意、大小40×40的矩形,全居中于场景。
四、回到场景
鼠标双击“图层1”把“图层1”改名为“背景”。
选中第1帧,打开库面板,把动画图片拖入数个到场景中,放满场景。
选中背景
图层,添加5个图层,自下而上改名为:
彩球、火星球、按钮、文字、AS。
选择彩球图层的第1帧,从库中把兰环球、黄环球、红环球、绿环球影片剪辑拖入场景,居中于场景并打开变形面板,使黄环球、红环球、绿环球旋转90度、135度和-135度。
打开属性面板,分别为兰、黄、红、绿环球影片剪辑起实例名分别:
lan_mc、huang_mc、
hong_mc、lv_mc。
点击火星球图层的第1帧,从库中把火球影片剪辑拖入到场景,居中于场景。
打开属性面板,起实例名:
huo_mc。
点击按钮图层的第1帧,从库中把四个彩球按钮和隐形按钮拖入到场景,分别放置场景下面和中心位置。
打开动作面板,分别给各彩球和隐形按钮输入语句:
兰按钮:
on(rollOver){
lan_mc.play();
}
on(release){lan_mc.stop();
}
黄按钮:
on(rollOver){
huang_mc.play();
}
on(release){
huang_mc.stop();
}
红按钮:
on(rollOver){
hong_mc.play();
}
on(release){
hong_mc.stop();
}
绿按钮:
on(rollOver){
lv_mc.play();
}
on(release){
lv_mc.stop();
}
隐形按钮:
on(rollOver){
lan_mc.play();
hong_mc.play();
huang_mc.play();
lv_mc.play();
huo_mc.play();
}
on(release){
lan_mc.stop();
hong_mc.stop();
huang_mc.stop();
lv_mc.stop();
huo_mc.stop();
}
点击文字图层的第1帧,选择文本工具,输入文字:
“滑过或按下各彩球,控制彩球的播放和停止”和“滑过或按下中心火球,控制全部影片剪辑”,放置场景左边位置。
点击AS图层的第1帧,打开动作面板,输入语句:
lan_mc.stop();
hong_mc.stop();
huang_mc.stop();
lv_mc.stop();
FlashAS入门教程第七课:
影片剪辑第三节控制时间轴
(1)
第三节控制时间轴
MC实际上相当于一个独立的swf文件,它具有它自已的时间轴。
反过来说,我们也可以把一个swf文件看成一个MC。
所以本节所介绍的控制时间轴的方法同样适用于主时间轴。
在做好一个动画后,如果没有添加任何AS代码,那么动画就会按帧开始播放。
本节的题目叫,控制时间轴就是由用户来控制动画的播放。
为了实现这个目的,首先应叫动画不要自动播放,所以第一个语句:
stop():
时间轴停止播放。
播入停止了,那么肯定就要一个让动画播放的命令:
Play()时间轴开始播放
下面来做个练习:
新建一个flash文件,在舞台左边上画一个园,在100帧插入关键帧,将园拖到舞台右边。
创建补间动画。
接下来新建两个按钮,标签分别为:
播放,停止。
新建一层,将两按钮拖入舞台,打开属性面板,将播放按钮实例命名为:
ply_btn,停止按钮实例命名为stop_btn.
新插入一层,命名为:
action.打开动作面板,输入:
stop();这样运行时,时间轴将停在第一帧,不播放。
接下来是点击播放按钮的动作:
ply_btn.onRelease=function(){
play();
}
点击停止按钮上的动作:
stop_btn.onRelease=function(){
stop();
}
测试影片,园停在那儿不动,点击播放,园开始运动,点击停止,园停止运动。
这样我们就实现了控制动画播放的功能。
上面是控制主时间轴的播放,那么要控制MC的播放怎做呢?
现在新建一个mc,按上面的方法做一个补间动画,在MC的第一帧输入:
stop();将MC拖入舞台,在属性面板中实例命名为:
mymc_mc.
在主时间轴的第一帧,输入:
ply_btn.onRelease=function(){
mymc_mc.play();
}
stop_btn.onRelease=function(){
mymc_mc.stop();
}
测试影片,那么我们就已能控制MC的播放了。
接下来,进行更进一步的控制。
gotoAndPlay(n):
将时间轴转到n所在的帧处,开始始播放。
比如:
gotoAndPlay(5);从第5帧开始播放。
gotoAndStop(n):
将时间轴转到n所在的帧处并停止。
比如:
gotoAndStop(5);跳到第5帧并停止。
nextFrame()方法:
将时间轴移到下一帧并停止。
比如:
MC的控制:
mymc_mc.nextFrame();
主时间轴的控制:
this.nextFrame();
prevFrame()方法:
将时间轴移到上一帧并停止。
停止与暂停按钮:
stop()命令使时间轴停止播放,但它是停在当前帧处,很显然,这是暂停的效果,当我们再次点击播放按钮时,时间轴从当前开始播放。
所以在暂停按钮上的命令是:
stop();停止的效果是回到第1帧,所以在停止按钮上的命令是:
gotoAndStop
(1);
控制影片的播放,应该有快进快退的功能才算完整,要快进快退,那就应该要知道现在时间轴在什么位置,然后,在当前的位置加上或减去一个帧数,比如5帧或10帧来实现。
_currentframe属性:
播放头当前在时间轴中的位置。
有了这个属性就可实现快进快退的效果了。
练习:
在上面的练习中增加两个按钮,标签分别为:
快进,快退,将其拖入舞台,实例名称分别为:
kj_btn,kt_btn.在actin图层的帧动作面板中,添加如下代码:
kj_btn.onRelease=function(){
gotoAndPlay(_currentframe+5);
}
kt_btn.onRelease=function(){
gotoAndPlay(_currentframe-5);
}
测试影片,现在点快进,则播放头则向前5帧,开始播放。
点快退播放头则向后退5帧开始播放。
可能我们还想整得更完美点,在播放时能够有一个播放进度条才好。
分析一下,当前帧现在已有了,如果能有一个动画的总帧数,不就行了,是的有总帧数这个属性的。
_totalframes属性:
MC的总的帧数。
用当前帧去除以总的帧数,这不就是MC的播放进度吗。
然后用一个矩形条来显示进度,采用矩形条有_xscal属性等于当前帧与总帧数的比例来实现。
播放进度条的制作:
练习:
接到上面的,插入新的MC,画一细的矩形长条,垂直居中,左对齐。
回到主场景,将MC拖入放好,取实例名为bft_mc.打开action层帧动作面板,找到
ply_btn.onRelease=function(){
play();
}
在play()下面插入:
onEnterFrame=function(){
if(_currentframe<_totalframes){
bl=Math.round(_currentframe/_totalframes*100);
bft_mc._xscale=bl;
}else{
deleteonEnterFrame//删除每一帧的调用
}
}
测试影片,点击播放按钮时,动画开始播放,同时有一进度条随同展开。
加载进度条的制作:
一些稍大一点的动画,打开比较慢,尤其是在网络上更是如此。
有人建议,你的动画如果超过100k,要把它放到网络上,最好做一个加载进度条。
加载进度条的制作与播放进度条的制作原理差不多,只是获取的是加载的字节数而不是播放的帧数。
先看看MC的两个方法:
getBytesLoaded()方法:
返回已加载的字节数。
getBytesTotal()方法:
返回动画的总的字节数。
注意与上面的_totalframes属性相区别,_totalframes属性是动画的总的帧数,getBytesTotal()方法:
返回的是动画的总的字节数。
了解了这两个方法后,制作就与播放进度条一样了。
加载进度条常常会放到新的场景中,接上面的练习,点击窗口>其它面板>场景打开场景面板,点右下角的加号,新增一个场景,并将这个场景拖到原场景1之上。
回到场景2,新建一静态文本,内容为:
“正在加载请稍候……”,在它下面放一个动态文本,实例名称为:
load_txt.新建一影片剪辑元件,画一个细长的矩形,左对齐。
回到场景2,将元件拖入放到动态文本下面。
实例名称为:
load_mc.新插入一层,打开帧动作面板,输入:
load_mc._xscale=0;
onEnterFrame=function(){
if(getBytesLoaded() loadjd=Math.round(getBytesLoaded()/getBytesTotal()*100); load_mc._xscale=loadjd; load_txt.text=loadjd+"%"; }else{ deleteonEnterFrame; } } 点击舞台上的场景按钮,点场景1,这回到了场景1,在action的第100帧(最后一帧)插入关键帧,打开动作面板,输入: gotoAndStop (1); 为什么要加这句? 因为在场景1的前面,我们放了一个加载条的场景,当场景1播放完后,播放头将回到加载场景,而这时动画已加载,是不需要再播放加载场景的。 所以用这一句将播放头回到场景1的第一帧,从而避开了加载场景。 测试影片,结果直接进入了场景1,没看到加载进度条。 为什么呢? 这是因为在本地影片加载速度太快,没法显示加载进度。 没关系,不要关闭flashplayer,点视图>下载设置,因为我们的动画太简单,所以选最上面的速度最慢的那个14.4k.这样这可模似在网上加载动画。 点视图>模似下载,怎么样看到了加载进度条了吧。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动画 实例