本页面由 Flash 保存计划 从 Internet Archive 存档还原 · 快照 2004-12-09 · 原址 http://www2.flash8.net/teach/266.htm ← Flash 保存计划
 
追踪鼠标
作者：pc-net 上传人：  
时间: 2003年3月20  类型:   
收藏 发送 评论 <%=votevote%>打印 字体选择: 大 中 小
                                   常看见许多很可爱的小图形在网页上会跟着鼠标移来移去的很好玩                                      !                                      用JavaScript程式可以做到，那用FLASH来制作呢                                      ?                                      结果方法会更简单的。追踪鼠标的变化方式有很多种，在这里先介绍一种类似像火车一样串接的方式，很像是在玩彩带舞哦!                                                               
                     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/13/13.swf";>                                                                                http://www.flash8.net/file/Tutorials1/1015/13/13.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">                                                                               

                                                                                                

 ※闪吧※<a target=_blank href=http://www.flash8.net<img src=images/small/download.gif border=0 align=absMiddle height=16 width=16> <a href="www.flash8.net" TARGET=_blank>[ 点击下载 ]</a></a>]   
 
                                                              
                                                                                                 http://www.flash8.net/file/Tutorials1/1015/13/line1.gif"; width="158" height="359">                                  元件名称--w、.、p、c、-                                      、n、                                                                          e、                                      t、                                      o  、m(影片片段):                                                                          

这个范例里的鼠标是                                        http://www.pc-net.com.tw";>www.pc-net.com.tw                                        ，共                                        17                                        个文字，其中有些字是重复的，所以真正要做的影片片段元件有  w、.、p、c、-                                       、n、                                        e、                                        t、                                         o                                         、m                                        ，10个字。如左图所示。

                                                                                                                                                                                                 http://www.flash8.net/file/Tutorials1/1015/13/line5.gif"; width="259" height="217">                                  图层名称--text:                                     

从图库中依序将做好的元件拉至场景的下方，如左图所示。并给它元件实体名称，由左至右依序为:                                       t1、t2、                                       t3、t4、t5、t6、t7、t8、t9、                                       t10、t11、t12、                                       t13、t14、t15、t16、t17。                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line2.gif"; width="383" height="237">                                  元件名称--tracker(影片片段):                                     

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

                                    

　                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line6.gif"; width="300" height="225">                                  图层名称--text:                                     

新增一个图层，从图库中将tracker元件拉至场景的下方，如左图的小圆点所示。并给它元件实体名称                                        :                                       tracker。

                                    

在影格上设定动作指令如下:
                                      开始拖曳                                                                              ("/tracker"，lockcenter)                                       

                                    

如下图所示。

                                                                                                                                                                                                 http://www.flash8.net/file/Tutorials1/1015/13/line8.gif"; width="480" height="285">                                                                                                                                                               http://www.flash8.net/file/Tutorials1/1015/13/line3.gif"; width="383" height="237">                                  元件名称--order(影片片段):                                     

新增一个order元件，这也是一个空的元件，场景内不需要画任何东西，不过在影格中要插入两个空的关键影格，此元件将用来控制鼠标的排列位置。

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

                                        设定变数:                                       "i" = 17
                                       重复，当                                        (i >= 1)
                                         设定内容                                        ("/t"                                       & i，X                                        位置)                                       = Eval ("/t" & i & ":x")
                                         设定变数:                                       "/t" & i & ":x" = Eval ("/t" &                                       (i - 1) & ":x") + 15
                                                                                                                       设定内容                                         ("/t" & i，Y                                        位置)                                       = Eval ("/t" & i & ":y")
                                         设定变数:                                       "/t" & i & ":y" = Eval ("/t" &                                       (i - 1) & ":y")
                                         设定变数:                                       "i" = i - 1
                                       结束重复
                                      设定变数:                                       "/t1:x" = GetProperty ("/tracker", _x) +                                       15
                                       设定变数:                                       "/t1:y" = GetProperty ("/tracker", _y)                                       

                                    

=======================================================

                                    

&                                       :                                        连接
                                                                             Eval :                                        取得变数值
                                                                             GetProperty :                                        取得目标内容
                                                                             + 15                                        的目的是为了要让字与字之间的左右间格保持一定的距离 

                                    

