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

首页

科技周边

IT业界

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

Jennifer Aniston

Feb 21, 2025 am 11:46 AM

教程：在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>// 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></len></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文件。可以通过选择“导入”来通过“文件”菜单完成。然后，您可以导航到要导入的文件并选择它。