Adobe Edge Preview 3初学者指南

作者 Tom Green 发布于 2011年12月20日

领域

运维 & 基础架构,

过程 & 实践,

架构 & 设计,

语言 & 开发

主题

Adobe ,

RIA

分享到

目录

• 入门
• 遇见明星：她就是Rahko！
• 延伸阅读

要求

必备知识

对创建交互式动画感兴趣。

其他需求

Edge Preview

用户级别

初级

范例文件

• RahkosRamen_Exercise.zip

自Adobe Edge的第一个预览版于8月1日发布以来，此应用程序已被下载了超过150,000个副本。从这一事实看来，Edge不再是一个beta版本，它从那时起已经历了3个主要版本。它赢得了如此多的关注，我们完全可以想象，Edge一定会成为Web设计人员工具箱中不可缺少的一部分。

出于某种原因，本教程主要介绍预览版3。预览版1专注于用户界面、图形和动作。预览版2是对预览版1的反馈的直接结果，进行了诸多实用性增强和错误修复。预览版3是在Edge发展过程中引入交互式的版本，这使本文成为了介绍教程，演示如何应用和使用应用程序的各种动画和交互式功能的不错地方。事实上，本教程的目的在于让您在非常短的时间内快速上手使用Edge。开始之前：

• 下载并安装Edge（免费，仅英文版）。
• 下载并解压范例文件。

入门

下载并打开范例文件后，您将看到一个Exercise文件夹，其中包含ramen_rahko_begin.edge文件和其他许多文件（参见图1）。这些文件不应移动或更改，除非您被要求这么做。原因在于，简单来讲，.edge文件只是一个“shell”，指向并使用您在使用Edge时创建的各种JavaScript、HTML、CSS文件。如果删除其中一个文件，您将遇到故障。

记住这一点后，您就可以深入使用Edge并获得一定的乐趣了。

图1. .edge文件是在任何Edge项目的创作阶段创建的一个文件集合。

双击ramen_rahko_begin.edge文件启动Edge。当该文件打开时，您将看到Edge界面，如图2所示。界面的各个区域包括：

• 舞台（Stage）：这是动作发生的地方。如果一个项任何时候都在舞台上可见，那么用户会在浏览器中看到它。请注意，舞台现在是居中的（这是预览版2中添加的一个功能）。
• 属性（Properties）面板：就像它的兄弟产品Flash Professional一样，每个事物（包括舞台）都有属性。这些属性包括基本的属性（舞台的宽度、高度和颜色），也包括复杂的属性，比如圆角矩形、旋转和在舞台上操作的对象的比例值。此面板也是上下文敏感的。例如，如果您选择一段文本，该面板将显示文本属性。如果选择舞台，您将看到舞台属性。
• 时间轴（Timeline）面板：如果您使用过Flash Professional或After Effects，您一定熟悉时间轴面板。左上角的按钮确定关键帧、过渡以及甚至舞台元素如何显示。时间代码是“可拖拽的（scrubbable）”，这意味着您可以拖动时间代码来在舞台上移动播放头。时间轴基于时间，而不是基于帧，如果您滑动时间轴底部的缩放工具，会将您的视图从1/4秒的增量放大到几毫秒。这意味着您可以严格地控制动画的时间。

您也可以在时间轴上拖动播放头（一种称为“拖拽（Scrubbing）”的技术），以转到特定的时间点或预览动画。

在紧挨着播放头的下面是另一个有用的工具，称为“标记（Mark）”。如果您是Flash Professional或视频制作者，最初很容易将标记视为时间轴上准确表示发生更改的位置的提示点。但标记稍有不同，因为它与播放头关系紧密，可用于设置动画的开始到结束点的持续时间。

• 元素（Elements）面板：此面板同时用于两个用途。它公开文档的DOM，并充当着您项目中的各项的“库”。元素在此面板中显示的顺序就是它们在时间轴上出现的顺序。如果您在图层顺序中上下移动时间轴图层，这一更改会在元素面板中迅速反映出来，反之亦然。

图2. Edge工作区。

创建第一个动画

现在您已熟悉了界面，可以开始在动作中添加内容了。首先将Airstream拖车从舞台左侧移动到它现在的位置。方法如下：

