flash教程跟随鼠标的旋转星星

2015-01-17 10:07 134 1 收藏

上次图老师带来的Flash小技巧,不知道大家学的怎么样了,这次小编又给大家带来一个有趣的Flash小技巧,不要说难,小编分享的教程都是步骤详细,很容学会的,需要的就是耐心和细心,掌握小技巧,不用再去求别人。

【 tulaoshi.com - flash 】

  第一步:

  打开FLASH,新建一个影片剪辑元件,命名为“星星”,在里面绘制一个星星出来,并且把它的中心点和舞台注册点对齐,在第20帧和第40处各插入一个关键帧。选中第20帧,在它的中心点和舞台的注册点对齐的情况下按住SHIFT键进行等比例缩小(你认为差不多就行了),然后选中第1到20帧的任意一帧创建补间动画,打开属性面板把它的转调成逆时针,选中第20到40帧的任意一帧创建补间动画,打开属性面板把它的转调成顺时针。

  第二步:

  在新建一个影片剪辑元件,命名为“转圈的星星”,在图层面板的地方找到“添加运动引导层”添加一个引导层出来,在选中该图层的情况下按住AIT+SHIFT键在舞台上绘制一个有边框无填充色的圆(大小你认为合适就OK),然后用鼠标圈住它的一点边选中后删除(这样做是给它一缺口),选中绘制好的圆,把它的左和上对齐舞台中心的注册点,选中第40帧处添加一个帧,锁定该图层,选择第一个图层把我们库中的星星拖进来并把它的中心点对齐引导层中圆的上边的那个缺口的地方,选中第四十帧插入一个关键帧把它的中心点对齐引导层中圆的下边的那个缺口的地方。回到舞台,把库中转圈的星星放到舞台任意位置,并给它一个实例名称mc。

  第三步:

  继续插入一个影片剪辑元件,命名为“as",选中第一帧添加以下代码:

  var k:Number=64;//用来定义星星的个数;

  var n:Number=16;//用来定义一圈星星的个数;

  var r:Number=2;X坐标和Y坐标的缓动,值越大跟随鼠标移动时就越慢;

  for(var i=1;i<=k;i++){

  duplicateMovieClip("_root.mc","mc"+i,i);

  setProperty("_root.mc"+i,_rotation,360/n*i);

  setProperty("_root.mc"+i,_alpha,100/k*i);

  }

  setProperty(_root.mc,_visible,0);

  选中第二帧处插入一个空白关键帧添加以下代码:

  for(var j=1;j<=k;j++){

  setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/r);

  setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/r);

  }

  选中第三帧处插入一个空白关键帧添加以下代码:

  gotoAndPlay(2);

  添加完代码以后回到主场景;

  第四步:

  把库中名为as的元件拖放到舞台上,给它一个实例名称mc0.在主场景内添加一个图层在第一帧加上拖动代码:

  startDrag("_root.mc0",true);

  注意这里是mc0不是mc,虽然你拖动的影片里面没有东西,在下面我后细说的;

  做到现在就算完工了,我在这里就把重点的地方说一下。N为什么是它的一圈星星的个数

  在第一个for循环语句里有这样一段,

  setProperty("_root.mc"+i,_rotation,360/n*i);

  看它的_rotation的值是360/n*i

  也就是"_root.mc"+i,_rotation=360/16*i

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  _root.mc1._rotation=360/16*1

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  _root.mc2._rotation=360/16*2

  _root.mc3._rotation=360/16*3

  _root.mc4._rotation=360/16*4

  _root.mc5._rotation=360/16*5

  _root.mc6._rotation=360/16*6

  _root.mc7._rotation=360/16*7

  _root.mc8._rotation=360/16*8

  _root.mc9._rotation=360/16*9

  _root.mc10._rotation=360/16*10

  .............._root.mc64._rotation=360/16*64

  也就是说把360度平均分成16份,它们的角度就是这个值,360/16=22.5。

  第一个MC的角度是从原MC角度22.5的地方开始复制出来的,第二个MC的角度是从原MC角度45的地方开始复制出来的,第三个MC的角度是从原MC角度67.5的地方开始复制出来的,直到乘到17的时候就重叠了,因为360/16*6=382.5,角最大值是360,当到382.5的时候它就把360看成0来计算了,结果就是22.5,当你把N的值调大的时候,比如36它就会有36个星星围成一圈了,360/36*i  也就是mc1角度是10*1,mc2的角度是10*2 ,mc3的角度是10*3  当乘到37的时候它的角度多了10也就是370,第37个MC的角度会是原MC角度的370-360也就是10,这就是N的值等于一圈星星的原因。

  我们在主场景第一帧里放的代码明明是拖动的MC0,为什么MC复制出来的影片会跟着鼠标走,把在AS第二帧设置X、Y坐标的循环代码拿下来分析一下:

  for(var j=1;j<=k;j++){

  setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);

  setProperty("_root.mc"+j,_y,_root["mc"+j]._y+(_root["mc"+(j-1)]._y-_root["mc"+j]._y)/2);

  }

  看它的X坐标,

  setProperty("_root.mc"+j,_x,_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2);

  setProperty这句话是说设置括号内(目标,目标的属性,该属性的值);

  我们现在的目标就是主场景上面的mc1,mc2,mc3,mc4,mc5......mc64;

  它们的X坐标值各是多少,为什么会跟随鼠标移动,我们来仔细地看下它们的值

  _root.mc+i._x_root["mc"+j]._x+(_root["mc"+(j-1)]._x-_root["mc"+j]._x)/2

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  mc1._x=mc1._x+(mc+(j-1)._x-mc1._x)/2

  假设mc1现在的坐标是300

  也就是mc1._x=300+(mc+(j-1)._x-300)/2

  现在我们已经得到两个数字了,还有一个mc+(j-1)._x,先算括号内,j-1第一次运行循环的时候j的值是1,就是1-1,也就是0;也就是mc+0,也就是mc0,也就是我们拖动的那个没有东西的影片剪辑。mc0是跟着我们的鼠标动的,上面搞清楚后,我们就在给mc0也就是我们鼠标的坐标假设一个值。随便设定一个我们就假设100吧,值有了我们在接着做算术。

  mc1._x=300+(100-300)/2

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  mc1._x=300+负200/2

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  mc1._x=300+负100 //注意下负值是越乘负的越多,越除负的越少,加减相反

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  mc1._x=200;

  当计算机运行到这里时,mc1的坐标是200了,但200还不符合我们所看到的效果,我们运行的时候是它的坐标是跟着鼠标走的,那么程序会接着往下走,它就会执行设定MC2的坐标了,MC2的坐标会是250,接着是MC3的坐标是275,总之是越往下它们坐标的间隔就会越小,你自己可以测试下看。

  当循环完64次以后程序跳出循环了,那么就会TOGO到下一帧,执行gotoAndPlay(2);

  又回来了,接着又是循环64次,代码还是相同的代码,不一样的是这次的坐标都是已经设置过的了,我们在看一下MC1现在的坐标是多少了,上次设置过后是200,那么现在是

  mc1._x=200+(100-200)/2

  也就是

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/flash/)

  150

  这个坐标值会离鼠标越来越近的,直到和鼠标的坐标一样,那么相同后面的MC也一样会近,直到它们的坐标和鼠标相等为止,而且它们的坐标永远也不会小于鼠标的坐标。

