AS3+GSAP入门教程

悲酥清风 Flash评论3,636,558阅读模式

AS3+GSAP入门教程

今天这枚教程想告诉你的是,动画没有你想象中那么难,而且它还很有趣,体验下你就知道了!AS3+GSAP入门教程

AS3+GSAP入门教程AS3+GSAP入门教程AS3+GSAP入门教程

 

动画基本都是纯代码写成的,其实代码写动画并没有想象的复杂,给每样东西起好名字,然后指挥它们谁谁,什么时间做什么事情就好了。

以前看过很多教程,一步步跟着做,但总会在中间某一步骤卡住,没法完成,就像《HOW TO DRAW A HORSE》一样坑!AS3+GSAP入门教程

我在看一些代码“入门级”书的时候,书里还是会默认你已经掌握一些“常识”,可我并不知道啊!总是无法做出最终效果,严重影响积极性。

我想,如果把步骤反过来,直接给出最终效果的代码,复制粘贴进去,一发布就是华丽的效果。然后就想玩玩具一样,改一下代码里的数字,看看有什么变化,在这个基出上改一个独一无二的版本出来,这样会开心很多!

先下载软件:

AS3+GSAP入门教程

官网地址:https://creative.adobe.com

注册一下就可以下载,30 天免费试用,最新版是 CC2015,但之前 CS3 —— CS6 版本也没问题可以使用,支持正版吧!

安装过程略!

准备运行第一个动画代码吧~

1、新建文档: Windows 快捷键 【Ctrl + N】,Mac 快捷键 【⌘ + N】)这时会弹出一个面板:AS3+GSAP入门教程

 

左边默认就是 AS3 语言,不用改。

右边按照标示,把场景宽高设置成 400 像素,当然其他大小也可以,你高兴就好。

Flash 的默认帧率好像是 12,改成 60,然后点【OK】,新建这个文档。

文档新建以后,各种面板可能不熟悉,也没关系,不用理会,用快捷键把我们需要的代码面板调出来就好。

2、打开代码面板 :(Windows 快捷键 【Alt + F9】,Mac 快捷键 【option + F9】),会出现下面这样的面板:AS3+GSAP入门教程

为了保护眼睛,我把面板背景色设置成了黑色,大家代码面板应该是白色的。

3、复制粘贴代码:复制下面的代码,粘贴到 Flash 代码面板里:

  1. var box:Shape = new Shape();
  2.  var i:int;
  3.  var count:int;
  4. addChild(box);
  5.  box.y = stage.stageHeight/2;//可以把 "=" 后面的值换成 0 ~ 400 之间的数字,发布看有什么效果
  6. addEventListener(Event.ENTER_FRAME, wave);
  7. function wave(e:Event)
  8.  {
  9.  count += 1.5;//可以把 "1.5" 替换成其他数字,发布看有什么效果
  10.  box.graphics.clear();
  11.  box.graphics.beginFill(0x000000, 1); //"0x000000" 是 16 进制颜色值,替换成 "0xFF0000" 看看效果
  12. for(i = 0; i < stage.stageWidth + 1; i++)
  13.  {
  14.  box.graphics.lineTo(i, Math.sin((i - count)*Math.PI/180) * i / 4);
  15.  }
  16. box.graphics.lineTo(stage.stageWidth, stage.stageHeight);
  17.  box.graphics.lineTo(0, stage.stageHeight/2);
  18.  box.graphics.lineTo(0, 0);
  19.  box.graphics.endFill();
  20.  }

粘贴进代码面板:AS3+GSAP入门教程

字体颜色我也设置过,所以看起来和大家会有些不同,但不影响效果

4、运行动画:( Windows 快捷键【Ctrl + Enter】,Mac 快捷键【⌘ + Enter】),如果一切正常,应该能看到下面的波浪动画:AS3+GSAP入门教程

代码里有些数值可以改一下,试试效果有什么不同,如果哪步卡住了,[email protected],是不是很简单?

Flash最后更新:2015-7-26
悲酥清风
  • 本文由 发表于 2015年7月25日 23:21:17

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定