1. 选择Modify > Enable Smart Guides关闭智能参考线。智能参考线是在预览版2中引入的，是一种确保相对舞台和其他对象来准确放置对象的不错方法。在本例中，不需要它们。
2. 打开Auto-keyframes，方法是选择时间轴面板顶部的秒表图标。当秒表变为红色时，Auto-keyframing就会开启（参见图3）。

   

   图3. Auto-keyframes已开启。

3. 放大时间轴，直到看到时间轴上的0标记和1秒标记之间出现0:00.500。
4. 按住Shift键，将拖车的两部分都选中。
5. 将标记拖到时间轴上的0:00.500点，如图4所示。将标记从一个位置移动到另一个位置的过程称为“放置标记”。

   

   图4. 标记“放置”在时间轴上的半秒位置。

6. 按住Shift键，将拖车的两部分都拖到舞台的左侧。当释放鼠标时，您将立即看到时间轴上显示了两个过渡带（参见图5）。如果按空格键，拖车将移动到适当的位置。回顾一下您刚才的操作和所看到的情景。

   

   图5. 将拖车放在动作中。

   Edge中的动画与您过去在Flash Professional或After Effects中看到的稍有不同。第一个主要区别是标记的使用。首先，当标记是活动的时，所有动画会从播放头移动到标记。在本例中，您已将标记向前移动到时间轴中的半秒位置。这个位置确定了动画的结束点。因此，可以恰当地假设标记保留在0点，播放头移动到了半秒位置，此动画就会将拖车移出舞台。

   第二，您可能已注意到，当打开Auto-keyframes时，标记会变为白色。这个可见的提示会告诉您标记已启用。如果您希望将它关闭，可以单击该标记并按Opton/Alt+K。标记将变为灰色并返回到它在播放头下的正常位置。

   您可能已经猜到，动画模型中另一个基本区别是，只有动作中的对象会在时间轴上显示，图层条带表示动作的类型——在本例中，同时在X和Y轴上。尽管并不总是如此，但它会将您的注意力集中在动画中的对象上。

   为什么不“总是这样”呢？

7. 单击秒表下类似马丁尼杯的小图标。所有图层会立即变得可见（参见图6）。当选择时，此按钮仅显示动画的图层或者官方所称的元素。再次单击该按钮，动作中的所有元素都会消失。这是一种减少时间轴杂乱的方便方式。

   

   图6. 单击Only Show Animated Elements按钮减少时间轴扎乱。

删除和延长过渡

两个钻石型图标表示标记动画开始和结束点的关键帧。如果您希望仅移动X轴并延长动画，该怎么办？执行以下步骤：

1. 单击拖车的每一部分的平移（Y）图层。关键帧将颜色更改为金色。按下Delete键，过渡就会删除。对拖车的另一半重复此步骤。接下来看看如何延长动画的持续时间。
2. 按住Shift键，选择时间轴上关键帧上方的两条实色线。这些实色区域称为图层带，它们下方和关键帧之间的彩色区域称为过渡带。选择多个过渡的另一种方式是简单地简单地选择所有图层和过渡带。
3. 将光标移动到顶部图层带的末尾，光标将更改为一个剪刀图标。
4. 单击图层带并将它拖到时间轴上的3秒处，释放鼠标。两个图层现在都已延长到3秒。
5. 单击时间轴上的倒退按钮，将播放头返回到时间轴的起点。按下空格键预览动作。

使用智能参考线准确放置

在本教程前面，您关闭了智能参考线，因为它们不是必要的。在此练习中，您将发现这个新功能对在舞台上准确放置对象很有用。我们的计划是将Airstream拖车分裂开，以显示汽车背后的拉面摊。

1. 选择Modify > Enable Smart Guides打开此功能。
2. 打开Auto-keyframes，将播放头拖到时间轴上3.75秒的标记处。
3. 将标记拖回时间轴上3.00秒处。
4. 按住Shift键并将拖车的右半部分向拉面摊右边拖动。只要一开始拖动，紫色的水平和垂直智能参考线就会出现（参见图7）。当到达拉面摊右边时，将在选择区域和拉面摊的右边上同时出现垂直参考线。释放鼠标，选择区域将与拉面摊的右边吸附在一起。
5. 对拖车的左半部分重复此步骤。
6. 拖拽时间轴，拖车将分开，拉面摊将显示出来。



