flash简单制作鼠标跟随文字教程

admin

篇一：Flash常见的鼠标跟随效果

[Flash常见的鼠标跟随效果

flash中的鼠标可以更有个性些，做起来也不算复杂，比如把鼠标指针换成你喜欢的样子，或让鼠标指针有一个灵动飘逸的跟随，如下图中的效果，怎么样？动手试试：

一、例１：让鼠标指针变变样：

把鼠标变成上面第一个图的样子，当然你爱咋样子的都行，比如一个字，一种形状，一张图片都行。

过程：

1)插入一个元件，类型为影片剪辑，自己动手画个形状吧，像上面图一那样的也行，这不要紧，要紧的是在元件编辑视图下，要将这个图形的左上角对准中心的十字，否则鼠标定位时会有误差，如图：

[小技巧：直接在舞台上绘图，完成后全选并右击，选择“转换为元件——影片剪辑——确定”，这样做影片剪辑，会自动对齐。]

2)把影片剪辑放到舞台上，实例名为：mouse_mc

3)在帧上加代码，非常简单：

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是一样的，把图片换成一个个文字，其他的过程一样，数量有些不同，改改相关的代码即可。但这个例子，想和大家一起用代码方式做，代码如下，不理解也没关系，复制到第一帧上，可以改一改跟随文字，比如把“打倒日本帝国主义”改成“钓鱼岛是中国的固有领土”，呵呵：

//*************************从这里复制开始

**************************************

var _text:String = "打倒日本帝国主义";

var i:uint = 0;

var arrTextSprite:Array = new Array();

for (i; i<_text.length; i++) {

arrTextSprite[i] = addTextField(_text.charAt(i));

stage.addChild(arrTextSprite[i]);

}

arrTextSprite[0].startDrag(false);

stage.addEventListener(Event.ENTER_FRAME,myMouse);

function myMouse(evt:Event) {

arrTextSprite[0].x = stage.mouseX + 20;

arrTextSprite[0].y = stage.mouseY + 10;

var speed:uint = 3;

for (i = 1; i<arrTextSprite.length; i++) {

arrTextSprite[i].x += (arrTextSprite[i-1].x - arrTextSprite[i].x + 15)/speed; arrTextSprite[i].y += (arrTextSprite[i-1].y - arrTextSprite[i].y)/speed; }

}

function addTextField(str:String):Sprite {

////定义字体风格

var myTextFormat:TextFormat = new TextFormat();

myTextFormat.size = 15;

myTextFormat.align = TextFieldAutoSize.CENTER;

////添加文本框并应用风格

var myTextField:TextField = new TextField();

myTextField.width = 20;

myTextField.height = 20;

myTextField.selectable = false;

myTextField.multiline = false;

myTextField.defaultTextFormat = myTextFormat;

myTextField.text = str;

////将文本框加入到Ｓprite，就像是在舞台上将一个文本框转换成影片剪辑

var mySprite:Sprite = new Sprite();

mySprite.addChild(myTextField);

return mySprite;

}

//*********************复制到这一行结束

*******************************************

四、例4：群星飞瀑鼠标跟随效果

过程：

（一）新建一个flash文档，背景为黑色，帧频为20。

（二）绘制星星：

1）插入一个元件，类型为“图形”，确定后进入到元件编辑状态下，适当放大视图，然后进行绘图。

2）画一个无线框圆，白色，透明度33%，再调成纵向窄条；画一个无边线六边形，白色，透明66%，拽一拽上下两个顶点，让它们不那么冒尖，然后再调成窄条；再制一个窄条，透明度调成100%，即不透明。将三个窄条组合，调整长短、宽窄，然后叠起来；最后再复制一下，叠成十字形状，如下图：

3）画三个圆，无边线，白色，透明分别为33%、66%、100%，再将它们组合、重叠起来，调整好大小位置，如图：

4）将十字和圆圈叠起来，调好适当大小位置，并组合；将组合图中心点对齐到“十”字上，大小设为16*16像素，一个小星星，如图：

（三）制作星星播放动画：

1）插入一个元件，类型为“影片剪辑”，进入到元件编辑视图下，在第一帧上，将刚才做好星星拖入，中心点对齐到中间“十”字上。

2）在第10帧上插入一个关键帧，将星星Y轴下调130像素，旋转90度，并与第一帧之间创建补动画。

3）在时间轴上，再添加四个图层，分别为“图层2到图层5”，再将“图层1”已经做

好的帧分别复制粘贴到这四个图层上，如下图左：

4）由下往上，将各图层第一帧上的星星透明度分别调整为20%、40%、60%、80%、100%，最后一帧上的星星透明度都调为0%全透明。

5）再如上图右边那样，将各图层的第一层和最后一帧的位置拖动到适当的位置上

6）图层1的最后一帧（第30帧）添加代码stop()，即播放到最后停止。

（ 四）添加类：

在库中找到刚才做好的动画影片剪辑元件， “右击——链接”，如图勾选两个选项，“类”后面输入：mouse_mc，基类保留默认。

（五）在主场景第一帧中加入代码：

stage.addEventListener(MouseEvent.MOUSE_MOVE,onMove);

var nCount:uint = 0;

