china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


第三节 鼠标跟踪效果


  从这一节开始,我们将在实例的制作中进一步认识Actions语句的作用,本节我们来做一个常见而又比较简单的例子,跟踪鼠标。这是一个应用Actions的典型示例。大家跟着我做,真的很简单!

  先新建一个文件,设置背景色为黑色。

  按Ctrl-F8新建一个按钮类图符hidden button。在这个图符编辑窗口中,在时间轴第4帧也就是Hit帧上按F6插入关键帧,然后在编辑区正中画一个小圆圈,带不带边线或填不填充都无所谓。因为Hit帧表示的是按钮的触发范围,而其他几个帧上又无内容,所以这个按钮是存在但是看不见的,我们把它叫做隐形按钮。

  回到主场景,按Ctrl-L打开图库窗口,把hidden button拖出来放在画面中,放在哪里都无所谓,这时你可以看到它,不过那只是表示它的位置,在最后动画导出以后它就彻底隐形了。现在,选中这个按钮实例,按F8把它转换成电影片断类图符drag movie。双击这个图符实例,设置它的实例名为drag。这样,我们就可以给它加Actions语句控制了。

  双击时间轴上这一层的文字Layer 1,把它改为hidden button。再双击第1帧,设置Actions。按Drag Movie Clip,并在右边的参数设置栏中在Target一栏填入/drag,然后把Lock Mouse To Center前面的复选框打上勾。现在做好的Actions语句应该是Start Drag("/drag", lockcenter)。这条语句将在动画文件一开始播放时就执行,也就是一开始这个图符实例的中心就会被锁定在鼠标所在位置上,这样我们就可以利用这个隐形的电影片断图符方便地获得鼠标的位置。在第2帧按F5键。

  现在我们来做一个看得见的电影片断,让它能跟随鼠标运动。为了简单起见,我们调用在第二章第4节中曾经做过的风车示例图库中的风车图符。按Ctrl-F8新建一个电影片断类图符spin movie。 用菜单上File -> Open命令打开第二章第4节的示例源文件lesson2-4-1.fla。按Ctrl-L打开图库,把里面的mill图符拖到编辑区正中,现在把新开的这个文件关闭。注意到图库中多了两个图符。为了增加些效果,我们用绿黑中心梯度色填充这个风车。然后在第25帧按F6插入关键帧。再回到第1帧设置帧属性为运动渐变,并把Rotate项后设置为Counterclockwise(逆时针),times为2。为了让风车连续旋转,双击最后一帧,设置Actions为Go to and Play(1)。

  回到主场景,新建一个层,起名为spin。在第2帧按F6插入关键帧。把spin movie拖到工作区中,双击这个实例,设置它的实例名为spin

  为了能够控制风车的运动,我们还需要新建一个用于控制的电影片断。按Ctrl-F8新建一个Movie Clip,起名为Control Movie。我们将在这个图符中设置让风车跟踪鼠标的Actions语句。双击第1帧,添加如下所示的Actions语句,注意大小写:

    Set Variable: "nowX" = GetProperty("/drag",_x)
    Set Variable: "nowY" = GetProperty("/drag",_y)
    Set Variable: "spinX" = GetProperty("/spin",_x)
    Set Variable: "spinY" = GetProperty("/spin",_y)
    Set Variable: "distanceX" = nowX - spinX
    Set Variable: "distanceY" = nowY - spinY
    Set Variable: stepX = distanceX / 15
    Set Variable: stepY = distanceY / 15
    Set Property("/spinX",X Position) = spinX + stepX
    Set Property("/spinY",Y Position) = spinY + stepY

  下面我们来看一下这些Actions语句是如何实现鼠标跟踪的。

 先看头两句:

    Set Variable: "nowX" = GetProperty("/drag",_x)
    Set Variable: "nowY" = GetProperty("/drag",_y)

  我们新设置了两个变量nowXnowY,用它们来存储电影片断实例dragxy坐标值。因为drag在主场景中被设置为锁定在鼠标位置上,所以这两个变量中实际存储的鼠标当前位置的xy坐标值。

 接下来两句:

    Set Variable: "spinX" = GetProperty("/spin",_x)
    Set Variable: "spinY" = GetProperty("/spin",_y)

  不用说,这两句我们将获得风车实例当前的xy坐标值,并把它们分别存放在变量spinXspinY中。

 再下面两句:

    Set Variable: "distanceX" = nowX - spinX
    Set Variable: "distanceY" = nowY - spinY

  为了达到鼠标跟踪的目的,我们需要知道风车所在位置与鼠标所在位置之间的相对距离,以便我们接下来逐步缩小这个距离,从而实现鼠标跟踪的效果。变量distanceXdistanceY就是用来分别存放两者之间x方向和y方向上的相对距离的。

 接下来的这两句:

    Set Variable: stepX = distanceX / 15
    Set Variable: stepY = distanceY / 15

  我们希望风车不要一下子就回到鼠标所在位置,而是有一些延迟,并且越接近鼠标,跟踪的速度越慢,最后缓缓地稳定在鼠标位置上。这个效果就是通过设定风车跟踪时每一次移动的步长来实现的。在这两句中,变量stepXstepY中将分别存放风车这一次将要在xy方向上移动的点数。从这两句中可以看出,当风车与鼠标接近时,也就是distanceX distanceY的数值较小时,stepXstepY也会变小,这样就实现了我们上面所希望的效果。我们还可以改变除数的大小以获得不同的移动速度,我在这里选用的是15,这个数值越大风车移动得越慢。

 最后这两句:

    Set Property("/spinX",X Position) = spinX + stepX
    Set Property("/spinY",Y Position) = spinY + stepY

  在上面的这些语句中,我们只是把有关的数据存放在一些变量中,真正要改变风车的当前位置还是要靠这两句来实现。在这两句中,我们把风车当前位置的xy坐标(spinXspinY)分别加上将要移动的步长的xy坐标(stepXstepY),并把新的风车位置坐标值赋给风车的相关属性参数X PositionY Position,从而实现了改变风车位置的目的。

  现在,这些关键性的Actions语句就全部设置好了。

  还在Control Movie的编辑状态下,选择第1帧,按Ctrl+Alt-C,复制这一帧,再在第2帧上点一下,按Ctrl+Alt-V把第1帧所有的内容粘贴到这一帧上。现在第1帧和第2帧的内容完全一样。这样做,是因为在只有一帧的情况下,风车的位置属性不能得到有效地修改,所以只有再加一帧来控制,当然也可以复制多个帧,但似乎没有什么必要。

  回到主场景中,再新建一个层,改变层名为control。在第2帧按F6插入关键帧,从图库中把Control Movie图符拖到工作区中,放在哪儿都可以。设置好的时间轴如下图所示:

  好了!这个示例到这里就全部完成了。看一下效果,还不错吧!还有什么不明白的,点这里下载源文件。

 

  摘自《新闪光时代》 幸运鸟/文

 


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集




  • 网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网