图7. 智能参考线大大简化了对象的对齐。

创建“弹出”式过渡

拉面摊始终存在，无论拖车是否分裂开。拉面摊应该在拖车的各部分移动时显示。方法如下：

1. 将播放头移动到时间轴上的0:00.00点，取消选择Generate Smooth Transitions（参见图8，它看起来像一个彗星）。您刚才所做的事让过渡突然出现——它“弹出”到空间中——而不是平滑地过渡。

   

   图8. 要使过渡突然出现，取消选择Generate Smooth Transitions。

2. 单击舞台上的拉面摊将其选中。
3. 单击属性面板中的不透明度关键帧（参见图9）。您应该注意的第一点是，拉面摊图层现在已显示在时间轴中，并且已向时间轴添加了一个不透明度关键帧。您还会发现，可以手动添加关键帧。

   

   图9. 关键帧可以手动添加，只需更改选定对象的属性值。

4. 将此关键帧的不透明度值减少为0。为此，您可以在属性面板上更改该值或直接在时间轴上更改该值。
5. 将播放头拖到拖车各部分开始分离的地方。将拉面摊的不透明度值更改为100%。最终的空关键帧会告诉您，拉面摊将弹出到视图中（参见图10）。

   

   图10. 一个空关键帧告诉您存在一个突然的过渡。

6. 倒退影片并按下空格键预览效果。请注意，拉面摊看起来像在两个拖车部分分离时从中“长”出来一样。
7. 取消选择Generate Smooth Transitions，让我们为拉面摊添加一些座位。

使用原点创建过渡

如果查看时间轴和舞台，您可能想知道，“椅子在哪里呢？”它们就在那里，只是不可见。您之前已经看到，这是一个具有大量图层的复杂时间轴。一种良好的开发习惯是关闭图层的可视性，直到您需要它。以下是让椅子可见的方法：

1. 向下滚动元素面板，直到找到椅子元素。请注意，此元素的可视性已关闭。单击这个点，将发生两件事：可视性图标打开，椅子元素出现在舞台上（参见图11）。但是它还不在时间轴上，因为您还未对它执行任何操作。

   

   图11：元素可视性可在您工作时减轻注意力的分散。

   椅子的安排是在拖车各部分分离时，让椅子从舞台底部升起来。

2. 首先，关闭Auto-keyframes。
3. 单击舞台上的椅子。图12中所示的蓝点是转换原点。滚动它，光标将从罗盘更改为指针。

   

   图12：图形拥有一个可用于过渡和转换的原点。

4. 将原点拖到包围框底部中间的手柄。
5. 仍然选中椅子，打开Auto-keyframes，将播放头拖到拖车分裂动画的末尾。
6. 将标记拖到时间轴上0:04.5处。
7. 在属性面板中，与比例区域中的宽度和高度不同，将高度值更改为0。椅子将变得扁平，如果您拖拽播放头，会看到椅子在动画期间内长高。如果您还未移动原点，椅子将看起来从图形中间向上下伸展。

创建具有一定缓动效果的标题序列

现在，在项目中，您已创建了一个非常有趣的动画，但还没有东西可将此标识为Rahko’s Ramen拉面摊。执行以下步骤，添加一个企业ID：

1. 找到元素面板中的横幅元素，打开它的可视性。
2. 将播放头移动到时间轴的2.5秒标记处，将标记移动到开始椅子动画的3.75秒处。
3. 选择该横幅并将它的不透明度值减少到0。
4. 在元素面板中，打开横幅元素上方的所有元素的可视性。名称中的字母（Rohko’s Ramen）将显示在横幅上。
5. 将播放头移动回时间轴上的3秒处，将标记留在原处。
6. 选择Rahko’s中的R，将它移动到舞台上。如果在此动画上拖拽时间轴，该字母将落到适当位置。让我们为它增添更多“活力”。
7. 选择该字母的过渡带。打开属性面板中的Easing（缓动）下拉列表，选择easeOutBounce（参见图13）。缓动是动画制作器的一种模仿重力或向动画添加逼真效果的一种技巧。您可以从29种基于jQuery的不同缓动效果中选择，对于缓动，最佳建议是仅在需要时使用它们。

   

   图13. 使用缓动向动画添加一定的逼真性。

