教程：在Adobe Edge中创建信息图-IT业界-PHP中文网

教程：在Adobe Edge中创建信息图

本文由Adobe赞助。感谢您支持使SitePoint成为可能的赞助商！ >该教程指导您通过在Adobe Edge Animate CC 2014中构建交互式信息图（见图1）。一路上，您将学习如何使用包含动画状态的交互式小部件将设计栩栩如生。如果您对信息图设计感兴趣，则可能想阅读本教程的伴侣文章！

请参阅codepen上的sitepoint（@sitepoint）的时间和树木演示。

钥匙要点

>
>开发诸如Edge Animate中的Timelinetrigger小部件之类的交互式元素，其中涉及创建图形，配置动画并通过编码添加交互性。
>创建一个细节式小部件以显示其他信息，该信息在触发时会为视图而动画，从而增强您的信息图的用户参与。
>集成JSON数据源以使用Edge Animate的功能将数据绑定到UI元素。通过将交互式触发器绑定到详细信息面板，允许在用户操作上显示交互式数据，然后在浏览器中预览您的工作以确保跨设备的功能。>

•Adobe Illustrator CC 2014

•Adobe Edge Animate CC 2014

内容：

该教程从头到尾创建信息图表：

>步骤1：在Illustrator CC 2014

中创建背景图形

>步骤2：在Edge Animate CC 2014

中构建静态组成

>
>
>步骤1：在Illustrator CC 2014
>教程假设您已经完成了为信息图收集数据，文本和故事或消息的重要工作。当您准备从概念到设计时，Adobe Photoshop CC 2014或Adobe Illustrator CC 2014是一个不错的起点。

b。花点时间探索设计。您可以看到该设计已完全实现，并且在某种程度上可以作为独立图形。尽管文本和时间轴触发器出现在模型中，但创建SVG文件时，您会省略这些层（请参见图3）。您将在Edge Animate中添加文本和触发器。

图4：Illustrator

1。设置响应式构图。

a。打开当前版本的Adobe Edge Animate CC 2014。您将使用新的响应缩放功能来创建一个设计，该设计将其大小缩放到屏幕尺寸的查看。

b。选择文件>新文件，以创建一个新文件。使用名称Infography.html将文件保存到项目文件夹中。请注意，Edge Animate还将支持文件也添加到项目文件夹中。

c。将属性面板中的阶段属性更新为以下（请参见图5）：>

•标题：时间和树木 •W：850 •H：800 •最小W：380 •最大W：1200 •中心舞台：检查，水平 •响应迅速的缩放，检查，两者都

一个。返回Illustrator，并确保您选择的树和背景层上都有所有图形。将图形复制到剪贴板。 b。返回到Edge动画，然后将图形粘贴到舞台上。请注意，出现一个对话框，要求您提供所得SVG文件的名称（请参见图6）。输入名称background.svg，然后按OK。

一个。使用Edge Animate中的文本工具在背景图形上方添加文本。（如果愿意，您可以从已完成的项目文件中复制文本。）在我的模型中，我只是使用Arial（或sans）字体，但是您可以在此处添加Web字体或您自己的字体选择。

标题：48 pt。

标题：21分。

时间表：12分。

4。保存文件。

的timelinetrigger窗口小部件的实例

遵循以下步骤构建Timelinetrigger窗口小部件：

1。创建小部件图形和符号。

a。选择椭圆工具，并绘制直径约30像素的圆。选择文本工具，然后在圆上方添加文本元素。确保文本元素层的名称是“文本”。

b。选择圆圈和文本，右键单击，然后选择转换为符号。在“创建符号”对话框中，命名符号TimelInetrigger，取消选中自动播放时间表选项，然后按OK。

c。请注意，圆和文本元素现在以单个分组对象的形式出现。双击该实例以输入其时间表。

d。在这一点上，您已经离开了主阶段时间表，现在正在Timelinetrigger符号时间轴上工作。您可以使用舞台区域左上方的舞台链接导航回舞台。

2。添加标签以将时间轴分为各节。

>

3。添加翻转状态动画。

4。添加推出状态动画。

b。再次选择“切换引脚工具”，然后将时间轴标记拖到2.5秒标记。将椭圆的宽度和高度比例更改为100％，然后将文本的字体尺寸更改为属性面板中的原始大小。根据需要将图形放置。

