第八章黑白风格flash网站制作1.pdfVIP

第八章 黑白风格flash 网站制作 我喜欢具有强烈风格的东西。一直以来，我总想有机会制作一个网站，它只有两种主 色：黑色和白色。但是，怎么能够控制好这两种颜色，怎么能够恰当地表达主题，却是值得 花时间反复思索的东西。 从2003 年到2004 年，我度过了我这一生中也许是最难忘的一段时光。我通过面试， 成为了华东师大第五届研究生支教团的成员，作为一名中国青年志愿者，来到云南省楚雄彝 族自治州武定县，在一所名叫香水中学的乡村中学，展开了为期一年的扶贫接力支教工作。 一年的时间，说来漫长，其实却也匆匆，转眼，我已经服务期满，回到了上海。回首 这一年的旅程，再翻看那些当时用DC 记录下的影象，又不禁让我回想起云南那些星空璀璨 虫鸣不绝的夜晚。我突然觉得，这些或许纯粹的东西，本应该就用黑白两色来记录。于是， 我花了大约两天的时间，制作了这个黑白风格的flash 网站：My life in Wuding 。 在这个网站中，我把过去支教岁月中一些有意义的照片，分成了四类，分别是：“On my way ”（支教出征之路）；“Everyday life ”（在那里的日常生活）；“My boys and girls ”（我的学 生们）；“Here and there ”（武定之旅）。由于我在香水中学做了一年的乡村英语教师，为了纪 念，在这个网站中我全部使用了英文。事实上，做好中文网站比做好英文网站要更难，因为 英文的字体在美感表达上更简单一些。 感谢NEWWEBPICK 将这个网站以五星的评价收录。这个网站就其flash 本身而言， 或许没有什么特别的意义，但它的内容对我来说，却是那么地重要。 （图1-1） （图1-2） （图1-3） （图1-4） （图1-5） （图1-6） 在这一个章节的学习中，我们将接触到以下几个重要的知识点： 1．黑白效果的图片处理方法 2 ．Flash 视觉效果制作 3 ．Flash 中运用帧标签实现栏目间跳转 我们的学习目的是： 1．了解Flash 整站设计的制作步骤 2 ．如何在Flash 网站设计中形成独特的视觉冲击 3 ．学习Flash 中网站栏目切换的方法 第一节 网站设计前期筹划 在这个网站设计前，我们需要考虑的是，它是什么风格？它用什么方式来表达？可能 用到什么样的技术手段？ 两年前，我做大多数网站，总是习惯先打开photoshop ，做好版面，切割好图片，然后 打开dreamweaver 做成网页，最后，或许会使用flash 做一些点缀。 而现在，我越来越多地习惯在photoshop 中做好草图，然后打开flash，开始最重要也 最富想象力的工作部分，最后才用dreamweaver 做一些简单的页面工作补充。 世界在变化，我们使用的工具也在转变。我们不能再一味停止在单一的静态图片与html 页面设计上面了。为了让自己成为优秀的设计师，flash 是我们必须攻克的一道防线。在这 个网站中，我们要使用flash 来完成所有内容的呈现。 在风格上，用纯粹的黑白图片。在这里我们将使用到一些特殊的图片效果，让图片没 有灰色的中间色，而是只有黑白两色。丹麦朋友pixelstrange 告诉我说，这种处理图片的效 果大概在1995 年互联网刚刚开始流行的时候，就已经在“paint shop pro ”中有过介绍，因 此，是一种很老的图片处理效果。（图1-7、图1-8） （图1-7） （图1-8） 在技术上，或许我们可以使用asp 和flash 的结合来动态读取图片列表，以达到更强大 的功能。但是作为一个个人趣味性的主题网站，这样做未免有些杀鸡用牛刀的感觉。在这里 我们选择把每一张图片做成单独的swf 文件，在主swf 中用“loadMovie() ”命令进行载入。 具体会在设计的时候进行介绍。 在制作步骤上，首先，为了便于flash 中各元素的定位，我们使用photoshop ，将网站 截图绘制出来。（图1-9） （图1-9） 接下来，打开flash，制作flash 的loading 和开场。（图1-10） （图1-10） 进入flash 主画面，根据photoshop 中绘制的截图，在flash 中重新绘制各元素。