让软件为您工作

数字世界的一句著名的格言是：“让软件为您工作。”对于字母，您可以考虑喝一杯咖啡，因为还有11个字母需要像前面练习中的字母R一样制作动画。Edge包含一种简洁的功能，它使您能够在到厨房泡一杯咖啡，然后返回到计算机之前，就完成剩余字符的动画制作过程。以下是具体方法：

1. 关闭标记（按Command/Control+K）并将播放头移动到R动画开始处。
2. 单击R图层的过渡带，选择Edit > Copy。整个动画现在都位于剪贴板上。
3. 按住Shift键，选择舞台上剩余的字母。
4. 选择Edit > Paste Special > Paste Transitions to Location（参见图14）。

   

   图14. 让Edge执行普通的工作。

向动画添加“受控的随机性”

如果您将播放头移动到动画开始处并按下空格键，字母将立即弹入到横幅上。我们将修复该问题，延长字母出现的持续时间。我将介绍如何对一个字母这么做，剩余字母留给您完成。

1. 选择Rahko’s中的A。
2. 将光标移动到过渡带的左边。光标将更改为剪刀形状。
3. 单击并将过渡带的左边向右拖动较短距离（参见图15）。这会使所选的字母A在R之后出现，并且移动的稍微快一点。如果您将过渡带的右边移动到左边，结果是，A进入视野的速度比R更快。这是在您的作品中创建户受控的随机性的不错方式。

   

   图15. 将过渡带延长或缩短到控制时长。

将图形导入Edge

有4种适合Web的图形格式可供Edge使用：JPEG、GIF、PNG和SVG。您的最佳指导就是用于此项目的目标浏览器和设备列表。例如，对PNG和SVG的支持在一些浏览器和设备中会出现错误，这意味着您的选择将是一种通用的格式。在此练习中，您将导入一个SVG图形，它是Rahko’s的徽标。

1. 选择File > Import，当Import对话框打开时，导航到您的Exercise文件夹。打开图形文件夹并选择Logo.svg。
2. 单击Open。该对话框将消失，如果您查看元素面板，将会看到徽标文件位于顶部。打开Logo元素的可视性。
3. 显然，徽标对于横幅而言太大了。关闭Auto-keyframes，在舞台上选中徽标，重新连接比例（Scale）属性并将该值更改为40%。
4. 将播放头放在时间轴上的3.0秒标记处，将标记拖到时间轴上的3.75秒处。这里的计划是让徽标在该区域淡入、增大并旋转两次。
5. 选中徽标后，在属性面板中使用以下值：
   • 不透明度：0%
   • 比例：20%
   • 旋转：720%（将此视为旋转两圈：360x2）
6. 将播放头拖到动画的开始处并按下空格键。您已创建了一个不断增大、旋转的徽标，它在3/4秒内淡入（参见图16）。

   

   图16. 可向对象应用多种过渡。

遇见明星：她就是Rahko！

所有动作就绪后，还有最后一部分要添加：那就是拉面皇后本身Rahko。我们的计划是让她与椅子同时出现。

1. 在元素面板中打开Rahko元素的可视性。Rahko将会出现。
2. 图形有点大。要准备显示她的外貌，关闭Auto-keyframes。这样做可以在制作动画前将图像调整到位。
3. 在舞台上选择Rohko，使用属性面板，使用比例属性将她的尺寸缩小到能放入窗口中。
4. 放置该角色，使她右侧运动鞋的后边接触到地图（参见图17）。

   

   图17. Rahko已放在舞台上。

   我们的计划是随着椅子从舞台底部升起，让Rahko淡入。不使用Auto-Keyframes，我们将手动添加它们。

5. 将播放头移动到时间轴上的3.75秒处。
6. 选中该图形，单击属性面板的不透明度区域旁边的Keyframe钻石图标。这将点亮Rahko图层并将在该图层中显示一个关键帧。
7. 将此关键帧的不透明度减少到0，方法是在属性面板中输入该值，或者双击过渡带中的不透明度值并输入0。
8. 将播放头移动到时间轴上的4.5秒标记处。
9. 单击不透明度带中的关键帧图标添加一个关键帧。将该值更改为100%（参见图18）。拖拽时间轴。

   

   图18. 关键帧可手动添加。

