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


第七节 可以卷动的文本


  整整两个月没写教程了,因为实在太忙。这两天趁着稍稍轻松一些,正想再接着以前的工作继续做下去,忽然得到一则让人欢喜让人忧的消息:FLASH5出炉了。对于FLASH爱好者来说,这可真是天大的喜讯,FLASH的功能将更加强大,使用起来也更加得心应手;我却又有些犯愁,现在FLASH4的教程还未完成,到底是应该紧跟FLASH5的步伐转向FLASH5的介绍呢,还是继续用FLASH4把教程写完。因为FLASH5中做了大量的修改增强,包括面板,甚至Actions的编辑界面都和FLASH4中不同,而且FLASH5必定会取代FLASH4流行下去;但另一方面,教程不写完多少有些遗憾,幸运鸟做事很少虎头蛇尾,所以只好决定先接着把教程往下写,等到FLASH5真正流行起来的时候再停止,也只有这样了。

  上面的这个示例是一个文本卷动的例子,是幸运鸟在网上看到的。用鼠标拖动文本右边的滑块或是把鼠标放在文本上都可以实现文本的上下卷动,当然实现这种效果还要靠Actions来完成。

  打开FLASH4。按Ctrl+M把背景色设为黑色。

  按Ctrl+F8,创建一个图形类图符text。在这个图符的编辑画面中用白色写一大段文字,要较长一些,长在宽的三倍以上。为了看清楚字的内容,最好用加粗字或黑体字以便在遮罩下也可以识别。

  做好以后,我们来做一个文字卷动的电影片断图符textmovie。在这个电影片断中,我们用遮罩来实现文本的简单卷动。按Ctrl+L把图符库打开。从里面把text拖到编辑画面中。新建一个层,画一个不带边框的矩形做为文本显示的窗口,要求宽度与文本宽度相同,位置如下面左图所示。在这一层上点鼠标右键选Mask,设置这一层为遮罩层。在这两层可以继续编辑的情况下,在遮罩层的第80帧按F5键。在被遮罩层的第80帧按F6键生成关键帧,并用光标键把文字移动到下面右图所示的位置。在第1帧双击设置ActionsStop,并设置渐变方式为运动渐变。

         
  下面我们来做一个滑块。按Ctrl+F8新建一个按钮类图符scrollerbutton。在Up帧画一个长条形不带边线的矩形。使用如下面左图所示的渐进色进行填充,最后做好的滑块按钮如下面右图所示。因为一会儿还要设置Actions,我们需要把这个按钮转成电影片断类图符。按Ctrl+F8新建电影片断类图符scroller,把scrollerbutton拖进来即可。
             

  现在我们的准备工作基本上完成了。回到主场景,先把textmovie拖到编辑画面中,双击该实例,设置实例名为text。然后把滑块scroller拖到文本text的右边适当位置,使其上端与text的上端平齐。改变这一层的名字为text & scroll

  新建一个层,用于绘制滑块所需要的滑槽,也就是滚动条。把这一层拖到文字层的下面,用矩形工具绘制如上面示例中所示的滑槽。改变该层的名字为scroll bar

  如果愿意,还可以再新建一个层,为文本窗口外面套一个边框,这样可以美观一些。

  现在我们来分析一下如何实现将鼠标放在文本中触发文本上下卷动以及滑块同时上下移动的效果。具体的说,就是当鼠标位于文本上半部分时文本向上卷动,位于下半部分时文本向下卷动。要实现这一点,我们必须要获得鼠标当前的位置坐标,以便进行判断决定下一步的方向。所以,我们还要引入一个隐形的电影片断,把它锁定在鼠标上,通过获取它的属性来得到鼠标的位置。所谓隐形的电影片断,就是空白的电影片断,里面没有对象,但可以设置Actions。 

  我们先来获取文本窗口的有关数据。按Ctrl+Alt+I打开对象监控板。用鼠标点中textmovie文本实例。这时出现如下图左所示的数据,其中xy分别为该文本左上角的坐标。wh分别为窗口的宽度和高度。因为我们需要当鼠标移动到文本上时才触发事件。如果设鼠标当前的位置为(x,y),则必须满足x>左边界 且 x<右边界 且 y>上边界 且 y<下边界的条件文本才能根据需要上下卷动。根据下图所示,我们可以轻松地得到所需的数值。左边界=128,右边界=128+218=346,上边界=84,下边界=84+277=361。同样,我们还可以获得滑块的位置数据,见下图右。注意到滑块上限位置中心y坐标值为102。然后,我们暂时把滑块移动到滚动条最下端,再次获得下限位置中心的y坐标值为342(注意把滑块恢复原位。这些数值将在下面的Actions中用到。

  

  按Ctrl+F8新建一个电影片断类图符blank。在第1帧双击设置如下Actions

01  Set Variable: "/:x" = GetProperty ( "/locator", _x )
02  Set Variable: "/:y" = GetProperty ( "/locator", _y )
03  If ((/:x > 128 AND /:x < 346) AND (/:y > 84 AND /:y < 361))
04    If (/:y < 222)
05     If (GetProperty ( "/scroller", _y ) > 102)
06      Set Property ("/scroller", Y Position) = GetProperty ( "/scroller", _y ) - 3
07     End If
08     Begin Tell Target ("/text")
09      Go to Previous Frame
10     End Tell Target
11    Else
12     If (GetProperty ( "/scroller", _y ) < 342)
13      Set Property ("/scroller", Y Position) = GetProperty ( "/scroller", _y ) + 3
14     End If
15     Begin Tell Target ("/text")
16      Go to Next Frame
17     End Tell Target
18    End If
19   Else
20    Begin Tell Target ("/text")
21     Stop
22    End Tell Target
23   End If

  下面我们来说明一下这样设置的含义:

  在1、2两句中,我们设置了两个全局变量xy,它们的值分别为电影片断locator所在位置的xy坐标。locator实际上就是我们现在在做的这个名为blank的图符在主场景中的一个实例的名称。等这个图符做好后,我们就把它放到主场景中命名为locator,并同时把它锁定在鼠标上。所以xy的值也就代表了鼠标当前的位置。

  第3句是判断,我们在上面已经介绍了这些数字的由来,所以这句是判断鼠标是否位于文本上。

  第4句在前面判断的基础上进行再判断,即如果鼠标位于文本上且y坐标小于222时,进行下面的操作。222约为整个文本y坐标的中心,由(84+361)/ 2取整得到。如果y<222,则表示鼠标位于文本的上半部分,文本应向上卷动。

  第5句在前面两次判断的基础上,判断滑块是否已经到达上限,即滑块是否已经不能再向上移动。因为在文本移动的过程中滑块也要同时移动,所以如果滑块已经到达最上端,即使鼠标位于文本的上半部分,也不再移动文本和滑块。102为滑块的上限,我们上面已经说明。这一句表示如果滑块未到达最上端时执行下面的语句。

  第6句更新滑块的y坐标值为原值-3。我们刚才做图符textmovie时设置文本卷动一共为80帧。因为在文本移动的同时滑块也要移动,滑块移动的总距离为下限-上限=342-102=240。由于240 / 80 = 3。所以textmovie每卷动1帧,滑块也要相应移动3个单位的距离,这样才能保证同步。

  第7句为判断滑块位置结束。这三句设置了滑块的位置变化,下面我们还要设置文本的卷动变化。

  第8句设置要进行操作的MovieCliptext

  第9句设置跳转到textmovie当前帧的前一帧执行,即文本向上卷动少许。

  第10句结束第8句中的设置。

  第11句到第18句为设置如果鼠标在文本下半部分时所要执行的操作,思路同上第4句到第10句。

  第19句到第23句判断当鼠标位于文本外时,将停止文本的卷动。

  这一帧的Actions设置好以后,按Ctrl+Alt+C复制该帧,用鼠标左键点一下第2帧,按Ctrl+Alt+V粘贴,这样这两帧具有相同的内容。

  这个隐形电影片断做好了,我们把它放在主场景中任意的位置上,画面中以圆圈代表,然后设置它的实例名为locator

  在主场景新建一个层,用于加Actions控制。双击第1帧,加入Actions如下所示:

1  Start Drag ("/locator", lockcenter)
2  Set Property ("/scroller", Y Position) = 102
3  Set Variable: "scrollx" = GetProperty ( "/scroller", _x )
4  Set Variable: "scrolly" = GetProperty ( "/scroller", _y )

  第1句设置隐形电影片断locator可拖动,并锁定中心在鼠标上。

  第2句设置滑块的初始位置y坐标为102。

  第3句和第4句分别定义两个变量获取滑块当前位置的x和y坐标。

  这样我们基本上做好了当鼠标位于文本上时文本卷动的动画。下面我们再接再厉,把拖动滑块也能使文本卷动的动画做好,使效果更完善。

  进入scroller的编辑画面,双击scrollerbutton的实例,进入实例属性窗口,选择Actions。设置如下:

01  On (Press)
02    Start Drag ("/scroller", L=373, T=102, R=373, B=342, lockcenter)
03  End On
04  On (Release, Release Outside)
05    Stop Drag
06    Start Drag ("/locator", lockcenter)
07    Set Variable: "/:scrolly" = GetProperty ( "/scroller", _y )
08    If (/:scrolly = 102)
09     Begin Tell Target ("/text")
10      Go to and Stop (1)
11     End Tell Target
12    Else
13     Begin Tell Target ("/text")
14      Go to and Stop (Int((/:scrolly - 101) / 3))
15     End Tell Target
16    End If
17   End On

  第1到第3句设置当鼠标在滑块上按下时,可以拖动滑块。但滑块只能在指定的范围(滚动条)内拖动。这个范围的设置如下图所示,它实际上是一条直线,所需的数值在上面的对象监控板上都可以获得。

  下面的语句设置当鼠标释放时,怎样根据滑块的位置计算出文本应该卷动的帧数。

  第5句设置鼠标释放时滑块不再被拖动。

  第6句和第7句前面有所解释。

  第8句到第11句设置当滑块已经到达最上端时,则textmovie应该停在第1帧上,也就是文本最初的位置上。

  第12句到第16句设置当滑块不在最上端时,textmovie应该播放到的帧数。这个计算方法就不再多说了,只需要记住滑块位于最上端时停在第1帧,位于最下端时停在最后一帧也就是第80帧就行了,中间的帧用线性插值就可以写出这个公式来。

  这样,我们就完成了整个动画。不知道大家理解的怎样,反正讲解Actions实际上是在讲解编程,对我来说,要讲清楚还是一件很困难的事,所以大家还要多思考,亲自动手做一做,才能更好地掌握Actions的用法。这里是这个示例的源代码。

 

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

 


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集




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

    版权所有 中华网