DW制作会移动的广告条

Mc苏小哲

Mc苏小哲

2016-02-19 21:26

下面图老师小编跟大家分享DW制作会移动的广告条,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

  在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia Dreamweaver中的Layer(层)和Timeline(时间轴)功能,还得准备两张大小基本相同的广告图片。我们已最新版本Dreamweaver4.0(英文版)为例,制作移动的广告条。 

  一、用Dreamweaver打开任意一个网页,空白页也可。在菜单中选择“插入Insert”- “层Layer”,即看到网页中多了一个空白Layer1,你也可以为他命名。再将光标点到空白Layer1内,选择“插入Insert”- “interactive Image”- “rollover image”,在弹出的对话框中分别插入你的广告条的图片(请注意original image 表示第一张图片,rollover image 表示当鼠标移到第一张图片时,又出现的图片,而且一定要把preload rollover image选中),调整层大小,使层尽可能与图片大小相近。

  二、在菜单栏选择“修改Modify”- “时间轴Timeline”- “添加对象到时间轴Add object to Timeline”。点击后,弹出对话框,告诉你只有图象和层才能添加到时间轴。对话框按确定后,我们选中Layer(单击层标记或层边界,或用层面板选择一层,当一个层被选中时,层边界会显示出调整大小手柄,按住鼠标左键不放,拖进时间轴动画栏的第一频道,即面板上竖写1,2,3等等的“1”那行,时间轴里面马上增加了一个默认的15帧动画。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  然后,单击动画栏最后关键帧标记,再选中页面中的层Layer1,将它拖动到动画的结束点,或者在“层的属性面板”改变层的“左L”属性大小来确定结束帧层的位置。此时,页面中显示了从动画起始位置到结束位置有一线条,这就是层的运动轨迹。要想让页面打开时候它就开始运动,就在“时间轴TimeLine”面板上的“自动播放Autoplay”前打勾,如图3所示:按在时间轴上中部的“- ”箭头不放,就可以直接预览这直线动画了,或者按下F12键预览。

  接下来,我们要进行一系列美化工作,因为这个简单的直线运动效果并不美观,而且广告图片也没有产生变化。

  三、改变时间栏的属性产生移动变化

  (1)在动画移动距离不变的情况下,改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧,在上面预览时候就感到速度有点快。要改变速度,我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放,向右拖动至你所想要的结束帧,例如75帧处,放开鼠标。此时,结束帧的空白小圆也移至到了第75帧处。按F12预览一下,动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况下,改变了动画移动的速度,即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置,就会产生各种不同速度效果,读者可以自己试着尝试。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  (2)产生曲线的运动。上面做的动画只是简单的直线运动,如果改变成曲线的运动,美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置(只要学习过Flash的,这点非常容易理解)。

  a.在“时间轴面板动画栏”上添加一个关键帧: 选择动画栏的第一频道中你想要添加关键帧处, 单击鼠标右健,选择“add keyframe”,即刻在插入点位置添加一个关键帧。

  b.在添加的关键帧处移动层:在保证选中了后来添加的关键帧下,选择页面中的层,移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧,再移动层,使产生的曲线移动更加光滑。按F12键预览,曲线效果是不是比以前的直线效果好多了?

展开更多 50%)
分享

猜你喜欢

DW制作会移动的广告条

Web开发
DW制作会移动的广告条

Photoshop制作绿色风格的广告条

PS PS基础
Photoshop制作绿色风格的广告条

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Photoshop样式教程:制作斜纹水晶广告条

PS PS基础
Photoshop样式教程:制作斜纹水晶广告条

Banner广告条中的字体设计

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
Banner广告条中的字体设计

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Flash CS4制作汽车广告条教程

FLASH flash教程 autocad教程
Flash CS4制作汽车广告条教程

两边静止的广告条

Web开发
两边静止的广告条

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript判断浏览器类型及版本

JavaScript判断浏览器类型及版本

Access 2000教程:20.3 生成MDE文件

Access 2000教程:20.3 生成MDE文件
下拉加载更多内容 ↓