教程：在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軟件的人更容易學習和使用。