Adobe Animate CC 2017中文版经典教程

978-7-115-46504-7
作者: 【美】Russell Chun
译者: 杨煜泳
编辑: 赵轩

图书目录:

详情

全书是一个有机的整体,涵盖了Adobe Animate CC的工作流程、处理图形、创建和编辑元件、添加动画、制作形状的动画和使用遮罩、创建交互式导航、处理声音和视频、加载和显示外部内容、使用变量和控制可见属性、发布到HTML5,以及发布文档,并在适当的地方穿插介绍了最新功能。

图书摘要

版权信息

书名:Adobe Animate CC 2017中文版经典教程

ISBN:978-7-115-46504-7

本书由人民邮电出版社发行数字版。版权所有,侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用,未经授权,不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟,与我们共同保护知识产权。

如果购买者有侵权行为,我们可能对该用户实施包括但不限于关闭该帐号等维权措施,并可能追究法律责任。


    [美]Russell Chun

    杨煜泳

责任编辑 赵 轩

人民邮电出版社出版发行  北京市丰台区成寿寺路11号

邮编 100164  电子邮件 315@ptpress.com.cn

网址 http://www.ptpress.com.cn

读者服务热线:(010)81055410

反盗版热线:(010)81055315


Authorized translation from the English language edition, entitled Adobe Animate CC Classroom in a Book®, 1st Edition, 9780134665238 by CHUN RUSSELL, published by Pearson Education, Inc, publishing as Adobe Press, Copyright © 2017 Pearson Education, Inc.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.

CHINESE SIMPLIFIED language edition published by PEARSON EDUCATION ASIA LTD., and POSTS & TELECOMMUNICATIONS PRESS Copyright © 2017.


全书是一个有机的整体,涵盖了Adobe Animate CC的工作流程、处理图形、创建和编辑元件、添加动画、制作形状的动画和使用遮罩、创建交互式导航、处理声音和视频、加载和显示外部内容、使用变量和控制可见属性、发布到HTML5,以及发布文档,并在适当的地方穿插介绍了最新功能。


Adobe Animate CC的2017年版本为创建交互式多媒体应用提供了功能全面的创作和编辑环境。通过Animate,您可以创建各种互动的、复杂的动画或应用程序,并将其发布到各种平台。Animate CC广泛应用于创意产业,用于开发融合视频、声音、图形和动画的引人入胜的项目。您可以在Animate CC中创建原创内容,或从其他Adobe应用程序(如Photoshop或Illustrator)导入资源来快速设计动画和多媒体,并使用代码来集成具有复杂的交互性的功能。

使用Animate CC可以建立完全原创、令人身临其境的网站和独立于浏览器的桌面应用,还可以创建应用于 Android、iOS系统的手机应用。

对动画的优秀控制能力,直观而又灵活的绘图工具及面向对象编程的强大语言,以及针对HTML5、移动应用、桌面应用程序和Flash Player等的输出选项能力,都使得 Adobe Animate CC成为实现创作设计的最强大软件之一。

在 Adobe 产品专家的支持下,本书已成为 Adobe官方培训系列图书之一。

本书中的课程经过精心设计,方便读者按照自己的节奏进行阅读。如果您是 Adobe Animate初学者,可从本书中学到该程序所需的基础知识和操作;如果您有一定的 Adobe Animate使用经验,将会发现本书介绍了许多高级技能,包括针对最新版本软件的使用技巧和操作提示。

本书不仅在每节课程中提供完成特定工程的具体步骤,还为您预留了探索和试验的空间。

您可以按顺序阅读全书,也可以针对个人兴趣和需要阅读对应章节。而且,每节课程都包含复习部分,可总结该课程的内容。

Adobe Animate CC的2017版本提供了更多具有表现力的工具、更强大的动画控件,以及对各种播放平台的强大支持。

本书中的课程提供了使用Animate CC中的一些更新和改进功能的机会,包括:

在开始使用本书之前,请确保系统设置正确,并且已安装所需的软件。您应该具备自己计算机和操作系统的基本知识。您应该知道如何使用鼠标、标准菜单和命令,以及如何打开、保存和关闭文件。如果您需要查看这些技术,请参阅Microsoft Windows或Apple Mac OS软件随附的打印或联机文档。

此外,您需要下载免费的Adobe AIR运行库(可在get.adobe.com/air/获得),以便在第10课中发布桌面应用程序。

需要购买Adobe Creative Cloud下的Adobe Animate CC软件。以下为设备系统需满足的最低要求。

Windows

Mac OS

有关系统要求的更新和有关安装软件的完整说明,请访问helpx.adobe.com/animate/system-requirements.html。

从Adobe Creative Cloud在creative.adobe.com安装Animate CC,并确保您可以访问您的登录名和密码。

本书中的每节课都提供了创建课程中项目的一个或多个特定元素的分步说明。除部分课程建立在以前课程中创造的项目上之外,其他大部分是独立的项目。所有的课程在概念和技能方面相辅相成,所以学习本书的最好方法是按顺序进行课程。在本书中,一些技巧和过程只在前几次使用它们的过程中进行详细的说明和描述。

您将在本书的某些课程中创建和发布最终项目文件,如SWF文件、HTML文件、视频或AIR桌面应用程序。Lessons文件夹中End文件夹中的文件(01End、02End等)是每个课程已完成项目的样本。如果要将正在进行的工作与用于生成示例项目的项目文件进行比较,请使用这些文件进行参考。

课程的组织也是以项目为导向,而不是以特性为导向。这意味着,例如,您将在几个课程上,而不是仅在一个章节中处理设计项目中的元件。

Adobe授权培训中心提供由讲师指导的Adobe产品课程和培训。 Adobe授权培训中心课程目录可在training.adobe.com/trainingpartners上获取。

本书所需的素材文件及相关内容,请从异步社区(www.epubit.com.cn)中本书页面下载。


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

  学习该课程大概需要1小时。

在Animate中,“舞台”是用来布置所有可视元素的场所,动作发生在“舞台”上,“时间轴”用于组织帧和图层,其他面板允许编辑和控制所创建的内容。

第一次启动Adobe Animate CC时,您将会看到一个欢迎屏幕,上面有指向标准文件模板、教程及其他资源的链接。在本课程中,您将创建一个用于显示一些度假照片的简单的动画。您可以添加一些背景照片及装饰元素,并且在这个过程中学习如何在“舞台”上定位元素,以及沿着“时间轴”放置它们。您可学到如何利用“舞台”从空间上管理可视元素,以及如何利用“时间轴”从时间上管理它们。

1. 启动Adobe Animate CC。在Windows中,选择“开始”>“所有程序”>“Adobe Animate CC”。在Mac OS中,在Adobe Animate CC文件夹或Applications文件夹中单击Adobe Animate CC。

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

3. 选择“文件”>“发布”。

Animate会创建一些在目标平台播放时必要的文件。在这个例子中,为了在浏览器里显示最终的动画,HTML5 Canvas文件创建了一个HTML文件、一个JavaScript文件以及一个图片文件夹。这些文件被保存在与Animate文件相同的文件夹内。

4. 双击生成的HTML文件。

此时将会播放一个动画。在播放动画期间,将会逐一显示多张重叠的照片,最后将显示一些星星的图案。

5. 关闭浏览器。

提示:

 

您还可以通过双击动画文件(.fla或.xfl)启动Animate,例如课程所提供的01End.fla文件。

 

注意:

 

“输出”面板将显示一条错误消息,指出在EaselJS中,帧编号从0开始而不是从1开始。您可以忽略该警告,因为您不会在本课时间轴上处理不同的帧编号。

要想创建如刚刚所预览的简单动画,首先要新建一个新文档。

1. 在Animate中选择“文件”>“新建”,弹出“新建文档”对话框。

2. 在“常规”选项卡中选择第一个选项HTML5 Canvas。

其他的选项将使文档能够在不同的环境中播放。例如,WebGL是可利用硬件图形加速功能的动画文件格式。ActionScript 3.0选项创建对应Flash Player的文件类型。AIR for Android和Air for iOS选项将会创建能够在Android或苹果移动设备中播放的文档。AIR for Desktop对应Windows或者Mac的桌面程序。

3. 在右边的对话框中,通过输入“宽”和“高”的像素值可以设定“舞台”的尺寸。输入“宽”为800,“高”为600。保持“标尺单位”选项为“像素”不变。保持“帧频”和“舞台”的“背景颜色”选项为默认设置。您可以随时更改这些文档属性,本课的后面内容中会进行讲解。