c。取消选择拨动引脚工具。

d。选择新的动画跨度，然后单击“放松”按钮。选择轻松的弹性选项。

5。沿时间表添加停止操作触发器。

a。将时间轴标记拖到1.5秒标记，然后单击插入触发按钮。请注意，触发图标出现在时间轴上，并且操作面板打开。

b。单击“选项”部分下方的“播放”按钮，然后单击“停止”按钮（请参见图10）。

d。关闭面板。

e。在2.5秒标记处添加另一个停止操作。

a。选择椭圆工具，然后在其他图形上方绘制一个圆圈。

b。选择圆并在属性面板中将其不透明度设置为0。

c。在属性面板中将圆层命名为“ hitarea”。您的时间轴在这一点上看起来应该像图11。

c。将以下代码复制并粘贴到操作面板中：

8。创建小部件实例并将其放置在时间轴上。

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

登录后复制

b。将现有的TimelInetrigger实例定位在时间轴图形的左边缘。

c。复制并粘贴实例以创建八个实例。重命名时间表或元素面板中的实例，以便它们遵循命名约定“触发[n]”，其中[n]是0到7之间的数字。

d。如图8所示，沿时间轴定位实例

9。在舞台上添加代码以初始化窗口小部件。

a。在编辑舞台时间轴时，请单击“元素”面板中舞台元素旁边的“打开操作”按钮。选择“构图”事件。

b。在操作面板中复制并粘贴以下代码：

10。保存文件。

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

登录后复制

从本质上讲，您刚刚学到的模式是一种在Edge Animate中创建按钮和元素的简便方法。您将返回在步骤6的时间轴触发器上工作。

步骤4：构建细节窗口小部件

接下来，您将创建一个显示详细文本的第二个小部件（请参见图12）。这次，您将使用两个符号。一个将布局三个文本字段，而另一个将动画屏幕上和屏幕上的布局。

一个。使用文本工具在屏幕上绘制三个文本元素。使用以下字体尺寸将它们放置为图12：

标题：72 pt。

选择这三个文本字段，然后将它们转换为一个名为lettapanel的符号。请注意，文本字段出现在“详细信息”实例中。 c。将符号实例放在舞台的左中央。 d。右键单击该实例，然后将其转换为一个名为efterialpanelanimation的符号。双击最终实例以输入详细信息PANELANIMATION时间轴。此步骤将文本布局符号嵌套在包装器符号中，因此文本布局符号可以更轻松地作为单个元素进行动画。
2。添加标签以在时间表中创建各节。

一个。将以下标签添加到详细信息panelanimation时间轴：

0.00：默认

0.01：show

3。设置默认状态。

4。添加节目状态动画。

一个。在1秒和1.75秒之间设置动画。面板应从目标位置以下几英寸的起点进行动画。 b。放松放松一下。

5。添加隐藏状态动画。

一个。在2秒和2.75秒之间设置动画。面板应从目标位置到上方几英寸的最终位置进行动画动画。最后，细节panelanimation时间表应该看起来像图13。

>将停止操作添加到节目的末尾，并隐藏动画跨越以在每个动画状态之后暂停文本。

保存文件。

在接下来的步骤中，您将导入数据源，并将所有小部件绑定在一起。

>步骤5：添加数据源

> 到目前为止，您已经构建了将显示您的信息图数据的视图，但是您仍然需要一个数据源。在此步骤中，您将导入提供的JSON文件，其中包含与时间表设计沿着八点有关的事实列表。您可以在文本编辑器中查看和编辑JSON文件，例如Adobe Dreamweaver CC 2014或Adobe Edge Code CC Preview。

请按照以下步骤导入详细信息列表：

1。通过单击元素面板中舞台元素旁边的“打开动作”按钮返回舞台的作曲事件。

2。在初始化代码下方复制并粘贴以下代码：

>

3。动作面板应该看起来像这样（请参见图14）。

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

登录后复制

图14：舞台作曲准备事件上的代码

>代码使用内置的jQuery getjson命令加载redwoods.json文件。在下一步中，您将将数据路由到视图。

>步骤6：将触发器绑定到详细面板

