TKCB 发表于 2018-1-28 14:03:26

【AS3新手教程】——第3章 献给Flash动画师的常用AS3代码

本帖最后由 TKCB 于 2018-11-21 15:17 编辑

第3章 献给Flash动画师的常用AS3代码
有很多做Flash动画的朋友,经常需要一些简单的代码功能,但是自己又不会代码。那么本章就是为你们写的,只要认真学习,相信你能轻松学会这些功能。本章将介绍一下代码:1. 停止播放2. 按钮、实例名称、开始播放3. 跳转并播放、跳转并停止4. 标签和跳转5. 上下翻页6. 全屏、退出全屏7. 打开网页链接8. 关闭Flash Player9. 打包EXE文件10. 日期、时间当然如果你学会了这些功能,仍然觉得不够,觉得AS3神奇无比,那么不妨继续我们的AS3奇妙之旅吧!

一、常用的时间轴控制Flash软件是以时间轴为核心的,一秒通常为24-25帧。一般做一个Flash短片都需要数千或者上万帧数。SWF文件打开之后,都是从第一帧播放到最后一帧,然后继续循环到第一帧播放(无限循环)。但有时候我们需要在某些帧数停止播放、或者跳转播放、或者停止,那么这一部分就教会如何使用AS3代码控制时间轴。
下载:参考成品和练习素材

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步:在弹出的动作面板中输入如下代码: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步:在第一帧右键选择动作,在弹出的动作面板中输入如下代码: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图层第一帧输入如下代码: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。关于这点多测试几次,反复对比就会发现差异了。当你按下一页按钮,然后按上一页按钮,在反复几次就发现问题了。 最后我们发布测试就可以看到效果了。 强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。这里强调一下,一定要自己多试试,反复对比一下匿名函数和普通函数的区别,这样后续的教程你才会跟得上学习。

TKCB 发表于 2018-1-28 14:03:56

本帖最后由 TKCB 于 2018-11-21 15:17 编辑

二、常用的几个功能介绍完时间轴,再来介绍一些常用的功能吧!都是很实用的一些功能,相信大家会喜欢。
下载:参考成品和练习素材


