WATER—A Flash Website in 2006

Posted on Oct 22nd,2009

06年3月份完成这个网站——WATER,主要是呼吁保护水资源..
当时几乎所有的图形都在Fireworks上制作的矢量图…细节上的处理也是比较细致,也比较麻烦,加上要配合Flash的动态表现,确实花费了很多时间,好在Firework跟Flash之间兼容很好,最后的效果还是比较理想的。
那是第一次制作纯FLASH的网站,第一次实现较灵活的交互,当然啦,当时还几乎没有用户体验的概念,所有元素都是按照自己的喜好来放置,还有一些对齐方式什么的都忽略不计。
但现在回想起来依然热血沸腾…


这是首页,原本的构思就是一个破旧的水龙头在一些污染物面前不断地滴着水。一定时间后就进入内页。
这样做并无不妥,但我想要在这个页面就跟用户产生互动。因此,一个有趣的桥段就产生了:
背景上面的扳手掉下来,接着一个黑影从“water”后面走来,将扳手捡起来扔给用户,用户的鼠标变成扳手形状(在此之前,鼠标是不显示的),页面显示可用扳手关掉水龙头,进入内页。
这个寓意非常恰当,但是交互体验做得并不好,没有对用户很好地引导,应该有些用户没能看懂我的意图。比较遗憾。

 


这是内页,所有的内容都再左边那个小框框里显示。
一级导航的按钮的效果是鼠标经过就放大,而且可以按右边的小三角查看更多导航。这样隐藏掉一部分一级导航是很不恰当的。
显示更多的导航的以平移的方式显示的,由于我当时掌握的AS 2.0 技术非常初级,所以这样的效果都是用传统的“动作”和一些简单的代码完成的,制作过程非常麻烦。但最终效果还是完美实现了。

 

当时为是制作这个网站花费了很多心思,除了在电脑前做图,写代码,还要整天想着怎样实现那些奇奇怪怪的想法。
因为要插入黑影的一段动作,碍于自己画画水平又不行,就决定自己录一段,然后去掉背景,去色,然后插进去。
然后就买了一堆红色的纸做背景,借来了数码相机,把家里客厅变成临时的摄影棚。当然啦,实际操作又遇到一堆问题,纸不够多,光线不行…好吧,磕磕碰碰总算是录下来了。

 

录下来后发现文件很大,整段插进入很有问题。没办法之下就只能抽取一部分帧,然后一帧一帧连起来做成FLASH。也是一个字:累啊。

 

当时还想在首页放一段墨水慢慢扩散的效果,就去买来是金鱼缸,挤墨水进去,把过程拍下来。后来由于种种原因,没有做出来。

 

这个网站做了好几个月,而且当时我只有周末有时间碰电脑,真佩服自己当时有冲劲把它做完。
用最傻瓜的操作达到自己想要的效果,这个枯燥冗长的过程还真的磨练了我的耐心。
由于这个06年的作品,就不好意思把整站放上来给大家看了,如果谁真的很有兴趣看的,可以联系我啊。

 

 


  • 1 Comment
  • Weibo
  1. 30 - yanc说道:

    […] 虽说时间充分,但是每周能做的也只有周末回家的两天。临近上报期限,我把家里的电脑主机搬到了宿舍,让室友带了个液晶显示器过来,勉强凑成一台电脑,连夜开工,直到上报前夕我还在不断地修改,才终于完成了作品——《水》。 […]

你必须先 登陆 才能发表评论.