打印

[Dreamweaver教程] 如何制作会移动的广告条

如何制作会移动的广告条


6 _2 b( B* \9 ?6 E2 a6 N团购网站系统,团购网程序bbs.163k.com5 i7 E  _4 V# f0 R+ ?
在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到macromedia dreamweaver中的layer(层)和timeline(时间轴)功能,还得准备两张大小基本相同的广告图片。我们已最新版本dreamweaver4.0(英文版)为例,制作移动的广告条。 163k团购网站系统官方服务论坛/ Y  D, n$ H% a' y. \# z2 s
bbs.163k.com* r! v7 w; |& X  A
  一、用dreamweaver打开任意一个网页,空白页也可。在菜单中选择“插入insert”-> “层layer”,即看到网页中多了一个空白layer1,你也可以为他命名。再将光标点到空白layer1内,选择“插入insert”-> “interactive image”-> “rollover image”,在弹出的对话框中分别插入你的广告条的图片(请注意original image 表示第一张图片,rollover image 表示当鼠标移到第一张图片时,又出现的图片,而且一定要把preload rollover image选中),调整层大小,使层尽可能与图片大小相近。团购网站系统,团购网程序  S+ S8 o" G! _/ `# y& l2 p

& n" T- M; c, W; ]1 D/ {+ i, S163k团购网站系统官方服务论坛团购网站系统,团购网程序9 X& I+ Q" T. H& @* w
  二、在菜单栏选择“修改modify”-> “时间轴timeline”-> “添加对象到时间轴add object to timeline”。点击后,弹出对话框,告诉你只有图象和层才能添加到时间轴。对话框按确定后,我们选中layer(单击层标记或层边界,或用层面板选择一层,当一个层被选中时,层边界会显示出调整大小手柄,按住鼠标左键不放,拖进时间轴动画栏的第一频道,即面板上竖写1,2,3等等的“1”那行,时间轴里面马上增加了一个默认的15帧动画。为互联网事业发展提供源动力!2 W3 P, W  C: L( K

/ n8 ~1 [( c1 x' u" |163k团购网站系统官方服务论坛  然后,单击动画栏最后关键帧标记,再选中页面中的层layer1,将它拖动到动画的结束点,或者在“层的属性面板”改变层的“左l”属性大小来确定结束帧层的位置。此时,页面中显示了从动画起始位置到结束位置有一线条,这就是层的运动轨迹。要想让页面打开时候它就开始运动,就在“时间轴timeline”面板上的“自动播放autoplay”前打勾,如图3所示:按在时间轴上中部的“-> ”箭头不放,就可以直接预览这直线动画了,或者按下f12键预览。163k团购网站系统官方服务论坛# J5 h7 B# ]! x% A& S

: R5 {; z# ]  b5 G2 D: L! r163K网站系统官方论坛  接下来,我们要进行一系列美化工作,因为这个简单的直线运动效果并不美观,而且广告图片也没有产生变化。
: ]0 T0 |: h, I! ^- ~163k团购网站系统官方服务论坛
/ |5 w6 k* ?  b* B. L2 g& J" J  三、改变时间栏的属性产生移动变化
' b$ Q+ F2 n& A( T为互联网事业发展提供源动力!2 V" Q# |3 v% i4 ?- T3 C1 I
  (1)在动画移动距离不变的情况下,改名动画移动速度。因为我们拉层进时间轴面板起始时候的帧数是默认的15帧,在上面预览时候就感到速度有点快。要改变速度,我们就得改变动画总共帧数。鼠标左击选中“时间轴面板”中的“第一频道”结束帧不放,向右拖动至你所想要的结束帧,例如75帧处,放开鼠标。此时,结束帧的空白小圆也移至到了第75帧处。按f12预览一下,动画的移动速度明显变慢。但是要注意的是我们只是在保持动画运动轨迹的长度不变的情况下,改变了动画移动的速度,即时间轴上的帧数。如果在同时改变改变起始和结束帧层的位置,就会产生各种不同速度效果,读者可以自己试着尝试。
$ s. B. |: X5 @, ?7 n. P为互联网事业发展提供源动力!
( r) \, V: f! c( y7 U为互联网事业发展提供源动力!  (2)产生曲线的运动。上面做的动画只是简单的直线运动,如果改变成曲线的运动,美观程度就大大的加强了。曲线运动中最主要的就是关键帧的设置(只要学习过flash的,这点非常容易理解)。
2 E  V. m$ h, C5 f为互联网事业发展提供源动力!
2 H- \8 \9 H# J为互联网事业发展提供源动力!  a.在“时间轴面板动画栏”上添加一个关键帧: 选择动画栏的第一频道中你想要添加关键帧处, 单击鼠标右健,选择“add keyframe”,即刻在插入点位置添加一个关键帧。163K网站系统官方论坛$ ^, F$ y' A; J

$ L5 S7 g( L' i9 T% h! c4 f7 \163k团购网站系统官方服务论坛  b.在添加的关键帧处移动层:在保证选中了后来添加的关键帧下,选择页面中的层,移动层至你所想要的地方。此时直线变化成了曲线。你可以多添加几个关键帧,再移动层,使产生的曲线移动更加光滑。按f12键预览,曲线效果是不是比以前的直线效果好多了?bbs.163k.com% B% m" g+ o; y* a+ @# b
团购网站系统,团购网程序, V- Q! e) b$ L1 h
  另附:在使用4(英文版)的过程中,一次想用layer作动态广告,但无论如何都无法插入layer和table,但无论是重新安装还是汉化都无法使用,由于同事使用过,而且同事也正在学习英文版,因此我想是不是在哪个地方的设置被修改的原因呢?找完所有的设置才发现:只要把 “view菜单下的table view layout view修改为standard view,就可以插入layer和table了。
0 q9 B* [% ~6 Bbbs.163k.com" l% D( `( Y4 Q

" n7 f* i) @3 K5 S( Q7 G3 L团购网站系统,团购网程序为互联网事业发展提供源动力!* v( g$ ?. n9 m1 L. y5 x
团购网站系统,团购网程序& Y1 ]9 F% B, H) K; E
bbs.163k.com) E* Y8 T+ J! ?) |6 B! n

TOP

返回顶部
AYBlue

Processed in 0.046842 second(s), 7 queries.

当前时区 GMT+8, 现在时间是 2009-1-8 08:46 京ICP备06054220号

清除 Cookies - 联系我们 - 163K.com - Archiver - WAP