用数字动画视觉特效呈现电子音乐风格 ——使用After Effects制作抽象数字动画---毕业论文

本本 科科 毕毕 业业 论论 文文 用数字动画视觉特效呈现电子音乐风格用数字动画视觉特效呈现电子音乐风格 使用使用 AfterAfter EffectsEffects 制作抽象数字动制作抽象数字动 画画 Presenting Electronic Music Style with Digital Animation Visual Effects Making Abstract Digital Animation with After Effects 姓 名： 学 号： 学 院：软件学院 系：软件工程 专 业：软件工程 年 级： 指导教师： 目录 年年 月月 I 摘摘 要要 音乐视频是一个伴随一首完整音乐的短片。现代音乐视频主要作为一个促 进音乐唱片销售的营销工具制作并使用。电子音乐视频给人们带来视觉和听觉 上的双重强烈审美冲击和艺术震撼，激发着人们的生命活力。电子音乐视频制 作需要软件的支持才能良好地实现音乐视频创意，After Effects作为最广泛使用 的数字动画合成软件，使制作者能够用各种内置工具和第三方插件绘制，改变， 并在二维和三维空间合成媒体，还可以个别关注一些变量，比如视差和用户可 调的观察角度，其具有的强大滤镜功能提供对创意的完美支持。 本论文结合毕业设计，通过具有抽象意义的现代电子音乐动画视频的创作， 探索将电子音乐的风格与内涵通过动画视频中的视觉元素表达出来。本文分析 介绍了制作过程的关键难点，着重研究探讨软件智能生成和后期外观处理，从 软件工程的角度详细分类阐述After Effects中几种常用滤镜的效果，同时对比分 析了Photoshop和After Effects的各类功能，展现了当今主流视频制作软件的重要 应用，从而在软件应用过程中体会计算机图形学技术实现的博大精深。 关键词：关键词：电子音乐；AE 特效；数字动画 II Abstract A music video is a short film or video that accompanies a complete piece of music. Modern music videos are primarily made and used as a marketing device intended to promote the sale of music recordings. Electronic music video brings people both visual and auditory aesthetic impact and also stimulates peoples vitality. Software support is required for electronic music video production to achieve the video expectation. After Effects, as the most widely used digital motion graphics and compositing software, allows users to animate, alter, and composite media in 2D and 3D space with various built-in tools and third party plug-ins, as well as individual attention to variables like parallax and user- adjustable angle of observation. Its powerful video effect feature provides perfect support for creative ideas. Based on the graduation project on abstract animation creation on modern electronic music, this thesis explores how to convey the style and connotation of electronic music through visual elements in animation. The thesis introduces and analyzes the key point during production, focuses on investigation of smart generation and post-production, categorizes and elaborates several common effects in After Effects from the perspective of software engineering and compares various attributes of Photoshop and After Effects, thus presents important application of todays mainstream digital motion graphics and compositing software. The author experienced the profound of computer graphics technology in the process of software application. Key words: Electronic Music; AE Effects; Digital Animation III 目目 录录 第一章第一章 引引言言.1 1.11.1 艺术与技术的关系艺术与技术的关系1 1.21.2 音乐视频的存在意义音乐视频的存在意义1 1.31.3 数字动画音乐视频制作数字动画音乐视频制作1 第二章第二章 前期前期工工作概述作概述3 2.12.1 电子音乐视频构思电子音乐视频构思3 2.22.2 软件选择软件选择.4 2.2.1 Adobe Photoshop4 2.2.2 Adobe After Effects4 第三章第三章 效果实现效果实现5 3.13.1 关键难点制作关键难点制作.5 3.1.1 网格四方连续素材在视频特效中的应用.5 3.1.2 电子风格的文字效果制作.8 3.1.3 精细关键帧制作17 3.23.2 嵌套及复用嵌套及复用.21 3.2.1 合成21 3.2.2 预合成.22 3.2.3 运动分布复用.25 3.2.4 回声拖尾复用.28 3.33.3 智能生成效果智能生成效果.29 3.3.1 分形噪波生成.29 3.3.2 四色渐变生成.34 3.43.4 后期外观处理后期外观处理.36 3.4.1 颜色处理36 3.4.2 亮度处理38 第四章第四章 AftAfte er r E Effectsffects 和和 PhotoshopPhotoshop 对比分析对比分析.42 第五章第五章 总总结结.50 5.15.1 数字动画合成软件与软件工程数字动画合成软件与软件工程50 5.25.2 对数字动画合成软件的掌握对数字动画合成软件的掌握50 IV 参参考考文献文献51 致致 谢谢52 V Contents Chapter 1 Preface.1 1.1 Art and Technology1 1.2 Significance of Music Video.1 1.3 Digital Animation Music Video Production1 Chapter 2 Preparation.3 2.1 Expectation of Electronic Music Video3 2.2 Software Application4 2.2.1 Adobe Photoshop.4 2.2.2 Adobe After Effects4 Chapter 3 Implementation.5 3.1 Keypoint Construction.5 3.1.1 Application of Square Repeat Footage in Video Effect.5 3.1.2 Electronic Style Character Effect Construction8 3.1.3 Fine Keyframing17 3.2 Nesting and Reusing.21 3.2.1 Composition21 3.2.2 Pre-Compose.22 3.2.3 Motion Tile25 3.2.4 Echo.28 3.3 Smart Generation29 3.3.1 Fractal Noise.29 3.3.2 4-Color Gradient34 3.4 Post-Production.36 3.4.1 Color Correction36 3.4.2 Lightness Correction.38 Chapter 4 Comparison between After Effects and Photoshop42 Chapter 5 Summary.50 5.1 Software Engineering in Digital Motion Graphics and Compositing Software50 VI 5.2 Handling Digital Motion Graphics and Compositing Software50 References.51 Acknowledgment.52 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 1 第一章第一章 引言引言 1.11.1 艺术与技术的关系艺术与技术的关系 艺术源于技术，新的技术能滋生新的灵感。技能是艺术生产的一个重 要元素。从艺术发展史来看，由古至今的一大根本性改变是对艺术技巧 的重视度的不断提高。原始社会人类没有任何科学技术可言，因此也就 没有任何艺术形式可言。随着科技的发展，直到现在出现了数字媒体艺术 软件，人类的艺术形式一直随着技术的进化在演变。创作的开端，也许只 是一个灵感在大脑里闪过，马上就需要技术去实现，真正的艺术体现在技 术的实现上而不是一开始那点微不足道的灵感。以个人理解，在创作过程 中艺术和技术已经完全融为一体了，艺术就是技术，技术就是艺术。技术 过硬却却无从下手其实就是没有技术，技术的实现就是艺术创作的过程， 脱离艺术的技术已经不能叫做技术。形象的说，技术是一切艺术的躯壳， 艺术是技术看不见的灵魂，但却能感受到灵魂的存在。 1.21.2 音乐视频的存在意义音乐视频的存在意义 为音乐服务的 MV 艺术，一直以来起着跟音乐一致的娱乐作用，激发 着人们的生命活力。音乐 MV 采用各类型的表现手段，克服人类日常生活 中的生理心理活动的平淡与单调，可以宣泄压力、补偿心理空虚、丰富业 余生活。 好的 MV 还能加深观众对音乐的理解，影响对音乐的印象，甚至 使观众喜欢上原本感觉不是很好的音乐，当然制作拙劣的 MV 也可能败坏 一段很好的音乐。 1.31.3 数字动画音乐视频制作数字动画音乐视频制作 随着数字化技术的进一步发展，数字动画 MV 开始强调声、光、色、 形等联合效果，创意的发挥空间变得更宽广，人的思维和技术融为一体， 把音乐 MV 推向更高更广的领域。为了给人一种身临其境的强烈视觉震撼， MV 开始趋向于创造一种令人目眩神迷的声光效果。画面与声音的结合， 即声与形的结合，绝不仅仅是简单的叠加，而是要形成视觉与听觉的联合 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 2 冲击。画面是为了更好的表现音乐，画面的表现应与该段落音乐的内容和 情绪相一致，起到灵与魂的契合一般的效果。 欣赏过一个国外 MV，用蓝色等冷色调表现钢琴音色，红色等暖色调 表现小提琴音色，实现了画面与音效的完美搭配。仅仅只是一个很简单创 意，却表现出了很惊艳的效果，这说明 MV 其实并不需要多么高深的技术， 将一小块技术最佳化应用才是至关重要的，正如创作一首歌不需要太多的 音色，怎么把有限的音色发挥到最理想的状态才是最关键的。 于是，创作一段数字动画 MV 面临三大关卡：整体脚本创意创作，音 乐与动画完美结合，成熟到位的前后期制作。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 3 第二章第二章 前期工作概述前期工作概述 2.12.1 电子音乐视频构思电子音乐视频构思 本次电子音乐 MV 的制作不限音乐，不限题材，在实验过程中挖掘探 索最能够表达音乐的形式。 在构思的前期对几个想法不断的尝试，否定了一些不合适的表现方式。 尝试的过程中也会在偶然间激发灵感，比如这些在实验室做完同步到宿舍 后因不支持 mov 格式素材而显示出错的彩色画面，竟也显露出些许令人惊 异的美感。 图图 2-1，2-2：Footage Error 事实证明很多抽象意义的画面仍然是可以和音乐相互结合的，这就好 像 Windows Media Player 里看上去很炫的可视音乐效果。它们不带任何具 象意义，仅仅利用当前即时音平，频谱和一些随机效果生成一些连续变幻 的画面，但是仍然引人入胜。有时候那些没有具象意义的画面才能更贴近 音乐的本身，因为有些音乐的创作过程中并没有联系具体情节，尤其像电 子音乐这种由刚刚探索出来的新颖效果融合起来的作品，在创作一开始不 容易捕捉灵感，仅仅是调节合成器以挖掘一些出彩的效果，也不需要具体 情节来辅助。对于这类作品，制作音频和视频都是一个共通的发现未知的 过程，于是这样的音乐最适合搭配那些抽象意义的动画。 在试了很多音乐都遇到创作瓶颈的情况下，最终确定了使用一首比较 适合用符号象征性的视觉元素来表现的电子风格音乐作为背景音乐。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 4 2.22.2 软件选择软件选择 制作这个工程选择使用 Adobe 公司的两个最基本最普及最著名也最强 大的软件。 2.2.12.2.1 AdobeAdobe PhotoshopPhotoshop Adobe Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集 图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图 形图像处理软件，应用领域很广泛，在图像、图形、文字、视频、出版各 方面都有涉及。其最新版本为 Adobe Photoshop CS5，拥有多项全新功能， 自动镜头校正、 支持 High Dynamic Range 调节 、区域删除、先进的选择 工具、Puppet Warp、64 位 Mac OS X 支持、全新笔刷系统、处理高管相机 中的 RAW 文件。 用我的话说，Photoshop 是创造一个时代的伟大软件。Photoshop 一出， 世间再无真相。 CS5 里那些看上去很强大的新功能其实都用不到，于是我们选用运行 相对比较稳定的版本 Adobe Photoshop CS4 Extended。 2.2.22.2.2 AdobeAdobe AfterAfter EffectsEffects After Effects 是 Adobe 公司推出的一款图形视频处理软件，适用于从事 设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作 室以及多媒体工作室，属于层类型后期软件，在影像合成、动画、视觉效 果、非线性编辑、设计动画样稿、多媒体和网页动画方面都有其发挥余地 。其最新版本为 Adobe After Effects CS5。 同样，无需 CS5，选用 Adobe After Effects CS4。 After Effects 在多数人的眼里是“一个很好的视频后期制作软件” 。为 了证明 After Effects 同样具有强大的前期制作能力，本组的毕业设计几乎没 有素材纯粹使用 After Effects 制作动画 MV。我一直有信心单凭一个 After Effects 已经足以完成某些简单动画的完整制作流程，这时前后期的制作就 显得同样重要。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 5 第三章第三章 效果实现效果实现 3.13.1 关键难点制作关键难点制作 3.1.13.1.1 网格网格四方连续素材在视频特效中的应用四方连续素材在视频特效中的应用 四方连续是由一个纹样或几个纹样组成一个单位，向四周重复地连续 和延伸扩展而成的图案形式，四方连续的常见排法有梯形连续、菱形连续 和四切（方形）连续等。四方连续纹样是指一个单位纹样向上下左右四个 方向反复连续循环排列所产生的纹样。这种纹样节奏均匀，韵律统一，整 体感强。设计时要注意单位纹样之间连接后不能出现太大的空隙，以免影 响大面积连续延伸的装饰效果。四方连续纹样广泛应用在纺织面料、室内 装饰材料、包装纸等上面。 图图 3-1：Square Repeat 一开始在制作前期基本四方连续图形网格素材时候使用了 Photoshop。 先准备新建空白图片。由于要展现一个广阔的效果，图片素材应该要很大。 1920 是标准的宽屏像素长，于是如图新建一个 1920*1920 的图片。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 6 图图 3-2：New 先将背景用 Paint Bucket Tool 染成黑色。 然后制作白框的多边形，一开始多边形的制作用的是 Polygon Tool。 图图 3-3：Polygon Tool 默认情况下是五边形。 显示的效果是。 发现五边形因为角度相加不为 360 度不可能制作出一片连续的网格。 考虑三角形或六边形，后来感觉三角形比较不够时尚选用六边形做网格。 最后做出来在 AE 里测试的时候发现线太细了，有的甚至小到不显示了， 一片漆黑，也没发现调节边框粗度的选项，不知道为什么 PS 不提供粗度调 节，也许是没找到。于是只好用 Line Tool 自己画一个六边形。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 7 图图 3-4：Line Tool 将直线的 Weight 粗度调成 10px。 最后画出来的效果是这样，背景透明，还可以接受。 图图 3-5：Hexagon 然后复制多个图层贴在黑色背景上。 图图 3-6：Hexagons 贴好后的效果是这样。至此六边形 psd 素材已基本制作完毕。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 8 图图 3-7：Hexagon.psd 3.1.23.1.2 电子风格的文字电子风格的文字效果制作效果制作 通常商业化的 MV 都会采用文字来解说，将要表达的思想以文字的方 式出现在画面上进入观众视野。因此，哪种样式的文字，什么内容，以怎 样的速度和方式出现等等都是文字制作需要考虑的一个方面。 视觉效果选择用能够体现数字感的电子风格的文字效果，有别于其他 风格音乐。所选音乐是用专门精于电子音乐的 Fruity Loops Studio 软件制作 的。为了体现音乐的特点，选择 FRUITY LOOPS（水果软件） ， CONTROLLER（控制器） ，TUNING（音高调节） ，EQUALIZER（频率均 衡器） ，SYNTH（合成器）等等这些有电子音乐制作意味的英文单词制作文 字 Transform 效果。字符采用 Horizontal Type Tool 制作，新建一个 Text Layer，输入一排文字，如“FRUITY LOOPS FRUITY LOOPS FRUITY LOOPS FRUITY LOOPS FRUITY LOOPS FRUITY FRUITY LOOPS FRUITY LOOPS FRUITY LOOPS” 。 图图 3-8：FRUITY LOOPS 然后 Ctrl+D Duplicate 三份同样的 Text Layer， 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 9 图图 3-9：Duplicate Text Layers 放在不同的位置。 图图 3-10：Transform Text Layers 其余文字均采用同种方法制作。 为了达到一个旋转中亮度下降的文字效果，用 Transform 制作文字移动 效果，在 Timeline 上设置 2 个 Keyframe。这是第一个 Keyframe 的 Transform 参数，设置了 Position 位置，Rotation 旋转和 Opacity 不透明度。 图图 3-11：Setting Keyframe 1 这是第一个 Keyframe 的效果。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 10 图图 3-12：Keyframe 1 此时需要一个亮度下降并快速变换的画面来切合当前鼓点。亮度下降 是为了做出鼓点击完之后衰减的效果。位置要改变，调节 Position，做出旋 转效果，调节 Rotation，亮度下降，调节 Opacity。第二个 Keyframe 的 Transform 参数。Position，Rotation，Opacity 设置一些改变。 图图 3-13：Setting Keyframe 2 这是第二个 Keyframe 的效果。 图图 3-14：Keyframe 2 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 11 于是做出了一个旋转中亮度下降的文字效果。所有文字变形效果的制 作都是基于这个 Transform 关键帧的设置。AE 的 Transform 设置很类似 VRML 里的 Transform 代码，同样的都具有 Position，Scale，Rotation，Opacity 几个调节项。 字符串分为两段，第一段是 Strings，主要表现许多英文字符串在背景 层上的快速切换旋转。第二段是 String110，主要表现各种字符在网格背景 上的平移。剩下的 Fractal Noise 分型噪波效果也作为 String 的背景出现。 图图 3-15：String 这是第一大段字符在 Timeline 上的排列。 图图 3-16：All Strings 1 in Timeline 以下是 Strings 合成的内部结构，由 23 个层组成。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 12 图图 3-17：Strings Layers 以下是 23 个层在 Timeline 上的排列。 图图 3-18：Strings in Timeline 基本结构是一个 Solid Layer 配一个或两个字符串合成。 字符的制作是用多图层摆放的方式。例如，先制作一排的 CONTROLLER，然后复制三层。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 13 图图 3-19：Duplicate Text Layers 如图在 Comp 里放在不同的位置。 图图 3-20：Transform Text Layers 经试验，能跟黑色背景搭配的只有白色，黄色和红色，黄色显得时尚， 红色显得激进，这里举黄色为例子。为字符用 Tint 上色，把白色 Map To 黄色。 图图 3-21：Map White to Yellow 这是上色后的效果。 图图 3-22：Tinted 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 14 文字看上去感觉不到魄力，为了让文字有一定吸引力，让文字影响周 围的亮度，即使用发光效果，于是加上 Glow 发光效果。 图图 3-23：Glowed 现在文字感觉太清晰，为了做出一种时尚朦胧美的效果，让观众去猜 测这究竟是什么单词，引发观众的好奇心，再加上 Fast Blur 快速模糊。快 速模糊是最简单的模糊效果，只需要调节模糊度 Blurriness 和模糊方向 Blur Dimensions。将模糊度设一个适合的值，将方向使用默认的水平和垂直均有 的模糊。 图图 3-24：Fast Blur 于是呈现以下的效果。 图图 3-25：Fast Blured 前面已经提到这里是一个鼓点击完衰减的片段，所有效果都是为了呈 现鼓点衰减，所以前面把不透明度 Opacity 给衰减了，现在考虑把颜色也衰 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 15 减掉。 用 Hue/Saturation 加上两个 Keyframe，第 2 个 Keyframe 将 Saturation 饱和度调到-100。 图图 3-26：Decrease Saturation 这是第 2 个 Keyframe 下的效果，以形成一个饱和度逐渐降低的颜色渐 变，黄色越变越淡。至此 CONTROLLER 本体的效果已制作完成。 图图 3-27：Saturation Decreased 现在的一个问题是没有给人一种立体感，让人感觉这些文字只存在于 二维平面。我们知道反射光与阴影是区分三维和二维最有效的方式，否则 所有远距离的东西因为左右眼看到的差异不大都会显得是二维的。于是这 里考虑再做出一层文字阴影。 在第一层下再加一层 CONTROLLER 制作字符阴影。 图图 3-28：Duplicate CONTROLLER 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 16 这是第一个 Keyframe 本体叠加阴影的效果，可以发现阴影的效果不是 很好，甚至好像本体才是阴影。 图图 3-29：Duplicated 于是还是同样步骤用 Tint 先为阴影上色。 图图 3-30：Tinted Shadow 用 Glow 加发光效果。 图图 3-31：Glowed Shadow 因为光在不均匀介质中传播会产生折射，所以日常生活中物体阴影边 缘不明确是随处可见的。阴影边缘是一个过渡的效果，为了做出阴影的效 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 17 果必须将整个字符打散，于是想到用模糊效果，模糊有很多效果，这里选 择常用的 Gaussian Blur 高斯模糊。 这里如图将 Blurriness 模糊度调的非常高以将其整个打散。 图图 3-32：Gaussian Blur 形成如图所示的红色阴影效果。 图图 3-33：Blured Shadow 3.1.33.1.3 精细关键帧制作精细关键帧制作 这个名为 Shake 的合成其实是整个工程最难制作的部分，之所以命名 为 Shake，因为整段都是以快速的图层抖动为主。一段快速的变换会让观众 觉得目不暇接，从而完全抓住观众的注意力。为了体现音乐的奇幻效果， 使用了快速 Opacity 切换和大量的抖动旋转位移效果。这一部分没有什么技 术亮点，但是却是最花时间的一部分，这里的制作精细程度甚至已经精确 到了一帧，所以最终制作完看上去很动态很华丽，符合这一段电子音乐那 种跳跃性细碎感，也是整段 MV 中最出彩的一部分。 如图整个 Shake 由许多层组成。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 18 图图 3-34：Shake Layers 里面还有很多个应用到的 Composition 元素。 图图 3-35：Shake Compositions 一开始制作时把 5 个抖动元素都放进来在 Timeline 上，考虑先确定每 个层 Keyframe 的大致位置再进行后期制作，由于 Transform 关键帧不能复 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 19 制粘贴然后往后平移所以变成要重复制作三遍同样的 Keyframe，后来做完 了发现其实可以先制作完一段然后马上打包在 Timeline 上放三段，不需要 再反复制作关键帧浪费时间和大量精力。但是这样做的缺点是导致三段内 容完全一样重复播了三次，其实最好的方法是复制完然后每个分别做一点 不同的小改动，重复利用原来做好的但又不完全一样，显得人性化。以下 是制作好的 5 个抖动元素在 Timeline 上的分布。 图图 3-36：5 Layers in Timeline 如图用 Opacity 的 Keyframe 控制图层的显示。一个从 100 切到 0，另 一个从 0 切到 100，将 Comp 放置于画面中间，随时预览变化切换的效果。 Opacity 关键帧做好了就开始做短短几帧内各自层内的 Position 和 Rotation 变化，直接用鼠标拖拽到想要的点上，感觉时间很短也没时间感受细微的 变化就分别随便拖了 2 个不同 Position 的 Keyframe 然后发现效果还不错。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 20 图图 3-37：Fine Keyframing 最终做好了后将所有层分别如图复制出 5*6=30 个。 图图 3-38：Duplicate Layers 制作这样一个效果灵感来源于以前看过一个视频许多动作完全一样的 人在一个舞台上跳舞，能感受到一个群体的氛围，其实只是复制粘贴在不 同的位置而已。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 21 3.23.2 嵌套及复用嵌套及复用 3.2.13.2.1 合成合成 Composition 在 After Effects 里起到一个类似组件包的作用。整个工程 由 10 个主要的 Composition 包拼凑而成放在总合成包 Main 里。下面为底层， 上面为顶层，合成方式为上层叠加在下层上，即由下而上渲染，一层层叠 上去。 图图 3-39：Main Layers 在这里分别按时间顺序在 Timeline 上排列。 图图 3-40：Main Layers in Timeline 而这样的 Composition 包是可以多层嵌套的。例如，总合成 Main 的最 顶层 MaskedGrid 里包含一个命名为 Grid 的 Composition。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 22 图图 3-41：Grid in MaskedGrid Grid 里则含有 12 个 psd 素材层。 图图 3-42：12 Footage Layers in Grid 3.2.23.2.2 预合成预合成 Pre-compose 是 After Effects 里一个常用的功能，可以将选中的一部分 层打包成一个新的 Composition 以方便之后的整体复用操作。 Pre-compose 的作用之一是可以将打包完的 composition 作为一个单元 层在不同地方复制调用。例如，将 3 个 Text Layer 打包成一个名为 CONTROLLER 的 Composition。 图图 3-43：Pre-compose 3 Text Layers 在 Strings 这个 Composition 里调用 2 次以分别加上不同的效果。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 23 图图 3-44：Double Compositions in Strings 将 2 个 CONTROLLER 层摆放在不同位置叠加从而达到预想的阴影效 果。 图图 3-45：Transform Composition Pre-compose 的应用在本工程里随处可见，例如这样一个嵌套很多层的 Composition。 Circle Arrow 将 8 个圆摆放成一个箭头。 图图 3-46：Pre-compose Mask Layers 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 24 Shake 将多个 Circle Arrow 摆放成一个箭头群。 图图 3-47：Duplicate and Transform Compositions Shake*3 在 Timeline 上设置 3 段重复的 Shake。 图图 3-48：Shake*3 Layers in Timeline Mixture 将 Shake*3 和其他彩色修饰动画打包成一个混合体。Glowed Mixture 将 Mixture 加上 Glow 发光效果使画面显得更绚丽。 图图 3-49：Glowed Mixture Pre-compose 的作用之二是可以对打包后的单元加上整体效果，在 Pre- compose 之前往往无法对一些层加整体效果的。例如，MaskedGrid 是为了 给整个 Grid 合成加上一个 Mask 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 25 图图 3-50：Masked Grid 以遮住 Grid 的上部区域， 图图 3-51：Mask 而在这之前无法操作为 12 个 psd 素材层的整体加上 Mask。 3.2.33.2.3 运动分布复用运动分布复用 开场的预想效果是一个不断前进的视角遍历一片无尽的网格，这就需 要一片很长很长的网格素材，但是实际制作的网格长度远不能满足要求。 由于网格素材的像素点比简单的箭头多很多，如果像制作箭头那样用多个 相同图层在同个平面摆放会导致预览和渲染的速度变得极慢。为避免这种 影响性能的现象，制作前期网格使用了一个很重要的效果 Motion Tile，其 作用是复用原素材图像自身并在同一平面扩展平铺，以省略多余素材层的 摆放。 在效果参数里将 Hexagon 六边形素材的 Output Height 从 100 调至 500。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 26 图图 3-52：Motion Tile Hexagon 相当于在纵向上延伸摆放了 5 个 Hexagon。 这是使用 Motion Tile 前的六边形网格。 图图 3-53：Hexagon Grid 这是使用 Motion Tile 后的六边形网格。 图图 3-54：Motion Tiled Hexagon Grid 网格在纵向上延伸了。 同样在制作矩形网格的时候也使用了 Motion Tile，这是使用前的矩形 网格。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 27 图图 3-55：Rectangular Grid 在效果参数里分别将 Tile Width 和 Tile Height 从原始的 100 调小。 图图 3-56：Motion Tile Rectangular Grid 将原图像素材宽度和高度缩小然后平铺到原来的总输出大小不变。这 是使用后的矩形网格。 图图 3-57：Motion Tiled Rectangular Grid 这样一个矩形网格效果可以作为动态文字的背景使用，画面风格统一， 看上去不会显得太单调。 图图 3-58：Rectangular Grid Background 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 28 由此可以看出 Motion Tile 是一个放缩和延伸复用素材的好工具。 3.2.43.2.4 回声拖尾复用回声拖尾复用 After Effects 的 Time Effect 菜单里的工具可以对时间进行智能控制，比 如 Echo 回声效果，可以重复利用层的 Transform 关键帧。先用 Transform 关键帧制作一段文字飞入 Comp。 图图 3-59：Text Layer Transform 回声是由声波遇到障碍物反射回来而形成的，因此具有复制原声和逐 声衰减的特性。 如图设置 5 声 Echo 延迟上一声 0.5 秒后飞入，设置相邻 Echo 之间的 Decay 衰减制作一个逐渐削弱的回声。 图图 3-60：Echo 自动生成 Echo 拖尾，省时省力。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 29 图图 3-61：Echoed Text Layer Transform 3.33.3 智能生成效果智能生成效果 After Effects 的强大之处在于可以不借助任何素材只靠参数配置自动生 成一些抽象的动画，经一一试用发现这些生成效果主要分布于 Effect 下拉 菜单的 Generate，Noise & Grain 和 Simulation 里。 3.3.13.3.1 分形噪波生成分形噪波生成 工程里用到了一个 Effect Noise & Grain Fractal Noise 分形噪波效果 用以生成一些噪点条纹。 图图 3-62：Effect Noise & Grain Fractal Noise 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 30 灵感来源于 AE 里提供的 Animation Presets。经研究所有 Animation Presets 的基本原理都是用 Evolution 演化参数设置 2 个间隔 5s 的 Keyframe 来自动生成一段抽象动画。于是效仿 Animation Presets 的方式新建一个 Solid Layer，然后加 Fractal Noise 效果。这是 Fractal Noise 的参数面板。 图图 3-63：Fractal Noise Parameter 面板上有几个重要的调节项。Fractal Type 和 Noise Type 用于选择 Fractal Noise 种类，提供了很多种类搭配供制作者选择，可以生成各种各样 的噪波，在这里选用默认的 Turbulent Basic 和 Linear。 由于要做出一个细线条纹的效果，在 Transform 里将 Scale Width 和 Scale Height 一个调得很大一个调得很小，使其呈细线条纹状。 图图 3-64：Fractal Noise Transform 在 Timeline 上设置 2 个 Evolution 的 Keyframe，这里使其从 40x 演化到 20x 完成 20 个变换循环。其余调节项均保持默认设置不变，于是做出一个 不断变幻的条纹效果。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 31 图图 3-65：Fractal Noise Evolution 再配上一个有色背景即可展现一个很炫很有电子数码味的画面。 图图 3-66：Fractal Noise + Solid Layer 在 Layer Transform 设置里调节 Rotation 即可做出各式各样的条纹效果。 图图 3-67：Fractal Noise + Solid Layer + Rotation Transform 很适合作为表现文字在条纹方向上飞行的背景出现。 图图 3-68：Fractal Noise + Text Layers 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 32 经测试 Fractal Noise 生成的条纹效果放在许多背景上效果都比较理想。 这是偶然情况下对无法定位素材出错而出现的默认彩色条柱背景做的 Fractal Noise 效果测试，感觉即使是一个出错的画面，看上去仍然是比较不 错的。 图图 3-69：Fractal Noise + Footage Layer Error 为了研究 Fractal Noise 在不断变化的动态背景下表现的效果，这里动 态背景最好选用抽象又流畅渐变的视频以体现本段电子音乐的缓慢降调。 于是选用一个绚丽的流光效果素材 Footage.mov 做测试。 图图 3-70：Footage.mov 将 Footage.mov Duplicate 三份 图图 3-71：Duplicate Footage.mov 摆放在 Comp 里打包成 Footage*4。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 33 图图 3-72：Footage*4 在 Footage*4 上叠加已经做好的 Fractal Noise Comp。 图图 3-73：Footage*4 + Vertical Fractal Noise + Hued Vertical Fractal Noise 此时出现了一个动态流光和变幻条纹交相辉映的画面。 图图 3-74：Fractal Noise + Footage*4 考虑再加上 Layer Rotation 关键帧使画面更加迷幻。至此 Footaged Fractal Noise 合成已基本制作完毕，应用于 Main Comp 的第 5 段和第 8 段。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 34 图图 3-75：Main Layers 3.3.23.3.2 四色渐变生成四色渐变生成 本工程还用到了一个 AE 的自动生成效果，Generate 里的 4-Color Gradient 四色渐变。 图图 3-76：Effect Generate 4-Color Gradient 这是刚刚做好的网格配文字效果，乍看之下画面上半部背景很空虚， 给人一种死气沉沉的感觉。 用数字动画视觉特效呈现电子音乐风格使用 After Effects 制作抽象数字动画 35 图图 3-77：Grid + Text 于是加上一个 Medium Royal Blue Solid 单色背景层，整个画面呈现单 一的天蓝色，看上去还是显得些许单调。 图图 3-78：Grid + Text + Solid 对 Solid Layer 加 4-Color Gradient，分别配制 4 种颜色如下。 图图 3-79：4-Color Gradient Solid 点击定位 Button，鼠标移到相应点定位 4 个颜色生成点中心 Point 14。经反复移动 Point Position 测试比较发现文字附近的颜色需要跟文字本 身颜色保持统一，最好能创造一个文字颜色领域