您的位置:百味书屋 > 范文大全 > 经典范文 > flash简单制作鼠标跟随文字教程 正文

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

2017-01-17 11:29:19 来源网站: 百味书屋

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

[Flash常见的鼠标跟随效果

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

一、例1:让鼠标指针变变样:

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

过程:

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();

二、例2:鼠标指针后面跟随飘逸的枫叶:

过程:

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;

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

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
转载请保留,谢谢!
相关文章
  • flash简单制作鼠标跟随文字教

    Flash常见的鼠标跟随效果[Flash常见的鼠标跟随效果flash中的鼠标可以更有个性些,做起来也不算复杂,比如把鼠标指针换成你喜欢的样子,或让鼠标指针有一个灵动飘逸的跟随,如下图...

推荐范文