Adobe Edge Preview 3初学者指南

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

【51CTO专稿】自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工作区。

#p#

创建第一个动画

现在您已熟悉了界面,可以开始在动作中添加内容了。首先将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,让我们为拉面摊添加一些座位。

使用原点创建过渡

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

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

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

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

2. 首先,关闭Auto-keyframes。

3. 单击舞台上的椅子。图12中所示的蓝点是转换原点。滚动它,光标将从罗盘更改为指针。

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

4. 将原点拖到包围框底部中间的手柄。

5. 仍然选中椅子,打开Auto-keyframes,将播放头拖到拖车分裂动画的末尾。

6. 将标记拖到时间轴上0:04.5处。

7. 在属性面板中,与比例区域中的宽度和高度不同,将高度值更改为0。椅子将变得扁平,如果您拖拽播放头,会看到椅子在动画期间内长高。如果您还未移动原点,椅子将看起来从图形中间向上下伸展。

#p#

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

现在,在项目中,您已创建了一个非常有趣的动画,但还没有东西可将此标识为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. 将过渡带延长或缩短到控制时长。

#p#

将图形导入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. 关键帧可手动添加。

#p#

重用动作来创建循环

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

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

责任编辑:徐川 来源: 51CTO
相关推荐

2013-04-08 16:35:52

Adobe Edge

2022-04-24 15:21:01

MarkdownHTML

2010-06-13 11:13:38

UML初学者指南

2022-07-22 13:14:57

TypeScript指南

2023-07-03 15:05:07

预测分析大数据

2021-05-10 08:50:32

网络管理网络网络性能

2022-03-28 09:52:42

JavaScript语言

2023-07-28 07:31:52

JavaScriptasyncawait

2022-09-05 15:36:39

Linux日志记录syslogd

2022-10-10 15:28:45

负载均衡

2023-02-10 08:37:28

2012-03-14 10:56:23

web app

2014-04-01 10:20:00

开源Rails

2020-08-16 13:10:46

TensorFlow深度学习数据集

2023-02-19 15:31:09

架构软件开发代码

2010-08-26 15:47:09

vsftpd安装

2011-03-02 10:57:27

vsFTPd

2018-10-28 16:14:55

Reactreact.js前端

2021-09-08 12:29:21

物联网IOT

2021-05-06 09:00:00

JavaScript静态代码开发
点赞
收藏

51CTO技术栈公众号