×

关注微信公众号

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

[AS] AS3.0踪迹动画实例

[复制链接]
发表于 2010-1-15 18:10:06 | 显示全部楼层 |阅读模式
本帖最后由 cao4811 于 2010-1-15 18:13 编辑

AS3.0踪迹动画实例

这是一个非常简单的创建旋转踪迹动画实例,由元件结合代码完成,你可以任意地改变速度、大小,形状等等。

演示:

1、新建一个Flash文件,宽500高500,背景颜色黑色。

2、用矩形工具在舞台上画一个10*10的方形,颜色任意,运行中的色彩改变将由代码实现。图1

3、右键单击矩形,转换成影片剪辑,命名为“myRectangle”,全居中对齐。

4、删除舞台中的矩形,打开库,右键单击myRectangle影片剪辑,点属性打开元件属性面板,设置链接(类绑定)如图2

5、关闭库面板,选中场景1的第一帧,输入代码:
  1. //Start a timer. Timer calls the timerHandler every 0.2 seconds.
  2. var timer:Timer = new Timer(200, 0);
  3. timer.addEventListener (TimerEvent.TIMER, timerHandler);
  4. timer.start ();

  5. //Get the center coordinates of the stage.
  6. var centerX:Number = stage.stageWidth / 2;
  7. var centerY:Number = stage.stageHeight / 2;

  8. //This function is called by the timer.
  9. function timerHandler (e:Event):void {

  10.         //Create a new rectangle.
  11.         var newRectangle:MyRectangle = new MyRectangle();

  12.         //Set the position to same place as where the mouse cursor is.
  13.         newRectangle.x = mouseX;
  14.         newRectangle.y = mouseY;

  15.         //Calculate x and y distances to the rectangle
  16.         //from the center of the stage.
  17.         var dx:Number = newRectangle.x - centerX;
  18.         var dy:Number = newRectangle.y - centerY;

  19.         //Calculate the distance to the rectangle from
  20.         //the center of the stage (Pythagorean theorem)
  21.         newRectangle.radius = Math.sqrt(dx*dx + dy*dy);

  22.         //Calculate the angle of the rectangle from the center
  23.         newRectangle.myAngle = Math.atan2(dy, dx);

  24.         //Set the angle speed (how fast we rotate)
  25.         newRectangle.speed = 0.06;

  26.         //At first,set the rectangle to be invisible
  27.         newRectangle.alpha = 0;

  28.         //Assign a random scale to the rectangle
  29.         newRectangle.scaleX = Math.random() + 1.5;
  30.         newRectangle.scaleY = newRectangle.scaleX;

  31.         // Get access to the ColorTransform instance associated with the rectangle.
  32.         var colorInfo:ColorTransform = newRectangle.transform.colorTransform;

  33.         // Set a random color for the ColorTransform object.
  34.         colorInfo.color = 0xffffff * Math.random();

  35.         //Apply the random color for the rectangle
  36.         newRectangle.transform.colorTransform = colorInfo;

  37.         //Add the rectangle to the stage
  38.         addChild (newRectangle);

  39.         //Add ENTER_FRAME to animate the rotation
  40.         newRectangle.addEventListener (Event.ENTER_FRAME, moveRectangle);
  41. }

  42. //This function rotates a rectangle
  43. function moveRectangle (e:Event):void {

  44.         //Get the rectangle from the event target
  45.         var rectangle:MovieClip = e.target as MovieClip;

  46.         //Calculate the new x and y positions for the rectangle
  47.         var newX:Number = centerX + Math.cos(rectangle.myAngle) * rectangle.radius;
  48.         var newY:Number = centerY + Math.sin(rectangle.myAngle) * rectangle.radius;

  49.         //Increase the angle for the next frame
  50.         rectangle.myAngle += rectangle.speed;

  51.         //Assign the new position
  52.         rectangle.x = newX;
  53.         rectangle.y = newY;

  54.         //Decreate the radius to get a "spiral" animation
  55.         rectangle.radius -= 0.6;

  56.         //Reduce the scale
  57.         rectangle.scaleX -= rectangle.radius * 0.0001;
  58.         rectangle.scaleY -= rectangle.radius * 0.0001;

  59.         //Increase the alpha if it's not one and radius is larger than 50
  60.         if (rectangle.alpha < 1 && rectangle.radius > 50) {
  61.                 rectangle.alpha += 0.05;
  62.         }
  63.         //Start decreasing alpha if radius is smaller than 50
  64.         if (rectangle.radius < 50) {
  65.                 rectangle.alpha -= 0.005;
  66.         }

  67.         //If radius is smaller than zero, remove the rectangle
  68.         if (rectangle.radius < 0) {
  69.                 rectangle.removeEventListener (Event.ENTER_FRAME, moveRectangle);
  70.                 removeChild (rectangle);
  71.         }
  72. }
复制代码
6、完工,测试影片。
本帖的地址:http://bbs.jcwcn.com/forum.php?mod=viewthread&tid=290541
跟着教程做一遍,做完的图要到这里评论交作业,教程有看不懂的地方,可以在贴子下面评论

本帖子中包含更多资源

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

x

评分

参与人数 1金币 +8 热心度 +2 收起 理由
zctmh0336 + 8 + 2 好教程

查看全部评分

发表于 2010-1-16 09:01:21 | 显示全部楼层
酷素材
交作业了。

本帖子中包含更多资源

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

x

评分

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

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2011-3-1 10:05:44 | 显示全部楼层

作业

本帖最后由 龙井茶馆 于 2011-3-1 10:07 编辑

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2011-3-1 19:42:08 | 显示全部楼层
交作业。

本帖子中包含更多资源

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

x
回复 支持 反对

使用道具 举报

发表于 2011-4-10 11:40:55 | 显示全部楼层
酷素材
很漂亮呀。
回复 支持 反对

使用道具 举报

发表于 2011-4-17 21:18:51 | 显示全部楼层
酷素材
转一会儿后,会越来越慢,最后几乎不动了。是不是可以把删除的位置扩大一些。
回复 支持 反对

使用道具 举报

发表于 2018-6-16 15:39:40 | 显示全部楼层
楼主是超人
回复 支持 反对

使用道具 举报

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

使用道具 举报

发表于 2018-6-16 15:05:27 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

发表于 2018-6-16 15:37:17 | 显示全部楼层
学习了。。。
回复 支持 反对

使用道具 举报

发表于 2018-6-16 15:10:08 | 显示全部楼层
楼主我支持你
回复 支持 反对

使用道具 举报

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

本版积分规则