>您将通过在舞台时间轴和TimelInetrigger符号时间轴中添加更多代码来完成项目。目标是将每个触发实例回调到舞台时间轴。阶段时间表本质上是将数据模型绑定到HTML视图的控制器。

。

遵循以下步骤将小部件绑定到数据源：

1。使用回调函数更新阶段代码。

a。在操作面板中返回舞台的构图准备就绪。

<span>function handleEvent( event ){
</span>
	<span>if(!sym.getVariable("selected") )
</span>	<span>{
</span>		<span>switch( event ){
</span>			<span>case "mouseover":
</span>				sym<span>.play("rollover");
</span>				<span>break;
</span>			<span>case "mouseout":
</span>				sym<span>.play("rollout");
</span>				<span>break;
</span>			<span>case "click":
</span>				<span>// Callback to controller 
</span>
				<span>break;
</span>		<span>}
</span>	<span>}
</span><span>}
</span><span>// Relay trigger events to handleEvent
</span>sym<span>.$("Hitarea").on("mouseover mouseout click", function(e)
</span><span>{
</span>	<span>handleEvent(e.type);
</span><span>});
</span><span>// Set variable defaults
</span>sym<span>.setVariable("id", null);</span>

登录后复制

2。更新timelinetrigger代码。

a。在操作面板中返回到Timelinetrigger的创建COMENCOMPLETE代码。您可以输入Timelinetrigger的时间表并使用元素面板，也可以使用代码面板到达那里。

b。在“单击”事件处理程序中复制并粘贴以下代码，在“句柄”函数中：

<span>/******************************************************
</span><span> * Initialize timeline triggers by setting their
</span><span> * numbers and ids.
</span><span> */
</span><span>var len = 8;
</span><span>for(var i=0; i<len ; i++)
</span><span>{
</span>	<span>// Set trigger state
</span>	sym<span>.getSymbol("Trigger"+i).$("Text").html(i+1);
</span>	sym<span>.getSymbol("Trigger"+i).setVariable("id", i);
</span><span>}</span>

登录后复制

3。将支持功能添加到阶段代码。

一个。返回到舞台的作曲准备代码。 b。复制并粘贴其余的以下代码：

<span>/******************************************************
</span><span> * Sample data model to be visualized in the infographic
</span><span> * design. Each entry includes the year and a text snippet.
</span><span> */
</span><span>var dataModel;
</span>
$<span>.getJSON( "redwoods.json", function( json ){
</span>	dataModel <span>= json;
</span><span>});</span>

登录后复制

4。保存文件。

>选择文件>在浏览器中预览以预览您的工作。如果您遇到问题，将您的工作与完成的文件进行比较。

从这里去哪里

>尝试将您在教程中学到的概念介绍，并将更多的交互性和丰富的媒体纳入信息图。例如，您会注意到“额外信用”完成的文件具有播放按钮和一个可以播放幻灯片的计时器。解构文件，看看是否可以作为幻灯片设置自己的作品。玩得开心。

>常见问题（常见问题解答）有关使用Adobe Edge Animate CC 2014

创建信息图表的问题（常见问题解答）

什么是Adobe Edge Animate CC 2014，它是如何工作的？

Adobe Edge Animate CC 2014是一个强大的工具，可让您创建交互式和动画的Web内容。它使用标准Web技术的HTML5，JavaScript和CSS3来创建动画和交互式内容。这意味着可以在支持这些Web标准的任何设备上查看您创建的内容，包括智能手机和平板电脑。该界面类似于其他Adobe产品，使熟悉Adobe软件的人更容易学习和使用。

>如何开始使用Adobe Edge Animate CC 2014？开始创建信息图，您首先需要打开Adobe Edge动画并创建一个新项目。然后，您可以在项目中添加元素，例如文本，图像和形状，并使用时间轴和属性面板对其进行动画。您还可以向您的元素添加交互性，例如使它们响应诸如点击或鼠标动作之类的用户操作。

我可以将外部资产导入我的Adobe Edge Animate Project吗？

是的，是的，Adobe Edge Animate允许您导入外部资产，例如图像，音频文件甚至其他HTML文件。可以通过选择“导入”来通过“文件”菜单完成。然后，您可以导航到要导入的文件并选择它。

>如何通过使用Adobe Edge Animate中的“操作”面板添加信息图表中的交互性？该面板使您可以将操作添加到元素中，例如使它们响应用户点击或鼠标的动作。您还可以使用JavaScript创建更复杂的交互。

