毕业设计----FLASH电子相册设计

1、摘摘要要 随着计算机科学的发展和计算机的普及，计算机已经和人们的日常生活密切联系在一 起。现如今很少有人在抱着厚厚的影集来追忆过去的美好时光，取而代之的是电子相册。本 文首先介绍电子相册和电子相册制作工具 flash, 然后通过电子相册设计实例详细介绍翻页 电子相册的设计开发。 关键词：关键词：flash电子相册 ABSTRACTABSTRACT With the development of computer science and the popularization of computer, computer has closely related with peoples daily

2、life. Now people no longer hold aphotograph album to recall the beautiful past. The photograph album has been replaced by Electronic Album. This paper first introduces electronic albums and electronic albums production tools Flash, then introduces how to design a electronic album by using a example.

3、 Keywords:Keywords:Flash, Electronic Albums 目目录录 摘要.0 ABSTRACT.1 目录.2 第一章 引言.3 第二章 电子相册概述 .4 2.1 电子相册简介 .4 2.2 电子相册制作过程 .4 2.3 电子相册的优点 .4 第三章 Flash 概述.5 3.1 Flash简介.5 3.2 Flash 技术特点 .5 3.3 Flash MX 2004 的开发环境 .5 第四章 电子相册设计 .7 4.1 总体设计结构 .7 4.2 具体制作过程 .7 4.2.1 素材准备 .7 4.2.2 单页元件制作 .8 4.2.3 元件组装 .18 4

4、.2.3 添加脚本 .20 4.2.4 细节加工 .20 4.2.5 添加背景音乐 .21 结论.22 参考文献.23 致谢.24 第一章第一章 引言引言 今天数码相机开始普及，越来越多的人喜欢用拍照这种方式来记录生活。过去照片都冲 洗出来制作成厚厚的影集供人们追忆美好时光。在计算机普及和计算机技术飞速发展的今天 这种方式正在发生彻底的改变，人们有了更好的选择制作电子相册。针对人们的这种需 求出现了各种电子相册制作软件。我利用flash mx 2004 软件制作了这个翻页相册。在本文 中我将介绍关于电子相册和flash的相关内容，并详细介绍翻页电子相册的制作过程。 第二章第二章 电子相册概述电

5、子相册概述 2.12.1 电子相册简介电子相册简介 电子相册是指可以在电脑上观赏的区别于CDVCD 的静止图片的特殊文档，其内容不局 限于摄影照片，也可以包括各种艺术创作图片。电子相册具有传统相册无法比拟的优越性： 图、文、声、像并茂的表现手法，随意修改编辑的功能，快速的检索方式，永不褪色的恒久 保存特性，以及廉价复制分发的优越手段。 2.22.2 电子相册制作过程电子相册制作过程 制作电子相册首先要获得数字化的图片，即图片文件。用数字相机拍摄，可以直 接得到电子图片文件。也可以使用普通相机拍摄，通过扫描仪得到图片文件。如果是 游戏画面或 VCDDVD 画面，可采用屏幕拷贝或功能更强的截屏工具

6、获得图片。 其次要对图片进行加工处理，专业人士可以使用专业级的软件Photoshop ，想要 操作简单快速，高画质也可以使用国内第一图像处理软件彩影，实现更加精美的相册 制作。 最后使用电子相册制作软件将处理后的图片制作成电子相册。 2.32.3 电子相册的优点电子相册的优点 欣赏方便：传统的相册在多人欣赏时只好轮流进行，而电子相册可以很多人同 时欣赏。 交互性强：可以象VCD 点歌一样，将相册做成不同的标题，比如说：1 我的童 年 ，2 我的大学生活。这样可以在遥控器上按下“1”键就播放你童年的照片，“2” 键播放你大学时代的照片，根据你的照片具体内容可以细分，比如说增加“我的朋 友”、“大

