教程：在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 CC 2014

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

>

>如何通過使用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。保存文件。