来源:http://www.tulaoshi.com/n/20150117/130272.html

延伸阅读
标签: 电脑应用
在网上看到某个游戏既要拖拽mc又要旋转mc,拖拽用鼠标事件实现,而旋转需要用shift+鼠标click事件。总觉得太麻烦了。故而希望自己能找到一种只用鼠标就能同时实现拖拽与旋转功能的方法。   结果发现MOUSE_DOWN+MOUSE_UP竟然相当于一次CLICK事件。即每次释放鼠标左键,停止拖拽时,mc会旋转...
把如下代码加入<body区域中 <script language="JavaScript" <!-- colours=new Array('#ffffff','#ff0000','#00ff00','#ffffff','#ff00ff','#ffa500','#fff000','#0000ff','#ffffff') y = 0; x = 0; n6=(document.getElementById&&!document.all); ns=(document.layers); ie=(document.all); d=(ns||ie)?'document.':'doc...
标签: flash教程
本文由 中国 清风掠影 原创,转载请保留此信息! 前些天看到有些朋友想学鼠标跟随,所以先做一个简单的实例给大家练习下~ 先看下效果~用鼠标点下水面试试: 新建一个空白的FLASH文档,按Ctrl+F8新建一个名为“蜻蜒”的图形元件 在元件中绘制蜻蜒,(如果不会画,就导入一张图片替代也行的) ...
标签: flash教程
先看效果,紧紧跟随鼠标的按钮说明文字: 我以一个按扭为例来详细讲解制作过程。 第一步:新建文件,创建按钮新元件(名为文章,你可以随你的意愿任取),绘制按钮。回到场景中,打开库,在图层1中的第一帧处把文章元件拖入场景中。 第二步:创建影片剪辑新元件,(名为信息,同样,你可以随你的意愿任取...
标签: FLASH flash教程
本文由 wytan 原创,转载请保留此信息! 本例教朋友用Flash制作鼠标跟随效果,用鼠标拖动萝卜,兔兔眼睛总盯住萝卜,很可爱噢 效果演示: [1] 200806/12945_2.html'>[2] 200806/12945_3.html'>[3] 200806/12945_2.html'>下一页 制作方法: 一、做三个元件 1、插入新元件,行为电影剪辑,命名为兔子。画...

经验教程

109

收藏

17
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部