7、约在冬季”等等。 储存量大：一张 VCD 光盘可储存几百张照片； 永久保存： CD-R 光盘可以金碟为存储介质，寿命长达上百年； 欣赏性强：以高科技专业视频处理技术处理照片，并配上优美的音乐，可以得 到双重的享受。欢歌笑语、岁月如歌、尽在一张薄而亮丽的视频光碟中，永久保存、 轻巧方便、时尚新潮！ 第三章第三章 Flash Flash 概述概述 3.1 Flash3.1 Flash 简介简介 Flash 的前身是 Future Wave 公司的 Future Splash，是世界上第一个商用的二维 矢量动画软件，用于设计和编辑Flash 文档。1996 年 11 月，美国 Macromedia

8、公司收 购了 Future Wave， 并将其改名为 Flash。 在出到 Flash 8 以后，Macromedia 又被 Adobe 公司收购。 ，最新版本为： Adobe Flash CS5 。 Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程 序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文 稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元 称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视 频和特殊效果，构建包含丰富媒体的 Flash 应用程序。 Flash 特别适用

9、于创建通过 Internet提供的内容，因为它的文件非常小。 Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存 储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以 更大，是因为图像中的每个像素都需要一组单独的数据来表示。 3.2 Flash3.2 Flash 技术特点技术特点 1. 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸 而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦 急等待的情绪。 2. 通过使用关键帧和图符使得所生成的动画 (.swf)文件非常小，几 K 字节的

10、动画文件 已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小 巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。 3. 把音乐，动画，声效，交互方式融合在一起，并且创作出了许多令人叹为观止的动 画(电影)效果。 而且在 Flash4.0的版本中已经可以支持MP3 的音乐格式， 这使得加入音乐的 动画文件也能保持小巧的身材。 4. 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION 和 FS COMMAND可以实现交互性，使Flash具有更大的设计自由度。 3.3 Flash MX 20043.3 Flash MX 2004

11、的开发环境的开发环境 1. 正确安装Flash MX 2004后，Flash MX 2004软件就会在Windows的开始菜单中，用 鼠标单击【开始】/【程序】/【Macromedia】/【MacromediaFlash MX 2004】 ，就会启动Flash MX 2004中文版。 2. 启动 Flash MX 2004 中文版后，弹出一个让用户选择【打开最近项目】、 【创建新项 目】 、 【从模版创建】的窗口。选取【创建新项目】，单击【Flash 文档】按钮，进入了Flash MX 2004中文版集成开发环境。 3. 在 Flash菜单栏共有10 个菜单项，分别是文件、编辑、视图、插入、修

12、改、文本、 命令、控制、窗口、帮助。 4. Flash的集成开发环境中的【工具】面板有选择工具、部分选取工具、线条工具、套 索工具等美化工具， 默认的情况下Flash将自动打开标准工具。 为方便用户操作需要， Flash 将常用的工具集中放在工具箱中。 如果用户没有看到工具的话可以打开，方法：选择菜单 【窗口】/【工具】 ，将工具的勾选上或直接按Ctrl+F2调出工具。 5. Flash中的动作是输入程序代码和程序调试的地方。在其左边有可以调用的函数，只 要双击你要调用的函数，函数将会出现在动作编辑区。动作的快捷键是 F9。 6. Flash中进行动画内容编辑的整个区域叫做场景。场景中进行图像

13、的绘制和编辑工作 的白色区域是舞台，舞台之外灰色区域是工作区。 7. Flash的【时间轴】就是用来组织和控制文档内容在一定时间内播放的层数和帧数。 其主要的组件是层、帧和播放头，还包含一些信息指示器。帧是进行动画创作的基本时间单 元。 8. Flash中还有很多面板，例如【颜色】面板， 【对齐】面板， 【库】面板等。 第四章第四章 电子相册设计电子相册设计 本章正式进入用Flash MX 2004 制作翻页电子相册的具体实施过程。在本例中将完成一 个通过鼠标点击逐页浏览的包含八页（包括封面和封底）的电子相册。 4.14.1 总体设计结构总体设计结构 素材准备 单页元件制作 元件组装 添加脚本

