酷炫的线性鼠标

文章类别：Flash | 发表日期:2008-9-21 19:19:52

　　 ※闪吧※<a target=_blank href=http://www.flash8.net<img src=../img/flash/200892119173412377801.gif border=0 align=absMiddle height=16 width=16> <a href="www.flash8.net" TARGET=_blank>[ 点击下载 ]</a></a>]

                        FLASH 4 : 酷炫的线性鼠标

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="550" height="400"> http://www.flash8.net/file/Tutorials1/1015/9/9.swf";> http://www.flash8.net/file/Tutorials1/1015/9/9.swf"; quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"; type="application/x-shockwave-flash" width="550" height="400">

前几篇介绍的追踪鼠标已经学会了吗??这次再向各位介绍一种更酷更炫的线性鼠标，简简单单的一条线，但是视觉效果却是很棒的哦...

http://www.flash8.net/file/Tutorials1/1015/9/line0.gif"; width="261" height="230">

影格速度: 20fps

背景颜色: 336699

http://www.flash8.net/file/Tutorials1/1015/9/line3.gif"; width="390" height="240">

元件名称--tracer(影像片段):

新增一个tracer元件，这是一个空的元件，场景内不需要画任何东西，等一下将锁定此元件在滑鼠的中心点位置。

http://www.flash8.net/file/Tutorials1/1015/9/line4.gif"; width="230" height="330">

元件名称--graphic(影像片段):

图层名称--left:

新增一个graphic元件，在图层left的场景中，画一条直线，颜色:99CCCC，将线条移至场景中心点的下方，如左图所示，并在第5影格处插入要害影格。 http://www.flash8.net/file/Tutorials1/1015/9/line5.gif"; width="230" height="330"> 於第5要害影格上，用箭头工具(A)将线条往左拉成曲线，如左图所示。 http://www.flash8.net/file/Tutorials1/1015/9/line6.gif"; width="263" height="177"> 将此图层上的影格做外形渐变的效果。 http://www.flash8.net/file/Tutorials1/1015/9/line7.gif"; width="340" height="340"> 图层名称--right:

新增right图层，此图层上的图形制作方式同left图层，但曲线是往右拉，且衔接於左曲线图形的下方，如左图所示。

http://www.flash8.net/file/Tutorials1/1015/9/line01.gif"; width="260" height="330">

元件名称--mouseline(影像片段):

新增一个mouseline元件，从图库中将graphic元件拉至场景中心点的下方位置，如左图所示。

http://www.flash8.net/file/Tutorials1/1015/9/line8.gif"; width="282" height="117">

选取图形，做缩放与旋转(Ctrl+Alt+S)，在旋转栏位内输入-45，如左图所示。

http://www.flash8.net/file/Tutorials1/1015/9/line9.gif"; width="410" height="310">

旋转後，mouseline元件的图形如左图所示。

最後面我们还会再回来调整此元件。要非凡注重的是此元件图形的方向位置，底下会说明为何要旋转此一个角度。 http://www.flash8.net/file/Tutorials1/1015/9/line10.gif"; width="277" height="314"> 场景1:

图层名称--tracer:

回到场景1，从图库中将tracer元件拉至场景的下方，如左图的小圆点所示。并命名元件实体名称:tracer，在影格上设定动作指令如下:

开始拖曳 ("/tracer"，lockcenter)
http://www.flash8.net/file/Tutorials1/1015/9/line11.gif"; width="348" height="421"> 图层名称--mouseline:

新增一个图层，从图库中将mouseline元件拉至场景上，并命名元件实体名称:line1，重复将mouseline元件拉至场景上，依序命名元件实体名称:line2、line3、line4、line5、line6。

　 http://www.flash8.net/file/Tutorials1/1015/9/line12.gif"; width="378" height="240"> 元件名称--control(影像片段):

新增一个control元件，这个元件是当控制用的，所以场景内不需要画任何东西，纯粹是放动作指令。

　 control元件第1影格动作指令如下:

