ホームページ >テクノロジー周辺機器 >IT業界 >チュートリアル：Adobe Edge Animateでインフォグラフィックを作成します

チュートリアル：Adobe Edge Animateでインフォグラフィックを作成します

Jennifer Anistonオリジナル: 2025-02-21 11:46:08469ブラウズ

この記事はAdobeが後援しました。 SitePointを可能にするスポンサーをサポートしてくれてありがとう！ Pen Adobe Edgeを参照してください。CodepenのSitePoint（@SitePoint）による時間と木のデモ。キーテイクアウト

Adobe Illustrator CC 2014でインフォグラフィックのバックグラウンドグラフィックを作成し、Adobe Edge Animate CC 2014で使用するためにSVGに変換された後、レスポンシブレイアウトに適していることを確認します。

エッジアニメーションのインフォグラフィックの静的部分を組み立て、レスポンシブスケーリング機能を利用して、デザインがさまざまな画面サイズに合わせて調整するようにします。

エッジアニメーションのタイムライントリガーウィジェットなどのインタラクティブな要素を開発します。これには、グラフィックの作成、アニメーションの構成、コーディングによるインタラクティブ性の追加が含まれます。

詳細なパネルウィジェットを作成して追加情報を表示します。これは、トリガーされたときに視界にアニメーション化し、ユーザーエンゲージメントがインフォグラフィックのエンゲージメントを強化します。 JSONデータソースを統合して、エッジアニメイトの機能を使用してデータをUI要素にバインドするために、インフォグラフィックをコンテンツに動的に設定します。インタラクティブトリガーを詳細パネルにバインディングしてプロジェクトを完成させ、ユーザーアクションでインタラクティブなデータ表示を可能にし、ブラウザで作業をプレビューして、デバイス全体の機能を確保します。

このチュートリアルは、
•Adobe Illustrator CC 2014
ステップ1：Illustrator CC 2014でバックグラウンドグラフィックを作成する

ステップ2：エッジアニメーションCC 2014で静的構成を構築します

ステップ3：TimeLinetriggerウィジェットを構築します

ステップ4：詳細パネルウィジェットを構築します

ステップ5：データソースを追加

ステップ6：トリガーを詳細パネルにバインドします

ステップ1：Illustrator CC 2014でバックグラウンドグラフィックを作成する

チュートリアルでは、データ、テキスト、およびインフォグラフィックのストーリーまたはメッセージを収集する重要な作業を既に行ったことを想定しています。コンセプトからデザインに移行する準備ができたら、Adobe Photoshop CC 2014またはAdobe Illustrator CC 2014は開始するのに適した場所です。
この場合、Illustratorでバックグラウンドグラフィックを作成します。その後、ベクトルグラフィックスをSVG（スケーラブルベクトルグラフィックス）形式にコピーしてエッジアニメーションCC 2014に貼り付けて変換します。名前が示唆するように、SVGファイルはスケーラブルであり、応答性のあるレイアウトでうまく機能しますエッジアニメーションをビルドします。

これらの手順に従って、背景グラフィックを作成します：

1。プロジェクトをセットアップします。
図2：infographic_projectフォルダーと提供されたファイル

2。イラストレーターでアートワークを作成します
```
function handleEvent( event ){

	if(!sym.getVariable("selected") )
	{
		switch( event ){
			case "mouseover":
				sym.play("rollover");
				break;
			case "mouseout":
				sym.play("rollout");
				break;
			case "click":
				// Callback to controller 

				break;
		}
	}
}
// Relay trigger events to handleEvent
sym.$("Hitarea").on("mouseover mouseout click", function(e)
{
	handleEvent(e.type);
});
// Set variable defaults
sym.setVariable("id", null);
```
基本的に、あなたが学んだパターンは、エッジアニメーションでボタンと状態の要素を作成する簡単な方法です。ステップ6でタイムライントリガーの作業に戻ります。

ステップ4：詳細パネルウィジェットを構築します

次に、詳細テキストを表示する2番目のウィジェットを作成します（図12を参照）。今回は、2つのシンボルを使用します。 1つは3つのテキストフィールドをレイアウトし、もう1つは画面上のレイアウトをアニメーション化します。

