查看完整版本: 用Dreamweaver实现漫天花雨效果

爱你不要你 2007-8-31 18:54

用Dreamweaver实现漫天花雨效果

出自:网络

        淡蓝色的天空下,一朵朵花瓣随风飘下,慢慢的在屏幕中飘荡。你一定要说这种效果用FLASH可以实现。其实用DREAMWEAVER也可以很轻松的实现!

       Dreamweaver之所以能够超过Frontpage而成为网页设计师的首选设计工具,在于它对DHTML的强大设计功能,上面所说的效果,其实是DHTML的一种。但是使用Dreamweaver,你无须去编写冗长的代码,在DW的窗口里几个拖放,就能轻松搞定。

       首先用Firework或Imageready一类的软件制作出几幅动态的GIF花瓣图片来。以ImageReady3.0为例子。按Ctrl+N 新建一个文件,大小100*100左右,背景色可根据网页的背景自行设定。按Ctrl + Shift + N新建一层,取名Flower1,用勾画工具(Polygonal Lasso Tool),勾画出一个花瓣的外形,如图1所示。然后将前景色设为粉红色(颜色代码为:FF99FF),按Edit / Fill 填充,然后在层面版的Flower1上按右键,选择Layer Style / Stroke ,如图2所示。在弹出的Stroke面板里的选择色彩的地方选择一个比刚才的粉红略深的颜色,(颜色代码为:C764B4),Size选择为1,这样花瓣就被描边,看上去更真实一些。这样一个花瓣就制作完成了。

[img]http://www.cnucw.com/upimg/allimg/070831/1852530.gif[/img]

[img]http://www.cnucw.com/upimg/allimg/070831/1852531.gif[/img]

下面我们来让花瓣动起来。将Flower1复制一层,在层上按右键,选择Duplicate Layer。取名为Flower2。打开Imageready的动画面板,操作方式为:Window / Show Animation,出现如图3的动画面板。按下最下面一排倒数第二个按纽,新建一个动画影格。回到并选中第一影格的位置,在层面板上将Flower2层隐藏。操作方式为单击层前的那个眼睛,如图4所示。

[img]http://www.cnucw.com/upimg/allimg/070831/1852532.gif[/img]

[img]http://www.cnucw.com/upimg/allimg/070831/1852533.gif[/img]

然后在动画面板上,选中第二影格的位置,回到层面板,显示Flower2层,隐藏Flower层。然后选中Flower2层,按Ctel + T,这时花瓣处于自由变换状态,可以用鼠标左右上下移动来改变花瓣的形状。如图5所示。

[img]http://www.cnucw.com/upimg/allimg/070831/1852534.gif[/img]

将第二影格所显示的Flower2层的花瓣用自由变换做一点小的变化。然后再用上面所讲述的方法,新建第三影格和Flower3层,再用自由变换做一些小的变化,依次可以做6层左右,注意最后一个影格与第一个影格的连续性。每一个影格里只能显示相对的图层,其余的图层要隐藏起来。

其斤 2007-9-5 18:54

:a15 :a15

fengxiaokun 2008-5-4 14:36

后面的呢abc::05 abc::05

快乐灵林 2008-5-5 21:30

还有呢?后面怎么没呢,楼主辛苦点继续写完吧!

zhangtl333 2008-5-29 18:09

网页方面还是太生
多跟大家学下

lizhaohui 2008-6-22 16:30

晕,看不懂abc::01

kra 2008-6-24 04:20

额。。。咋只有IR的教程没看到DW的教程abc::05

小橙 2008-6-24 11:04

后面没了吗???
晕……

lmzzy 2008-9-18 17:36

额,谢谢,果然找到了
激动....

追梦剑客 2008-9-18 19:35

看得不太懂,不过还是要支持一下

颜非鱼 2008-9-22 02:25

这个教程好像不完整啊abc::18

婳錵 2008-10-3 00:55

是不是没有写完啊?
页: [1]
查看完整版本: 用Dreamweaver实现漫天花雨效果