教程：在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文件。可以通過選擇“導入”來通過“文件”菜單完成。然後，您可以導航到要導入的文件並選擇它。

>

>如何通過使用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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

安卓首家接入DeepSeek背後：看見女性力量Mar 12, 2025 pm 12:27 PM

中国女性科技力量在AI领域的崛起：荣耀与DeepSeek合作背后的女性故事女性在科技领域的贡献日益显著。中国科技部数据显示，女性科技工作者数量庞大，在AI算法开发中展现出独特的社会价值敏感性。本文将聚焦荣耀手机，探究其率先接入DeepSeek大模型背后的女性团队力量，展现她们如何推动科技进步，重塑科技发展价值坐标系。2024年2月8日，荣耀正式上线DeepSeek-R1满血版大模型，成为安卓阵营首家接入DeepSeek的厂商，引发用户热烈反响。这一成功背后，女性团队成员在产品决策、技术攻坚和用户

DeepSeek'驚人”盈利：理論利潤率高達545%！Mar 12, 2025 pm 12:21 PM

DeepSeek公司在知乎發布技術文章，詳細介紹了其DeepSeek-V3/R1推理系統，並首次公開關鍵財務數據，引發業界關注。文章顯示，該系統單日成本利潤率高達545%，創下全球AI大模型盈利新高。 DeepSeek的低成本策略使其在市場競爭中佔據優勢。其模型訓練成本僅為同類產品的1%-5%，V3模型訓練成本僅為557.6萬美元，遠低於競爭對手。同時，R1的API定價僅為OpenAIo3-mini的1/7至1/2。這些數據證明了DeepSeek技術路線的商業可行性，也為AI大模型的高效盈利樹立了

美的推出首款DeepSeek空調：AI語音交互可實現40萬條指令！Mar 12, 2025 pm 12:18 PM

美的即将发布搭载DeepSeek大模型的首款空调——美的鲜净感空气机T6，发布会定于3月1日下午1点30分举行。这款空调配备先进的空气智驾系统，可根据环境智能调节温度、湿度和风速等参数。更重要的是，它集成了DeepSeek大模型，支持超过40万条AI语音指令。美的此举引发业界热议，尤其关注白电产品与大模型结合的意义。不同于传统空调简单的温度设定，美的鲜净感空气机T6能够理解更复杂、更模糊的指令，并根据家庭环境智能调节湿度等，显著提升用户体验。

2025年最佳10個最佳免費反向鏈接檢查器工具Mar 21, 2025 am 08:28 AM

網站建設只是第一步：SEO與反向鏈接的重要性建立網站只是將其轉化為寶貴營銷資產的第一步。您需要進行SEO優化，以提高網站在搜索引擎中的可見度，吸引潛在客戶。反向鏈接是提升網站排名的關鍵，它向谷歌和其他搜索引擎表明您的網站權威性和可信度。並非所有反向鏈接都有利：識別並避免有害鏈接並非所有反向鏈接都有益。有害鏈接會損害您的排名。優秀的免費反向鏈接檢查工具可以監控鏈接到您網站的來源，並提醒您注意有害鏈接。此外，您還可以分析競爭對手的鏈接策略，從中學習借鑒。免費反向鏈接檢查工具：您的SEO情報員

百度又一國民產品接入DeepSeek，是想開了還是跟風？Mar 12, 2025 pm 01:48 PM

DeepSeek-R1賦能百度文庫與網盤：深度思考與行動的完美融合短短一個月內，DeepSeek-R1已迅速融入眾多平台。百度憑藉大膽的戰略佈局，將DeepSeek作為第三方模型夥伴，整合進自身生態系統，這標誌著其“大模型搜索”生態戰略的重大進展。百度搜索和文心智能體平台率先接入DeepSeek及文心大模型的深度搜索功能，為用戶提供免費的AI搜索體驗。同時，“百度一下，你就知道”的經典slogan回歸，新版百度APP也整合了文心大模型和DeepSeek的能力，推出“AI搜索”、“全網信息提煉”