<b>用Dreamweaver实现漫天花雨效果</b>[DW设计]
本文“<b>用Dreamweaver实现漫天花雨效果</b>[DW设计]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:
淡蓝色的天空下,一朵朵花瓣随风飘下,渐渐的在屏幕中飘扬.你一定要说这种效果用可以实现.其实用也可以很轻松的实现!
之所以可以超越FrontPage而成为师的首选工具,在于它对DHTML的强盛功效,上面所说的效果,其实是DHTML的一种.但是利用,你无须去编写冗长的代码,在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,这样花瓣就被描边,看上去更真实一些.这样一个花瓣就制作完成了.
图1
图2
下面我们来让花瓣动起来.将Flower1复制一层,在层上按右键,挑选Duplicate Layer.取名为Flower2.翻开Imageready的动画面板,操作方法为:Window / Show Animation,呈现如图3的动画面板.按下最下面一排倒数第二个按纽,新建一个动画影格.回到并选中第一影格的位置,在层面板上将Flower2层躲藏.操作方法为单击层前的那个眼睛,如图4所示.
图3
图4
然后在动画面板上,选中第二影格的位置,回到层面板,显示Flower2层,躲藏Flower层.然后选中Flower2层,按Ctel + T,这时花瓣处于安闲变更状况,可以用鼠标左右上下移动来改变花瓣的形状.如图5所示.
图5
将第二影格所显示的Flower2层的花瓣用安闲变更做一点小的改变.然后再用上面所报告的办法,新建第三影格和Flower3层,再用安闲变更做一些小的改变,顺次可以做6层左右,注意最后一个影格与第一个影格的持续性.每一个影格里只能显示相对的图层,别的的图层要躲藏起来.
做完后,在动画面板里,按住Ctrl键,将全部的影格全部选中,然后在0 sec的地方按右键挑选每一个影格之间的隔断时间,倡议不要超越0.1秒.这样一个花瓣的动画就完成了.可以按动画面板上的播放键(那个三角形)来傍观你做的动画花瓣.花瓣不法则的在原地变更移动,按上述的办法做几张大的,在100*100px,90*90px左右,用于近处的花瓣;也做几张小的,在60*60px左右,用于远处的花瓣.可以在Imageready里做好一个动画,然后利用翻转功效(EDIT / Transform /),让图片差别角度的翻转,呈现的就是差别角度的改变,这样在做最后的效果的时刻,便可以避免花瓣的单一性.
翻开,按Ctrl + N新建一个Html文档.然后按Insert / Layer,插入一个图层,取名为“flower1”,在图层中按Insert Image,插入我们方才所做的那几幅图片中的一幅,将图层的大小变得和图片的大小一样,点击选中该图层(选中后一定如果图6的模样才是选中了图层),肯定选中图层而不是图片,然后挑选 Modify / Timeline / Add object to Timeline,此时该图层会加入等时线,这时刻等时线上会呈现两个空心的句号样的圆圈,用直线衔接起来,两个圆圈表示是关键影格,肯定了花瓣移动的轨迹.如图7所示.
图6
图7
肯定等时线里红线在第一格的位置,然后在的主面板里拖动图层到右上角,这一步是确认花瓣飘落的起点.再将等时线里的flower1层的最后一格拉到第60格的位置,然后肯定那条红线在第60格的位置,回到DW面板将flower1图层拉到屏幕的左下角,这一步骤是肯定图片飘落的终点.注意肯定起点和终点的时刻,一定要看清红线的位置,红线的位置代表了你当前再做第几影格的操作.开始影格和终点影格一定如果关键影格.然后选中上方的Autoplay和Loop,如图8所示,意思是自动运行和循环运行.这时刻你可以按F12预览一下,你已经可以看到花瓣沿一条直线在运动了.
图8
下面我们让花瓣的运动显得暖和一点,无法则一点.在等时线面板里,在第15影格的地方单击一下,确认等时线里的红线在第15格的位置,按右键,挑选add keyfreme,如图9所示,这时主面板的图层会自动移到第15格应当走到的位置,拖动图层到其他的地方(可以肆意的拖动,取决于你想让这个花瓣若何运动),这一步是确认该图层移动到第15影格的时刻应当在什么地方.然后将红线移到第30格、第45格的位置反复上面的行动,再按F12预览一下,此时花瓣就呈不法则的移动了.再次提醒,插入等时线的一定如果图层而不是图片,不然花瓣将不会移动.
图9
按照上面的做法,我们再增添一个图层,在图层中插入别的一幅稍小的图片,反复上面的行动,只是图层移动的轨迹可以改变一下,只需求改边当选中某个关键影格的时刻,图层在主面板的位置便可以了.以次类推,普通加到Flower10层以上的模样,才有满天花雨的效果.
以上是“<b>用Dreamweaver实现漫天花雨效果</b>[DW设计]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
本文地址: | 与您的QQ/BBS好友分享! |