1-5 参考成品、练习素材.zip
(8.14 MB, 下载次数: 876)
1. 停止播放
首先让我们从最简单,最实用的一句代码学起,那就是stop()。
stop()是一个函数(方法),它可以让Flash的动画停止播放。如果不用stop()来停止Flash动画,Flash就会一直循环播放,这通常是我们不想看到的。
第1步:打开Flash文件(已经做好的素材)。
第2步:在时间轴添加新的一个图层,并命名为“AS”。
第3步:然后在AS层的最后一帧,也就是动画的结束位置,右键插入空白关键帧,然后右键选择动作。
第4步:在弹出的动作面板中输入“stop();”即可(也可以如下图一样,在stop代码上方输入一段注释来解释这段代码的含义)。
第5步:在菜单栏中“控制”选项,点开后选择“测试”(一般都会使用Ctrl+Enter快捷键)。
最后我们就可以看到SWF动画在播放到最后一帧就停止了下来,其实可以在任意帧插入这句代码,效果播放到任意帧都会停止下来。
强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。
2. 按钮、实例名称、开始播放
当我们使用stop()代码停止了时间轴,我们如何再次让时间轴播放呢?比如经常见到的是动画开始是停止的,然后需要点击一个播放按钮,才可以播放动画。
下面开始给大家介绍无处不在的“按钮”代码和play()播放代码。
首先介绍一个概念“实例名称”,什么是实例名称呢?其实就是给我们要控制的按钮或者影片剪辑起个名字,不然代码又怎么知道你想控制的是谁呢?就好像老师上课总要知道下面学生的名字,不然这课怎么上下去呢。
第1步:打开Flash文件(已经做好的素材)。
第2步:选择按钮,之后在属性面板中找到“实例名称”选项,然后填写“playBtn”(你也可以写其他名字,这个是无所谓的,但良好的代码都有规范的格式)。
注意:图形元件无法设置实例名称的。
第3步:然后在AS层的最后一帧,也就是动画的结束位置,右键选择动作(之前的stop如何写就不说了)。
第4步:在弹出的动作面板中输入如下代码:
[Actionscript3] 纯文本查看 复制代码
playBtn.addEventListener( MouseEvent.CLICK, function ( eve:MouseEvent ) : void
{
play();
});
playBtn就是我们刚才输入的实力名称,而“play();”就是播放的代码,和stop()是对应的,这个应该很好理解吧。其他代码不用理解它们,暂时会复制粘贴就好。
聪明的你可能会发现,其实“;”这个分号好像可以不输入,但其实就像写文章可以不写句号一样,但是良好的习惯肯定是需要写句号的。
最后我们发布测试就可以看到效果了。
强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。
3. 跳转并播放、跳转并停止
有时候Flash第一帧我们做了一个目录,有很多按钮,每个按钮对应一段动画效果。我们想要一开始停止在目录帧,然后点击按钮跳转到对应的动画,之后在点击按钮返回目录。
这个时候就需要用到gotoAndPlay()跳转并播放和gotoAndStop()跳转并停止。
第1步:打开Flash文件(已经做好的素材)。
第2步:在需要停止的位置都写上stop()代码(提示一下,有4个位置)。
第3步:给四个按钮分别设置实例名称menuBtnA(动画A)、menuBtnB(动画B)、menuBtnC(动画C)、returnBtn(返回目录按钮)。
第4步:在第一帧右键选择动作,在弹出的动作面板中输入如下代码:
[Actionscript3] 纯文本查看 复制代码
menuBtnA.addEventListener( MouseEvent.CLICK, function ( eve:MouseEvent ) : void
{
gotoAndPlay( 2 );
});
menuBtnB.addEventListener( MouseEvent.CLICK, function ( eve:MouseEvent ) : void
{
gotoAndPlay( 30 );
});
menuBtnC.addEventListener( MouseEvent.CLICK, function ( eve:MouseEvent ) : void
{
gotoAndPlay( 60 );
});
returnBtn.addEventListener( MouseEvent.CLICK, function ( eve:MouseEvent ) : void
{
gotoAndStop( 1 );
});
你也可以如下图一样,写上一些注释,方便自己理解这些代码。
最后我们发布测试就可以看到效果了。
强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。
4. 标签和跳转
既然我们会了gotoAndPlay()和gotoAndStop(),但是经常做动画的朋友会发现,如果要添加或者删除动画,或者做一些其他改变,关键帧的位置常常是变动的,不是固定的。
那么我们gotoAndPlay()和gotoAndStop()就会遇到一个麻烦,总是在修改了关键帧位置后,所以的跳转的代码需要重新写帧数,不然就会错乱。
有什么解决办法呢?有的这就是标签的由来了。
每一个关键帧选中之后在属性面板都有帧标签(类似元件的实例名称,如下图),写上名称之后的关键帧我们一般称之为“标签”。
我们可以gotoAndPlay()和gotoAndStop()的括号中不只是写帧数,还可以写标签名称,这样我们改动时间轴的时候,只需要将标签也一起移动,就会正确的跳转了。
小提示:一般高手都是写标签进行跳转的,很少有写帧数,除非帧很固定。
我们试着给上一个练习换上标签的写法吧!
第1步:打开Flash文件(之前制作的文件)。
第2步:在AS图层下面新建一个名为“label”的图层,然后在第2帧、第30帧、第60帧分别插入关键帧,然后选中关键帧写上标签名称A、B、C,如下图。
第3步:在第一帧,将原来的gotoAndPlay()的帧数分别改为"A"、"B"、"C":
最后我们发布测试就可以看到效果了。
强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。
5. 上下翻页
Flash也可以做PPT演示文档一样的翻页功能,最简单的想想是什么呢?对的,就是每一帧都是一页,然后逐帧翻页。
那么完全可以通过之前学习的代码去完成对吧,但是很麻烦。
这个时候我们Flash又提供给我们了一个新的功能,prevFrame()跳转到上一帧停止和nextFrame()跳转下一帧停止。
下面开始我们的练习吧!
第1步:打开Flash文件(已经做好的素材)。
第2步:给两个按钮分别设置实例名称为“prevBtn”和“nextBtn”。
第3步:给AS图层第一帧输入如下代码:
[Actionscript3] 纯文本查看 复制代码
stop();
prevBtn.addEventListener( MouseEvent.CLICK, prevBtnMouse );
function prevBtnMouse ( eve:MouseEvent ) : void
{
prevFrame();
}
nextBtn.addEventListener( MouseEvent.CLICK, nextBtnMouse );
function nextBtnMouse ( eve:MouseEvent ) : void
{
nextFrame();
}
你如果自己点会发现,好像和原来的按钮代码稍有不同,从“function……}”这部分被单独提出来,并在function后面加上了一个名字(注意有的空格是必须的格式,所以改动时候一定要注意格式)。
在原来提取出来的地方又把这个名字给加上了,这是为什么呢?
其实现在写的是一个普通的函数,有名字的函数,之前的函数是没有名字的(称之为匿名函数),但匿名函数写起来简单一些。
那为什么不继续使用匿名函数呢?因为匿名函数在多次代码执行后,会多次执行代码,造成预料不到的问题,也就是BUG。
关于这点多测试几次,反复对比就会发现差异了。当你按下一页按钮,然后按上一页按钮,在反复几次就发现问题了。
最后我们发布测试就可以看到效果了。
强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。
这里强调一下,一定要自己多试试,反复对比一下匿名函数和普通函数的区别,这样后续的教程你才会跟得上学习。