假如                                        (Number<6)
                                         设定变数:                                       "Number" = (Number+1)
                                       否则
                                                                                设定变数:                                       "Number" = 1
                                       结束假如
                                      设定变数:                                       "NewX" = GetProperty ("/tracer",_x)
                                       设定变数:                                       "NewY" = GetProperty ("/tracer",_y)
                                       设定变数:                                       "XScale" = (NewX-OldX)
                                       设定变数:                                       "YScale" = (NewY-OldY)
                                                                             假如                                        (XScale= 0)
                                                                                设定变数:                                       "XScale" = .1
                                       结束假如
                                      假如                                        (YScale= 0)
                                         设定变数:                                       "YScale" = .1
                                                                             结束假如
                                      假如                                        (XScale<0)
                                         设定变数:                                       "XScale" = 0-XScale
                                         设定变数:                                       "X" = -1
                                       否则
                                                                                设定变数:                                       "X" = 1
                                       结束假如
                                      假如                                        (YScale<0)
                                         设定变数:                                       "YScale" = 0-YScale
                                         设定变数:                                       "Y" = -1
                                       否则
                                                                                设定变数:                                       "Y" = 1
                                                                             结束假如
                                       假如                                        ((X = 1) AND (Y= 1))
                                                                                设定内容                                        ("/Line"&Number，旋转)                                       = 0
                                       结束假如
                                      假如                                        ((X = -1) AND (Y = -1))
                                         设定内容                                                                              ("/Line"&Number，旋转)                                       = 180
                                       结束假如
                                      假如                                        ((X = 1) AND (Y = -1))
                                         设定内容                                                                              ("/Line"&Number，旋转)                                       = 270
                                         设定变数:                                       "Temp" = YScale
                                         设定变数:                                       "YScale" = XScale
                                         设定变数:                                       "XScale" = Temp
                                       结束假如
                                      假如                                        ((X = -1) AND (Y= 1))
                                         设定内容                                                                              ("/Line"&Number，旋转)                                       = 90
                                         设定变数:                                       "Temp" = YScale
                                         设定变数:                                       "YScale" = XScale
                                         设定变数:                                       "XScale" = Temp
                                                                             结束假如
                                      设定内容                                        ("/line"&Number，X                                        位置)                                       = OldX
                                       设定内容                                                                              ("/line"&Number，Y                                        位置)                                       = OldY
                                       设定内容                                                                              ("/line"&Number，X                                        缩放)                                       = XScale
                                       设定内容                                                                              ("/line"&Number，Y                                        缩放)                                       = YScale
                                       开始告知目标                                                                              ("/line"&Number)
                                         前往并播放                                                                              (1)
                                       结束告知目标
                                      设定变数:                                       "OldX" = NewX
                                       设定变数:                                       "OldY" = NewY

Control元件第2影格动作指令如下:

前往并播放 (1)

一开始没有指定变数Number的值，所以Number的值从0开始。
当Number为0~5时，进入(假如)条件式，此时变数Number的值+1，所得的结果分别为1~6，当Number为6时，则进入(否则)条件式，此时变数Number的结果为1。
所以我们每次所得到的变数Number结果会从1、2、3、4、5、6、1、2、3、4、5、6...循环。此变数将配合"/line&Number"来指定目标物line1、line2~~line6。

设定变数NewX、Y的值分别为目标物tracer的X、Y位置值。而目标物tracer锁定滑鼠中心点位置，所以变数NewX、Y的值等於滑鼠所在的中心点x、y座标值。

设定变数X、YScale的值等於(新滑鼠中心点x、y座标值减去原滑鼠中心点x、y座标值)。

                                       假如滑鼠的x座标位置没有改变时，设定变数XScale=.1，执行蓝色程式。
                                      假如滑鼠的y座标位置没有改变时，
                                      设定变数YScale                                       = .1，执行蓝色程式。
                                      0.1是个极小值，目的是当滑鼠的x或y座标没有改变时，所能看见的线条极小，那为何不乾脆设为0，就什麽都看不见了?其实设为正或负值都没关系，但就是不能设为0，因为我们的线条是有方向性的，至少要给它一个方向，若其中一个值为0，则线条将无法判别方向为何?

