Dieser Artikel wurde von Adobe gesponsert. Vielen Dank, dass Sie die Sponsoren unterstützt haben, die SidePoint erm?glichen!

Dieses Tutorial führt Sie durch den Bau einer interaktiven Infografik in Adobe Edge Animate CC 2014 (siehe Abbildung 1). Unterwegs lernen Sie, wie Sie Ihr Design mit interaktiven Widgets mit animierten Zust?nden zum Leben erwecken. Wenn Sie an Infografik -Design interessiert sind, m?chten Sie m?glicherweise das Begleitstück dieses Tutorials lesen!

Siehe den Stift Adobe Edge - der Zeit und der B?ume von SitePoint (@sinepoint) auf CodePen.

Key Takeaways

• Beginnen Sie mit der Erstellung der Hintergrundgrafik Ihrer Infografik im Adobe -Illustrator CC 2014, um sicherzustellen, dass sie für Responsive Layouts geeignet ist, wenn sie sp?ter in SVG konvertiert werden, um sie in Adobe Edge Animate CC 2014 zu verwenden.
• Vergr??ern Sie die statischen Teile Ihrer Infografik in Kantenanimate, wobei die reaktionsschnellen Skalierungsmerkmale verwendet werden, um sicherzustellen, dass sich das Design an verschiedene Bildschirmgr??en anpasst.
• Entwickeln Sie interaktive Elemente wie das Timelinetrigger -Widget in Edge Animate, das das Erstellen von Grafiken, das Konfigurieren von Animationen und das Hinzufügen von Interaktivit?t durch Codierung umfasst.
• Erstellen Sie ein Detailpanel -Widget, um zus?tzliche Informationen anzuzeigen, die beim Ausl?sten in Sichtweite angezeigt werden, wodurch das Benutzern Engagement Ihrer Infografik verbessert wird.
• Integrieren Sie eine JSON -Datenquelle, um Ihre Infografik dynamisch mit Inhalten zu füllen, wobei die Funktionen von Edge Animate verwendet werden, um Daten an UI -Elemente zu binden.
• Abschluss Ihres Projekts durch Bindung interaktiver Ausl?ser an das Detailpanel, sodass die interaktive Datenanzeige nach Benutzeraktionen angezeigt wird, und dann Ihre Arbeit in einem Browser voranzutreiben, um die Funktionalit?t über Ger?te hinweg zu gew?hrleisten.

Adobe -Tools:

Dieses Tutorial deckt einen einfachen Workflow mit:

ab

? Adobe Illustrator CC 2014
? Adobe Edge Animate CC 2014

Inhalt:

Dieses Tutorial führt durch die Erstellung einer Infografik -Komposition von Anfang bis Ende:

• Schritt 1: Erstellen Sie die Hintergrundgrafik in Illustrator CC 2014
• Schritt 2: Bauen Sie die statische Zusammensetzung in Edge Animate CC 2014
auf
Schritt 3: Erstellen Sie das Timelinetrigger -Widget
Schritt 4: Erstellen Sie das Detailpanel -Widget
Schritt 5: Fügen Sie eine Datenquelle
• hinzu
Schritt 6: Binden Sie die Ausl?ser an das Detailpanel

Schritt 1: Erstellen Sie die Hintergrundgrafik in Illustrator CC 2014

Das Tutorial geht davon aus, dass Sie bereits die wichtige Arbeit zum Sammeln von Daten, Text und einer Geschichte oder Nachricht für Ihre Infografik erledigt haben. Wenn Sie bereit sind, vom Konzept zum Design zu wechseln, ist Adobe Photoshop CC 2014 oder Adobe Illustrator CC 2014 ein guter Ausgangspunkt.

In diesem Fall produzieren Sie die Hintergrundgrafik in Illustrator. Sp?ter konvertieren Sie die Vektorgrafik in SVG -Format (skalierbare Vektorgrafik), indem Sie sie kopieren und in Edge Animate CC 2014 einfügen. Wie der Name vermuten l?sst, sind SVG -Dateien skalierbar und funktionieren gut mit dem reaktionsschnellen Layout, Sie werden Sie Rand animieren.

Befolgen Sie diese Schritte, um die Hintergrundgrafik zu erstellen:

1. Richten Sie das Projekt ein.

