4、精彩的图层世界

（2）会跑动的面板(下)

　　在“Timelines窗口”中上部的前面有E字样那个通道第十五帧处单击，按F8键调出“Behavior窗口”。点“+”按钮，选择“Show-Hide Layers”命令（图1）。

图1　隐藏cat1图层

　　设置cat1层不可见，cat2层可见（图2）。意思是当cat1动画播放到最后时，向右走的猫隐藏起来，向左走的猫出现。

图2　Timeline面板中的设置

　　接下来再制作一个Timeline动画。单击“Timelines窗口”右上角的小三角，选择“Add Timeline”命令，一个新的Timeline出现了，将其重命名为cat2，把layer1图层先右拖一下，露出选择层的手柄，然后选择此图层，把它拖到Timeline中。设置第一帧时图层的left值为0，第十五帧时图层的left值为-180。在第十五帧添加Behavior，设置cat1层可见，cat2层不可见（图3）。

图3　制作第二个timeline动画

　　注意，Timeline1与Timeline2中的两个停留位置必须相同，否则就会出现跳动的现象！

　　接下来我们给卡通图加上相应的语句，以便在单击它时开始播放动画。

　　选取cat1图层，选中cat1.gif图，单击“Behaviors”窗口中的“+”，选择“Timeline”项中的“Go to Timeline Frame”，指定从第一帧开始播放名为“cat1”的Timeline（图4） 。

图4　指定从第几帧播放动画

　　单击“OK”，“Behaviors”窗口中出现一个“onMouseDown”事件，单击事件名旁的向下小箭头，将事件名改为“onClick”（图5）。

图5　修改事件类型

　　再单击“+”，选择“Timeline”项中的“Play Timeline”，从下拉列表中选择要播放的动画，当前选项为“cat1”，点“OK”，又添加了一个“onMouseDown”事件，同样将其改为“onClick”事件（图6）。

图6　添加一个播放动画事件

　　这样当浏览者单击cat1.gif图时，页面就会播放由画面外移入画面内的动画，即名为cat1的Timeline。同样道理，选取cat2图层中的cat2.gif图像，指定从第一帧开始播放名为“cat2”的Timeline，并且单击（onClick）时开始播放这个Timeline动画。这样当浏览者单击cat2.gif图时，页面就会播放由画面内移出到画面外的动画，即名为cat2的Timeline动画。

　　最后别忘了，设置cat2图层为不可见。 好了，会跑的菜单做完了，启动浏览器看一下（图7），效果不错吧！

图7　观看会跑动的菜单最终效果

上一节　下一节   

谈谈您的看法