中国视觉之窗
  首页 资讯 画廊 艺术 视角 教程 网络学堂 创意集中营 高校 第七视觉 刊物 人才 论坛 搜索 视觉博客 蚁盟工作室   QQ群:10173223
·中国视觉之窗欢迎您 []
全网 站内

推荐文章
赞助商

广告时间
您的位置:  教程首页 >> 网络学堂 >> DreamWeaver >> Dreamweaver教程-实现飘浮光球特效
Dreamweaver教程-实现飘浮光球特效
作者: ┊ 时间:2008-04-30 16:38:30 ┊ 来源:互联网 ┊ 浏览次数:12 ┊ 在线投稿



      用Dreamweaver可以做出很多特效,即使你不会Javascript也没关系,因为Dreamweaver为我们提供了时间轴和行为两大工具。很好地利用它们就能够做出各式各样的效果,本例所做的漂浮光球特效就是一个很好的例子。具体制作步骤如下:
第一步:准备一张图片作为背景图,大小为240x180。

第二步:在页面中建立层layer1,大小和所选的背景图片一致,然后把背景图插入这个层内。

第三步:再建立一个层layer2,这个层将被制作成漂浮的光球。层的大小就是球的大小,位置重叠在层layer1上,其余的层属性均采用默认值。

第四步:让层layer2动起来。将层layer2拖曳至时间轴,然后在该层的右键菜单中选择“记录路径”,接着用鼠标拖曳层画出一条闭和路径,这个路径就是光球运动的轨迹。最后在时间轴中的“自动播放”和“循环”前打上勾,按F12键预览一下,看看速度是否合适,如不满意可以调节时间轴中帧的总数或者每秒播放的帧数,直到符合要求为止。

第五步:控制动画的播放。打开行为面板,选择层layer1,选择事件中的“停止时间轴”,再选择动作中的“onMouseOver”,这样就完成了一组动作事件,即鼠标移至层layer1时动画停止播放;然后再增加一组动作事件:事件为“播放时间轴”,动作为“onMouseOut”,即在鼠标移出层layer1时,动画接着播放。

第六步:使层可以拖动。打开行为面板,选择事件中的“拖动层”,将可被拖动的层确定为layer2,这样层layer2也就是光球就可以在网页中任意拖动了。

第七步:制作光球。打开时间轴,选择首帧,在其右键菜单中选择“添加行为”,这时就打开了行为面板,选择事件中的“改变属性”,这时出现“改变属性”对话框,在“对象类型”下拉菜单中选则“div”即层,“命名对象”选择“layer2”,“属性”选择“style.filter”,在“新的值”框中输入下列代码:
mask(color=#ffffff) alpha(opacity=100,style=2)

这里用了两个滤镜,可以产生光球效果,最后“确定”。

第八步:使光球变色。在时间轴中找几处关键帧,按照第七步的方法设置动作事件,注意将mask滤镜的color值改成你喜欢的颜色就可以了。

好了,现在大功告成,赶快存盘看看效果吧!



本文链接:


负责编辑:dreamtang

相关文章 本栏最新
Dreamweaver教程-小技巧:Dreamweaver的应用源格式
Dreamweaver教程-如何用 Dreamweaver 批量做web网页
Dreamweaver教程-在Dreamweaver中插入有颜色的直线
Dreamweaver教程超级技巧之文字特效

 Dreamweaver教程安装方法
 Dreamweaver制作网页13种...
 网页制作之用Dreamweave...
 在Dreamweaver8.0.2中插...
 驯服不听话的网页表格
 去除DW MX 2004表格宽度辅助
 DW MX 2004代码编辑新功能
 表格边框教程
 用Dreamweaver进行网页优化
 Dreamweaver制作拖拽效果


发表评论  ┊  告诉好友  ┊  打印此文  ┊   关闭窗口TOP

未经授权严禁转载本站任何内容,本站保留依法追究法律责任的权利。凡通 过本站授权的合作站点,转载本站文章必须注明来源为---中国视觉之窗,作者和来自我站的链接必须保 留,转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。 本站所刊登的任何文章、作品,不代表中国视觉之窗的立场。本站转载他站的文章,主要用于传播信息或 理念思维。没有丝毫商业意图,并清晰标注稿件真实来源。如侵犯你的版权,请联系删除!
友情链接 | 诚聘英才 | 关于我们 | 版权声明 | 联系我们 | 广告服务 |
中国视觉之窗 艺术 设计 中国艺术设计的殿堂 中国第一视觉门户
Copyright © 2007-2009 ymarting.com All rights reserved.Best view by IE6.x 1024*768
粤ICP备07513371号