a. Laden Sie den Adobe Illustrator CC 2014 und Adobe Edge Animate CC 2014 aus der Creative Cloud herunter und installieren Sie sie.

b. Laden Sie die angegebenen Dateien aus dem Artikel herunter und entpacken Sie sie auf Ihren Desktop.

c. ?ffnen Sie den Ordner "Infographic_Project". Sie verwenden diesen Ordner als Projektordner, w?hrend Sie arbeiten (siehe Abbildung 2). Schauen Sie sich die Datei "Infografik-design.ai" im Ordner Assets. Diese Datei enth?lt das Modell für das Design und die Vektorgrafik, die Sie für Ihren Hintergrund in Edge Animate verwenden.

2. Erstellen Sie Ihr Kunstwerk in Illustrator.

a. ?ffnen Sie die Datei für Infografik-design.AI im Ordner Assets der angegebenen Dateien. Doppelklicken Sie auf die Datei, um den Adobe-Illustrator CC 2014 zu starten.

b. Nehmen Sie sich einen Moment Zeit, um das Design zu erkunden. Sie k?nnen sehen, dass das Design vollst?ndig realisiert ist und in gewissem Ma?e als eigenst?ndige Grafik funktioniert. Obwohl der Text und die Timeline im Modell angezeigt werden, werden Sie diese Ebenen unterlassen, wenn Sie die SVG -Datei erstellen (siehe Abbildung 3). Sie werden den Text und die Ausl?ser in Kantenanimate hinzufügen.



c. Ausblenden oder sperren Sie den Text-, Ausl?ser- und Wiedergabetastenschichten und w?hlen Sie alle verbleibenden Grafiken auf den Baum- und Hintergrundschichten aus (siehe Abbildung 4). Diese Grafiken werden zu Ihrem Hintergrund, nachdem Sie Ihre Komposition im n?chsten Schritt erstellt haben.



ausgew?hlte Vektor -Kunstwerk

Schritt 2: Bauen Sie die statische Komposition in Kantenanimate

auf

Zu diesem Zeitpunkt bewegen Sie sich bereit zum Edge Animate CC 2014, um an Ihrer interaktiven Komposition mit der Arbeit zu beginnen. Lassen Sie Illustrator offen, Sie kehren in den folgenden Schritten zurück, um Ihre Hintergrundgrafiken zu kopieren.

Befolgen Sie diese Schritte zum Layout der Komposition:

1. Richten Sie die reaktionsschnelle Komposition ein.

a. ?ffnen Sie die aktuelle Version von Adobe Edge Animate CC 2014. Sie verwenden die neuen Responsive Skaling -Funktionen, um ein Design zu erstellen, das seine Gr??e auf die Gr??e des Bildschirms anzeigt.

b. W?hlen Sie Datei> Neu, um eine neue Datei zu erstellen. Speichern Sie die Datei in den Projektordner mit dem Namen Infografik.html. Beachten Sie, dass Edge Animate auch dem Projektordner unterstützende Dateien hinzufügt.

c. Aktualisieren Sie die Bühneneigenschaften im Properties -Feld auf Folgendes (siehe Abbildung 5):

? Titel: von Zeit und B?umen ? W: 850 ? H: 800 ? min w: 380 ? Max W: 1200 ? Mittelstufe: überprüft, horizontal ? reaktionsschnelle Skalierung, überprüft, beide

2. Kopieren und fügen Sie die Hintergrundgrafiken vom Illustrator ein.

A. Kehren Sie zum Illustrator zurück und stellen Sie sicher, dass Sie alle Grafiken auf den Baum- und Hintergrundschichten ausgew?hlt haben. Kopieren Sie die Grafik in die Zwischenablage. B. Kehren Sie zu Edge Animate zurück und fügen Sie die Grafik auf die Bühne ein. Beachten Sie, dass ein Dialogfeld angezeigt wird, in dem Sie nach dem Namen der resultierenden SVG -Datei gefragt werden (siehe Abbildung 6). Geben Sie den Namen des Namens Hintergrund ein und drücken Sie OK.



C. Positionieren Sie die SVG -Grafik auf der Bühne, so dass sie sich im Mittelpunkt befindet. D. Schauen Sie sich den Projektordner an und beachten Sie, dass die SVG -Grafik im Bildordner im Bilder gespeichert wurde. Sie k?nnen die SVG -Grafik in Illustrator ?ffnen, wenn Sie ?nderungen vornehmen müssen.