14、 细节加工 添加背景音乐 图 4.1 相册设计结构图 4.24.2 具体制作过程具体制作过程 4.2.14.2.1 素材准备素材准备 素材准备是相册设计的准备阶段，把要制作成相册的照片和将要是用的素材收集整理放 到一个文件夹中待用。也包括素材的预处理，也就是照片的美化和图像大小的调整。可以使 用美图秀秀，光影魔术手等美图工具完成图片的预处理。也可使用专业的图像合成软件 Photoshop来处理素材。 在本例中， 使用 Photoshop对素材照片进行处理。 简要介绍处理方法如下： 1.自动色阶。 2.饱和度调节。 3. 色彩平衡调节。 4.复制图层。 5.使用高反差保留滤镜。 6.图层混合模式

15、 柔光。此外，还使用Photoshop制作了封面图片“东师建筑” 。 图 4.2 封面素材 4.2.24.2.2 单页元件制作单页元件制作 1 封面制作 打开 FlashMX 2004，新建Flash文档。在“属性”中设置大小为“ 1000*450”像素。 以“东师建筑”文件名保存。 新建影片剪辑元件“封面” ，进入元件编辑界面。 把图册 1 改名为“封面” ，选择第1 帧导入素材“封面”到舞台。在属性中设置图片 大小为“宽480，高360” 。在对齐面板中设置图片相对于舞台“垂直中齐”， “左侧分布” 。在 第 50 帧插入关键帧。 新建元件“东师建筑文字” 。用文本工具输入“东师建筑” 。

16、在属性中设置字体为“华 文彩云” ，字号为“ 30” ，颜色为“灰色” 。复制粘贴文字一次。更改文字属性中字体为“华文 琥珀” ，颜色为“浅蓝” 。使用移动工具使两组文字重合。 回到封面元件编辑界面，新建图层“文字” 。在第1 帧中拖入元件“东师建筑文字” 。 位置位于图片左下角。 在第 15 帧插入关键帧， 将文字元件平移到右下角。 选中第 1 帧创建动 作补间。在第16 帧插入关键帧，用变形面板将文字元件旋转40 度。在第30 帧插入关键帧， 移动文字到左上角，创建第16 帧到第 30 帧的补间动画，设置旋转为“逆时针1 次” ，在第 31 帧插入关键帧，旋转元件至水平，在第50 帧插入关

17、键帧。创建补间动画。 封面元件最终效果如下： 图 4.3 封面元件效果图 2第 2 页卷首语制作 在本页中运用遮罩层制作逐字显示“卷首语： ”和逐行显示卷首语具体内容的显示效果。 由于第 2 页是在翻页后显示，所以本页中的文字内容需要水平翻转，在制作完成翻页效果后 才能得到正常的效果。. 新建“卷首语”影片剪辑元件。在图层1 中选中第 1 帧，导入背景图片“内页” ，调 整大小为“480*360” ，在对齐面板中设置对齐方式为相对于舞台“垂直中齐”， “左侧分布” 。 在第 60 帧插入关键帧，选中该帧，在动作面板中添加命令“ stop();” 。 新建图层，命名为“文字 1” ，用文本工具输

18、入文字“卷首语： ” ，设置文字属性，具 体过程不再赘述。选中文本对象执行“修改变形水平翻转”。 新建图册，命名为“遮罩1” 。在第 1 帧用矩形工具拖拽出一个矩形，大小以能盖住 文字图层文字为宜，移动至文字左侧。在第10 帧插入关键帧，将矩形移动到盖住文字位置。 创建补间动画。 右键单击图层“遮罩1” ，在弹出的选项中选中“遮罩层”。至此， “卷首语： ”逐字显 示效果完成。 制作卷首语具体内容逐行显示效果。方法参考步骤，不再赘述。 最终效果如下图： 图 4.4 卷首语页效果图 3第 3 页东师地标制作 在本页中制作单击“播放”按钮后两张图书馆照片过渡切换的效果。 图片元件制作。新建图形元件

19、“图书馆1” ，选中第1 帧，导入边框素材和照片素材， 调整大小。如法制作元件“图书馆2”效果如下图： 图 4.5 元件“图书馆1”效果图 图 4.6 元件“图书馆2”效果图 按钮制作。新建按钮元件“播放” 。设置笔触颜色为“透明” ，填充颜色为“灰色” ， 用椭圆工具按住 shift 键绘制一个正圆，更改填充颜色为“黑色” ，用矩形工具按住 shift 键绘制一个矩形。 选中矩形， 执行“修改变形扭曲” ，调整矩形角的位置得到一个三 角形。调整三角形大小和位置，使其位于圆内。按钮制作完成，如图： 图 4.7 “播放”元件效果图 新建影片剪辑元件“图书馆” 。导入背景素材“内页”到图层1 第