図12：詳細パネルウィジェットのレイアウト

これらの手順に従って、ウィジェットを構築します：

1。テキストレイアウトとシンボルを作成します
a。テキストツールを使用して、画面に3つのテキスト要素を描画します。次のフォントサイズを使用して、図12のように見えるように配置します。

タイトル：72 pt。
- 詳細：21 pt。
- 3つのテキストフィールドを選択し、それらを詳細パネルという名前のシンボルに変換します。テキストフィールドが詳細なインスタンスにグループ化されていることに注意してください。 c。ステージの左中央にシンボルインスタンスを配置します。 d。インスタンスを右クリックし、それを詳細パネラニメーションという名前のシンボルに変換します。結果のインスタンスをダブルクリックして、詳細なパネラン化タイムラインを入力します。このステップは、テキストレイアウトシンボルをラッパーシンボルにネストするため、テキストレイアウトシンボルを単一の要素としてより簡単にアニメーション化できます。
- a。次のラベルを詳細に追加します
0.02：非表示
3。デフォルトの状態をセットアップします。
4。 Show Stateアニメーションを追加します。
5。 Hide Stateアニメーションを追加します
a。 2秒と2.75秒のマークの間にアニメーションをセットアップします。パネルは、ターゲット位置から数インチ上の最終位置までアニメーション化する必要があります。最終的に、詳細パネラニメーションのタイムラインは図13のように見えます。
図13：記入済みの詳細パネライメーションタイムライン
b。緩和を後ろに簡単に設定します。
ショーの最後に停止アクションを追加し、アニメーションスパンを非表示にして、各アニメーション状態の後にテキストを一時停止します。
ファイルを保存します。

次のステップでは、データソースをインポートし、すべてのウィジェットを一緒にバインドします。

ステップ5：データソースを追加

これまでのところ、インフォグラフィックデータを表示するビューを構築しましたが、データソースが必要です。このステップでは、タイムラインデザインに沿った8つのポイントに関連する事実のリストを含む提供されたJSONファイルをインポートします。 Adobe DreamWeaver CC 2014やAdobe Edge Code CCプレビューなどのテキストエディターでJSONファイルを表示および編集できます。
これらの手順に従って、詳細リストをインポートしてください：

1。要素パネルのステージ要素の横にある[オープンアクション]ボタンをクリックして、ステージのCompositionReadyイベントに戻ります。
2。初期化コードの下の次のコードをコピーして貼り付けます。

3。アクションパネルはこのように見えるはずです（図14を参照）。

図14：ステージのCoputionReadyイベントのコード
```
function handleEvent( event ){

	if(!sym.getVariable("selected") )
	{
		switch( event ){
			case "mouseover":
				sym.play("rollover");
				break;
			case "mouseout":
				sym.play("rollout");
				break;
			case "click":
				// Callback to controller 

				break;
		}
	}
}
// Relay trigger events to handleEvent
sym.$("Hitarea").on("mouseover mouseout click", function(e)
{
	handleEvent(e.type);
});
// Set variable defaults
sym.setVariable("id", null);
```
ファイルを保存します。

コードは、組み込みのjquery getJsonコマンドを使用して、Redwoods.jsonファイルをロードします。次のステップでは、データをビューにルーティングします。
ステップ6：トリガーを詳細パネルにバインドします

ステージタイムラインとタイムライントリガーシンボルのタイムラインにもう少しコードを追加することで、プロジェクトを完了します。目標は、各トリガーインスタンスのコールバックをステージタイムラインにコールバックすることです。ステージのタイムラインは、基本的にデータモデルを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コードを更新します

3。ステージコードにサポート関数を追加します。

<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>

a。 StageのCompositionReadyコードに戻ります。 b。次のコードを残りのコードをコピーして貼り付けます。

4。ファイルを保存します。

<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>

[ファイル]> [ブラウザのプレビュー]を選択して、作業をプレビューします。問題が発生した場合、作業を参照のために完成したファイルと比較してください。

ここからどこへ行くか