3. Fügen Sie Text als HTML -Elemente hinzu.

A. Fügen Sie den Text über der Hintergrundgrafik mit dem Text -Tool in Kantenanimate hinzu. (Sie k?nnen den Text aus den ausgefüllten Projektdateien kopieren, wenn Sie m?chten.) In meinem Modell verwende ich einfach Arial- (oder Sans) Schriftart, aber Sie k?nnen hier Web -Schriftarten oder Ihre eigenen Schriftarten hinzufügen.

Die Schriftgr??en sind wie folgt:

• Titel: 48 pt.
• Bildunterschrift: 21 pt.
• Zeitleiste: 12 pt.

b. W?hlen Sie den gesamten Text aus, klicken Sie mit der rechten Maustaste und w?hlen Sie in Symbol konvertieren. Nennen Sie im Dialogfeld Symbol für das Symbol das Symbol -Gridtext und drücken Sie OK. Das Gruppieren des Textes in einem Symbol reinigt die Bühne (siehe Abbildung 7).

4. Speichern Sie die Datei.

Schritt 3: Erstellen Sie das Timelinetrigger -Widget

Sie werden feststellen, dass es nummerierte Timeline -Ausl?ser im Mockup -Design gibt. Anstatt 8 verschiedene Grafiken zu erstellen, erstellen Sie ein einzelnes Timelinetrigger -Widget in Kantenanimate (siehe Abbildung 8). Was ich ein Widget nenne, ist einfach ein Animesymbol von Edge, das mit einem kleinen Code konfiguriert werden kann. Der unterhaltsame Teil ist, dass das Widget eine eigene Zeitleiste mit animierten Zust?nden hat.

Befolgen Sie diese Schritte, um das Timelinetrigger -Widget zu erstellen:

1. Erstellen Sie die Widget -Grafiken und das Symbol.

a. W?hlen Sie das Ellipse -Werkzeug aus und zeichnen Sie einen Kreis mit einem Durchmesser von etwa 30 Pixel. W?hlen Sie das Textwerkzeug und fügen Sie ein Textelement über dem Kreis hinzu. Stellen Sie sicher, dass der Name der Textelementebene ?Text“ ist.

b. W?hlen Sie sowohl den Kreis als auch den Text aus, klicken Sie mit der rechten Maustaste und w?hlen Sie zu Symbol konvertieren. Benennen Sie im Dialogfeld Symbol erstellen, nennen Sie das Symbol Timelinetrigery, deaktivieren Sie die Option Autoplay Timeline und drücken Sie OK.

c. Beachten Sie, dass das Kreis und das Textelement jetzt als einzelnes gruppierter Objekt angezeigt werden. Doppelklicken Sie auf die Instanz, um seine Zeitleiste einzugeben.

d. Zu diesem Zeitpunkt haben Sie die Zeitleiste der Hauptbühne verlassen und arbeiten jetzt in der Timelinetrigger -Symbol -Timeline. Sie k?nnen mit der Bühnenverbindung oben links im Bühnenbereich zur Bühne zurückkehren.

2. Fügen Sie Etiketten hinzu, um die Zeitachse in Abschnitte aufzuteilen.

a. In den n?chsten Schritten arbeiten Sie mit den Timeline -Tools, um dem Widget animierte Zust?nde hinzuzufügen. Schauen Sie sich Abbildung 9 an, um sich mit den Werkzeugnamen und Standorten im Timeline -Feld vertraut zu machen.



b. Ziehen Sie den Timeline -Marker in die 0 -Marke und klicken Sie auf die Schaltfl?che Einfügen einfügen, um ein Etikett hinzuzufügen. Geben Sie den Text "Standard" in das Etikett ein.

c. Fügen Sie ein Etikett mit dem Namen "Rollover" in der 1 Sekunden -Marke hinzu und fügen Sie ein weiteres Etikett mit dem Namen "Rollout" bei der 2 Sekunden -Marke hinzu. Sie navigieren zu den Etiketten, um bestimmte Zust?nde der Animation zu spielen.

3. Fügen Sie die Animation des Rollover State hinzu.

