×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 8666|回复: 19

AS3.0 代码绘制

[复制链接]
发表于 2010-1-20 08:56:22 | 显示全部楼层 |阅读模式
本帖最后由 cao4811 于 2010-1-20 09:01 编辑

AS3.0 代码绘制

    在这一教程中,我们首先要学习一下动画编程原理:Flash之所以产生动画效果,是因为每秒钟要绘制多次屏幕,并且在每次屏幕绘制时,改变显示对象的位置、大小、透明度等属性,或者使用绘图API绘制新的图形,从而达到动画效果。每秒钟绘制Flash Player窗口屏幕的次数,称这个SWF文件的帧速度。绘制一次屏幕被称为一次屏幕更新。ActionScript 3动画编程也是依据这个原理,如果隔一定的时间改变一下显示对象的属性,或者绘制一些新的变化,那么动画就产生了。

    ActionScript 3中产生动画的方式有两种。
    1、定时更新:每隔一定时间让显示对象改变一次,可以使用定时更新,使用Timer类对象定时发出事件,并侦听该对象的TimerEvent.TIMER事件。在侦听到事件时执行动画代码。
    2、每帧更新:跟随Flash本身播放速度,在每次Flash屏幕更新时改变显示对象。那么应当侦听该显示对象发出的Event.ENTER_FRAME事件。

实例演示:

下面我们就来学习代码绘制
      
代码绘制动画编程,是指每帧都用代码来绘制一些稍稍不同的图形,播放起来就形成了动画。矢量动画绘制比较普变。主要使用Graphics对象提供的API来绘制图形。

绘制直线动画
演示:

1、新建Flash文档,设置属性:宽、高为300*300,背景黑色。

2、在图层的第1帧,输入代码:
  1. var xspeed:Number = 2;
  2. var yspeed:Number = -2;
  3. var xpos:Number = 0;
  4. var ypos:Number = stage.stageHeight;

  5. graphics.lineStyle (2, 0xffffff);
  6. graphics.moveTo (0, stage.stageHeight);
  7. addEventListener (Event.ENTER_FRAME, onEnterFrame);

  8. function onEnterFrame (event:Event):void {
  9.         xpos += xspeed;
  10.         ypos += yspeed;
  11.         graphics.lineTo (xpos, ypos);
  12. }
复制代码
解释:首先建立需要的函数。对于这个影片,我们想要 x 和 y 坐标在每帧中分别地增加、减少 2个像素。然后我们声明出发点函数,线在左下角开始。设定 " graphics.lineStyle" 线条样式。线宽度是 2个像素,颜色是 0 xffffff 。(白色的)然后我们加入ENTER_FRAME 侦听器。在每帧中,把速度加入新的 x 和 y 位置。然后画一条线到这个新的位置。

绘制圆形动画

演示:

代码:
  1. var speed:Number = 0.05;
  2. var radius:Number = 50;
  3. var angle:Number = 0;
  4. var xpos:Number;
  5. var ypos:Number;

  6. var centerX:Number = stage.stageWidth / 2;
  7. var centerY:Number = stage.stageHeight / 2;

  8. graphics.lineStyle (2, 0xffffff);
  9. graphics.moveTo (centerX + radius, centerY);
  10. addEventListener (Event.ENTER_FRAME, onEnterFrame);

  11. function onEnterFrame (event:Event):void {
  12.         xpos = centerX + Math.cos(angle) * radius;
  13.         ypos = centerY + Math.sin(angle) * radius;
  14.         angle += speed;
  15.         graphics.lineTo (xpos,ypos);
  16. }
复制代码
解释:首先我们声明速度 。然后我们为圆分配一个半径。我们想要圆在舞台的中心。(centerX 和 centerY 变量)然后我们设定 linestyle 而且设定出发点为圆的右边。ENTER_FRAME 功能使用余弦和正弦计算新的 x 和 y 位置。我们在每帧中增加角度而且对新的位置画一条线。

绘制正弦曲线动画

演示:

代码:
  1. var speedX:Number = 1;
  2. var speedAngle:Number = 0.1;
  3. var range:Number = 100;
  4. var angle:Number = 0;
  5. var xpos:Number = 0;
  6. var ypos:Number = 0;
  7. var centerY:Number = stage.stageHeight / 2;


  8. graphics.lineStyle (2, 0xffffff);
  9. graphics.moveTo (0, centerY);
  10. addEventListener (Event.ENTER_FRAME, onEnterFrame);

  11. function onEnterFrame (event:Event):void {
  12.         xpos += speedX;
  13.         ypos = centerY + Math.sin(angle) * range;
  14.         angle += speedAngle;
  15.         graphics.lineTo (xpos,ypos);
  16. }
复制代码
解释:最重要的变量是 speedX 、 speedAngle 和range。SpeedX 定义水平的速度。SpeedAngle 定义角度增加或减少。range定义曲线的高度。在这一个例子中,完全的曲线高度是 200 px 。 在 ENTER_FRAME 中,使用正弦曲线。

说一下Event.ENTER_FRAME事件的运行机制:侦听Event.ENTER_FRAME事件,将代码写入到侦听器函数中。由于每次屏幕更新时,都会发出Event.ENTER_FRAME事件,因此会调用侦听器函数,从而实现调用动画代码。

最后附上一个蜘蛛吐丝的源文件,供大家学习。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +8 +2 收起 理由
zctmh0336 + 8 + 2 好教程

查看全部评分

发表于 2010-1-20 10:55:47 | 显示全部楼层
本帖最后由 nxasd 于 2010-1-23 13:12 编辑

交作业了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +3 收起 理由
zctmh0336 + 3 支持练习

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2012-6-9 21:07:01 | 显示全部楼层
蜘蛛与鼠标的方向有问题?
回复 支持 反对

使用道具 举报

发表于 2014-11-25 19:50:13 | 显示全部楼层
好的东东,好的讲解。
回复 支持 反对

使用道具 举报

发表于 2018-6-18 14:36:38 | 显示全部楼层
顶顶多好
回复 支持 反对

使用道具 举报

发表于 2018-6-18 14:42:48 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-6-18 15:18:41 | 显示全部楼层
很好哦。。。
回复 支持 反对

使用道具 举报

发表于 2018-6-18 14:48:10 | 显示全部楼层
好帖子要收藏
回复 支持 反对

使用道具 举报

发表于 2018-6-18 14:58:43 | 显示全部楼层
教程网我挺你
回复 支持 反对

使用道具 举报

发表于 2018-9-24 18:58:52 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

发表于 2018-9-24 19:06:46 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

发表于 2018-9-24 18:34:35 | 显示全部楼层
果断收藏了
回复 支持 反对

使用道具 举报

发表于 2018-9-24 18:27:36 | 显示全部楼层
教程网我挺你
回复 支持 反对

使用道具 举报

发表于 2018-9-24 18:59:08 | 显示全部楼层
楼主我支持你
回复 支持 反对

使用道具 举报

发表于 2018-9-24 19:42:14 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则