上述的语意如下:

                                    

首先，设定变数                                        i =                                       17                                          (鼠标由                                       17                                                                              个文字组成)
                                       指定条件式，(当变数                                                                              i                                        大於或等於1时)，进入回圈内的设定，每一次设定完，变数                                                                              i                                        的值减                                        1，直到条件式不成立时，跳离回圈
                                      回圈设定:
                                         第1次                                                                              :  i = 17，设定第17个字的位置，保持在第16个字的右方位置
                                                                                                                                       .
                                                                                           .
                                                                                           .
                                         第16次                                                                              :  i = 2，设定第2个字的位置，保持在第1个字的右方位置
                                                                                 第17次                                                                              :  i = 1，设定第1个字的位置                                         (此处参考不到位置所以在回圈外设定)
                                       结束回圈
                                      设定第1个字的位置保持在                                                                              tracker                                        元件的右方位置 
                                      
                                      (由於                                                                               tracker  元件锁定在滑鼠的中心位置上，如此就会一个字接着一个字而相连了)

                                    

　                                                                                                                                                                                                                                       

http://www.flash8.net/file/Tutorials1/1015/13/line4.gif"; width="478" height="283">                                                                                                                                                                               注意画红色圈圈的地方，abc代表纯文字，=代表表示法。                                     

有红色点的变数栏位，属性为纯文字，其馀所有栏位的属性，皆为表示法。

                                                                                                                                                                                                                                      

order元件第2影格的动作指令如下:
                                                                             前往并播放  (1)　                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line7.gif"; width="259" height="235">                                  图层名称--order:                                     

回到场景1，新增一个图层，从图库中将order元件拉至场景的下方，如左图所示。

                                    

完成了!                                        若是哪里有不懂的地方，请随时至Flash问题讨论区内提出您的问题!,

                                                                                                                                                                                                                                                                    下一课：http://www.flash8.net/file/Tutorials1/1015/12.htm";>载入提示画面(1)                                                                                                                       
 ※闪吧※<a target=_blank href=http://www.flash8.net<img src=images/small/download.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/13/13.swf";>                                                                                http://www.flash8.net/file/Tutorials1/1015/13/13.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">                                                                               

                                                                                                                                                                                                 常看见许多很可爱的小图形在网页上会跟着鼠标移来移去的很好玩                                      !                                      用JavaScript程式可以做到，那用FLASH来制作呢                                      ?                                      结果方法会更简单的。追踪鼠标的变化方式有很多种，在这里先介绍一种类似像火车一样串接的方式，很像是在玩彩带舞哦!                                                                                                                                                                http://www.flash8.net/file/Tutorials1/1015/13/line1.gif"; width="158" height="359">                                  元件名称--w、.、p、c、-                                      、n、                                                                          e、                                      t、                                      o  、m(影片片段):                                                                          

这个范例里的鼠标是                                        http://www.pc-net.com.tw";>www.pc-net.com.tw                                        ，共                                        17                                        个文字，其中有些字是重复的，所以真正要做的影片片段元件有  w、.、p、c、-                                       、n、                                        e、                                        t、                                         o                                         、m                                        ，10个字。如左图所示。

                                                                                                                                                                                                 http://www.flash8.net/file/Tutorials1/1015/13/line5.gif"; width="259" height="217">                                  图层名称--text:                                     

从图库中依序将做好的元件拉至场景的下方，如左图所示。并给它元件实体名称，由左至右依序为:                                       t1、t2、                                       t3、t4、t5、t6、t7、t8、t9、                                       t10、t11、t12、                                       t13、t14、t15、t16、t17。                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line2.gif"; width="383" height="237">                                  元件名称--tracker(影片片段):                                     

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

                                    

　                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line6.gif"; width="300" height="225">                                  图层名称--text:                                     

新增一个图层，从图库中将tracker元件拉至场景的下方，如左图的小圆点所示。并给它元件实体名称                                        :                                       tracker。

                                    

在影格上设定动作指令如下:
                                      开始拖曳                                                                              ("/tracker"，lockcenter)                                       

                                    

