武陵观察网 问答 Flash如何制作跟随鼠标旋转的星星动画效果

Flash如何制作跟随鼠标旋转的星星动画效果

本教程是介绍Flash制作跟随鼠标旋转的星星的动画效果。教程非常详细,分析了每个代码,非常适合初学者学习。希望对你有帮助!

第一步:

打开FLASH,新建一个名为“Star”的电影剪辑元素,在其中绘制一颗星星,将其中心点与舞台注册点对齐,分别在第20帧和第40帧插入一个关键帧。选择第20帧,按住SHIFT键,当其中心点与舞台的注册点对齐时(你认为差不多够了),按比例缩小,然后选择第1帧到第20帧中的任意一帧,创建补间动画,打开属性面板逆时针旋转,选择第20帧到第40帧中的任意一帧,创建补间动画,打开属性面板顺时针旋转。

第二步:

新建一个电影剪辑元素,命名为“圆形中的星星”,在图层面板中找到“添加运动引导层”,添加一个引导层,选中图层时按住AIT SHIFT键在舞台上画一个有边框没有填充颜色的圆(大小你觉得合适就OK),然后用鼠标圈出它的一个边,选中后删除(这是给它一个空隙), 选择绘制的圆,将其左侧和顶部与舞台中心的注册点对齐,选择第40帧以添加一个帧,锁定图层,选择第一个图层以拖动我们库中的星星,并将其中心点与参考图层中圆上方的间隙对齐,选择第40帧以插入一个关键帧,将其中心点与参考图层中圆下方的间隙对齐。 回到舞台,将环绕星放在舞台上任意位置的库中,并给它一个实例名mc。

第三步:

继续插入名为'的影片剪辑元件,选择第一帧并添加以下代码:

复制代码

代码如下:

var k:数量=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。

_root.mc1._rotation=360/16*1

_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时,它有更多的角度。

我们放在主场景第一帧的代码明显是拖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);

句子“属性”的意思是设置括号(目标,目标的属性,属性值);

我们现在的目标是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

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

Mc1。_x=300减去200/2

Mc1。_x=300负100 //注意,负值乘以负值,负值除以负值,加减相反。

mc1。_ x=200

电脑运行到这里,mc1的坐标是200,但是200还是不符合我们看到的效果。当我们运行时,它的坐标跟随鼠标,所以程序会运行,它会设置MC2的坐标。MC2的坐标将是250,其次是MC3的坐标将是275。简而言之,它们的坐标之间的距离会随着你往下走而变小。你可以自己测试一下。

当程序在64个循环后跳出循环时,会转到下一帧,执行gotoAndPlay(2);

又回来了,然后重复了64次。代码还是那个代码。不同的是这次设定了坐标。我们来看看MC1现在的坐标是什么。上次设定后是200,现在也是。

mc1。_x=200 (100-200)/2

150

这个坐标值会越来越靠近鼠标,直到和鼠标坐标一样,后面的MC也会一样,直到他们的坐标和鼠标相等,他们的坐标永远不会小于鼠标坐标。

教程最后,以上是跟随鼠标旋转的Flash制作星星动画效果的过程。希望对新手朋友有帮助!感谢观看本教程!

本文来自网络,不代表本站立场,转载请注明出处:https:

Flash如何制作跟随鼠标旋转的星星动画效果

武陵观察网后续将为您提供丰富、全面的关于Flash如何制作跟随鼠标旋转的星星动画效果内容,让您第一时间了解到关于Flash如何制作跟随鼠标旋转的星星动画效果的热门信息。小编将持续从百度新闻、搜狗百科、微博热搜、知乎热门问答以及部分合作站点渠道收集和补充完善信息。