Dreamweaver3 图层应用技巧(六)

Lo掳

Lo掳

2016-02-19 20:46

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的Dreamweaver3 图层应用技巧(六)懂设计的网友们快点来了解吧!

  今天我讲的是一个可以用鼠标到处拖动的滚动板。先看看例子,用鼠标拖拖看拖不拖的动,拖不动要跟我说一声:)

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

  这是本教程的最后一个例子,也可以说是压轴戏,我会讲得很详细,这个例子我花了一点时间想,为把它做好看一点,还加了一个图片背景。下面我就以这个例子的实现来讲步骤,你在具体操作时要会举一反三。

  1.你得先找一个背景图片,把这个图片放在一个图层中,此图层名为layer1,这图层就是滚动板的样式。

  2.在layer1中插入一个子层layer2。按住Ctrl键不放,点击Object对象浮动条中的 ,在layer1中画个图层,大小如下图,这个图层就是用来控制播放文本区域大小的。

  3.再在layer2中用同样的办法插入一个子图层layer3,在图层layer3中写入你想要发布的消息,这个图层的宽度一定要小于layer2的宽度,它的高度不限。现在为止已在layer1中插入2个子层。按F11调出layers浮动窗口,看看是不是与下图相同。

  4.选中layer2按Ctrl+F3调出图层属性编辑器,clip项的L和T填0,R填228,B填119。先填上再来解释,Clip它控制着你滚动板的显示区域,L,T,R,B分别是left,top,right,bottom的缩写,R,B这两个参数你就填该层的宽与高,当然你也可以改,根据后来显示的效果。如下图:

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

  5.现在该让图层layer3动起来了,怎样动?用Timeline来搞定,按Ctul+F9调出Timeline浮动面板。用鼠标拖layer3到时间轨道来。

  6.本例中图层是从下往上滚动,在第一帧处把图层layer3拖到layer2下端的边缘。再在最后一帧处,把图层拖到layer2的上端边缘,就这样做了两个关键帧,你可以拖动时间轴中的红色播放块,看图层layer3是不是运动的。

  7.由于系统默认的动画长度为30帧,播放速度是15帧每秒,这样的参数显然不适合滚动板,移动的太快了,在本例中,我把动画长度延长了,并把帧的播放速度该为2Fps,如下图。到现在为止滚动板已基本做完,有些参数你一定要耐心多设几遍,来达到最佳效果。

  8.现在该让此图层可以用鼠标拖动,在第一帧Behaviors轨道处双击鼠标,会出现一个大家熟悉的Behaviors窗口,点击 选Drag layer项即可。完工了,你可以按F12预览。

展开更多 50%)
分享

猜你喜欢

Dreamweaver3 图层应用技巧(六)

Web开发
Dreamweaver3 图层应用技巧(六)

Dreamweaver3 图层应用技巧(五)

Web开发
Dreamweaver3 图层应用技巧(五)

s8lol主宰符文怎么配

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

Dreamweaver3 图层应用技巧(一)

Web开发
Dreamweaver3 图层应用技巧(一)

Dreamweaver3 图层应用技巧(二)

Web开发
Dreamweaver3 图层应用技巧(二)

lol偷钱流符文搭配推荐

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

Dreamweaver3 图层应用技巧(三)

Web开发
Dreamweaver3 图层应用技巧(三)

Dreamweaver3 图层应用技巧(四)

Web开发
Dreamweaver3 图层应用技巧(四)

lolAD刺客新符文搭配推荐

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

PHP+MYSQL网站注入扫描

PHP+MYSQL网站注入扫描

玩转Dreamweaver 8:了解CSS层叠样式表

玩转Dreamweaver 8:了解CSS层叠样式表
下拉加载更多内容 ↓