怎样去制作浪漫花雨效果图

　　小编相信很多人都喜欢浪漫的，如果漫天的花雨在你设计的网页上飘落，那该是多么浪漫啊！一朵朵花瓣随风飘下，慢慢的在屏幕中飘荡开来。这种效果用flash可以实现。但其实用Dreamweaver也可以很轻松的实现哦！所以说，DREAMWEAVER是一款很强大的软件，我们不可忽视。而且也要学习它。所以这次小编将为大家带来的是Dreamweaver教程：实现漫天花雨效果。Dreamweaver之所以能够超过Frontpage而成为网页设计师的首选设计工具，就是在于它对DHTML的强大设计功能，正如前面所说的效果，其实是DHTML的一种。但是我们在使用Dreamweaver，你也无须去编写冗长的代码，就是在DW的窗口里几个拖放，几个拖放的设置，就能轻松搞定这种效果，大家可以参考以下哈。

　　步骤①：我们首先需要用Firework或Imageready一类的软件制作出几幅动态的GIF花瓣图片来。我们就以ImageReady3.0为例子。然后按Ctrl+N新建一个文件，大小100*100左右，背景色可根据网页的背景自行设定。按Ctrl+Shift+N新建一层，取名Flower1，并且使用勾画工具（PolygonalLassoTool），勾画出一个花瓣的外形，如图1所示。然后我们可以将前景色设为粉红色（颜色代码为：FF99FF），按Edit/Fill填充，然后在层面版的Flower1上按右键，选择LayerStyle/Stroke，如图2所示。在弹出的Stroke面板里的选择色彩的地方选择一个比刚才的粉红略深的颜色，(颜色代码为：C764B4)，Size选择为1，那么这样花瓣就被描边，因为这样看上去更真实一些。那么这样一个花瓣就制作完成了，其实大家看过大概的思路，也不会觉得非常难的，并且我们的步骤也是非常的详细，所以大家尽可以放心。

　　步骤②：下面我们来让花瓣动起来。首先将Flower1复制一层，并且在层上按右键，选择DuplicateLayer。取名为Flower2。打开Imageready的动画面板，操作方式为：window/ShowAnimation，出现如图3的动画面板。按下最下面一排倒数第二个按纽，新建一个动画影格。我们就要回到并选中第一影格的位置，在层面板上将Flower2层隐藏起来。其实操作方式为单击层前的那个眼睛，眼睛的设计如图4所示。

　　步骤③：然后我们可以在动画面板上，接着选中第二影格的位置，回到层面板，这里的层面板就会先显示Flower2层，后隐藏Flower层。然后选中Flower2层，我们在按Ctel+T，那么这时花瓣正处于自由变换状态，我们就可以用鼠标左右上下移动来改变花瓣的形状。如图5所示。

　　步骤④：接着我们可以将第二影格所显示的Flower2层的花瓣用自由变换做一点小的变化。然后再用上面所讲述的方法，对于新建了第三影格和Flower3层，我们可以再用自由变换做一些小的变化，依次可以重复做6层左右，注意最后一个影格与第一个影格的连续性。明显地看出每一个影格里只能显示相对的图层，其余的图层要隐藏起来。

　　在我们做完后，在动画面板里，我们就需要按住Ctrl键，将所有的影格全部选中（注意要按住，再拖放），然后在0sec的地方按右键选择每一个影格之间的间隔时间，小编的建议是：我们在操作的时候尽量不要超过0.1秒。这样一个花瓣的动画就完成了。可以按动画面板上的播放键（那个三角形）来观看你做的动画花瓣。花瓣不规则的在原地变换移动，按上述的方法做几张大的，在100*100px，90*90px左右，用于近处的花瓣；也做几张小的，在60*60px左右，用于远处的花瓣。如果你怕麻烦的话，那么我们就可以在Imageready里做好一个动画，然后使用翻转功能（EDIT/Transform/），如果让图片不同角度的翻转，那样就出现的就是不同角度的变化，这样在做最后的效果的时候，就可以避免花瓣的单一性，单一性看起来会非常不协调的。