20、1 帧，如卷首语制 作步骤所述调整大小和位置。在第40 帧插入帧。新建图层，命名为“文字” ，用文本工具 输入“东师地标图书馆” ，文字属性自行设置。 在第 40 帧插入帧。 新建图层， 命名为 “图 片切换” 。选中第 1 帧拖入元件“图书馆1” ，调整位置使其中心和“内页”图片中心重合。 在第 5 帧插入关键帧用变形面板调整“图书馆1”大小为10%，在属性面板中设置颜色Alpha 值为 10%。创建补间动画。在第6 帧插入空白关键帧，拖入元件“图书馆2” ，用变形面板调 整其大小为10%，在属性面板中设置颜色Alpha值为 10%，在第 11 帧插入关键帧，调整大小 为 100%，Alph

21、a 值为 100%.，创建补间动画。在第20 帧插入关键帧，然后在第25 帧插入关 键帧，调整大小为10%，Alpha 为 10%。创建补间动画。在第26 帧插入空白关键帧，拖入元 件 “图书馆1” ， 调整大小为10%， Alpha 为 10%， 在 31 帧插入关键帧， 调整大小为100%， Alpha 值为 100%.，创建补间动画。在第40 帧插入帧。新建图层“播放” ，选中第 1 帧，从库中拖 入元件“播放” ，置于图片中央位置，调节大小。在动作面板中添加命令“ stop();” 。选中按 钮，在动作面板中添加命令“on (press) gotoAndPlay(2); ;” 。至此，

22、第3 页制作完成。 4第 4 页综合建筑制作 在本页中制作图片旋转飞入显示效果。同样本页中的文字要进行水平翻转。 图片元件制作。方法同上。 新建影片剪辑元件“综合建筑” 。把图层 1 改名为“背景” ，导入“内页”图片，调 整大小位置如前所述。用文本工具输入文字“综合建筑”和建筑名，设置文字属性，对文字 进行水平翻转，方法同前面所述。调整文字位置，要考虑到和将要进入的照片相对应（可在 图片飞入效果完成后回到此步骤调整文字与图片相对应）。在第 110 帧插入帧。如图： 图 4.8 背景层文字效果图 新建图层， 命名为 “逸夫楼” ， 在第 5 帧插入关键帧， 拖入步骤所制元件 “逸夫楼” ， 位

23、置于“内页”图片右下角，设置其Alpha值为 0。在第 25 帧插入关键帧，移动“逸夫楼” 元件到对应的文字位置， Alpha值调回 100%，调整大小为20%。创建动作补间， 旋转设为 “逆 时针 1 次” 。在第 110 帧插入帧。 新建图层，在上一图层动画结束后5 帧用上述方法制作其他图片旋转飞入的效果。 分别在第1 帧和第 110 帧添加命令“stop（）;” 。 该页最终效果如图： 图 4.9 第 3 页效果图 5第 5 页学院风光制作 图片元件制作。方法同前所述。 “学院风光文字”元件制作。新建影片剪辑元件，选中第一帧，输入文字“学院风 光” ，设置文字属性，在第35 帧插入关键帧

24、， 将文字向左平移，创建补间动画。 在第 70 帧插 入关键帧，把文字移至第1 帧所在位置，创建补间动画。 新建元件“学院风光” ，把图层 1 改名为“背景” ，导入“内页”图片，调整大小和 位置。在第140 帧插入关键帧。 新建图层，命名为“小照片” ，把步骤中所制图片元件拖入到第1 帧，大小调整为 20%，10 个元件呈“L”形排列于“内页”图片的左部和下部。在第140 插入帧。新建图层， 命名为“文字” ，选中第1 帧，拖入元件“学院风光文字” 。在第 2 帧插入空白关键帧。 新建图层， “照片 1” ，在第2 帧插入关键帧拖入元件“照片1” ，调整大小为20%，移 动使其与 “小照片”