a. Ziehen Sie den Timeline -Marker in die 1 -Sekunden -Marke und klicken Sie auf die Schaltfl?che umschalten, um ihn auszuw?hlen. Beachten Sie, dass im Timeline -Marker ein blaues Pin -Symbol angezeigt wird.

b. Ziehen Sie die Zeitleistenmarkierung in die 1,5 -Sekunden -Marke und w?hlen Sie die Ellipse -Grafik aus und ?ndern Sie die Breite und die H?he im Eigenschaftenbereich auf 150%. W?hlen Sie den Text aus und ?ndern Sie seine Schriftgr??e in eine gr??ere Zahl. Positionieren Sie die skalierten Grafiken, damit sie im Symbol zentriert sind. Beachten Sie, dass farbige Animationsspannen auf der Zeitleiste zwischen den festgestellten Punkten erscheinen.

c. W?hlen Sie die Animationsspannen aus und klicken Sie auf die Schaltfl?che Locker. W?hlen Sie die Entlarvung der elastischen Option.

4. Fügen Sie die Rollout -Statusanimation hinzu.

a. Deaktivieren Sie das Umschaltstift -Werkzeug und verschieben Sie den Timeline -Marker auf die 2 Sekunden -Marke.

b. W?hlen Sie das Tool zum Umschalten des Pin erneut aus und ziehen Sie den Timeline -Marker in die 2,5 -Sekunden -Marke. ?ndern Sie die Breite und H?henskala der Ellipse wieder auf 100%und ?ndern Sie die Schriftgr??e des Textes wieder auf die ursprüngliche Gr??e im Eigenschaftenbereich. Positionieren Sie die Grafik nach Bedarf.

c. Deaktivieren Sie das Tool zum Umschalten des Stifts.

d. W?hlen Sie die neuen Animationsspannen aus und klicken Sie auf die Schaltfl?che Locker. W?hlen Sie die Entlarvung der elastischen Option.

5. Fügen Sie Stop -Action -Ausl?ser entlang der Zeitleiste hinzu.

a. Ziehen Sie den Zeitplanmarker in die 1,5 -Sekunden -Marke und klicken Sie auf die Schaltfl?che Trigger einfügen. Beachten Sie, dass auf der Zeitleiste ein Triggersymbol angezeigt wird und das Aktionsbereich ge?ffnet wird.

b. Klicken Sie unter dem Abschnitt "Action" auf die Wiedergabetaste aus und klicken Sie dann auf die Schaltfl?che Stopp (siehe Abbildung 10).



c. W?hlen Sie das Timelinetrigger -Ziel unter dem Abschnitt "Ausw?hlen" und drücken Sie dann die Eingabetaste, um den Code zu verpflichten.

d. Schlie?en Sie das Panel.

e. Fügen Sie eine weitere Stop -Aktion bei der 2,5 -Sekunden -Marke hinzu.

6. Fügen Sie ein "Hitarea" -Element hinzu.

a. W?hlen Sie das Ellipse -Werkzeug aus und zeichnen Sie einen Kreis über den anderen Grafiken.

b. W?hlen Sie den Kreis aus und stellen Sie seine Deckkraft im Eigenschaftenbereich auf 0 ein.

c. Nennen Sie die Kreisschicht "Hitarea" im Eigenschaftenbereich. Ihre Zeitleiste sollte an diesem Punkt wie Abbildung 11 aussehen.

Code zum Symbol hinzufügen, um die Zust?nde zu steuern.

a. Klicken Sie auf die Schaltfl?che ?ffnen Aktionen neben dem Timelinetrigger -Element im Element -Feld und w?hlen Sie das Ereignis creationComplete. (Beachten Sie, dass dieser Schritt davon ausgeht, dass Sie weiterhin in der Timelinetriger -Zeitleiste bearbeiten. Sie k?nnen auch auf die Timelinetriger -Aktionen zugreifen, indem Sie das Fenster> Code ausw?hlen, um das Code -Bereich zu starten.)
B. Sie k?nnen den Actions -Panel -Editor verwenden, um Sie durch das Hinzufügen von Aktionen zu führen, oder Sie k?nnen Code direkt in den Texteditor eingeben. Von nun an k?nnen Sie Code -Snippets in das Aktionsbereich einfügen.
C. Kopieren und fügen Sie den folgenden Code in das Aktionsbereich ein:

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

