搜索

首页 >科技周边 >IT业界 >教程：在Adobe Edge中创建信息图

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

Jennifer Aniston
Jennifer Aniston原创
2025-02-21 11:46:08469浏览

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

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

>

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

钥匙要点

    首先在Adobe Illustrator CC 2014中创建Intographic的背景图形，以确保它适用于响应式布局，然后转换为SVG以供SVG用于Adobe Edge Animate CC2014。
  • >
    • >使用其响应缩放功能来确保设计适应各种屏幕尺寸。
  • >开发诸如Edge Animate中的Timelinetrigger小部件之类的交互式元素，其中涉及创建图形，配置动画并通过编码添加交互性。
    • >
  • >创建一个细节式小部件以显示其他信息，该信息在触发时会为视图而动画，从而增强您的信息图的用户参与。
  • >集成JSON数据源以使用Edge Animate的功能将数据绑定到UI元素。 通过将交互式触发器绑定到详细信息面板，允许在用户操作上显示交互式数据，然后在浏览器中预览您的工作以确保跨设备的功能。>
    • > Adob​​e工具：
    • 本教程涵盖了一个简单的工作流程：

•Adobe Illustrator CC 2014

•Adobe Edge Animate CC 2014

内容：


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

>步骤1：在Illustrator CC 2014

中创建背景图形

>步骤2：在Edge Animate CC 2014

中构建静态组成
    步骤3：构建Timelinetrigger窗口小部件
    • 步骤4：构建细节窗口小部件
    • >步骤5：添加数据源
  • >
    • >步骤6：将触发器绑定到详细面板
  • >
  • >步骤1：在Illustrator CC 2014
    • 中创建背景图形
  • >教程假设您已经完成了为信息图收集数据，文本和故事或消息的重要工作。当您准备从概念到设计时，Adobe Photoshop CC 2014或Adobe Illustrator CC 2014是一个不错的起点。
    • >在这种情况下，您将在Illustrator中产生背景图形。稍后，您将通过复制和粘贴在Edge Animate CC 2014中将矢量图形转换为SVG（可扩展的向量图形）格式。顾名思义，SVG文件是可扩展的，并且可以与响应式布局合作，您将可以很好地使用。构建边缘动画。

    遵循以下步骤创建背景图形：

    1。 设置项目。

      a。 从创意云下载并安装Adobe Illustrator CC 2014和Adobe Edge Animate CC 2014。

      b。 从文章中下载提供的文件，然后将其解压缩到您的桌面。

      c。 打开Infograpon_Project文件夹。在工作时，您将使用此文件夹作为项目文件夹（请参见图2）。查看资产文件夹中的Infoprication-design.ai文件。该文件包含设计的模型，以及您将在Edge Animate中用于背景的矢量图形。

    教程：在Adobe Edge中创建信息图图2：Infography_project文件夹和提供的文件
    >
    2。 在Illustrator中创建您的作品。

      a。 打开位于所提供文件的资产文件夹中的Infoprapon-Design.ai文件。双击启动Adobe Illustrator CC 2014的文件。

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

      图3：Illustrator文件中的设计组织 教程：在Adobe Edge中创建信息图c。 隐藏或锁定文本，触发和播放按钮层，然后选择树和背景层上的所有剩余图形（见图4）。 在下一步创建构图之后，这些图形将成为您的背景。
      >

      图4：Illustrator

      中选择的向量艺术品 教程：在Adobe Edge中创建信息图
      >步骤2：在Edge Animate中构建静态组成
      在这一点上，您已经准备好移动Animate CC 2014，以开始进行交互式组成。将Illustrator打开，您将返回以在以下步骤中复制背景图形。
      >
    按照以下步骤进行布局：

    1。设置响应式构图。

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

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

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

      •标题：时间和树木 •W：850 •H：800 •最小W：380 •最大W：1200 •中心舞台：检查，水平 •响应迅速的缩放，检查，两者都
    教程：在Adobe Edge中创建信息图
    2。从Illustrator复制并粘贴背景图形。

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

      图6：Edge Animate中的Pasting Illustrator图形创建SVG 教程：在Adobe Edge中创建信息图
      c。 将SVG图形放置在舞台上，以使其位于中心屏幕。 d。 查看项目文件夹，并注意将SVG图形保存到图像文件夹中。如果需要进行任何编辑，则可以在Illustrator中打开SVG图形。
      3。将文本添加为​​HTML元素。

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

    字体尺寸如下：
    标题：48 pt。
    标题：21分。
    • 时间表：12分。
      • b。选择所有文本，右键单击，然后选择转换为符号。在“创建符号”对话框中，命名符号网格文本，然后按OK。将文本在符号内部分组会清理舞台（请参见图7）。
    4。保存文件。
    教程：在Adobe Edge中创建信息图步骤3：构建Timelinetrigger窗口小部件
    >您会注意到模型设计中有编号的时间轴触发器。与其构建8个不同的图形，不如在Edge Animate中构建一个Timelinetrigger窗口小部件（请参见图8）。我所说的小部件只是一个可以使用小代码配置的边缘动画符号。有趣的部分是小部件与动画状态有自己的时间表。
    >
    教程：在Adobe Edge中创建信息图
    图8：沿时间线
    的timelinetrigger窗口小部件的实例

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

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

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

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

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

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

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

    >

      a。 在接下来的步骤中，您将使用时间轴工具来将动画状态添加到小部件。查看图9，以熟悉时间轴面板上的工具名称和位置。

      >

      教程：在Adobe Edge中创建信息图图9：时间表工具
      >
      b。 将时间轴标记拖到0标记，然后单击插入标签按钮以添加标签。将文本“默认”键入标签。

      c。 在1秒标记处添加一个名为“滚动”的标签，并在2秒标记中添加名为“推出”的另一个标签。您将导航到标签以播放动画的特定状态。

      >

    3。添加翻转状态动画。

      a。 将时间轴标记拖到1秒标记，然后单击“切换引脚”按钮选择它。请注意，蓝色引脚图标出现在时间轴标记上。

      b。 将时间轴标记拖到1.5秒标记，然后选择椭圆图形，然后更改其宽度和高度为150％。选择文本，然后将其字体大小更改为更大的数字。将缩放的图形放置在符号内，请注意，请注意，彩色动画跨度出现在固定点之间的时间表上。

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

    4。添加推出状态动画。

      a。 取消选择拨动引脚工具，然后将时间表标记移至2秒标记。

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

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

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

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

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

      >

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

      教程：在Adobe Edge中创建信息图
      >图10：添加停止操作时增强的操作面板工作流程
      c。 在选择目标部分下选择Timelinetrigger目标，然后按Enter键提交代码。

      d。 关闭面板。

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

      6。添加一个“ hitarea”元素。

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

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

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

    教程：在Adobe Edge中创建信息图>将代码添加到符号以控制状态。
    a。 单击“元素”面板中TimelInetrigger元素旁边的“打开操作”按钮，然后选择“创建”事件。 （请注意，此步骤假设您仍在Timelinetrigger时间轴中进行编辑。您还可以通过选择窗口>代码启动代码面板来访问Timelinetrigger操作。） b。 您可以使用操作面板编辑器来指导您添加操作，也可以将代码直接键入文本编辑器。从这里开始，您将粘贴代码片段到操作面板中。
    c。 将以下代码复制并粘贴到操作面板中：

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

      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>
    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：详细信息窗口小部件的布局 教程：在Adobe Edge中创建信息图遵循以下步骤构建小部件：
