Flash AS 入门教程 圆和椭圆函数的应用

所属分类: 媒体动画 / Flash教程 阅读数: 50
收藏 0 赞 0 分享

  源文件下载

  圆和椭圆函数

  1、圆的参数方程:


复制代码
代码如下:

 x=r*cosX //x、y是圆上一点的坐标;r是圆半径;
 y=r*sinX //X是圆半径绕圆心旋转的角度。

  2、椭圆的参数方程:


复制代码
代码如下:

 x=a*cosX //x、y是椭圆上一点的坐标;a、b分别是长、短轴
 y=b*sinX //X是椭圆旋转的角度。

  圆和椭圆函数应用举例

  例 3.3.1 (打开3.3.1.fla文件

  场景中有一个影片剪辑,双击这个mc,在这个mc内,我们看到有两个小影片剪辑(f_mc,d_mc),写在第一帧上的脚本:

  this.f_mc._visible = this.d_mc._visible=0;
  for (k=1; k<21; k++) {
   duplicateMovieClip(this.f_mc, "f"+k, k);
   duplicateMovieClip(this.d_mc, "d"+k, k+40);
  }
  for (k=1; k<21; k++) {
   this["f"+k]._x = 130*Math.cos(18*k*Math.PI/180);//圆半径是130,圆周上每隔18度
   this["f"+k]._y = 130*Math.sin(18*k*Math.PI/180);//放一个复制的mc
   this["d"+k]._x = 130*Math.cos(18*k*Math.PI/180);//椭圆的长轴是130,短轴是60;椭圆的
   this["d"+k]._y = 60*Math.sin(18*k*Math.PI/180); //圆周上也是每隔18度放一个复制的mc
  }

  角度18*k*Math.PI/180中Math.PI/180是把1度转换成的弧度;k取1~20,那么18*k*Math.PI/180就是18度到360度。刚好每隔18度放置一个mc

  按Ctrl+Enter播放,我们可以看到复制的mc被放置成一个圆和椭圆。作为圆和椭圆,他们是静止在各自的位置上。如何让这个圆和椭圆动(旋转)起来哩?

  点击查看动画效果<

  我们可以这样考虑,在帧频事件的循环中,每循环一次(j++),使圆(或者椭圆)上的点都再旋转18度(角度都增加18*j度),到达下一个位置,这样圆(或者椭圆)就可以旋转起来了。

  由于每一次旋转都是复制的mc的位置互换,而整体的图形没有改变,所以,我们不容易看到圆(或者椭圆)在运动,解决的办法是把其中的几个mc的放大系数改变。

  例 3.3.2

  打开3.3.2.fla文件,比较它与3.3.1.fla文件的脚本的差异,运行3.3.2.fla文件,观察效果。

  点击查看动画效果<

  例 3.3.2源程序:


复制代码
代码如下:

  j = 0;
 this.f_mc._visible = this.d_mc._visible=0;
 for (k=1; k<21; k++) {
  duplicateMovieClip(this.f_mc, "f"+k, k);
  duplicateMovieClip(this.d_mc, "d"+k, k+40);
 }
  f1._xscale = f1._yscale=f10._xscale=f10._yscale=100;//放大复制后其中几个mc
  d5._xscale = d5._yscale=d15._xscale=d15._yscale=50;
this.onEnterFrame = function() {
  j++;
 for (k=1; k<21; k++) {
  this["f"+k]._x = 130*Math.cos(18*k*Math.PI/180+18*j*Math.PI/180);
  this["f"+k]._y = 130*Math.sin(18*k*Math.PI/180+18*j*Math.PI/180);
  this["d"+k]._x = 130*Math.cos(18*k*Math.PI/180-18*j*Math.PI/180);
  this["d"+k]._y = 50*Math.sin(18*k*Math.PI/180-18*j*Math.PI/180);
 }
 };

  角度中+18*j*Math.PI/180在帧频事件的循环中,每循环一次影片位置的角度增加18度。-18*j*Math.PI/180与前面方向相反。

  我们使圆和椭圆都旋转运动起来了,我们还可以不断改变圆的半径和椭圆的长、短轴,使圆和椭圆互相转换,或者其它的形状变化。有兴趣的可以参见3.3.3.fla文件。

  点击查看动画效果<

  例 3.3.3源程序脚本:


复制代码
代码如下:

  j = rotat=scale=0;//设置计数变量、旋转角度和放大系数的初始值为0;
  q = l=w=130;   //设置圆的半径和椭圆长轴(开始时的值)
  m = 50;     //设置椭圆短轴
  this.f_mc._visible = this.d_mc._visible=0;
  for (k=1; k<21; k++) {
   duplicateMovieClip(this.f_mc, "f"+k, k);
   duplicateMovieClip(this.d_mc, "d"+k, k+40);
  }
  f1._xscale = f1._yscale=f10._xscale=f10._yscale=100;
   //使复制的mc中是4个面积变大为4倍
  d5._xscale = d5._yscale=d15._xscale=d15._yscale=50;
this.onEnterFrame = function() {
 this._rotation += rotat;//使(f_mc的)父级mc旋转;
 this._xscale -= scale; //放大或者缩小(f_mc的)父级mc
 this._yscale -= scale;
  j++;
  for (k=1; k<21; k++) {
   this["f"+k]._x = q*Math.cos(18*k*Math.PI/180+18*j*Math.PI/180);
   this["f"+k]._y = l*Math.sin(18*k*Math.PI/180+18*j*Math.PI/180);
   this["d"+k]._x = w*Math.cos(18*k*Math.PI/180-18*j*Math.PI/180);
   this["d"+k]._y = m*Math.sin(18*k*Math.PI/180-18*j*Math.PI/180);
 }
  if ((j>40) && (j<=110)) {
   l -= 2.2; //圆的宽每次减2.2
   q -= 1;  //圆的高每次减1
   m += 1.2; //椭圆的短轴每次增加1.2
   w -= 1;  //椭圆的长轴每次减1
 }
  if ((j>110) && (j<=220)) {
   l += 2; //圆的宽每次加2
   m -= 1.5;//椭圆原来的短轴每次减1.2
   w += 0.7;//椭圆的长轴每次加0.7
 }
  if ((j>220) && (j<=260)) {
   q += 1;  //圆的高每次加1
   l -= 3.2; //圆的宽每次减3.2
   m--;   //椭圆原来的短轴每次减1
 }
  if ((j>260) && (j<=320)) {
   q += 2;  //圆的高每次加2
   m += 2.5; //椭圆原来的短轴每次加2.5
   w -= 2;  //椭圆的原来的长轴每次减2
 }
  if (j>320 && j<=450) {
  q -= 3.5;  //圆的高每次减3.5
  w += 1.5;  //椭圆的原来的长轴每次加1.5
}
  if (j>450 && j<=550) {
  q = -190;  //保持原来圆的高为190
  w = 180;  //保持原来椭圆的长轴为180
  rotat = 5; //这里给旋转变量赋值,f_mc的父级mc开始旋转
  scale = 1; //这里给放大系数变量赋值,f_mc的父级mc开始放大
 }
  if (j>550) {
  scale = -1; //f_mc的父级mc反方向放大
  rotat = -5;//f_mc的父级mc反方向旋转
 }
  if (j>650) {
   j = scale=0; //给各变量重新赋初值,使动画循环播放
   l = q=w=130;
   m = 50;
  }
 };

  作业

  A 利用例3.2.2的源程序,复制任意的21个mc,并把它们均匀的摆放在正玄函数图象上。如下图:

  点击查看动画效果<

  B 最好能使这个mc摆成下面的正弦图形,并且能左右运动起来。

  点击查看动画效果<

更多精彩内容其他人还在看

Flash cs3绘制人物高级行走动画教程

本教程向大家介绍Flash cs3绘制人物高级行走动画效果,教程难度不是很大,绘制方法及过程介绍的也非常详细,教程很实用,转发过来,希望大家喜欢
收藏 0 赞 0 分享

Flash CS4来制作漂亮的气泡动画教程

本教程向脚本之家的朋友介绍用Flash CS4来制作漂亮的气泡动画,制作出来气泡真的很好看,制作效果是采用代码形式实现,觉得很不错,转发过来,感兴趣的朋友可以一起来学习
收藏 0 赞 0 分享

flash基础教程:帧、关键帧、空白帧概念及区别介绍

动画的产生是帧来实现的,那什么是帧?帧、关键帧和空白帧之间又有什么区别?本文就为大家介绍一下三者之间的关系
收藏 0 赞 0 分享

Flash教程:动画背景的绘制方法之透视篇(给新手)

Flash动画在网络上的广泛传播,已经成为上网一族喜闻乐见的一种艺术形式。动画背景的绘制方法有很多,也有很多表现方法。这里将结合透视学的基础知识向大家简单的介绍一下动画背景的绘制。
收藏 0 赞 0 分享

Flash AS入门教程:Flash AS3.0制作有年份有日期的时钟

本教程是向大家介绍利用Flash AS3.0制作有年份有日期的时钟,虽然制作时钟老套了点,但它确可以较全面地应用到时间日期和间隔等知识,仍不失为较好的入门练习,转发给大家,希望对大家有所帮助
收藏 0 赞 0 分享

Flash相册制作大师具体该如何使用 Flash相册制作大师使用教程

在本文中我们将会看到的是Flash相册制作大师的具体使用的方法
收藏 0 赞 0 分享

flash基础教程:混色器面板图文介绍

混色器面板是Flash中用于色彩处理的一个重要面板,熟练地使用该面板,可以帮助用户快速地完成色彩的填充,编辑出色彩丰富的图形。本教程为大家详细介绍一下混色器面板,希望对大家有所帮助
收藏 0 赞 0 分享

25个绝对让你应接不暇的Flash网站创意

在Web设计过程中,运用成熟的Flash技术可以把你任意想到的idea表现到产品页面中。这里为你整理发现了25个绝对让你应接不暇的 Flash网站创意,更好地体现网站的互动应用,同时可以让你大饱眼福,一起来欣赏吧
收藏 0 赞 0 分享

教你用Flash制作非常酷的二进制时钟动画

今天在这个教程中我们将学习用Flash做一个不同寻常的,但非常酷的时钟:一个二进制时钟,中间用到了代码,但介绍地很详细,相信很值得大家学习
收藏 0 赞 0 分享

Flash动画特效制作技巧:制作超酷的文字炸开动画效果

本教程向大家介绍Flash动画特效制作技巧,本实例是制作文字炸开的动画效果,制作效果非常酷,制作过程也比较简单,喜欢的朋友可以过来学习一下这种制作方法
收藏 0 赞 0 分享
查看更多