重用动作来创建循环

在此练习前面，我们强调了两点：“让软件为您工作”，以及过渡可复制并粘贴到时间轴中的不同位置。下面将更深入地分析这一点，创建此动画的循环。

1. 关闭Auto-Keyframes，将播放头移动到时间轴上的7秒标记处。
2. 选择时间轴中的椅子过渡带，将它复制到剪贴板。
3. 选择Edit > Paste Special > Paste Inverted。该过渡带将在7秒标记处出现，播放头将移动到过渡带的末尾。如果您拖拽时间轴，椅子将沉入舞台底部。
4. 按住Shift键，选择拖车两边的过渡带。
5. 复制所选元素并使用Paste Inverted命令将它们添加到时间轴。如果拖拽时间轴，您将看到拖车关闭并移出舞台。

   注意：这里讲解时有一个技巧。为什么不让拖车在移出舞台时完全消失？单击粘贴板以显示舞台属性。选择从溢出弹出菜单中隐藏。此选择会为舞台添加一种蒙板。

6. 将播放头移动到上一步中的动画开始处。
7. 选择拉面摊图层，复制选择元素并选择Paste Inverted。这次仅会出现关键帧。
8. 如果倒退动画并按空格键，您将看到已在非常短的时间内创建了一个循环（参见图19）。动画变得更加漂亮。

   

   图19. 循环很容易使用复制和粘贴功能创建。

9. 确保Auto-Keyframes已关闭，将播放头移动到时间轴的13秒标记处。
10. 在时间轴区域，选择您刚才创建的反转动画，确保拉面摊图层中的两个关键帧（它们将更改为金色）也已选中。
11. 复制并选择Paste Inverted。拖车将回滚到舞台上，打开，拉面摊出现，椅子增长到相应位置。
12. 倒退并播放影片。

添加一个代码段来循环动画

预览版3中新增的一项功能是添加代码段。代码段是一小段JavaScript代码，它们可添加到您的影片中以执行常见任务，比如循环。在此练习中，您将这么做。当影片播放完成时，您希望循环回时间轴上的5秒处。以下是具体方法：

1. 确保播放头位于时间轴末尾。
2. 滚动到时间轴面板顶部，单击Actions旁边类似一个小卷轴的小图标。此图标称为Open Timeline Actions图标。
3. 您将被提示添加一个事件。从弹出菜单选择complete事件（参见图20）。如果您没有看到该弹出窗口，可单击+按钮。

   

   图20. 您可以从4个时间轴事件中进行选择。

4. Default Timeline对话框现在将更改为向您显示一些可添加到时间轴的代码段（参见图21）。
5. 从列表中选择Go To和Play。当进行此选择时，将显示图21中所示的代码段。

   

   图21. 代码段可添加到时间轴，您可以使用您自己的值。

6. 将默认时间从1000（1秒）更改为5000（5秒）。您刚才所做的是编写一个代码段，它将播放头向回到时间轴上的5秒标记处，并从该点开始动画播放。
7. 关闭对话框，按Command/Ctrl+Return在浏览器中测试此项目。
8. 完成时，关闭浏览器并保存文件。

延伸阅读

本教程为您提供了实际使用Edge预览版3的每项主要功能的机会。您已了解了元素和时间轴面板之间的密切关系。我介绍了如何使用属性面板影响选择，如何延长和缩短动画的持续时间。您使用标记或手动创建方法创建了一些动画。我还介绍了多个性能提升因素，我个人最喜欢的是将整个动画序列复制并粘贴到时间轴中的能力，以及两种让软件为您所用的不错技术！您可以结合使用本版本中引入的代码段功能来学习此教程。

现在您已拥有使用Edge的一定经验，下一站应该是Edge实验室上的示例页面。下载一些示例。在Edge中打开它们。仔细分析它们，并开始学习如何使用Edge完成更多工作。

查看原文：Adobe Edge预览版3初学者指南

相关厂商内容

保持某些系统的高可用性，是一些企业的重中之重，如何设计？

海量数据处理，海量视频分发，架构热点难点，尽在架构师峰会！

相关赞助商

ArchSummit全球架构师峰会报名启动！7折优惠，5月31日截止！