チュートリアルで学んだ概念を取り、より多くのインタラクティブ性と豊かなメディアをインフォグラフィックに組み込むようにしてください。たとえば、「追加のクレジット」完了ファイルには、再生ボタンとスライドショーを再生できるタイマーがあることがわかります。ファイルを分解し、スライドショーとして自分の作品をセットアップできるかどうかを確認します。それを楽しんでください。

Adobe Edge Animate CC 2014を使用してインフォグラフィックスの作成に関するよくある質問（FAQ）

Adobe Edge Animate CC 2014とは何ですか？それはどのように機能しますか？

Adobe Edge Animate CC 2014は、インタラクティブでアニメーション化されたWebコンテンツを作成できる強力なツールです。標準のWebテクノロジーであるHTML5、JavaScript、およびCSS3を使用して、アニメーションとインタラクティブコンテンツを作成します。つまり、作成したコンテンツは、スマートフォンやタブレットなど、これらのWeb標準をサポートする任意のデバイスで表示できることを意味します。インターフェイスは他のAdobe製品に似ているため、Adobeソフトウェアに精通している人が学習と使用を容易にします。インフォグラフィックの作成を開始すると、最初にAdobe Edge Animateを開き、新しいプロジェクトを作成する必要があります。次に、テキスト、画像、形など、プロジェクトに要素を追加し、タイムラインとプロパティパネルを使用してそれらをアニメーション化できます。また、クリックやマウスの動きなどのユーザーアクションに応答させるなど、要素に対話性を追加することもできます。 Edge Animateを使用すると、画像、オーディオファイル、さらには他のHTMLファイルなどの外部資産をインポートできます。これは、「インポート」を選択して、「ファイル」メニューを使用して実行できます。その後、インポートするファイルに移動して選択できます。

インタラクティブ性をインフォグラフィックに追加するにはどうすればよいですか？

Adobe Edge Animateの「アクション」パネルを使用して、インタラクティブをインタラクティブに追加できます。このパネルを使用すると、ユーザーのクリックやマウスの動きに応答させるなど、要素にアクションを追加できます。 javaScriptを使用して、より複雑な相互作用を作成することもできます。

インフォグラフィックを公開する前にプレビューするにはどうすればよいですか？ツールバーの「プレビュー」ボタン。これにより、インフォグラフィックが実際のWeb環境でどのように見えるかを確認できる新しいブラウザウィンドウが開きます。 Edge Animateには、インフォグラフィックを直接Webに公開できる組み込みの公開機能があります。プロジェクトを静的HTMLファイル、または必要なすべてのJavaScriptおよびCSSファイルを含むインタラクティブなHTMLファイルとして公開することを選択できます。 > Adobe Edge Animateを使用すると、さまざまな画面サイズに適応するレスポンシブデザインを作成できます。「レスポンシブデザイン」機能を使用して、インフォグラフィックがさまざまな画面サイズに適応する方法を指定できます。また、「プレビュー」機能を使用してインフォグラフィックがさまざまなデバイスでどのように見えるかをプレビューできます。 Edge Animate他のタイプのWebコンテンツを作成しますか？ Webサイト、オンライン広告、デジタル雑誌。

Adobe Edge Animateを使用するためにコーディングする方法を知る必要がありますか？エッジアニメーション。ソフトウェアには、コードを作成せずにアニメーションを作成し、インタラクティブ性を追加できる視覚インターフェイスがあります。ただし、コーディングの方法がわかっている場合は、JavaScriptを使用してより複雑なインタラクションを作成できます。

以上がチュートリアル：Adobe Edge Animateでインフォグラフィックを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：データジャーナリズムを使用してコンテンツのアイデアを生成します次の記事：データジャーナリズムを使用してコンテンツのアイデアを生成します

続きを見る

チュートリアル：Adobe Edge Animateでインフォグラフィックを作成します

ステップ6：トリガーを詳細パネルにバインドします

1。プロジェクトをセットアップします。

2。イラストレーターでアートワークを作成します

1。応答性の構成をセットアップします。

2。 Illustratorから背景グラフィックをコピーして貼り付けます。

3。 html要素としてテキストを追加します。

ステップ3：TimeLinetriggerウィジェットを構築します