　　我们在打开Dreamweaver的时候，必须按Ctrl+N新建一个Html文档。然后按Insert/Layer，我们在插入一个图层，取名为“flower1”，并且在图层中按InsertImage，插入我们刚才所做的那几幅图片中的一幅，可以将图层的大小变得和图片的大小一样，然后点击选中该图层（选中后一定要是图6的样子才是选中了图层），确定选中图层而不是图片，然后选择Modify/Timeline/AddobjecttoTimeline，此时该图层就会加入等时线，这时候等时线上会出现两个空心的句号样的圆圈，用直线连接起来，两个圆圈表示是关键影格，确定了花瓣移动的轨迹。如图7所示。

　　步骤⑤：我们必须要确定等时线里红线在第一格的位置，然后在Dreamweaver的主面板里拖动图层到右上角，因为这一步是确认花瓣飘落的起点。再将等时线里的flower1层的最后一格直接拉到第60格的位置，然后确定那条红线在第60格的位置，小编认为60格的位置会比较好，其位置也是可以自己调整合适的状态，如果不然，那就会回到DW面板将flower1图层拉到屏幕的左下角，然而这一步骤是确定图片飘落的终点。注意确定起点和终点的时候，一定要看清红线的位置，红线的位置代表了你当前再做第几影格的操作。开始影格和终点影格一定要是关键影格。然后选中上方的Autoplay和Loop，如图8所示，图中的意思是自动运行和循环运行。那么这时候你可以按F12预览一下，这样你就已经可以看到花瓣沿一条直线在运动了。

　　步骤⑥：然而下面的操作就是我们让花瓣的运动显得更加柔和一点，更加无规则一点。其实在等时线面板里，我们就应该在第15影格的地方单击一下，然后确认等时线里的红线在第15格的位置，按右键，选择addkeyfreme，如图9所示，那么这时主面板的图层会自动移到第15格应该走到的位置，拖动图层到其他的地方（可以任意的拖动，取决于你想让这个花瓣如何运动），这一步是确认该图层移动到第15影格的时候应该在什么地方。然后将红线移到第30格、第45格的位置重复上面的动作，这个规格是很重要的，我们然后再按F12预览一下，此时花瓣就呈不规则的移动了。小编再次特别提醒：在插入等时线的一定要是图层而不能是图片，如果出现错误，那么花瓣就将不会移动，那么就不会漫天飘落。

　　步骤⑦：我们按照上面的做法，我们需要再增加一个图层，然后在图层中插入另外一幅稍小的图片，接着重复上面的动作，而且这个操作只不过是让图层移动的轨迹可以改变一下，那么只需要改边当选中某个关键影格的时候，其实图层在主面板的位置就可以了。以次类推，我们一般要加到Flower10层以上的样子，那么才会有满天花雨的效果，这效果就如同个性皮肤那样，所以这样也可以练习上个性皮肤，这些个性皮肤都可以自己做出来的。

　　小编结语：大家看完这个教程之后，有没有跃跃欲试？都想着自己尝试一下吧！其实生活中大家所使用的的QQ空间，微博个性皮肤等等，这些都是与本教程所教的弄出来的效果差不多的，而且方法也是很简单的，不同与PS，HTML5。所以只要大家运用得当，也可以做出像它们一样的效果哦，我相信你按照步骤来操作的话，那么你一定能够掌握，如果你有兴趣，你也可以自己尝试一下的，最重要的是千万不要粗心而忘记了其中的步骤，因为这些步骤，对于你们来说，真的是不难，而且小编把一些步骤的过程，都详细地描述出来了。你的一次实践就是你的一次进步，也是对我们的一次支持！所以恳请大家要认真地学习哦。感谢大家的支持。