摘要：论文分析了表情动画、网络动画、动画导航及网络视频等动态图形图像设计的关键技术与方法, 总结了FLASH图形动画在广告设计中的应用。从静态图形的创建到图案动画的设计, 解析了FLASH中位图与矢量图形的不同运用, 并结合实例分析了FLASH中运用多层的矢量元素去制作运动补间和关键帧运动的方法。制作基于图案的Flash动画。该方法可为广告设计中的电脑动画课程教学提供参考。
关键词：矢量图形; 影片剪辑; 动态图形;
Abstract：This thesis analyzes the technique of Motion Graphics such as Emoji, Banner, Menu and Video, and summarizes the application of FLASH in graphic design.From the drawing to the pattern animation, this thesis analyzes the different application of Bitmap and Vector in FLASH, and analyzes how to creating motion tween and key frame with multi-layer vectors.Application of the Vector FLASHThis method could be a reference for graphic design teaching
Keyword：Vector; Movie Clip; Dynamic Graphic;
引言
动态图形作为一种独特的设计语言, 是视觉传达设计目前常用的媒介和作用方式。在不同时代动画受艺术, 美学与音乐的发展影响, 引发的对互联网及动漫娱乐产品的需求, 让越来越多的动画师、交互设计师、游戏开发者、数码艺术家们将更多的细节扩展到网络经营的更大空间。
例如Macromedia公司发布的Flash软件是一款多媒体动画软件, 随着HTML和CSS的发展, Flash软件还在不同领域运用, Flash是传统的动画技术的自动化和智能化版本, 如补间, 变形, 洋葱般皮肤等, 其格式和工作区操作简便, 因此可以缩短制作周期并减少项目预算, 具有运用多层的矢量元素去制作运动补间和关键帧运动的动态图形设计能力, 以及对矢量图的应用能力以及文件量小, 传输快的特点, 可用来制作互动界面与基于图案的动画。
一、FLASH在广告设计中的影响
计算机以矢量图形或位图格式显示图形, 而flash善于处理矢量图像, 使用Flash可以创建压缩矢量图形, 并将它们制作为动画, 也可以导入和处理在其他应用程序中创建的矢量图形和位图图像, 或者在“舞台”区域直接绘制图形。在编辑矢量图形时, 可以修改描述图形形状的线条和曲线属性, 也可以对矢量图形进行移动、调整大小、重定形状及更改颜色的操作, 而不更改其外观品质。在Flash中绘图时, 创建的是矢量图形, 它是由数学公式所定义的直线和曲线组成的。矢量图形是与分辨率无关的, 因此, 可以将图形重新调整到任意大小, 或以任何分辨率显示它, 而不会影响其清晰度。另外, 与下载类似的位图图像相比, 下载矢量图形的速度比较快。可以导入ILLUSTRATOR制作的矢量图并制作动画效果, 也可以直接在舞台上绘制图形。在FLASH中, 不同版本对工作区域的大小设置是不同的, 如Flash3.0的工作区域要求在1-2880像素之间, 而CC可以做到无限制的工作区域, 满足了轻松管理大型背景或之外的内容的要求。简洁整齐的用户界面能更好地关注绘制的内容, 对话框和面板方便浏览。
和其他软件一样, FLASH软件也不断更新其功能以方便用户的使用, 作为在线工具和应用软件, 还支持ActionScript动作脚本, 这种脚本语言可以在软件中实现交互, 进行数据处理或者制作复杂的动画, 能够帮助用户更快地完成动画效果的制作 (如表1) 所示。
表1 动态图形像设计软件功能对比
二、FLASH在广告设计中的应用
(一) 表情动画
网络时代是一个虚拟的世界继续变得立体化的过程, 表情动画是一种新的不用见面而迅速便捷的即时沟通手段。在页面宣传广告中常常应用不同的表情动画表达不同的情绪, 使文字具有趣味性。主要内容有根据人的面部表情或者动作制作的一些角色的表情变化, 在制作这类表情动画时, 和动画片的角色设定类似, 要确定一个表演角色;也包括使用文字或者图形图像制作的简易动画。当表情包制作完成后也会制作相关的宣传广告, 并应用于聊天工具中。
(二) 网络动画
使用Flash可以设计具有视觉画面的动画, 许多商业网站采用Flash制作网络广告, 并将其置于网站之中, 引起观众的好奇心, 主动打开网站浏览动画广告以推广商品。静态型广告条往往放置在网页或博客的顶端, 静态型Flash并不是静止的, 一般采用一张广告图片配以动画点缀元素插入到网页中, 也可以将布局好的广告图片分割出来, 然后在Flash中制作入场动画。动画型广告是最显眼的广告方式, 可以在花花绿绿的网页中让浏览者无意中注意到广告内容, 以达到宣传的目的, 这样可以提高广告的点击率。
(三) 动画导航
作为主流的图形视频处理软件, Flash主要定位于网络制作, 这就决定了它具有互动性, 体积小, 色彩鲜艳等特点, 并且可以配合其他工具软件制作出各种形式的动态菜单以及网页, 目前, 手机应用商店中的APP也在不断推陈出新, 例如滴滴打车作为一款大众常用的应用软件, 其导航使用文字和矢量图形制作简明易懂的动画, 使不同消费人群在短时间内对行程清晰认知, 不仅节约了时间, 也减少了沟通障碍。
(四) 网络视频
在进行商业推广时, 可以使用flash制作宣传视频, 这样的视频一般体积小, 适合网络传播, 并且具有交互性。对比同类型软件, Flash和AE同样具有静态物体, 视频, 音频的功能, 而且Flash具备的Actionscript编程语言更是AE所不具备的。Actionscript支持具有相当复杂程度的互动功能, 因而被广泛地运用到网页及其他一些动态界面设计中。由Flash制作的动态作品既有矢量元素, 也有图像元素, 而AE生成的动态作品是由Bitmap位图所组成。AE可以用来制作电影, 视频, 数码视频, 光盘, 网页及二维印刷品。AE可以渲出各种精度的作品, 甚至立体电影。AE可以生成的特效是Flash远远所不及的。只有AE专门用来制作动画, 不能制作任何互动界面。AE生成的动态影像可以被用到Flash中进行与其他元素的进一步合成, AE基于时段, Flash基于帧数, 因而在AE中, 对时间的改变比较自由, 一段30秒的电影可以被拉长到3分钟, 然而动画元素之间的关系可以保持不变, Flash就达不到这种需求了。例如音乐设计的视觉思维就是巧妙地运用图形 (线条, 色彩, 体量等) 和摄影蒙太奇处理将音乐的旋律, 风格和意境呈现出来, 其音画创意注重视觉形式构成元素和抒情元素的美感追求, 注重画面的节律与叙事结构, 从而使音乐给视觉的享受丝毫不亚于它带给听觉的。
三、运用FLASH软件设计图形动画
全球有超过6亿在线用户安装了FLASH PLAYER, 这使得浏览者可以不需要下载和安装插件, 直接欣赏到高清的Flash动画。由于它能够减少游戏中电影片段所占的数据量, 因此可以节省更多的空间。无论是矢量图形或位图图像, 新版本的CC能够把需要导出的内容导出为全高清 (HD) 视频和音频, 即便是导出拥有比较复杂的时间表和脚本驱动的动画, 也不会丢帧。网站中的广告要遵循少即是多的原则, 例如网络广告设计要简洁, 图片和文字的移动和变化并不需要过于复杂, 只要有效地传递信息就可以了, FLASH动画设计应该显眼易读, 能够吸引受众的注意力。
第一次接触到某工具时, 只要能大概知道它的作用就可以了, 至于Flash具体应用以及不断更新的软件在功能上的增强, 则需要通过一个个实实在在的例子去慢慢体会和理解。FLASH软件用户有很多种方法实现图案动画的创建, 而图形构造不失为一个很好的切入点, 例如从静态图形开始再来实现动画效果, 在制作前要先了解一些基本创建方式。
(一) 图形编辑
图形编辑是Flash重要的功能之一, 了解了一些基本的绘图方法之后, 就可以从绘图工具栏里选择不同的工具以及它们的修饰功能键来创建、选择、分割图形等。当选择了不同的工具时, 图形工具栏外观会跟着发生一些变化, 且修饰功能键以及下拉菜单将出现在工具栏的下半部分。修饰功能键大大扩展了此工具的使用功能, 加强了此工具的实用性和灵活性。由于FLASH对矢量图的应用和对视频, 声音的处理能力, 多媒体播放的兼容性, 使得FLASH成为网络动画的重要制作工具之一。
(二) 影片剪辑元件
所有的图形或图像, 在他们多种多样的表现里, 无论是静态的或是动态的, 都是由各种形式将颜色、形状、线条、字体组合起来。在传统动画制作中, 主要任务便是绘制始关键帧与终关键帧, 当中的过渡帧每一格都需手工绘制, 而在数码动态制作中, 我们只需确定关键帧, 当中的过渡则都由电脑来生成。正是因为有了关键帧, 才有了动态的影片剪辑, 运动状态发生改变的那一刻, 在设计一段动态时, 首先我们要确定的是改变何时开始 (开始关键帧) , 何时终止 (结尾关键帧) , 如果动态比较复杂, 我们更需要在始关键帧与终关键帧中再加入多处关键帧, 理解时间与空间段之间的对应关系, 对影片剪辑来至关重要。影片剪辑拥有自己独立于主时间轴的多帧时间轴, 可以将影片剪辑看作是主时间轴内的嵌套时间轴, 使用影片剪辑元件可以创建可重用的动画片段。
(三) 补间动画
在AE特效软件中, 滤镜的使用, 使影片时光超越了时间, 在Flash里逼真动画的外观同样可以通过补间动画属性瞬间创建。补间是英文IN BETWEEN的缩写TWEEN.主要用来完成两个关键帧之间缺少的动画帧, 在两个关键帧之间建立补间动画关系之后, 中间会自动生成不见动画图形的显示变化, 达到更流畅的动画效果。补间动画可以调整动画轨迹, 可以给对象的位置、大小、倾斜、颜色效果, 滤镜等属性进行补间, 可将单个对象选择编辑。当补间创建完成后, 舞台中会出现一条运动路径。它是以两个关键帧的中心点作为连接点的, 这条线上每个小点都代表使用补间呈现出的过渡帧。补间动画不仅可做一些简单的位移, 大小, 颜色等动画, 又常备用以便做一些具3D透视的位移或者制作一些镜头的推拉摇移。
下面运用实例来了解如何运用FLASH软件来创建一个简易的静态图形动画 (如图1) 所示。
步骤1打开一个新的ash文件, 可以看到一个名为“图层1”的图层, 在页面的顶端有时间轴。选择第一帧, 使用椭圆工具创建圆形, 再使用线条工具和变形工具绘制图形, 然后使用钢笔工具完成图标, 选择舞台中的对象, “修改>转换到元件”, 将图形转换为元件。在弹出的对话框中, 对该元件命名, 选择“图形”选项, 按“确定”。
图1
步骤2在图层1的下方创建2个新图层, 一个命名为“天空”, 另一个命名为“光”, 选择“光”图层。利用路径绘制圆形, 单击“没有颜色”按钮绘制正圆, 选择移动工具, 按住alt键复制多个圆形, 并分别调整圆形的大小。
步骤3选择天空图层第1帧, 通过“文件>导入>导入到舞台”操作, 导入天空图片。
步骤4创建文字图层, 通过“文件>导入>导入到舞台”操作, 导入矢量文字图形。
在接下来的五个步骤中, 无论是图形元件的基本创建方法, 还是编辑图案动画设计的制作方法, 都在下述五步中简单展示出来了。
步骤1现在为止, 绘制的元件处于图层1的第1帧。在图层1第50帧添加一个普通帧将图形元件延续。
步骤2选择光图层第30帧, “插入>时间轴>关键帧”, 创建一个新的关键帧, 重新绘制多个圆形并填色。仍在第30帧进行操作, 将圆形元件在舞台上进行移动, 选取第1到第29帧之间的任意一帧, 在屏幕底端的属性面板上的“补间”选项中选择“动画”, 在关键帧之间添加传统补间动画。选择该图层第50帧, 如上所述创建不同的圆, 并选取从30至49帧之间的任意一帧添加传统补间动画。
步骤3创建文字动画, 先将文字转换为图形元件, 在视频最后一帧添加关键帧, 在关键帧之间添加传统补间动画, 并修改属性面板的色彩调整Alpha命令。
步骤4如果想要再现时光倒流的色彩质感, 可以使用属性面板中的透明度调整色调, 也可以使用属性面板中滤镜营造褪色效果, 模糊滤镜在动画制作中常常会被用到, 应用滤镜的对象需要是“影片剪辑”元件。“按钮”元件或文本。先将天空图片转化为影片剪辑元件, 在1至49帧之间添加传统补间动画, 选择元件最后一帧, 在属性面板中设置模糊选择影片剪辑元件, 在属性面板中单击添加的滤镜按钮, 选择模糊, 然后设置参数。
步骤5如果要添加声音, 先创建一个新的声音图层, 然后单击“文件-导入到库-导入声音素材”, 在声音图层添加空白关键帧, 再将音频文件从库里拖拽到图层, 使其和视频素材的时间保持一致, 在属性面板上还可以设置声音效果, 缓和参数等。然后选择“文件>发布预览”可以预览动画效果。
总结
综上所述, 我们生活的世界充满着各种各样丰富的动态设计, 而创作的关键是在于我们应当完成从二维到三维构想思维的过渡, 将时间线作为整个动画创意的根本。随着影像带给常规感受模式的美感冲击, 一些音乐频道的片头综合了动画, 广告, 网络, 电子游戏等流行文化视听特征, 不断丰富着各种媒介所能运用的视点表现手段。在同类型软件中, 使用电脑软件进行思考具有相同之处, 无论是偶然间跳出的想法, 还是为了得到特定效果所进行的过程, 应该先思考创作动态图形图像将会使用哪些工具获得想要的结果。而不同之处在于Flash目前对位图的处理能力还比较弱, 因为它最初是从矢量处理起始的, 所以相对影像设计来说, 常用来制作更多的矢量图形动画。总之, 在动态图像设计过程中, 不同的组合会带来不同的效果, 还需要在设计过程中逐渐发现无限种可能去设置和选择性地改变各种视觉元素, 去创造有动感的和协调的动态图形。
参考文献
[1](英) 伊恩·克鲁克, 彼得·比尔.王洵译.动态图形设计基础[M].北京:中国青年出版社, 2016.12.
[2]赵林, 侯琼芳.FLASH CC动画制作完全自学教程[M].北京:人民邮电出版社, 2015.8:457.
[3]张磊, 闫永蚕, 张荣强.古典家具多曲面逆向设计方法研究[J].设计, 2018.17.
[4]郑亚.基于数字媒体语境下的视觉传达设计[J].设计, 2016 (11) :66-67.
[5]王蕊.解读极简主义风格的设计语言[J].美术大观, 2016 (10) :149.
[6]邓靓.高校平面设计教学的现状分析及改革措施研究[J].设计, 2015 (08) :96.