25、 中的“照片 1”重合。 在第 8 帧插入关键帧， 将图片元件大小调整为70%， 移动到右上空白处适当位置。创建补间动画。在第15 帧插入关键帧，将“照片1”大小调整 为 20%。创建补间动画。选中第8 帧，在动作面板中添加命令“stop（）;” ，选中元件“照 片 1”添加命令“on (press) gotoAndPlay(9); 。选中“文字”图层第8 帧，用文本工具输入学院名“外国语学院” ，设置文字属性， 调整位置。在其后一帧插入空白关键帧。 新建图层“照片2” ，以第16 帧为起始帧执行相似于步骤过程。如此继续下去，直 到 10 个图片元件处理完毕。 新建图层“动作脚本” ，在第 1

26、 帧中添加命令“stop（）;” ，在每个照片图层动画结 束对应的帧中添加动作命令“gotoAndStop(1);” 。 该页最终时间轴和效果如下： 图 4.10 时间轴 图 4.11 第 5 页效果图 6第 6 页公寓与餐厅制作 在本页中制作两种切换效果展示学生公寓和餐厅照片。 制作图片元件，方法同前。 新建影片剪辑元件“东师生活” ，把图层1 改名为背景，选中第1 帧，导入“内页” ， 调整大小和位置。用文本工具输入“学生公寓”和“北苑餐厅”文字，调整文字属性和位置。 对文字进行水平翻转。 新建图层“公寓1” ，导入步骤所制元件“公寓1” ，调整大小和位置与背景层相对 应。在第5 帧插入关

27、键帧。在第13 帧插入关键帧，调整该帧中“公寓1”元件高度为1%，宽 度不变，Alpha值为 0。选中第5 帧创建补间动画。新建图层“公寓2” ，在第13 帧插入关键 帧，拖入元件“公寓2” ，调整大小和位置与该帧中元件“公寓1”重合，Alpha值设为 0。在 第 20 帧插入关键帧，调整元件“公寓2”大小和位置与第1 帧中元件“公寓1”一致， Alpha 值为 100%。选中第13 帧，创建补间动画。 模仿步骤，新建两个图层，制作餐厅的展示效果。 新建图层“脚本动作” ，在第 1 帧和第 20 帧中添加动作命令“stop();” 该页最终时间轴和效果如下： 图 4.12 时间轴 图 4.13

28、 第 6 页效果图 7第 7 页为美而生制作 在本页中制作坏掉的电视机闪烁显示效果，单击播放按钮闪烁显示图片一张。 制作图片元件，方法同前。 新建元件“为美而生” ，把图层1 命名为“背景” ，导入“内页”图片。在第63 帧插 入帧。 新建图层“电视机” ，选中第 1 帧，用矩形工具，填充颜色为“灰色” ，笔触颜色为 “透明” ，绘制一个矩形，在该矩形内在绘制一个比它小的矩形，选中小矩形，按 Delete键 删除小矩形。 得到一个矩形环， 在矩形环下部放入按钮 “播放” 。 电视机制作完毕。 效果如图： 图 4.14 电视机效果图 新建图层“图片” ，拖动图层使该图层位于“电视机”图层下方。选

29、中第1 帧，用矩 形工具，填充颜色为“黑色” ，笔触为“透明” ，绘制大小能填充矩形环内部空白的矩形。在 第 2 帧插入关键帧， 在属性面板中，把矩形填充颜色改为“浅灰”，在第3 帧插入关键帧，把 矩形填充颜色改为“白色” 。复制第1 帧到第3 帧，在其后粘贴数次，到第63 帧为止。选中 第一帧，用文本工具输入 “为美而生的建筑” ，在第 7 帧和 7 的倍数帧分别放入图片元件。 调 整图片元件大小和位置使其位于环行框内。 选中第 1 帧，在动作面板中添加命令“ stop();” ，选中该帧中的按钮“播放” ，添加 命令“on (press) gotoAndPlay(2); ” 。图片元件对应

