詹姆斯布朗特

HarbinInstituteofTechnology

课程研究报告

课程名称：计算机图形学

报告类型：Flash动画设计报告

设计题目：基于Flash的动画设计

所在院系：软件学院

所在学科：软件工程

学生类别：研究生

指导教师：苏小红

学生姓名：

学生学号：

选课时间：2016年秋季学期

教师批阅成绩：

哈尔滨工业大学

动画设计报告

2

一、软硬件环境

本程序运行在Windows7下，主要设计工具为AdobeFlashCS6，辅助设计工

具为AdobePhotoshopCS6。查看计算机属性得到软硬件环境：处理器为IntelCore

i5-3210MCPU2.50GHz，内存4GB，64位操作系统。其中Flash版本为12.0.0.0，

官方下载地址为/support/flash/#flashCS6。

二、设计内容和设计思路

动画的背景音乐来自于英国歌手詹姆斯·布朗特《不安于室》专辑中的You

AreBeautiful。詹姆斯·布朗特这首歌曲是写给其前女友迪希·崔西的，迪希·崔西

和新任男友在一起的消息令詹姆斯·布朗特十分伤心。一次，詹姆斯·布朗特与女

友相见，两人只是眼神对视了一下，之后两人再也没有见过面。那一次的对视让

他影响十分深刻，于是詹姆斯·布朗特产生了写歌的灵感。歌词中英文对照如下：

英文歌词中文歌词

Mylifeisbrilliant.

Mylifeisbrilliant.

Myloveispure.

Isawanangel.

OfthatI‘msure.

Shesmiledatmeonthesubway.

Shewaswithanotherman.

ButIwon‘tlonosleeponthat,

‘CauI‘vegotaplan.

You‘‘rebeautiful.

You‘rebeautiful,it‘strue.

Isawyoufaceinacrowdedplace,

AndIdon‘tknowwhattodo,

‘CauI‘llneverbewithyou.

Yeah,shecaughtmyeye,

Aswewalkedonby.

ShecouldefrommyfacethatIwasflying

high,

AndIdon‘tthinkthatI‘lleheragain,

Butwesharedamomentthatwilllasttillthe

end.

You‘‘rebeautiful.

You‘rebeautiful,it‘strue.

Isawyoufaceinacrowdedplace,

AndIdon‘tknowwhattodo,

‘CauI‘llneverbewithyou.

You‘‘rebeautiful.

You‘rebeautiful,it‘strue.

我的人生如此闪耀，

我的人生如此闪耀，

我的爱是如此纯真，

我看见了一个天使，

对此我十分确信。

在地铁站前，她微笑地注视着我。

她与另一个男人在一起，

但我不会因此而失眠，

因为我有一个计划。

你是如此的美，如此的动人。

你非常的漂亮,这是事实。

在拥挤的人潮里，我看见了你的

脸。

我不知所措，

因为我将无法与你在一起。

她吸引着我的目光，

在我擦身而过的时候。

她会从我脸上发现我欣喜若狂，

我想我将再也见不到她。

但我们曾分享了一个永恒的瞬间，

永生难忘。

你很美丽,如此的美丽。

你是如此美丽，这是实话。

我在拥挤的人潮中发现了你，

我不知所措，因为我将无法与你在

一起。

你是如此的美丽，如此的美丽。

这是真的。

动画设计报告

3

Theremustbeanangelwithasmileonher

face,

WhenshethoughtupthatIshouldbewithyou.

Butit‘stimetofacethetruth,

Iwillneverbewithyou

一定有一位天使在她脸上赋予了

笑容，

当她想出我应该与你在一起。

但，是时候去面对现实了。

我将永远无法伴你身边。

在不了解歌曲创作背景的情况下，大多数人会把这首歌理解为记录一次美丽

的邂逅：男生在地铁站偶遇了一位纯真动人的女生，然而女生已经名花有主，虽

然仅仅是匆匆一瞥，但女生的形象已在男生心中留下了难以磨灭的痕迹，只可惜

