标题:动画制作指南
作者:Anna McMillan 和 Emily Hobson
出处 : lycos
作者简介:Anna McMillan和Emily Hobson都在Hotwired工作。Emily是一名产品经理,她始终如一地坚持付小费给酒吧间招待和发型设计师。Anna是一个设计员,有一只名叫像素的猫。
翻译:袁婕
所有者:5D多媒体,
未经许可,严禁转贴
在今天,网络漫画家也许不必为了制造Dopey闪烁而花费17个小时,但是带宽,平台和浏览器的问题把动画制作变成了网络自已特殊的地狱。Anna和Emily已经在这个地狱呆了很久,并且她们进行动画片制作,唔——如果动画制作一开始不容易,后来会变的容易一些。
在详细说明怎样使用它们之前,我们先分两个部分来大体介绍一下主要的动画制作技术。
第一部分是有关功能有限但易于使用的GIF89动画制作平台的使用技巧和工作安排的介绍。下一站则是Dreamweaver,一个把“d”(动态)放入dHTML的程序。Dreamweaver和dHTML给人们他们想要的:编辑索引能力,更新能力,交互性,以及迅速下载能力。如果你准备好了用Flash(Macromedia的基于矢量的动画制作技术),Anna将带你学习这个技术并与你分享有关使用Flash来进行绘画和动画制作的心得。
但是,优秀的动画并不仅仅依靠技术,最重要的是你要有绝佳的设计。Anna和Emily为你的动画片制作提供了几个设计理论,可作为指导方针使用,并可用于对光,形状,运动和速度那样的要素进行检查。
Animania可完成给你的动画添加好的音频的任务,而无须占用单独的带宽,同时它还给你一个时髦的外观。无论它是否用粘土,木偶,素描,油画,三维画甚至于沙地,每个动画片制作都需要有一种独特的风格,并且,它不能太陈旧以至于不能表现你自己的风格。
开始:第1课
第1课
第1页——动画制作指南——第1课
动画制作在很大程度上是正在为人所逐渐了解的事物。它应用于从低预算的书页翻动动画到极为精致的,全长度的斯尼动画电影的所有方面。 在童年的星期六早晨,我们四处奔走看的动画片(“What's up, Doc?”,“Scooby Snack?”,“Captain Caveman!”),那些令人捉摸不定的圣诞节专刊,以及成年人喜欢的像Simpsons, King of the Hill, 和 Wallace and Gromit等等都含有动画的成分。现在有基于工作室的动画制作和独立的,传统的作坊式以及实验性的动画制作。使千年隼号飞行以及泰坦尼克号沉没的块破裂特技效果属于比较特殊的动画制作方法。这些种类的动画制作每一个都很难——比如预算困难,时间安排和技术限制等等。但是,它们中没有一个能参与独特的网络动画制作的挑战。
网络漫画家为了制作Dopey闪烁,也许不必花费17个小时来进行手工绘画,但是,带宽,平台和浏览器的问题仍把动画制作变成网络自己特殊的地狱。
要知道,我们生活在矛盾中:把它变大,变漂亮,却使得只有一部分用户能看它;把它变小,变的一般,所有的人却都可以看见它。我们已经经历了动画制作最困难的几个时期,使用过许多图形和动画软件的充斥着错误的试用版、第一版、第二版、第三版。我们花了好几年的时间来学习新的界面,因缺陷而进行新的工作安排,经过长期斗争,最终弥补了我们所有的不足。
但是你却不必这么做!
在这个动画制作指南中,我们使动画制作变的简单——嗯,也许不是很简单,但是肯定比以前简单——我们给你所有我们的经验,并清楚地列出所有你需要考虑的情况。在前6课,我们将提供给你有关风格问题的指导方针和普通动画的制作技巧,同时还给出给出有关GIF89,动态HTML和Flash的故障处理及页面整合的技巧。这里是课程安排:
我们的内容包括:
第1课:概述和网络动画制作简介
第2课:GIF89
第3课:DHTML
第4课:Flash
第5课:动画制作步骤——设计
第6课:动画制作步骤——声音
第7课:动画制作步骤——风格和整合
前提条件
确定你知道你要着手哪一方面的事情:
第1,5-7课:没有前提条件——只要你打算学
第2课:
1、你需要有关的GIF动画片制作的基本知识
2、必读:Jim Frew的GIF Animation Refresher
第3课:
1、要求具备dHTML和Dreamweaver的基本知识
2、必读:Taylor的DHTML Tutorial
第4课:
1、要求具备对lash的基本理解
2、必读:Mike Kay的Intro to Flash
所需工具
在进入到这个入门的内容之前,应该确定你有了所有需要的工具。利用下一页的例子做一下测试——在下载了所有的插件或者是一个最新的足以让你看见今天我们展示给你的一切的内容的浏览器之前,不要继续以下的内容。至少,你需要一个可用javascript的浏览器。否则,你将不能看见很多使用javascript的例子,它们都是用javascript来打开新的窗口的。
OK,准备好了吗?设置好了吗?让我们开始。
第1课
第2页—开始网络动画制作
在接下来的课程中,我们将深入研究各种动画制作格式。但是,今天我们只介绍一些粗浅的知识。这儿有一些帮助你迅速了解动画制作的大致过程的指导——尤其是帮你确定用什么种类的动画制作方法。
确定你的动画制作有一个主题/故事/要点
不管你的动画制作的目标仅仅是为动作填充美丽的颜色或是讲一个生动的长篇故事,在你的制作动画的时候保证脑子里有一个故事情节的构思是很重要。这会造成整体性的质量差异。
富有创造性
制作网络动画的时候,只要你保持头脑灵活,继续研究让你的想法实现的新方法,几乎任何事都可能被实现。在这个指南中,我们提供了我们为了改良动画制作性能而发明的几个技巧和决窍。我们鼓励你开发自己的动画,你可以从我们的过失中学到一点东西。另外,你也可以从网络上的一些动画制作中获得启示。
未雨绸缪
无论你正在从事什么工作,伟大的冒险或是一个三帧动画制作,总是要求助于storyboard(情节串连图板)。这儿有一个好例子,试验一下The Wrong Trousers (http://www.aardman.com/wallaceandgromit/films/thewrongtrousers/story.html)。
你的storyboards(情节串连图板)不必是精致的工艺品,只要它清楚到你自己和其他与制作有密切关系的人可以接受它就足够了(如果你和客户一起工作,你可能需要精炼你的图画以免他们怀疑你的能力)。这是轻松游戏的时间:设想所有东西的样子,从不同的角度用不同的风格进行实验,一般说来这可以解决所有的问题。相信我们,这将为你的制作进程节约很多时间。
你可以在计算机上做你的storyboard(情节串连图板),但是,采用铅笔,钢笔和纸这些看起来落后一些的工具可能会更好。这些可靠而忠诚的工具使你的工作更迅速,而且轻松;在计算机上勾画事物的草图,你可能会受到诱惑而把你的时间浪费在不必要的完美上。
另外,如果你的动画制作是非常依赖角色的,你可能要绘制一些角色草图。从不同的位置和角度展示角色,表达一定范围的情感,注意任何显著的特点或者典型特征。我要再一次提醒你,如果你和其他的人或客户一起工作,这些草图作用很大。
查看下载容量和再现速度
人们不喜欢在因特网上焦急地等待。为了避免下载的时候出现问题,为你自已设置一个比较现实的最大文件容量,并把它应用到实际中去。如果你发现自己经常受速度限制,就要重新评估你动手制作的动画类型是不是对所选的媒体过分苛求了?你尝试过另一种不同的动画制作风格吗?不同的媒体对于下载有不同的承受水平。一个2兆字节的动画对QuickTime影片来说是完全可接受的,但是对一个GIF89影片来说则是极愚蠢的。而流媒体(例如,Real Video)的文件容量一般来说是无限制的。
有时文件容量并不是导致问题的原因。再现问题也可能使速度慢下来。再现速度是指计算机在屏幕上显示动画所花费的时间。当你使用像Flash和动态的HTML这样的媒体工作的时候,这尤其关键。
了解你的观众
谁在看你的作品?他们正在使用什么平台或浏览器?这些是你挑选图像的风格和确定故事的类型的最重要的决定性因素。如果你确定了观众的类型,在为动画选择最好的格式的问题上你会轻松得多。
第1课
第3页——适合你的正确的媒体
什么是你吸引观众最好的方法?文件容量,再现速度和你的信息内容,当决定哪个媒体对你来说是最合适的时候这些都是需要考虑的重要因素。
有一些你可以遵循的松散规则。比方说你要处理一张抽象派图画作品,由于Flash平台在位图处理上表现糟糕,QuickTime或dHTML也许是这儿的最好的解决方案。但是,如果你计划制作一个插图动画,Flash是显示你的工作结果的最好的方法。它速度快,可缩放,容量小,并且看起来也很棒,除非要求大的浏览量,否则GIF89决不是最理想的媒体选择——尽管它是一个适合于与非通用的媒体类型相连接的上佳选择。
如果你的对象无法简单地被分类,选择一个正确的方法将是很困难的。你必须衡量每个媒体的长处和局限性。认真考虑你可能遇到的bug和问题。想一想它们值得自己麻烦吗?
为了帮助你来确定去用哪个方法,我们提供了下列主要的网络动画制作技术的例子。另外, 我们已经把每个方法的缺点和优点(包括软件要求和兼容性问题)列举在内了。我们希望这些信息将使得比较的过程变得简单一点。
第1课
第4页——快速参考:GIF89,QuickTime,和Shockwave
GIF89
例子:browserwars(浏览器之战)
作者:Anna McMillan
所用图片:Netscape,Microsoft
媒体类型:GIF89
文件容量:318KB
支持:Netscape 2+ MSIE 3+
工具:GifBuilder
GifConstruction Set
GifMation
Adobe Image Ready
Macromedia Fireworks
优点:简单且容易理解和创建
获得广泛支持
易于整合(不需要插件)
制作软件免费或者比较便宜
是使用插件的动画的优秀替代品
缺点:文件容量受限制
内容受限制
不同的连接速度会使播放脱节
没有声音
链接:Jim Frew的GIF Animation Refresher
QuickTime
例子:Tchoul No.3 :The Kept Man
作者:Jamie Uhrmacher
站点:Animation Express
URL:www.hotwired.com/animation Media:QuickTime 3
文件容量:4.5到2.3兆字节(根据连接速度不同而异)
工具:你需要各种视频编辑工具,包括:Adobe Premier
Adobe AfterEffects
Media 100 software
Flatten Move
优点:高的帧频
可从视频直接转换
在任何的连接速度下都可平滑重放
为不同风格准备了不同的压缩方式
Streaming(流方式)使得文件容量不受限制
有声音
缺点:初始下载时间较长,受QuickTime窗口限制
也许会被强迫在老的浏览器窗口中产生新的窗口
老式浏览器需要一个插件
不透明
链接:Webmonkey资源:Adam的multimedia tutorial
其他的HotWired资源:
Yoshi Sodeoka,Prototype 19
位于RGB Gallery
Revolver
位于HotWired Archives
Donor Party
位于 HotWired Archives
Director 的Shockwave
例子:antirom
来自于RGB gallery
作者:antirom
媒体:Shockwave
文件容量:40KB
其他:交互式
支持:Netscape 2+ MSIE 3+ 需要插件,不被UNIX支持
工具:Macromedia Director Macromedia AfterShock
优点:可用Streaming(流方式)利用Flash来工作(能嵌入)效果良好
有声音
交互性
缺点:需要插件
属于非网络的本地技术(它是被移植到网络上的CD-ROM技术)
受Shockwave窗口范围限制
非透明
链接:Webmonkey资源:
Director Basics
Animation with Director
Dancing Benny, a Director Demo
其他的HotWired资源:
antirom位于RGB Gallery
you me and 位于RGB Gallery
}}}destinATiON{{{
位于RGB Gallery
Interactive Works by Laurence Arcadias
位于HotWired Archives
想了解更多的动画制作技术,请继续读下去。
第1课
第5页——快速参考:Flash,Java/Enliven,DHTML
Flash
例子:Bulbo in Space Shot
作者:Xeth Feinberg
站点:Animation Express
URL:www.hotwired.com/animation
媒体:Flash
文件容量:206KB
支持:Netscape 2+
MSIE 3+ (ActiveX 控制,Windows下)
需插件
工具:Macromedia Flash
Macromedia AfterShock
也许还需要Illustration(插图)工具
包括:Macromedia Fireworks
Macromedia Freehand
Adobe Illustrator
优点:流方式,使等待时间大为缩短
无窗口限制
支持透明动画(最新的版本)
支持keyframe(关键帧)和过渡帧技术
支持基于单元的(一帧接一帧的)动画
易于学习且所制动画效果上佳
有来自Netscape5 的本地支持(不需要插件)
有声音
交互性
缺点:需插件(除非用户使用的是 Netscape 5 )
矢量肖像限制了风格的选择
较Shockwave而言可编程的能力差
老式版本是非透明的
链接:Webmonkey资源:
Flash Tutorial
其他的HotWired资源:
Hotel
位于RGB Gallery
Java/Enliven
例子:Calendar 5,“UMI/AKI”
作者 :John Maeda
媒体:Java
站点:MAEDASTUDIO
文件容量:[???]
支持:开始运行即启动Java的程序有:
Netscape 3+ MSIE 3+
与applet连接上以后启动Java的程序有:
Netscape 4+ MSIE 4+
工具:Macromedia Director (Enliven)
Enliven Client (Enliven)
Macromedia AfterShock
优点:Streaming(流方式)(Enliven)
Director/Flash均可用
从AfterShock转换
没有必需的插件
小的文件容量
有声音
交互性
缺点:当Java引擎启动时,将阻碍4.0版本的浏览器的运行(尤其是Netscape)
对程序要求苛刻
用户方的CPU工作负荷量大
链接:HotWired资源:
Relisten

lease
位于 RGB Gallery
动态HTML
例子: Monkeys in New York
作者:Taylor
媒体格式:dHTML
文件容量:约60KB
浏览器:Netscape 4+ , MSIE 4+
支持:Netscape 4+ MSIE 4+ (在不同的平台和浏览器上特征的表现是不同的)
工具:Macromedia Dreamweaver(所见即所得)HTML编辑程序
优点:没有必需的插件
没有必需的软件——你仅仅需要一个文本编辑器
利用整个浏览器
本地网络(使用HTML组件——类型和格式——所以它是可搜索的和可打印的)
快速下载
有声音
交互性
缺点:帧频和刷新率低
交叉平台兼容性差
不如别的动画媒体(Flash和 QuickTime)那样稳定耐用
链接:Webmonkey资源:Taylor的DHTML Tutorial
DHTML library (DHTML库)
其他的HotWired资源:}}}destinATion{{{
位于RGB Gallery
49,682,923 stories about
位于RGB Gallery
LiveWired
既然你已对各种动画制作类型有了一个大致的了解,下面让我们更深入地看一看最流行的动画制作技术:
GIF89,dHTML和Flash.
从GIF89开始
第2课
第1页——动画制作指南——第2课
欢迎来到GIF89
“图形交换格式(GIF)并非设计作为一个动画制作平台,虽然在一定程度上它是可用来制作动画的。”制定GIF规范的(美国)电脑服务公司的代表在1987年后这样说。强硬的措词。
确实,GIF从最初被开发以后,即80年代晚期以来,事情已经发生很大改变了。带宽已经从一条狭窄的只有两车道的公路提高到有八车道的高速公路,CPU(中央处理器)的速度提高了十倍,而且,现在网络是一个艺术和交流的论坛,而不再仅仅是给物理学论文准备的一个地方。CompuServe(美国电脑服务公司)的GIF权威人士被告诫了一件事情:GIF89不是一个很好的动画制作媒体。
GIF89的缺点不可忽视:它倾向于造成大的文件容量,压缩效果不是很好而且它没有语音能力。但另一方面上,它创建的GIF动画可显示于几乎所以的浏览器上。并且当它用于小型的动画的时候——比方说标记,小故事和简单的动态图标——GIF89格式工作的很好。它还和其他的动画制作媒体配合的很好,例如dHTML和Flash
因为它是如此适合于小型的动画,所以GIF89得到了一个像“讨厌的广告标语”那样的糟糕头衔,这妨碍很多有创造力的人们把它当作一个有用的艺术工具那样来使用。在接下来的页面中,我们将给你展示几个采用GIF89制作的动画示例,它将给你示范一些你在工作中可以使用的风格技巧。当然,真正的风格体现于细节中,所以, 我们还将讲述重要的核心细节部分。
HotWired的长期的读者会回忆起在黑暗时代(1996)中,我们老早就制作出了frontdoor spalash。在那个时代,那些难题讲了有关那时的特征文章的故事。为了吸引最广泛的观众,splash开发组决定用GIF动画作招牌。在制作了一大堆这些日常故事的动画之后,我们的队伍学习了怎样更好地利用这种动画制作方法同时仍然维持得体的色彩质量,压缩文件容量(在50KB以下)。下列所述是我们的智慧结晶-—我们发明创造的所有工作安排和故障查找技术,它花费了我们无数心血。
好好享受吧。
第2课
第2页——较少就是更多
开始
想学习今天的课程,你首先需要一个GIF89创建程序。感谢上帝,这几个GIF89应用软件可以用于Mac和PC平台,而且,其中最好的一些是免费的并且容易使用。想看一下完整的应用程序一览表,访问Webmonkey的工具箱。在我的经验中,Yves Piguet的(用于Mac)GifBuilder功能强大,易用性也很好。不过如果在后面的页面中不给你几个诀窍的话,这个程序就会做出几个使你发狂的古怪举动。
另外,你可能想更新你的有关GIF动画的看法并重新学习用于服务器的GIF动画。
OK,准备好了吗?开始演示。
用平面文件方式处理过大的文件容量
GIF的压缩运算最好和平面彩色制图一起工作。采用平面方式,我们并非真正想要看到平面的图像,而只是想使图像的颜色值和混合值保持最小。
为了让颜色和混合物更少,你最好用插图和照片图像对比着工作。给照片充分着色需要很多不同的颜色。黑白的照片更好一点,但是,浏览器只能读出基本调色板中的四级灰度,所以,其他介于中间的灰度不得不依赖于抖动(会使图像效果变差)。尤其是如果你被迫用照片工作,试着使用一个空白的调色板。另外,你能用DeBabelizer来把所有的图象编入一个能帮助减少文件容量,使你的GIF89的外观最优化的调色板,
最后,如果你必须用照片工作,在维持你图像的质量的同时,考虑用单色的调色板来减少颜色的数量。尽管下面的动画的全色的版本使用的是一个有限的调色板,但它看起来还是很漂亮。用一个更经济的单色的调色板也能达到相同的效果。
例子:Wired on Pointcast Splash
作者:Anna McMillan
媒体格式:GIF89
文件容量:(全色)136KB(灰度方式)46KB
第2课
第3页——沉默的声音
因为GIF89没有语音能力,所以给你的动画添加音频并非随心所欲。不过那并不一定表示你的动画不能有声音。这儿有一些用于使GIF89动画制作技术来发出一些声音的方法。
用印刷样式来加入声音
只不过是使它不发出声音,并不是意味着听不到它。用印刷样式来进行实验,看一看一句话是否只有被说出来才能被听到。这例子说明我预期的要好于我能做到的:
例子:意识
作者:Josh Feldman
媒体:serverpush animation
文件容量:2960KB
使用连环漫画的线
世界上没有专门用于定义漫画中的声音,嗅觉及动作线的正式的术语。我问了Terry Colon,一个经验丰富的插图画家和漫画家,但是,他也不知道。他把这些东西叫做ballagraphs或stellamata或motomatic轨线。我则干脆把他们叫做连环漫画线。但是无论你叫他们什么,他们仍然是传达感觉或运动(像嗅觉和听觉)——虽然事实上并不能通过这个媒体真正被表达——的简单但是有效的方法。
例子:Blender Phone Splash
作者:Luke Knowland
媒体:GIF89
文件容量:185KB
做一个word balloon (漫画中用于圈出人物的讲话的线条)
word balloon是漫画的话语或声音的很好替代。仅仅通过看一些连环漫画就能学习怎样使用他们并发挥全部的优点。Word balloon的确很棒——它能表达许多种的情感和声音。
第2课
第4页——围绕限制进行设计
GIF89文件容量的限制意味着你不得不尽可能少做一些帧。其结果是,这些动画里的运动非常不连贯。关键是你要学会利用这个缺点并使之成为你设计的一部分。你可以考虑使用“剪切”动画制作风格(South Park,或者Terry Gilliam的Monty Python动画制作)。你最好从一开始就注意避免这些限制,而不是创建一个完美的动画再来修改以达到网络应用的要求。
例子:Packet Chip Head Splash
作者:Anna McMillan
媒体:GIF89
文件容量:59KB
另一个消除不连贯的方法是通过添加一个运动模糊过滤帧,给你的动画以流畅的动作。AfterEffects(一个2维动画制作程序)可根据对象的运动程度的自动计算运动模糊的强度和距离。运动模糊不仅仅是个不错的小骗术,它也能把一种逼真的感觉添加到你的高质量的动画制作中。
例子:Packet Server Splash
作者 :Luke Knowland
媒体:GIF89
文件容量:49KB
另外,其他类似的滤镜也能进行运动的模拟。下列动画制作使用了Photoshop中的旋转滤镜。
例子:Netizen Election Splash
作者:Anna McMillan
媒体:GIF89
文件容量:43KB
通常三个清晰的帧足以表现逼真的动作。(如果你使用少于三个帧,你的动画看上去会像在眨眼睛似的,所以,别太疯狂地删除你的帧。)
例子:Talkie from Talk.com
作者:Max Kisman
媒体:GIF89
文件容量:总计6KB
第2课
第5页——优化
既然你已精通了一些像动态的GIF那样的简单设计方法,现在是学习使他们成为网络的一部分的方法的时间了。你是幸运的,我们已经为你做了这个非常辛苦的最优化的跑腿工作。每个创建GIF89的(使用GifBuilder for Mac)方法都有它自己的目的。在你开始决定选择创建造你的动态的GIF的方法之前细读这份材料。
帧优化
注意保持动作连贯。为了更好地利用帧最优化,慎重地考虑如何创建你的动作。把你的动作合理地连在一起,不要离的太远。并且,因为要尽可能地维持最小的文件容量而你又必须覆盖每一个先前的动作,所以覆盖帧也应该尽可能的小。
例子:Webmonkey工具箱
作者 :Judd Vetrone
媒体:GIF89
文件容量:40KB
看一看猴子怎样来做小容量的,连贯的动画动作?你不必真正从总体上观察动作的不足,而只是注意分解开的动作。应该使用哪一种的方法?
通过选择“Options(选项)”:“Frame Optimization(帧优化)”,你可删除不被使用,或者多余(在先前的帧中他们被使用了)的帧。不过GifBuilder的这个功能总是不太精确,并且,你的应用程序可能不包括这个功能在内,所以,你也许要手工来做帧的优化。手工优化包括修剪在图像编辑程序中的帧,把它们拖回GIF89创作程序,然后进行手工定位。这听上去好像很困难。要记得最重要的事是先前的帧需要被下一个帧覆盖。烦恼了吗?试着多做几次(注意保存你的原始文件!)然后,你再做起来就会很轻松。
为什么要经受所有这些麻烦?嗯,空间(在这个例子中指帧)里的像素越少,文件容量就越小。试着使用这个可使帧中色彩数量降低的方法,它对整个文件容量的减少也很有用。
透明图像
为了使用透明技术,你要使用一个和你的动画第一帧一样的背景图像,并把透明的帧放置在这个背景之上。每一个透明帧都在一个或一个以上的区域中有动作(或者图象数据),但是帧的剩余部分颜色是固定的,这些部分在GIF中可被设定为透明区域。(在这种情况下,你会希望你的配置设定为N,像在Do Not Dispose里一样。)是有一点乱,但是试着下载令人惊奇的Lorelei Pepi示例,并在GifBuilder和Photoshop中演示它。马上来做。
例子:Absolut Panuska 的地图艺术
作者:Lorelei Pepi
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:Gif89
文件容量:140KB
覆盖
当你使用AfterShock来像GIF89那样输出一个Macromedia Flash文件的时候,你将发现这个程序既可利用透明功能又可进行帧的优化。在这个例子中,你能看到在最终的GIF89图像中,黑色背景将被再现,并且帧仅仅被在先前的动作中被使用过的像素所覆盖。如果你已经在Photoshop中有了所有的层,这将是一个在前面的帧中覆盖动作的第一流的方法。当然了,与用大的彩色块来覆盖事物的方法相比,它产生的文件容量更小。
例子:Frame from AfterShock exported GIF89
作者 :Fork Unstable Media
媒体:输出到GIF89中的 AfterShock
第6页——问题处理决窍
错误校正和捷径来自于辛苦的反复的试验和摸索。因为我们已经做过这项工作,所以你不用再吃什么苦就可以得到这些方法。(幸运儿!)
Not-Enough-Color(没有足够的颜色)缺陷
当你使用极少的颜色来工作(特别是四种颜色)的时候,由于某些原因,透明(transparency)会被设定为在帧中删除所有的颜色。为了避开这个问题,别检验“Remove Unused Colors(移动未使用的颜色)”。这样会避免加大文件容量(除非你的各部分不成比例).
浏览器的速度差异
MSIE最近的版本采用一个比Netscape更快的帧率来演示GIF89。为了确保你的作品不会被不同速度的浏览器歪曲表现,你应该加倍检查你的动画。采用实时网络连接的方式检查——桌面drag-and-drop(拖放)不能正确地模拟真实的显示状况。另外,较快的CPU会以一个较快的速率回放GIF89。
颜色/灰度需要考虑的事项
交叉平台调色板在大多数情况下可正常运行,但是,IE可能无法辨认一些颜色——如墨蓝色会被显示为黑色。我建议你模仿Netscape的216调色板在GifBuilder中为你大部分的GIF动画进行6*6*6设定。不过,灰度图像以及照相图像是一个例外。
为了检查出灰度的差异,在PC和Mac上以256色的设定测试你的动画。当在PC上看一个在Mac上设计的动画片时效果会比较暗,反之亦然。一般来说,尽量避免使用纯的黑色,蓝色和灰色,因为它们往往会产生问题。
其他已知的问题
如果在保存动画之前,你从一个文件夹中删除了文件结构,你将得到一个错误提示。在保存最初期,程序必须要参考这些文件。如果文件已经被抹掉,GIF89文件则不能被正确处理。
另外,有时你看GIF89时,会发现动画周围的网页空间有大片的空白。这发生在当GIF89尺寸比最大的帧的尺寸大的时候。在你完成所有的文件交换或删除之后,要确保帧的尺寸与GIF相匹配。
最后,如果你引进一个使用不同调色板或者有其它颜色的新帧,可能会碰到一些问题。把颜色重新设定为6*6*6,程序将调整调色板并将新颜色添加在内。好好检查调色板,将其保存,然后在GifBuilder中重新打开GIF89文件。
第2课
第7页——时间选择和载入
怎样整合GIF89
在你的网页里整合GIF89的方法几乎和你设计动画以及使文件最优化的方法同样重要。这个格式的其中一个好处是它能像任何其它GIF那样被处理,所以,它能被server push,javascript或dHTML所控制。但是,当你把动画放到页面上的时候,要始终谨记媒体格式的局限性——下载速度的改变,中央处理器速度差异等等。
设定速度
要特别注意你的动画的放映速度。用不同的时间选择来演示动画,直到你得到预期效果为止。和动作一样,在你的故事被人接受的进程上时间选择能产生一定的影响。快动作产生一种狂乱的感觉,慢动作则增加了戏剧性的感觉。还有其它一些形式,这里不再详述。
这儿有一些修改你的速度设定以适应网站要求的方法:
把第一帧的播放时间设定长一些作为页/动画载入时间。我们建议至少为2秒(200/100秒)。要牢牢记住在GifBuilder里的那段时间,或是在任何别的动态GIF程序里的时间都不一定会真实反映真正的播放时间。测验是了解你的GIF89s运行状况的唯一可靠的一个方法。
为了保存你的动画的颜色,让最后一帧播放时间尽可能得长——100秒(10000/100秒),这样可防止它抖动。
通过在你的图像代码中使用<lowsrc>(<img lowsrc=“animation1.gif”src=“animation2.gif”border=“0”>)你能预先装入一幅图像,或者装入一个动画(在这个例子中是animation1.gif),然后用第二个图像(animation2.gif)来替换。例如,你能预先装入故事开始的场面,然后用第二个GIF作下一个场面。看一下鼠标/拳击手套演示,第一个GIF89从静态/静止的状态下开始(用拳击手套/鼠标开始),同时第二个GIF89开始手套/鼠标的不断的循环。用户不必为下载一个庞大的文件而等待,他们无须动手即可了解到完整而连贯的情节。这个方法的一个缺点是只有第二个GIF被储存起来,所以,如果用户点击离开页面,他们的浏览器将无法继续演示动画。
例子:拳击鼠标吊袋
作者 :Judd Vetrone
媒体:GIF89
文件容量:63KB
这个<lowsrc>会产生另一个问题:它不能在MSIE4+中运行。<lowsrc>的真正的目的并不是为了仿造动画。这意味着要迎合旧式的慢的调制解调器的需要,迅速拿出一个快速装载的占位图像,当用户浏览这个页的时候,填上更大的,更复杂的图像。但现在MSIE不再顾及低级的图像,它仅仅为它认为你所想要的图像服务。如果你还想让你的动画外观效果更具娱乐性,你还能用JavaSript来做出不同的效果。
多个动画
按此方法,调整第一帧的时间选择,你可以把多个动画装到同一页里来讲述一个完整的故事。因为调制解调器和CPU速度区别是如此显著,而且这些变化并不十分精准和确定,所以,要小心。
另外,你能多次使用同一动画来做出一个更复杂的动画。这大大地减少了文件容量,意味着不会给服务器增加额外的负担。为了你的作品更有趣,你能用javascript来改变播放顺序,或者延迟动画的装入。
用一个移入GIF89文件的动画来做实验:将其中途阻断,然后让其在文件的开始的地方重新出现。通过将其并排嵌套,使其看上去就像你有一串这些在屏幕上依次移动的组件。
例子:太多的兔子
媒体:GIF89
文件容量:140KB
第2课
第8页——伸展和缩放
在你的图像代码中添加百分比值到高度和宽度标签上(<img src=“animation.gif”width=“50%”height=“100%”border=“0”>)来伸展或者缩小动画以符合页面。调整浏览器窗口的尺寸,并伸展GIF89,把它调整到充满整个空间。这种方法适用于被设置了别名的图像,在没有任何扭曲的情况下,它可清楚地呈现所有像素。(虽然你可能想用不被设置别名的图像来进行实验-但你会喜欢这个效果的。)
例子:可伸展的循环水波纹
媒体:GIF89
文件容量: 6KB
帧:69
用图像标签展开图像(相对于用你的编辑图像的程序展开他们而言),显著地减少了文件容量。这样,用你节省了的文件空间,你能做出更复杂,帧更多的动画。如果你是在把动画整合进框架结构中,或者当你使用dHTML时候,这尤其起作用。
不巧的是,展开的透明的动画不能Mac上运行。如同所举的实例那样,你能从看起来似乎有点儿混乱的情况下得到精致的作品。另外,当通过Netscape浏览的时候,被改变比例的图像的时间控制会发生改变,通常会产生更慢的效果。因此再次提醒你,为了保证你所有的观众都能得到高质量动画,用尽可能多的平台和浏览器来测试你的GIF89动画。
这儿是一个透明的展开 这是一个透明的展开的动画
的动画(静止状态)。这是 (静止状态)在Mac上显
应有的显示效果。 示的效果。
另外,展开最优化过的帧,透明的GIF89效果仍然很棒。
105*100 像素 实际尺寸 105*242 像素
例子:生动的例子(只可用IE 4.0)
文件容量:16KB
当你计划展开一个图形的时候,你最好使用浅的颜色或者干脆用照相图像。而对于一个灵活多变的文本——最好把它留给dHTML。
例子1 :展开的照片
例子2 :展开了的浅的颜色
()
例子3 :展开了的介于前二者之间的图形
()
(注意,这个示例运行的不是很好。在它被展开前,它需要进行大规模的整理,或者别名化。)
例子4 :不可别名化的文本与别名化的文本的缩放
() [10 KB]
第2课
第9页——间位标签(meta tag),Mouseover,以及其它
间位标签/帧
meta-refresh(更新间位)<meta http-equiv=“Refresh”content=“35;URL=xx.html”>允许你创造动态性更强、整页的动画。
例子:HotWired的RGB Gallery
(http://www.hotwired.com/rgb/signal2noise/index_bio.html)
作者:Mary Spicer
媒体:GIF89/HTML,
javascript制作Mouseover
使用javascript来把一个动画和静态图像组合在一起。它可使你更好地控制时间,并增强你的网页的交互性。像这样一段简单的javascript能让你为每一幅图像设定装入时间。其他的Java描述语言指令允许用户与你的故事相互发生影响-甚至于改变结果。
试试看!
动画背景
4.0版的浏览器允许GIF89作为一个背景图像来运行。它让你把动画重叠起来,并从整体上考虑把图像,文本,表格组件或其他对象放到动画之上。就像旧的静态背景图像一样,当它开始布置的时候,达到100%的准确性是很困难的,所以,你应该灵活地使用它。
例子:Red Splash
[仅用于4.0浏览器]
媒体:GIF89
文件容量:16KB
静态背景以及透明动画制作
为了减少你的网页的文件容量你可以把透明动画在页面的背景图像上进行排层。如果能使用一个简单有效的JPEG网页背景,你就要尽量避免在你的GIF动画片制作中使用别的复杂而且庞大的背景图像(如一张照片)
例子:4YB-002
作者:David Opp
媒体:JavaScipt,GIF89,QuickTime
删除和重新装配
如果你的动画有大的,静态的区域,把它删除以节省文件空间。另外,你应该采用另一种格式(如JPEG格式)来消除那些复杂的组件。你可以用表格,或者用层叠样式表的定位能力来改造你的被切成一片片的动画。
例子:Webmonkey Mad Scientist Splash
作者:Luke Knowland
媒体:GIF89
文件容量:79KB
现在,我们即将结束我们的GIF89之旅。依靠创造力,再加上一点耐性,你就能做出高质量的,极具艺术性的GIF作品,它是如此令人印象深刻以至于你会认为GIF就是为动画制作而诞生的。
准备进入:第3课——dHTML
第3课
第1页——动画制作指南——第3课
当第一个插件进入Netscape 2.0的浏览窗口时候,网络真正成为一个生气勃勃的地方。每个人都为作品能动态显示而感到高兴,但是,还存在着一些抱怨。“我们想得到编索引的能力!我们想拥有搜索的能力!”他们用刺耳的声音喊着。“我们想查看来源!我们想使变化进行的更迅速,并且更简单!”开发者大叫。“并且,当我们想看某些东西的时候,我们不想下载一个2兆的插件!”他们向Web冲浪器哭诉。就这样,dHTML诞生了(“d”为动态!),它是一种利用javascript,层叠样式表和HTML创造的Frankenstein(毁灭创造者自已的)语言。它看上去对每个人的抱怨都给出了完美的解答。它让商业公司拥有了编索引的能力,使开发者能查看来源,而且让公众不再担心下载的问题。
但是,并非一切都令人满意。要知道,你可以用动态的HTML做各种精彩的作品,但是,从技术以及创造力的角度来看,Netscape和微软公司的浏览器之间的巨大的差异已经使dHTML发展成为一个可怕的噩梦了。正是因为技术太好了,以至于不得不去用它,但是同时却只有极少的人在开发交叉浏览器,以及交叉平台dHTML。这时,我们的救星——Macromedia公司出现了。
当CD-ROM特别流行的时候,Macromedia用Director,一个多媒体制作系统为它自己起了一个名字。当因特网在1995年飞速发展的时候,Macromedia发布了用于Director的Shockwave插件,它允许浏览器在线观看Director内容。然后Macromedia买进了Flash,并且设计了一个新插件专门用于支持网络。当公司继续研究这些插件的时候,它也好像了明白了动态HTML的重要性。为了满足dHTML开发团体的需要,Macromedia发布了一个不仅可显著地加速HTML而且可创建动态的按钮的产品。这个程序被称为Dreamweaver——如同你所说的那样,我更喜欢它。它也有它的缺点,但是,它对程序处理帮助极大。
第3课
第2页——DHTML的优缺点
DHTML是一个为你的网页添加交互性和多媒体的好方法,而Dreamweaver则是一个制作dHTML页的好工具。 Dreamweaver的最大的一个优点是它可像制作普通HTML页那样制作dHTML,并且和其他的WYSIWYG(所见即所得)编辑器相比,它产生的dHTML代码更加整洁和整齐。因为它也是HTML,所以即使你的阅读器没有适当的plug-in(插件),你也不必担心。这也意味着,使用搜索引擎为你的内容编目录以及用你喜欢的文本编辑器来进行修改将很容易(也许你已经听说过Dreamweaver的事?)。下载时间无关紧要(虽然复杂的文件会增加文件容量)。另外,因为Dreamweaver代码紧凑,所以,你能制作与用Director或Flash同样棒甚至更好的交互式作品。并且,如果你是一个HTML编程的新手,你只需花费20分钟就能了解能给那些经验丰富的网络专业人员带来大把银子的Dreamweaver。
不幸的是,dHTML不是全部都是令人十分满意的。因为它是未被编译的数据,所以,它的性能总是不符合插件格式。你的显示器的帧频和刷新率将因你的机器和它的配置的改变而改变。这样就产生了旧式交叉平台兼容性问题。我们希望随着Dreamweaver性能的提高以及两大浏览器巨头在此问题上观点的接近,这个问题最终将被解决。最后要考虑的一件事:既然Dreamweaver能制作一些惊人的动画片,它的技术基础,即HTML,是否将永远不被用于动画制作。Dreamweaver不是,或许将永远不是一种像Flash,Director或QuickTime那样棒的动画制作工具。但是,那并不表示你不能用它做重要的工作。
第3课
第3页——准备,设置,
在我讲了这么多之后,你或许准备使用Dreamweaver,但事实上,我们还没有准备好。DHTML以几个网络标准为基础,虽然使用Dreamweaver并不意味着你必须知道全部这些标准,但你最好还是了解一些HTML,CSS,甚至一点javascript的基础知识。你不必作笔记,你也不是去做测验,但是,如果你在概念上是模糊的,你至少得浏览一下这篇文章。
最重要的是,你需要有一个对Dreamweaver和dHTML的深刻的理解。如果你没有100%可靠的知识,Taylor的Dreamweaver Tutorial或他的DHTML Tutorial是你必读的。尤其要注意Dreamweaver Tutorial。我们将讲述一些比较深的问题,并且,我不想漏掉任何一个。
为了制作dHTML动画,在配置方面你还需要一些必要的工具。至少,你需要一个文本编辑器,例如BBEdit或HomeSite和一个4.0以上版的浏览器。不过,只有极少的人才能称职的使用这个而难以掌握的方法,所以,也许你还会想采用下列工具中的一些:
一个WYSIWYG(所见即所得)dHTML编辑软件
除非你是一个dHTML/JavaScipt编程高手,否则你几乎一定需要一个WYSIWYG(所见即所得)编辑软件。很明显,我是一个Macromedia的Dreamweaver的爱好者,但GoLive!Cyberstudio Pro也有它的爱好者。大部分所见即所得编辑软件允许你利用一个图形用户界面(GUI),或者手工编辑代码来工作。
一个位图设计程序
Dynamic(动态)动画的动态表现程度并不能超出他们的内容,这也许是你为什么为了使你的图形——GIF,JPEG,PNG——更完美而想保留一个好的图像编辑程序的原因。位图程序包括美国Adobe公司的Photoshop,ImageReady和Painter。
一个GIF89创建程序
DHTML几乎使得动态GIF没有存在的必要性,但是,它们偶尔还派得上用场。因此保留一个GIF89编辑程序放在你数字工具箱中——你可能在紧要关头需要它。这些程序包括GifBuilder,GifConstruction Set,GifMation,ImageReady和Flash。
传统的绘画工具和扫描仪
老的像铅笔,钢笔,墨水和纸那样的工具,在比特和电子的瞬息万变的世界里还有它们的位置。有时计算机生成的图像缺乏手工绘图的那种个性。先用纸和素描工具画一幅图,然后把图画扫描到你的计算机中,进行数字修正,并把它整合到你的dHTML动画中。
OK。既然你已经全部准备好了,就让我们开始进一步深入地去学习它。
第3课
第4页——你在和谁说话?用怎样的方式?
创建适合于所有的浏览器和平台的动态内容是非常难的。在特定情况下,尤其是如果你没有一个好的所见即所得编辑软件的话,创建这样的网页几乎是不可能的。不同的浏览器支持不同的功能,并且,当某个功能重叠的时候,他们总是用不同的方法来完成任务(浏览一下browser comparison chart,你就会明白我说的是什么意思)。你需要解决在Mac和Windows机上的Netscape的4.0和Internet Explorer的各自的许多问题。因为它会影响你整个动画的制作,所以这一步是至关紧要的。
例如,如果你在设计适合于IE 4.0的网页,你需要知道它具有在你的动画片制作中可被灵活地应用于动画元素的可视化滤镜。使用浏览器来应用这些滤镜,与使用预先制作的图像相比,你仅仅需要下载图像的一个版本,这将节省你宝贵的文件空间,但是,它会以许多种不同的效果显现出来。多个滤镜可结合起来以产生不同的效果,并且,很多滤镜也可执行转化任务。
滤镜种类如下:
1.Alpha Channel(画面逐渐转换及蔽光功能)
2.Motion Blur (增加动作的真实感)
3.Chroma
4.Drop Shadow
5.Flip
6.Glow
7.Grayscale (用于你基本的梦幻序列)
8.Invert
9.Mask
10.Shadow
11.Wave
12.X-ray
13.Combination
想得到更多有关滤镜及其使用方法的详细资料,请看Taylor的Filter Article。
如果你确定了主要的读者群,就可决定怎样规划你的内容了。如果你对网页编程的dHTML的方法不太了解的话,也许你将想重新使用一个所见即所得编辑软件。如果你自学了HTML,CSS和javascript,你也许能在一个文本编辑软件里手工编写自己的页面,尽管越来越多的有能力的开发者正在逐步被舒适易用的WYSIWYG HTML编辑软件所诱惑。Dreamweaver在细节方面是非常有诱惑力的。类似于timeline-oriented(时间线向导)多媒体程序,如Flash或者Director,它用一个页面排版程序来进行控制。并且,它的界面对用户非常友好——你可对显示的网页进行修改同时HTML会自动进行调整来适应修改。与大部分的网络开发者创建页面的方法相反,他们通常是先做好HTML然后把它拖进一个浏览器来检测效果究竟如何。它的魅力无法否认。
第3课
第5页——全力以赴
虽然网络动画及其制作工具以今天标准来看可能比较原始,但是别忘了网络仅仅才出现了大约5年的时间。把现在仍在婴儿期的网络动画制作技术和40年代传统媒体相比较,没人认为它是粗糙的。
你可以攻击媒体的一些缺点,但是,别期望能打倒他们。暂时而言,某些动画制作技术和风格你还不能使用。把过多的信息塞到你的动画片里,你将陷入带宽或处理器速度限制的陷阱中去,因此,你应该试着为网络做合适的动画。问题的关键是你怎样把网络的缺点变成优点。
在此之前我们已经说起了,剪裁风格通过像Monty的作者Terry Gilliam这样的漫画家而得到普及,而South Park的作者则将其极好地应用于网络中。并且,它特别适合一些有限制的动作类型,尤其是dHTML动画。关键是使运动保持简单化。试着把一个基本的动画放入你的前景,比方说,做一个小的骑在独轮脚踏车上的人物的循环动画,而车子不会改变位置。为了达到看起来他好像正在运动的效果,做一个长的背景。最好能制作一个小的(尺寸和文件容量)背景图像,然后,根据需要进行缩放。文件容量的减少肯定会带来质量的降低。
第3课
第6页——URL是舞台
与frame-by-frame(一帧接一帧)媒体(例如Flash或GIF89)不同,使用dHTML更像指挥一次游戏或导演一部电影:你的动画的组件是演员,背景图像是你的布景,而浏览器是你的舞台。如果你关心每一帧的问题,Dreamweaver会给你一个界面,让你更顺手地使用这种方法。
因为动态HTML不必在一个线性媒体制约的范围内运行,所以它可以产生更交互性更强的作品,甚至会随机产生。不同的动作由“演员”来完成,观众或计算机能影响其他的演员甚至改变整个故事-所有观看你的动画的人都能有不同的观感。只有依靠熟练的技术,这才能真正变的有趣并且吸引更多的访问者。
Dreamweaver允许你制作相当数量不同的timelines(时间线),每个都有不同的演员,行为和特性设定(例如,帧频或者循环)。多个timelines(时间线)的使用能给你的动画制作带来一种“随机的”感觉。在以下例子中的每一个组件都位于一个不同的timeline(时间线)上,并采用一个不同的帧频。注意每两次播放之间的差异。
例子:多个Timelines(时间线)的使用
媒体:DHTML
文件容量:14KB
浏览器:Netscape 4+, MSIE 4+
dHTML的另一个优点是它允许你把可编辑的,可检索的文本放入你的动画——你不必使用一副图像。这样做你可能会失去自由控制fontographic组件的能力,但是,现在文本是可编索引的,而且是可更新的,并且你已经大大地减少了下载时间。另外,使用本地浏览器的组件也能使文件容量减少。你会对一个熟练的设计者能漂亮的使用像彩色的区域(<div>),HTML和CSS这样简单的组件来做出一个精彩的页面而感到惊奇。
第3课
第7页——滑动和滑行
你可以在dHTML(同样在Shockwave和Flash中)中看到很多滑动——滑行动画,因为它是把图像从屏幕一点移动到另一点的最简单的方法。在循环动画中,你能通过使滑动和滑行相结合的方法来确定笔直的滑行路线;例如,动画中在某个地点散步的人,突然表现出“粗鲁的行为”。
例1:滑行移动的文本(概念图解)
媒体:DHTML
文件容量:1KB
浏览器:Netscape 4+, MSIE 4+
例2:以“动态循环”来表现滑行移动:
主题:}}}destinATiON{{{
作者:Future Farmer
媒体:DHTML和GIF89(部分使用了Shockwave for Director)
文件容量:约200KB
浏览器:Netscape 4+, MSIE 4+
但是,如果你想接受有审美感的滑行也是很好的——虽然它倾向于看上去不那么真实,但是,它的简易是其获得了毫无疑问的魅力,并且有很多漫画家已经用它创造了自己的作品。问一下Trey Parker和Matt Stone——“South Park”的创造者。剪切动画,尤其是在旧的“Monty Python”中显示的由Terry Gilliam制作的装饰图案,充分利用了滑行移动动画的长处。
第3课
第8页——实现交互性
的确,网络相比传统媒体的最大的优点之一是它的交互性。在观看你喜欢的电视时,你所中意的表演过程并不会因你的行为而发生改变,当然,除非你在美国小姐竞选中参与投票。
如果它推动了故事的发展,那你一定使用了交互性。如果你不能想出一个好方法,别在动画制作中使用它——无意义的交互性时是无说服力的!如果这样,你还不如不要交互性的好。用鼠标单击触发一个事件是交互性的最常用的形式,但是,并非是唯一的一个方法。你可以试用其他的交互性形式,例如用户经由表单组件或drag-and-drop(拖放)对象来将其触发。你要让你的交互作用变得更有趣和新颖,并努力思考你的动画的用户在动画中扮演着什么角色,从而来设计对话。
例子:甲虫男孩的探索
作者:Chad Frick
站点:YukYuk
URL:www.yukyuk.com
媒体:Shockwave for Director
文件容量:100KB
第3课
第9页——需要牢记的事情
在此以前我已经说过这些事,现在,我要再说一次。不是所有的浏览器格式和使用方法都是相同的。当在交叉平台上工作的时候,特别要注意每个浏览器支持的是什么。在Dreamweaver里制作的东西并非适用于所有的浏览器,因此你要在尽可能多的不同的机器上以不同的设置测试你的动画。你可能发现在你的机器上顺利运行的东西在你的邻居PC机上却无法工作,或者,你也可能会发现你在PC上制作漂亮作品在Mac上却是一塌糊涂。
另外,查看在平台或浏览器之间是否有存在灰度或色彩的问题。没有比换机器就会导致改变色彩值更能激怒设计员的了。你不可能指望了解所有浏览器和平台之间的小的差异,但是你创建的dHTML越多,你就会得到更好的跨越这些陷阱的方法。
创建交叉平台和交叉浏览器动画的最简单的方法是使用放到适当位置的图像和尽可能小的文本来工作。记住:Netscape能灵活地改变部分的对象。Dreamweaver有一个确保你能制作交叉浏览器动画的功能,但是你可能要不得不手工编辑Dreamweaver创建的代码以确保在Netscape浏览器中得到想要的效果。以下是非常简单的交叉平台动画制作的例子。
例子:简单的交叉平台动画
媒体:DHTML和GIF89
文件容量:30KB
浏览器:Netscape 4+, MSIE 4+
把一些内容转换成dHTML是很困难的。也许你的动画制作的太复杂了,或者,交互性对Java描述语言太过分苛求了。在这些情况中,不要害怕使用其它类型的动画制作媒体,例如Flash,一个简单的GIF89或缩减版本的dHTML。它们可能是一个很好的解决办法。
网络的另一个使人烦恼的方面是你的观众不仅仅使用各种各样的浏览器,而且还使用不同的浏览器版本。实际上,一些人使用的浏览器是如此之旧,以至于他们根本不能查看dHTML。适应这些古老的浏览器最好的方法是提供一个可替代的动画媒体类型——通常是使用可视的GIF89。但是,在制作dHTML动画之前不要感觉压力太大。它将会带来更多的麻烦,并且会占有比它应有的份额更多的带宽。所有你最好换个方式来使用这些作为替代品的媒体。
IE 4.0(网络浏览器)提供全屏模式,这时,所有浏览器的“附属物”都被除掉,而网页占据了整个桌面。如果使用得当,这个模式很有用。大多数的CD-ROM使用整个屏幕来显示内容,但是这对网络用户来说是一个比较新的概念,而且,它令人迷惑。你可以让你的观众提早知道下一个单击将带来什么,或者把全屏选择提供给用户,来使你的观众享受更好的服务。
你永远不会知道知道人们把他们的浏览器设置为什么尺寸:这会侵犯个人权利。使用百分比方式而不是通过改变像素的大小来给你的动画角色定位,这样可充分利用用户选择的浏览器窗口的宽度。相比把你的动画局限于窗口里的一个按一定尺寸设定的框里,这是一个效果更好的技术。使用dHTML,你可以你的动画制作使用所有可以利用的资源。因此,干吗不用它呢?
这样,当你用dHTML进行动画制作的时候,你就有了一套好的指导方针。记住这些根据我的使用经验而提出的建议对你来说很重要。不同的人们有不同的工作方法,并且,他们所作的全都有效。如果你希望自己的动画以160*160的正方形演示,一定要把它装入一个框中。如果你想使动画变得更具交互性,你可以使用上述的一些方法。网络在很大程度上还是很不确定的,而dHTML更是这样。人们还在做他们一直在做的事情,你也应该做相同的事。谁知道?或许你就有可能发明让动画变得真正动态的伟大方法。
在第4课将介绍有关Flash的内容。
第4课
第1页——动画制作指南——第4课
Flash 简介
Macromedia的Flash是,嗯,在面板上没有Flash?!在诞生后的短短时间内,它已经成为一流的网络动画制作格式的之一了(并且效果没的说)。
Flash的成功来自于它的非常灵巧的天性:它是一个创作工具和一个文件格式。并且,有很多适用于它的Flash工具。它不仅仅比dHTML等更容易学,而且它还具备很多重要的动画制作功能,例如,关键帧插入,运动路线,动态遮罩,变形以及洋葱外皮等。它的用处广泛,你不仅仅能使用它来制作Flash电影,而且(和Flash捆绑的AfterShock配合使用)你还可以像GIF89那样在QuickTime文件或者在其它的文件格式(PICT,JPEG,PNG,及其它)输出动画。而且,Flash效果更好。
Flash的一个缺点是它需要一个plug-in(插件)。但是,在Netscape 5提供本地Flash支持(无需插件)之后这个绊脚石变得不那么更可怕了。自从IE 4的结构图形技术不再坚持排斥Flash之后,我们就希望微软公司的IE 5也能支持本地Flash。
现在Flash仍然为作为一个动画格式冠军而泰然自若的站立着。但是,为了让你深信不疑,让我们更深入地Flash的优点和缺点。
第4课
第2页——Flash的优缺点
网络上的在线动画人气极旺的情况很少。甚至于最简单的动画都有一个很长的下载时间。但是Flash改变了有关流技术和矢量图形的一切。当用户在等待整个文件的下载的时候,流技术可以让用户先看到动画的开始部分。但是,这决不是什么新玩意——它出现的时间几乎和网络出现的时间一样长了。
Flash流行的主要原因是它使用了矢量制图法(与位图法相对)。因为这些图像与它们的被位图化的堂兄弟相比要小的多,而且它们对图像的大小和质量产生很少的影响,所以它们对认为带宽第一的网络来说更完美(想了解更多有关位图和矢量之间的差异的知识,请看Webmonkey上的Flash Tutorial。
不过矢量图形有一些与生俱来的缺陷。例如,照片由于包含了太多的信息而不能有效地转化为矢量。如果图像是由同一颜色填充而成的,Flash一定会高兴得心花怒放的。
矢量图形相比位图的另一个优点是它能使任何图像放大或缩小。这个方便的小功能是给动画制作的一个额外奖励,而且对用户来说这是一个非常酷的特点。这个功能在Flash出现之前的网上是不存在的。
现在,在网页上添加是可以的,但是想实时地播放播放声音却是几乎不可能的。Flash已经通过把声音放到timeline(时间线)上解决了这个问题,所以,现在你能给你的动画特定的部分,或者某个与用户发生相互作用的地方连接上声音。
实际上,因为让你指定帧频(每秒刷新屏幕多少次),所以timeline(时间线)本身就是一个优点。电视刷新它的屏幕的频率是每秒30次,电影设计的帧频为每秒24次。Flash则有一个可变的帧频。帧频越高,你的动画里包含的信息就越多,播放也就越平滑。当然随着帧频的上升,计算机的CPU不得不加大刷新屏幕的处理,这使得它的运行速度变得更慢。所以,不要使用过高的帧频——否则,较老的机器将无法播放你的动画。
作为一个额外的奖励,你也将得到像关键帧动画制作支持和过渡帧这样的功能——它们可大大节省动画制作时间。关键帧是在动画里所发生的值得注意的事件的要点。例如,一个对象从一个角(关键帧1)移动到另一个角(关键帧2)。然后过渡帧将填充关键帧之间的帧,以使对象看起来优美地横穿屏幕。在计算机出现之前,漫画家不得不在每一帧上都手工画上相同的图像,而这些图像只是位置稍有不同而已!啊,进步了。当然,非自动化,一帧接一帧的动画制作在很多的情况下还是非常有用的,并且,Flash允许这样做。
Flash还让你更轻松地整合使用简单的javascript功能。如果你曾努力地去学习过像javascript或者Macromedia的Director Lingo那样的脚本语言,你会知道它有时很令人头疼(尽管你可能从来没有看过Thau的javascript Tutorial)。核心程序编制员有些藐视脚本语言,但是,对我们这些不懂得太多计算机专业知识的人来说情况完全不一样。Flash使创造交互性变得简单,消除了学习一些凌乱的语言的必要。权衡一下,如果不学习语言,你将不能使用很多功能。但是,你仍然能做一些像触发由用户的行动(如用鼠标滚动或单击)所导致的事件,这些是产生交互性所必须的。
对插件的很多批评的其中之一是他们一般出现在你的网页上的一个预先定义的区域内,即框架内。尽管,在某些情况下来说它是好的,但框架可能会成为某些东西的监狱。设想一下,网络设计员希望不同的组件在同一个页上发生相互作用。如果这些组件中的一些位于框架内而另一些在框架外,那设计员的运气就不是很好了。Flash插件的最近的版本允许作者在框架的外面进行制作并可把Flash组件放在HTML或其它组件的顶部或下方,这对增加交互性极有帮助。
Flash还支持很让设计员开心的阿尔法通道(alpha Channel)。并不是太技术性的东西,阿尔法通道只是被捆绑到一个允许用不同的方法来再生的图像上的一份额外的信息。使用阿尔法通道可使图像的一部分变得透明,并且,透明度值可设定为从不透明到全透明之间的任一数值。对阿尔法通道的支持现在是有增无减。
有如此之多的优点以及如此少的缺点,使用Flash无疑是明智之选。但是,先别急着用——在进入我们今天的课程之前,确认你已有了所有制作Flash动画所必需的工具。
第4课
第3页——你都有吗?
现在,你应该已经了解Flash能做些什么。但是,你可能还不是很懂怎样制作一个Flash动画。如果你不太懂,看一下Webmonkey的 Flash Tutorial。与此同时,让我们来讨论一下你使用Flash时所需要的工具。
Flash是一个定价合理的软件,但是,如果你还没有买它,你可以下载一个30天的试用版本。如果你是一个斯巴达战士式的人,你可以除了Flash程序以外不使用其它任何的工具来完成你整个动画制作——从概念到完成。但是,如果你用惯了某一个程序,你可能不想再重新学习Flash的每一个功能。你能使用这些程序——老的新的都有——来增强Flash的性能。
AfterShock
Macromedia的另一个程序,AfterShock是和Flash捆绑在一起的。但它决不是必需品,它是为了应付万一你想把“受到震动的”Flash文件转换成其它的文件格式(Java或GIF89)而设计的。它也允许你把你的Flash文件毫不费力费力地整合入HTML文件中去。
一个(插图绘制)Illustration程序
Macromedia的Freehand,以及Fireworks和Adobe Illustrator都能将输入Flash的文件轻松输出。专用的插图工具往往有比Flash更全面的特性设定,但是,学习它们也更难。因此,除非你能以轻松心情对待这一切,否则它们也许没有学习的价值。
一个位图设计程序
不是每个人都是矢量的爱好者——有时位图是解决设计问题的最好方案。你可以使用一个像美国Adobe公司Photoshop,ImageReady或Painter那样的位图程序。在你把他们转换成使用Flash(我将在以后做更进一步的介绍)的矢量图形之前,这些工具对清除扫描线图像是很有用的。
一个HTML编辑程序
使用一个HTML编辑软件来把你的Flash文件整合入网页——尤其是如果你打算把Flash和其他的HTML组件混合在一起时它更有用。常用的HTML编辑软件包括:Macromedia Dreamweaver(能和Flash一起很好地工作)、GoLive、 CyberStudio、FrontPage、NetObjects Fusion、PageMill、HomeSite和BBEdit。
传统的制图工具
计算机没有完全代替铅笔,墨水和纸。这些老式工具不仅仅在打草稿时(例如,帮助你提前绘出你的动画)很有用,而且你能用他们来创建一个具备相同功能的媒体,然后扫描进计算机并把它转变为向量。这说明什么?传统工具自有它的不可取代之处。
让我展示给你看:使用铅笔芯或墨水在一张纸上画一条线。现在,在计算机上“画”一条线,把两者进行比较。你看到差异了吗?模拟线的不理想性(碳灰问题,你的铅笔芯不规则的形状,你的手的颤抖,从你的钢笔飞溅出来的小污点,你选的墨水或纸的类型等等)使得其具备计算机所无法拥有的个性。我们承认,你可以用记录笔来做一根有趣的数字线,但是它比用一只简单的铅笔需要更多的技能和手——眼的协调,而后者每个人都知道它的使用方法。
例子:线
媒体:QuickTime
文件容量:起初为46KB(8个文件合计为379 KB)
描图工作台
给你们中那些对自己的画图技能不自信的人(即使是那些信心十足的人)一个描图工作台是帮助他们描绘一幅素描或者根据一幅照相的图像来制作一幅素描的好工具。
第4课
第4页——那么你还是不能画吗?大买卖!
认为他们自己在艺术上贡献不小但困难也很多的人们通常认为Flash并不能为他们做出什么贡献。但是,这并不完全是事实。要感谢Flash的描绘能力,它使得所有你需要的只是一点设计感觉和独创性(ta da!今天你将学习到这些),然后,你就会成为一个优秀的Flash艺术家。
下面是它的使用方法。从选择一个好的位图来描绘开始。你使用的方法将根据你选择的位图的种类而不同——例如,照片比黑白的线条图画需要更多的预先准备工作。很明显,这是因为在每个图像中细节的数量是不同的。甚至非常复杂的线条画都仅仅由,嗯,线条组成,这使它非常容易转化为矢量形式。
让我们以一幅线条图画开始。在图像被扫描进去之后,它需要进行一些清理工作。因此,把图像拖到Photoshop里,删除任何不想要的信息,然后,为了除去那些扫描进来的不必要的部分(在这个例子中,有相当数量的灰色污点),使用Levels来提高图像的亮度和对比度。接着,转换图像格式,把它作为一个PICT文件保存以输入Flash中。
使用文件:输入Flash-这会把图像变为位图模式。描绘(Tracing)看起来处理大的文件效果更好,所以你最好在高分辨率下打开小的图像,而对于一幅大的图像最好采用72dpi的分辨率。你可以在三个窗口中打开同一幅位图,来比较不同的描绘设置。
进行缩放,这样你就能清楚地观察不同设置的效果。
开始修改:描绘位图将调出一个对话菜单。使用默认设定,你将会知道描绘设置的哪些部分需要修改。现在,在其它的窗口中试一下不同的描绘设定。
当你用黑白的线条画工作的时候,把图像的一个部分用一种颜色填满(红色作为一种中间值色调是一个好的选择),这样,你可以在对别名和颜色所做的修改上面保留标记。一定要通选择控制(Control):测试场景(Test Scene)来比较文件容量和显示速度,通过选择修改(Modify),曲度(Curves)和最优化(Optimize)来对大文件进行优化。
现在,让我们谈论一下描绘设定:
色彩临界值
这个性质的默认值是100,最大值是500,最低限度是0。值越高,则它辨认的颜色变化越少,其结果是产生更小的文件容量。它怎样运行呢?描绘设定把像素和像素之间的RGB(三原色)颜色值进行比较,并且,如果在色彩值上的差异小于临界值,这些像素被看作同一种颜色而被描绘出来。
最小区域
这个性质的默认值是8,最大值是1000,最低限度是1。更高的数值意味着更大的面积/形状。图像变得越来越简单,而且更合乎时尚,另一方面,文件容量却变得更小,并且,显示速度也提高了。它怎样运行呢?它将确定按中心像素颜色进行着色的周边像素的数目。
曲线适合度
这里默认设置为正常,并且,这个设置的改变将影响描绘线的精确度。选择“平滑”或者“非常平滑”将使线条平滑化并减少文件容量。选择“严格”或者“非常严格”将以增加文件容量和显示速度为代价更精确地复制线。“像素”选项是最精确的选项。在图像里复制当前的像素,它可对文件容量和显示速度起到一定作用。
角临界值
这个值的默认设定是“正常”。这个选项的改变将决定尖锐的角是被描绘还是被弄平滑。选“Few Corners”将使角的数量减少,给你的图像一个更时尚的外观。选择“Many Corners”可更精确地描绘角,这将增加文件容量和显示速度。
看一下下边显示的两个被描绘的图像副本的例子。一个设置为使用尽可能低的设定,另一个是设置使用尽可能高的设定。要注意两个图像 在外观上只有极小的差异,而且,用尽可能高的设定的图像仅仅只有1KB的容量,用尽可能低的设定的图像却有一个巨大的97KB的容量——太大了。你可通过正确地应用描绘选项来抑制文件容量,同时只对图像质量产生极小的影响。
例子:牛的比较
媒体:Flash:
文件容量:1KB,97KB
注意:这个例子可能会给低速计算机带来很大负担。
上述的例子是一个理想的Flash图像,但是,不是每一件事都象这样可以轻而易举地完成。有着许多颜色的复杂的插图,现实照片的设计或者很多小的,紧密的线条或形状都会给你带来很多麻烦。关键是你要在位图进入Flash之前用Photoshop(或者别的你喜欢的位图编辑软件)把它尽可能的简化。如同我们以前所做的那样,去掉任何不必要的信息或人工制品并调整亮度和对比度。然后,锐化图像以使线条和形状变得更清晰。
这并不是一个完美的世界,而且,偶尔你必须在Flash中处理照片。我在之前说过,照相图像非常难以描绘,你也最好跳过描绘过程,并把其作为一个大(文件容量)位图整合于你的动画中。但是,演示时要用Photoshop的诸如多色调分色印刷,临界值,Levels,亮度和对比度,Dodge/Burn,清晰/模糊和灰度等特性。并且,你也许可以将照片简化以进行描绘。
例子:按一定格式被描绘的照片
媒体:Flash
文件容量:237KB(4个文件)
但是如果你不能在Flash中描绘它,试着把它拆开(Modify:Break Apart)。双击位图你将得到的一个位图属性对话框,它允许你转换位图,或者改变位图来把其变成一个本地Flash位图。当其被缩放的时候,我劝你关上“Allow Smoothing(允许光滑)”选项,因为它会使你的图像变得模糊。缩放的时候要避免降低位图质量,试着使用一幅高分辨率图像。
在保证图像质量不变的情况下,分辨率越高,你的缩放选择余地也就越大。
第4课
第5页——获得运动事件
通过断续的运动来表现的剪切风格是处理描绘或者扫描图像的好的选择。
剪切处理的发展符合历史的要求:在早期计算机动画制作时代,流畅性运动意味着要做许多精深的工作,对纸上的剪切单元一帧一帧地进行处理。自从计算机适应这种慢的,流畅的动画之后,这就不再是一个问题了。但是你仍然不能过度使用它,平滑,非抖动的过渡帧可以给你的动画一种计算机化的感觉,它将去除掉自然的,剪切风格的田园魅力。不过,流畅的过渡帧可以被有效地利用,虽然比较保守,但会给你的动画带来一种有趣的机械化的,未来的感觉。
当你为你的动画准备剪切掉风格图像时,考虑一下你想使图像的哪个部动态化。把每个可移动的组件分到它自己的层里,这样,你可以把每一个组件当作一个单独的实体考虑。观察一下每个组件是怎样移动的,它将怎样影响动画的其他的部分。当一个对象(像一条臂或一条腿)移动时,突然显现一个胃或一个先前从未看见的后腿 ,你会有什么反应?你可能需要借助纹理或其它区域来的荫蔽,来创建一个新的显示区域,有时这可能很困难。因此,当你选择要移动的组件的时候,动动脑子。
当你编辑完位图文件以后,把所有单独的层以GIF或PICT格式输出,并将其输入到Flash中描绘。描绘完以后,把它们聚集在相交的一点上,就像组装一个纸布娃娃那样。在Flash里,连接点默认为对象的中心。想编辑这个点(比方说,使一只肩膀上的手臂旋转),选择“Modify:Transform:Edit Center”,通过这种方法来将其接合。另外,要记住你不必使用整个对象——是分开还是结合,要看哪个对你更有用。例如,“Monty Python”就是文艺复兴时期的一幅油画的一部分。
例子:联结的图像
媒体:Flash
文件容量:30KB,30KB
当你观看你的动画时,它能帮你将其划分成一系列“场景”,这样,你就可以考虑你要使用哪种转换(或者不转换)。再说一次,如同我们在第一课中说的那样,情节串连图板(storyboarding)能帮助你为你的动画划分一个进程.
在Luke的Photoshop Tutorial中,他建议用一支记录笔(或者借助于一张桌子)来描绘一幅照片并将其转换成一幅线条画。想一想使用这种方法制作一部完整的动画片的可能性。试着将一幅图像描绘三次,然后使用这三次的结果作为一个动画片的三个帧,来创建一幅手指不停抖动的Katz博士图形。当然了你的工作看上去比Katz博士(这是一幅专利图像)的好因为它具有手工动画的魅力(相比计算机动画的规律性和连贯性而言)。
现在进一步来研究这个效果:从预先已存在的一系列图像捕获一系列的帧(采用序列照相或摄像),把这个thrice-trace-jitte(三次描绘抖动)技术应用到每个帧中。当你描绘的时候,用不着担心精确地重建你看到的东西——抓住图像的本质就行了。样式在这里是重要的。采用夸大与模仿的方法,来达到将要素分离出来的目的。如果你使用视频捕获,试着做出一种运动的(你可以精心去画或者乱画也行)感觉。最终的结果?一个完全“活动的”动画。
别忘了Flash是有很多乐趣的。它有各种功能——在这里将一条线歪曲,而在那里将其平滑化——突然,它的外表变得模糊,你不能确定是黎明还是黄昏。
试着仅仅使用简单的形状,线和文本(我们在Webmonkey上的Flash Tutorial中做过这个)来做一个动画。用评论的眼光来看电视(这可能是相当可怕的),你会发现有很多的广告节目以及电视连续剧的介绍为了得到好的效果而使用这个技术。把一个粗糙的外观加到通常是平滑的矢量图画上。不要怕会扭曲你的向量形状。它将使Flash作品不再那么冷冰冰的,带着一种数字式的精确的完美。
例子:Animation with just graphic elements Hotel: Story 20
作者:Fork Unstable Media
媒体:Flash
文件容量:57KB
第4课
第6页——在岩石和坚硬地方之间
我喜欢把Flash称作网络的AfterEffects 。如果你精通AfterEffects ,你会注意到它的几何学的特点非常类似于Flash的过渡帧(不同的是AfterEffects是为电影和视频工作而设计的运动图形工具,Flash则是网络动画制作工具)。过渡帧是在时间线上的两个关键帧之间插入其它帧的动画制作技术。它能把两个不同比例,位置,颜色,旋转和(在Flash3.0中的一个新功能)形状的帧连贯起来。过渡帧是使一个对象动画化的最快速和最简单的方法,并且,它产生更小的文件容量。但是,要注意:虽然过渡帧是使图像动画化的最显而易见和最简单的方法,但它并不总是最好的选择。
与过渡帧不同,frame-by-frame(一帧接一帧)的动画制作技术是一个通过手工在每个帧里对动画进行修改的技术。这个技术用于逐渐发生演变的(如,形状改变)动画。简单的变化(位置,或者比例方面的变化)更适合用过渡帧。frame-by-frame动画比用过渡帧制作的动画产生更多的文件容量。
最好把过渡帧和frame-by-frame动画制作技术配合起来使用,这样可做出更有趣,文件容量更小的作品。除了过渡帧和frame-by-frame以外,Flash还有很多工具和效果可帮助你轻松进行动画制作。
第4课
第7页——Flash的特性
运动路线
运动路线允许你设置一条直线或曲线作为你希望你的对象通过的路线(这比用过渡帧处理一系列的关键帧要好)。这是一个对动画制作来说既精彩又直观的方法。然而,ease-of-use(易用)因素倾向于怂恿漫画家制作一个过于复杂的运动路线,而实际上用简单的方法也能达到相同的效果。想知道这是怎么做的,看一下Mike的Flash Tutorial,那里的他的介绍。
遮罩
遮罩允许你使动画的一部分显现,而其它部分则在“后台”隐藏。一个对象能被全部或者局部地弄模糊。“填充”对象(符号,文本,或者形状)是可见的;“非填充”的区域被隐藏起来(注意:每个遮罩层里只能有一个对象。)遮罩直接地影响在他们下面的层,因此你指定的在遮罩层里的透明或半透明的区域将显现出一个展现在层下面的内容的窗口。遮罩不一定非是静态的,他们可以像任何别的层那样移动。
这里是制作遮罩的方法:首先选定你想显示的层。选择“Insert:Layer”,在被选定的层的右上方将创建一个新层。给新层命名,然后从新层的弹出菜单中选择“Mask(遮罩)”。现在放置一个填充到这个层里的(动态的,或者静态的)形状,文本或符号——这些将都是透明的,并且,任何非填充区域都将遮住其下边的信息。记住在层里只能放一个对象。另外,要记住Flash会忽视遮罩层中的位图,倾斜度和阿尔法通道。最后一步:从层的弹出菜单中选择“Show Mask(显示遮罩)”。
形状暗示
形状暗示特性首先用于Flash3.0,它是一个非常有用的工具。形状暗示允许你通过在两个形状上个指定一个点从而使一个形状变形为另一个。如果你熟悉象Morph或Elastic Reality那样的程序,这个过程对你来说是非常熟悉的。使用“形状暗示”时,选择形状过渡帧序列里的第一个关键帧,然后选择“Modify:Transform”:“Add Shape Hints(添加形状暗示)”。现在你应该在形状的某个地方看见带着字母“a”的红色圆圈,把“a”移动到你想作记号的点上。然后,进入过渡帧序列最后一个关键帧,在那里形状暗示将显现一个带着绿色字母“a”的圆圈 。移动它去和初始点相匹配。现在,运行这部片子,来看一看你做了些什么。不是很满意吗?移动形状暗示的位置直到你满意为止。
Onion Skinning (洋葱表皮)
Onion Skinning很早就用于动画制作,当漫画家把一张非常薄的半透明的纸放到他们画的最后一帧上时,可以用其做参考来画下一帧。在数字的世界,onion skinning是一个非常有用的功能,它允许你查看当前制作或编辑的动画或帧的周边帧(以前的/以后的)。看看Mike关于onion skinning的说明将对你很有帮助。
好东西太多了
效果的结合可以使事情变得更有趣。不用改变一个对象的比例,而通过测量,旋转,改变颜色,位置,形状,等等来做它。但是,别过度使用它,否则,你的动画将看上去就象另一个“瞧,妈妈!我能使用Flash了!”的动画。把技术结合起来是用来得到你想要的效果,不用证明你使用Flash的能力。
第4课
第8页——Flash的一些规则
这里有一些当你制作动画片的时候,可能要考虑的规则。和所有设计法令一样,这些规则中的任何一个都不会让你太高兴。但是,他们可以帮助你把小麦和谷糠分开,把下载时间最优化,使你的设计看起来更专业。
1、避免使用太多的矢量点。
大量的矢量将增加文件容量,使动画的显示速度慢下来。选择“Modify:Curves:Optimize”可减少一个对象里的矢量的数量。
2、在你的动画制作中使用尽可能少的字体。
很多业余的设计者会使用数千种字体,他们的已完成的设计看上去就像勒索信。Flash动画有一点比静态的网页更宽容——它们被动态化后,字样不必马上出现于单一的页上。然而,太多的字体增加了文件容量,有时会特别明显。为了使你的文本多样化,试着用不同的颜色和尺寸,以及主要的几种字样来进行动画制作。
3、避免使用被位图化了的图像。
与矢量图像相比,它们或许可以在细节上做更好的处理,但是,它们却占用太多的文件容量。
4、尽可能使用符号(symbol)。
Mike Kay的出色的Flash tutorial告诉我们,符号是怎样一个在不占用更多空间的情况下最大限度地利用一个Flash组件的伟大方法。使用符号无论什么时候你都可以重新使用一幅图像或动画。不用增加文件容量,仅仅使用一个符号,一场小雨就能变成一场猛烈的暴风雨。
5、通过使动作连接更紧凑而使显示速度更快,就像在GIF89中所做的那样,来加快显示速度。因为只有最后的一帧和新帧之间的差异需要显示,所以文件容量的增加也会提高显示速度。并且,如果动作和动态对象仅仅在屏幕的一小部分上出现,动画能被刷新得更快。
6、把每一个组件保留在它自己的层中,尤其是像动画背景那样大的对象。
这会帮助动画更迅速地刷新。下面的“Snoopy the Realtor”例子是应用这个概念的一个优秀的插图。因为它使用了一些frame-by-frame技术(胜于过渡帧),动画制作在文件大小和刷新速率方面的要求更加苛刻。为了对付这个要求,注意怎样把背景作为一个静态的连续层保留下来并使所有的运动聚集在一起。如果漫画家选择使背景(例如,飘浮的云)动态化,这将使刷新速率大为下降,并极大增加文件容量。
例子:房地产经纪人Snoopy
作者:Charles Schulz & Smashing Ideas Animations
站点:Shockwave
URL:www.shockrave.com
媒体:Flash
文件容量:293KB
7、在尽可能多的浏览器/平台/机器上测试你的动画。
世界上没有标准计算机一说。由于数千种不同的配置,产生了同样多的机器,你将因为要在所有的计算机上演示你的动画而疯狂。在测验以后,调整你的动画片以便它能适应不同的处理器速度和视频卡的帧速率(特别是帧速率,往往一台机器一个样)。另外,要检查PC及Mac上灰度及色彩的差异。
8、别再中了“一个帧套一个帧”的圈套。
因为没有专门的标准的显示器分辨率协议,所以,设计员为了适应最小的分辨率而经常把他们的动画塞到一个小的区域里。但是,这对Flash不成问题。因为它是以矢量为基础,在任何分辨率下都可很好地显示,所以,你能制作可变的,全屏幕的动画。这将给人一个印象深刻的,具备电视质量的交互性体验。
9、别把每一件事都留给Flash来做。
的确,它是一个伟大的技术,但是,Flash还是有它的局限性。如果你想出版一个大文本的文章,用Flash来试着做所有的一切将毫无意义(HTML或甚至于dHTML都将是一个更好的选择,因为它们更小而且可检索)。无论什么时候,只要你发现你自己严重依靠于Flash并不太牢靠的性能,试着用另一个可以把工作做得更好(像dHTML,GIF,JPEG或HTML)的网络技术来处理你的Falsh文件。
10、给你的观众一个Flash动画的替代品。
很多网上冲浪者还没有Flash插件,所以,你需要提供一些适合于这些缺少插件的人们的东西,来使他们能看到非Falsh的动画。你的替代图像可以是采用不同格式的同一动画(你可使用AfterShock来制作),这对一个动画是个难题(根据指令下载插件),而对另外一个动画而言可能根本无法做到(也许它更适合别的动画媒体)。
现在我们即将结束我们Flash的课程,并结束对一些最流行的动画格式所做的深入检验。既然你已经知道工具是怎样运行的,那么现在是学习你应该用他们做点什么的时候了。下一课:第5课——动画设计。
第5课
第1页——动画制作指南——第5课
好的动画片来自于好的设计,成功的动画的创作是通过难以想象的努力得来的。作为一个空间同时又是一个时间的艺术形式,它不得不把二者结合在一起(就像你的多样性的花园静态图像一样)。因此,它必须以极可靠的时间控制输出极好的动作。这样,你需要成为一个有关视觉的设计员和运动方面的理论家。
为了帮你掌握动画制作,我已经收集了10个可靠的关于动画制作和设计的基本组件的理论。请注意这些仅仅是理论,而不是规则——许多人无视这些规则,却制出很多令人惊奇的成功的动画片——但是,在你具备忽视他们的本领之前,它还是有助于你了解标准理论的。
第5课
第2页——点,线,矢量和形状
通往优秀的动画制作的道路是从敏锐的观察开始的:从看你喜欢看的动画片开始。你将注意到也许它们包括了一些(即使不是全部)下列的基础设计要素 。
1、点和线
点是什么?
[ . ]
点是焦点的中心,是设计的重点。它可以是一个当前的对象或者是根据指示(例如,透视图,或者视觉线)暗示出来的什么东西。当你设计一个动画的帧的时候,你应该准确知道点的位置。它什么时候移动,为什么移动?通过跟踪你那部分的焦点,你要确保用户逗留在动画片里你制作的部分。没有焦点,你的动画片就没有点(字面上,比喻性地)。
把点变成线
[-----]
线是点的继续。所有的线都有方向:垂直,水平或者倾斜(后者是前面两个的结合体)。模拟人的静止形态的水平线,带来使人宽心的,平静下来的感觉,另一方面,垂直的线在运动方面有很大的潜力。斜线是最富动感的,因为看上去它们“想”向水平方向倾斜或者向垂直方向上升。大家认识到将水平线和垂直线配合使用效果更好,因为你周围的实际环境就是这样(如各种水平垂直结构/树/人们排成一行一行的线)。和点一样,线可以是实际的或者是暗示的。
例子:Da Vinci Blues
作者:Steve Whitehouse
站点:Animation Express
URL:www.hotwired.com/animation
媒体:Shockwave Flash
文件容量:666KB
2、方向性力/矢量
方向性力,即矢量,是线也是运动,可以是实际的也可以是暗示的。矢量就象一只导盲犬,引导着观众的眼睛,漫游于动画的世界。作为一个漫画家,你不得不要特别注意提供给观众的你的矢量漫游的类型——它在哪个地方开始,在哪儿结束以及开始结束之间的中间部分。
有三个主要的矢量类型:
图形矢量——通过你的动画片里静止的对象来创建。
索引矢量——通过指向一个方向的某个事物(例如箭或指示的手)创建。
运动矢量——通过向一个方向移动的某个事物创建。
这些矢量中的每一个都能被用于改变一个事件的方向或知觉。
为了获得更多的效果,混合使用你的矢量类型,并将起合理搭配。
持续矢量:在同一个方向上有超过一个的图形,索引或运动矢量,它更强调方向性并给人一种稳定和连续的感觉。
集合矢量:在一个点上聚集超过一个的矢量。这些矢量给画面一种戏剧性的,集中的感觉。
发散矢量:矢量远离彼此。
通过密切注你的矢量工作的方法,你很快就能把你的观众的焦点集中于你想要的地方。另外,优化你的矢量还会带给每一个帧或是一系列的帧一种一致的感觉。把一系列有创造性的而且专业的矢量聚在一起,突然,你整个动画片会变得更有目的性和连续性。
3、形状
形状,是最难以描述的术语中的其中一个,它在本质上是被线,颜色和物质定义的区域。形状可以是有机的(流动的,在大自然里发现的不规则的形状的类型)或者几何学(严格的,有角的,精确的形状)。当处理形状的时候,既要注意你正在制作的形状(正形状)又要注意在背景区域以外的形状(负形状)。两个形状对你的动画片而言是同等重要的。
通过摆弄正形状和负形状,你能得到一些有趣的效果。“图形翻转”是一个把正形状和负形状颠倒过来的技术。在动画片中,你不仅仅可以在某一个单独的帧里应用“图形反转”,而且也可将其应用于一系列的帧中,这样可以给你的动画一个额外的维度。另外,图形翻转的概念还可以应用于声音,让前景声音后退到背景而背景声音移动到前景。
例子:Absolute Panushka
作者 :Lejf Marcussen
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:896KB
第5课
第3页——物质,空间和光
4、物质/深度/音量
物质,通常是用来描述一个三维对象的。在一个二维的界限范围内,像电影或网络这类媒体,物质可以通过描影法和透视画法被暗示,这有助于观众更好地感觉其物理外观。
例子:Geri的游戏
作者:Pixar Animation Studios
站点:Animation Express
URL:www.hotwired.com/animation
媒体:QuickTime3
文件容量:3.91MB到1.45MB(根据连接速度不同而异)
可以用几个简单的技术来模拟透视画法。
图像重叠
当不同的对象重叠的时候,它们看上去好像是一个在另一个“前面”,这样就“更靠近”电视观众。这个由近到远的模拟实验演示了一个三维图像。
感觉更小
如同对象变小了一样,它看上去像向“远方”后退,进一步远离了观众。通过使用相同的作法,更大的对象看起来离观众更近了。
位置,位置
对象位于一个动画平台的底部,它会被认为比那些位于顶部的对象更接近观众。因此,慎重地放置你的对象。
每件事物都变得模糊
还记得当事物在远方消失时,空气中的自然的雾气和我们眼睛的缺陷使得颜色趋向于褪色而对象则无法显示它们的细节的情形吗?在你的设计中模拟这些自然的缺陷是一种可产生深刻的感觉的制作方法。
5、空间/区域
你制作的所有的平面图片的物理的尺寸和高宽比对你的动画的结构和构成有很大的影响。平面图片的某部分会比别的部分吸引更多的注意。因此要特别注意人们最留意的区域:水平线,边缘和你图片的右侧部分(很奇怪,是吧?但这是真的)。
我们在前面的部分说过,一个动画主要是由水平的和垂直的线组成的,这些线给人一种稳定的感觉。通过使一个构图的水平面倾斜,你能使动画片看起来更生动。但是,要注意的是:太多的水平面变化会造成一种令观众作呕的感觉。曾经去过通用(Universal Studio)工作室(以其可怕的冰——雪——龙卷风旋转吸引力而著称)的人知道,那里有旋转天花板,即使你恰当的就座并且一点也不移动,你还是会感觉你在旋转,倾斜,下落?于是突然,你就接近崩溃?令人惊异的是人类的头脑是那样复杂,怎么会轻易相信这些虚幻的圈套,绳索及溺水者?你的动画片制作能利用人类的这个弱点。
图片的边缘是非常有吸引力的。任何没有放置在死角的对象都将感到会被拉向四个边中的一个,或最近的角。当一个对象大到几乎能够占满整个画面的时候,角的问题会使它觉得受到限制。注意这个“牵引力”的问题,努力去克服它,或者为了某种利益而强调它。如果你真的想给对象一个“宽广的装载量”的外观,把它设计成为接触到两边的样式。因此当你建框架的时候,要非常小心,边的牵引力可能不怎么讨人喜欢。
由于某种原因,比起平面图片的左边来人们更加倾向于注意它的右边。利用这个现象,在放置某些东西时,你可以巧妙或者不那么巧妙地强调右边。
6、光线
光线可帮助设定动画片所表现的心情——改变亮度使对象的光线感突然发生变化。光源和它的方向,以及光的颜色和强度,所有这一切都极大地影响着观众的感觉。例如,阳光给景物带来的感觉就与荧光不同。
例子:Absolut Panushka
作者:Piotr Dumala
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:768 KB
另外,光源也是一个起作用的因素。要特别注意光源的方向。光来自于后面或前面将使对象变得黯淡无光。光来自于上边或旁边才能正常地照亮对象(这是通常光影响我们环境的方式)。来自下面的光给了所有的一切一种生动或奇异的感觉(令人想到低劣的恐怖电影)。
注意阴影,把它用到对象上。使用它们来提高一个背景的情趣,暗示一个设置或一个特定的位置,显示白天的时间或季节(冬天和夏天的光不同),或者给一切一种戏剧性感觉。
一些其他的照明技巧:用它来使你的图像更风格化——高对比值(明暗对比率)使图像看起来更生动。柔软度,精细度的变化会带来一个更安宁的,更温柔的外观。像摇滚乐一样,照明的强烈变化能向观众发出一个未知变化的预告。你可以利用光线来强调动画片特定的部分(就像使用一个聚光灯)。
第四页——颜色、纹理、运动和时间
7.颜色
颜色对人有物理上的和心理上的影响,这使得其作用更大。
颜色可用于有效地影响人的心情(使用极亮的颜色的图像可营造一个令人不安的氛围)。蓝色使人平静,这就是为什么医院里多是绿色和蓝色的原因。红色或桔色给观众的身心带来一种激动的感觉,这也正是网猴们所要的。颜色理论很深奥,如果你想深入研究,我建议你看一下这方面的书籍(或Webmonkey里的相关文章)。
例子: Absolut Panushka
作者: Tania Anaya
站点: Absolut Vodka
URL: panushka.absolutvodka.com
媒体: QuickTime
文件容量: 762 KB
8、纹理
动画中的纹理指的是暗示的或可觉察的(而非物理的可触摸的)纹理。有些动画看起来比其它动画的质感更强(如沙地动画,油画,粘土地,模型)。采用纹理绘图(在这里一个扫描或创建的纹理被用于一个对象),三维动画制图将给模型装置带来更强烈的真实感或兴奋感。
例子:Absolut Panushka
作者: Ishu Patel
站点: Absolut Vodka
URL: panushka.absolutvodka.com
媒体: QuickTime
文件容量: 826KB
9、运动
运动是动画制作中最重要和最基本的部分——它给动画加入“动”的成分。当你处理一个动画时,我建议在开始之前先把运动规划好。只要有时间,就研究一下动画中的运动。当你等公共汽车的时候,观察一下周围(无论什么),并看看人们是怎样运动的。快速画下你所见到的一切。有空时带一个摄像机去录下各种运动——象狗逮蜜蜂,小孩子玩滑板,母亲给孩子喂香蕉等等。你必须具备以下书籍:《The Male and Female Figure in Motion》及《Horses and Other Animals in Motion》,作者都是Eadwead Muybridge。还有一本是《The Animator's Workbook》,它可一步一步地演示给你看怎样制作基本的漫步,转身及投掷动作。
现在,用这些工具来做一个逼真的动画。
但是你要记住,不要仅仅只是拷贝你所见到的东西。夸张一些,或采用其它的风格。没有个性的动画是不值得看的——你可以给动画加上一些电影或电视无法做到的特殊效果。
例子:Absolut Panushka
作者:Erica Russell
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:889KB
10、速度和时间
运动的关键是速度和时间问题。确保你的动画里的动作的速度是变动不休的。一成不变的运动是非常枯燥和虚假的。想想你高中的物理课(实际上它就在手边)里的抛物线运动是什么样子。你制作的动画就应该是那个样子。
变动的时间控制不仅可避免让你的观众昏昏欲睡,也可大大增强动画的趣味性。和用光线与音乐来给你的动画提供一种氛围一样,用不同的步调来给你的动画创造一种热情奔放的(或冷酷的)感觉。
第5课
第5页——意外收获!六项设计原则
除了动画片制作和设计的十大戒律外,考虑一些一般的设计原则来作为你制作精彩动画的准则。
比例和均衡
均衡和比例可以在动画制作中指定组件或者动画本身。我总是在计算机上发现比例是受限制的,因为在一个小屏幕的上创建伟大的东西是很困难的(或许你可以用胶片来做)。与一个黑暗的电影剧场不同,计算机屏幕位于在一个很容易令人分心的房间内(发传真进来,满屋子的音乐,在你的窗外一个完全裸露正在玩绳球的邻居)。处理这些不利条件的好方法是把他们转变成对你有利的条件:也许可以通过采用相反的方法并且使每一个组件都变得非常小来解决这个问题。
一致和变化
当动画里的每一个对象都与一个类似的对象通过某种途径联系起来的时候,我们把它叫做“一致”。变化是对象之间的差异。过多的一致会产生令人厌烦的动画,过多的变化则使事情变得混乱。好好衡量一下怎样出来这两者。
重复和节奏
在动画片里 重复出现的组件可以帮助增强连贯性并强调重点。另外,他们还能增加步调的感觉并使人们跟着故事情节神游。
平衡
有两种平衡:
1、对称的平衡——对象的两边是相似的。这种平衡更容易做到并给人一种很正常的感觉,缺乏乐趣。
2、不对称的平衡——使不同的对象看起来是相似的。这种平衡做起来就更加困难了,但是却更生动和更引人入胜。
重点和次要
通过使一个对象/题目集中到另一个上,你可以告诉观众在什么地方可以看到他们想要看的,这使你的动画信息性更强。就像我们以前讨论的那样,有相当数量的用以突出重点的方法(通过颜色、值、形状、线、规模、纹理或向量)。相反,如果你想得到“一致”的感觉,不要强调任何一个对象。当你想强调变化很少(郊外,机器人似的工人,或者Storm Troopers合唱队)的时候,这种方法尤其有效。
对比
在对象之间进行对比将强调某一对象,使事情变得有趣起来。普通的对比类型包括:黑暗/光明,幸福/悲伤,大/小,善良/邪恶,粗糙/平滑。另外,对比还能通过色调值和亮度用在颜色上。
这样,我们今天的动画制作和设计理论的课程就要结束了。再说一次,我今天教给你的设计理论和技巧仅仅只应用作指导方针。并且,和规则一样,这些指导方针也可不遵守。使用你在这里学习的方法作为一个出发点,然后进行实验,直到你创作出你自已的风格和你自已的一套指导方针。
下一课?在第六课中我们将学习怎样产生声音——动画片声音入门。
第6课
第1页——动画制作指南——第6课
在视频编辑的世界,音频工程师的工作是使事情“看起来”更好——像声音一样疯狂。优美的声音可以为毫无生气的内容带来活力,而糟糕的配音会使甚至是最好的作品混乱不堪。
在今天的课程中,我们来看一看声音在动画里扮演的角色以及它对内容的影响。
声音能使作品更现实或者更虚幻。另外,它能制造一种气氛,心情或步调。例如,听着声音来看电影可以永久地改变你对一首歌的印象。如果你是勇敢的,试着一边看Reservoir Dogs一边听Stuck in the Middle with You这首歌。这首歌由于Quentin Tarantino的声音和形象的有力的配合而被永久地毁灭了。看看音乐电视公司有关声音对步调(狂热的,或者无精打采的)的影响的介绍。为你的图像选择错误的声音可能使你的观众越看越糊涂。如果你曾用你的立体声音响设备,或者在一个拥挤的酒吧看过无声电视的话,也许你的天性倾向于让声音和图像更协调。所以选择什么种类的声音是非常重要的。
我们将考虑三种声音:配音/背景/气氛,角色的声音(人物对白)以及声音效果。
背景声音设置声调。想知道声音是怎样操纵你的感情的,去看一部恐怖影片。你是否会因为一个可怕的声音而大喊“别到外边去!”以警告那个好奇的女孩子?就像这些例子一样,声音的功能好比一个图标:一种特别的声音会向你暗示有一个杀手潜伏在门外。
例子:场景声音——推测你在哪里?(wav格式文件)
拍摄外景1:Do you know where you are?你知道你在什么地方吗?
拍摄外景2:What about now? 现在怎么样了?
拍摄外景3:Can you pinpoint your location? 你能准确地指出你的位置吗?
拍摄外景4:Visualize it. 把它形象化。
慎重地为你的每个角色选择声音。
为你的角色选择一定的声音可以使你的动画片大获成功或者把它毁掉。设想一下,如果Pat Sajak被雇来为Beavis或者Butt-head配音,或者由Jesse Helms为“South Park”里的卡通人物配音(实际上这是相当可笑的)会是什么情况。声音要与角色的性格相称,如果声音改变了,其他的一切都因它而改变。那就是为什么Simpsons里的全体配音演员都大受欢迎的理由,并且他们的报酬高达50000美元/每段话。虽然这个费用对配音工作来说过高,但是如果声音稍微发生改变的话,那么一切也就变的不同了。你可能会很喜欢一个角色,但是从你听到他说话的那一刻起,你是否已经开始讨厌他了 ?
例子:Dizzy Devil
声音:Maurice LaMarche
站点:Warner Brothers (华纳兄弟公司)
URL :wbanimation.warnerbros.com
媒体:QuickTime
文件容量:557KB
持续时间:00:00:11.14
一些小技巧:试着录下你以前的动画的声音。另外,你可能会想把它做成录像,这样,你可以把它作为一个范例,来观察并使用各种讲话的方式。
第6课
第2页——制作声音效果
要怎样才能使事物有真实感
声音效果使你的动画更真实,更有深度,使动作和背景更可信。当你为一个动画制作声音效果的时候,你不必努力去做一个原汁原味的声音。假设你的动画是一只玩具长毛狮子狗跑过一间厨房的地面。你可以找到一只长毛狮子狗,在它肚子上绑上一个话筒,把这只狗活蹦乱跳的穿过一些亚麻油地毡的声音记录下来。你也可以仿制这种声音,这常常比真实的声音更可信,而且更简单。在电影Monty Python和the Holy Grail中,Terry Gilliam(“Monty Python”的动画作者)扮演了一个用敲打两个椰子壳来假装在“骑马”的弄臣。这是foley艺术家(声音效果专家)的一个代表,他使用这“一串可爱的正在被敲打的椰子” 来模拟一匹奔跑着的马的声音 。
听一听接下来的例子你就明白我的意思了。
例子1:马小跑(椰子外壳)
例子2:火(弄皱的纸)
例子3:泼溅的水(用手指拔弄木球)
例子4:一群野猴子(热爱香蕉的朋友们)
把你的声音分层
如果你曾经用过一个像Photoshop 4.0这样的程序,或者使用过CSS 的话,你会很熟悉图像分层过程。大部分的声音编辑程序,以及甚至于像Active Movie Control之类的网络技术,都允许你对声音做同样的处理。为了显示前景,中部景和背景,你可以把一个声音放在另一个声音的“上部”来给你的动画片增加深度。试着把前景声音移动到背景,而把背景声音移动到前景。声音效果制作过程涉及到很多与实验和演示有关的知识和经验。
第6课
第3页——令人忧郁的带宽
声音会占用巨大的带宽——使用它,你可能要失去你的一大部分观众(所有那些没在使用宽带服务的人们)。减少文件容量的一种方法是重复使用声音。在YukYuk系列中,作者Chad Frick用一些无意义的声音来作为他的角色的语言。然后他把声音“翻译”成英语文字,让观众“看”话语。这种方法不仅减少了文件容量,而且易于把动画翻译成另一种语言以吸引全球的观众。
例子:Balloon Fungi(气球真菌)
作者:Chad Frick
站点:YukYuk
URL:www.yukyuk.com
媒体:Shockwave for Director
文件容量:166KB
因为高质量的声音文件往往容量较大,你还可以使用编码译码器(压缩/解压缩运算软件)来压缩音频文件以使其可以传送到因特网上任一用户的计算机上然后再将其解压来收听。很多今天在使用的编码译码器是流模式(streaming)的,但是,其中有一些在使用之前必须被下载。Real Audio,一种流文件格式——使用它自己特有的编码译码器,而且要求同时配合使用RealPlayer或NetShow。Shockwave使用的好像是一个专有文件格式(.swa),但是事实上,它是一个像MPEG-2 player III(即MP3)一样广为人所知的极受欢迎的编码译码器。微软公司NetShow也支持MP3,以及所以其他现有的音频和视频文件格式 。MP3用一种奇特的方式逼真到保留了声音,同时将文件容量压缩到最小——它能用1~12的压缩比来获得CD品质的音频声音 。
回想一下我们学习的动画制作课程:把媒体的弱点变成你的有利条件。在你把声音文件整合进你的动画之前,将其压缩,你就能从容地为你的不太好的声音文件增加一些特色(并且作为文件保存起来)。但是,你还是可以有节制地使用未被压缩的音频。Netscape和IE都可播放类似AIFF和WAV的未压缩音频文件格式。
注意:因为这些格式不是流模式的,它们会严重浪费带宽。
以前网络在很大程度上是一个无声的媒体,但是现在,出乎意料的声音会令人非常烦恼或者无法使用。你的用户可会希望使用某个为人所熟知的动画媒体格式的声音,例如QuickTime,AVI,RealVideo,Flash和Shockwave。但是,给像GIF89(没有内部声音支持)或dHTML那样通常是无声的媒体的加上声音可以让你的观众兴奋起来。不过有一点,它会让某个人的老板知道他并没有在工作(不是我的亲身体验)。那么,你可能想给你的观众一个告警通知,告诉他动画带有声音。另外,要确保你的动画即使没有声音也能表现很好的效果。很多的PC也没有声卡,所以,你的动画的对话和声音效果在这些机器上将无法播放。
例子:Absolut Panushka
注意:为了了解好声音是怎样改善一个动画片的,打开声音,查看接下来的第一个例子,然后,通过音量调节控制(就好像这样的 )关闭声音再来感觉一下。
作者:Jerzy Kucia
声音:Fausto Caceres
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:714KB
第6课
第4页——制造一些声音
制作你的动画声音有好几种方法。
使用歌曲,录音带和不再受著作权保护的声音效果 。
购买被精巧地分类的声音库,准备常用的标准音效和背景乐。要知道常用标准声音有它的缺点:因为它并不是为你的动画特别制作的,你会发现你自己对声音的安排处理可能不是非常准确恰当。另外,用标准声音就像,嗯,用标准声音就像剪裁技术那样,它是可以识别的。因为它是如此方便,所以其使用很广泛。并且,那些经常使用的音效和背景乐能给你的动画片带来似曾相识的感觉。为了解决这些问题,在你使用它们(想了解这方面的更多信息,读一下editing digital audio)之前,使用一个声音编辑程序来对常用标准声音做适当修改。
设计你自己的声音。George Lucas的Skywalker Sound在创造性的声音设计方法方面获得了很高赞誉。当一个麦克风被放在一个老式的,真空管的电视机后面的时候,《星球大战》电影里明亮的军刀的声音出现了。风暴骑兵的暴风般的声音可以通过用扳手打击金属管来制作。如果你需要一些很傻的声音,你最好用自己的嘴。Terry Gilliam为了制作他需要的可笑的吵闹声,把一块毛巾捂在嘴上,然后大叫,并把声音录下来。在远离你的嘴的地方听到的你的嘴所发出的声音往往正是你所需要的——既简单,又省钱。
经验丰富的音频工程师一般有很多工具(除了他们的嘴之外),例如麦克风、合成器、采样器、压缩器、限幅器和一整套昂贵的外设装置。这些装置能帮助你制作你的音频,即使你无法使用它们,也别担心。这是数字的时代,很多昂贵的工具已经被功能强大,而且价格便宜的软件所代替了。
我建议所有对声音感兴趣的漫画家都应该有一个音频编辑程序以改善、编辑、结合、转换、压缩声音文件。很多音频编辑程序允许你降低或者升高音调,或者加速或者使声音慢下来。音频编辑软件也能使你几乎毫不费力地修整,编辑你的文件。我发现SoundEdit 16是一个适合于Mac的功能强大的工具,因为它常常和给人以深刻印象的Deck II 硬盘记录软件捆绑在一起,所以你只要花一点点钱就可以得到一组很棒的音频记录套装。在PC方面 ,Sonic Foundry的Sound Forge是一个全功能音频编辑器。它不包括专门的硬盘记录软件,但是这个程序用它的大量的功能弥补了这个缺陷。
我们希望在今天的课程中你已经学到一些东西,并且清楚当你把声音整合进你的动画片的时候你需要考虑什么事情。如果你想学习更多的 关于记录和预备声音方面的知识,看一下Adam的Multimedia Tutorial。在第7课中,我将介绍各种可用的动画风格并教你如何将其整合进你的作品中去。
因此,要坚持继续阅读!
第7课
第1页——动画制作指南——第7课
为什么要使用传统的方法?
在技术产业中,事物改善,改变,重新设计它们自己的步调是受鞭策的。动画制作也一样。在过去的几年中,三维动画片已经可以制作得非常逼真,以至于分辨事物是真的还是计算机做的非常困难。近些年来,在老式的动画电影中看到三维图像并不稀罕。二维动画则经历了一个从容的,但缺乏革命性的变化。现在像迪斯尼那样的大的动画片制作商使用许多新的系统(包括市售的及其自己设计的)来改善和加快他们作品的处理。
但是,最新的技术不一定总是最好的。你的动画片可以使用数字技术,但是,那并不表示你必须在计算机上开始做它。现实世界媒体的不完美性和缺陷所产生的一点魅力和热情在100%数字化的动画里全都丢失了,有时候数字动画让人觉得冷酷无情或者过分精确。事实上,动画片的某些风格用计算机是制作不出来的。
因此,在今天的课程中,我们打算通过看一看各种动画片制作风格来结束我们的动画制作指南课程。如同我们过去所做的那样,我们将特别注意动画片的更传统性的模拟风格并且看一下是否所有东西都适应数字的王国。但是,你并不一定非要使用其中一种风格来制作你的动画片。为了看看哪种风格更自然,哪种方式更适合你以及怎样你才能把几种风格结合起来以创造一种你自己的风格,我们将做一些演示。在课程的最后,我们希望你会认识到任何事都没有“绝对正确”的道路。只要你对你自己的动画感到满意就行了。
让我们从剪切风格开始,这种风格你在前面已经了解了一些了。
第7课
第2页——把它切除
剪切风格——在“Monty Python”和“South Park”中表现得最明显——它包括把演员和场景从纸上剪下,将其结合或叠加在一起,然后,一帧接一帧地拍摄运动场面。不过,数字时代这种冗长的处理方法早已被抛弃。当“Comedy Central”为企业联合组织挑选了“South Park”的时候,作者Matt Stone和Trey Parker就已抛弃了他们过去制作第一个“South Park”短片时所用的结构纸和剪刀(也许你还记得耶稣和圣诞老人?),而是采用高级SGI 3三维图形工作站来模拟剪切的外观和其所表现出来的感觉。用三维来显示平面场景好像太过分了,但是,它的效果很好,而且处理过程变得更迅速。
剪切风格倾向于产生一个不连贯的,粗糙的,大杂烩般的外观。它不必一帧接一帧地刷新放映,就象一个以单元为基础的动画片那样。因此,它有丰富的细节和颜色(“South Park” 是一个例外)。传统上,用快速剧烈的变化——让演员在两幅画面中摆出两个不同的姿势——来使你的剪切作品动态化是一种比较容易的方法而且很有吸引力。虽然你不必非要使用这种方法,这个herky-jerky运动(与平滑,稳定的动画相比而言)给剪切风格一种审美感并使它有了离奇的魅力。另外,有限的运动方式易于传到网上,网络对刷新率和文件容量的限制使得那些平滑的一帧接一帧的动画媒体不能很好地运行(不包括Flash)。
作为一个有趣的练习,试着使用一台被当作照相机的扫描仪来制作一个剪切动画。或者,扫描进你的“演员”,使用一个类似AfterEffects或Flash的二维动画制作程序来给其定位并使其运动。在以下的例子Donor Party中,Laurence Arcadias使用有审美感的剪切,并使用一个叫作Inkwell的二维动画制作系统来添加运动,这个软件允许她给剪切风格增加变形,选择性模糊,三维,和其他的能力。
例子:Donor Party
作者:Laurence Arcadias
媒体:QuickTime(s)
注意:Multiple movies(多个电影)
第七课
第三页——粘土模型动画、木偶动画和三维动画
粘土模型动画和木偶动画都包括一个三维模型的按帧运动,即静止动作动画或者像素化动画。大多数此类模型动画来自欧洲或者日本,但是美国也有一些很有实力的静止动作动画
制作室,比如Tim Burton的Skellington Studios。
此类动画的制作过程随着各个计划的复杂性不同而有很大不同,但是基本前提仍然是一样的。用相机记录下场景中静止的一帧,稍稍移动角色与场景,拍下另一帧,然后继续直到完成。很显然,出错的风险是相当高的,甚至一个单帧的错误会毁掉整个动画,所以这种技术不允许轻易出错。搁开这个令人头痛的问题,这种动画技术还是相当有趣的,假如你拥有照相机或者可以单步摄制的录像机,你可以轻松制作自己的静止动作动画,尤其是在和像Adobe Premiere这样的视频编辑软件联合使用的时候。在视频捕捉卡的帮助下,Premiere可以实现静止动画捕捉功能。
例1:小鸟(粘土模型动画) 作者:Neverhood 的Edward Schofield
站点:Animation Toolworks
URL:www.animationtoolworks.com
媒体:QuickTime
文件容量:193KB
持续时间:00:00:01.28
例2:Punch和Judy
作者:Jan Svankmajer
站点:Animation Heaven and Hell in 3-D
URL:www.awn.com/heaven_and_hell
媒体:QuickTime
文件容量:1.5MB
持续时间:00:00:18.15
你也可以使用静止运动动画方式来使某些存在的实体例如人和动物成为动画演员。像平常一样拍下活动的物体,然后再在计算机中按帧编辑并使它们显得杂乱和有一种静止动作动画感。(如Peter Gabriel的Sledge Hammer的视频片断)或者设计演员的每个动作,拍下一系列的照片。
例子:Gisàle Krozàne
作者: Jan Kounen
站点:Jan Kounen Homepage
URL:www.users.imaginet.fr/~jkounen
媒体:QuickTime
文件容量:1.3MB
持续时间:00:00:21.26
不幸的是,计算机三维动画即将取代粘土模型动画和木偶动画的地位,而且原因很明显。电影Toy Story (玩具总动员)是计算机完成的三位动画片,但是它看起来很像木偶动画片。相反的,电影The Nightmare Before Christmas Conversely基本上是一部木偶动画片,但却很像计算机动画。但是易用性有很大的不同,如果计算机动画没有达到你要的效果,那么只要只要调整一下动画的有关参数和次序就可以了,而对粘土模型动画和木偶动画来说,一个错误就意味着重新拍摄。然而,粘土模型动画和木偶动画拥有的自发性和起伏性,以及粗糙外观是计算机动画难以实现的,所以它们不会立即消失。
三维动画
尽管这不是像先前的例子一样的有着模拟的风格,在这儿提到三维动画是因为它有属于自己的风格。在这里我只想简单描述一下摘要而不是深入研究(这足够为它单独写一个指南了)。三维动画的过程就是使用熟悉的三维建模软件建立你的角色和场景的三维模型,然后用渲染程序进行渲染。
第7课
第4页——绘图和着色
多谢星期六早晨的卡通片,也许你已非常熟悉绘图和着色风格——20世纪的最流行的风格——所以,我将不必为冗长的说明而费心。一般来说,这种风格通过手工着色或描绘图像来制作,然后摄录下每个图像作为电影或电视的一帧。为了使这种风格适应网络,仅仅只要把要动画片中的帧载入到计算机上,或者通过手工(如,给它涂上颜色)把你的动画画到你的计算机中。
例子:Absolut Panushka
作者:Jonas Odell和Stig Bergqvist
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:832 KB
还有一种不太常用的技术是直接在一片胶片上进行绘制或着色。黑色胶片有一个能被擦去的乳胶涂层;线条起初是白颜色,但是,你能给胶片的另一边涂上颜色,或者另外使用透明的胶片——通过除掉所有的乳胶来制作。不时地在胶片上绘制或着色一个帧,或者在一整条胶片上描绘一幅长图。只要他们不妨碍胶片扫描的过程,你还可以把一堆组件放到一条胶片上。当作品中包括大的,粗体图像和颜色的时候这种方法是非常有用的,因为要准确地控制运动既不可能效率也不高。
这种方法可以用一个胶片和Photoshop或者Painter来重建为数字格式。无论是否你用手工来做它并将其扫描进去,或者用计算机做一切,你都能使用一个类似于AfterEffects 和Premiere的程序来将一个电影胶片格式输出为QuickTime。
例子1 :Absolut Panushka (在胶片上着色)
作者: Barbel Neubauer
站点:Absolut Vodka
URL:panushka.absolutvodka.com
媒体:QuickTime
文件容量:954KB
例子2:问我(在胶片上刮擦)
作者:Carol Beecher
站点:Animation World Network:Quickdraw Animation Society
URL:www.awn.com/qas
媒体:QuickTime
文件容量:996KB
第7课
第5页——沙地动画片
这种方法更模糊,但它是还是有用的(因为没有数字性的东西)。动画制作风格包括沙地处理。沙地动画最普通的方式是使用工具或你的手指来处理沙地,然后用照相机或摄象机将单个帧摄录下来。另外,你能把沙子放到一片玻璃上以及扫描仪的顶端上。因为图像可以从下方将其拍摄下来,这种方法可带给你一种“更平”的外观。
这种方法使用单色的沙子,但是,有色的沙子也允许被使用。你能用类似的技术来试着描绘,尤其是如果你使用要很长时间才会干的油剂。然后你就能处理几天以前的图像。
例子:有色卵石
作者:Yasmin Karim
站点:Animation World Network:Quickdraw Animation Society
URL:www.awn.com/qas
媒体:QuickTime
文件容量:897KB
第7课
第6页—一些“最后一刻”技巧
好了,现在我们即将结束我们的动画制作指南。在我们结束前,我希望给你留下一份临别的礼物:用来在网络上顺利地制作你的动画片的9个技巧。
1、别把你的最终输出局限于任何一种媒体类型。
但是,无论你选择什么格式,最终你都不得不把它整合入HTML文件中去。试着用多个动画制作媒体类型来制作一个网页,把HTML组件和类型整合入你的最终的设计。无论发生什么,把原文件保存为文本——而不是,比方说,作为你的Flash动画片或QuickTime影片的一部分。把CSS扔到一边去。
2、试着为你的网络动画使用循环媒体。
因为文件容量很小,所以短的动态循环作品用在网上是再恰当不过的了,并且,他们对网迷更有吸引力。如果它被适当地运用,你的动态循环应该是无缝连接的,就像下面的例子。
例子:旋转装置(一系列循环,一直点击“播放”来观察循环)
作者:Jonas Odell,Stig Berqvist,Lars Ohlson,Marti Ekstrand
媒体:QuickTime
注意:多个动画片
3、如果你不得不工作在一个小的动画制作平台上——这对QuickTime漫画家有很大影响——要精心考虑。
当动画制作成120*160的分辨率的时候,你就会失去许多细节,因此在你设计的时候,要注意你最后所制成的动画尺寸,并避免使用过多的繁琐的细节。
4、在网络上,全屏幕的动画片制作会人留下深刻的印象,所以,如果可能的话,要使你的动画允许调整尺寸。
就Flash来说,你能在不降低质量的情况下做到这一点(除非你被迫使用了位图)。如果你正在使用GIF89或QuickTime,制作 一个比你想演示的尺寸更小一点的动画。允许尺寸进行调整,这只对播放质量造成很小的影响,但是却节省了宝贵的文件容量。
5、告诉人们下面将是什么。
如果你的动画格式需要很长的下载时间,不要仅仅告诉你的观众他们“正在装入...正在装入...正在装入”,咄!给观众提供一个像简单的5kb的GIF动画片或声音以打发时间。对于Flash的用户,你能使用一个简单的,小的引子动画片或者片头短片。保留这些小尺寸的美好的东西。为一个简单的循环的色彩单调的线条画动画添加少许的颜色也是一个好方法。如果动画片是比较简单的,你可以把动画的帧数量增加到最大限度,同时注意限制文件容量。
6、换个方式。
就像我们在前面说过的那样,如果你使用插件或dHTML,并且你希望吸引到更广泛的观众,考虑为你的动画制作换一种方式,通常是GIF89。在一些动画中,直接进行动画格式转换是可以的。在其他的动画中,用另一种表现方式截然不同的媒体格式来制作动画也许更好。
7、使用合适的工具。
在不久以后,一些格式的动画将看起来都是一个样子。某个程序的优点在过度使用以后就变成了缺点。一些程序或工具鼓励你用某一种特定的方法来开发你的动画。所以千万不要因为某个技术用起来比较方便就拼命使用它。看一看你正在从事的动画制作。你的工具正在帮助你实现你的梦想吗?或者,你是否走在一条障碍最少的路上?
8、要注意其它的合适的媒体。
当你为网络制作动画的时候,其它的艺术形式对你而言参考价值也是无法衡量的。看看电影、录像、摄影、绘画、雕刻、行为、写作和连环画,甚至无线电广播,为的是查看是否你可以获得任何新的想法以应用于你的动画制作。记住,网络还是比较新的事物,而网络动画则更新。别害怕试用其它的媒体来完善你的作品,甚至你可以尝试一些全新的方法。你可以在这个过程中发现很多精彩的东西。
9、最后的技巧:决窍。
在没有一个好的参照框架的情况下,精确地再现任何种类的运动都是非常困难的。即使事先严格审视你的主题也不能给你足够的关于当前的动画处理的信息。因此,使用一台摄像机来拍摄不同的对象是怎么运动的。把你喜欢的动作过程录到你的VCR录像带上。从杂志上裁剪下精彩的构图。时刻注意任何吸引你和感动你的东西。然后,从你需要他们的时候起,收集这些原始资料。动画片仅仅是对现实的夸张,但是,作为动画制作的出发点,一些好的,真实的例子对你的工作是很有帮助的。
第7课
第7页——最后的总结
就这样,你已经拥有了它。这七课的教程包含了所有你在制作网络动画时需要考虑的内容——现在,随着技术的完善以及带宽问题的解决,网络动画制作已经日渐成熟。
网络动画制作领域没有专家。对于所有人而言,成为动画制作专家,仅仅是时间的问题。通过新的,灵活的思想和对网络更深的理解来显示其内容并从整体上改进媒体,这个新的漫画家先锋将真正独树一帜。
只有当你开始制作你自己的创新的动画片时,你才可能成为其中的一员。
那么,你还在等什么?
马上行动!