创建简单的直线时间线动画
时光线经由过程在分歧的时光转变层的地位、年夜小、可见性和叠放次序等来创立动画。时光线不克不及直接掌握页面中的对象,它掌握的是放置这些对象的层,假如要使图像、文本等对象发生动画后果,必需将其置于层中。
下面我们创立一个最简略的时光线动画,以对时光线有一个最根本的懂得。
1.设计目的
树立一个做直线活动的时光线动画。
2.素材预备
网页中须要用到当地站点image文件夹下的两个图像文件:ing8_1.jpg,img8-2gif.ILLI!解释
为网页添加配景图像的办法如下:按Ctrl+J键,在弹出的"PageProperties"对话框中,单击"BackgroundImage"栏旁的"Browse"按钮,从弹出的"SelectIrmageSource"对话框中,选择image目次下的img8-1jpg文件,单击"Select'按钮,回到"PageProperties"对话框后,单击"OK"按钮。
3.实现步调
(1)在页面中添加一个新层,在层中插入图像ing8-2,gif,然后将层移动到动画的肇端地位。
(2)在菜单栏中选择"Window"→"Timelines"敕令打开时光线面板(假如时光线面板已打开这一步可省略)。
(3)选摘要创立动画的层。
(4)单击时光线面板中的弹出菜单按钮上,在弹出的菜单中选择"AddObject(添加对象)"或用鼠标拖动图层到时光线的第一帧处。
(5)当第一次在时光线中添加对象时,会弹出提醒框,告知你可以转变该层的年夜小、地位、层次序以及可见性。单击“OK"按钮,这时在时光线通道中将涌现一个紫色动画条,动画条中显示了层的名称,如图所示。
(6)单击动画条尾部的症结帧地位(留意播放头也跟着移动到该处),将动画层移动到动画停止的地位,这时从动画肇端地位到停止地位有一条线显示,这就是层的活动轨迹,如图所示。
(7)按播放按钮,可直接在网页中预览时光线动画。
(8)假如想在阅读器中预览动画后果,则应进行以下设置:
①选中"Autoplay"复选框,不然阅读器中的动画是不会主动播放的;
② 逃选中"Loop"复选框,不然动画在阅读器中只播放一次;
③预览网页,网页保留到网站扶植当地站点的example文件夹下,文件名为ex8-1.htm。