有缘无分，只能“虽不能至，心向往之”，这是对“一见倾心”的浪漫书写。詹姆斯·布

朗特通过这首歌曲简单的结构有效地向人们传达了现实的痛苦、不能与心爱的人

在一起的痛苦。这首歌曲令人心碎却动人耐听。像是记录着难以忘情、怦然心动

的情感小品。YouAreBeautiful把爱情世界里的偶然、巧合与失落表达得十分动

人。

在整个Flash制作过程中，我根据每句歌词的含义设计出场景，参考时间轴，

让场景与歌词对应起来。除了女生的服装外，其他部分均采用了较为灰暗的颜色，

为了突显出女生这个人物，同时奠定了整体较为伤感的基调。

前奏吉他声出现，男生独自走在地铁站中，经过一扇又一扇地铁窗，男生在

门前停下，歌手唱道“Mylifeisbrilliant”，虽然歌中唱的是生活美好，但画面中

只有男生孤独的背影。地铁飞驰而过，男生朝左右张望，发现了一位漂亮的女生，

女生的微笑犹如一束阳光照进男生的心里。刹那间，人流、地铁和内心的寂寞都

不复存在，仿佛只有男生女生两人站在竹林间的栈道上，清风徐来，鸟语花香，

五彩的蝴蝶围绕着女生飞舞。但是女生身边的男朋友很快把男生从想象世界拉回

现实，男生意识到女生已经名花有主，自己不能前去搭讪，与女生也只是一面之

缘，无法在一起。最终女生的男朋友牵着女生离开，男生依旧独自一人站在地铁

门前，黯然神伤。

三、动画制作的步骤

1.确立主题

动画讲述了一个男生对一个女生一见钟情但发现女生已名花有主的故

事。

2.搜集素材

主要人物包括：男生、女生和女生的男朋友，主要场景是地铁站，次要

场景是一片竹林。根据人物和场景，我在网上找到了相关图片。

3.用Photoshop进行图片处理

①女生：女生的动作包括侧身看、回头看、与男朋友牵手行走等。我

将网络上下载的.jpg图片的白色背景用魔术橡皮擦工具擦除，使图片

背景变为透明，把图片另存为.png格式，女生图片主要包括以下几

张：

动画设计报告

4

②男生：男生的动作包括背面站立、行走、侧头看等。首先将网络图

片格式变为.png去除白色背景，利用矩形选框/裁剪工具截取男生头

部，男生图片主要包括以下几张：

③女生男朋友：根据男生的图片，利用Photoshop中的快速选择工具、

颜色替换工具、橡皮擦和油漆桶等修改发色、发型和服装颜色，即

得到女生男朋友图片。

④背景：背景包括地铁站和竹林，为了制作动画风格的背景图，需要

对图片进行简要处理，以地铁站为例，这里采用了香港迪士尼地铁

站的图片，因其地铁风格比较卡通，符合动画风格：

图3-1地铁站原图

选择Photoshop菜单中的滤镜，打开滤镜库，选择艺术纹理中的干画

笔，设置画笔大小为0、画笔细节为10、纹理为1，点击确定，完成图

片的初步处理：

动画设计报告

5

图3-2应用干画笔后的地铁站效果

为了保证动画的清新风格，需要降低图片的对比度，新建图层，将

该图层至于顶层，利用油漆桶将图层背景填充为白色。拖动图层选项卡

中不透明度的滑块，将白背景图层的透明度设置为20%，最后在任意图

层上点击右键->合并可见图层，这样产生的效果图与日本动漫的风格比

较相近，保存图片：

图3-3地铁站背景最终效果图

当地铁开动后，地铁前进较快，需要利用地铁窗营造出快速前进的

效果，与地铁站图片处理类似，首先将地铁窗转换成动画风格：

图3-4转换成动画风格的地铁窗

选择Photoshop中的滤镜->模糊->动感模糊，将距离参数设置为40：

动画设计报告

6

图3-5地铁前进效果

4.制作Flash