1。ウィジェットグラフィックとシンボルを作成します

a。次のステップでは、タイムラインツールを使用して、アニメーション状態をウィジェットに追加します。図9を見て、タイムラインパネルのツール名と場所に精通してください。

c。プロパティパネルの円層「Hitarea」に名前を付けます。あなたのタイムラインは、この時点で図11のように見えるはずです。

a。ステージのタイムラインを編集しているときに、要素パネルのステージ要素の横にあるオープンアクションボタンをクリックします。 CompusitionReadyイベントを選択してください。

0.02：非表示

4。 Show Stateアニメーションを追加します。

5。 Hide Stateアニメーションを追加します

これらの手順に従って、詳細リストをインポートしてください：

図14：ステージのCoputionReadyイベントのコード

ファイルを保存します。

これらの手順に従って、ウィジェットをデータにバインドします。ソース：

a。アクションパネルのステージの構成コードに戻ります。

2。 Timelinetriggerコードを更新します

a。 StageのCompositionReadyコードに戻ります。 b。次のコードを残りのコードをコピーして貼り付けます。

[ファイル]> [ブラウザのプレビュー]を選択して、作業をプレビューします。問題が発生した場合、作業を参照のために完成したファイルと比較してください。

Adobe Edge Animate CC 2014を使用してインフォグラフィックスの作成に関するよくある質問（FAQ）

インタラクティブ性をインフォグラフィックに追加するにはどうすればよいですか？

関連記事

チュートリアル：Adobe Edge Animateでインフォグラフィックを作成します

ステップ6：トリガーを詳細パネルにバインドします

1。 プロジェクトをセットアップします。

2。 イラストレーターでアートワークを作成します

1。応答性の構成をセットアップします。

2。 Illustratorから背景グラフィックをコピーして貼り付けます。

3。 html要素としてテキストを追加します。

ステップ3：TimeLinetriggerウィジェットを構築します

1。ウィジェットグラフィックとシンボルを作成します

a。 次のステップでは、タイムラインツールを使用して、アニメーション状態をウィジェットに追加します。図9を見て、タイムラインパネルのツール名と場所に精通してください。

c。 プロパティパネルの円層「Hitarea」に名前を付けます。あなたのタイムラインは、この時点で図11のように見えるはずです。

a。 ステージのタイムラインを編集しているときに、要素パネルのステージ要素の横にあるオープンアクションボタンをクリックします。 CompusitionReadyイベントを選択してください。

0.02：非表示

4。 Show Stateアニメーションを追加します。

5。 Hide Stateアニメーションを追加します

これらの手順に従って、詳細リストをインポートしてください：

図14：ステージのCoputionReadyイベントのコード

ファイルを保存します。

これらの手順に従って、ウィジェットをデータにバインドします。ソース：

a。 アクションパネルのステージの構成コードに戻ります。

2。 Timelinetriggerコードを更新します

a。 StageのCompositionReadyコードに戻ります。 b。 次のコードを残りのコードをコピーして貼り付けます。

[ファイル]> [ブラウザのプレビュー]を選択して、作業をプレビューします。問題が発生した場合、作業を参照のために完成したファイルと比較してください。

Adobe Edge Animate CC 2014を使用してインフォグラフィックスの作成に関するよくある質問（FAQ）

インタラクティブ性をインフォグラフィックに追加するにはどうすればよいですか？

関連記事

1。プロジェクトをセットアップします。

2。イラストレーターでアートワークを作成します

a。次のステップでは、タイムラインツールを使用して、アニメーション状態をウィジェットに追加します。図9を見て、タイムラインパネルのツール名と場所に精通してください。

c。プロパティパネルの円層「Hitarea」に名前を付けます。あなたのタイムラインは、この時点で図11のように見えるはずです。

a。ステージのタイムラインを編集しているときに、要素パネルのステージ要素の横にあるオープンアクションボタンをクリックします。 CompusitionReadyイベントを選択してください。

a。アクションパネルのステージの構成コードに戻ります。

a。 StageのCompositionReadyコードに戻ります。 b。次のコードを残りのコードをコピーして貼り付けます。