function onMove(evt:Event){

if(nCount %3 == 0){

var _mc:mouse_mc = new mouse_mc();

_mc.x = stage.mouseX;

_mc.y = stage.mouseY;

addChild(_mc);

}

nCount++;

篇二：实例教学Flash鼠标跟随教程：制作馋嘴的兔兔

核心提示：本例教朋友用Flash制作鼠标跟随效果。用鼠标拖动萝卜，兔兔眼睛总盯住萝卜，很可爱噢...本例教朋友用Flash制作鼠标跟随效果。用鼠标拖动萝卜，兔兔眼睛总盯住萝卜，很可爱噢... 制作方法：

一、做三个元件

1、插入新元件，行为电影剪辑，命名为兔子。画出兔子的外形，也可以画其他动物，只是眼珠不画。如果要兔子耳朵、嘴巴、手动的话，要分层用逐帧改变形状。如图所示：

2、插入新元件，行为电影剪辑，命名为眼睛，确定，进入眼睛编辑窗口。在第一帧画一个跟兔子眼眶一样大小的、没有填充色的圆（这里是30*30），并让其全居中，在里面贴住圆的右边线再画一个没有线条的红色眼珠，然后把眼眶边线的透明度设为0。

新建一个层，选中第一帧，打开“动作－帧”面板，输入以下代码：

this.onMouseMove=function(){

; eyeX=_root._xmouse-this._x

; eyeY=_root._ymouse-this._y

; ang=Math.atan2(eyeY,eyeX)*180/Math.PI

; this._rotation=ang }

如图所示：

3、插入一个新元件，行为电影剪辑，命名为萝卜。画出萝卜，选中萝卜，让其居中。如图所示：

二、布置主场景：

新建三个层，由上到下命名为萝卜、眼珠、兔子、背景。

1、选中背景层的第一帧导入一幅你喜欢的背景图。

2、选中兔子层的第一帧，从库拖出拖出兔子MC，放在合适位置。

3、选中眼睛层的第一帧，从库里拖出两个眼睛MC，分别放在兔子的眼眶里。注意也是放在眼眶的右侧（两圆相切）位置。

4、选中萝卜层的第一帧，从库里拖出萝卜MC，放在树下。选中萝卜，并在电影剪辑属性面板命名为“lb”。打开“动作－电影剪辑”面板，输入如下代码：

onClipEvent (mouseMove) {

; mouse.hide();

; startdrag("_root.lb", true); }

如图所示：

至此本实例完成，测试、存盘。

篇三：flash制作鼠标跟随

鼠标跟随

这一节我们来学习一下在flash中的函数，duplicateMovieClip()复制函数，语法规则是duplicateMovieClip(target, newname, depth)，意思是复制影片(原影片的名字，复制出新片的名字，新片的位置），

另一个函数是拖动影片startDrag()，语法是startDrag(影片名,true)，意思是拖动(影片名称，拖中心），前面的true表示“真”值，另一个是假值false；

1、创建影片剪辑

1）启动Flash，新建一个空白文档；

2）选择“插入－新建元件”菜单，新建一个名为“小球”的图形元件，选择椭圆工具，在工作区中绘制一个圆，

在属性面板中将宽和高都改成50，将边框色设为无，在内部填上右下角的彩色渐变色，在对齐面板中，把它对齐到中央，以“鼠标跟随”为文件名，保存文件到自己的文件夹；

3）再选择“插入－新建元件”菜单，新建一个名为“运动小球”的影片元件，

按Ctrl＋L打开库，向工作区中拖入一个小球元件，对齐到中央，打开属性面板，在颜色里把Alpha调为100％，

再在20帧插入关键帧，用箭头工具选中小球，把宽高改为1，对齐到中央，透明度Alpha改为0％，

选中第一帧，单击鼠标右键，选择“创建补间动画”，在下面的属性面板中，设定顺时针旋转10次，保存一下文件；

4）点击时间轴上面的“场景1”回到场景中，在库中拖一个“运动小球”元件到工作区，对齐到中央，在属性面板中把“<实例名称>”改为ball_mc，

在第2帧插上单击鼠标右键，选择“插入帧”命令，加长一下动画，保存一下文件；

2、输入脚本代码

折叠属性面板，添加一个图层2，在第1帧单击一下，然后打开“动作”面板，打开行号，输入下列代码（可以先抄到本子上），注意字符串的双引号必须是英文，结尾的分号也必须是英文的：

第4句是鼠标拖动函数，拖动的是_root.ball_mc，_root是指时间轴，true是拖中心位置；

第6句是复制语句，复制20个新剪辑，第一个应该是“ball1_mc”，放在第1层中，依此类推；

第10句是if语句，最多只复制20个剪辑，再多的就回来用前面的层；

保存一下文件，测试一下，如果有错误就仔细看看输出面板中的提示，回来改正错误，缓慢移动鼠标看看精彩的效果；

本节学习了startDrag();和duplicateMovieClip();两个函数，学习了动态复制影片剪辑和拖动剪辑，如果你成功地理解并完成了练习，请继续学习下一课内容:《》


《flash简单制作鼠标跟随文字教程》出自：百味书屋
链接地址：http://www.850500.com/news/71425.html
转载请保留,谢谢!