新建一个.fla文件，命名为YouAreBeautiful，参数设定为默认：

点击文件->导入->导入到库，将背景音乐和处理好的图片导入到项目中，

在以后需要应用时，选定图层，直接将图片拖拽到舞台就可以：

动画设计报告

7

点击左下角的“新建图层”，将库中的背景音乐拖拽到该图层上，将图层

命名为bgm：

以相同方式新建背景图层bg，以及男生、女生所在图层等。当需要更改

动画显示内容时，在对应图层上点击右键->插入关键帧/插入空白关键帧，更

新显示内容：

在动画中，男生首先从屏幕左下角走到屏幕右侧。选中男生图层，将男

生走路的图片拖到舞台上，男生出现在屏幕左下角：

动画设计报告

8

每隔五帧设置一个关键帧，将男生图片交替设置为左脚在前的和右脚在

前的，同时男生图片位置向斜上方移动，显示为男生走至屏幕右侧快要消失：

将背景设置为静止的地铁窗，将男生侧脸图片拖动到舞台上：

每隔五帧改变一下男生的位置，直至男生走到屏幕右侧快要消失：

循环上面的行走过程，直至歌手开始演唱“Mylifeisbrilliant”时，男

动画设计报告

9

生慢慢转身背对镜头。男生转头的三个步骤对应三张图片：

地铁开动，设置不同的男生上身图片，显示男生的头不时转来转去：

动画设计报告

10

当歌手唱到“Isawanangel”时，更换地铁站背景图片，将女生和女生

男朋友图片拖到舞台上，选中图片，在图片上点击右键，选择“任意变形”，

调整图片大小和位置至适宜：

当歌手唱到“Shesmiledatmeonthesubway”时，女生转过头朝向男

生并微笑，调整各层图片大小，显示镜头逐步拉近：

动画设计报告

11

地铁已经开走，镜头转回男生，改变背景图片：

当歌手唱到“You'rebeautiful”时，改变图片背景为竹林栈道，同时添

加蝴蝶图片，每隔几帧改变一下蝴蝶的位置和方向，模拟蝴蝶飞的场景：

动画设计报告

12

当歌手唱到“IsawyourfaceinacrowdedplaceandIdon'tknowwhat

todo”时，回到之前的地铁背景：

当歌手唱到“'CauI'llneverbewithyou”时，修改女生和女生男朋友

的图片，屏幕渐渐变暗，音乐渐弱：

选中背景音乐所在图层，点击右侧的属性，选择编辑声音封套，在编辑

动画设计报告

13

封套中修改节点的上下位置可以调整音量，营造背景音乐渐弱的效果：

四、动画播放效果截图

伴随着吉他前奏，男生一直朝前走：

男生走至屏幕右侧，快要消失：

动画设计报告

14

镜头转至侧对男生的脸，男生继续走，从屏幕左侧一直走到屏幕右侧，

经过了一扇地铁窗：

男生走至屏幕右侧，再从左侧出现，又走过了一个地铁窗：

当歌手开始演唱“Mylifeisbrilliant.”时，男生慢慢转身背对镜头，地

铁就要开动：

歌手继续演唱“Myloveispure.”，地铁开动后，男生的头不时转来转去：

动画设计报告

15

男生似乎在右方看到了什么，又向右方瞥了一眼：

突然男生的头定住不动，因为他看到了一位漂亮的女生：

当歌手唱到“I'msure.”时，镜头切到女生，画

面出现一位窈窕的女生，她的模样像天使一般令男生心驰神往，女生旁边还

有一位黑衣男生，看起来像是她的男朋友，两个人站在一起等地铁：

动画设计报告

16

当歌手唱到“Shesmiledatmeonthesubway.”时，女生转过头朝向男

生，发现男生在看自己，朝着男生微笑，镜头逐步拉近：

当歌手唱到“Shewaswithanotherman.”时，地铁已经开走，镜头转

回男生，男生望向女生纹丝不动，内心却波澜起伏，陷入女生的微笑之中，

