全国服务热线:4008-888-888

技术知识

用Dreamweaver完成网页页面上漫天花雨实际效果的方

淡蓝色的天空下,1朵朵花瓣随风飘下,渐渐地的在显示屏中飘扬。你1定要说这类实际效果用FLASH能够完成。实际上用DREAMWEAVER还可以很轻轻松松的完成!

  Dreamweaver之因此可以超出Frontpage而变成网页页面设计方案师的首选设计方案专用工具,在于它对DHTML的强劲设计方案作用,上面所说的实际效果,实际上是DHTML的1种。可是应用Dreamweaver,你不必去撰写冗杂的编码,在DW的对话框里几个拖放,就可以轻轻松松搞定。

  最先用Firework或Imageready1类的手机软件制做出几幅动态性的GIF花瓣照片来。以ImageReady3.0为事例。按Ctrl+N 新建1个文档,尺寸100*100上下,情况色可依据网页页面的情况自主设置。按Ctrl + Shift + N新建1层,取名字Flower1,用勾勒专用工具(Polygonal Lasso Tool),勾勒出1个花瓣的外形,如图1所示。随后将市场前景色设为粉鲜红色(色调编码为:FF99FF),按Edit / Fill 填充,随后在层面版的Flower1上按右键,挑选Layer Style / Stroke ,如图2所示。在弹出的Stroke面板里的挑选颜色的地区挑选1个比刚刚的粉红略深的色调,(色调编码为:C764B4),Size挑选为1,这样花瓣就被描边,看上去更真正1些。这样1个花瓣就制做进行了。





下面大家来让花瓣动起来。将Flower1拷贝1层,在层上按右键,挑选Duplicate Layer。取名字为Flower2。开启Imageready的动漫面板,实际操作方法为:Window / Show Animation,出現如图3的动漫面板。按下最下面1排倒数第2个按纽,新建1个动漫影格。返回并选定第1影格的部位,在层面板上把Flower2层掩藏。实际操作方法为点击层前的那个双眼,如图4所示。




随后在动漫面板上,选定第2影格的部位,返回层面板,显示信息Flower2层,掩藏Flower层。随后选定Flower2层,按Ctel + T,这时候花瓣处在随意转换情况,能够用电脑鼠标上下左右挪动来更改花瓣的样子。如图5所示。




将第2影格所显示信息的Flower2层的花瓣用随意转换做1点小的转变。随后再用上面所讲述的方式,新建第3影格和Flower3层,再用随意转换做1些小的转变,先后能够做6层上下,留意最终1个影格与第1个影格的持续性。每个影格里只能显示信息相对性的涂层,其余的涂层要掩藏起来。

  做完后,在动漫面板里,按住Ctrl键,将全部的影格所有选定,随后在0 sec的地区按右键挑选每个影格之间的间距時间,提议不必超出0.1秒。这样1个花瓣的动漫就进行了。能够按动漫面板上的播发键(那个3角形)来收看你做的动漫花瓣。花瓣不规律的在原地转换挪动,按上述的方式做几张大的,在100*100px,90*90px上下,用于近处的花瓣;也做几张小的,在60*60px上下,用于远处的花瓣。能够在Imageready里做好1个动漫,随后应用旋转作用(EDIT / Transform /),让照片不一样角度的旋转,出現的便是不一样角度的转变,这样在做最终的实际效果的情况下,便可以免花瓣的单1性。

  开启Dreamweaver,按Ctrl + N新建1个Html文本文档。随后按Insert / Layer,插进1个涂层,取名字为“flower1”,在涂层中按Insert Image,插进大家刚刚所做的那几幅照片中的1幅,将涂层的尺寸变得和照片的尺寸1样,点一下选定该涂层(选定后1定如果图6的模样才是选定了涂层),明确选定涂层而并不是照片,随后挑选 Modify / Timeline / Add object to Timeline,此时该涂层会添加等时线,这时候候等时网上会出現两个空心的句号样的圆圈,用平行线联接起来,两个圆圈表明是重要影格,明确了花瓣挪动的运动轨迹。如图7所示。





明确等时线里红线在第1格的部位,随后在Dreamweaver的主面板里拖拽涂层到右上角,这1步是确定花瓣飘落的起始点。再将等时线里的flower1层的最终1格拉到第60格的部位,随后明确那条红线在第60格的部位,返回DW面板将flower1涂层拉到显示屏的左下角,这1流程是明确照片飘落的终点站。留意明确起始点和终点站的情况下,1定要看清红线的部位,红线的部位意味着了你当今再做第几影格的实际操作。刚开始影格和终点站影格1定如果重要影格。随后选定上方的Autoplay和Loop,如图8所示,意思是全自动运作和循环系统运作。这时候候你能够按F12预览1下,你早已能够看到花瓣沿1条平行线在健身运动了。


下面大家让花瓣的健身运动显得温和1点,无标准1点。在等时线面板里,在第15影格的地区点击1下,确定等时线里的红线在第15格的部位,按右键,挑选add keyfreme,如图9所示,这时候主面板的涂层会全自动移到第15格应当走到的部位,拖拽涂层到别的的地区(能够随意的拖拽,取决于你想让这个花瓣怎样健身运动),这1步是确定该涂层挪动到第15影格的情况下应当在甚么地区。随后将红线移到第30格、第45格的部位反复上面的姿势,再按F12预览1下,此时花瓣就呈不规律的挪动了。再度提示,插进等时线的1定如果涂层而并不是照片,不然花瓣将不容易挪动。



依照上面的做法,大家再提升1个涂层,在涂层中插进此外1幅稍小的照片,反复上面的姿势,只是涂层挪动的运动轨迹能够更改1下,只必须改边入选中某个重要影格的情况下,涂层在主面板的部位便可以了。以次类推,1般加到Flower10层以上的模样,才有满天花雨的实际效果。


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服