8. Erstellen Sie Widget -Instanzen und positionieren Sie sie auf der Zeitleiste.

a. Klicken Sie oben links im Bühnenbereich auf den Bühnenlink, um zur Bühnenzeitachse zurückzukehren.

b. Positionieren Sie die vorhandene Timelinetrigger -Instanz am linken Rand der Timeline -Grafik.

c. Kopieren Sie die Instanz und fügen Sie die Instanz ein, um insgesamt acht Instanzen zu erstellen. Benennen Sie die Instanzen im Timeline- oder Element -Feld um, so dass sie der Namenskonvention ?Trigger [n]“ folgen, wobei [n] eine Zahl zwischen 0 und 7 ist.

d. Positionieren Sie die Instanzen entlang der Zeitleiste, wie in Abbildung 8 zu sehen ist.

9. Fügen Sie Code auf der Bühne hinzu, um die Widgets zu initialisieren.

a. Klicken Sie beim Bearbeiten der Bühnenzeitleiste auf die Schaltfl?che ?ffnen Aktionen neben dem Bühnenelement im Element -Feld. W?hlen Sie das Kompositionsereignis.

b. Kopieren und fügen Sie den folgenden Code in das Aktionsbereich kopieren und einfügen:

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

10. Speichern Sie die Datei.

im Wesentlichen ist das Muster, das Sie gerade gelernt haben, eine einfache M?glichkeit, Schaltfl?chen und Elemente mit Zust?nden in Rand animiert zu erstellen. Sie kehren in Schritt 6 an die Zeitleiste zurück

Schritt 4: Erstellen Sie das Detailpanel -Widget

Als n?chstes erstellen Sie ein zweites Widget, das Detailtext anzeigt (siehe Abbildung 12). Dieses Mal verwenden Sie zwei Symbole. Einer wird drei Textfelder layout, w?hrend der andere das Layout auf und neben dem Bildschirm animiert.

Abbildung 12: Das Layout des Detailpanel -Widgets

Befolgen Sie diese Schritte, um das Widget zu erstellen:

1. Erstellen Sie das Textlayout und die Symbole.

A. Verwenden Sie das Textwerkzeug, um drei Textelemente auf dem Bildschirm zu zeichnen. Positionieren Sie sie so, dass sie wie Abbildung 12 aussehen, mit den folgenden Schriftgr??en:

Titel: 72 pt.
• 
  
Bildunterschrift: 36 pt.
• 
  
Details: 21 pt.
• 
  

W?hlen Sie die drei Textfelder aus und konvertieren Sie sie in ein Symbol namens DetailPanel. Beachten Sie, dass die Textfelder in der Detailpanel -Instanz gruppiert erscheinen. C. Positionieren Sie die Symbolinstanz in der linken Mitte der Bühne. D. Klicken Sie mit der rechten Maustaste auf die Instanz und konvertieren Sie sie in ein Symbol namens Detailpanelanimation. Doppelklicken Sie auf die resultierende Instanz, um die Detailpanelanimation-Zeitleiste einzugeben. Dieser Schritt nistet das Textlayoutsymbol in einem Wrapper -Symbol, sodass das Textlayoutsymbol einfacher als einzelnes Element animiert werden kann.

2. Fügen Sie Etiketten hinzu, um Abschnitte in der Zeitleiste zu erstellen.

A. Fügen Sie der Detailpanelanimation Timeline die folgenden Beschriftungen hinzu:

0,00: Standard
0.01: Show
0.02: Versteck

3. Richten Sie den Standardzustand ein.

a. W?hlen Sie die Grafik bei der 0 -Marke aus und ziehen Sie sie von der Unterseite der Bühne ab.

4. Fügen Sie die Animation des Showzustands hinzu.

A. Richten Sie eine Animation zwischen 1 Sekunde und 1,75 Second Marks ein. Das Gremium sollte von einem Ausgangspunkt von wenigen Zentimetern unterhalb der Zielposition animieren. B. Stellen Sie die Lockerung ein, um zurückzubekommen.

5. Fügen Sie die Animation des Hide -Status hinzu.

A. Richten Sie eine Animation zwischen 2 Sekunden und 2,75 Sekunden ein. Das Gremium sollte von der Zielposition bis in die endgültige Position ein paar Zentimeter oben animieren. Am Ende sollte die Detailpanelanimation -Zeitleiste wie Abbildung 13 aussehen.

