案例4鼠标跟随动画制作步骤
鼠标跟随教研课教案
“FLASH鼠标跟随”教案【课题】鼠标跟随【课时】1课时（45分钟）【教学目标】1.认知目标：理解ActionScript的概念，掌握帧动作和按钮动作的应用。
2.能力目标：通过简单Action的掌握，引导学生制作更复杂的Action动画。
3.情感目标：利用上机分组操作,培养学生的协作精神。
【重点难点】重点：影片剪辑的制作方法难点：Action动作代码【教学方法】1.采用案例、情境、启发式教学法。
2.采取了由浅入深、循序渐进的教学策略，以实例讲解－>综合练习－>引发学生思考为流程。
3.运用“引——激——拓”的课堂教学模式。
【教具】机房、投影仪、多媒体教育平台【教学过程】一、复习旧知，为新课作铺垫1、要求学生在自己的电脑上制作小球从上往下坠落的动画；2、然后要求他们在此基础上对下落的过程进行变形、旋转、透明度的变化；3、请同学们回忆按钮Action的基本格式，并请一学生上讲台书写：on( ){}二、导入新课展示上届一学生制作的FlashMTV，其中有一个漂亮的鼠标跟随的效果。
激发同学们的兴趣和求知欲；三、分析实例1、展示一个简单的鼠标跟随动画，让同学们分析讨论，做这个动画可能要用到我们所学过的哪些知识？2、根据学生讨论的结果，在黑板上板书：（其实这就是制作步骤）①透明按钮；②影片剪辑元件；③帧动作、按钮动作。
四、讲解动画制作步骤1、制作透明按钮元件（可请一学生上台制作）；2、新建影片剪辑，在第一帧放入透明按钮；然后在第2——10帧制作一个小球下落的动画；3、回到场景，把做好的影片剪辑拖入到场景，并复制使其布满场景；4、在第一帧设置帧动作：stop();5、在透明按钮上设置Action：on ( rollOver ) {play ( ) ;}6、第2到10帧设置小球的下落、变形、透明。
五、分组合作（分8小组）分8个小组，看哪2个小组合作做得最快。
要求小组中的每个成员都能在自己的机子上完成，才算这个小组成功。
Flash动画制作案例：跟随鼠标的小圆
Flash动画制作案例：跟随鼠标的小圆本案例主要使用了创建元件功能与Action Script技术来编辑制作鼠标跟随的动态效果。
操作步骤（1）新建一个Flash文档，新建一个名称为“ball”的图形元件。
在工作区中使用椭圆工具绘制一个27×27大小的灰色无边框的正圆，使其居中对齐，如图9-1所示。
图9-1 绘制圆形（2）新建按钮元件“btn”，在点击帧处按“F6”插入关键帧，使用椭圆工具绘制一个27×27的白色无边框的正圆，如图9-2所示。
图9-2 新建按钮元件（3）新建影片剪辑“cool”，将“库”中的“btn”元件拖动到舞台中，选中按钮，打开“动作”面板，输入以下代码，如图9-3所示。
on (rollOver){gotoAndPlay(2);}图9-3 添加代码（4）新建图层2，在第1个关键帧上输入代码：stop();，如图9-4所示。
图9-4 添加代码（5）在第2帧插入空白关键帧，将库中的“ball”元件拖动到场景中，在第14帧插入关键帧，并将此帧中的图形放大至66×66，设置其Alpha值为“5”，然后在第2帧与第14帧之间创建动画，如图9-5所示。
图9-5 .设置Alpha值（6）回到场景1，将“库”中的“cool”元件拖动到舞台中，多次复制并铺满整个舞台，如图9-6所示。
图9-6 拖入元件（7）新建一个图层2，并将一幅图像导入到舞台上，然后将该图层拖动到图层1的下方，如图9-7所示。
图9-7 导入图像（8）执行“文件→保存”命令，保存文件，然后按下“Ctrl+Enter”组合键输出测试影片即可，如图9-8所示。
图9-8 欣赏效果。
Flash常见的鼠标跟随效果
[Flash常见的鼠标跟随效果flash中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试：一、例１：让鼠标指针变变样：把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。
过程：1)插入一个元件，类型为影片剪辑，自己动手画个形状吧，像上面图一那样的也行，这不要紧，要紧的是在元件编辑视图下，要将这个图形的左上角对准中心的十字，否则鼠标定位时会有误差，如图：[小技巧：直接在舞台上绘图，完成后全选并右击，选择“转换为元件——影片剪辑——确定”，这样做影片剪辑，会自动对齐。
]2)把影片剪辑放到舞台上，实例名为：mouse_mc3)在帧上加代码，非常简单：mouse_mc.startDrag(false);stage.addEventListener(Event.ENTER_FRAME,myMouse);function myMouse(evt:Event) {mouse_mc.x = mouseX;mouse_mc.y = mouseY;}Mouse.hide();其中Mouse.hide(); 的作用是隐藏默认的鼠标指针，如果要恢复显示：Mouse.show();二、例２：鼠标指针后面跟随飘逸的枫叶：过程：1）把这几张图下载到你的电脑上，并导入到flash库中去。
2）把这些图拖到舞台上去，按图从小到大的顺序依次分别右击他们，并选“转换成元件——影片剪辑——确定”：按“从小到大”的顺序操作，是为了叠放次序，后来居上：虽然在同一时间轴图层上，但后转换成影片剪辑的会居上方。
3）同样从小到大，依次取实例名为：level0、level1、level2、level3、level4、level5 4）在帧上加一些简单的代码即可：level0.startDrag(false);stage.addEventListener(Event.ENTER_FRAME,myMouse);function myMouse(evt:Event) {level0.x = stage.mouseX + 20;level0.y = stage.mouseY + 10;var speed:uint = 3;for (var i:uint = 1; i<=5; i++) {this["level"+i].x += (this["level" + (i-1)].x -this["level" + i].x )/speed;this["level"+i].y += (this["level" + (i-1)].y -this["level" + i].y )/speed;}}三、例3：鼠标跟随飘动的文字这个其实和例2是一样的，把图片换成一个个文字，其他的过程一样，数量有些不同，改改相关的代码即可。
如何制作鼠标跟随？
语句解释如下：
n = Number(n)+24; //n的数值每次递增24， 24是由360除以15得来的，由于
我们要设置旋转的动画，而每转一周是360度，动画片段的周期是15桢，所以要在一个周期里旋转360度就要每桢旋转360/15=24°所以设置n的数值每次递增24。
if (Number(n)<360) { //当n小于360时，
图3.3.37 在AS层的第1帧填加AS命令
7、 返回到场景1，在第2帧插入空白关键帧。打开库面板，把“拖动旋转”影片剪辑拖放到第2帧中的任意位置。将其实例名设置为movie。如图3.3.38所示。
图3.3.38 影片剪辑“拖动旋转”的属性设置
8、 选中第2帧，打开as面板添加控制语句：
n = Number(n)+24;
图3.3.34 影片剪辑“旋转”的时间轴
4、 单击选中第1帧，在下面的属性面板中设置旋转参数。如图3.3.35所示。
图3.3.35 旋转参数设置
5、 再新建一个影片剪辑，命名为“拖动旋转”，按“ctrl+L”调出“库”面板，现在库中有三个元件。选中“旋转”影片剪辑将其拉到编辑区中心，在下面的属性面板
中命名它的实例名为“xz”。然后将此图层பைடு நூலகம்名为“旋转”。如图3.3.36所示。
图3.3.36 属性设置
6、 在时间轴上选择第15帧，按F5将动画延长到第15帧。然后新建一个图层，
命名为as，在第1帧添加as：
startDrag("xz", true); //开始拖动影片剪辑xz
如图3.3.37所示。
i
详细出处参考：
f (Number(n)<360) {
最简单的鼠标跟随
最简单的鼠标跟随最简单的鼠标跟随第一节单元件的鼠标跟随鼠标跟随，是flash动画里很有意思的一个内容。
单元件鼠标跟随，是不能再简单的跟随示例，其制作过程如下：1，打开flash面板，点文件---导入到库，导入一个GIF格式的小动画（注意这类小动画不要直接导入现场）。
2，在现场第一层第一桢，将上面的小动画从库里导入现场，同时在属性面板里影片剪辑下面的空格里，填写影片剪辑名称（实例名称）：mc。
这个名称可以随意起，但一定要记住和后面代码里保持一致。
3，点黑第一桢，打开动作面板，填写以下代码：mc._x=mc._x+(_xmouse-mc._x)/4;mc._y=mc._y+(_ymouse-mc._y)/4;在上面的代码中，mc._x 代表元件mc 的x 坐标，mc._y 代表元件mc 的y 坐标，_xmouse代表鼠标的x坐标，_ymouse代表鼠标的y 坐标。
从公式中可以看出，新的x坐标，等于原来的x坐标加上：鼠标的x坐标减去原x坐标的差再除以4所得的商数。
就是说，鼠标的x坐标移动a厘米，元件的x坐标就要跟进a/4厘米。
y坐标同此理。
4，在第二桢插入关键镇，打开属性面板，填写如下代码：gotoAndPlay(1);动画完成，测试，导出。
说明：1，第一桢的公式可简化为：mc._x+=(_xmouse-mc._x)/4;mc._y+=(_ymouse-mc._y)/4;2，除数4要根据现场效果改变，如2，5 ，7，8等等。
第二节多元件鼠标跟随我们现在再来做一个多元件的鼠标跟随：1，写四个字：向你学习，并且把它们分别转换为4个元件。
2，在第一桢，把4个元件，导入现场，影片剪辑名称分别命名为：m1,m2,m3,m4。
导入时最好从第4个开始依次导入。
因为最后一个总是在最上面。
3，点第一桢，打开动作面板，填写以下代码：m1._x+=(_xmouse-m1._x)/4;m1._y+=(_ymouse-m1._y)/4;m2._x+=(m1._x-m2._x)/4;m2._y+=(m1._y-m2._y)/4;m3._x+=(m2._x-m3._x)/4;m3._y+=(m2._y-m3._y)/4;m4._x+=(m3._x-m4._x)/4;m4._y+=(m3._y-m4._y)/4;上面的代码，其道理和我在上一篇所讲的是一样的，元件1跟鼠标，元件2跟元件1，元件3跟元件2- - - 。
水波纹文字效果—鼠标跟随(二维动画设计)
THANKS
第十二步：用橡皮擦工具擦出缺口
第十三步：回到场景，新建 图层
第十四步：将元件拖入到舞台-属性-更改名称
第十五步：将图层改-将线条转换为填充
第十六步：新建图层-窗口-动作-输入刚更改的名称
第十七步：将图层三设置为遮罩层 第十八步：来看效果 控制-测试影片 将鼠标放在场景上，会出现水波纹的效果
-
第五步：新建元件，插入-新建元件-影片剪辑
第六步：使用椭圆工具绘制圆，填充更改为空，笔触更改 为8 第七步：新建图层-绘制第二个圆 第八步：新建图层-绘制第三个圆 第九步：新建图层-绘制第四个圆 第十步：分别选择圆对齐到舞台
第十一步：将图层四拖拽到第四帧，将图层三拖拽到第三帧， 将图层二拖拽到第二帧，分别插入帧到相同的帧处
《水波纹文字效果-鼠标跟随》
今天讲解的实例是“水波纹 鼠标跟随”
用到了遮罩层和动作窗口
关于基础工具的使用请观看 之前基础部分的视频
现在开始今天的学习
第一步：新建项目，将素材导入到库 第二步：将库中的素材拖入到舞台，对齐舞台
第三步：新建图层，将图层一复制针贴到图层二
第四步:将图层二中的图片用 任意变形工具放大
鼠标跟随实例操作步骤
鼠标跟随实例操作步骤：1、新建一个flash 2.0文件，影片尺寸为“400×400”像素，背景颜色为“黑色”，帧频为“12”。
2、按Ctrl+F8键，新建一个名为隐形按钮的按钮元件，在第4帧插入关键帧，用椭圆工具绘制一个直径为“15”，颜色为“白色”的小圆，如图1所示。
〔注意：小球的坐标〕图13、按Ctrl+F8键，新建一个名为发光小球的影片剪辑，在第1帧用椭圆工具绘制一个直径为“15”的小圆，〔注意不球的坐标〕接着在第6帧插入关键帧，修改此帧圆球的颜色，然后依次在第11帧和第16帧插入关键帧，并分别改变小球的颜色。
最后定义这16帧的动画类型为补间动画，给最后一帧加入动作“stop”，如图2。
〔注意创建的是图形元件，还是对象;如果是对象，将无法创建形状补间〕4、新建一个名为鼠标跟随的影片剪辑，在第1帧把制作好的隐形按钮从库面板中拖过来，并设定第1帧的动作为“stop”。
在隐形按钮实例上单击右键，从快捷菜单中选择“动作”，在动作面板脚本编辑图2区设置动作为：〔在设置动作时，注意它的位置。
在时间轴上和在元件上设置的作用完全不同〕on (rollOver){gotoAndPlay(2);}5、在第2帧插入空白关键帧，并把发光小球实例放上去，位置与隐形按钮实例位置相同。
具体作法是：让它们的坐标一致。
然后在第25帧插入关键帧，选中此帧中的小球，按住shift键往下拖动一段距离，如图3所示。
图36、在第30帧插入关键帧，右键单击此帧中的实例，从帧属性面板中选择颜色下拉菜单中的“色调”选项，在颜色按钮弹出窗口中选择黑色，并把右边的百分比设为100%。
然后设置第2帧到第30帧的动画类型为补间动画，并设定缓动值为“100”，使它产生由上往下掉的加速效果，如图4所示。
图47、返回到主场景，从库面板中拖出影片剪辑“鼠标跟随”到舞台上，然后不断复制粘贴，（利用坐标来控制可以达到很好的效果）直到排满整个舞台，如图5所示。
怎么制作鼠标跟随动画
怎么制作鼠标跟随动画所以很多人可能会认为，鼠标跟随这种动画很难制作!其实很简单，一起跟着小编来制作吧。
其实不然，这种动画很简单，因为和普通的动画没啥区别，仅需要一行代码用来控制元件位置的代码即可，难度估计在于，很多人不知道将代码放到哪个地方，在这里，我们会为你逐一讲解。
下面，我们就来一起制作一个最简单的元件跟随鼠标的动画吧。
方法/步骤一、绘制一个元件下面我们先在舞台中画一个元件，这个元件就是会跟随鼠标移动的元件，你画什么都行，比如画一个圆、画一个正方形等都可以，在这里，本例画的是一个标准的六角星，此时画出来的对象是形状对象。
如上图所示，在图层1的第一帧中，画一个标准的六角星，效果如上图。
接着，还没完，我们得将这个六角星转换为元件，使用鼠标拖选的办法选中六角星对象，然后按下F8 键，弹出如下图的对话框。
上图中，我们选择“影片剪辑”这种类型，上面的三种类型，你选择哪种都行，都能实现效果。
为什么要转换成为元件呢?原因就是元件可以取名字，而画出来的形状对象不可以取名字，在这里，我们需要对象有名字，所以就得进行转换。
二、给元件添加跟随代码如下图，在舞台中，选中“六角星”对象，找到该对象对应的属性面板。
如上图蓝线圈住的那输入框，就可以输入名字，在这里，我们输入xin 这个名字。
接着，在图层面板中，如下图的蓝线圈住的那按钮，点击一下，添加图层2。
然后，选择图层2的第一帧，注意，这个帧是一个空的关键帧，用鼠标选择这个帧。
然后，按下键盘上的 F9 键，会弹出代码输入面板。
6如上图的右下部分，这里就是输入代码的地方。
我们按照上图的代码照着输入即可。
xin.startDrag(true);输入代码之后，我们就发现，图层2的第一帧上面，多了一个a字母的图标，看到没，你看上图就能看到了。
说明已输入代码。
注意，xin指的是我们给六角星在属性窗口中所取的名字。
后面的startDrag(true)的含义是允许拖动、跟随鼠标移动的意思。
flash鼠标跟随
Flash鼠标跟随简介Flash是一种常用的多媒体技术，可以创建动画、游戏和交互式应用程序。
在Flash中，鼠标跟随是一种常见的交互效果，它可以使对象或元素在鼠标移动时进行相应的移动。
在本文中，我们将学习如何使用Flash来实现鼠标跟随效果。
我们将介绍基本的思路和步骤，并给出示例代码帮助你更好地理解。
实现步骤步骤1：创建一个新的Flash项目首先，你需要创建一个新的Flash项目。
打开Flash软件，点击“文件”菜单，选择“新建”来创建一个新的项目。
步骤2：添加元件在Flash项目中，你可以使用元件来创建和管理图形、动画和其他对象。
我们将添加一个元件来实现鼠标跟随效果。
点击菜单栏上的“插入”按钮，选择“新建元件”。
在弹出的对话框中，选择一个合适的元件类型，比如影片剪辑(Symbol)。
步骤3：设置鼠标跟随1.将创建的元件拖动到舞台上。
2.在舞台上，选中该元件，然后点击顶部的“属性”面板。
3.在属性面板中，找到“动画”选项卡，并点击“创建新的动画”，创建一个新的动画帧序列。
4.在舞台上的元件中，选中第1帧，在顶部的“属性”面板中，找到“动作”选项卡。
5.在“动作”选项卡中，选择“鼠标”并勾选“跟随”。
步骤4：设置对象的移动现在，当鼠标在舞台上移动时，元件将跟随鼠标进行移动。
但是，通常我们希望元件有一定的平滑移动效果。
1.在舞台上，选中元件的第1帧，在属性面板中选择“动作”选项卡。
2.在“动作”选项卡中，选择“脚本”并输入以下代码：onEnterFrame = function () {this._x += ( _xmouse - this._x ) / 10;this._y += ( _ymouse - this._y ) / 10;}以上代码创建了一个onEnterFrame函数，它在每一帧都会执行。
函数中的代码计算了元件的新位置，并使用简单的缓动效果让元件平滑地跟随鼠标移动。
步骤5：导出并测试最后一步是导出Flash项目并测试鼠标跟随效果。
教案flash鼠标跟随特效
课题:用flash制作鼠标跟随特效日期：20014-10-21 班级：13青鸟教师：张斌教学目的通过本节课的学习，让学生利用以前学习过的按纽结合脚本语言制作出鼠标在屏幕上滑过时产生特殊的动态效果。
德育要点学生通过观察范例动画，分析实现该动画的方法并完成制作。
培养学生的学习兴趣，增加学生的动手实践能力与参与意识。
教学重点制作能在鼠标滑过后播放的动画教学难点合理的使用脚本语言控制动画效果课型：实践教具：计算机教师活动学生活动设计意图【组织教学】一、复习提问观看动画，并且按老师要求完成下列要求1．在动画播放时让小球停止2．当鼠标点击按钮后，小球移动请1或2名同学演示操作二、讲授新课（一）介绍本节课学习的动画效果，要求学生观察鼠标在屏幕上运动后产生的效果。
（二）比较分析两个动画分析雪花的特征，设计制作思路将鼠标停止在某一位置，让学生观看单独的雪花落下的过程，并分析该过程的特征，根据分析结果制定设计方法动画特征：1，动画包含一个雪花下落融化消失过程2，鼠标指针经过的位置才有雪花鼠标指针没有经过的位置动画停止学生回忆前一节课的内容。
在老师提供的动画中分别使用stop 和goto语句完成操作要求。
1 在第一帧加stop2 在按钮上加goto学生对屏幕上鼠标滑过后看到有雪花落下的效果感到惊奇学生通过观看动画对动画的效果分解并猜测动画中各个部分的特征。
所提问的内容与本节课有直接关系，帮助学生更好学习新课。
既复习了学习过的内容又可以为本节学习做铺垫。
通过特效激发学生的兴趣。
培养学生分析问题并解决问题的能力，同时也增强了学生的观察力调动学生学习的自觉性和主动性，让学生自己参与到教学过程中来。
3，动画开始处有个看不见的按钮（三）制作雪花跟随鼠标特效动画1，制作静止雪花a 绘制六瓣雪花中的一个花瓣b 利用变形工具（ctro+t）旋转复制2 制作雪花下落融化a 将雪花转换成影片命名为snowb 双击snow 影片进入编辑状态c 创建补间动画在30帧加关键帧d 在30帧移动雪花调整ALPHA值为03 添加按纽，使用语言控制动画a 在第一帧增加关键帧b 在第一帧添加方形按钮c 在第一帧添加stop函数d 在按钮上使用goto函数控制动画播放学生制作不同的花瓣，通过旋转复制可以得到各不相同的雪花学生根据老师的提示提出制作要求，1 雪花从上到下移动2 雪花移动的下方时融化学生根据老师的提示提出制作要求，1 雪花下落的动画需要先停止在第一帧2 增加按纽，并用goto函数使鼠标滑过按扭时，播放雪花下落动画。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例4鼠标跟随动画制作步骤
鼠标跟随动画是一种很有趣的特效，它可以使页面更加生动有趣，增加用户的体验感。
在这个案例中，我们将学习如何使用HTML、CSS和JavaScript来制作一个简单的鼠标跟随动画。
步骤1：设置HTML文件
首先，我们需要创建一个HTML文件来放置我们的代码。
我们可以使用以下代码来创建一个基本的HTML文件：
```html
<!DOCTYPE html>
<html>
<head>
<title>鼠标跟随动画</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="container">
<div id="circle"></div>
</div>
</body>
</html>
```
步骤2：设置CSS文件
接下来，我们需要创建一个CSS文件来设置动画的样式。
我们可以使用以下代码来创建一个基本的CSS文件：
```css
#container
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
#circle
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
transition: transform 0.3s;
```
在这个样式中，我们设置了一个容器 `container` ，用来放置鼠标
跟随的圆形 `circle`。
步骤3：设置JavaScript文件
最后，我们需要创建一个JavaScript文件来实现鼠标跟随的动画效果。
我们可以使用以下代码来创建一个基本的JavaScript文件：```javascript
document.addEventListener('mousemove', function(e)
var circle = document.getElementById('circle');
var x = e.pageX;
var y = e.pageY;
circle.style.transform = 'translate(' + x + 'px, ' + y +
'px)';
});
```
在这个脚本中，我们使用 `mousemove` 事件监听器来检测鼠标的移动，当鼠标移动时，我们通过 `e.pageX` 和 `e.pageY` 获取鼠标的位置，然后将圆形的 `translate` 属性设置为鼠标的位置，创建跟随效果。
步骤4：测试和调试
现在，我们可以在浏览器中打开HTML文件，测试我们的鼠标跟随动
画效果。
当我们移动鼠标时，红色的圆形应该会跟随鼠标的位置。
如果我们希望做一些额外的改进，可以在CSS文件中设置圆形的样式，如颜色、大小、渐变等等。
我们还可以在JavaScript文件中使用其他的
动画效果，如旋转、缩放等。
所以这就是制作一个简单的鼠标跟随动画的步骤。
通过使用HTML、CSS和JavaScript，我们可以很容易地制作出各种各样的动画效果，提升
用户的体验感。
希望这个案例能够帮助你更好地了解鼠标跟随动画的制作
过程。