4. 单击“确定”按钮。

Animate会依照全部指定设置创建一个新的HTML5 Canvas文件。

5. 选择“文件”>“保存”。把文件命名为“01_workingcopy.fla”,并从“保存类型”下拉菜单中选择“Animate文档(*.fla)”,尽管软件程序现在是叫Animate,但是文件格式后缀仍然是.fla或者.xfl,这些都体现了Animate的前身是“Flash”。

把它保存在01Start文件夹中。立即保存文件是一种良好的工作习惯,可以确保当应用程序或计算机崩溃时所做的工作不会丢失。应利用.fla(如果将其存为.xfl则为Animate未压缩文档格式)扩展名保存Animate文件,以将其标识为Animate源文件。

 

 

Adobe Animate CC是一个动画和多媒体制作工具,可为多种平台和播放技术创建媒体。知道动画最终将在哪里播放,决定了您该如何对新文件文档类型作出选择。

播放或运行环境是用于播放最终发布文件所使用的技术。您的动画既可以在浏览器的Flash Player中播放,也可以在支持HTML5和JavaScript的浏览器中播放。或者,它们可以在移动设备上作为应用程序播放。您应首先确认播放或运行环境,以便可以选择适当的文档类型。

无论播放环境和文档类型如何,所有文档类型都保存为FLA或XFL(Animate)文件。区别是每个文档类型被配置为导出不同的最终发布文件。

注意:

 

并非所有文档类型都支持所有特性。例如,WebGL文档不支持文本,HTML5 Canvas文档不支持3D旋转或翻译工具。不支持的工具显示为灰色。

注意:

 

最新版本的Animate CC仅支持ActionScript 3.0。如果您需要ActionScript 1.0或2.0,则必须使用Flash Professional CS6或更低版本。

 

注意:

 

ActionScript 3.0文档还支持将内容作为Mac或Windows的投影机发布。投影机作为桌面上的独立应用程序,无需浏览器。

提示:

 

您可以轻松地从一种文档类型切换到另一种文档类型。例如,如果您有需要更新的旧Flash横幅广告动画,您可以将ActionScript 3.0文档转换为HTML5 Canvas文档。使用“命令”>“转换为其它文档格式”以选择新的文档类型。但是,某些功能和功能可能会在转换中丢失。例如,转换为HTML5 Canvas文档将注释掉ActionScript代码。

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

默认情况下,Animate会显示“菜单栏”“时间轴”“舞台”“工具”面板、“属性”面板、“编辑”栏以及其他面板。在Animate中工作时,可以打开、关闭、分组和取消面板分组、停放和取消停放面板,以及在屏幕上移动面板,以适应个人的工作风格或屏幕分辨率。

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

1. 单击工作区切换面板,并选择一种新的工作区。

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

2. 如果一些面板被移动了,而您希望返回到预先排列的工作区之一的状态,可以选择“窗口”>“工作区”>“重置”来重新选择预置工作区。

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

如果发现面板的某种排列方式适合自身的工作风格,就可以将它保存为自定义工作区。

1. 单击Animate工作区右上角的“基本功能”按钮,并选择“新建工作区”,图中出现“新建工作区”选项。

2. 为新工作区输入一个名称,然后单击“确定”按钮。

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

提示:

 

默认情况下,动画界面为黑色。但是,如果您愿意,您可以将界面更改为浅灰色。选择“编辑”>“首选参数”(Windows)或“动画”>“首选参数”(Mac),然后在“常规”选项中,在“用户界面”选项选择“浅”。

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

默认情况下,您将看到“舞台”外面的灰色区域,可以在其中放置不被用户看到的元素,这个灰色区域称为“粘贴板”(Pasteboard)。为了只查看“舞台”,您可选择“视图”>“粘贴板”,取消选择该选项。就现在而言,先保持该选项。

您同样可以单击“剪切掉舞台范围以外的内容”按钮来隐藏处在舞台区域之外的图形元素,以确定观众最终看到的效果。

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

提示:

 

可以全屏模式查看“舞台”来排除各种面板的干扰,选择“视图”>“屏幕模式”>“全屏模式”。按F4键可以显示面板,按Esc键返回“标准屏幕模式”。

现在来更改“舞台”的颜色。“舞台”的颜色以及其他文档属性,例如“舞台”尺寸和帧频都可以在“属性”面板中修改,它是位于“舞台”右边的一个垂直面板。

1. 在“属性”面板底部,注意当前“舞台”的尺寸被设置为800像素×600像素,这是在创建新文档时设置的。