>在发布信息之前如何预览信息图？

Adobe Edge Animate允许您通过单击该应用程序在应用程序中直接预览信息图工具栏中的“预览”按钮。这将打开一个新的浏览器窗口，您可以在其中看到信息图表的外观和在真实的网络环境中的表现。

我可以直接从Adobe Edge Animate中发布我的信息图吗？ Edge Animate具有内置的发布功能，可让您将信息图直接发布到网络上。您可以选择将项目发布为静态HTML文件，也可以作为包含所有必要JavaScript和CSS文件的交互式HTML文件。

>如何优化移动设备的信息图？ > Adobe Edge Animate允许您创建适应不同屏幕尺寸的响应式设计。您可以使用“响应设计”功能来指定信息图应如何适应不同的屏幕尺寸，并且您可以使用“预览”功能预览信息图在不同设备上的外观。

>我可以使用Adobe Edge动画创建其他类型的Web内容？

是的，虽然本指南重点侧重于创建信息图表，但Adobe Edge Animate可用于创建广泛的Web内容，包括Interactive网站，在线广告和数字杂志。

>我是否需要知道如何代码来使用Adobe Edge Animate？

，同时知道如何代码可以提供帮助，不需要使用Adobe边缘动画。该软件具有视觉接口，可让您创建动画并添加交互性而无需编写任何代码。但是，如果您知道如何进行编码，则可以使用JavaScript创建更复杂的交互。

我在哪里可以了解有关使用Adobe Edge Animate的更多信息？学习如何使用Edge Animate，包括教程，用户指南和社区论坛，您可以在其中提出问题并与其他用户分享提示。您还可以在线找到许多教程和指南。

>

以上是教程：在Adobe Edge中创建信息图的详细内容。更多信息请关注PHP中文网其他相关文章！

教程：在Adobe Edge中创建信息图

•Adobe Illustrator CC 2014

>步骤1：在Illustrator CC 2014

1。设置响应式构图。

一个。 使用Edge Animate中的文本工具在背景图形上方添加文本。 （如果愿意，您可以从已完成的项目文件中复制文本。）在我的模型中，我只是使用Arial（或sans）字体，但是您可以在此处添加Web字体或您自己的字体选择。

1。创建小部件图形和符号。

>

5。沿时间表添加停止操作触发器。

接下来，您将创建一个显示详细文本的第二个小部件（请参见图12）。这次，您将使用两个符号。一个将布局三个文本字段，而另一个将动画屏幕上和屏幕上的布局。

0.00：默认

4。 添加节目状态动画。

5。 添加隐藏状态动画。

在接下来的步骤中，您将导入数据源，并将所有小部件绑定在一起。

>

3。 动作面板应该看起来像这样（请参见图14）。

。

a。 在操作面板中返回舞台的构图准备就绪。

2。 更新timelinetrigger代码。

3。 将支持功能添加到阶段代码。

4。 保存文件。

创建信息图表的问题（常见问题解答）

>如何通过使用Adobe Edge Animate中的“操作”面板添加信息图表中的交互性？该面板使您可以将操作添加到元素中，例如使它们响应用户点击或鼠标的动作。您还可以使用JavaScript创建更复杂的交互。

我可以直接从Adobe Edge Animate中发布我的信息图吗？ Edge Animate具有内置的发布功能，可让您将信息图直接发布到网络上。您可以选择将项目发布为静态HTML文件，也可以作为包含所有必要JavaScript和CSS文件的交互式HTML文件。

是的，虽然本指南重点侧重于创建信息图表，但Adobe Edge Animate可用于创建广泛的Web内容，包括Interactive网站，在线广告和数字杂志。

>

一个。使用Edge Animate中的文本工具在背景图形上方添加文本。（如果愿意，您可以从已完成的项目文件中复制文本。）在我的模型中，我只是使用Arial（或sans）字体，但是您可以在此处添加Web字体或您自己的字体选择。

4。添加节目状态动画。

5。添加隐藏状态动画。

3。动作面板应该看起来像这样（请参见图14）。

a。在操作面板中返回舞台的构图准备就绪。

2。更新timelinetrigger代码。

3。将支持功能添加到阶段代码。

4。保存文件。