网站建设| 数据库类| 图形图象| 程序设计| 现代办公| 操作系统| 考试认证| 网络技术| 软件工程| 电脑相关| 文学作品
网站开发| 网页制作| 操作系统| 图象图形| 考试认证| 数据库类| 程序设计| 硬件技术| 现代办公| 网络技术| 笑话频道
 
您的位置: 电脑书库首页-> 电脑文摘-> 网页制作-> DreamWeaver-> 时线制作的简单的例子

时线制作的简单的例子
作者:佚名 来源:InterNet 加入时间:2003-7-20
相关文章
  • 时线的应用
  • 相关书籍:

    下面我通过一个简单的例子展示用时线编辑动画的具体步骤。为了使动画更生动,我选择了一幅GIF动画(当然也可以用时线一帧一帧地做图片动画,这里选择了
        
         一幅现成的图片,另外用时线面板做的动画文件要小,因为一般情况下可以用jpg图片串接成一幅动画),然后指定其运动的路径来达到动感十足的页面效果。首先建
        
         立一个层,在这个层中加入选中的GIF图片,在用Dreamweaver编辑的时候,GIF的动画是不会动起来的,最后的效果要在浏览器中才能看到。在建立的层中插入图片后
        
         的效果如图b二。然后我们选中这个层将它加入时线中(使用Modify菜单的“Add Object To Timeline”命令)。
        
        


           
        
           这时的时线面板增加了新的项目,并且这个项目被选中,如图b三。这时只有两个关键帧,要做一幅完整的动画是不够的,所以还要加入新的关键帧。我们再按照
        
         上面的方法加入四个关键帧。然后选中整个项目,将层移动到初始位置。下面我们为这幅图片设置运动路径。首先选择最后一个关键帧,将图层移动到动画终结的位置
        
         上,这时出现一条动画运动的路径,如图b四所示。然后选择倒数第二个关键帧将图层移动到相应的位置上,这时运动路径也会跟着变化。接着我们依次对倒数第三、
        
         倒数第四个关键帧做类似的设置。如果感觉路径的形状不理想,可以选中有关的关键帧重新设置。完成以后的路径和时线面板如图b五,图中显示的是第三帧。这时的
        
         效果是天鹅沿选定的路径飞行,飞行的速度可以通过改变时线面板上的项目长度进行调整,以使天鹅展翅的速度和飞动的速度相一致。如果用Dreamweaver的时线面板
        
         制作动画,调节时间就方便多了。
        


        


           如果感觉动画不够连贯可以增加每秒的帧数。完成以后会发现天鹅飞到目的地后又跳回到起始位置重新开始,如果让天鹅绕一个圈飞回来效果会好一些。因此我又
        
         使用Adobe ImageReady 将原始动画一帧一帧地翻转过来构成新的动画。然后回到Dreamweaver中增加一些关键帧,使飞行路线成为一条封闭圆滑的曲线。还有一个问题
        
         需要解决,使天鹅飞到左边后改变动画文件源,接下来的飞行使用新做的GIF动画。我们可以这样做,选中图层中的GIF图片,选Modify菜单中的“Add Object To
        
         Timeline”命令,这时时线面板增加了一个新的项目,并在左端表明项目的类型为“image”,如果监视块不在初始位置,就要点住新项目使其在初始位置开始。如图
        
         b六。新的项目有两个关键帧,对这幅动画已经足够了。将第二个关键帧的位置调整到层的第六帧,也就是图层运动到最左边的位置。选中这一帧,在属性面板中将图
        
         片的源位置(“src”)改为刚刚做的GIF动画名。整个动画完成。最后的时线面板如图b七,显示效果如图b八。我们可以再进一步将刚完成的动画加到网页上,使这只天
        
         鹅在文字上飞行,这种效果足以让最挑剔的浏览者瞠目。
        


    [文章录入员:tonny]

    相关文章
  • 时线的应用
  • 相关书籍:
    本站推荐内容

    近期主机类热搜关键词:
    美国服务器 美国服务器租用 海外服务器租用 国外服务器租用

    DreamWeaver
    DreamWeaver
    FrontPage
    FireWorks
    Flash
    HTML
    其它
    电脑教程阅读排行
    ·Dreamweaver基础教程和...
    ·网页制作教程《网页制作基础教程》...
    ·网页制作教程《网页制作基础教程》...
    ·Dreamweaver MX中文...
    ·Dreamweaver MX 2...
    ·详解在 Dreamweaver ...
    ·用Dreamweaver创建导航...
    ·如何在网页中加入菜单
    ·Dreamweaver技巧十二招
    ·DreamWeaver超级技巧《...