如下图所示。

                                                                                                                                                                                                 http://www.flash8.net/file/Tutorials1/1015/13/line8.gif"; width="480" height="285">                                                                                                                                                               http://www.flash8.net/file/Tutorials1/1015/13/line3.gif"; width="383" height="237">                                  元件名称--order(影片片段):                                     

新增一个order元件，这也是一个空的元件，场景内不需要画任何东西，不过在影格中要插入两个空的关键影格，此元件将用来控制鼠标的排列位置。

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

                                        设定变数:                                       "i" = 17
                                       重复，当                                        (i >= 1)
                                         设定内容                                        ("/t"                                       & i，X                                        位置)                                       = Eval ("/t" & i & ":x")
                                         设定变数:                                       "/t" & i & ":x" = Eval ("/t" &                                       (i - 1) & ":x") + 15
                                                                                                                       设定内容                                         ("/t" & i，Y                                        位置)                                       = Eval ("/t" & i & ":y")
                                         设定变数:                                       "/t" & i & ":y" = Eval ("/t" &                                       (i - 1) & ":y")
                                         设定变数:                                       "i" = i - 1
                                       结束重复
                                      设定变数:                                       "/t1:x" = GetProperty ("/tracker", _x) +                                       15
                                       设定变数:                                       "/t1:y" = GetProperty ("/tracker", _y)                                       

                                    

=======================================================

                                    

&                                       :                                        连接
                                                                             Eval :                                        取得变数值
                                                                             GetProperty :                                        取得目标内容
                                                                             + 15                                        的目的是为了要让字与字之间的左右间格保持一定的距离 

                                    

上述的语意如下:

                                    

首先，设定变数                                        i =                                       17                                          (鼠标由                                       17                                                                              个文字组成)
                                       指定条件式，(当变数                                                                              i                                        大於或等於1时)，进入回圈内的设定，每一次设定完，变数                                                                              i                                        的值减                                        1，直到条件式不成立时，跳离回圈
                                      回圈设定:
                                         第1次                                                                              :  i = 17，设定第17个字的位置，保持在第16个字的右方位置
                                                                                                                                       .
                                                                                           .
                                                                                           .
                                         第16次                                                                              :  i = 2，设定第2个字的位置，保持在第1个字的右方位置
                                                                                 第17次                                                                              :  i = 1，设定第1个字的位置                                         (此处参考不到位置所以在回圈外设定)
                                       结束回圈
                                      设定第1个字的位置保持在                                                                              tracker                                        元件的右方位置 
                                      
                                      (由於                                                                               tracker  元件锁定在滑鼠的中心位置上，如此就会一个字接着一个字而相连了)

                                    

　                                                                                                                                                                                                                                       

http://www.flash8.net/file/Tutorials1/1015/13/line4.gif"; width="478" height="283">                                                                                                                                                                               注意画红色圈圈的地方，abc代表纯文字，=代表表示法。                                     

有红色点的变数栏位，属性为纯文字，其馀所有栏位的属性，皆为表示法。

                                                                                                                                                                                                                                      

order元件第2影格的动作指令如下:
                                                                             前往并播放  (1)　                                                                                                                                                                                                  http://www.flash8.net/file/Tutorials1/1015/13/line7.gif"; width="259" height="235">                                  图层名称--order:                                     

回到场景1，新增一个图层，从图库中将order元件拉至场景的下方，如左图所示。

                                    

完成了!                                        若是哪里有不懂的地方，请随时至Flash问题讨论区内提出您的问题!,

                                                                                                                                                                                                                                                                    下一课：http://www.flash8.net/file/Tutorials1/1015/12.htm";>载入提示画面(1)                                                                                                                       
责任编辑:古墓
上一篇: 载入提示画面(1) 下一篇: 抓不到我
 
SWF Decompile MX 2005发布-闪客危
超级简单的网页标题栏制作(无as)
顶级网页配色词典，培养你的色感
用Dreamweaver MX建设神奇网页图片
用Dreamweaver MX建设神奇网页图片
超酷网页变形Flash按钮
网页设计的色彩思考
网页色彩的搭配
网页设计的布局理念
Fireworks制作光泽按钮一例
用CSS来控制网页背景
完整cartoon教程之一