Adobe Creative Cloud
您可以免费注册Adobe创意云服务。Creative Cloud上还提供了诸多HTML5开发工具，包括可以免费下载HTML5动画制作工具Edge Animate，开发工具Edge Code，移动应用测试工具Edge Inspect等。
Creative Cloud的登录地址在此：http://t.cn/zTbTLKT
自Adobe Edge的第一个预览版于8月1日发布以来，此应用程序已被下载了超过150,000个副本。从这一事实看来，Edge不再是一个beta版本，它从那时 起已经历了3个主要版本。它赢得了如此多的关注，我们完全可以想象，Edge一定会成为Web设计人员工具箱中不可缺少的一部分。
出于某种原因，本教程主要介绍预览版3。预览版1专注于用户界面、图形和动作。预览版2是对预览版1的反馈的直接结果，进行了诸多实用性增强和错误修复。 预览版3是在Edge发展过程中引入交互式的版本，这使本文成为了介绍教程，演示如何应用和使用应用程序的各种动画和交互式功能的不错地方。事实上，本教 程的目的在于让您在非常短的时间内快速上手使用Edge。开始之前：
(1)下载并安装Edge（免费，仅英文版）。
(2)下载并解压范例文件。
入门
下载并打开范例文件后，您将看到一个Exercise文件夹，其中包含ramen_rahko_begin.edge文件和其他许多文件（参见图1）。这些文件不应移动或更改，除非您被要求这么做。原因在于，简单来讲，.edge文件只是一个“shell”，指向并使用您在使用Edge时创建的各种JavaScript、HTML、CSS文件。如果删除其中一个文件，您将遇到故障。
记住这一点后，您就可以深入使用Edge并获得一定的乐趣了。
图1. .edge文件是在任何Edge项目的创作阶段创建的一个文件集合。
双击ramen_rahko_begin.edge文件启动Edge。当该文件打开时，您将看到Edge界面，如图2所示。界面的各个区域包括：
(1)舞台（Stage）：这是动作发生的地方。如果一个项任何时候都在舞台上可见，那么用户会在浏览器中看到它。请注意，舞台现在是居中的（这是预览版2中添加的一个功能）。
(2)属性（Properties）面板：就像它的兄弟产品Flash Professional一样，每个事物（包括舞台）都有属性。这些属性包括基本的属性（舞台的宽度、高度和颜色），也包括复杂的属性，比如圆角矩形、旋 转和在舞台上操作的对象的比例值。此面板也是上下文敏感的。例如，如果您选择一段文本，该面板将显示文本属性。如果选择舞台，您将看到舞台属性。
(3)时间轴（Timeline）面板：如果您使用过Flash Professional或After Effects，您一定熟悉时间轴面板。左上角的按钮确定关键帧、过渡以及甚至舞台元素如何显示。时间代码是“可拖拽的（scrubbable）”，这意 味着您可以拖动时间代码来在舞台上移动播放头。时间轴基于时间，而不是基于帧，如果您滑动时间轴底部的缩放工具，会将您的视图从1/4秒的增量放大到几毫 秒。这意味着您可以严格地控制动画的时间。
您也可以在时间轴上拖动播放头（一种称为“拖拽（Scrubbing）”的技术），以转到特定的时间点或预览动画。
在紧挨着播放头的下面是另一个有用的工具，称为“标记（Mark）”。如果您是Flash Professional或视频制作者，最初很容易将标记视为时间轴上准确表示发生更改的位置的提示点。但标记稍有不同，因为它与播放头关系紧密，可用于设置动画的开始到结束点的持续时间。
(4)元素（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按钮减少时间轴扎乱。
别走开，下页内容更精彩~
#p#
删除和延长过渡
两个钻石型图标表示标记动画开始和结束点的关键帧。如果您希望仅移动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，让我们为拉面摊添加一些座位。
别走开，下页内容更精彩~
#p#
使用原点创建过渡
如果查看时间轴和舞台，您可能想知道，“椅子在哪里呢？”它们就在那里，只是不可见。您之前已经看到，这是一个具有大量图层的复杂时间轴。一种良好的开发习惯是关闭图层的可视性，直到您需要它。以下是让椅子可见的方法：
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执行普通的工作。
别走开，下页内容更精彩~
#p#
向动画添加“受控的随机性”
如果您将播放头移动到动画开始处并按下空格键，字母将立即弹入到横幅上。我们将修复该问题，延长字母出现的持续时间。我将介绍如何对一个字母这么做，剩余字母留给您完成。
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，我们将手动添加它们。将播放头移动到时间轴上的3.75秒处。
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. 倒退并播放影片。
别走开，下页内容更精彩~
#p#
添加一个代码段来循环动画
预览版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完成更多工作。