30、的帧中添加以上命令，注意：按钮的命令中的数字为当前帧后一帧， 最后一帧为1。 该页最终时间轴和效果如下： 图 4.15 时间轴 图 4.16 第 7 页效果图 8第 8 页封底制作 本页制作简单的封底， 只要导入素材背景， 添加必要文字即可。 注意文字需要水平翻转。 4.2.34.2.3 元件组装元件组装 在前面的过程，制作完成了8 页的单页显示效果，接下来要做的就是把这八个单页元件 组装成一个翻页相册，就好比把八页纸装订成一个册子。 1新建影片剪辑元件“相册” 。把图层 1 命名为“1 页” 。在第 1 帧拖入元件“封面” ， 在对齐面板中执行相对于舞台 “垂直中齐” ， “左侧分布” 。把

31、元件以变形中心移动到与舞台中 心重合。在第5 帧插入关键帧，用变形面板调整元件“封面”宽度为 80%，倾斜上下倾斜-45 度。选中第1 帧，创建补间动画。在第10 帧插入关键帧，把“封面”元件宽度调整为10%， 倾斜为上下倾斜-89 度。选中第5 帧，创建动作补间。 2新建图层 “2 页” ，在第10 帧插入关键帧，拖入元件“卷首语”。用对齐面板执行“垂 直中齐” ， “左侧分布” 。调整其变形中心与舞台中心重合。用变形面板调整其宽度为10%,倾 斜为上下倾斜-89 度。即与图层 “1 页” 第 10 帧中元件 “封面” 重合。 在第 20 帧插入关键帧， 将元件“卷首语”宽度调回100%，倾

32、斜调回0 度。选中第10 帧创建补间动画。在第40 帧插 入帧。 3 新建图层，命名为“3 页固定” ，将其移动到图层“1 页”下。在第1 帧中拖入元件 “图书馆” ，对齐面板中设置“垂直中齐”， “左侧分布” 。在第20 帧插入帧。目的是在第1,2 页翻页时，下一页内容显示出来，不会出项空白界面。 通过以上三个步骤，完成了第一次翻页。整个相册一共8 页，要完成4 次翻页，可参考 上述步骤，新建图层实现其它三次翻页效果。不在赘述。最终时间轴和效果为： 图 4.17 翻页时间轴效果 图 4.18 翻页效果图 4.2.34.2.3 添加脚本添加脚本 在上一步骤中，实现了翻页效果，但是翻页是自动的，

33、要添加动作脚本实现对翻页的控 制。 1自作翻页按钮。新建按钮元件“翻页” ，在弹起帧中绘制两个小矩形，对其中 一个执行“修改变形扭曲” ，调整矩形角的位置得到一个三角形。效果如图： 图 4.19“翻页”按钮效果一 在指针经过帧中插入关键帧，用椭圆工具绘制一个圆形。效果如图： 图 4.20“翻页”按钮二 2在元件“相册”新建图层，命名为“脚本” 。在第 1 帧，第 20 帧，第 40 帧，第 60 帧， 第 80 帧中添加命令 “stop();” 。 在上述各帧中拖入按钮元件 “翻页” 。 在第 80 帧中把 “翻 页”元件的Alpha值调为 0%，位置与文字“谢谢欣赏，点击回首页”重合。在动作

34、面板中对 这几个帧中的“翻页”元件添加命令“ on (press) gotoAndPlay(*); ” 注：*为当前帧的下一帧，第80 帧中*=1。 至此实现了对相册翻页的控制。 4.2.44.2.4 细节加工细节加工 相册的主体已经制作完成，好的相册除了能够实现预期的显示效果，还要在视觉上给人 美的享受。在这一环节就是对细节进行加工美化。本例中制作的是翻页电子相册，为了让它 看起来像一本相册而不是一页相册，可以制作书脊和书页效果进行细节修饰。 1 在元件“相册”中新建图层“书脊” 。在第 1 帧导入“书脊”素材，一个矩形的图 片，也可用矩形工具绘制一个矩形长条。用变形面板调整“书脊”使其略微倾斜，并调整大 小和位置。用线条工具绘制直线制作书页效果。完成后效果如图： 图 4.