1。 创建文本布局和符号。

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

标题：72 pt。
    >标题：36 pt。

    • 详细信息：21 pt。

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

0.00：默认

    0.01：show
    0.02：hide
  • 3。 设置默认状态。
    • a。 在0标记处选择图形，然后将它们从舞台底部拖出。

4。 添加节目状态动画。

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

5。 添加隐藏状态动画。

    一个。 在2秒和2.75秒之间设置动画。面板应从目标位置到上方几英寸的最终位置进行动画动画。最后，细节panelanimation时间表应该看起来像图13。
教程：在Adobe Edge中创建信息图>图13：完整的详细信息PANELANIMATION TIMENILE
b。 将放松放松以放松。
>将停止操作添加到节目的末尾，并隐藏动画跨越以在每个动画状态之后暂停文本。

保存文件。

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

>步骤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：舞台作曲准备事件上的代码
教程：在Adobe Edge中创建信息图>
保存文件。
>代码使用内置的jQuery getjson命令加载redwoods.json文件。在下一步中，您将将数据路由到视图。

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

>

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

。

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

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

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

    b。 在其余的下面添加以下代码：

<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创建更复杂的交互。

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

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

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

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

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

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

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

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

>

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

>

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

JavaScript json html5 jquery css css3 html edge Static Object if switch for while select format try double using Interface Event copy number symbol function default this display position background animation ui photoshop dreamweaver Access Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Using Data Journalism to Generate Content Ideas下一篇：Content Research (or How to Tell If Your Content is Broken)

相关文章

查看更多