B. Stellen Sie die Lockerung ein, um den Rücken zu erleichtern.

Hinzufügen von Stoppaktionen am Ende der Show- und Ausblenden -Animationsspannen, um den Text nach jedem animierten Zustand zu pausieren.

Speichern Sie die Datei.

In den n?chsten Schritten importieren Sie eine Datenquelle und binden alle Widgets zusammen.

Schritt 5: Fügen Sie eine Datenquelle

hinzu

Bisher haben Sie die Ansicht erstellt, in der Ihre Infografik -Daten angezeigt werden, aber Sie ben?tigen noch eine Datenquelle. In diesem Schritt importieren Sie eine mitgelieferte JSON -Datei, die eine Liste von Fakten enth?lt, die sich auf die acht Punkte entlang des Timeline -Designs beziehen. Sie k?nnen die JSON -Datei in einem Texteditor wie Adobe Dreamweaver CC 2014 oder Adobe Edge Code CC Preview anzeigen und bearbeiten.

Befolgen Sie diese Schritte, um die Detailliste zu importieren:

1. Kehren Sie zum Kompositionsereignis der Bühne zurück, indem Sie auf die Schaltfl?che ?ffnen Aktionen neben dem Bühnenelement im Element -Feld klicken.

2. Kopieren Sie den folgenden Code unter dem Initialisierungscode:

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

3. Das Aktionsfeld sollte ungef?hr so ??aussehen (siehe Abbildung 14).

Speichern Sie die Datei.

Der Code verwendet den integrierten JQuery getJson-Befehl, um die Datei redwoods.json zu laden. Im n?chsten Schritt leiten Sie die Daten an die Ansicht.

Schritt 6: Binden Sie die Ausl?ser an das Detailpanel

Sie werden das Projekt beenden, indem Sie der Bühnenzeitleiste und der Timelinetrigersymbol -Zeitleiste etwas mehr Code hinzufügen. Ziel ist es, jeden Abzugsanlagen -Rückruf auf die Bühnenzeitachse zu haben. Die Zeitleiste der Stufe fungiert im Wesentlichen als Controller, das das Datenmodell an die HTML -Ansicht bindet.

Befolgen Sie diese Schritte, um die Widgets an die Datenquelle zu binden:

1. Aktualisieren Sie den Bühnencode mit einer Rückruffunktion.

a. Kehren Sie in den Codes für Kompositionsstufe im Aktionspanel zurück.
b. Fügen Sie den folgenden Code unter dem Rest hinzu:

<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. Aktualisieren Sie den Timelinetrigger -Code.

a. Kehren Sie zum TimelinTigger -CreationComplete -Code im Aktionsbereich zurück. Sie k?nnen entweder die Zeitleiste des TimelinTiggers eingeben und das Element -Panel verwenden oder das Codepanel verwenden, um dorthin zu gelangen.

b. Kopieren und fügen Sie den folgenden Code in der Switch -Anweisung im Ereignishandler mit dem Klicken in der Handlungsfunktion des Handels:

ein und fügen Sie es ein und fügen Sie sie ein und fügen Sie sie ein und fügen Sie sie ein und fügen Sie sie ein und fügen Sie sie ein und einfügen ".

<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. Fügen Sie dem Bühnencode unterstützende Funktionen hinzu.

A. Kehren Sie zum Zusammensetzung des Bühne zurück. B. Kopieren und fügen Sie den folgenden Code unter dem Rest ein und fügen Sie sie ein:

<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. Speichern Sie die Datei.

Datei> Vorschau im Browser ausw?hlen, um Ihre Arbeit voranzutreiben. Wenn Sie Probleme begegnen, vergleichen Sie Ihre Arbeit mit den abgeschlossenen Dateien als Referenz.

wohin von hier aus gehen

Versuchen Sie, die Konzepte, die Sie im Tutorial gelernt haben, zu übernehmen und mehr Interaktivit?t und reiche Medien in die Infografik aufzubauen. Sie werden beispielsweise feststellen, dass die abgeschlossene Datei "zus?tzlicher Kredit" eine Wiedergabetaste und einen Timer enth?lt, der eine Diashow abspielen kann. Dekonstruieren Sie die Datei und prüfen Sie, ob Sie Ihre eigene Arbeit als Diashow einrichten k?nnen. Viel Spa? damit.