6. 全屏、退出全屏很多时候我们做SWF进行一些演示,需要SWF直接是全屏状态的,这样效果好很多,就像PPT演示一样。那么如何制作呢?其实也非常简单,就是按钮代码+全屏或退出全屏的代码。下面这句是全屏代码(代码含义,将舞台的显示状态设置为全屏可输入状态):stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;下面这句是退出全屏代码(代码含义,将舞台的显示状态设置为不全屏状态):stage.displayState = StageDisplayState.NORMAL;下面开始教程吧!第1步:打开Flash文件(已经做好的素材)。第2步:给两个按钮分别设置实例名称为“fullScreenBtn”和“normalBtn”。第3步:给AS图层第一帧输入如下代码:fullScreenBtn.addEventListener( MouseEvent.CLICK, fullScreenBtnMouse );
function fullScreenBtnMouse ( eve:MouseEvent ) : void
{
      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
normalBtn.addEventListener( MouseEvent.CLICK, normalBtnMouse );
function normalBtnMouse ( eve:MouseEvent ) : void
{
      stage.displayState = StageDisplayState.NORMAL;
}其实实例名称“normalBtn”和函数名称“normalBtnMouse”都是可以自己随便写的,但建议为英文名称,并第一个单词小写,第二个单词首字母大写,这样方便阅读。最后我们发布测试就可以看到效果了。强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。注意:在Flash软件中全屏按钮是没有效果的,需要在外面打开SWF文件即可看到效果。

7. 打开网页链接点击按钮或者点击文字,打开一个网页是经常用到的功能,很多朋友会做一个按钮点击后去自己的个人网站(主页)或者淘宝店铺等等。那么如何制作呢?其实也很简单,Flash给我们提供了navigateToURL()函数,具体用法输入,“http……cc/”就是我们需要设置的网页地址了:navigateToURL( new URLRequest( "http://www.tkcb.cc/" ), "_blank" );开始我们的教程吧!第1步:打开Flash文件(已经做好的素材)。第2步:给两个按钮分别设置实例名称为“navigateBtn1”和“navigateBtn2”。第3步:给AS图层第一帧输入如下代码:navigateBtn1.addEventListener( MouseEvent.CLICK, fullScreenBtnMouse );
function fullScreenBtnMouse ( eve:MouseEvent ) : void
{
      navigateToURL( new URLRequest( "http://www.tkcb.cc/" ), "_blank" );
}

navigateBtn2.addEventListener( MouseEvent.CLICK, normalBtnMouse );
function normalBtnMouse ( eve:MouseEvent ) : void
{
      navigateToURL( new URLRequest( "http://www.11ria.com/" ), "_blank" );
}注意:网页地址一定要是http全称的,而不是www.tkcb.cc这种。如下图,还是那句话,注释可以自己随便写,作用就是帮助自己理解代码的意思。第4步:再说一下文本框如何加网页链接吧!也超级简单,就是选中文本框后,在属性面板中找到选项,然后将网址输入到链接处即可。目标这个选项有四个值,这个在网页上的SWF才会有不一样的效果,如果该兴趣可以试试。最后我们发布测试就可以看到效果了。强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。注意:如果你的SWF是放在网上的,那就要注意下发布设置“只访问网络”这个功能,以及第二个参数的四个不同的值的效果变化了。

8. 关闭Flash Player很多时候,项目制作中会想加入一个按钮,用于关闭正在打开的SWF以及Flash Player。其实仍然是一句非常简单的代码。fscommand( "quit" );fscommand()函数就是用来和Flash Player进行通信,说简单点就是用来告诉Flash Player你干点什么吧!而传递的"quit"就是让Flash Player关闭的意思。其实说专业点,不仅是和Flash Player通信,还和承载Flash Player 的程序进行通信,但作为新手也暂时不需要了解太多。第1步:打开Flash文件(已经做好的素材)。第2步:给按钮设置实例名称为“closeBtn”。第3步:给AS图层第一帧输入如下代码:closeBtn.addEventListener( MouseEvent.CLICK, closeBtnMouse );
function closeBtnMouse ( eve:MouseEvent ) : void
{
      fscommand( "quit" );
}最后我们发布测试就可以看到效果了。强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。注意:在Flash软件中关闭按钮无效,必须在外面打开SWF。因为软件中Flash Player做了一些功能限制。

9. 打包EXE文件很多时候我们的客户可能电脑没有Flash Player播放器,但是他有不想安装或者不会安装。那么这个时候就需要把我们制作的SWF和Flash Player打包成一个EXE程序,这样就完美解决了客户没有Flash Player播放器这个问题。打包EXE有很多方法,最基本的莫过于使用Flash软件提供的发布EXE的功能了(不需要用到任何代码)。下面我来介绍一下如何打包EXE。第1步:打开Flash文件(已经做好的素材)。第2步:点开“文件”菜单,选择“发布设置”选项。第3步:在发布设置面板中找到Win放映文件并勾选,(其实可以发布的格式有很多,也有Mac苹果系统的放映文件),之后点击下方的发布按钮。最后我们在文件夹中找到对应的EXE,点击就可以查看效果了。强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。如果有兴趣,可以去百度雅致打包工具,这个是业界比较常用的打包工具,功能挺多的(虽然我不喜欢用,因为我一般都用AIR程序)。

10. 日期、时间经常看到有朋友问,如何用一个动态文本框,显示当前日期(年月日,时分秒)。那么首先要了解动态文本框是什么?其实动态文本框和普通文本框(静态文本框)几乎一样的,只是主要的多了一个实例名称,这样程序就可以通过这个实例名称控制这个文本框了。对于实例名称,经过上面那么多次的练习,大家应该很熟悉了吧。我们可以控制文本框非常多的东西,文本内容、大小、透明度、颜色、粗细等等属性。但我们这次只告诉大家如何设置文本内容,也就是替换动态文本框中的文字。在说一下如何获取日期吧!在Flash AS3中,给我们提供了一个很好的代码Date(类对象),用于获取时间,暂时大家不需要理解什么是类,什么是对象,我只说下如何使用吧!这里会用到变量,但是大家现在不需要知道变量是什么,大概会用即可。第1步:打开Flash文件(已经做好的素材)。第2步:选中动态文本框,设置文本框的实例名称为“tf”,设置消除锯齿属性为“使用设备字体”(也可以不使用设备字体,但就需要嵌入字体了)。第3步:在AS图层输入如下代码:addEventListener( Event.ENTER_FRAME, enterFrameFun );
function enterFrameFun ( eve:Event ) : void
{
      var date : Date = new Date();
      var year : String = String( date.fullYear );
      var month : String = String( date.month + 1 );
      var day : String = String( date.date );
      var hours : String = String( date.hours < 10 ? "0" + date.hours : date.hours );
      var minutes : String = String( date.minutes < 10 ? "0" + date.minutes : date.minutes );
      var seconds : String = String( date.seconds < 10 ? "0" + date.seconds : date.seconds );
      tf.text = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes + ":" + seconds;
}如果你英文不错,其实大致可以理解代码的含义,就是要记住一些代码格式和使用方法。最后我们发布测试就可以看到效果了。强烈建议反复练习几次,并试试举一反三,这样你会很快掌握并理解代码的。试着改动代码的一些文字,看看效果吧!告诉你们一个秘密,使用Ctrl+Z可以撤销操作,所以如果改错了,多按几次撤销快捷键。


三、总结本章学习了很多简单的代码,都有下面这些,大家不妨在回顾一下吧!1. 停止播放2. 按钮、实例名称、开始播放3. 跳转并播放、跳转并停止4. 标签和跳转5. 上下翻页6. 全屏、退出全屏7. 打开网页链接8. 关闭Flash Player9. 打包EXE文件10. 日期、时间本章就到此为止吧!希望大家多多练习,并组合使用,等你熟悉了,就开始下一章节的学习吧!

TKCB 发表于 2018-1-28 14:04:20

1. 大家可以如果觉得哪里写的不够好(或者一些建议),可以随时提出,帖子的方便之处,就是可以随时更新!!!!
2. 如果有大家有什么讨论的,或者不懂得,可以留言进行交流。


返回总贴:【AS3新手教程】——Animate & Flash Action Script 3.0 编程教程

twolaps 发表于 2018-2-2 10:47:38

感谢分享,紫薯布丁

claire_zheng 发表于 2018-3-1 12:20:37

太有用了,感谢!

TKCB 发表于 2018-3-1 13:32:38

claire_zheng 发表于 2018-3-1 12:20
太有用了,感谢!

能帮助到大家,是我写教程的初衷,,最近,比较忙,可能没时间更新~~

qiao2116 发表于 2018-10-22 10:20:52

TKCB 发表于 2018-3-1 13:32
能帮助到大家,是我写教程的初衷,,最近,比较忙,可能没时间更新~~

貌似Adobe Flash Professional CC 2015不能导出exe了

TKCB 发表于 2018-10-22 12:44:40

qiao2116 发表于 2018-10-22 10:20
貌似Adobe Flash Professional CC 2015不能导出exe了

可以的,只是移动了位置而已,JSFL命令可以导出EXE

qiao2116 发表于 2018-11-7 16:05:43

TKCB 发表于 2018-10-22 12:44
可以的,只是移动了位置而已,JSFL命令可以导出EXE

群主,能不能提供一段jsfl命令?{:6_199:}

TKCB 发表于 2018-11-7 16:09:30

qiao2116 发表于 2018-11-7 16:05
群主,能不能提供一段jsfl命令?

http://www.11ria.com/forum.php?mod=viewthread&tid=20

这个帖子有~~~好好看帖子吧
页: [1] 2
查看完整版本: 【AS3新手教程】——第3章 献给Flash动画师的常用AS3代码

感谢所有支持论坛的朋友:下面展示最新的5位赞助和充值的朋友……更多赞助和充值朋友的信息,请查看:永远的感谢名单

SGlW(66139)、 anghuo(841)、 whdsyes(255)、 longxia(60904)、 囫囵吞澡(58054)

下面展示总排行榜的前3名(T1-T3)和今年排行榜的前3名的朋友(C1-C3)……更多信息,请查看:总排行榜今年排行榜

T1. fhqu1462(969)、 T2. lwlpluto(14232)、 T3. 1367926921(962)  |  C1. anghuo(147)、 C2. fdisker(27945)、 C3. 囫囵吞澡(58054)