参考下图，假设B点为原滑鼠中心点位置，以此分成四块区域(1、2、3、4)，A点为移动之後的滑鼠中心点位置，将A(x,y)减去B(x,y) 会得到 (++、-+、--、+-)4种情况。

紫色程式在判别新滑鼠中心点的x座标，是在原滑鼠中心点的左方或右方。
                                      若为左方，将变数XScale由负值转为正值，设定变数X=-1；若为右方，设定变数X=1。
                                      判别新滑鼠中心点的y座标，是在原滑鼠中心点的上方或下方。
                                      若为上方，将变数YScale由负值转为正值，设定变数Y=-1；若为下方，设定变数Y=1。
                                      变数X、Y，就是用来告知新滑鼠座标是位於哪一块区域，执行绿色程式。　

http://www.flash8.net/file/Tutorials1/1015/9/line02.gif"; width="220" height="220">

http://www.flash8.net/file/Tutorials1/1015/9/line04.gif"; width="250" height="250">

绿色程式:
                                     若为第1区域+                                     +，线条不需做任何变化，执行蓝色程式。
                                     若为第3区域-                                     -，线条旋转180度，执行蓝色程式。
                                    若为第4区域+                                     -，线条旋转270度，XScale值与YScale值做互换，执行蓝色程式。
                                    若为第2区域-                                     +，线条旋转90度，XScale值与YScale值做互换，执行蓝色程式。

还记得前面请您非凡注重mouseline元件内的图形方向位置吗?!参考左图，元件的图形方向与第1区域上的图形是一样的，那您是否能想像一下，若是在其它区域上的线条方向也都和第1区域上的图形一样，会是什麽情形呢?
                                       第3区域上的线条方向，必须旋转180度，才会和左图一样。
                                      第4区域上的线条方向，必须旋转270度，才会和左图一样。
                                      第2区域上的线条方向，必须旋转90度，才会和左图一样。
                                      注重看左图各个区域上，线条旋转後的红色x、y座标，是否和外围黑色的x、y座标一致呢?这就是为何第4和第2区域的XScale值与YScale值，要做互换的原因了。

http://www.flash8.net/file/Tutorials1/1015/9/line13.gif"; width="294" height="410">

图层名称--control:

动作指令完成後，回到场景1，新增一个图层，从图库中将control元件拉至场景中下方，如左图第2个小圆点所示。

接下来的动作就剩下调整线段了，先按下Ctrl+Enter测试看看吧!

http://www.flash8.net/file/Tutorials1/1015/9/line15.gif"; width="230" height="200">

如何呢?是不是线段衔接的地方怪怪的....

http://www.flash8.net/file/Tutorials1/1015/9/line14.gif"; width="210" height="240">

修改mouseline元件的长度:

修改图库中mouseline元件的长度，调整缩放大小(Ctrl+Alt+S)，超出则缩小，断续则放大，直到线段与线段衔接处刚刚好为止，测试的结果能和左图一样就可以了。

http://www.flash8.net/file/Tutorials1/1015/9/line18.gif"; width="250" height="275">

制作线段逐渐消失:

同样编辑mouseline元件，在第5影格处插入要害影格，点选图形，设定元件内容的颜色效果，将Alpha值设为0%，并做移动渐变的效果，参考左图和下图。

http://www.flash8.net/file/Tutorials1/1015/9/line17.gif"; width="210" height="120"> http://www.flash8.net/file/Tutorials1/1015/9/line19.gif"; width="260" height="275"> 最後在第5影格处，设定影格内容的动作指令为:停止，这样就大功告成了!

以上解释不好或是哪里有错误的地方，请立即给我意见，谢谢....^_^ 下一课：http://www.flash8.net/file/Tutorials1/1015/8.htm";>缤纷雪花

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网