Adobe Flash CS5中文版经典教程(不提供光盘内容)(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-22 06:44:54

点击下载

作者:美国Adobe公司

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Adobe Flash CS5中文版经典教程(不提供光盘内容)

Adobe Flash CS5中文版经典教程(不提供光盘内容)试读:

前言

Adobe Flash Professional CS5为创建数字动画和交互式Web站点提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序,它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其他Adobe应用程序(如Photoshop或Illustrator)导入它们,快速设计简单的动画,以及使用 Adobe ActionScript 3.0 开发高级的交互式项目。

但是 Adobe Flash Professional仅仅是Flash CS5工具套件当中的一个产品。除了 Flash Professional之外,Adobe还提供了Flash Catalyst和Flash Builder。Flash Catalyst是一个设计工具,它无需编写代码即可快速创建富有表现力的界面和交互式内容。Flash Builder(以前称为Flex Builder)是适合于开发人员(而不是动画师或设计师)创建交互式内容的以代码为中心的环境。尽管开发平台不同,这3种工具最终都将生成相同的结果——Flash内容(SWF文件)。Flash SWF 文件在浏览器上的 Flash 播放器中、浏览器外面的桌面上的 AIR(Adobe Integrated Runtime, Adobe集成运行环境)中或者在移动电话上运行。

关于经典教程

本书是在Adobe产品专家的支持下开发的Adobe图形和出版软件的官方培训系列教材中的一本。精心合理的课程设计,可使你按自己的进度来学习。如果你是Flash的初学者,可以学到使用这款软件的基础知识。如果你是经验丰富的用户,则会发现本书讲解了许多高级特性,包括使用Flash最新版本的提示和技巧。

新特性

本书中的课程提供了使用Flash Professional CS5中的一些新特性和改进的机会,包括以下内容。

·Deco 工具 :它具有一些扩展的富有表现力的选项,可以帮助你轻松、自动地创建复杂的图案和装饰。

·“文本”工具:它已经被彻底革新了,用以支持更复杂的布局,比如多栏和文本绕行。

·“弹簧”:一个物理模拟选项,用于利用反向运动学创建动画。

·“代码片断”:一个新面板,为你的项目提供了准备就绪的ActionScript代码,并且提供了保存以及与其他人共享代码的方式。

·用于外部加载的视频的实时视频预览。

·新的XML文件格式:它展示了Flash文件资源,并使得开发人员团队更容易处理单个文件。

必须具备的知识

在使用本书之前,确保正确地设置了系统必须安装的软件。你应该很好地了解你的计算机及其操作系统。确信你知道如何使用鼠标、标准菜单和命令,以及如何打开、保存和关闭文件。如果你需要复习这些技术,可以参见 Microsoft Windows 或 Apple Mac OS 操作系统提供的印刷文档或在线文档。

安装Flash

必须购买 Adobe Flash Professional CS5 软件,它可以是独立的应用程序或者是 Adobe Creative Suite的一部分。下面的规范是必须满足的最低系统配置。

Windows

·Intel Pentium 4或 AMD Athlon 64 处理器。

·带有Service Pack 2(建议使用Service Pack 3)的Microsoft Windows XP;带有Service Pack 1的Windows Vista Home Premium、Business、Ultimate或Enterprise;或者Windows 7。

·1GB的 RAM。

·3.5GB的可用于安装的硬盘驱动器空间 ;在安装过程中所需的额外空闲空间(不能安装在基于可移动闪盘的存储设备上)。

·1024×768的显示屏(建议使用1280×800)以及16位的视频卡。

·DVD-ROM驱动器。

·多媒体特性所需的 QuickTime 7.6.2 软件。

Mac OS

·多核Intel处理器。

·Mac OS X 版本 10.5.7 或版本 10.6。

·1GB的 RAM。

·4GB的可用于安装的硬盘驱动器空间 ;在安装过程中所需的额外空闲空间(不能安装在使用区分大小写的文件系统的卷上或者基于可移动闪盘的存储设备上)。

·1024×768的显示屏(建议使用1280×800)以及16位的视频卡。

·DVD-ROM驱动器。

·多媒体特性所需的 QuickTime 7.6.2软件。

从 Adobe Flash Professional CS5 应用程序光盘把Flash安装到硬盘驱动器上。不能从DVD运行这个程序。遵照屏幕上的指导操作。

确保在安装软件之前可以访问序列号。可以在注册卡上或者DVD盒的背面找到序列号。

复制课程文件

本书中的课程使用特定的源文件,比如在 Adobe Illustrator 中创建的图像文件、在 Adobe After Effects中创建的视频文件、音频文件以及预先准备的Flash文档。为了完成本书中的课程,必须从本书附带的光盘(位于本书封底内侧)上把这些文件复制到计算机上。可以遵循下面这些步骤复制课程文件。

1.在计算机上,在方便的位置创建一个新文件夹,并把它命名为“FlashProCS5_CIB”,然后执行针对不同操作系统的标准过程。

·Windows。在“资源管理器”中,选择想要在其中创建新文件夹的文件夹或驱动器,并选择“文件”>“新建”>“文件夹”。然后输入新文件夹的名称。

·Mac OS。在 Finder 中,选择“File”>“New Folder”。输入新文件夹的名称,并把该文件夹拖到你想使用的位置。

现在可以把源文件复制到硬盘驱动器上。

2.通过从本书附带光盘上把Lessons文件夹(其中包含名为“Lesson01”、“Lesson02”等文件夹)拖到新的FlashProCS5_CIB文件夹中,将其复制到硬盘驱动器上。

·在开始学习每个课程时,可导航到带有该课程编号的文件夹。在该文件夹中,可以找到所有的资源、示例影片以及完成课程所需的其他项目文件。

·如果计算机上的存储空间有限,可以根据需要单独复制每个课程文件夹,并在学完它之后将其删除。有些课程基于前面的课程;在这些情况下,将会给你提供一个起始项目文件,以便开始下一个课程或项目。如果不需要或者硬盘空间有限,则不必保存任何完成的项目。

复制示例影片和项目

在本书的某些课程中将创建并发布SWF动画文件。Lessons文件夹内的End文件夹(01End、02End等)中的文件是用于每个课程的完成项目的示例。如果你想把正在进行的工作与用于生成示例影片的项目文件作比较,就可以使用这些文件作为参考。最终的项目文件的大小从相对较小到几兆字节不等,因此如果你有充足的存储空间,就可以全部复制它们;或者根据需要只复制用于每个课程的最终的项目文件,然后在学完那个课程之后删除它。

如何使用这些课程

本书中的每个课程都为创建真实项目的一个或多个具体的元素提供了逐步的指导。一些课程基于在前面一些课程中创建的项目,而大多数课程则是独立的。就概念和技能而言,所有课程都是相互关联的,因此学习本书的最佳方式是按顺序学习这些课程。在本书中,对于某些技术和过程,只在前几次执行它们时做了详细解释和说明。

注意:Flash应用程序的许多方面可以受多种技术控制,比如:菜单命令、按钮、拖动和键盘快捷键。在任何给定的过程中只描述了其中的一两种方法,以便你可以学习不同的工作方式,甚至对于你以前完成的任务也是如此。

本书中课程的组织方式也是面向项目的,而不是面向特性的。这意味着(例如)可以在分布在多个课程中(而不仅仅是一章中)的真实设计项目上使用元件(symbol)。

关于作者

Russell Chun 是一位多媒体开发人员,并且是致力于使用 Adobe Flash Professional在We b上形象地表示科学、数据和故事的顾问。他是哥伦比亚大学新闻学研究生院和纽约市立大学新闻学研究生院的客座教授,他在这两所大学讲授交互式新闻学。

Russell编写了本书的上一版,还与人合著了一本关于多媒体新闻学的电子图书。他还在杂志(如 SBS Digital Design 和 Macworld)上广泛发表关于 Flash 的文章。

第1课 Flash CS5快速入门

课程概述

在这一课中,你将学习如何执行以下任务:

·在Flash中创建新文件

·在“属性”检查器中调整“舞台”设置

·向“时间轴”中添加图层

·在“时间轴”中管理关键帧

·在“库”面板中处理导入的图像

·在“舞台”上移动和重新定位对象

·打开和使用面板

·在“工具”面板中选择和使用工具

·预览Flash动画

·保存Flash文件

·访问Flash的在线资源

完成本课的学习需要不到一小时的时间。如果你的硬盘驱动器上还没有Lesson01文件夹,就从本书附带光盘中把该文件夹复制到硬盘驱动器上。

在Flash中,动作发生在“舞台”上,“时间轴”用于组织帧和图层,其他面板允许编辑和控制所创建的内容。

1.1 启动Flash并打开文件

第一次启动Flash时,将会看到一个“欢迎”屏幕,其中带有指向标准文件模板、教程及其他资源的链接。在本课程中,将创建一个简单的动画,显示几张度假快照。你将添加一些照片和一个标题,并且在这个过程中学习在“舞台”上定位元素,以及沿着“时间轴”放置它们。

1.启动 Adobe Flash Professional。在 Windows 中,选择命令“开始”>“所有程序”>AdobeFlash Professional CS5。在 Mac OS 中,在 Applications 文件夹中或者 Dock 中双击 Adobe Flash Professional CS5。

注意:也可以通过双击一个Flash(*.fla)文件启动Flash,比如提供用于显示所完成项目的01End.fla文件。

2.选择“文件”>“打开”。在“打开”对话框中,选择Lesson01/01End文件夹中的01End.swf文件,并单击“打开”按钮预览最终的项目。

此时将会播放一个动画。在播放动画期间,将会逐一显示多张重叠的照片,最后将显示一个标题(如图1.1所示)。图1.1

3.关闭预览窗口。

4.选择“文件”>“新建”。在“新建文档”对话框中,选择“ActionScript 3.0”,然后单击“确定”按钮。

ActionScript 3.0 是 Flash 的脚本语言的最新版本,可以使用它添加交互性。ActionScript 3.0 要求浏览器具有 Flash Player 9 或更高版本。在本课中,将不会使用 ActionScript,但是仍然必须选择你的文件将与哪个版本兼容。

5.选择“文件”>“保存”。把文件命名为“01_workingcopy.fla”,并从“保存类型”下拉菜单中选择“Flash CS5 文档(*.fla)”。把它保存在 01Start 文件夹中。立即保存文件是一种良好的工作习惯,可以确保当应用程序或计算机崩溃时所做的工作不会丢失。应该总是利用.fla扩展名保存Flash文件,以将其标识为Flash源文件。

1.2 了解工作区

Adobe Flash Professional 工作区包括位于屏幕顶部的命令菜单以及多种工具和面板,用于在影片中编辑和添加元素。可以在 Flash 中为动画创建所有的对象,或者可以导入在 Adobe Illustrator、Adobe Photoshop、Adobe After Effects 及其他兼容应用程序中创建的元素。

默认情况下,Flash会显示菜单栏、“时间轴”、“舞台”、“工具”面板、“属性”检查器以及另外几个面板(如图1.2所示)。在Flash中工作时,可以打开、关闭、停放和取消停放面板,以及在屏幕上四处移动面板,以适应你的工作风格或者屏幕分辨率。图1.2

1.2.1 选择新工作区

Flash还提供了几种预置的面板排列方式,它们可能更适合于特定用户的需要。在Flash工作区右上方的下拉菜单中或者在“窗口”>“工作区”之下的顶部菜单中列出了多种工作区排列方式。

1.在Flash工作区的右上方单击“基本功能”按钮,并选择一种新的工作区(如图1.3所示)。图1.3

这将依据多个面板对于特定用户的重要性而重新排列它们并调整它们的大小。例如,“动画”和“设计人员”工作区将把“时间轴”置于顶部,使得可以轻松地频繁访问它。

2.如果四处移动了一些面板,并且希望返回到预先排列的工作区之一的状态,可以选择“窗口”>“工作区”>“重置”和预置工作区的名称。

3.要返回到默认的工作区,可以选择“窗口”>“工作区”>“基本功能”。在本书中,我们将使用“基本功能”工作区。

1.2.2 保存工作区

如果你发现面板的某种排列方式适合于你的工作风格,就可以保存自定义的工作区,以便以后可以返回到它。

1.单击Flash工作区右上角的“工作区”按钮,并选择“新建工作区”(如图1.4所示)。图1.4

出现“新建工作区”对话框。

2.为新工作区输入一个名称,然后单击“确定”按钮(如图1.5所示)。图1.5

这样就保存了面板的当前排列方式。把你的工作区添加到“工作区”下拉菜单中的选项中,可以随时访问它。

1.2.3 关于“舞台”

屏幕中间的大白色矩形称为“舞台”。与剧院的舞台一样,Flash中的“舞台”是播放影片时观众查看的区域。它包含出现在屏幕上的文本、图像和视频。把元素移到“舞台”上或者移到“舞台”之外,将把它们移入或移出视野。可以使用标尺(“视图”>“标尺”)或网格(“视图”>“网格”>“显示网格”)来帮助在“舞台”上定位项目。此外,也可以使用“对齐”面板,以及将在本书的课程中学到的其他工具。

默认情况下,将看到“舞台”外面的灰色区域,可以在其中放置将不会被观众看到的元素。这个灰色区域称为“粘贴板”。为了只查看“舞台”,可选择“视图”>“粘贴板”,取消选择该选项。目前,保持选择该选项。

要缩放“舞台”使之能够完全放在应用程序窗口中,可选择“视图”>“缩放比率”>“符合窗口大小”。也可以从“舞台”上方的弹出式菜单中选择不同的缩放比率视图选项(如图1.6所示)。图1.6

1.2.4 更改“舞台”属性

首先将希望设置“舞台”的颜色和尺寸。“属性”检查器中提供了这些选项,它是位于“舞台”右边的一个垂直面板。

1.在“属性”检查器底部,注意当前“舞台”的尺寸被设置为550×400像素。单击“编辑”按钮(如图1.7所示)。图1.7

将出现“文档设置”对话框。

2.在“宽度”和“高度”方框中,输入新的像素尺寸。为“宽度”输入“800像素”,为“高度”输入“600像素”。

3.单击“背景颜色”按钮,并为“舞台”选择一种新颜色。这里选择深灰色(#333333),如图1.8所示。

4.单击“确定”按钮。“舞台”现在将具有不同的尺寸和颜色。也可以通过直接在“属性”检查器中单击“舞台”按钮,来更改“舞台”的颜色。可以随时更改“舞台”的属性。图1.8

1.3 使用“库”面板

可以通过“属性”检查器右边的选项卡访问“库”面板。“库”面板用于存储和组织在Flash中创建的元件(symbol)以及导入的文件,包括位图、图形、声音文件和视频剪辑。元件是用于动画和交互性的常用图形。

注意:在第3课中将学习关于元件的更多知识。

1.3.1 关于“库”面板“库”面板允许在文件夹中组织库项目,查看文档中的某个项目多久使用一次,以及按类型对项目进行排序。当导入项目到Flash中时,可以把它们直接导入到“舞台”上或者导入到库中。不过,导入到“舞台”上的任何项目也会被添加到库中,就像创建的任何元件一样。然后可以轻松地访问这些项目,把它们再次添加到“舞台”上、编辑它们,或者查看它们的属性。

要显示“库”面板,可选择“窗口”>“库”,或者按下Ctrl+L组合键(Windows)或者Command+L组合键(Mac)。

1.3.2 把项目导入到“库”面板中

通常,将直接利用Flash的绘图工具创建图形并把它们保存为元件,它们都存储在“库”中。有时也导入像JPEG图像或MP3声音文件这样的媒体,它们也存储在“库”中。在本课程中,将把几幅JPEG图像导入到“库”中,以便在动画中使用它们。

1.选择“文件”>“导入”>“导入到库”。在“导入到库”对话框中,选择Lesson01/01Start文件夹中的background.jpg文件,并单击“打开”按钮。

2.Flash 将导入所选的 JPEG 图像,并把它存放在“库”面板中。

3.继续导入01Start文件夹中的photo1.jpg、photo2.jpg和photo3.jpg这些图像。不要导入最后一幅图像photo4.jpg,在本课程后面将使用它。

可以按住Shift键选择多个文件,并同时导入所有这些文件。

4.“库”面板将显示所有导入的JPEG图像,以及它们的文件名和缩略图预览(如图1.9所示)。现在可以在你的Flash文档中使用这些图像。图1.9

1.3.3 从“库”面板中添加项目到“舞台”上

要使用导入的图像,只需把它从“库”面板中拖到“舞台”上即可。

1.如果还没有打开“库”面板,可选择“窗口”>“库”打开它。

2.在“库”面板中选择background.jpg项目。

3.把background.jpg项目拖到“舞台”上,并把它放在“舞台”中大约中央的位置(如图1.10所示)。图1.10

1.4 了解“时间轴”

“时间轴”位于“舞台”下面。像电影一样,Flash文档以帧为单位度量时间。在影片播放时,播放头(如红色垂直线所示)在“时间轴”中向前移过帧。可以为不同的帧更改“舞台”上的内容。要在“舞台”上显示帧的内容,可以在“时间轴”中把播放头移到那个帧上。

在“时间轴”的底部,Flash会指示所选的帧编号、当前帧频(每秒钟播放多少帧),以及迄今为止在影片中所流逝的时间。“时间轴”还包含图层,它有助于在文档中组织作品。可以把图层视作堆叠在彼此上面的多个幻灯软片。每个图层都包含一幅出现在“舞台”上的不同图像,可以在一个图层上绘制和编辑对象,而不会影响另一个图层上的对象。图层按它们出现在“时间轴”中的顺序堆叠在一起,使得位于“时间轴”中底部图层上的对象将出现在“舞台”上的一堆对象的底部。可以隐藏、显示、锁定或解锁图层。每个图层的帧都是独特的,但是可以把它们拖到相同图层上的一个新位置,或者把它们复制、移动到另一个图层上。

1.4.1 重命名图层

一种好的做法是:把内容分隔在不同的图层上,并命名每个图层以指示其内容,使得以后可以轻松地查找所需的图层。

1.在“时间轴”中选择现有的图层。

2.双击图层的名称以重命名它,并输入“background”。

3.在名称框外面单击,应用新名称(如图1.11所示)。图1.11

4.单击锁形图标下面的圆点锁定图层(如图1.12所示)。锁定图层可以防止意外地更改它。图1.12

1.4.2 添加图层

新的Flash文档只包含一个图层,但是可以根据需要添加许多图层。顶部图层中的对象将叠盖住底部图层中的对象。

1.在“时间轴”中选择background图层。

2.选择“插入”>“时间轴”>“图层”(如图1.13所示)。也可以单击“时间轴”下面的“新建图层”按钮。新图层将出现在background图层上面。图1.13

3.双击新图层以重命名它,并输入“photo1”。在名称框外面单击,应用新名称。“时间轴”现在就具有两个图层。background图层包含背景照片,位于它上面的新创建的photo1图层是空的。

4.选择顶部名为photo1的图层。

5.如果“库”面板还没有打开,可选择“窗口”>“库”打开它。

6.从“库”面板中把名为photo1.jpg的库项目拖到“舞台”上。

photo1 JPEG 图像将出现在“舞台”上,并且会叠盖住背景 JPEG 图像(如图 1.14 所示)。图1.14

7.选择“插入”>“时间轴”>“图层”或者单击“时间轴”下面的“新建图层”按钮(),添加第三个图层。

8.把第三个图层重命名为“photo2”(如图1.15所示)。图1.15

处理图层

如果不想要某个图层,可以轻松地删除它,其方法是:选取它,然后单击“时间轴”下面的“删除”按钮(如图1.16所示)。图1.16

如果想重新排列图层,只需简单地单击并拖动任何图层,将其移到图层组中的新位置。

1.4.3 插入帧

迄今为止,在“舞台”上具有一张背景照片以及另一张重叠的照片,但是整个动画只会存在单个帧的时间。要在“时间轴”上创建更多的时间,必须添加额外的帧。

1.在background图层中选择第48帧(如图1.17所示)。图1.17

2.选择“插入”>“时间轴”>“帧”(F5键)。也可以右击(Windows)或者按住Ctrl键并单击(Mac),然后从弹出的上下文菜单中选择“插入帧”。

Flash将在background图层中添加帧,直到所选的位置(第48帧),如图1.18所示。图1.18

3.在photo1图层中选择第48帧。

4.选择“插入”>“时间轴”>“帧”(F5键)。也可以右击/按住Ctrl键并单击,然后从上下文菜单中选择“插入帧”。

Flash将在photo1图层中添加帧,直到所选的位置(第48帧)。

5.在photo2图层中选择第48帧,并向这个图层中插入帧(如图1.19所示)。图1.19

现在就具有3个图层,它们在“时间轴”上全都有48个帧。由于Flash文档的帧频是24帧/秒,因此目前的动画将持续2秒钟的时间。

选取多个帧

就像可以按住Shift键在桌面上选取多个文件一样,也可以按住Shift键在Flash“时间轴”上选取多个帧。如果你具有多个图层,并且希望向所有这些图层中都插入一些帧,则可按住Shift键,并在所有图层中希望添加帧的位置单击。然后选择“插入”>“时间轴”>“帧”。

1.4.4 创建关键帧

关键帧指示“舞台”上的内容中的变化。在“时间轴”上利用圆圈指示关键帧。空心圆圈意味着在特定的时间那个特定的图层中没有任何内容。实心黑色圆圈则意味着在特定的时间那个特定的图层中具有某些内容。例如,background图层在第1帧中包含一个实心关键帧(黑色圆圈)。photo1图层也在它的第1帧中包含一个实心关键帧。这两个图层都包含照片。不过,photo2图层在第1帧中包含一个空心关键帧,这指示它目前是空的。

在photo2图层中,将在你希望显示下一张照片的位置插入一个关键帧。

1.在photo2图层上选择第24帧。在选择一个帧时,Flash将会在“时间轴”下面显示帧编号(如图1.20所示)。图1.20

2.选择“插入”>“时间轴”>“关键帧”(F6键)。

新的关键帧(通过空心圆圈指示)将出现在photo2图层中的第24帧中(如图1.21所示)。图1.21

3.在photo2图层中的第24帧处选择新的关键帧。

4.从库中把photo2.jpg项目拖到“舞台”上。

第24帧中的空心圆圈将变成实心圆圈,指示photo2图层中现在发生了变化。在第24帧处,有一张照片出现在“舞台”上。可以从“时间轴”上面单击红色播放头并把它拖到“偏远位置”,或者显示沿着“时间轴”的任意位置在“舞台”上所发生的事情。你将看到背景照片和photo1沿着整个“时间轴”都会保持在“舞台”上,而photo2则只出现在第24帧处。

理解帧和关键帧是掌握Flash所必需的。一定要理解photo2图层如何包含48个帧,并且带有2个关键帧:一个是位于第1帧处的空白关键帧,另一个是位于第24帧处的实心关键帧(如图1.22所示)。图1.22

1.4.5 移动关键帧

如果你希望延迟或提早显示photo2.jpg,则需要移动关键帧,使其沿着“时间轴”延迟或提早出现。可以沿着“时间轴”轻松地移动任何关键帧,只需选择它然后把它拖到一个新位置即可。

1.选择photo2图层上第24帧中的关键帧。

2.稍微移动鼠标光标,将会看到光标旁边显示了一个方框图标,它指示你可以重新定位关键帧。

3.在photo2图层中,单击并拖动关键帧到第12帧处(如图1.23所示)。图1.23

现在,在“舞台”上的动画中photo2.jpg将提前出现(如图1.24所示)。图1.24

删除关键帧

如果想删除关键帧,不要按下Delete键!这样做将删除“舞台”上的那个关键帧的内容。应该代之以选取关键帧,然后选择“修改”>“时间轴”>“清除关键帧”(Shift+F6组合键)。这样将从“时间轴”中删除关键帧。

1.5 在“时间轴”中组织图层

此时,正在工作的Flash文件只有3个图层:background图层、photo1图层和photo2图层。你将为这个项目添加额外的图层,并且像大多数其他项目一样,最终将不得不管理多个图层。图层文件夹有助于组合相关的图层,使“时间轴”保持为有组织的并且是易于管理的。可以把它视作是为桌面上的相关文档创建文件夹。尽管创建文件夹要花费一些时间,但是往后可以节省时间,因为你将准确知道到哪里寻找特定的图层。

1.5.1 创建图层文件夹

对于这个项目,将继续为额外的照片添加图层,并且将把这些图层存放在图层文件夹中。

1.选择photo2图层,并单击“新建图层”按钮()。

2.把该图层命名为“photo3”。

3.在第24帧处插入一个关键帧。

4.从库中把photo3.jpg拖到“舞台”上。

现在就具有4个图层。上面的3个图层包含来自科尼岛的风景照片,它们出现在不同的关键帧中(如图1.25所示)。图1.25

5.选择photo3图层,并单击“新建文件夹”图标()。

新的图层文件夹将出现在photo3图层上面。

6.把该文件夹命名为“photos”(如图1.26所示)。图1.26

1.5.2 向图层文件夹中添加图层

现在将把各个照片图层添加到photos文件夹中。在安排图层时,记住Flash将会按照各个图层出现在“时间轴”中的顺序来显示它们,上面的图层出现在前面,下面的图层则出现在后面。

1.把photo1图层拖到photos文件夹中。

注意粗线条怎样指示图层的目的地(如图1.27所示)。当把图层放在文件夹内时,图层名称将变成缩进形式。图1.27

2.把photo2图层拖到photos文件夹中。

3.把photo3图层拖到photos文件夹中。

全部3个照片图层现在都应该位于photos文件夹中(如图1.28所示)。图1.28

可以通过单击箭头折叠文件夹,再次单击箭头可展开文件夹。要知道的是,如果删除一个图层文件夹,那么也会删除那个文件夹内的所有图层。

1.5.3 更改“时间轴”的外观

可以调整“时间轴”的外观以适应工作流程。如果想查看更多的图层,可以从“时间轴”右上角的“帧视图”弹出式菜单中选择“较短”。“较短”命令将会减小帧单元格行的高度。“预览”和“关联预览”选项将显示“时间轴”中的关键帧的内容的缩略图版本。

也可以通过选择“很小”、“小”、“标准”、“中”或“大”命令更改帧单元格的宽度(如图1.29所示)。图1.29

1.6 使用“属性”检查器

“属性”检查器允许快速访问你最有可能需要的属性。“属性”检查器中显示的内容依赖于选取的内容。例如,如果没有选取任何内容,“属性”检查器中将包括用于常规Flash文档的选项,包括更改“舞台”颜色和尺寸等;如果选取“舞台”上的某个对象,“属性”检查器将会显示它的x和y坐标,以及它的宽度和高度,还包括其他一些信息。你将使用“属性”检查器移动“舞台”上的照片。

在“舞台”上定位对象

首先利用“属性”检查器移动照片。还将使用“变形”面板旋转照片。

1.在photo1图层中,在“时间轴”的第1帧处选择你拖到“舞台”上的photo1.jpg。蓝色框线指示选取了对象。

2.在“属性”检查器中,为X值输入“50”,为Y值输入“50”,然后按下Enter/Return键应用这些值。也可以简单地在X值和Y值上单击并拖动鼠标光标,来更改照片的位置。照片将移到“舞台”的左边(如图1.30所示)。图1.30

注意:如果没有打开“属性”检查器,可选择“窗口”>“属性”命令,或者按下Ctrl+F3/Command+F3组合键。

在“舞台”上从左上角度量X值和Y值。X开始于0,并向右增加;Y开始于0,并向下增加。导入照片的定位点(registration point)位于左上角。

3.选择“窗口”>“变形”,打开“变形”面板。

4.在“变形”面板中,选择“旋转”,并在“旋转”框中输入“-12”,或者在这个值上单击并拖动来更改旋转角度。然后按下Enter/Return键应用这个值(如图1.31所示)。图1.31

5.选择photo2图层的第12帧。现在单击“舞台”上的photo2.jpg。

6.使用“属性”检查器和“变形”面板以一种有趣的方式定位和旋转第二张照片。使用X=80、Y=50和“旋转”值6,使之与第一张照片产生某种对比效果(如图1.32所示)。图1.32

7.在photo3图层中选择第24帧。现在单击“舞台”上的photo3.jpg。

8.使用“属性”检查器和“变形”面板以一种有趣的方式定位和旋转第三张照片。使用X=120、Y=55和“旋转”值-2,使之与其他照片产生某种对比效果(如图1.33所示)。图1.33

注意:在Flash中缩放或旋转图像时,它们可能呈现出锯齿状。可以通过在“库”面板中双击位图图标来平滑它们。在出现的“位图属性”对话框中,选中“允许平滑”选项。

使用面板

你在Flash中所做的任何事情几乎都会涉及面板。在本课程中,要使用“库”面板、“工具”面板、“属性”检查器、“变形”面板、“历史记录”面板和“时间轴”。在以后的课程中,将使用“动作”面板、“颜色”面板、“动画”面板以及允许控制项目的不同方面的其他面板。由于这些面板是Flash工作区的一个组成部分,因此值得了解如何管理它们。

要在Flash中打开任何面板,可以从“窗口”菜单中选择其名称。在少数几种情况下,可能需要从子菜单中选择面板,比如“窗口”>“其他面板”>“历史记录”(如图1.34所示)。图1.34

默认情况下,“属性”检查器、“库”面板和“工具”面板将一起出现在屏幕右边,“时间轴”和“动画编辑器”出现在下方,而“舞台”则出现在上方。不过,可以把面板移到便于你执行工作的任意位置。

·要从屏幕右边取消停放某个面板,可以把它的选项卡拖到一个新位置。

·要停放某个面板,可以拖动它的选项卡,使其停放在屏幕上的一个新位置。可以把它向上或向下拖动,或者在其他面板之间拖动。蓝色突出标记指示可以停放面板的位置。

·要把一个面板与另一个面板组合在一起,可以把它的选项卡拖到另一个面板的选项卡上。

·要移动一个面板组,可以拖动面板组上面的深灰色条。

也可以选择把大多数面板显示为图标以节省空间,但是仍会保持快速访问能力。单击面板右上方的箭头,可以把面板折叠成图标。再次单击该箭头,即可展开面板。

1.7 使用“工具”面板

“工具”面板—工作区最右边的那个狭长的面板—包含选择工具、绘图和文字工具、着色和编辑工具、导航工具以及工具选项(如图1.35所示)。你将频繁使用“工具”面板,从“选择”工具切换到“文本”工具,再切换到绘图工具。当选择一种工具时,可以检查位于面板底部的选项区域,了解更多选项以及适合于你的任务的其他设置。图1.35

选择和使用工具

当选择一种工具时,“工具”面板底部可用的选项以及“属性”检查器将会发生变化。例如,当选择“矩形”工具时,将会出现“对象绘制”模式和“贴紧至对象”选项。当选择“缩放”工具时,将会出现“放大”和“缩小”选项。“工具”面板中包含有太多的工具,以至于不能同时把它们都显示出来。有些工具在“工具”面板中被分成组;在一个组中只会显示上一次选择的工具。工具的按钮右下角的小三角形指示在这个组中还有其他工具。单击并按住可见工具的图标,即可查看其他可用的工具,然后从弹出式菜单中选择一种工具。

你将使用“文本”工具向动画中添加一个标题。

1.在“时间轴”中选择最上面的图层,然后单击“新建图层”按钮。

2.把新图层命名为“text”。

3.锁定它下面的其他图层,使得你不会意外地把任何内容移入它们中。

4.在“时间轴”中,把播放头移到第36帧,并在text图层中选择第36帧。

5.选择“插入”>“时间轴”>“关键帧”(F6键),在text图层中的第36帧处插入一个新的关键帧(如图1.36所示)。图1.36

在这个图层中将创建出现在第36帧处的文本。

6.在“工具”面板中,选择“文本”工具,大写字母T指示该工具(如图1.37所示)。图1.37

7.在“属性”检查器中,从下拉菜单中选择“传统文本”。然后在下面出现的下拉菜单中选择“静态文本”。“传统文本”是用于添加简单文本的模式,它们不需要诸如多栏或环绕其他对象之类的高级选项。“静态文本”是用于显示目的的任何文本的选项。“动态文本”和“输入文本”是用于更具交互性目的的特殊文本选项,可以利用ActionScript控制它们。在第7课中将学习更多高级的文本选项。

8.在“属性”检查器中选择字体和大小。你的计算机可能没有与本课程中所显示的字体完全相同的字体,但是选择一种外观上接近的字体即可。

9.在“属性”检查器中单击彩色方格,选择一种文本颜色。可以单击右上角的色轮,访问 Adobe Color Picker(拾色器),或者可以更改右上角的Alpha百分比,它确定了透明度(如图1.38所示)。图1.38

10.确保选择了标题图层的第36帧中的空白关键帧,然后在“舞台”上想开始添加文本的地方单击。你可以单击一次并且开始输入文本,也可以单击并拖动以定义文本框的宽度。

11.输入一个标题,用于描述在“舞台”上显示的照片(如图1.39所示)。图1.39

12.通过选取“选择”工具()退出“文本”工具。

13.如果愿意,可以使用“属性”检查器或“变形”面板在“舞台”上重新定位或旋转文本(如图1.40所示)。图1.40

14.现在就完成了用于本课程的动画!可以把你的文件与最终的文件01End.fla作比较。“工具”面板概述“工具”面板包含选择工具、绘图和着色工具以及导航工具。“工具”面板中的选项区域允许修改所选的工具。右边展开的菜单显示了隐藏的工具。右边的展开菜单上的黑色方格指示出现在“工具”面板中的默认工具。圆括号中的单个大写字母指示用于选择这些工具的键盘快捷键。注意如何根据类似的功能把工具组织在一起(如图1.41所示)。图1.41

1.8 在Flash中撤消执行的步骤

在理想世界中,所有的一切都是依计划行事。但是,有时你需要回退一步或两步,并重新开始。在Flash中,可以使用“撤消”命令或“历史记录”面板撤消执行的步骤。

要在Flash中撤消单个步骤,可选择“编辑”>“撤消”,或者按下Ctrl+Z/Command+Z组合键。要重做已经撤消的步骤,可选择“编辑”>“重做”。

要在Flash中撤消多个步骤,最容易的方法是使用“历史记录”面板,它会显示自从你打开当前文档起执行的最后100个步骤的列表。关闭文档就会清除其历史记录。要访问“历史记录”面板,可选择“窗口”>“其他面板”>“历史记录”。

例如,如果你对最近添加的文本不满意,就可以撤消所做的工作,并把Flash文档返回到以前的状态。

1.选择“编辑”>“撤消”,撤消你执行的最后一个动作。可以多次选择“撤消”命令,回退“历史记录”面板中列出的许多步骤。可以选择“编辑”>“首选参数”,更改“撤消”命令的最大数量。

2.选择“窗口”>“其他面板”>“历史记录”,打开“历史记录”面板(如图1.42所示)。图1.42

3.把“历史记录”面板的滑块向上拖动到犯错误之前的那个步骤。在“历史记录”面板中那个位置以下的步骤将会灰显,并将从项目中被删除。要添加回某个步骤,可以向下移回滑块(如图1.43所示)。图1.43

注意:如果在“历史记录”面板中删除一些步骤,然后再执行另外的步骤,那么删除的步骤将不再可用。

1.9 预览影片

在处理项目时,一种好的做法是频繁预览它,以确保实现了想要的效果。要快速查看动画或影片在观众眼里是什么样子的,可以选择“控制”>“测试影片”>“在 Flash Professional 中”。也可以按下Ctrl+Enter或Command+Return组合键预览影片。

1.选择“控制”>“测试影片”>“在 Flash Professional 中”。

Flash将在与FLA文件相同的位置创建一个SWF文件,然后在单独的窗口中打开并播放该文件(如图1.44所示)。SWF文件是将上传到Web的压缩过的、发布的文件。

Flash会在这种预览模式下自动循环播放影片。如果你不想让影片循环播放,可选择“控制”>“循环”,取消选中该选项。

2.关闭预览窗口。

3.利用“选择”工具在“舞台”上单击。注意在“属性”检查器底部,“SWF历史记录”显示并保存了最近发布的SWF文件的文件大小、日期和时间的日志(如图1.45所示),这有助于跟踪你的工作进度和文件的修订情况。图1.44图1.45

1.10 发布影片

当你准备与其他人共享影片时,可以从Flash中发布它。对于大多数项目,Flash将创建一个HTML文件和一个SWF文件,其中SWF文件是最终的Flash影片,而HTML文件则指示Web浏览器将如何显示SWF文件。你需要把这两个文件都上传到Web服务器上的同一个文件夹中。在上传影片之后总是要测试它,以确定它会正确地工作。

注意:在第10课中将学习关于发布选项的更多知识。

1.选择“文件”>“发布设置”。

2.单击“格式”选项卡。

3.选中“Flash(.swf)”和“HTML(.html)”这两个复选框(如图1.46所示)。图1.46

4.单击HTML选项卡。

5.取消选中“循环”选项(如图1.47所示)。

6.单击“发布设置”对话框底部的“发布”按钮。

7.单击“确定”按钮,关闭对话框。

8.导航到Lesson01/01Start文件夹,查看Flash创建的文件(如图1.48所示)。图1.47图1.48

1.11 保存影片

虽然你已经将Flash影片保存为FLA文件,但是也可以选择以一种未压缩的格式(称为XFL格式)保存影片。XFL格式实际上是文件的文件夹,而不是单个文档。XFL文件格式将展示Flash影片的内容,使得其他开发人员或动画师可以轻松地编辑你的文件或者管理它的资源,而无需在Flash应用程序中打开影片。例如,“库”面板中所有导入的照片都会出现在XFL格式内的一个LIBRARY文件夹中。可以编辑库照片或者用新照片交换它们。Flash将自动在影片中进行这些替换操作。

1.选择“文件”>“另存为”。

2.把文件命名为“01_workingcopy.xfl”,并选择“Flash CS5未压缩文档 (*.xfl)”,如图1.49所示。然后单击“保存”按钮。图1.49

3.选择“文件”>“关闭”,关闭Flash文档。

修改XFL文档

在这一步中,你将修改XFL文档的LIBRARY文件夹,以更改Flash影片。

1.打开01_workingcopy文件夹内的LIBRARY文件夹。

该文件夹包含你导入到Flash影片中的所有照片,如图1.50所示。图1.50

2.选择photo3.jpg文件并删除它。

3.从01Start文件夹中拖动photo4.jpg文件,并把它移到01_workingcopy文件夹内的LIBRARY文件夹中。然后把photo4.jpg重命名为“photo3.jpg”,如图1.51所示。图1.51

用新图像换出LIBRARY文件夹中的photo3.jpg将自动在Flash影片中执行相应的更改。

4.要打开XFL文档,可以双击.xfl文件。

此时,就用执行替换的photo4.jpg图像交换了“时间轴”的关键帧24中的最后一幅图像,如图1.52所示。图1.52

1.12 查找关于使用Flash的资源

为了获取关于使用Flash面板、工具及其他应用程序特性的完整、最新的信息,请访问Adobe网站。选择“帮助”>“Flash帮助”,将连接到Adobe社区帮助网站,可以在那里搜索Flash帮助和支持文档,以及与Flash用户相关的其他网站。也可以缩小搜索结果的范围,只查看Adobe帮助和支持文档(如图1.53所示)。图1.53

注意:当你启动应用程序时,如果Flash检测到你没有连接到Internet,那么选择“帮助”>“Flash帮助”将会打开与Flash一起安装的HTML帮助页面。为了获取更多最新的信息,可在线查看帮助文件,或者下载当前PDF文档用于参考。

1.13 检查更新

Adobe 会定期提供对软件的更新。可以通过 Adobe Application Manager轻松地获得这些更新,只要你具有活动的Internet连接即可。

1.在 Flash 中,选择“帮助”>“更新”(如图 1.54 所示)。Adobe Application Manager 将会自动检查可供你的Adobe软件使用的更新。

2.在 Adobe Application Manager 对话框中,选择你想安装的更新,然后单击“下载并安装更新”安装它们。图1.54

注意:要设置将来更新的首选项,可以选择“帮助”>“更新”,然后在Adobe Application Manager 对话框中单击“首选项”。选择你想让 Adobe Application Manager多久检查一次更新、为哪些应用程序检查更新,以及是否自动下载它们。然后单击“确定”按钮接受新设置。复习复习题

1.什么是“舞台”?

2.帧与关键帧之间的区别是什么?

3.什么是隐藏的工具,怎样才能访问它们?

4.指出在Flash中用于撤消步骤的两种方法,并描述它们。

5.如何查找关于Flash的问题的答案?复习题答案

1.在Flash播放器或Web浏览器中播放影片时,“舞台”是观众看到的区域。它包含出现在屏幕上的文本、图像和视频。存储在“舞台”外面的粘贴板上的对象不会出现在影片中。

2.帧是“时间轴”上的时间度量。在“时间轴”上利用圆圈表示关键帧,并且指示“舞台”上的内容中的变化。

3.由于在“工具”面板中同时有太多的工具要显示,就把一些工具组合在一起,并且只显示该组中的一种工具(最近使用的工具就是显示的工具)。在一些工具图标上出现了小三角形,指示有隐藏的工具可用。要选择隐藏的工具,可以单击并按住显示的工具的工具图标,然后从菜单中选择隐藏的工具。

4.在Flash中可以使用“撤消”命令或者“历史记录”面板撤消步骤。要一次撤消一个步骤,可以选择“编辑”>“撤消”。要一次撤消多个步骤,可以在“历史记录”面板中向上拖动滑块。

5.选择“帮助”>“Flash 帮助”,浏览或搜索关于使用 Flash CS5 和 ActionScript3.0的Flash帮助信息。选择“帮助”>“Flash技术支持中心”或者访问www.adobe.com,查看针对Flash用户的教程、提示及其他资源。

第2课 处理图形

课程概述

在这一课中,你将学习如何执行以下任务:

·绘制矩形、椭圆及其他形状

·了解各种绘制模式之间的区别

·修改所绘制对象的形状、颜色和大小

·了解填充和笔触设置

·制作对称的和装饰性的图案

·创建和编辑曲线

·应用渐变和透明度

·组合元素

·创建和编辑文本

完成本课程的学习需要大约90分钟的时间。如果需要,可以从硬盘驱动器上删除前一课的文件夹,并把Lesson02文件夹复制其上。

在Flash中可以使用矩形、椭圆和线条创建有趣的、复杂的图形和插图。把它们与渐变、透明度、文本和滤镜结合起来,甚至可以创建更精彩的效果。

2.1 开始

首先查看完成的影片,看看你将在本课程中创建的动画。

1.双击Lesson02/02End文件夹中的02End.swf文件,查看最终的项目(如图2.1所示)。图2.1

这个项目是用于横幅广告的简单的静态插图。这幅插图用于一家虚拟的公司 Garden Court Cafe,它正在为其商店和咖啡做宣传。在本课程中,将绘制一些形状,修改它们,以及学习组合简单的元素来创建更复杂的画面。你这时还不会创建任何动画,毕竟,在能够跑之前必须先学会走路!并且,学习创建和修改图形是在制作任何Flash动画之前的一个重要步骤。

2.选择“文件”>“新建”。在“新建文档”对话框中,选择“ActionScript 3.0”。

3.在“属性”检查器中,把“舞台”的大小设置为700像素×200像素,并把“舞台”的颜色设置为浅褐色(#CC9966)。

注意:在Flash、HTML以及许多其他的应用程序中,每种颜色都具有一个十六进制值。淡灰色是#999999;白色是#FFFFFF;黑色是#000000。你可能发现记住最常用的颜色的值是很方便的。

4.选择“文件”>“保存”。把文件命名为“02_workingcopy.fla”,并把它保存在02Start文件夹中。立即保存文件是一种良好的工作习惯,可以确保当应用程序或计算机崩溃时所做的工作不会丢失。

2.2 了解笔触和填充

Flash中的每幅图形都开始于一种形状。形状由两个部分组成:填充(fill)和笔触(stroke),前者是形状里面的部分,后者是形状的轮廓线。如果你总是可以记住这两个组成部分,就可以比较顺利地创建美观、复杂的画面。

填充和笔触是彼此独立的,因此可以轻松地修改或删除其中一个部分,而不会影响另一个部分。例如,可以利用蓝色填充和红色笔触创建一个矩形,以后可以把填充更改为紫色,并完全删除红色笔触,最终得到的是一个没有轮廓线的紫色矩形。也可以独立地移动填充或笔触,因此如果你想移动整个形状,就要确保同时选取它的填充和笔触。

2.3 创建形状

Flash包括多种绘图工具,它们在不同的绘制模式下工作。许多创建工作都开始于像矩形和椭圆这样的简单形状,因此能够熟练地绘制它们、修改它们的外观以及应用填充和笔触是很重要的。

首先将绘制一只咖啡杯。

2.3.1 使用“矩形”工具

咖啡杯实质上是一个圆柱体,它是一个顶部和底部都是椭圆的矩形。你首先将绘制矩形主体。把复杂的对象分解成它们的各个组成部分是有用的,这样就可以更容易地绘制它们。

1.从“工具”面板中选择“矩形”工具()。确保没有选择“对象绘制”模式图标()。

2.从“工具”面板底部选择笔触颜色()和填充颜色()。为笔触选择#663300(深褐色),为填充选择#CC6600(浅褐色)。

3.在“舞台”上绘制一个矩形,其高度比宽度稍大一点(如图2.2所示)。将在第6步中指定这个矩形的准确大小和位置。图2.2

4.选取“选择”工具。

5.在整个矩形周围拖动“选择”工具,选取它的笔触和填充。当选取一种形状时,Flash将会用白色虚线显示它(如图2.3所示)。也可以双击一种形状,Flash将同时选取该形状的笔触和填充。图2.3

6.在“属性”检查器中,为宽度输入“130”,为高度输入“150”。然后按下Enter/Return键应用这些值(如图2.4所示)。图2.4

2.3.2 使用“椭圆”工具

现在将创建咖啡杯顶部的杯口和圆形的底部。

1.在“工具”面板中,在“矩形”工具上单击并按住鼠标光标,访问隐藏的工具。然后选择“椭圆”工具(如图2.5所示)。图2.5

2.确保启用了“贴紧至对象”选项()。该选项将强制你在“舞台”上绘制的形状相互贴紧,以确保线条和角相互连接。

3.在矩形内单击并拖动它,在矩形内创建一个椭圆。“贴紧至对象”选项使得椭圆的边连接到矩形的边,如图2.6所示。图2.6

4.在矩形底部附近绘制另一个椭圆,如图2.7所示。图2.7

注意:Flash将对矩形和椭圆应用默认的填充和笔触,它们是由上一次应用的填充和笔触决定的。

2.4 进行选择

要修改对象,必须先能够选择它的不同部分。在Flash中,可以使用“选择”、“部分选取”和“套索”这些工具进行选择。通常,使用“选择”工具选取整个对象或者对象的一个选区。“部分选取”工具允许选择对象中特定的点或线。利用“套索”工具,可以绘制任意的选区。

选择笔触和填充

现在将使矩形和椭圆看起来更像咖啡杯。你将使用“选择”工具删除不想要的笔触和填充。

1.在“工具”面板中,选取“选择”工具()。

2.单击顶部的椭圆上面的填充以选取它。

顶部的椭圆上面的形状将高亮显示,如图2.8所示。图2.8

3.按下Delete键。

这样就删除了所选的形状,如图2.9所示。图2.9

4.选取顶部的椭圆上面的全部三条线段,并按下Delete键删除它们。

这样就删除了各个笔触,只保留了连接到矩形的顶部的椭圆,如图2.10所示。图2.10

5.现在选择底部的椭圆下面的填充和笔触,以及杯底里面的圆弧,并按下Delete键。

余下的形状看上去就像是一个圆柱体,如图2.11所示。图2.11

注意:在进行选择时可以按住Shift键,以同时选择多个填充或笔触。

2.5 编辑形状

在Flash中绘图时,通常将开始于“矩形”或“椭圆”工具。但是要创建更复杂的图形,将使用其他工具修改这些基本形状。“任意变形”工具、“复制”和“粘贴”命令以及“选择”工具可以帮助把普通的圆柱体变形成咖啡杯。

2.5.1 使用“任意变形”工具

如果使咖啡杯的底边缘变窄一些,那么咖啡杯看起来将更逼真。你可以使用“任意变形”工具更改它的总体形状。利用“任意变形”工具,可以更改对象的比例、旋转或斜度,或者通过在边界框周围拖动控制点来扭曲对象。

1.在“工具”面板中,选择“任意变形”工具。

2.在“舞台”上围绕圆柱体拖动“任意变形”工具以选取它。

圆柱体上将出现变形句柄,如图2.12所示。图2.12

3.在向里拖动其中一个角时按下Ctrl+Shift/Command+Shift组合键。按下这些键允许同时把两个角移动相同的距离。

4.在形状外面单击,取消选择它。

圆柱体的底部将变窄,而顶部比较宽。它现在看起来更像是一只咖啡杯,如图2.13所示。图2.13

注意:如果在移动某个控制点时按下Alt键或Option键,将相对于其变形点(通过圆圈图标表示)缩放对象。可以在对象内的任意位置或者甚至是对象外面拖动变形点。按下Shift键可以约束对象比例。按下Ctrl键/Command键可以从单个控制点使对象变形。

2.5.2 使用“复制”和“粘贴”命令

使用“复制”和“粘贴”命令可以轻松地在“舞台”上复制形状。你将通过复制和粘贴咖啡杯的上边缘来制作咖啡的液面。

1.按住Shift键,并选择咖啡杯开口的上圆弧和下圆弧,如图2.14所示。图2.14

2.选择“编辑”>“复制”(Ctrl+C/Command+C组合键),复制椭圆顶部的笔触。

3.选择“编辑”>“粘贴到中心位置”(Ctrl+V/Command+V组合键)。

在“舞台”上就会出现复制的椭圆。

4.在“工具”面板中,选择“任意变形”工具。

在椭圆上将出现变形句柄。

5.在向里拖动角时按下Shift键和Alt/Option键,使椭圆缩小大约10%,如图2.15所示。按下Shift键允许一致地更改形状,使得椭圆维持其表面的比率。按下Alt/Option键将从其变形点更改形状。图2.15

6.选取“选择”工具。

7.把椭圆拖到咖啡杯的边缘上,使之叠盖住前边缘,如图2.16所示。图2.16

8.在选区外面单击,取消选择椭圆。

9.选取较小的椭圆的下面部分并删除它。现在咖啡杯中就好像装有咖啡,如图2.17所示!图2.17

2.5.3 更改形状轮廓

利用“选择”工具,可以推、拉线条和角,更改任何形状的整体轮廓,它是处理形状的快速、直观的方式。

1.在“工具”面板中,选取“选择”工具。

2.移动鼠标光标,使之接近于咖啡杯的某一个边缘。

在光标附近将出现一条曲线,指示可以更改笔触的曲度。

3.单击并向外拖动笔触。

咖啡杯的边缘将弯曲,使得咖啡杯稍微有点凸出,如图2.18所示。图2.18

4.单击并稍微向外拖动咖啡杯的另一个边缘。

咖啡杯现在就具有更圆滑的形状。

注意:在拖动形状的边缘时按住Alt/Option键可以添加新的角。

2.5.4 更改笔触和填充

如果你想更改任何笔触或填充的属性,可以使用“墨水瓶”工具或“颜料桶”工具。

1.在“工具”面板中,选择“颜料桶”工具()。

2.在“属性”检查器中,选择一种较深的褐色(#663333),如图2.19所示。图2.19

3.单击杯子里面咖啡的液面,如图2.20所示。图2.20

顶部椭圆的填充将变成较深的褐色。

注意:如果“颜料桶”工具改变了周围区域中的填充,那么可能就有较小的间隙允许填充溢出。封闭间隙,或者在“工具”面板底部为“颜料桶”工具选择封闭不同的间隙大小。

4.在“工具”面板中,选择隐藏在“颜料桶”工具下面的“墨水瓶”工具()。

5.在“属性”检查器中,选择一种较深的褐色(#330000)。

6.单击咖啡液面上面的顶部笔触。

咖啡液面周围的笔触将变成较深的褐色。

注意:也可以选择笔触或填充,并在“属性”检查器中更改其颜色,而无需使用“颜料桶”或“墨水瓶”工具。

Flash绘制模式

Flash提供了3种绘制模式,它们决定了“舞台”上的对象彼此之间如何交互,以及你能够怎样编辑它们。默认情况下,Flash使用合并绘制模式,但是你可以启用对象绘制模式,或者使用“基本矩形”或“基本椭圆”工具,以使用基本绘制模式。

合并绘制模式

在这种模式下,Flash将会合并所绘制的重叠的形状(比如矩形和椭圆),使得多种形状看起来就像是单个形状一样。如果移动或删除已经与另一种形状合并的形状,就会永久删除重叠的部分(如图2.21所示)。图2.21

对象绘制模式

在这种模式下,Flash不会合并绘制的对象,它们仍将泾渭分明,甚至当它们重叠时也是如此。要启用对象绘制模式,可选择你想使用的工具,然后在“工具”面板的选项区域中单击“对象绘制”图标。

要把对象转换为形状(合并绘制模式),可选取它,并按下Ctrl+B/Command+B组合键。要把形状转换为对象(对象绘制模式),可选取它,并选择“修改”>“合并对象”>“联合”(如图2.22所示)。图2.22

基本绘制模式

当你使用“基本矩形”工具或“基本椭圆”工具时, Flash将把形状绘制为单独的对象。不过,与普通对象不同的是,可以使用“属性”检查器轻松地修改基本矩形的边角半径,以及修改基本椭圆的开始角度、结束角度和内径(如图2.23所示)图2.23

2.6 使用渐变填充和位图填充

填充(fill)是所绘制对象的里面部分。目前,你具有纯褐色填充,但是也可以应用渐变或位图图像(比如JPEG文件)作为填充,或者可以指定对象根本没有填充。

在渐变(gradient)中,一种颜色将逐渐变成另一种颜色。Flash可以创建线性(linear)渐变或径向(radical)渐变,前者沿着水平方向、垂直方向或对角线方向改变颜色;后者从一个中心焦点向外改变颜色。

对于本课程,你将使用线性渐变填充给咖啡杯添加三维效果。为了提供泡沫顶层的外观,你将导入一幅位图图像用作填充。你可以在“颜色”面板中导入位图文件。

2.6.1 创建渐变变换

你将在“颜色”面板中定义你想在渐变中使用的颜色。默认情况下,线性渐变将把一种颜色转变成另一种颜色,但是在Flash中,在渐变中可以使用多达15种颜色变换。颜色指针(color pointer)决定了渐变在什么地方从一种颜色变为另一种颜色。可以在“颜色”面板中的渐变定义条下面添加颜色指针,以添加颜色变换。

你将在咖啡杯的表面创建从褐色转变成白色再转变成深褐色的渐变效果,以给它提供圆滑的外观。

1.选取“选择”工具。选取表示咖啡杯正面的填充,如图2.24所示。图2.24

2.打开“颜色”面板(选择“窗口”>“颜色”)。在“颜色”面板中,单击“填充颜色”图标并选择“线性渐变”,如图2.25所示。将从左到右利用一种颜色渐变填充咖啡杯的正面,如图2.26所示。

3.在“颜色”面板中选择位于颜色渐变左边的颜色指针(当选择它时,它上面的三角形将变成黑色),然后在十六进制值框中输入“FFCCCC”。然后按下Enter/Return键,应用该颜色。也可以从拾色器中选择一种颜色,或者双击颜色指针从色板中选择一种颜色。图2.25图2.26

4.选择最右边的颜色指针,然后为深褐色输入“B86241”,并按下Enter/Return键,应用该颜色,如图2.27所示。图2.27

咖啡杯的渐变填充将在其表面上从浅褐色逐渐变为深褐色。

5.在渐变定义条的下面单击,创建新的颜色指针,如图2.28所示。图2.28

6.把新的颜色指针拖到渐变的中间位置。

注意:要从渐变定义条中删除颜色指针,只需把它拖离渐变定义条即可。

7.选择新的颜色指针,然后在十六进制值框中输入“FFFFFF”,为新颜色指定白色,如图2.29所示。然后按下Enter/Return键,应用该颜色。图2.29

咖啡杯的渐变填充将逐渐从浅褐色变为白色再变为深褐色,如图2.30所示。图2.30

8.单击“舞台”上别的位置,取消选择“舞台”上的填充。选择“颜料桶”工具,并且确保取消选择“工具”面板底部的“锁定填充”选项()。“锁定填充”选项将把当前渐变锁定到应用它的第一个形状,使得后续的形状扩展渐变。你将希望为咖啡杯的背面应用一种新的渐变,因此应该取消选择“锁定填充”选项。

9.利用“颜料桶”工具选取咖啡杯的背面。

这就会对咖啡杯的背面应用渐变,如图2.31所示。图2.31

2.6.2 使用“渐变变形”工具

除了为渐变选择颜色和定位颜色指针之外,还可以调整渐变填充的大小、方向或中心。为了挤压咖啡杯正面中的渐变以及颠倒背面中的渐变的方向,将使用“渐变变形”工具。

1.选择“渐变变形”工具(“渐变变形”工具与“任意变形”工具组织在一起),如图2.32所示。图2.32

2.单击咖啡杯的正面,将显示变形句柄。

3.向里拖动边界框的边线上的方块句柄压紧渐变。拖动中心圆圈把渐变向左移动,使得把白色亮区定位于中心稍稍偏左一点,如图2.33所示。

4.现在单击咖啡杯的背面,将显示变形句柄。

5.拖动边界框角上的圆形句柄把渐变旋转180度,使得渐变从左边的深褐色渐渐减弱到白色再到右边的浅褐色,如图2.34所示。图2.33图2.34

注意:移动中心圆圈将改变渐变的中心;拖动带箭头的圆圈可以旋转渐变;拖动方块中的箭头可以拉伸渐变。

咖啡杯现在看上去更逼真,因为阴影和亮区使得正面看上去是凸起的,而背面则是凹陷的。

2.6.3 添加位图填充

你将通过添加一层泡沫,使这个咖啡杯看上去更奇特一点。这里将使用一幅泡沫的JPEG图像作为位图填充。

1.利用“选择”工具选取咖啡顶部的液面。

2.打开“颜色”面板(选择“窗口”>“颜色”)。

3.选择“位图填充”,如图2.35所示。图2.35

4.在“导入到库”对话框中,导航到Lesson02/02Start文件夹中的coffeecream.jpg文件。

5.选择coffeecream.jpg文件,并单击“打开”按钮。

这就会用泡沫图像填充咖啡顶部的液面,如图2.36所示。这样咖啡杯就制作完成了!把包含完整绘图的图层命名为coffee。剩余的全部工作是添加一些气泡和热气。图2.36

注意:也可以使用“渐变变形”工具改变应用位图填充的方式。

2.6.4 组合对象

既然你已经完成了咖啡杯的创建,那么就可以使之变成单个组。组把形状与其他图形的集合保存在一起以保持它们的完整性。在组合时,可以作为一个单元移动咖啡杯,而无需担心它可能与底层的形状合并。可以使用组来组织你的绘图。

1.选取“选择”工具。

2.选取组成咖啡杯的所有形状,如图2.37所示。图2.37

3.选择“修改”>“组合”。

咖啡杯现在就是单个组。在选取它时,蓝色外框线指示其边界框,如图2.38所示。图2.38

4.如果你想更改咖啡杯的任何部分,可以双击组以编辑它。

注意:“舞台”上所有其他的元素都会变暗淡,并且“舞台”上面的顶部水平条将显示“场景1组”,如图2.39所示。这指示你现在位于特定的组中,并且可以编辑其内容。图2.39

5.单击“舞台”顶部水平条中的“场景1”图标,或者双击“舞台”上的空白部分,返回到主场景。

注意:要把组改回它的成分形状,可以选择“修改”>“取消组合”(Shift+Ctrl+G组合键(Windows)或者Shift+Command+G组合键(Mac))。

2.7 制作图案和装饰

可以利用 Deco 工具制作复杂的图案,该工具在 Flash Professional CS5 中具有许多新刷子。它提供了多个选项,允许快速、容易地构建对称的设计、网格或者枝繁叶茂的效果。在本课中,将使用Deco工具创建对称的起泡形状和虚线,给横幅广告提供更多的活力,同时提供花式装饰使边缘美观。

2.7.1 创建图案的元件

在可以使用Deco工具的对称刷子之前,必须创建一个元件,用作将重复使用的基本形状。在第3课中将学习关于元件的更多知识。

1.从顶部的菜单中,选择“插入”>“新建元件”。

2.在出现的“创建新元件”对话框中,为名称输入“line”,并选择“图形类型”的元件。然后单击“确定”按钮,如图2.40所示。图2.40

3.Flash 将立即把你带到“元件编辑”模式。注意“舞台”上方的顶部水平条,它指示你目前正在编辑名为“line”的元件(如图2.41所示)。现在将为该元件绘制线条。图2.41

4.选择“线条”工具()。

5.为笔触选择褐色,并为“笔触样式”选择“极细线”(如图2.42所示)。

不管缩放的程度如何,极细线笔触都会维持一致的粗细度。

6.在按住Shift键的同时,绘制一根穿过“舞台”中心的线条,其中将会看到一个十字交叉线,表示元件的中心点(如图2.43所示)。确保线条的高度大约为25像素。

7.在“舞台”上方的水平条上单击“场景1”,返回到主“时间轴”。这样就创建了名为“line”的新元件,并将其存储在“库”中,以便以后使用(如图2.44所示)。图2.42图2.43图2.44

2.7.2 使用 Deco 工具的“对称刷子”

你将利用Deco工具创建一种星星形状。

1.在“时间轴”上,插入一个新图层,并把它命名为“coffee aroma”。你将在这个图层中绘制对称形状。

2.在“工具”面板中,选择Deco工具()。

3.在“属性”检查器中,选择“对称刷子”选项(如图2.45所示)。

4.单击“模块”旁边的“编辑”按钮,更改将重复的形状。

5.在“选择元件”对话框中,选择line元件(如图2.46所示)。然后单击“确定”按钮。图2.45图2.46

6.在“属性”检查器中的“高级选项”下面,选择“旋转”(如图2.47所示)。图2.47

利用这些Deco工具选项,可以创建line元件的重复图案,它是围绕某个点对称的。“舞台”上出现的绿色辅助线显示了确定元件重复频率的中心点、主轴线和次轴线。

7.在“舞台”上单击以放置元件,并在保持按下鼠标键的情况下在绿色辅助线周围移动它,直至得到想要的放射状图案。初始线条应该是垂直的(如图2.48所示)。

8.把绿色次轴线拖到离主轴线更近的位置,以增加重复次数(如图2.49所示)。

9.完成后,选取“选择”工具,退出Deco工具。

得到的图案是一个组,其中包含许多line元件(如图2.50所示)。图2.48图2.49图2.50

2.7.3 对齐对象

现在将为放射线创建中心气泡。该气泡应该正好位于放射线的中心,为此,可以转向“对齐”面板。你可能猜得到,“对齐”面板可以把所选的许多对象进行水平或垂直对齐。它还可以均匀地分布对象。

1.选择“椭圆”工具。

2.为笔触选择褐色,并且选择不进行填充。为了选择不进行填充,可以选择有一条对角红线穿过它的颜色框,如图2.51所示。为“笔触样式”选择“极细线”。图2.51

3.选择 coffee aroma 图层。然后在按住 Shift 键的同时,在“舞台”上绘制一个小圆形。

4.现在选取“选择”工具。

5.在星星形状的组和最近绘制的椭圆上拖动“选择”工具。你可能不得不锁定下面的图层,以防意外地选择下面图层中的形状(如图2.52所示)。图2.52

6.打开“对齐”面板(选择“窗口”>“对齐”)。

7.单击“水平中齐”按钮。

星星形状的组和椭圆将变成水平对齐(如图2.53所示)。

8.单击“垂直中齐”按钮。

星星形状的组和椭圆将变成垂直对齐(如图2.54所示)。图2.53图2.54

2.7.4 分离与组合对象

你使用了Deco工具创建放射线的组,并且使用了“对齐”面板使气泡与线条居中对齐。现在,你将把泡沫形状组合进单个实体中。为此,将分离放射线的组,并把它们与椭圆重新组合起来。

1.利用“选择”工具,拖动选择整个星星形状,使它选取所有的线条和圆形。

2.选择“修改”>“分离”。

线条的组将分解为它的各个组成部分,并且变成line元件的集合(如图2.55所示)。图2.55

3.再一次选择“修改”>“分离”。

line元件的集合将分解为它的各个组成部分,并且变成笔触的集合(如图2.56所示)。图2.56

4.选择“修改”>“组合”。

线条和中心圆圈将变成一个组(如图2.57所示)。图2.57

5.复制并粘贴这个组,在咖啡杯上方创建多个气泡。使用“变形”工具把气泡缩放成不同的大小(如图2.58所示)。图2.58

2.7.5 使用 Deco 工具的“装饰性刷子”

现在将探索Deco工具的“装饰性刷子”,它用于创建装饰性边界和复杂的线条图案。

1.在“工具”面板中,选择Deco工具()。

2.在“属性”检查器中,选择“装饰性刷子”选项(如图2.59所示)。

3.在“高级选项”中,选择“虚线”(如图2.60所示)。为“图案颜色”选择一种深褐色,并保留“图案大小”和“图案宽度”的默认值。图2.59图2.60

4.在“舞台”上,在咖啡杯上方绘制几条曲线。“装饰性刷子”创建的虚线可以给你的咖啡杯提供更多一点的活力(如图2.61所示)!图2.61

注意:“线条”和“铅笔”工具也可用于创建虚线和不同的线条图案,但是它们不能像Deco工具那样制作重复的复杂图案。在“属性”检查器中,单击“编辑笔触样式”按钮,可以自定义虚线的笔触。

2.7.6 使用 Deco 工具的“花刷子”

现在将创建花朵图案,以装饰横幅广告的边界。

1.在“工具”面板中,选择Deco工具()。

2.在“属性”检查器中,选择“花刷子”选项(如图2.62所示)。

3.在“高级选项”中,选择“园林花”。选择“分支”选项,并保留颜色和大小的默认值(如图2.63所示)。图2.62图2.63

4.在“舞台”的下面部分绘制迷人的花枝。

当你在“舞台”上移动刷子时,将重复生成花朵、叶子、果实和枝条,如图2.64所示。图2.64

5.选取所有的花朵、叶子、果实和枝条,并选择“修改”>“组合”。

这将把花朵装饰组合进单个组中,使得你可以作为一个单元移动或修改它们。

2.8 创建曲线

你使用了“选择”工具推拉形状的边缘,以直观的方式制作曲线。为了能够实施更精确的控制,可以使用“钢笔”工具()。

2.8.1 使用“钢笔”工具

现在将创建舒适的、类似于波浪的背景图形。

1.选择“插入”>“时间轴”>“图层”,并把新图层命名为“dark brown wave”。

2.把该图层拖到图层组的底部(如图2.65所示)。图2.65

3.锁定所有其他的图层。

4.在“工具”面板中,选择“钢笔”工具()。

5.将“笔触颜色”设置为深褐色。

6.在“舞台”上单击,建立第一个锚点,开始绘制形状。

7.在“舞台”上的另一个部分单击,指示形状中的下一个锚点。当你想创建平滑的曲线时,可以用“钢笔”工具单击并拖动。

此时,从锚点出现了句柄,指示线条的曲度(如图2.66所示)。图2.66

8.继续单击并拖动,构建波浪的轮廓线。使波浪的宽度比“舞台”宽(如图2.67所示)。图2.67

9.通过单击第一个锚点封闭形状(如图2.68所示)。不要担心没有把曲线绘制完美,需要多次实践才能熟练使用“钢笔”工具。在本课程的下一部分中你还有机会美化曲线。图2.68

10.选择“颜料桶”工具。

11.将“填充颜色”设置为深褐色。

12.在你刚才创建的轮廓线内单击,用所选的颜色填充它并删除笔触(如图2.69所示)。图2.69

2.8.2 利用“选择”和“部分选取”工具编辑曲线

在第一次尝试创建平滑的波浪时,结果可能不是非常好。可以使用“选择”工具或“部分选取”工具美化曲线。

1.选取“选择”工具。

2.把鼠标指针悬停在一条线段上,如果看到光标附近出现了曲线,这就指示可以编辑曲线。如果光标附近出现的是一个角,这就指示可以编辑顶点。

3.拖动曲线以编辑它的形状(如图2.70所示)。图2.70

4.在“工具”面板中,选择“部分选取”工具()。图2.71

5.在形状的轮廓线上单击。

6.把锚点拖到新位置或者移动句柄,以美化总体形状(如图2.71所示)。

2.8.3 删除或添加锚点

可以使用“钢笔”工具下面的隐藏工具,根据需要删除或添加锚点。

1.单击并按住“钢笔”工具,访问它下面隐藏的工具(如图2.72所示)。图2.72

2.选择“删除锚点”工具()。

3.单击形状的轮廓线上的一个锚点,删除它。

4.选择“添加锚点”工具()。

5.在曲线上单击,添加一个锚点。

2.9 创建透明度

接下来,将创建第二个波浪,并使之与第一个波浪部分重叠。你将使第二个波浪稍微有点透明,以创建更全面的深度。可以把透明度应用于笔触或者填充。透明度是用百分数度量的,并且被称为Alpha。Alpha值100%指示颜色完全不透明,而Alpha值0%则指示颜色完全透明。

2.9.1 修改填充的 Alpha 值

1.选择 dark brown wave 图层中的形状。

2.选择“编辑”>“复制”。

3.选择“插入”>“时间轴”>“图层”,并把新图层命名为“light brown wave”(如图 2.73 所示)。图2.73

4.选择“编辑”>“粘贴到当前位置”(Ctrl+Shift+V/Command+Shift+V组合键)。“粘贴到当前位置”命令把复制的项目放到与复制它时完全相同的位置。

5.选取“选择”工具,并把粘贴的形状稍微左移或右移一点,以使浪峰稍微有点偏移(如图2.74所示)。图2.74

6.在 light brown wave 图层中选取形状的填充。

7.在“颜色”面板中,(选择“窗口”>“颜色”),将填充颜色设置为稍微不同的褐色色调(CC6666),然后把Alpha值更改为50%(如图2.75所示)。图2.75“颜色”面板底部的色板预览了最近选择的颜色,并通过出现在色板后面的灰色图案指示透明度(如图2.76所示)。图2.76

注意:也可以通过“属性”检查器更改形状的透明度,其方法是单击“填充颜色”图标,并在弹出的颜色菜单中更改Alpha值。

2.9.2 匹配现有对象的颜色

如果你想准确地匹配某种颜色,可以使用“滴管”工具()对填充或笔触进行取样。在用“滴管”工具单击了某个形状之后,Flash将自动提供具有所选颜色的“颜料桶”工具或“墨水瓶”工具,以及可以应用于另一个对象的关联属性。

1.在“工具”面板中,选择“滴管”工具。

2.在 dark brown wave 图层中单击形状的填充(如图 2.77 所示)。图2.77

你的工具会自动变为“颜料桶”工具,它带有取样的填充颜色。

3.在 light brown wave 图层中的形状上单击。

light brown wave 图层中的填充将变成与 dark brown wave 图层中的填充的颜色匹配(如图2.78所示)。撤消这个步骤将返回到两种不同的彩色波浪形状。图2.78

2.10 创建和编辑文本

最后,让我们添加一些文本来完成这幅插图。Flash具有两个文本选项:“传统文本”和“TLF文本”,其中后者是一个新特性,其名称是“文本布局框架(Text Layout Framework,TLF)文本”。在第7课中将学习关于“TLF文本”的更多知识。对于这个项目,将使用更简单的“传统文本”选项。

当在“舞台”上创建静态文本并发布项目时,Flash会自动包括所有必需的字体以正确地显示文本。这意味着你不必担心观众需要具有必需的字体,以按你预期的那样查看文本。

2.10.1 使用“文本”工具

1.选择最上面的图层。

2.选择“插入”>“时间轴”>“图层”,并把新图层命名为“text”。

3.选择“文本”工具()。

4.在“属性”检查器中,选择“传统文本”并选择“静态文本”(如图2.79所示)。图2.79

5.在“字符”选项下面,选择字体、样式、大小和颜色。

6.在“段落”选项下面,还有另外一些选项用于格式化文本,比如对齐或间距。

7.在“舞台”上单击并开始输入文本。输入“Garden Court Cafe Taste the Difference”(如图2.80所示)。此外,也可以单击并拖出一个文本框,定义文本的最大宽度。图2.80

8.选取“选择”工具,退出“文本”工具。复习复习题

1.Flash 中的 3 种绘制模式是什么,它们有何区别?

2.怎样使用“椭圆”工具绘制标准的圆形?

3.Flash 中的每一种选择工具都在什么时候使用?

4.“对齐”面板用于做什么?复习题答案

1.3 种绘制模式是 :合并绘制模式、对象绘制模式和基本绘制模式。

·在合并绘制模式下,将会合并在“舞台”上绘制的形状,使之变成单个形状。

·在对象绘制模式下,每个对象将保持泾渭分明,甚至当它与另一个对象重叠时也是如此。

·在基本绘制模式下,可以修改对象的角度、半径或者角半径。

2.要绘制标准的圆形,可以在用“椭圆”工具在“舞台”上绘图时按住Shift键。

3.Flash 包括 3 种选择工具 :“选择”工具、“部分选取”工具和“套索”工具。

·使用“选择”工具选取整个形状或对象。

·使用“部分选取”工具选取对象中特定的点或线。

·使用“套索”工具绘制任意选区。

4.“对齐”面板可以把所选的许多元素水平或垂直对齐,并且可以均匀地分布元素。

第3课 创建和编辑元件

课程概述

在这一课中,你将学习如何执行以下任务:

·导入Illustrator和Photoshop文件

·创建新元件

·编辑元件

·了解各种元件类型之间的区别

·了解元件与实例之间的区别

·使用标尺和辅助线在“舞台”上定位对象

·调整透明度和颜色

·应用混合效果

·利用滤镜应用特效

·在3D空间中定位对象

完成本课程的学习需要大约90分钟的时间。如果需要,可以从硬盘驱动器上删除前一课的文件夹,并把Lesson03文件夹复制其上。

元件是存储在“库”面板中的可重用资源。影片剪辑、图形和按钮元件是你将创建的3种元件,并且通常它们被用于特效、动画和交互性。

3.1 开始

首先查看最终的项目,看看你在学习使用元件时将会创建的内容。

1.双击Lesson03/03End文件夹中的03End.swf文件,在Flash中查看最终的项目(如图3.1所示)。图3.1

这个项目是一幅卡通画面的静态插图。在本课程中,将使用Illustrator图形文件、导入的Photoshop文件和一些元件创建一幅吸引人的静态图像,它带有一些非常有趣的效果。学习如何使用元件是创建任何动画或交互性的必要步骤。

2.关闭03End.swf文件。

3.选择“文件”>“新建”。在“新建文档”对话框中,选择“ActionScript 3.0”。

4.在“属性”检查器中,单击“大小”选项旁边的“编辑”按钮,把“舞台”的大小设置为600像素(宽)×450像素(高)。

5.选择“文件”>“保存”。把文件命名为“03_workingcopy.fla”,并把它保存在03Start文件夹中。

3.2 导入Illustrator文件

如你在第2课中所学到的,在Flash中可以使用“矩形”、“椭圆”及其他工具绘制对象。不过,对于复杂的绘图,你可能更喜欢在另一个应用程序中创建作品。Adobe Flash Professional CS5 支持多种图形格式,包括 Adobe Illustrator 文件,因此可以在 Illustrator 应用程序中创建原始作品,然后把它导入到Flash中。

在导入Illustrator文件时,可以选择导入文件中的哪些图层,以及Flash应该如何处理这些图层。你将导入一个Illustrator文件,其中包含用于卡通画面的所有人物。

1.选择“文件”>“导入”>“导入到舞台”。

2.选择Lesson03/03Start文件夹中的characters.ai文件。

3.单击“打开”按钮。

4.在“导入到舞台”对话框中,确保选择了所有图层。在每个图层旁边的复选框中都应该显示一个选中标记(如图3.2所示)。图3.2

如果只想导入某些图层,可以取消选中你不想导入的图层。

5.从“将图层转换为”菜单中选择“Flash图层”,然后选择“将对象置于原始位置”(如图3.3所示)。设置完成后,单击“确定”按钮。图3.3

此时,Flash将导入Illustrator图形,并且Illustrator文件中的所有图层也会出现在“时间轴”中(如图3.4所示)。图3.4

注意:可以选择Illustrator文件中显示的任何对象,并且选择将其导入为元件或位图图像。在本课程中,将只导入Illustrator图形,并且采取额外的步骤将其转换为元件,以便你可以查看完整的过程。

结合使用Adobe Illustrator与Flash

Flash Professional CS5可以导入原始的Illustrator文件,并且自动识别图层、帧和元件。如果你更熟悉Illustrator,可能发现更容易的方法是:在Illustrator中设计布局,然后把它们导入到Flash中以添加动画和交互性。

以Illustrator AI格式保存Illustrator作品,然后在Flash中选择“文件”>“导入”>“导入到舞台”或者“文件”>“导入”>“导入到库”,把作品导入到Flash中。此外,甚至还可以从Illustrator中复制作品,并把它粘贴到Flash文档中。

导入图层

当导入的Illustrator文件包含图层时,可以用以下任何一种方式导入它们:

·把Illustrator图层转换为Flash图层

·把Illustrator图层转换为Flash关键帧

·把每个Illustrator图层都转换为Flash图形元件

·把所有Illustrator图层都转换为单个Flash图层

导入元件

在Illustrator中处理元件与在Flash中处理它们相似。事实上,在Illustrator和Flash中可以使用许多相同的针对元件的键盘快捷键:在这两种应用程序中都可以按下F8键来创建元件。在Illustrator中创建元件时,“元件选项”对话框允许命名元件并设置特定于Flash的选项,包括元件类型(比如影片剪辑)和注册网格位置。

如果你想在不干扰其他任何内容的情况下在Illustrator中编辑元件,可以双击元件在隔离模式下编辑它。Illustrator将灰显画板上所有其他的对象。当退出隔离模式时,将会相应地更新“元件”面板中的元件—以及元件的所有实例。

在Illustrator中可以使用“元件”面板或“控制”面板给元件实例指定名称、断开元件与实例之间的链接、交换一个元件实例与另一个元件,或者创建元件的副本。

复制并粘贴图片

在Illustrator与Flash之间复制并粘贴(或者拖动并释放)作品时,将会显示“粘贴”对话框。该对话框提供了用于正在复制的Illustrator文件的导入设置。可以把文件粘贴为单个位图对象,或者可以使用AI文件的当前首选参数粘贴它(如果要更改设置,可以在Windows中选择“编辑”>“首选参数”或者在Mac中选择“Flash”>“首选参数”)。就像把文件导入到“舞台”或者“库”面板时一样,在粘贴Illustrator作品时,可以把Illustrator图层转换为Flash图层。

FXG文件格式

FXG文件格式是一种跨平台的图形文件格式,可以使用它在Flash与其他Adobe图形程序(如Illustrator)之间轻松地移动作品。如果你想把Flash作品导出为FXG文件,可以选择“文件”>“导出”>“导出图像”,并选择“Adobe FXG”。就像任何其他的外部文件一样,可以选择“文件”>“导入”>“导入到舞台”或者“文件”>“导入”>“导入到库”来导入FXG作品。

3.3 关于元件

元件(symbol)是可以用于特效、动画或交互性的可重用的资源。元件有3种:图形、按钮和影片剪辑。对于许多动画来说,元件可以减小文件大小和缩短下载时间,因为它们可以重用。可以在项目中无限次地使用一个元件,但是Flash只会把它的数据包括一次。

元件存储在“库”面板中。当把元件拖到“舞台”上时,Flash将会创建元件的一个实例(instance),并把原始的元件保存在“库”中。实例是位于“舞台”上的元件的一个副本。可以把元件视作原始的摄影底片,而把“舞台”上的实例视作底片的相片。只需利用一张底片,即可创建多张相片。

把元件视作容器也是有用的。元件只是用于内容的容器。元件可以包含JPEG图像、导入的Illustrator图画或者在Flash中创建的图画。在任何时候,都可以进入元件内部并编辑它,这意味着编辑或替换其内容。

Flash中的全部3种元件都用于特定的目的。可以通过在“库”面板中查看元件旁边的图标,辨别它是图形()、按钮(),还是影片剪辑()。

3.3.1 影片剪辑元件

影片剪辑元件是最常见、最强大、最灵活的元件之一。在创建动画时,通常将使用影片剪辑元件。可以对影片剪辑实例应用滤镜、颜色设置和混合模式,以利用特效丰富其外观。

另一个值得注意的事实是:影片剪辑元件可以包含它们自己独立的“时间轴”。可以在影片剪辑元件内具有一个动画,就像可以在主“时间轴”上具有动画一样容易。这使得制作非常复杂的动画成为可能;例如,飞越“舞台”的蝴蝶可以从左边移动到右边,同时使它拍打的翅膀独立于它的移动。

最重要的是,可以利用ActionScript控制影片剪辑,使它们对用户做出响应。例如,影片剪辑可以具有拖放行为。

3.3.2 按钮元件

按钮元件用于交互性。它们包含4个独特的关键帧,用于描述当鼠标与它们交互时它们将怎样显示。不过,按钮需要ActionScript功能,以使它们能够工作。

也可以对按钮应用滤镜、混合模式和颜色设置。在第6课中,当创建非线性导航模式以允许用户选择所看到的内容时,将学到关于按钮的更多知识。

3.3.3 图形元件

图形元件是基本类型的元件。尽管可以把它们用于动画,你还是更加强烈地依赖于影片剪辑元件。

图形元件是最不灵活的元件,因为它们不支持ActionScript,并且不能对图形元件应用滤镜或混合模式。不过,在某些情况下,当你希望图形元件内的动画与主“时间轴”同步时,图形元件就是有用的。

3.4 创建元件

在前一课中,你学习了如何创建一个元件以用于Deco工具。在Flash中,可以用两种方式创建元件。第一种方式是在“舞台”上不选取任何内容,然后选择“插入”>“新建元件”。Flash会把你带到元件编辑模式,可以在那里开始绘制或导入用于元件的图形。

第二种方式是选取“舞台”上现有的图形,然后选择“修改”>“转换为元件”(F8键)。这将把选取的任何内容都自动放在新元件内。

注意:当使用“转换为元件”命令时,实际上不会“转换”任何内容,而是把所选的任何内容都放在元件内。

这两种方法都是有效的:使用哪种方法依赖于特定的工作流程首选参数。大多数设计师更喜欢使用“转换为元件”命令(F8键),因为他们可以在“舞台”上创建所有的图形,并在把各个组件转变为元件之前一起查看它们。

对于本课程,将选取导入的Illustrator图形的不同部分,然后把各个不同的部分转换为元件。

1.在“舞台”上,选取hero图层中的卡通人物(如图3.5所示)。图3.5

2.选择“修改”>“转换为元件”(F8键)。

3.将元件命名为“hero”,并为“类型”选择“影片剪辑”。

4.保持所有其他设置不变。“对齐”指示元件的注册点。保持注册点位于左上角(如图3.6所示)。图3.6

5.单击“确定”按钮。hero元件将出现在“库”中(如图3.7所示)。图3.7

6.选取robot图层中的另一个卡通人物,也把它转换为影片剪辑元件,并把它命名为“robot”。

现在,在“库”中就具有两个影片剪辑元件,并且在“舞台”上还具有每个元件的一个实例。

3.5 导入Photoshop文件

你将导入一个Photoshop文件作为背景。这个Photoshop文件包含两个图层以及一种混合效果。混合效果可以在不同图层之间创建特殊的颜色混合。你将看到Flash在导入Photoshop文件时可以保持所有图层不变,并且还会保留所有的混合信息。

1.在“时间轴”中选择顶部的图层。

2.从顶部的菜单中,选择“文件”>“导入”>“导入到舞台”。

3.在Lesson03/03Start文件夹中选择background.psd文件。

4.单击“打开”按钮。

5.在“导入到舞台”对话框中,确保选择了所有图层。在每个图层旁边的复选框中都应该显示一个选中标记。

6.在左边的窗口中选择flare图层。

7.在右边的选项中,选中“具有可编辑图层样式的位图图像”单选按钮(如图3.8所示)。图3.8

影片剪辑元件图标出现在Photoshop图层的右边,指示导入的图层将转变为影片剪辑元件。另一个选项“拼合的位图图像”将不会保留任何图层效果,比如透明度或混合。

8.在左边的窗口中选择Background图层。

9.在右边的选项中,选中“具有可编辑图层样式的位图图像”单选按钮(如图3.9所示)。图3.9

10.在对话框底部,设置“将图层转换为Flash图层”选项,并选择“将图层置于原始位置”。

你还具有一个选项,用于更改Flash“舞台”大小以匹配Photoshop画布。不过,当前的“舞台”已经被设置为正确的尺寸(600像素×450像素),如图3.10所示。图3.10

11.单击“确定”按钮。将把两个Photoshop图层导入到Flash中,并把它们置于“时间轴”中单独的图层上。

Photoshop图像将自动被转换为影片剪辑元件,并且保存在“库”中。所有的混合和透明度信息都会保留下来。如果选取flare图层中的图像,将会在“属性”检查器中的“显示”区域中看到“混合”选项被设置为“变亮”(如图3.11所示)。图3.11

注意:如果你想编辑Photoshop文件,不必再次执行整个导入过程。可以在Adobe Photoshop CS5 或者任何其他的图像编辑应用程序中的“舞台”上或者“库”面板中编辑任何图像。右击/按住Ctrl键并单击“舞台”上或者“库”中的图像,并选择利用 Adobe Photoshop CS5 或者你首选的应用程序编辑它。Flash 将启动该应用程序,一旦保存了所做的更改,就会立即在Flash中更新图像。

12.把robot和hero图层拖到“时间轴”的顶部,使得它们盖住背景图层。

关于图像格式

Flash支持导入多种图像格式。Flash可以处理JPEG、GIF、PNG和PSD (Photoshop)文件。对于包含渐变和细微变化(比如照片中出现的那些变化)的图像,可使用JPEG文件。对于具有较大的纯色块或者黑色和白色线条画的图像,可使用GIF文件。对于包括透明度的图像,可使用PNG。如果想保留来自Photoshop文件中的所有图层、透明度和混合信息,则可使用PSD文件。

把位图图像转换为矢量图形

有时,你将希望把位图图像转换为矢量图形。Flash把位图图像作为一系列彩色点(或像素)进行处理,而把矢量图形作为一系列线条和曲线进行处理。这种矢量信息是动态呈现的,因此矢量图形的分辨率不像位图图像那样是固定不变的。这意味着可以放大矢量图形,而计算机总会清晰、平滑地显示它。把位图图像转换为矢量图形通常具有使之看起来像“多色调分色相片”的作用,因为细微的渐变将被转换为可编辑的、不连续的色块,这可能是一种有趣的效果。

要把位图转换为矢量图形,可以把位图图像导入到Flash中。选取位图,并选择“修改”>“位图”>“转换位图为矢量图”。其中的选项确定了描绘的矢量图像相对于原始位图的可信度有多高。

在下面的两幅图像中,左图是原始位图,右图是矢量图形(如图3.12所示)。图3.12

在使用“转换位图为矢量图”命令时一定要小心谨慎,因为与原始位图图像相比,复杂的矢量图形通常要占用更多的内存,并且需要更多的计算机处理器周期。

3.6 编辑和管理元件

现在,在“库”中具有多个影片剪辑元件,并且在“舞台”上具有多个实例。可以通过在文件夹中组织这些元件,更好地在“库”中管理它们。可以随时编辑任何元件。例如,如果你决定想要更改机器人的其中一只手臂的颜色,可以轻松地进入元件编辑模式并执行这种更改。

3.6.1 添加文件夹和组织“库”

1.在“库”面板中,右击/按住Ctrl键并单击空白空间,然后选择“新建文件夹”(如图3.13所示)。此外,也可以单击“库”面板底部的“新建文件夹”按钮()。

这会在“库”中创建一个新文件夹。

2.把该文件夹命名为“characters”(如图3.14所示)。

3.把hero和robot影片剪辑元件拖到characters文件夹中。

4.可以折叠或展开文件夹,以隐藏或显示它们的内容,并保持“库”组织有序(如图3.15所示)。图3.13图3.14图3.15

3.6.2 从“库”中编辑元件

1.在“库”中双击robot影片剪辑元件。

Flash将把你带到元件编辑模式。在这种模式下,可以查看元件的内容,在这个例子中是“舞台”上的机器人。注意顶部的水平条,你不再处于“场景1”中,而是处于名为“robot”的元件内(如图3.16所示)。

2.双击图画以编辑它。你将需要多次双击图画组,以寻找到你想编辑的单个形状(如图3.17所示)。

3.选择“颜料桶”工具。选取新的填充颜色,并把它应用于机器人图画上的形状(如图3.18所示)。图3.16图3.17图3.18

4.在“舞台”上方的顶部水平条中单击“场景1”,返回到主“时间轴”。“库”中的影片剪辑元件反映了所做的修改。“舞台”上的实例也反映了对元件所做的修改。如果编辑元件,“舞台”上的所有元件都会相应地发生改变(如图3.19所示)。图3.19

注意:在“库”中可以快速、容易地复制元件。选取“库”元件,右击/按住Ctrl键并单击它,然后选择“复制”;或者从“库”右上角的“选项”菜单中选择“复制”,这将在“库”中创建所选元件的精确副本。

3.6.3 就地编辑元件

你可能想在“舞台”上其他对象的环境中编辑元件,可以通过在“舞台”上双击一个实例来执行该任务。你将进入元件编辑模式,但是也能够查看其周围的环境。这种编辑模式称为就地编辑(editing in place)。

1.使用“选择”工具,双击“舞台”上的robot影片剪辑实例。

Flash将灰显舞台上所有其他的对象,并把你带到元件编辑模式。注意顶部的水平条,你不再处于“场景1”中,而是处于名为“robot”的元件内(如图3.20所示)。

2.双击图画以编辑它。你将需要多次双击图画组,以寻找到你想编辑的单个形状(如图3.21所示)。图3.20图3.21

3.选择“颜料桶”工具。选取新的填充颜色,并把它应用于机器人图画上的形状(如图3.22所示)。图3.22

4.在“舞台”上方的顶部水平条中单击“场景1”,返回到主“时间轴”。也可以只双击“舞台”上该图形外面的任何部分,返回到下一个更高的组级别。“库”中的影片剪辑元件反映了所做的修改。“舞台”上的实例也反映了对元件所做的修改。“舞台”上的所有元件都会根据对元件所做的编辑工作而发生相应的改变(如图3.23所示)。图3.23

3.6.4 分离元件实例

如果你不再希望“舞台”上的某个对象是一个元件实例,可以使用“分离”命令把它返回到其原始形式。

1.选取“舞台”上的机器人实例。

2.选择“修改”>“分离”。

Flash将会分离robot影片剪辑实例(如图3.24所示)。留在“舞台”上的是一个组,只要你愿意,可以进一步分离它以进行编辑。图3.24

3.7 更改实例的大小和位置

“舞台”上可以有相同元件的多个实例。现在,将添加另外几个机器人,创建一支小型的机器人军队。你将学习如何单独更改每个实例的大小和位置(甚至更改其旋转方式)。

1.在“时间轴”中选择robot图层。

2.从“库”中把另一个robot元件拖到“舞台”上。“舞台”上将显示新实例(如图3.25所示)。图3.25

3.选择“任意变形”工具。

在所选的实例周围将出现控制句柄(如图3.26所示)。

4.拖动选区两边的控制句柄翻转机器人,使得它面向另一个方面(如图3.27所示)。

5.在按住Shift键的同时拖动选区某个角上的控制句柄,减小机器人的大小(如图3.28所示)。图3.26图3.27图3.28

6.从“库”中把第三个机器人拖到“舞台”上。利用“任意变形”工具翻转机器人,调整它的大小,并使之与第二个机器人部分重叠。

机器人军队在不断发展壮大(如图3.29所示)!图3.29

使用标尺和辅助线

你可能希望更精确地放置元件实例。在第1课中,你学习了如何在“属性”检查器中使用X和Y坐标来定位各个对象。在第2课中,你学习了使用“对齐”面板使多个对象相互对齐。在“舞台”上定位对象的另一种方式是使用标尺和辅助线。标尺出现在粘贴板的上边和左边,沿着水平轴和垂直轴提供度量单位。辅助线是出现在“舞台”上的水平线或垂直线,但是它不会出现在最终发布的影片中。

1.选择“视图”>“标尺”(Ctrl+Alt+Shift+R/Option+Shift+Command+R组合键)。

以像素为单位进行度量的水平标尺和垂直标尺分别出现在粘贴板的上边和左边。在“舞台”上移动对象时,标记线指示边界框在标尺上的位置,如图3.30所示。图3.30

2.单击顶部的水平标尺,并拖动一条辅助线到“舞台”上。“舞台”上将出现一条彩色线条,可把它用于对齐,如图3.31所示。图3.31

3.利用“选择”工具双击辅助线。

出现“移动辅助线”对话框。

4.输入“435”作为辅助线的新像素值,然后单击“确定”按钮,如图3.32所示。图3.32

这将把辅助线定位于距离“舞台”上边缘435像素处。

5.选择“视图”>“贴紧”>“贴紧至辅助线”,确保选中“贴紧至辅助线”选项。对象现在将贴紧至“舞台”上的任何辅助线。

6.拖动robot实例和hero实例,使得它们的底部边缘与辅助线对齐,如图3.33所示。图3.33

注意:可以选择“视图”>“辅助线”>“锁定辅助线”来锁定辅助线,以防止意外移动它们。可以选择“视图”>“辅助线”>“清除辅助线”来清除所有的辅助线。可以选择“视图”>“辅助线”>“编辑辅助线”来更改辅助线的颜色和贴紧精确度。

3.8 更改实例的色彩效果

“属性”检查器中的“色彩效果”选项允许更改任何实例的多种属性。这些属性包括:亮度、色调或Alpha值。

亮度控制显示的实例有多么暗或者多么亮;色调控制总体色彩;Alpha值控制不透明度。减小Alpha值将减小不透明度,增加透明度。

3.8.1 更改亮度

1.使用“选择”工具,单击“舞台”上最小的那个机器人。

2.在“属性”检查器中,从“色彩效果”的“样式”菜单中选择“亮度”(如图3.34所示)。图3.34

3.把“亮度”滑块拖到-40%(如图3.35所示)。图3.35“舞台”上的robot实例将变得更暗,并且看起来好像更遥远(如图3.36所示)。图3.36

3.8.2 更改透明度

1.在flare图层中选取发光的天体。

2.在“属性”检查器中,从“色彩效果”的“样式”菜单中选择Alpha(如图3.37所示)。

3.把Alpha滑块拖动到值50%(如图3.38所示)。图3.37图3.38“舞台”上的flare图层中的天体将变得更透明(如图3.39所示)。图3.39

注意:要重新设置任何实例的“色彩效果”,可以从“样式”菜单中选择“无”。

3.9 了解混合效果

混合是指一个实例的颜色如何同它下面的颜色相互作用。你看到了如何对flare图层中的实例应用“变亮”选项(继承自Photoshop),这使它与Background图层中的实例更深地融为一体。

有许多种“混合”选项。其中一些具有令人惊奇的效果,这依赖于实例中的颜色以及它下面的图层中的颜色。试验所有的选项,了解它们如何工作。图3.40显示了一些“混合”选项,以及它们对于蓝色-黑色渐变上的robot实例的作用。图3.40

3.10 应用滤镜以获得特效

滤镜是可以应用于影片剪辑实例的特效。“属性”检查器的“滤镜”区域中提供了多种滤镜,每种滤镜都具有不同的选项,可用于美化效果。

应用“模糊”滤镜

你将对一些实例应用“模糊”滤镜,以给场景提供更好的深度感。

1.选取flare图层中发光的天体。

2.在“属性”检查器中,展开“滤镜”区域。

3.单击“滤镜”区域底部的“添加滤镜”按钮,并选择“模糊”(如图3.41所示)。图3.41

在“滤镜”窗口中将出现“模糊”滤镜,它带有“模糊X”和“模糊Y”的选项。

4.如果“模糊X”和“模糊Y”尚未链接,可以单击“模糊X”和“模糊Y”选项旁边的链接图标,链接两个方向上的模糊效果。

5.将“模糊X”和“模糊Y”的值设置为10像素(如图3.42所示)。图3.42

注意:最好把“滤镜”的“品质”设置保持为“低”。较高的设置将使处理器紧张,并且可能会损害性能,尤其是当应用了多种滤镜时则更是如此。“舞台”上的实例将变模糊,这有助于给该场景提供一种大气透视效果(如图3.43所示)。图3.43

更多的滤镜选项

在“滤镜”窗口底部是一排选项,它们可以帮助你管理和应用多种滤镜(如图3.44所示)。图3.44“预设”按钮允许保存特定的滤镜及其设置,以便你可以把它应用于另一个实例。“剪贴板”按钮允许复制并粘贴任何所选的滤镜。“启用或禁用滤镜”按钮允许查看已应用或未应用滤镜的实例。“重置滤镜”按钮将把滤镜参数重置为它们的默认值。

3.11 在3D空间中定位

你还具有在真实的三维空间中定位对象并制作它们的动画的能力。不过,这些对象必须是影片剪辑元件或者TLF文本,以便把它们移入3D空间中。有两个工具允许在3D空间中定位对象:“3D旋转”工具和“3D平移”工具。“变形”面板也提供了用于定位和旋转的信息。

理解3D坐标空间是在3D空间中成功地放置对象所必不可少的。Flash使用3根轴(x轴、y轴和z轴)划分空间。x轴水平穿越“舞台”,并且左边缘的x=0;y轴垂直穿越“舞台”,并且上边缘的y=0;z轴则进出“舞台”平面(朝向或离开观众),并且“舞台”平面上的z=0。

3.11.1 更改对象的 3D 旋转

你将向图像中添加一些文本,但是为了增加一点趣味性,你将使之倾斜,以便符合透视法地放置它。考虑电影 Star Wars(《星球大战》)开头的文字介绍,看看你是否可以实现相似的效果。

1.在图层组顶部插入一个新图层,并把它重命名为“text”(如图3.45所示)。图3.45

2.从“工具”面板中选择“文本”工具。

3.在“属性”检查器中,选择“TLF文本”、“只读”,并选择一种大号字体,它带有一种有趣的颜色,以增加一些活力。你的字体可能看起来稍微不同于本课中显示的字体,这依赖于你的计算机上可用的字体。

4.在text图层中,在“舞台”上单击,开始输入标题(如图3.46所示)。图3.46

5.要退出“文本”工具,可选取“选择”工具。

6.选择“3D旋转”工具()。

实例上出现了一个圆形的彩色靶子,这是用于3D旋转的辅助线。把这些辅助线视作地球仪上的线条是有用的。红色经线围绕x轴旋转实例;沿着赤道的绿线围绕y轴旋转实例;圆形蓝色辅助线则围绕z轴旋转实例(如图3.47所示)。图3.47

7.单击其中一条辅助线(红线用于x轴,绿线用于y轴,蓝线用于z轴),并在任何一个方向上拖动鼠标,在3D空间中旋转实例(如图3.48所示)。图3.48

也可以单击并拖动外部的橙色圆形辅助线,在全部3个方向上任意旋转实例。

3.11.2 更改对象的 3D 位置

除了更改对象在3D空间中的旋转方式之外,还可以把它移到3D空间中的特定点处。可以使用“3D平移”工具,它隐藏在“3D旋转”工具之下。

1.选择“3D平移”工具()。

2.单击文本。

实例上将出现辅助线,这是用于3D平移的辅助线。红色辅助线表示x轴,绿色辅助线表示y轴,蓝色辅助线表示z轴(如图3.49所示)。图3.49

3.单击其中一个辅助线轴,并在任何一个方向上拖动鼠标,在3D空间中移动实例。注意:当在“舞台”周围移动文本时,它仍将保持在透视图内(如图3.50所示)。图3.50

3.11.3 重置旋转和定位

如果在3D变形中出错,并且希望重置实例的定位和旋转,可以使用“变形”面板。

1.选取“选择”工具,并选择你想重置的实例。

2.选择“窗口”>“变形”,打开“变形”面板。“变形”面板将显示x、y和z的角度和定位的所有值。

3.单击“变形”面板右下角的“取消变形”按钮(如图3.51所示)。图3.51

所选的实例将返回到其原始设置。

全局变形与局部变形

在选择“3D旋转”或“3D平移”工具时,要知道“工具”面板底部的“全局变形”选项(它显示为一个三维立方体)。在按下“全局变形”选项时,旋转和定位将相对于全局(或“舞台”)坐标系统进行。你正在移动的对象上的3D视图在固定的位置显示3根轴,而不管对象是怎样旋转或移动的。注意:在下面的图像中, 3D视图是怎样总是垂直于“舞台”的,如图3.52所示。图3.52

不过,当关闭“全局变形”选项(释放该按钮)时,旋转和定位将相对于对象进行。3D视图显示了相对于对象(而不是“舞台”)定位的3根轴。例如,在下面的图像中,注意“3D平移”工具显示了从矩形(而不是“舞台”)伸出的z轴,如图3.53所示。图3.53

3.11.4 了解消失点和透视角度

在2D平面(比如计算机屏幕)上表示的3D空间中的对象是利用透视图呈现的,以使它们看上去像现实中一样。正确的透视图依赖于许多因素,包括消失点(vanishing point)和透视角度(perspective angle),在 Flash 中可以更改它们。

消失点确定透视图的水平平行线汇聚于何处。考虑铁路轨道,以及当平行铁轨越来越遥远时它们如何汇聚于单一点。消失点通常位于视野中心与眼睛水平的位置,因此默认的设置正好在“舞台”的中心。不过,可以更改消失点设置,使之出现在眼光水平位置的上、下、左、右。

透视角度确定平行线能够多快地汇聚于消失点。角度越大,汇聚得越快,因此插图看起来更费力、更扭曲。

1.在“舞台”上选取已经在3D空间中移动或旋转了的对象。

2.在“属性”检查器中,展开“3D定位和查看”区域(如图3.54所示)。图3.54

3.单击并拖动“消失点”的X值和Y值,更改消失点,在“舞台”上通过相交的灰线指示它(如图3.55所示)。

4.要将“消失点”重置为默认值(“舞台”的中心),可单击“重置”按钮。

5.单击并拖动“透视角度”值,更改扭曲程度。角度越大,扭曲越明显(如图3.56所示)。图3.55图3.56复习复习题

1.什么是元件,它与实例之间有什么区别?

2.指出可用于创建元件的两种方式。

3.在导入Illustrator文件时,如果选择将图层导入为图层,则会发生什么?如果选择将图层导入为关键帧,则又会发生什么?

4.在Flash中怎样更改实例的透明度?

5.编辑元件的两种方式是什么?复习题答案

1.元件是图形、按钮或影片剪辑,在Flash中只需创建它们一次,然后就可以在整个文档或其他文档中重用它们。所有元件都存储在“库”面板中。实例是位于“舞台”上的元件的副本。

2.创建元件有两种方式,第一种方式是选择“插入”>“新建元件”;第二种方式是选取“舞台”上现有的对象,然后选择“修改”>“转换为元件”。

3.当把Illustrator文件中的图层导入为Flash中的图层时,Flash将识别Illustrator文档中的图层,并在“时间轴”中把它们添加为单独的图层。当把图层导入为关键帧时,Flash将把每个Illustrator图层都添加到“时间轴”中的单独的帧中,并为它们创建关键帧。

4.实例的透明度是由其Alpha值确定的。要更改透明度,可以在“属性”检查器中从“色彩效果”菜单中选择Alpha,然后更改Alpha百分数。

5.编辑元件的两种方式是:双击“库”中的元件进入元件编辑模式;或者双击“舞台”上的实例就地进行编辑。就地编辑元件允许查看实例周围的其他对象。

第4课 添加动画

课程概述

在这一课中,你将学习如何执行以下任务:

·制作对象位置、缩放和旋转的动画

·调整动画的播放速度(pacing)和播放时间(timing)

·制作透明度和特效的动画

·更改运动的路径

·在元件内创建动画

·更改动画的缓动(easing)

·在3D空间中制作动画

完成本课程的学习需要大约两个小时的时间。如果需要,可以从硬盘驱动器上删除前一课的文件夹,并把Lesson04文件夹复制其上。

随着时间的推移,可以使用 Flash Professional CS5更改对象的几乎所有方面,包括位置、颜色、透明度、大小和旋转等。补间动画是利用元件实例创建动画的基本技术。

4.1 开始

首先查看完成的影片文件,看看你将在本课程中创建的动画式标题页面。

1.双击Lesson04/04End文件夹中的04End.swf文件,播放动画(如图4.1所示)。图4.1

这个项目是一个动画式醒目页面,用于即将发布的虚拟运动图片。在本课程中,将使用补间动画(motion tween)对页面上的多个组成部分制作动画,包括城市风光、主要演员、几辆老式汽车和主标题。

2.关闭04End.swf文件。

3.双击Lesson04/04Start文件夹中的04Start.fla文件,在Flash中打开初始项目文件。该文件完成了一部分,并且已经包含导入到“库”中供你使用的许多图形元素。

4.选择“视图”>“缩放比率”>“符合窗口大小”,或者从“舞台”上方的视图选项中选择“符合窗口大小”,使得你可以在自己的计算机屏幕上查看整个“舞台”。

5.选择“文件”>“另存为”。把文件命名为“04_workingcopy.fla”,并把它保存在04Start文件夹中。保存工作副本可以确保当你想重新开始时,将可以使用原始起始文件。

4.2 关于动画

动画是对象随着时间的推移而发生的运动或变化。动画可以像从一个帧到下一个帧移动盒子经过“舞台”那样简单,它也可以复杂得多。在本课程中将看到,可以把单个对象的许多不同方面制作成动画。可以更改对象在“舞台”上的位置,改变它们的颜色或透明度,更改它们的大小和旋转方式,甚至对你在前一课中看到的特殊滤镜制作动画。你还可以控制对象的运动路径,甚至控制它们的缓动,它是对象加速或减速的方式。

动画制作的基本流程如下:要在Flash中制作对象的动画,先选取“舞台”上的对象,右击/按住Ctrl键并单击它,然后从上下文菜单中选择“创建补间动画”。接着把红色播放头移到“时间轴”中的不同点处,并把对象移到一个新位置。Flash会负责做余下的工作。

补间动画(motion tween)将为“舞台”上位置的改变以及大小、颜色或其他属性的改变创建动画。补间动画要求使用元件实例。如果所选的对象不是一个元件实例,Flash将自动要求把所选内容转换为元件。Flash还会自动把补间动画分隔在它们自己的图层上,这些图层称为“补间”图层。每个图层中只能有一个补间动画,而不能有任何其他的元素。“补间”图层允许随着时间的推移在不同关键点处更改实例的多种属性。例如,航天飞机可以位于“舞台”左边的开始关键帧上以及“舞台”最右边的结束关键帧上,由此得到的补间将使航天飞机飞越“舞台”。

术语“补间”来自于经典动画领域。高级动画师负责绘制他们的人物的开始和结束姿势。开始和结束姿势是动画的关键帧。然后初级动画师将加入进来,并且绘制中间的帧,或者做中间工作。因此,“补间”是指关键帧之间的平滑过渡。

4.3 了解项目文件

04Start.fla文件包含几个已经完成或部分完成的动画式元素。6个图层(man、woman、Middle_car、Right_car、footer和ground)中的每个图层都包含一个动画。man和woman图层位于名为actors的文件夹中,Middle_car和Right_car图层则位于名为cars的文件夹中(如图4.2所示)。图4.2

你将添加更多的图层以添加动画式城市风光,美化其中一位演员的动画,以及添加第三辆汽车和一个3D标题。所有必需的图形元素都已经导入到“库”面板中。“舞台”被设置为1280像素×787像素以充满高分辨率显示器,并且“舞台”颜色被设置为黑色。你可能需要选择不同的视图选项来查看整个“舞台”。选择“视图”>“缩放比率”>“符合窗口大小”或者从“舞台”右上角的视图选项中选择“符合窗口大小”,以适合屏幕的缩放百分比查看“舞台”(如图4.3所示)。图4.3

4.4 制作位置的动画

通过制作城市风光的动画来开始这个项目。它将开始于比“舞台”上边缘稍低一点的位置,然后缓慢上升,直至其顶部与“舞台”顶部对齐。

1.锁定所有现有的图层,使得你不会意外地修改它们。在footer图层上面创建一个新图层,并把它重命名为“city”(如图4.4所示)。

2.从“库”面板中的bitmaps文件夹中把名为“cityBG.jpg”的位图图像拖到“舞台”上(如图4.5所示)。图4.4图4.5

3.在“属性”检查器中,将X的值设置为0,将Y的值设置为90(如图4.6所示)。

这将把城市风光图像定位于比“舞台”的上边缘稍低的位置。

4.右击/按住Ctrl键并单击城市风光图像,并选择“创建补间动画”(如图4.7所示)。从顶部的菜单中,也可以选择“插入”>“补间动画”。图4.6图4.7

5.将出现一个对话框,警告你所选的对象不是一个元件。补间动画需要元件。Flash将询问你是否想把所选的内容转换为元件,以便它可以继续处理补间动画(如图4.8所示)。单击“确定”按钮。图4.8

Flash会自动把所选的内容转换为元件,并将其保存在“库”面板中。Flash还会把当前图层转换为“补间”图层,以便你可以开始对实例制作动画。通过图层名称前面的特殊图标来区分“补间”图层,并且其中的帧被设置成蓝色(如图4.9所示)。“补间”图层被保留用于补间动画,因此不允许在“补间”图层上绘制对象。图4.9

6.把红色播放头移到补间范围的末尾,即第190帧处。

7.在“舞台”上选取城市风光的实例,并在按住Shift键的同时在“舞台”上把该实例向上移动。

按住Shift键用于限制沿直角移动。

8.为了更精确,可以在“属性”检查器中把Y的值设置为0。

在补间范围末尾的第190帧中出现一个小黑色三角形,这指示关键帧位于补间的末尾。Flash将平滑地在第1帧到第190帧的位置中插入变化。并用运动路径表示此动画。隐藏所有其他的图层,查看城市风光上的补间动画的结果(如图4.10所示)。图4.10

9.在“时间轴”顶部来回拖动红色播放头,查看平滑的动画。也可以选择“控制”>“播放”(Enter键),使Flash播放动画。

制作位置中的变化的动画很简单,因为当把实例移到新位置时,Flash会自动在这些位置创建关键帧。如果你想让对象移到许多不同的位置,只需把红色播放头移到想要移到的帧上,然后把对象移至其

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载