天堂а√在线地址中文在线,色婷婷久久一区二区三区麻豆

チュートリアルでは、データ、テキスト、およびインフォグラフィックのストーリーまたはメッセージを収集する重要な作業(yè)を既に行ったことを想定しています。コンセプトからデザインに移行する準備ができたら、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);
```
基本的に、あなたが學んだパターンは、エッジアニメーションでボタンと狀態(tài)の要素を作成する簡単な方法です。ステップ6でタイムライントリガーの作業(yè)に戻ります。

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

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

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

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

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

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

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

ステップ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。コールバック関數(shù)を使用してステージコードを更新します

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。ステージコードにサポート関數(shù)を追加します。

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

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

ここからどこへ行くか

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

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

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

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

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

このウェブサイトの聲明

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