h?ufig gestellte Fragen (FAQs) zum Erstellen von Infografiken mit Adobe Edge Animate CC 2014

Was ist Adobe Edge Animate CC 2014 und wie funktioniert es? Es verwendet HTML5, JavaScript und CSS3, die Standard -Web -Technologien sind, um Animationen und interaktive Inhalte zu erstellen. Dies bedeutet, dass der von Ihnen erstellte Inhalt auf jedem Ger?t angezeigt werden kann, das diese Webstandards unterstützt, einschlie?lich Smartphones und Tablets. Die Schnittstelle ?hnelt anderen Adobe -Produkten und erleichtert es denjenigen, die mit Adobe -Software vertraut sind, zu lernen und zu verwenden. Beginnen Sie mit der Erstellung einer Infografik, Sie müssen zun?chst Adobe Edge animieren und ein neues Projekt erstellen. Anschlie?end k?nnen Sie Ihrem Projekt Elemente wie Text, Bilder und Formen hinzufügen und diese mit dem Timeline- und Eigenschaftenbereich animieren. Sie k?nnen Ihren Elementen auch Interaktivit?t hinzufügen, z. B. wenn sie auf Benutzeraktionen wie Klicks oder Mausbewegungen reagieren. Mit Edge Animate k?nnen Sie externe Assets wie Bilder, Audiodateien und sogar andere HTML -Dateien importieren. Dies kann über das Menü "Datei" durchgeführt werden, indem Sie "Import" ausw?hlen. Sie k?nnen dann zur Datei navigieren, die Sie importieren m?chten, und ausw?hlen.

Wie kann ich meiner Infografik Interaktivit?t hinzufügen? Mit diesem Panel k?nnen Sie Ihre Elemente Aktionen hinzufügen, z. B. sie damit dazu führen, dass sie auf Benutzerklicks oder Mausbewegungen reagieren. Sie k?nnen auch JavaScript verwenden, um komplexere Interaktionen zu erstellen. "Vorschau" -Tast in der Symbolleiste. Dies wird ein neues Browserfenster ?ffnen, in dem Sie sehen k?nnen, wie Ihre Infografik in einer echten Webumgebung aussehen und sich verhalten wird.

Kann ich meine Infografik direkt von Adobe Edge animieren? Edge Animate verfügt über eine integrierte Ver?ffentlichungsfunktion, mit der Sie Ihre Infografik direkt im Web ver?ffentlichen k?nnen. Sie k?nnen Ihr Projekt als statische HTML -Datei oder als interaktive HTML -Datei ver?ffentlichen, die alle erforderlichen JavaScript- und CSS -Dateien enth?lt.

Wie kann ich meine Infografik für mobile Ger?te optimieren? > Mit Adobe Edge Animate k?nnen Sie reaktionsschnelle Designs erstellen, die sich an verschiedene Bildschirmgr??en anpassen. Sie k?nnen die Funktion ?Responsive Design“ verwenden, um anzugeben, wie sich Ihre Infografik an verschiedene Bildschirmgr??en anpassen soll, und Sie k?nnen eine Vorschau angeben, wie Ihre Infografik mithilfe der Funktion ?Vorschau“ auf verschiedene Ger?te aussieht.

Kann ich Adobe verwenden Edge Animate, um andere Arten von Webinhalten zu erstellen? Online -Anzeigen und digitale Magazine. . Die Software verfügt über eine visuelle Schnittstelle, mit der Sie Animationen erstellen und Interaktivit?t hinzufügen k?nnen, ohne Code zu schreiben. Wenn Sie jedoch wissen, wie Sie codieren, k?nnen Sie JavaScript verwenden, um komplexere Interaktionen zu erstellen.

Wo kann ich mehr über die Verwendung von Adobe Edge Animate erfahren? Lernen, wie man Edge Animate verwendet, einschlie?lich Tutorials, Benutzerführer und einem Community -Forum, in dem Sie Fragen stellen und Tipps mit anderen Benutzern teilen k?nnen. Sie k?nnen auch viele Tutorials und Führer online finden.

Das obige ist der detaillierte Inhalt vonTutorial: Erstellen einer Infografik in Adobe Edge Animate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!