但却发现女生身边已经有了一个男生，内心不禁落寞：

当歌手唱到“You'''rebeautiful,it's

true.”时，男生因女生的美丽而陶醉，现实中的地铁、男朋友和人流全部消

失，想象女生站在竹林的栈道上亭亭玉立，有蝴蝶飞舞亲吻女生：

动画设计报告

17

当歌手唱到“IsawyourfaceinacrowdedplaceandIdon'tknowwhat

todo.”时，转回现实场景，地铁站里熙熙攘攘，女生依旧和男朋友一起站在

地铁前：

当歌手唱到“'CauI'llneverbewithyou.”时，女生和男朋友手牵手离

开，屏幕渐渐变暗，音乐渐弱，男生知道自己与女生只有这一面之缘，是不

可能一起的：

五、参考文献

1.新视角文化行.FlashCS6动画制作实战从入门到精通[M].人民邮电出版

社,2013.4.

动画设计报告

18

2.李东博.Dreamweaver+Flash+Photoshop网页设计从入门到精通[M].清华

大学出版社,2013.6.

3.何新起.网站建设与网页设计从入门到精通Dreamweaver+Flash+

Photoshop+HTML+CSS+JavaScript[M].清华大学出版社,2013.9.

4.李海涛.激战Flash富媒体广告设计：互联网互动创意指南与视频剖析

[M].清华大学出版社,2013.7.

5.刘春玲,郝国芬.案例大讲堂——中文版Flash商业广告设计与网络动画

制作300例[M].清华大学出版社,2015.9.

6.刘贵国,郝倩.网页设计与网站建设完全实战手册[M].清华大学出版

社,2016.3.

7.陈双双.Flash绘图与网页动画制作全程揭秘[M].清华大学出版

社,2014.10.

六、个人学习体会

Flash的动画制作入门比较简单，我在初中时已经接触过相关课程，但是想

要完成比较优秀的Flash作品，仅仅掌握Flash制作是不够的，还需要了解

Photoshop操作，并且能够对动画画面进行创意性的设计。

在最初选择背景音乐时，我毫不犹豫就敲定了YouAreBeautiful，因为当我

第一次听到这首歌时，就被其描述的意境所吸引，而且其歌词画面感很强，比较

容易转化成为图像。我在纸上画出主要帧的画面布局，再根据情境需要在网上搜

索图片并对图片进行处理，整体进行得很顺利。但对于声音的处理我花费了一些

时间，因为.mp3格式的音乐无法直接导入到库，需要用格式工厂转换成.wav格

式，另外在动画结尾处的声音渐弱处理也是我之前没有接触过的，我在这次实验

中新学到了声音处理的技巧。

近年来H5的迅猛发展对Flash造成了强烈的冲击，但实际上我们生活中仍

然大量存在着Flash，不只是页游和广告，还包括商场大屏广告、星际争霸2等

游戏大作UI界面、优酷土豆、KTV点歌屏等，还有很多C++开发的桌面客户端，

在实现华丽界面或者动画的时候，都嵌入Flash来实现，这些业务长期来看都不

会被H5取代。在Flash最为鼎盛的时期，来自Adobe的官方统计，全球有将近

200万的Flash开发者，这个群体不同于其他语言的开发者，他们会开发游戏，

会制作动画，会创作富媒体应用，甚至很多人还兼修美术，烹饪和刺绣。从2010

年起Flash开始走下坡路，这些Flash开发者陆续转型，他们后来成为了众多应

用和游戏公司的中坚力量，目前市场上大量的Unity手机游戏开发者，近一半的

HTML5开发者，甚至是大量的AngularJS和JQueryMobile的开发者，都来自于

原来的Flash社区。所以，在一段时间内，Flash在PC端的地位不可撼动，Flash

失去的只是它从未真正拥有的移动平台，学习Flash仍旧具有重大意义。而且就

Flash开发工程师的转型路线来看，Flash作为基础，对于我们学习其他新鲜技术

依然有巨大帮助。