2. 单击“舞台”右边的“背景颜色”按钮,并从调色板中为“舞台”选择一种新颜色。这里选择深灰色(#333333),现在“舞台”更换了颜色。您可以参考以上步骤随时更改“舞台”属性。

您可以从“属性”面板右侧的选项卡中访问“库”面板。“库”面板用于存储和组织在Animate中创建的符号,以及导入的文件,包括位图、图形、声音文件和视频剪辑。符号“Symbols”是经常用于动画和交互的图形。

注意:

 

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

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

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

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

1. 选择“文件”>“导入”>“导入到库”。在“导入到库”对话框中,选择Lesson01/01Start文件夹中的background.png文件,并单击“打开”按钮。Animate将导入所选的PNG图像,并把它存放在“库”面板中。

2. 导入01Start文件夹中的photo1.jpg、photo2.jpg和photo3.jpg图像。不要导入图像photo4.jpg,它在本课程的后部分才会使用到。您可以按住Shift键选择多个文件,同时导入。

“库”面板将显示所有导入的JPEG图像,以及它们的文件名和缩略图预览。现在就可以在Animate文档中使用这些图像。

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

注意:

 

选择“文件”>“导入”>“导入到舞台”或按Ctrl+R组合键(Windows)或Command+R组合键(Mac)一次性将图片文件导入到“库”并放置在“舞台”上。

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

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

3. 把background.png项目拖到“舞台”上,并放在“舞台”中大约中央的位置。

提示:

 

您还可以选择“文件”>“导入”>“导入到舞台”,或按Ctrl + R(Windows)或Command + R(Mac)将图像文件导入到库中,并将其放在舞台上。

 

在默认的“基本功能”工作区设置中,“时间轴”位于“舞台”下方。像电影一样,Animate文档以帧为单位度量时间。在影片播放时,播放头(如红色垂直线所示)在“时间轴”中向前移动。您可以为不同的帧更改“舞台”上的内容。要在“舞台”上显示帧的内容,可以在“时间轴”中把播放头移到此帧上。

在“时间轴”的底部,Animate会指示所选的帧编号、当前帧频(每秒钟播放多少帧),以及迄今为止在影片中所流逝的时间。

“时间轴”还包含图层,它有助于在文档中组织作品。当前项目只含有一个图层,名为“图层1”。可以把图层看作堆叠在彼此上面的多个幻灯片。每个图层都包含一幅出现在“舞台”上的不同图像,可以在一个图层上绘制和编辑对象,而不会影响另一个图层上的对象。图层按它们互相重叠的顺序堆叠在一起,使得位于“时间轴”下方图层上的对象在“舞台”上显示时也将出现在底部。单击“图层”选项图标下方的每个图层的圆点,可以隐藏、锁定或只显示图层内容轮廓。

更改时间轴的外观

 

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

您也可以通过选择“很小”“小”“一般”“中”或“大”来更改帧边框单元格的宽度。在这本书中,我们以默认的,“一般”的大小显示时间轴帧。

要更好地控制时间轴帧大小,请拖动“调整时间线视图”滑块。滑块调整帧的大小,以便您可以看到更多或更少的时间轴。单击“重置时间轴缩放到默认级别”按钮,将时间轴视图还原为其正常大小。

一种好的做法是把内容分隔在不同的图层上,并根据内容对图层进行命名,方便以后可以轻松地查找所需的图层。

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

2. 双击图层的名称并重命名为“background”。

3. 在名称框外单击,应用新名称。

4. 单击锁形图标下面的圆点锁定图层。锁定图层可以防止意外更改。

图层名称后面带有斜线的铅笔图标表示此图层已经锁定,无法对其进行编辑。

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

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

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

3. 双击新图层并重命名为“photo1”。在名称框外单击,应用新名称。

“时间轴”上现在有两个图层。Background图层包含背景照片,而其上方的新创建的photo1图层是空的。

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

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

6. 从“库”面板中把名为photo1.jpg的库项目拖到舞台上。photo1图像将出现在“舞台”上,并且会叠盖住背景JPEG图像。

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

8. 把第3个图层重命名为“photo2”。

注意:

 

当您添加更多图层并且重叠的图形变得更复杂时,单击图层中眼睛图标下面的点可以隐藏任何图层的内容。或者,按住Shift键并单击眼睛图标下方的点,使图层透明,以便您可以看到下面的内容。隐藏或使图层透明只会影响您在Animate中看到项目的方式——它不会影响最终导出的项目。双击图层图标以在“图层属性”对话框中修改透明度级别。

处理图层

 

如果不想要某个图层,可以轻松地删除。其方法是选取并单击“时间轴”下

面的“删除”按钮。

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

现在,在“舞台”上有一张背景图片以及另一张重叠的图片,但是整个动画时间只有一帧。要在“时间轴”上创建更多的时间,必须添加额外的帧。

1. 在background图层中选择第48帧。使用时间线右下角的“调整时间轴视图”滑块来展开时间轴帧,以便更容易识别第48帧。

2. 选择“插入”>“时间轴”>“帧”(F5键),也可以单击鼠标右键,然后从弹出的菜单中选择“插入帧”。Animate将在background图层中添加帧,一直到所选的位置(第48帧)。

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

4. 选择“插入”>“时间轴”>“帧”(F5键),也可以单击鼠标右键,然后从弹出的菜单中选择“插入帧”。

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

5. 在photo2图层中选择第48帧,并向这个图层中插入帧。

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

选取多个帧

 

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

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

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

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

2. 选择“插入”>“时间轴”>“关键帧”(F6键),新的关键帧(以空心圆圈表示)将出现在photo2图层中的第24帧中。

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

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

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

理解帧和关键帧是掌握Animate所必需的。一定要理解photo2图层包含的48个帧,并且带有两个关键帧,一个是位于第1帧的空白关键帧;另一个是位于第24帧的实心关键帧。

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

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

2. 移动光标,将会看到光标旁的一个方框图标,它表示可以重新定位关键帧。

3. 在photo2图层中,单击并拖动关键帧到第12帧。

现在,photo2.jpg将提前出现在“舞台”上的动画中。

清除关键帧

 

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

此时,当前的Animate文件只有3个图层,即background图层、photo1图层和photo2图层。要为这个项目添加额外的图层,像大多数项目一样,最终您将需要管理多个图层。图层文件夹有助于组合相关的图层,使“时间轴”保持组织有序而易于管理,就像把为桌面上的文档创建文件夹一样。尽管创建文件夹需要花费一些时间,但是往后可以节省时间,因为您可以很清楚地知道如何寻找到特定的图层。

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

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

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

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

4. 从“库”中把photo3.jpg拖到“舞台”上。现在有4个图层。上面的3个图层包含来自科尼岛的风景图片,它们出现在不同的关键帧中。

5. 选择photo3图层,并单击“新建文件夹”图标()。新的图层文件夹将出现在photo3图层上面。

6. 把该文件夹命名为“photos”。

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

1. 把photo1图层拖到photos文件夹中。注意粗线条只是图层的目的地。当把图层放在文件夹内时,图层名称将变成缩进形式。

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

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

现在3个图层都位于photos文件夹中。

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

剪切、粘贴和复制图层

 

当管理多个图层和图层文件夹时,可以通过使用剪切、粘贴和复制图层命令来使工作流程更加简单和有效率。被选中图层的所有属性都会被复制和粘贴,包括帧、关键帧、所有动画以及图层名和类型。可以复制并粘贴任何图层文件夹及其内容。

要剪切或复制图层或图层文件夹,先选中它们,然后用鼠标右键单击图层,在弹出的菜单中选择“剪切图层”或“拷贝图层”。

再次用鼠标右键单击“时间轴”,选择“粘贴图层”命令,被复制或剪切的图层就会被粘贴到“时间轴”中。使用“复制图层”命令可以同时完成复制和粘贴图层操作。

可以从Animate的菜单中“剪切”“粘贴”或“复制”图层。选择“编辑”>“时间轴”>“剪切图层”“拷贝图层”“粘贴图层”或“复制图层”即可。

 

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

利用“属性”面板移动图片,还可使用“变形”面板旋转图片。

1. 在photo1图层中,在第1帧处选择“舞台”上的photo1.jpg。蓝色框线表示选取的对象。

2. 在“属性”面板中,将x值输入“50”,y值输入“50”,然后按Enter(Windows)或Return(Mac)键应用这些值。也可以简单地在x值和y值上单击并拖动鼠标,来更改图片的位置,图片将移动到“舞台”的左边。

注意:

 

如果“属性”面板没有打开,选择“窗口”>“属性”,也可以按Ctrl+F3组合键(Windows)或Command+F3组合键(Mac OS)来打开“属性”面板。

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

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

4. 在“变形”面板中,选择“旋转”,并在“旋转”框中输入“-12”,或在单击并拖动这个值来更改旋转角度。然后按Enter(Windows)或Return(Mac)键来应用这个值。“舞台”上选中的图片将逆时针旋转12°。

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

6. 使用“属性”面板和“变形”面板以一种有趣的方式定位和旋转第二张图片。设置x值为80、y值为50,“旋转”值为6,使之与第一张图片产生某种对比效果。

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

8. 使用“属性”面板和“变形”面板来以一种有趣的方式定位和旋转第3张图片。设置x的值为360、y的值为65,“旋转”值为-2,现在所有的图片看起来都不一样了。

注意:

 

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

使用面板

 

在Animate中所做的任何事情几乎都会涉及面板。在本课程中,要使用“库”面板、“工具”面板、“属性”面板、“变形”面板、“历史记录”面板和“时间轴”。在以后的课程中,将使用“动作”面板、“颜色”面板、“对齐”面板以及其他可以控制项目不同方面的面板。由于这些面板是Animate工作区的一个组成部分,因此需要学会如何管理面板。

要在Animate中选取打开面板,可以从“窗口”菜单中选择其名称。

单独的面板可以自由浮动,并且可以在基座(dock)、组或堆栈(stack)中组合。

  • 基座是垂直列中的面板或面板组的集合。基座靠在用户界面的左边缘或右边缘。

  • 组是可以放置在基座内或可以自由浮动的面板集合。

  • 堆栈类似于基座,但可以放置在接口中的任何地方。

在默认的“基本功能”工作区中,大多数面板都组织在屏幕右侧的3个基座中。

时间轴和输出面板分组在底部,舞台位于顶部。但是,您可以将面板移动到任何方便您的位置。

  • 要移动面板,请通过其选项卡将其拖动到新位置。

  • 要移动面板组或堆栈,请按选项卡旁边的区域将其拖动。

当面板,组或堆栈通过其他面板,组,基座或堆栈时,将出现一个蓝色突出显示的放置区域。如果在放置区域可见时释放鼠标按钮,则面板将添加到组,基座或堆栈中。

“工具”面板位于工作区最右侧,包含选择工具、绘图和文字工具、着色和编辑工具、导航工具以及其他工具选项。您将频繁地使用“工具”面板来切换各种工具,最常用的是“选择”工具,即在“工具”面板顶部的黑色箭头工具,用来选择“时间轴”或“舞台”上的项目。选择了一个工具之后,在面板底部的选项区域会有更多的选项和设置。

当选择一种工具时,“工具”面板底部可用的选项以及“属性”面板将会发生变化。例如,当选择“矩形”工具时,将会出现“对象绘制”模式和“贴紧至对象”选项。当选择“缩放”工具时,将会出现“放大”和“缩小”选项。

“工具”面板中包含许多工具,以至于不能同时显示。有些工具在“工具”面板中被分成组,在一个组中只会显示上一次选择的工具。工具按钮右下角的小三角形表示在这个组中还有其他工具。单击并按住可见工具的图标,即可查看其他可用的工具,然后从菜单中选择一种工具。

下面您将使用“多角星形工具”为您的短动画添加一些装饰。

1. 在时间轴中选择文件夹,然后单击新建图层按钮。

2. 将新图层命名为“stars”。

3. 锁定其下面的其他图层,这样您不会意外地移入其他东西。

4. 在时间轴中,将播放头移到第36帧,然后选择“stars”图层中的第36帧。

5. 选择“插入”>“时间轴”>“关键帧”(F6),在“stars”图层的第36帧处插入新关键帧。您将此图层的第36帧创建星星的形状。

6. 在“工具”面板中,选择六角形形状的多角星形工具。

7. 在“属性”面板中,单击铅笔图标旁边的彩色正方形,然后选择红色对角线。

红色对角线表示笔划无颜色。

8. 单击颜色桶图标旁边表示填充颜色的彩色正方形,然后选择一种明亮,爽快的颜色,例如黄色。您可以单击右上角的色轮以访问Adobe Color Picker,或者可以更改右上角的Alpha百分比,从而确定透明度。

9. 在“属性”面板中,单击“工具设置”下的“选项”按钮。将出现“工具设置”对话框。

10. 对于样式,选择星形。对于边数,输入5,对于星点大小,输入0.5。单击“确定”按钮。这些选项决定了您星星的形状。

11. 选中标题图层第36帧的空关键帧。单击要开始添加星星的舞台,然后拖动调整星星的宽度。单击并移动光标来旋转星星。制作不同大小和不同旋转角度的多个星星。

12. 单击“选择工具”,退出“多角星形工具”。

13. 如果需要,使用“属性”面板或“变形”面板在舞台上重新定位或旋转星星。或者,选择“选择工具”,然后单击选中星星并将其拖动到舞台上的新位置。当您在舞台上拖动星星时,“属性”面板中的x和y值将更新。

14. 您本节课的动画完成了!将文件中的时间轴与最终文件01End.fla中的时间轴对比一下。

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

要在Animate中撤销单个步骤,可选择“编辑”>“撤销”,也可以按Ctrl+Z组合键(Windows)或Command+Z组合键(Mac)。要重做已经撤销的步骤,可选择“编辑”>“重做”。

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

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

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

2. 选择“窗口”>“历史记录”,打开“历史记录”面板。

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

注意:

 

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

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

1. 选择“控制”>“测试”。

Animate将在与FLA文件相同的位置创建发布所需的文件,然后在默认的浏览器中打开并播放该文件。

Animate会在这种预览模式下自动循环播放影片。

如果不想让影片循环播放,可选择“文件”>“发布设置”,取消选中“循环时间轴”选项。

2. 关闭预览窗口。

在开始学习本课时,我们先以800像素×600像素创建了一个舞台。然而,之后的客户可能会需要不同大小的动画来适应不同的布局。例如,他们需要一个更小的、具有不同长宽比的版本作为横幅广告。或需要一个运行在AIR或Android设备上的、具有不同大小的版本。

幸运的是,即使所有的内容都放置完毕,也可以修改“舞台”。当修改“舞台”大小时,Animate提供了缩放“舞台”上的内容的选项,可以成比例地自动缩小或放大所有内容。

将使用不同的“舞台”大小创建这个动画项目的另一个版本。

1. 在“属性”面板中,可以看到当前“舞台”的大小被设置为800像素×600像素。单击“高级设置”按钮,出现“文档设置”对话框。

2. 在“宽”和“高”文本框中,输入新的像素大小。“宽”中输入400,“高”中输入300。

您可以单击“宽”和“高”字段之间的链接图标来限制舞台的比例。选择该链接图标后,更改一个维度会自动按比例更改其他维度。

3. 选中“缩放内容”选项。

4. 保持“锚记”选项不变。

5. “锚记”选项可以在新“舞台”比例不同时,提供更改大小之后的内容的位置选择。

6. 单击“确定”按钮。

Animate将修改“舞台”大小,并自动调整所有内容的大小。如果新的大小与原始的大小不成比例,Animate将会最大化地调整所有的内容以使其适应新的大小。也就是说如果新“舞台”比原来的宽,那么在“舞台”右边将会有多余的空间。如果新“舞台”比原来的更高,那么在“舞台”的底部将会有多余的空间。

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

8. 在“另存为”对话框中,对保存类型选择“Animate文档(*.fla)”,并命名为01workingcopy resized.fla。

您现在有两个Animate文件,内容相同但“舞台”大小不同。关闭这个文件并且重新打开01_workingcopy.fla来继续学习本课。

 

有句关于多媒体制作的俗语叫“早保存,常保存。”应用程序、操作系统和硬件的崩溃总是发生得特别频繁,而且总是在意想不到并且特别不合适的时候。所以经常保存影片来保证当崩溃发生时,不会损失太多。

Animate能极大地减轻这种丢失工作的担忧。为了预防崩溃,“自动恢复”功能将会创建一个备份文件。

注意:

 

如果在打开的文档中有未保存的修改,Animate将在文档窗口最上方的文件名后面加上一个星号来提醒。

“自动恢复”功能是针对Animate应用程序的所有文档的一项首选参数。

“自动恢复”功能所保存的备份文件可以在崩溃时有另外一个可选的恢复文件。

1. 选择“编辑”>“首选参数”出现“首选参数”对话框。

2. 从左侧边栏选择“常规”选项卡。

3. 选中“自动恢复”选项,并且输入一个Animate创建备份文件的间隔时间(分钟)。

4. 单击“确定”。

Animate将会在备份文件的文件名开头加上“RECOVER_”并保存在与原来文件相同的位置。这个文件在文档被打开期间一直存在,当关闭文档或安全退出Animate的时候这个文件将会被删除。

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

1. 打开01_workingcopy.fla文件,选择“文件”>“另存为”。

2. 将文件命名为“01_workingcopy.xfl”并且选择“Animate未压缩文档(*.xfl)”。然后单击“保存”按钮。

Animate将创建一个名为“01_workingcopy”的文件夹,其中包含了Animate影片的所有内容。

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

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

1. 打开01_workingcopy文件夹内的LIBRARY文件夹。该文件夹包含导入到Animate影片中的所有图像。

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

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

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

4. 要打开XFL文档,可以双击.xfl文件。此时,使用替换的photo4.jpg图像交换“时间轴”关键帧24中的最后一幅图像。

注意:

 

要了解如何保持Animate CC的最新版本,并了解Animate中您可以使用到的帮助来源,请参阅本书开头的“入门指南”。

1. 什么是“舞台”?

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

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

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

5. 保存Animate文件时,如果要在不打开Animate中的文件的情况下换出资源,
应选择哪种文件格式?

1. “舞台”是用户中观看影片播放时所看到的矩形区域。它包含出现在屏幕上的
文本、图像和视频。存储在“舞台”外面的粘贴板上的对象不会出现在影片中。

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

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

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

5. 以XFL格式保存Animate文件,即可以在不编辑Animate文件本身的情况下
对其存储文件的资源进行替换或编辑。


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

  学习该课程需要大约120分钟。

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

首先我们先看看将在本课程中创建的动画影片。

1. 双击Lesson02/02End文件夹中的02End.html文件,查看最终的项目。

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

2. 选择“文件”>“新建”。在“新建文档”对话框中选择“HTML5 Canvas”。

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

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

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

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

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

您将从绘制一只咖啡杯开始。

咖啡杯实质上是一个圆柱体,它是一个顶部和底部都是椭圆的矩形。首先绘制矩形主体,把复杂的对象分解成各个组成部分,方便更容易地绘制。

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

注意:

 

在Animate CC、HTML文件和许多其他的应用程序中,每种颜色都有一个十六进制的值。“#”号之后的6位数代表红、绿、蓝的颜色数值。

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

3. 在“舞台”上绘制一个矩形,其高度比宽度稍大一点。在第6步中可以指定矩形的准确大小和位置。

4. 选取“选择”工具()。

5. 在整个矩形周围拖动“选择”工具,选取完整的笔触和填充。当一个形状被选取时,Animate将会用对其用白色虚线显示。也可以双击某种形状,Animate将同时选取该形状的笔触和填充。

6. 在“属性”面板中,“宽”中输入“130”,“高”中输入“150”。然后按Enter(Windows)键或Return(Mac)键应用这些值。

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

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

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

3. 在矩形内单击并拖动,创建一个椭圆。“贴紧至对象”选项使得椭圆的边紧贴着矩形的边。

4. 在矩形底部附近绘制另一个椭圆。

注意:

 

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

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

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

2. 单击并选取椭圆顶部上面的填充部分。椭圆顶部上面的形状将高亮显示。

3. 按Delete键。这样就删除了所选的形状。

4. 按Shift键并选取顶部的椭圆上面的3条线段,按Delete键删除。

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

5. 现在按下Shift键并选择底部的椭圆下面的填充和笔触,以及杯底里面的圆弧,并按Delete键。余下的形状看上去就像一个圆柱体。

注意:

 

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

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

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

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

圆柱体上将出现变形手柄。

3. 在向里拖动其中一个角时按Ctrl+Shift(Windows)组合键或Command+Shift(Mac)组合键,以同时把两个角移动相同的距离。

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

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

注意:

 

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

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

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

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

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

在“舞台”上就会出现复制的椭圆,并在您原来图形的上方出现,其中复制出来的形状处于被选中状态。

4. 在“工具”面板中,选择“任意变形”工具,在椭圆上将出现变形句柄。

5. 在向里拖动角时按Shift键和Alt或Option键,使椭圆缩小10%。按Shift键可以一致地更改形状,使椭圆维持其表面的比率。按Alt或Option键将从其变形点更改形状。

6. 选择“编辑”>“粘贴到中心位置”(Shift+Ctrl+V组合键或Shift+Command+V组合键)来多增加一个复制的椭圆。

7. 选择自由变换工具。按住新椭圆的一个角并按着Shift键向内拖动,使新椭圆再缩小10%。

8. 把椭圆拖到咖啡杯的边缘上,使之叠盖住前边缘。您也可以按住下箭头来微调所选的椭圆。

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

10. 选取较小的椭圆的下部分并删除,现在咖啡杯中就好像装有咖啡一样。

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

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

2. 移动光标,使之接近于咖啡杯的某一个边缘。在光标附近将出现一条曲线,表示可以更改笔触的曲度。

3. 单击并向外拖动笔触。咖啡杯的边缘将弯曲,使得咖啡杯稍微有点凸出。

4. 单击并稍微向外拖动咖啡杯的另一个边缘。咖啡杯现在就具有更圆滑的形状。

 

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

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

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

2. 在“属性”面板中,选择一种更深的褐色(#663333)。

3. 单击杯中咖啡的液面。顶部椭圆的填充将变成更深的褐色。

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

5. 在“属性”面板中,选择一种再深一点的褐色(#330000)。

6. 单击咖啡液面上面的顶部笔触。咖啡液面周围的笔触将变成再深一点的褐色。

注意:

 

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

注意:

 

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

   

Animate绘制模式

 

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

合并绘制模式

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

对象绘制模式

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

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

基本绘制模式

当使用“基本矩形”工具或“基本椭圆”工具时,Animate将把形状绘制为单独的对象。与普通对象不同的是,可以使用“属性”面板轻松地修改基本矩形的边角半径,以及修改基本椭圆的开始角度、结束角度和内径。

 

填充(fill)是绘制对象的里面部分。现在您使用了纯褐色填充,但是也可以应用渐变或位图图像(比如JPEG文件)作为填充,也可以使指定对象没有填充。

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

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

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

在咖啡杯的表面创建从褐色转变成白色再转变成深褐色的渐变效果,以表现出圆滑的外观。

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

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

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

4. 选择最右边的颜色指针,然后为深褐色输入“B86241”,并按Enter(Windows)键或Return(Mac)键,应用该颜色。咖啡杯的渐变填充将在其表面上从浅褐色逐渐变为深褐色。

5. 在渐变定义条下单击,创建新的颜色指针。

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

7. 选择新的颜色指针,然后在十六进制值框中输入“FFFFFF”,为新颜色制定白色,并按Enter(Windows)键或Return(Mac)键,应用该颜色。

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

8. 单击“舞台”其他位置,取消选择“舞台”上的填充。选择“颜料桶”工具,并且确保取消选择“工具”面板底部的“锁定填充”选项()。

“锁定填充”选项将把当前渐变锁定到应用它的第一个形状,并使得后续的形状扩展使用该渐变。如果在咖啡杯的背面应用一种新的渐变,可取消选择“锁定填充”选项。

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

对咖啡杯的背面应用渐变。

提示:

 

如果“锁定填充”按钮在“工具”面板上不可见,请通过拖动左侧边缘扩展面板(如第1课所述)。这允许显示多列工具。

注意:

 

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

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

1. 选择“渐变变形”工具(“渐变变形”工具与“任意变形”工具组织在一起)。

2. 单击咖啡杯的正面,出现变形句柄。

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

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

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

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

注意:

 

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

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

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

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

3. 选择“位图填充”。

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

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

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

注意:

 

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

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

1. 选取“选择”工具。

2. 选取组成咖啡杯的所有形状。

3. 选择“修改”>“组合”。咖啡杯现在就是单个组。在选取它时,蓝色外框线表示其边界框。

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

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

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

注意:

 

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

 

使用自定义线条样式可以为笔触选择不同的线条样式。除了实线,也可以选择点、虚线或锯齿线,甚至可以自定义线条样式。在本课中,将使用“铅笔”工具创建代表咖啡飘起的香气的虚线。

为了让咖啡图更具个性,可以为它添加一些有趣的线条。

1. 在“时间轴”里创建一个新图层并命名为“coffee aroma”,这个图层用来画线条。

2. 在“工具”面板中,选择“铅笔”工具()。在“工具”面板底部选择“平滑”选项。

3. 在“属性”面板中,选择深褐色,Alpha值50%。

4. “笔触”选择15的大小。“样式”选择“实线”,“宽度”选择“宽度配置文件2”的设置。

5. 在咖啡上画几条波浪线。Animate会对每一条波浪线进行渲染,使每一条的宽度都是变化的。虽然它看起来像一个很复杂的形状,但整个对象是一个独立的、可选择的笔触。

提示:

 

您可以对像任何其他笔触一样编辑可变宽度笔触线条。使用“选择”和“部分选择”工具来弯曲曲线或移动锚点。

您可以巧妙地调整线条中在哪里出现凸起,以及有多少凸起。使用“宽度”工具进行这些编辑。

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

2. 将鼠标指针移动到一个可变宽度笔触上。锚点沿着线条出现,指示线的粗细部分位于何处。

3. 拖动任意定位点处的手柄以更改线的宽度。让其中一些限制和凸起变得更夸张。

4. 沿着笔触拖动锚点以移动其位置。

5. 沿着笔触任意位置拖动以添加新的锚点并定义该位置处的宽度。Animate在指针旁边显示一个小加号,表示您可以添加锚点。

提示:

 

当您只想修改可变宽度线的一侧时,按住Alt/Option。

提示:

 

要删除可变宽度线的锚点,请单击以选择锚点,然后按退格/删除。

色板是预设的颜色样本。通过“样本”面板(窗口>样本或Ctrl + F9/ Command + F9)访问它们。您还可以将您在图形中使用的颜色保存为新色板,以便以后可以随时调用。

标签色板是具有特殊标记的色板,链接到正在使用它们的舞台上的图形。如果您在“样本”面板中更改了标签色板,所有使用这些标签色板的图形都将更新。

现在您将对用于咖啡杯香气上的棕色新建并保存一个色板。

1. 选取“选择”工具,然后单击咖啡杯上方的可变宽度笔触。

2. 打开“样本”面板(Ctrl + F9/ Command + F9),或单击“样本”图标。

“样本”面板打开后,在底部一行显示了默认的渐变颜色。

3. 单击“样本”面板底部的“创建一个新的色板”。新的色板将显示您选择的咖啡香气的确切颜色和透明度信息。

您将把保存的色板转换为带标记的色板,并将其用于所有咖啡香气。

1. 选择咖啡香气颜色样本后,单击“样本”面板底部的“转换为带标记的色板”。

将显示“带标记颜色的定义”对话框。

2. 在名称字段中输入“coffee steam”,然后单击“确定”按钮。

对话框关闭,新的标记色板出现在“样本”面板的“带标记的色板”部分中。

现在您将对所有的咖啡上方的香气使用新的带标记的色板。

1. 选取“选择”工具,按住Shift键,单击杯子上方全部的咖啡香气。

2. 打开“样本”面板。

3. 选择“coffee steam”标记的色板。

所选图形将使用带标记的色板作为其颜色。在“属性”面板中,颜色右下角的白色三角形指示表示这是一个带标记的色板。

当您必须更新您的项目时,带标记的色板的真实效果是显而易见的。假设艺术总监或您的客户不喜欢咖啡蒸汽的颜色。由于每条蒸汽都使用一个带标记的色板,您可以简单地更新带标记的色板的颜色,并使用该标记的色板更新所有使用该色板的图形。

1. 打开“样本”面板。

2. 在“样本”面板的“带标记的色板”部分中,双击“coffee steam”的色板。

将打开“标记颜色定义”对话框,其中包含名称和颜色信息。

3. 将颜色更改为不同的棕色色调。新颜色显示在颜色预览窗口的上半部分。单击“确定”关闭对话框。

新的颜色信息被保存,所有使用带标记色板的图形将更新为新颜色。

您已经使用过“选择”工具对形状的边缘进行拉动和推压来直观地制作曲线。为了更精确的控制,您可以使用“钢笔”工具。

现在您将创建一个舒缓,波浪形的背景图形。

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

2. 将图层拖动到图层的底部。

3. 锁定所有其他图层。

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

5. 将笔触颜色设置为深棕色,Alpha设置为100%。“样式”选择“极细线”选项,“宽度”选择“均匀”。

6. 单击舞台的左边缘建立第一个锚点来开始绘制形状。

7. 将鼠标指针移动到舞台上,然后按住鼠标按钮——不要释放!——放置下一个锚点。继续按住鼠标按钮并沿您希望线所在的方向继续拖动鼠标。您将从新锚点拖出一条方向线,当您释放鼠标按钮时,您将在两个锚点之间创建一条平滑的曲线。

要了解有关使用钢笔工具绘制的更多信息,请参阅侧栏“使用钢笔工具创建路径”。

8. 继续在舞台上向右移动鼠标,按住并拖出方向线以构建波形的轮廓。继续穿过舞台的右边缘,然后单击一次以设置角点。

9. 在上一个角点下方单击一次,然后在舞台上向左绘制一条波浪线,与第一条曲线类似(但不完全平行)。

注意不要将锚点直接放置在上一行的锚点下面,以便波形具有自然的轮廓。

10. 继续让下方波浪线通过舞台左边缘,然后在初始锚点下方单击以放置另一个角点。

  1. 单击第一个锚点来关闭形状。

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

  3. 将填充颜色设置为深棕色。

  4. 单击刚才创建的轮廓内部,以填充颜色。

15. 单击“选择”工具,然后单击轮廓以将其选中,按删除键删除笔触。

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

1. 选取“选择”工具。

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

3. 拖动曲线以编辑它的形状。

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

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

6. 把锚点拖到新位置或移动句柄,以美化总体形状。

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

1. 单击并按住“钢笔”工具,访问其下的隐藏工具。

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

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

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

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

使用钢笔工具创建路径

 

您可以使用“钢笔”工具创建笔直或弯曲、开放或闭合的路径。如果您不熟悉“钢笔”工具,一开始使用时可能会混淆。但若了解路径的元素以及如何使用钢笔工具创建这些元素,将使绘制路径变得更容易。

要创建直线路径,请单击鼠标按钮。第一次单击时,您将设置一个起点。此后您每次单击,都会在前一个点和当前点之间绘制一条直线。要使用钢笔工具绘制复杂的直线路径,只需继续添加点。

要创建曲线路径,请先按下鼠标按钮放置锚点,然后拖动以为该点创建方向线,并释放鼠标按钮。然后移动鼠标放置下一个锚点,并拖出另一组方向线。每个方向线末端的是方向点;方向线和点的位置确定了弯曲段的尺寸和形状。移动方向线和点会重新整形路径中的曲线。

创建直线

平滑曲线通过称为平滑点的锚点连接。尖锐的曲线路径通过角点连接。当在平滑点上移动方向线时,平滑点两侧的曲线段同时调整,但是当您移动角点上的方向线时,只有与方向线位于同一侧的曲线被调整。

创建曲线
A.曲线段
B.方向点
C.方向线
D.选定锚点
E.未选定的锚点

创建封闭路径

路径段和锚点在绘制后可以单独或作为一个组移动。当路径包含多段时,可以拖动单个锚点以调整路径的各个段,或选择路径中的所有锚点以编辑整个路径。使用“部分选取”工具来选择和调整锚点,路径段或整个路径。

封闭路径与开放路径的不同之处在于每个路径的结束方式。要结束一个开放路径,请选择“选择”工具或按Esc。要创建闭合路径,请将“钢笔”工具指针放在起点上(指针将显示一个小º符号),然后单击。关闭路径会自动结束路径。路径关闭后,钢笔工具指针出现一个小的*符号,表示您的下一次单击将开始一个新的路径。

接下来,您将创建第二个波浪,并使之与第一个波浪部分重叠。让第二个波浪稍微有点透明,来产生一种丰富的、有层次感的效果。透明度可应用于笔触或填充。

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

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

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

4. 选择“编辑”>“粘贴到当前位置”(Ctrl+Shift+V组合键或Command+Shift+V组合键)。

“粘贴到当前位置”命令可把复制的项目放到与复制它时完全相同的位置。

5. 选取“选择”工具,并把粘贴的形状稍微左移或右移,以使浪峰稍微偏移。

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

7. 在“颜色”面板中(选择“窗口”>“颜色”),将填充颜色设置为稍微不同的褐色色调(CC6666),然后把Alpha值更改为50%。

“颜色”面板底部的色板预留了最近选择的颜色,并通过出现在色板后面的灰色图案来表示透明度。

注意:

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

透明填充对创建阴影也是有用的,能够为图像增加深度感,可以为咖啡杯增加投影以及在“舞台”底部增加装饰性的阴影。

1. 选择“插入”>“时间轴”>“图层”,并将新图层命名为“shadow”。

2. 选择“插入”>“时间轴”>“图层”,并将第二个新图层命名为“big shadow”。

3. 将shadow图层和big shadow图层拖曳到图层的底部。

4. 选择“椭圆”工具。

5. “笔触”选择无,“填充”选择深褐色(#663300)并取Alpha的值为15%。

6. 在shadow图层中,在咖啡杯底部位置画一个椭圆。

7. 在big shadow图层,绘制一个更大的椭圆形,其顶部边缘延伸到舞台的底部下面。

重叠的透明椭圆形为图像增添了丰富,层次分明的样子。

虽然钢笔工具擅长制作精确的曲线,比如您在背景中所创建的波浪形状,但它还不能很好地创建自发的、富有表现力的图像。

要获得更好的绘制效果,可以使用“画笔”工具()。“画笔”工具允许您创建更生动和自由的形状,并让形状具有重复样式的边框和装饰图案。并且,与使用Animate创建的其他图形一样,使用“画笔”工具创建的形状仍然完全基于矢量。

您可以从几十个不同的画笔中进行选择,如果您没有找到可以使用的东西,您可以自定义画笔,甚至创建自己的画笔。

您将使用“画笔”工具为这幅咖啡馆名称和徽标的横幅广告添加一个小比萨饼图案。您将使用“画笔”工具来模拟粗糙的粉笔书写上面的字母,为咖啡馆品牌提供一点乡村氛围。

1. 在时间轴中,在其他图层之上添加一个新图层,并将其命名为“chalk”。

2. 选择“画笔”工具。在“属性”面板中,选择一个与您图稿中已有的红色和橙色产生对比的漂亮的笔触颜色。在这个例子中,我们选择了一个充满活力的黄色。

3. 在“填充和笔触”部分,笔触大小输入15。对于咖啡厅上的刻字这是一个很好的宽度。

4. 现在,选择笔刷样式,请单击“画笔库”按钮(“样式”菜单的右侧)。

打开“画笔库”面板。Animate将所有画笔样式在左侧按不同类别组织:箭头(Arrows)、艺术(Artistic)、装饰(Decorative)、线条艺术(Line art)、图案画笔(Pattern Brushes)和矢量包(Vector Pack)。

5. 选择其中一个类别并查看子类别,然后选择子类别来查看单个画笔样式。对于本案例,选择Artistic > Chalk Charcoal Pencil,然后双击Charcoal – Thick样式。

现在Charcoal – Thick画笔被添加到“样式”菜单中,并成为当前活动的画笔样式。

6. 现在,在您的咖啡杯旁边,用画笔手写出咖啡馆的名字“Mug’s Coffee”。

粉笔风格的字体看起来很复杂,但它由一条简单的矢量线所控制。如果选择“选择”或“部分选取”工具并单击其中一个字母,您可以看到每个字母内的笔触。可以使用“变形”工具按住并拉动笔触来移动或编辑它,就像处理任何其他矢量形状一样。

现在是时候在横幅广告周围添加装饰边框了。

1. 在所有其他图层之上创建一个新图层,并将其重命名为“border”。

2. 选择“线条”工具。在“属性”面板中单击“笔触颜色”,然后选择棕色或橙色,以便与其他背景图形协调一致。

3. 在“属性”面板中,单击“样式”旁边的“画笔库”按钮。

打开“画笔库”面板。

4. 选择Pattern Brushes> Dashed> Dashed Square 1.3。如果您发现更有吸引力的,也可以随便选择。双击您的选择。

Dashed Square 1.3的画笔被添加到样式菜单,它成为当前活动的画笔样式。

5. 在舞台的顶部边缘画一条长的水平线,在舞台底部画另一条。舞台顶部和底部的规则图案样式虚线与波浪图案和粉笔风格的字体就形成了完美的对比。

提示:

 

使用“线条”工具绘制时,按住Shift键可将工具控制为绘制水平或垂直的线条。

 

编辑和创建您自己的艺术或图案画笔

 

您可能无法在画笔库中找到您喜欢的画笔,或者您的项目可能需要非常特定的东西。无论在哪种情况下,您都可以编辑现有画笔,也可以创建一个全新的画笔。图案画笔沿着笔触重复同一个形状,而艺术画笔则顺着笔触伸展基本艺术图案。

要编辑画笔,请单击“属性”面板中“样式”菜单旁边的“编辑笔触样式”按钮。

将出现“画笔选项”对话框,其中包含多个选项以控制画笔应用到基础形状上的方式。

艺术画笔和图案画笔有不同的选项。尝试不同的间距、形状重复或拉伸的方式以及如何处理角部和重叠的选项。当您对新画笔满意后,单击“添加”将自定义画笔添加到样式菜单。

要创建一个全新的画笔,首先在舞台上创建一些想要基于该画笔的形状。例如,假设要创建火车轨道,请先创建一个应用该样式画笔的基本作品。

在舞台上选择该作品;然后在“属性”面板中“样式”菜单旁单击“根据所选内容创建新的画笔”按钮。

出现“画笔选项”面板。

从“类型”下拉菜单中,您可以选择艺术画笔或图案画笔,然后再对画笔选项进行细化。预览窗口显示了所选选项的结果。

输入新笔刷的名称,然后单击“添加”。您的新笔刷将被添加到您的样式菜单,可供您使用。

如果您已创建了新画笔或自定义现有画笔,则可以将其保存到画笔库。

1. 单击“属性”面板中的“管理画笔”按钮。

出现“管理文档画笔”对话框,显示您当前已添加到“样式”菜单中的画笔。它显示哪些是当前在舞台上使用的,哪些不是。

2. 选择要删除或保存到画笔库的画笔。您不能删除当前正在使用的画笔。

3. 如果将画笔保存到画笔库,它将出现在画笔库中名为“我的画笔”的类别中。

压力敏感的绘图板

 

Animate支持压敏绘图板(如Wacom绘图板)的输入,以控制可变宽度的笔触及艺术或图案画笔。用绘图笔用力按压会产生较宽的笔触,而轻轻地按压则产生较窄的笔触。您可以在“画笔选项”对话框中修改倾斜度或灵敏度百分比,以调整您创建形状的宽度范围。尝试在平板电脑上使用绘图笔来创作可变宽度笔触,以自然、直观的方式创建矢量图像。

{旋转舞台以方便绘制}

当您在普通纸上创作时,通常更容易通过旋转页面来获得更好的绘制或书写角度。在Animate中,您可以使用“旋转”工具对舞台执行相同的操作。

旋转工具在“工具”面板中的“手形工具”子选项中。

选择“旋转”工具,然后单击舞台以指定由十字准线指示的枢轴点。建立枢轴点后,拖动舞台以将其旋转到所需的角度。

单击舞台顶部的“舞台居中”按钮,可将舞台重置为其正常方向。

最后,添加一些文本来完成这幅插图。对于文本有很多的选项可供选择。对于本课所使用的HTML5 Canvas文件,您使用“静态文本”或者“动态文本”均可。

静态文本将使用您(或者设计师)的电脑上的字体来进行简单文本显示。当您在舞台上创建静态文本并发布到HTML5项目时,Animate会自动将字体转换为轮廓。这意味着您不必担心您的受众是否拥有所需的字体,而无法看到您所预期的文本效果。缺点是太多的文本会增加您的文件大小。

使用动态文本来利用Typekit或Google提供的网络字体。

通过Creative Cloud订阅,您可以获得由Typekit提供的数千种高质量的字体,通过Animate中的“属性”面板可直接访问。通过Google Fonts,可以获得高质量的开源字体。

在下一个任务中,您将为咖啡馆创建一个标签行以及其产品的一些说明。您将选择一个适当的网络字体并添加文本。

现在您将使用“文本”工具创建文本。

1. 选择最上面的图层。

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

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

4. 从“属性”面板的“文本类型”菜单中选择“动态文本”。

5. 在咖啡店名称下拖出一个文本框,从咖啡杯右侧开始,到舞台右边缘结束。

6. 开始输入。输入“Taste the Difference”。

文本可能不合适,可能它不是您想要的大小或字体。不要担心,您将在下一个任务中为文本框选择一种网络字体。

7. 单击“选择”工具,退出“文本”工具。

8. 在舞台上同一图层的标签行下方添加3个更小的文本:Coffee、Pastries和Free Wi-Fi。

现在,您将链接一个Web字体到项目中。确保您可以访问Internet,因为Animate将从Web检索可用字体的列表。添加Typekit字体和Google字体的过程非常相似。在此任务中,您将添加Typekit字体。

1. 选择“Taste the Difference”文本,然后在“属性”面板的“字符”部分中单击“添加Web字体”(其图标为地球仪),从弹出的菜单中选择Typekit。

Animate显示打开Typekit Web Fonts的页面。

2. 单击Get Started。

出现“Add Web Fonts”对话框。

这里列出所有可用的Typekit字体。您可以使用右侧的滚动条滚动它们。您还可以搜索特定字体,或使用排序方式或过滤器按钮缩小搜索范围。

3. 现在,仔细阅读字体的范围,选择一个您认为适合这个横幅广告的。在示例文本下单击您选择字体的名称。

有关所选字体的更多详细信息将被显示,包括不同的样式(斜体、粗体等),其分类(衬线或无衬线)等。

4. 单击“SELECT”按钮。

“SELECT”按钮变为蓝色,标签变为已选择。

5. 单击“OK”。对话框关闭,所选的网络字体将添加到您的项目中。

6. 在“属性”面板的“字符”部分,从“系列”菜单中选择新添加的网络字体。Web字体列在菜单的最顶部。

您选择的Typekit Web字体将应用于舞台上的文本框。选择一种与作品完美搭配的颜色。在“属性”面板中调整字体大小和/或间距(间距在“段落”部分),以使所有文本在空间中合适地展现。

7. 选择其他3个文本,并使用“系列”菜单应用相同的网络字体。

添加Typekit网络字体后,您必须确定要托管HTML5项目的域。对于Google字体,您不需要执行这些步骤。

1. 选择“文件”>“发布设置”。出现“发布设置”对话框。

2. 单击最右侧选项卡上的“Web字体”选项卡。

3. 在空白字段中,输入横幅广告将被托管的网址,包括http://前缀。由于您不会实际上传此示例项目,因此可以随便写一个虚拟的域名或将其留空。

4. 单击“确定”关闭对话框。

5. 选择“控制”>“测试”以测试项目。

Animate会在浏览器中显示该广告的预览效果。使用Web字体的测试影片输出仅用于预览。使用“文件”>“发布”选项生成要上传到服务器的最终文件。

如果您改变主意,您可以轻松地删除Typekit网络字体,并选择一个不同的。

1. 选择使用要删除的Web字体的文本。

2. 通过选择不同的字体取消选择字体。

在此示例中,取消选择Merriweather字体,并选择_sans字体。

3. 单击“添加Web字体”按钮,然后选择Typekit以打开“添加Typekit Web字体”对话框。

4. 单击所选字体。Animate显示为项目选择的所有字体(由蓝色复选标记指示)。

如果字体有灰色复选标记,则表示您仍在舞台上的某些文本中使用它。在从项目中删除字体之前,必须从文本的每一位中取消选择字体。

5. 通过单击字体来取消选择字体。

现在,“所选字体”区域中不显示任何字体。

6. 单击“确定”。“添加Web字体”对话框关闭。Web字体将从“属性”面板中的“系列”菜单中删除。

搜索正确的字体

 

“添加Web字体”(Add Web Fonts)对话框提供了可帮助您为项目快速方便地找到正确字体的工具。每种字体均显示A、B、C、D四个字母的大小写形式的预览效果。如果要查看更多详细信息,请单击字体名称。示例句子显示了所有不同的风格变体(斜体、粗体、正常等)。您可以使用“排序”(Sort By)按钮组织字体,也可以使用“筛选”(Filter)按钮仅显示某些类型的字体,例如有衬线或无衬线字体,或具有粗和细转换的字体。

了解一点字体对创造优雅和有影响力的Animate项目很有价值。排版——创建字体形式的研究和实践—是设计中一个微妙但必不可少的部分。每个字母的形状及其与相邻字母和周围白色空间之间的互动影响着整体外观和感觉,以及您项目所包含的情感。

字体的两个主要类别是衬线serif和无衬线sans serif。

衬线Serif字体由构成字母笔画末端的小线来辨别。Times New Roman是最著名的衬线字体示例。Serif字体最适用于长段的文本,因为衬线有助于提高可读性。

Sans serif字体,则缺少在笔画的末端的装饰(“sans”是法语为“没有”)。无衬线字体更清洁,更加尖锐,通常被认为更现代。Helvetica是无衬线字体的最著名的例子。Sans serif字体通常用于较大的显示目的,例如标题或副标题。

其他类型的字体包括手写体,其模仿书法或装饰,通常更具表现性并且非常独特。在每个类别中有各种各样的变体,您需要时间去思考、搜索,并决定哪种字体最适合您的项目。

如果要精确匹配颜色,可以使用“滴管”工具()来对填充或笔触进行采样。使用滴管工具单击对象后,Animate将自动切换到加载了所选颜色及关联属性的“颜料桶”工具或“墨水瓶”工具,以便您可应用于其他对象。

您将使用“滴管”工具来采样其中一种背景波浪图案的颜色,并将其应用于3个较小的文本。

1. 选取“选择”工具。

2. 按着Shift键选择所有3个较小的文本:Coffee、Pastries、Free Wi-Fi。

3. 选择“滴管”工具。

4. 单击dark brown wave图层中形状的填充。

所选择的3个文本的颜色现在变为了与dark brown wave图层的填充相同的颜色。使用相同的颜色有助于统一作品风格。

最后,您将整理文本,使布局有条理。虽然您可以使用标尺(“视图”>“标尺”)和网格(“视图”>“网格”>“显示网格”)来帮助定位对象,在这里您将使用“对齐”面板,当您处理多个对象时,它更有效。您还可以依靠在舞台上移动对象时显示的智能向导来帮您更好地进行布局。

“对齐”面板,您可能会猜到,可以水平或者垂直对齐任何数量的选定对象。它还可以均匀地分布对象。

1. 选取“选择”工具。

2. 选择第一小段文字,Coffee。

3. 向左或向右移动文本框,直到智能向导出现。将所选文本的左边缘与其上方较大文本的左边缘对齐。

4. 选择第3小段文字,Free Wi-Fi。

5. 向左或向右移动文本,直到出现智能向导。将所选文本的右边缘与其上方较大文本的右边缘对齐。

6. 选择所有3个小文本。

7. 打开“对齐”面板(“窗口”>“对齐”)。

8. 如果已选择“与舞台对齐”选项,请取消选择。单击“底对齐”按钮。

Animate将对齐文本的底部边缘。

9. 单击“水平平均间隔”按钮。调整所选文本以使它们之间的空间变得均匀。

提示:

 

您可能需要锁定较低的图层,这样就不会意外地选择较低图层中的形状。

您已经完成了您的作品,由一个简单的分层设计的插图和文本元素组成。但是,您可能仍需要执行其他步骤,以便对其进行优化,以便在最终的发布环境中显示。

矢量作品,特别是具有复杂曲线和许多形状和不同线条风格的作品,可能很耗费处理器资源,并且可能在性能不足的移动设备上无法正常播放。“转换为位图”命令提供了一种将舞台上所选作品转换为单个位图的方法,该方法将降低对处理器能力的要求。

一旦您将对象转换为位图,您可以移动它,而不必担心它与底层形状合并。但是,该图形不能再被Animate的编辑工具编辑。

1. 选取“选择”工具。

2. 解锁图层。选择coffee aroma图层中的咖啡波浪香气线,以及coffee cup图层中的咖啡组。

3. 选择“修改”>“转换为位图”。

Animate将一杯咖啡和波浪线转换为单个位图,并将位图存储在“库”面板中。

选择“编辑”>“撤消”(Ctrl + Z / Command + Z)可撤销到位图的转换,并将咖啡杯和香气笔画还原为矢量图形。

如果您想要一个PNG、JPG或GIF格式的简单图像文件,请使用导出图像面板选择格式并调整压缩选项以获得最佳的Web下载性能。

1. 选择“文件”>“导出”>“导出图像”。将打开“导出图像”对话框。

2. 选择适当的文件格式,选择压缩量,选择一个调色板,并比较不同的设置以权衡图像质量和文件大小。您还可以调整图像大小。

Animate既为创建引人注目的、丰富和复杂的图形和文本相结合的作品提供了强大的创作环境,也提供了这种极具灵活性的输出选项,这将非常有助于推动您所有创意上的追求。

注意:

 

如果您的Animate文档包含多个帧,您还可以选择将其导出为动画GIF。

{将作品导出为SVG}

可缩放矢量图形(SVG)是一种常见的基于XML的格式,用于在浏览器中显示矢量图形。您可以将最终作品从Animate导出为SVG,嵌入或链接任何位图图像。导出的SVG将生成项目的静态图像。但是,SVG只支持静态文本。

要将作品导出为SVG,请执行以下操作:

1. 选择“文件”>“导出”>“导出图像(旧版)”。

2. 从文件格式菜单中,选择SVG图像(*.svg),然后单击“保存”按钮。

3. 在出现的ExportSVG对话框中,选择图像位置中的“嵌入”。

“图像位置”选项确定位图图像是编码到SVG文件还是保存为单独的文件,并链接到您的SVG。嵌入图像会创建较大的SVG文件,而链接允许您轻松地交换和编辑图像。

4. 单击“确定”按钮。

Animate导出具有在文本文件中编码的任何图像数据的SVG文件。SVG文档是一个标记为HTML文档的文本文件。所有视觉信息,包括角点、曲线、文本和颜色信息,都以紧凑的形式编码。

当您在浏览器中打开SVG文件时,它会渲染图像,并保留所有矢量信息。曲线在放大时仍然会保持清晰,并且在您构图中的任何静态文本都是可选择的。

1. Animate中的3种绘制模式是什么,它们有什么不同?

2. Animate中的各种选择工具分别在什么时候使用?

3. 您可以使用“宽度”工具做什么?

4. 艺术画笔和图案画笔之间有什么区别?

5. 什么是Web字体,以及如何在HTML5 Canvas文档中使用它们?

6. “对齐”面板有什么作用?

1. 3种绘制模式是合并绘制模式、对象绘制模式和基本绘图模式。

2. Animate包括3个选择工具:“选择”工具,“部分选取”工具和“套索”工具。

3. 使用“宽度”工具可以编辑笔触的宽度。您可以拖动任何锚点的手柄条以展开
或缩小宽度,添加或删除锚点,或沿着笔触移动锚点。

4. 艺术画笔使用基本形状并对其拉伸以匹配矢量笔触,用于模拟一种富于表达性、
创造性和美术性的标记。图案画笔则使用重复的基本形状来创建装饰图案。

5. Web字体是专门为在线查看而创建的在服务器上托管的字体。Animate提供了
Typekit和Google Fonts两种Web字体,可用于HTML5 Canvas文档中。

6. “对齐”面板可水平或垂直对齐任意数量的选定元素,并可让这些元素均匀分布。


相关图书

计算机图形学入门:3D渲染指南
计算机图形学入门:3D渲染指南
Creo Parametric 8 中文版从入门到精通
Creo Parametric 8 中文版从入门到精通
Origin科技绘图与数据分析实战
Origin科技绘图与数据分析实战
UG NX中文版三维电气布线设计
UG NX中文版三维电气布线设计
趣学3D One——青少年三维创意与设计(第2版)
趣学3D One——青少年三维创意与设计(第2版)
AutoCAD 2020中文版三维造型设计从入门到精通
AutoCAD 2020中文版三维造型设计从入门到精通

相关文章

相关课程