Hinzufügen von Text zu einem Projekt (Tutorial)

Suchen

Zuletzt aktualisiert am

Hinweis:

Seit November 2015 wird Edge Animate nicht mehr aktiv weiterentwickelt. Weitere Informationen finden Sie unter Edge-Produktfamilie | Ende der Entwicklung.

Einführung

Es gibt drei Möglichkeiten, um Text in Ihr Animate-Projekt einzufügen:

Mit dem Textwerkzeug:
Klicken Sie im Bedienfeld Werkzeuge auf das große T (oder verwenden Sie den Tastaturbefehl T) und erstellen Sie durch Klicken und Ziehen in Ihrem Dokument ein Textfeld. Zunächst brauchen Sie sich um Position und Größe des Textfelds nicht zu kümmern. Solche Details können Sie später einstellen. Beginnen Sie einfach zu tippen. Geben Sie einmal den Ausdruck „ON the EDGE“ ein. Der Text, den Sie eingeben, wird auf der Bühne angezeigt (siehe Abbildung 1). Um einen neuen Absatz zu beginnen, drücken Sie einfach die Eingabetaste, genau wie in einem Textverarbeitungsprogramm. Wenn Sie fertig sind, schließen Sie das Textfenster, indem Sie die Esc-Taste drücken oder rechts oben im Textfeld auf die Schaltfläche x klicken.
Kopieren und Einfügen:
Wenn Sie mit längeren Texten arbeiten, verfügen Sie wahrscheinlich bereits über einen Entwurf in einem Textbearbeitungsprogramm oder aus einer sonstigen Quelle. In diesem Fall können Sie den Text in der Textverarbeitung kopieren, in Animate ein Textfeld erstellen und mit Strg+V (Befehl+V) den Text in Ihr Projekt einfügen. Die Formatierung entspricht zwar nicht dem Original, aber der Text schon einmal da. Einige der wichtigsten Formatierungen wie Absatzumbrüche bleiben dabei erhalten.
Durch Öffnen eines HTML-Dokuments mit Text:
Vielleicht haben Sie ja bereits in einem HTML-Editor oder sonstigen Weberstellungstool eine Webseite erstellt. Sie würden gerne die statische Seite durch eine Animation etwas interessanter gestalten. Sie können die Seite mit Datei➝Öffnen in Animate öffnen und dort die Bewegung der Elemente definieren. Die Möglichkeiten dessen, was Sie mit so importiertem Text machen können, sind begrenzt. Sie können ihn nicht bearbeiten oder seine Formatierung ändern. Im Wesentlichen ist es einfach ein weiteres grafisches Element, das Sie in einer Animation verwenden können. Ein bedeutender Vorteil dieser Methode ist, dass Links innerhalb des Texts erhalten bleiben.

Ändern textspezifischer Eigenschaften

Sobald Sie Text in ein Animate-Projekt eingefügt haben, stehen verschiedene textspezifische Eigenschaften zur Verfügung, mit denen Sie seine Darstellung ändern können (siehe Abbildung 2). Diese Eigenschaften befinden sich im Bedienfeld „Text“. Anfangs sind einige der weniger genutzten Optionen möglicherweise ausgeblendet. Klicken Sie auf die Schaltfläche links unten im Bedienfeld, um zusätzliche Eigenschaften ein- und auszublenden. Die Namen dieser Eigenschaften entsprechen den Namenskonventionen von CSS (Cascading Style Sheets), daher sind sie in Englisch, kleingeschrieben und haben Bindestriche zwischen den einzelnen Wörtern.

font-family (Schriftfamilie): Sie können unter verschiedenen Schriftfamilien bzw. Schriftarten auswählen. Möglicherweise finden Sie hier nicht alle Schriftarten, die auf Ihrem Computer verfügbar sind. Das liegt daran, dass Sie im Webdesign auf Schriften beschränkt sind, die auch Ihren Lesern zur Verfügung stehen, es sei denn, Sie haben die Möglichkeit, die Schrift zusammen mit Ihrem Projekt bereitzustellen. Weitere Informationen zu Schriften und Schriftarten finden Sie im nächsten Abschnitt.
color (Schriftfarbe): Klicken Sie auf das Farbfeld und der Standardfarbwähler wird angezeigt, in dem Sie die Farbe für Ihren Text festlegen können.
font-size (Schriftgrad): Legen Sie einen Wert für den Schriftgrad fest. Neben dem Schriftgrad sehen Sie eine Schaltfläche mit der Bezeichnung Einheiten für Texteigenschaften. Klicken Sie auf diese Schaltfläche, um die Methode zur Angabe des Schriftgrads zu ändern.
font-unit (Einheit für den Schriftgrad): Animate unterstützt drei verschiedene Maßeinheiten für die Angabe des Schriftgrads – Pixel (px), die relative Einheit em und Prozent (%). Ein Pixel entspricht einem einzelnen Bildpunkt auf einem Monitor. Die Einheit em entspricht in etwa der Größe des Buchstabens „M“. Die meisten Webbrowser bieten den Anwendern die Möglichkeit, die Größe des Texts anzupassen, d. h., eine em-Einheit ändert sich relativ zur Browsereinstellung. Die Angabe in Prozent ist eine nützliche Option, wenn die Webinhalte sowohl auf Mobilgeräten wie auch auf Desktop-Computern angezeigt werden sollen.
font-style (Schriftlage): Mit dieser Eigenschaft legen Sie einen Kursivschnitt fest.
font-weight (Schriftstärke): Bietet verschiedene Optionen wie Thin, Extra Light, Normal und Extra Bold. Die Reihenfolge der Optionen und die zugehörigen Zahlenwerte spiegeln die Abstufung der Schriftstärke wieder.
font-decoration (Textdekoration): Verwenden Sie diese Schaltfläche, um Text zu unterstreichen.
text-align (Textausrichtung): Ebenso wie in einem Textverarbeitungsprogramm können Sie in Animate den Text rechtsbündig, zentriert oder linksbündig ausrichten. Die Ausrichtung bezieht sich auf den gesamten Text in einem Textfeld. Soll also der eine Absatz rechtsbündig und der andere zentriert ausgerichtet werden, müssen Sie zwei separate Textfelder erstellen.
text-indent (Texteinzug): Rückt die erste Zeile in einem Textfeld ein. Sie können den Wert in Pixel angeben. Negative Zahlen zur Definition eines hängenden Einzugs werden nicht unterstützt.
line-height (Zeilenabstand): Mit dieser Eigenschaft können Sie den Abstand zwischen den Textzeilen festlegen.
letter-spacing (Laufweite): Mit dieser Eigenschaft legen Sie den Abstand zwischen den Buchstaben und somit die Schriftlaufweite fest. Wird häufig verwendet, um markante Schlagzeilen oder Firmenlogos zu erstellen, sollte aber in normalem Fließtext sparsam eingesetzt werden.
word-spacing (Wortzwischenraum): Mit dieser Eigenschaft lässt sich der Abstand zwischen den Wörtern ändern. Sie sollte gezielt und vorsichtig eingesetzt werden, sonst erhalten Sie einen sperrigen, schwer zu lesenden Text.

Verwenden von Webschriften

Es gibt eine weitere Möglichkeit, mehr Schriften in Ihren Animate-Animationen zu verwenden. Webschriften werden von den Webdesignern schon seit Jahren eingesetzt. Damit in Programmen, einschließlich Webbrowsern, eine bestimmte Schrift angezeigt werden kann, müssen sie Zugriff auf die Schriftbeschreibung haben. In der Regel befindet sich diese Beschreibung auf demselben Computer – der oft auch als Client bezeichnet wird – wie das Programm. Webschriften funktionieren ein wenig anders. Zu den Google Web Fonts (www.google.com/webfonts) beispielsweise sind die Definitionen für die Schriften auf Google-Servern gespeichert. Als Webdesigner können Sie diese Schriften verwenden, indem Sie im Code angeben, wo die Schriftbeschreibungen zu finden sind.

Suchen Sie zuerst eine Webschrift aus, die Sie verwenden wollen. Google Web Fonts sind kostenlos und überraschend einfach zu bedienen und somit gute Kandidaten für Ihren ersten Versuch. Es folgt eine Anleitung dazu, wie Sie Google Web Fonts auswählen und den Code kopieren, den Sie in Ihrem Projekt verwenden müssen:

Öffnen Sie in Ihrem Webbrowser die Seite: www.google.com/webfonts. Es wird eine Seite mit Schriftproben angezeigt. Es gibt Hunderte von Seiten, daher können Sie links auf der Seite einen Filter festlegen, um geeignete Schriften auszusortieren. Die Schaltflächen rechts unten auf der der Seite führen zu den drei Schritten, die erforderlich sind, um eine passende Webschriftart zu finden und zu verwenden: „Choose“ (Auswählen), „Review“ (Begutachten) und „Use“ (Anwenden).
Öffnen Sie links unter „Filters“ das Dropdownmenü. Sie haben die Wahl zwischen „Serif“ (mit Serifen), „Sans-Serif“ (serifenlos), „Display“ (plakativ), „Handwriting“ (Handschrift) und „Monospace“ (nichtproportional). Das Menü verwendet Kontrollkästchen, sodass Sie auch eine Kombination von Merkmalen verwenden können. Beispielsweise könnten Sie „Sans-Serif“ und „Display“, also eine serifenlose, plakative Schrift, auswählen.
Bei Bedarf können Sie mithilfe der Schieberegler für „Thickness“ (Schriftstärke), „Slant“ (Schriftlage) und „Width“ (Laufweite) die Suche nach einer Schrift weiter einschränken. Bei einer so großen Auswahl hilft es, die Menge an Schriften einzugrenzen, die auf dem Bildschirm angezeigt werden.
Anhand der Registerkarten oben im Fenster können Sie die Anzeige der Schriftprobe bestimmen: „Word“ (einzelne Wörter), „Sentence“ (ein Satz) oder „Paragraph“ (ein ganzer Absatz).

Wenn Sie eine Schrift suchen, die sich für Überschriften eignet, öffnen Sie am besten die Registerkarten „Word“ oder „Sentence“.
Wenn Sie eine Schrift für den Textkörper suchen, sollten Sie auf jeden Fall überprüfen, ob das Schriftbild im Absatz gut lesbar ist.
Wenn Ihnen eine Schrift gefällt, klicken Sie auf die blaue Schaltfläche „Add to Collection“ (zur Sammlung hinzufügen). Eine Sammlung kann zwar mehrere Schriften umfassen, damit eine Seite jedoch schnell und ansprechend dargestellt wird, sollten Sie nur eine begrenzte Anzahl von Schriften verwenden.
Klicken Sie auf „Review“. Dieser Schritt ist vielleicht nicht immer notwendig, aber, wie der Name schon sagt, können Sie Ihre Schriften auf dieser Seite untersuchen und überprüfen, wie sie als Überschrift oder Absatz aussehen.
Klicken Sie auf „Use“. Es wird eine neue Seite mit Anweisungen für die Verwendung von Schriften auf einer Website geladen. Etwas weiter unten auf der Seite befindet sich ein Feld mit dem Punkt „Add this code to your website“ (Fügen Sie den folgenden Code in Ihre Website ein) (siehe Abbildung 3).
Markieren Sie auf der Registerkarte „Standard“ den angezeigten Code und kopieren Sie ihn. Nachdem Sie den Code in Ihrer Zwischenablage gespeichert haben, können Sie mit Teil 2 des Vorgangs fortfahren, dem Einbinden des Speicherorts für die Schriftbeschreibung in das Animate-Projekt.

Einbinden von Web Fonts in Ihre Komposition

Nachdem Sie eine Webschrift von Google oder einem anderen Hersteller ausgewählt und ihren Identifikationscode kopiert haben, ist es ein Leichtes, diesen Code in Animate in Ihr Projekt einzubinden. Führen Sie die folgenden Schritte aus:

Öffnen Sie im Bedienfeld Bibliothek den Bereich Schriftarten und klicken Sie auf die Schaltfläche + (siehe Abbildung 4).

Das Dialogfeld Webschrift hinzufügen wird angezeigt.
Fügen Sie unten in das Textfeld Code einbetten den Code ein, der den Speicherort Ihrer Schrift bezeichnet.

Dieser Code wird von der gleichen Organisation bereitgestellt, die auch die Webschrift hostet. Wenn Sie die vorherigen Schritte ausgeführt haben, befindet sich der Code noch in Ihrer Zwischenablage.
Geben Sie oben im Feld Ausweichschriftliste den Namen der Webschrift zusammen mit den Namen der Schriften ein, die verwendet werden sollen, wenn die Webschrift nicht verfügbar ist. Wenn ein Clientcomputer nicht mit dem Internet verbunden ist, ist die Webschrift nicht verfügbar.
Klicken Sie auf die Schaltfläche Schriftart hinzufügen. Die Schrift wird nun im Dropdownmenü Schriftart angezeigt, wenn Sie mit Text arbeiten.

Ändern weiterer Texteigenschaften

Bei allen Elementen, mit denen Sie in Animate arbeiten, spielt Bewegung eine wichtige Rolle. Daher versteht es sich von selbst, dass auch Text nicht einfach statisch sein muss. Zum Glück müssen Sie als Designer keine neuen Werkzeuge erlernen, um etwas Bewegung in Ihren Text zu bringen. Im Bedienfeld „Eigenschaften“ wird mit X/Y im Bereich „Position und Größe“ die Position Ihres Texts festgelegt und mit B/H seine Größe. Beachten Sie jedoch, dass sich diese Größeneigenschaften auf die Größe des Textfelds beziehen und nicht etwa auf die Größe der Buchstaben. Um die Größe der Buchstaben zu ändern, verwenden Sie die Eigenschaft font-size oder Skalierung. Manchmal soll sich die Größe des Textes je nach Größe des Browser-Fensters ändern. Wenn das der Fall ist, verwenden Sie die Prozentangabe (%) im Feld Einheiten für Texteigenschaften. Wie auch bei Zeichnungen und Fotos können Sie in der Zeitleiste Eigenschaftenschlüsselbilder erstellen, sodass sich die Texteigenschaften im zeitlichen Verlauf ändern.

Erinnern Sie sich noch an die Werkzeuge zum Ausblenden, Drehen und Zerstören von Objekten? Auch auf Text können Sie Eigenschaften zum Transformieren anwenden. Experimentieren Sie ein wenig und erstellen Sie Spezialeffekte, indem Sie Textblöcke drehen oder neigen, während Sie sie in die Webseite einbinden oder wieder daraus entfernen. Verwenden Sie die Eigenschaften zum Skalieren, um das Textfeld und den Text zu vergrößern oder zu verkleinern. Auf Text wenden Sie die Skalierfunktion genauso an wie auf ein JPEG-Bild: Sie geben einen Prozentwert ein und alles wird größer oder kleiner. Beachten Sie jedoch, dass Text, der über die Skalierfunktion vergrößert wird, oft ein wenig unscharf wird.

Beschneiden von Texträndern

Wie bei anderen grafischen Elementen auf der Bühne können Sie die Eigenschaften zum Beschneiden einsetzen, um die Ränder eines Textfelds zu verbergen. Das ist in etwa so, als würden Sie die Ränder eines Fotos abschneiden. Angenommen, Sie möchten ein Textfeld so animieren, dass zunächst nur ein kleiner Punkt in der Mitte sichtbar ist, der dann größer wird, um schließlich einen ganzen Textblock anzuzeigen. Wählen Sie Ihren Text und öffnen Sie unten im Bedienfeld Eigenschaften den Bereich Beschneiden, indem Sie auf das kleine Dreieck klicken. Klicken Sie oben rechts auf die Schaltfläche zum Aktivieren des Beschneidens. Edge Animate bietet vier Steuerelemente, die den oberen, unteren, linken und rechten Rand des Elements darstellen (siehe Abbildung 7). Tragen Sie die Werte in Pixel (px) ein.

Während Sie die Änderungen vornehmen, wird ihre Auswirkung auf das Textfeld angezeigt. Sie möchten Beschnitteigenschaften wieder entfernen, nachdem Sie sie angewendet haben? Dann klicken Sie einfach mit der rechten Maustaste (bzw. klicken Sie bei gedrückter Strg-Taste) auf das abgeschnittene Element und wählen Sie Clip entfernen aus dem Kontextmenü.

Überschrift heranfliegen lassen

Meist soll Text eine Botschaft vermitteln. Text, der sich ständig bewegt und verändert, lenkt den Leser allerdings zu sehr davon ab. Das bedeutet nicht, dass Sie nicht ein wenig Spaß haben können. Beispielsweise könnte die Überschrift auf Ihrer Webseite angeflogen kommen oder aufspringen, wenn die Seite geladen wird. In diesem Projekt erstellen Sie ein Banner am oberen Rand der Bühne. Beim Laden der Webseite fliegen drei Worte – ON the EDGE – auf ihren Platz. In diesem Fall animieren Sie den Ausdruck „ON the EDGE“. Sie teilen die Wörter in drei separate Textfelder auf, sodass Sie jedes Wort unabhängig voneinander bewegen können. In einem anderen Fall könnten Sie auch die einzelnen Buchstaben eines Wortes oder Ausdrucks animieren. Der schwierigste Teil des Tricks ist, die Buchstaben oder Wörter korrekt auszurichten, wenn sie auf ihrem Platz angekommen sind. Der Raum zwischen den Buchstaben oder Wörtern soll natürlich aussehen und der Text soll gleichmäßig auf einer horizontalen Linie angeordnet sein. Wenn Sie Wörter oder Buchstaben so animieren möchten, hilft es oft, eine Positionierungsvorlage zu erstellen, und genau das werden Sie in diesem Projekt machen. Die Positionierungsvorlage (siehe Abbildung 8) ist während der Entwurfsphase zu sehen, um Sie beim Ausrichten der sich bewegenden Wörter und Buchstaben zu unterstützen. Wenn Sie die Animation abgeschlossen haben, können Sie die Vorlage wieder entfernen.

Hier eine Anleitung dazu, wie Sie eine heranfliegende Überschrift erstellen:

Erstellen und speichern Sie ein neues 550 x 400-Dokument mit weißer Hintergrundfarbe. Erstellen Sie, wie sonst auch, einen neuen Ordner für die HTML- und JavaScript-Dateien Ihres Projekts.
Erstellen Sie mit dem Werkzeug Rechteck ein Rechteck von 550 x 100 px und positionieren Sie es auf X=0 und Y=0. Setzen Sie die Hintergrundfarbe auf R=200, G=210, B=250 und A=100 %. Setzen Sie Rahmenfarbe auf none. Weisen Sie dem Rechteck die ID „BannerBG“ zu. Am schnellsten erstellen Sie Rechteck nach bestimmten Vorgaben, indem Sie für ein bereits vorhandenes Rechteck im Bedienfeld Eigenschaften die neuen Werte eingeben. Klicken Sie neben den Eigenschaften für die Größe (B/H) unbedingt auf die Verknüpfungsschaltfläche, damit Sie nicht proportionale Werte eingeben können.
Klicken Sie im Bedienfeld Elemente neben BannerBG auf Element sperren. Neben „BannerBG“ wird ein Vorhängeschloss angezeigt. Nun ist es nicht mehr möglich, das blaue Feld auf der Bühne versehentlich auszuwählen oder zu verschieben.
Aktivieren Sie das Textwerkzeug und ziehen Sie ein Textfeld auf. Geben Sie dann „ON the EDGE“ ein. Legen Sie die Schriftart auf Arial Black, die Größe auf „72 px“ und die Ausrichtung auf Zentriert fest. Dieser Text soll als Positionierungsvorlage für den animierten Text dienen.
Weisen Sie im Bedienfeld Eigenschaften dem Textfeld den Namen „OnEdgeTemplate“ zu. Wie auch bei Grafiken sollten Sie verschiedene Textblöcke in der Zeitleiste und im Bedienfeld Elemente leicht unterscheiden können. An dieser Stelle sehen die Eigenschaften für den Text wie in Abbildung 9 aus.
Legen Sie für die Größe und Position des Textfelds dieselben Werte fest wie für das farbige Rechteck, d. h. eine Größe von 550 px x 100 px und eine Position von X=0 und Y=0. Wenn Sie fertig sind, sollte der obere Teil der Animate-Bühne wie in Abbildung 10 aussehen. Wenn aus irgendeinem Grund der Text hinter dem blauen Feld verschwindet, können Sie im Bedienfeld Elemente die Z-Reihenfolge ändern. Ziehen Sie „OnEdgeTemplate“ einfach über „BannerBG“.
Wählen Sie „OnEdgeTemplate“ aus und drücken Sie Strg+D (Befehl+D). Dadurch wird der Text dupliziert, auch wenn Sie das vielleicht nicht gleich erkennen, da er genau über dem vorherigen Text liegt. Allerdings hat er im Bedienfeld Elemente den Namen „OnEdgeTemplateCopy“.
Ziehen Sie „OnEdgeTemplateCopy“ auf die Mitte der Bühne. In den nächsten Schritten werden Sie sie verwenden, um einzelne Textfelder mit den Wörtern „ON“, „the“ und „EDGE“ zu erstellen. Doch sollten Sie zuerst die Einrichtung der Positionierungsvorlage abschließen.
Wählen Sie die ursprüngliche „OnEdgeTemplate“ aus und setzen Sie die Textfarbe auf rot (#ff0000). Wie bereits angekündigt, wird dieser Text für eine Positionierungsvorlage verwendet. Später werden Sie durch die helle rote Farbe leichter erkennen können, ob der Text korrekt positioniert ist.
Klicken Sie im Bedienfeld Elemente neben „OnEdgeTemplate“ auf die Schaltfläche Element sperren. Dadurch wird die Position Ihrer Positionierungsvorlage gesperrt, sodass Sie sie nicht versehentlich auswählen oder verschieben können.
Wählen Sie „OnEdgeTemplateCopy“ aus und drücken Sie zweimal Strg+D (Befehl+D). Dadurch werden zwei Kopien des gesamten Bannertexts erstellt.
Doppelklicken Sie auf die erste „OnEdgeTemplateCopy“. Löschen Sie im Textfeld alles außer dem Wort „ON“. Ändern Sie dann im Bedienfeld Eigenschaften den Namen auf „ON“. Wenn Sie einzelne Wörter animieren, ist es besser, zusätzliche Leerzeichen oder Buchstaben zu entfernen und die Breite des Textfelds zu verringern, um sie an den kürzeren Text anzupassen.
Wiederholen Sie Schritt 12, um die Textelemente für „the“ und „EDGE“ zu erstellen. Sie haben nun drei ordnungsgemäß beschriftete Wörter, die Sie unabhängig voneinander identifizieren und animieren können. Es empfiehlt sich, die Breite der Textfelder wie in Abbildung 11 an die jeweilige Wortlänge anzupassen.
Ziehen Sie das Wort „ON“ nach oben, sodass es über und etwas links von der Bühne platziert ist. Ziehen Sie das Wort „EDGE“ nach oben, sodass es über und etwas rechts von der Bühne platziert ist. Ziehen Sie das Wort „the“ gerade nach oben, sodass es sich über der Bühne befindet. Dies sind die Ausgangspositionen für die einzelnen Wörter. Sie sollten vollständig außerhalb der Bühne sein.
Wählen Sie „ON“ aus und ändern Sie die Eigenschaft Drehen auf den Wert „-30“. Wählen Sie „EDGE“ aus und setzen Sie die Eigenschaft „Drehen“ auf 30 Grad. Diese beiden Wörter kommen von ihren jeweiligen Seiten in einem Winkel von 30 Grad angeflogen.
Wählen Sie alle drei Wörter aus und klicken Sie auf die Schaltflächen Position und Drehen > Schlüsselbild hinzufügen. Die Ausgangspositionen der einzelnen Wörter werden in den Schlüsselbildern aufgezeichnet.
Ziehen Sie den Abspielkopf auf die Halbe-Sekunde-Marke: 0:00.500. Die gesamte Animation wird eine Sekunde dauern, was für eine einfache Animation wie diese jede Menge Zeit ist. Ihre Leser sollen sich ja nicht langweilen. Jedes Wort wird eine halbe Sekunde benötigen, um seine Bewegung abzuschließen. Die Bewegung beginnt bei jedem Wort zu einem anderen Zeitpunkt.
Wählen Sie „ON“ aus, setzen Sie die Eigenschaft Drehen wieder auf „0“ zurück und verschieben Sie „ON“ über das gleiche Wort in der Positionierungsvorlage. Wenn Sie die Bewegung überprüfen wollen, ziehen Sie den Abspielkopf vor und zurück. Bei Bedarf können Sie die Start- oder Endposition anpassen. Schieben Sie den Abspielkopf einfach auf die Position und justieren Sie die Position des Worts.
Verschieben Sie den Abspielkopf auf 0:00.250. Wählen Sie dann das Wort „the“ aus und klicken Sie auf die Schaltfläche Position > Schlüsselbild hinzufügen. Beabsichtigt ist, dass sich das Wort „the“ bewegt, bevor „ON“ seine Bewegung abgeschlossen hat. Allerdings soll das Wort „the“ während der ersten Viertelsekunde bewegungslos bleiben, daher müssen Sie bei 0:00.000 und 0:00.250 zwei Positionsschlüsselbilder mit identischen Werten erstellen.
Ziehen Sie den Abspielkopf auf 0:00.750 und verschieben Sie dann das Wort „the“ auf das gleiche Wort in der Positionierungsvorlage. Verwenden Sie den Regler zum Vergrößern der Zeitleiste, damit Sie die Details auf der Zeitleiste besser erkennen. Die Maßeinheiten am oberen Rand der Zeitleiste ändern sich je nach Zoomfaktor. (Siehe Abbildung 11.)

Das Wort „the“ wird nicht gedreht, sodass es anscheinend gerade nach unten fällt.
Verschieben Sie den Abspielkopf auf 0:00.500. Wählen Sie „EDGE“ aus und klicken Sie auf die Schaltflächen Position und Drehen > Schlüsselbild hinzufügen.

Dadurch bleibt „EDGE“ während der ersten halben Sekunde der Animation auf seiner Ausgangsposition stehen.
Ziehen Sie den Abspielkopf auf 0:01 und verschieben Sie dann das Wort „EDGE“ auf seine Endposition in der Positionierungsvorlage.

An der 1-Sekunden-Marke auf der Zeitleiste sind die Wörter an ihrer Endposition. Die erste Version der Animation ist damit vollständig, es muss nur noch die Positionierungsvorlage entfernt werden.

Bevor Sie die rote Positionierungsvorlage entfernen, sollten Sie die Animation in Vorschau anzeigen. Drücken Sie die Pos1-Taste und dann die Leertaste, um die Animation anzuschauen. Falls erforderlich, können Sie die Start- und Endpositionen der animierten Worte noch einmal optimieren. Vielleicht gefällt es Ihnen ja besser, wenn „ON“ und „EDGE“ zuerst angeflogen kommen und das Wort „the“ als Letztes hinzugefügt wird.

Verwenden der Vorlage

Die rote Positionierungsvorlage ist nicht als permanenter Bestandteil der Animation gedacht. Wenn Sie also mit allem zufrieden sind, können Sie sie entfernen. Deaktivieren Sie zuerst die Schaltfläche Element sperren, damit Sie die Vorlage auswählen können. Anschließend können Sie die Vorlage entweder im Bedienfeld Elemente oder auf der Bühne auswählen und „Entf“ drücken. Sie könnten die Vorlage aber auch in einen Schlagschatten verwandeln (siehe Abbildung 13) oder damit einen Leuchteffekt für den Text erzeugen.

Für einen Schlagschatten weisen Sie dem Text eine mittelgraue Farbe zu und passen dann die Deckkraft an, bis Ihnen das Ergebnis gefällt. In der Regel funktioniert es mit ca. 30 Prozent ganz gut. Vielleicht möchten Sie den Schlagschatten verbergen, bis die drei Wörter ihre Bewegung abgeschlossen haben. Dazu setzen Sie die Deckkraft bis zu diesem Zeitpunkt in der Animation auf null und erhöhen sie dann.
Wählen Sie für einen Leuchteffekt eine gelbe oder orange Farbe. Mithilfe des Steuerelements Skalieren können Sie den Text etwas größer gestalten als den Text, der auf seinen Platz fliegt. Auch hier können Sie das Timing und die Darstellung des Leuchttexts am besten wieder über die Deckkraft steuern. Sie könnten den Leuchteffekt etwa so gestalten, dass er zunimmt und wieder abnimmt und so die Überschrift kurzzeitig betont.

Text aufspringen bzw. abfedern lassen

Wenn Ihnen das vorige Beispiel, bei dem der Text angeflogen kommt, für Ihre Webseite noch zu beschaulich ist, könnten Sie die Aktion durch ein Aufspringen oder Abfedern des Textes noch etwas spannender machen. Durch das Aufspringen gewinnt man den Eindruck, als würde Ihre Webseite den Gesetzen der Physik gehorchen. Wie bei einem Basketball kann der Text mit einem großen Sprung beginnen und dann ein- oder zweimal mehr aufspringen bzw. abfedern, bis er auf der Endposition zum Stillstand kommt. Sie können den Sprung selbst erstellen, indem Sie Positionsschlüsselbilder hinzufügen, oder mithilfe der Abschwächungseigenschaften, die zur Übergangsfunktion der Zeitleiste gehören.

Manuelles Erstellen des Sprungs

Öffnen Sie die Datei und sehen Sie sich das Bedienfeld Elemente an – die Bühne wird mit drei weiteren Elementen aufgeführt. „BOUNCE“ ist das Wort, das Sie animieren werden. „BounceTemplate“ (roter Text) ist die Positionierungsvorlage. Wie im vorherigen Beispiel kennzeichnet dies die Endposition für den animierten Text. Das Bodenelement ist ein graues Rechteck, das am unteren Rand der Bühne positioniert wird. Sie können sich dies als den Boden vorstellen, auf dem der Text aufspringt.

Eine Sprungbewegung wird in der Zeitleiste durch Hinzufügen von Schlüsselbildern mit Positionen erstellt, die sich abwechselnd oben und unten befinden (siehe Abbildung 14). Wählen Sie „BOUNCE“ aus, während sich der Abspielkopf noch bei 0:00 befindet, und klicken Sie im Bedienfeld „Eigenschaften“ auf Schlüsselbild für Y hinzufügen. Dadurch wird der Ausgangspunkt gesetzt. Für die nächste Etappe ziehen Sie die Abspielposition auf 1:00 und verschieben „BOUNCE“, sodass es „BounceTemplate“ überdeckt.

Klicken Sie auf Schlüsselbild für Y hinzufügen, um neue Positionsschlüsselbilder hinzuzufügen. Ziehen Sie den Abspielkopf auf 1:75 und verschieben Sie „BOUNCE“ dann nach oben, etwa in die Mitte der Bühne. Ziehen Sie den Abspielkopf auf 2:25 und verschieben Sie dann „BOUNCE“ wieder über die Vorlage. Sie können ein paar weitere Sprünge erstellen, wobei Sie einen kürzeren Zeitraum für die Bewegung verwenden – eine halbe Sekunde, dann eine Viertelsekunde. Verkürzen Sie bei jedem Sprung nach oben den Abstand zum Boden, sodass die niedriger werdenden Sprünge immer schneller aufeinanderfolgen.

Wenn Ihnen das gerade Auf- und Abhüpfen zu langweilig wird, können Sie jederzeit eine kleine Drehung in die Bewegung einbauen, damit es so aussieht, als würde das Wort von den unteren Ecken abprallen. Wenn Sie die vertikale Skalierung verringern, sobald der Text auf den Boden auftrifft, können Sie eine Cartoon-ähnliche Quetschbewegung erstellen, als ob der Text beim Auftreffen auf dem Boden zusammengedrückt würde.

Verwendung der integrierten Sprungfunktion von Animate

Zunächst einige Hintergrundinformationen zu Übergängen und dem Konzept der Abschwächung. Wenn Sie ein Element auf der Bühne animieren, indem Sie Eigenschaften ändern und Schlüsselbildeigenschaften auf der Zeitleiste definieren, erstellen Sie Übergänge. Solche Übergänge werden in der Zeitleiste als Balken dargestellt. Wie die Elemente auf der Bühne haben auch Übergänge Eigenschaften. Eine dieser Eigenschaften wird als Abschwächung bezeichnet. In der realen Welt werden Objekte beim Verschieben beschleunigt und abgebremst. Ein Auto wird sich niemals mit voller Geschwindigkeit in Bewegung setzen oder sofort zum Stillstand kommen. Die Abschwächungseigenschaften helfen Ihnen, eine realistischere Bewegung zu erzielen, indem der Übergang eines Elements automatisch gesteuert wird. Es gibt eine Abschwächungsoption, die speziell für Sprungbewegungen konzipiert wurde.

Hier einige Schritte, um Sie mit den Übergangseigenschaften vertraut zu machen:

Ziehen Sie den Abspielkopf auf 0:01 und ziehen Sie dann „BOUNCE“ nach unten, sodass es „BounceTemplate“ überdeckt. Animate erstellt in der Zeitleiste einen Übergang.
Klicken Sie in der Zeitleiste neben „BOUNCE“ auf den Übergangsbalken. Der Übergang wird in der Zeitleiste hervorgehoben.
Klicken Sie oben in der Zeitleiste auf die Schaltfläche Abschwächung. Über der Zeitleiste erscheint das Bedienfeld Abschwächung. Zunächst steht in der QuickInfo zu dieser Schaltfläche Abschwächung: Linear, da dies die angewendete Abschwächungsmethode ist. Mit linearer Abschwächung wird der Übergang von Anfang bis Ende mit einer konstanten Rate angewendet.
Klicken Sie links im Bedienfeld Abschwächung auf Abbremsen und dann rechts auf Bounce (siehe Abbildung 15). Wenn Sie auf Abbremsen klicken, erscheinen im Bedienfeld mehrere Abbremsmethoden. Das Diagramm zeigt eine visuelle Darstellung der Abbremsmethode.
Klicken Sie auf eine Stelle außerhalb des Bedienfelds Abschwächung. Das Bedienfeld schließt sich und Ihre Abschwächungsmethode wird auf den ausgewählten Übergang angewendet.
Drücken Sie die Pos1-Taste und dann die Leertaste.

Wenn die Animation abgespielt wird, werden Sie am Ende der Bewegung ein Abfedern oder Aufspringen des Texts sehen. Hätten Sie die Methode Beschleunigung: Bounce angewendet, wäre die federnde oder aufprallende Bewegung am Anfang des Übergangs zu sehen.

Mit den Abschwächungseigenschaften für Übergänge sparen Sie viel Zeit. Animate umfasst eine Reihe von verschiedenen Übergängen, aber die Namen sind manchmal etwas kryptisch. Sie lernen die verschiedenen Abschwächungseigenschaften am besten kennen, wenn Sie eine Übungsanimation erstellen und auf die gleichen Elemente und Übergänge verschiedene Abschwächungen anwenden.

Erstellen Ihrer ersten Animation

Starten Sie Animate und wählen Sie Datei➝Neu, um ein neues Dokument zu erstellen. Bei einem neuen Dokument beginnen Sie mit einer leeren Bühne. In den Fenstern Elemente und Eigenschaften ist Bühne das einzige Element. Im Bedienfeld Eigenschaften sehen Sie die Abmessungen der Bühne sowie ihre Farbe und andere Eigenschaften. Weiter unten erfahren Sie mehr über diese Eigenschaften.
Erstellen Sie einen Ordner für Ihr Projekt, wählen Sie dann Datei➝Speichern unter und speichern Sie Ihre Datei unter einem Namen wie „Hello_World“ oder „Erster_Versuch“.

Über den Windows Explorer oder den Finder können Sie außerhalb von Animate einen Ordner erstellen, und zwar während Sie die Befehle Datei➝Speichern unter ausführen. Es empfiehlt sich, Animate-Projekte immer gleich unter einem aussagekräftigen Namen zu speichern. Andernfalls haben Sie irgendwann lauter „unbenannte“ Projekte, die Ihnen nichts mehr sagen. Außerdem ist es dadurch einfacher, Ihre Arbeit frühzeitig und oft mit Strg+S oder Befehl+S zu speichern. Am besten speichern Sie jedes Animate-Projekt in einem eigenen Ordner, da Animate beim ersten Speichern eines Projekts mehrere Dateien sowie den Ordner „edge_includes“ anlegt.
Klicken Sie im Fenster Eigenschaften auf das weiße Farbfeld für die Hintergrundfarbe. Ein Bedienfeld wird angezeigt, in dem Sie eine Farbe auswählen können (siehe Abbildung 16). Wenn Sie lieber visuell arbeiten, klicken Sie auf der linken Seite auf die Farbspektrumsleiste, um eine Grundfarbe auszuwählen, und anschließend in das Quadrat, um dort die Feineinstellung vorzunehmen. In manchen Fällen müssen Sie eine bestimmte Farbspezifikation im RGB-Format (rot-grün-blau) oder als Hexadezimalzahl angeben.
Wenn der Farbwähler angezeigt wird, wählen Sie eine dunkelblaue Farbe aus, die den Weltraum darstellen soll. Wenn Sie sich nicht entscheiden können, verwenden Sie für dieses Projekt die Farbe R= 30 G= 45 B= 90 A= 100. In Animate wird das Adobe-Standardverfahren zur Angabe von Zahlen verwendet. Wenn Sie eine Zahl markiert ist, können Sie darauf klicken und dann entweder eine Zahl eingeben oder den Wert durch Ziehen mit der Maus anpassen. Ziehen Sie die Maus nach rechts, um eine niedrigere Zahl einzustellen, und nach links, um sie zu erhöhen.
Setzen Sie ebenfalls im Bedienfeld Eigenschaften der Bühne den Überlauf auf hidden (ausgeblendet). Die Eigenschaft Überlauf steuert die Sichtbarkeit der Elemente, wenn sie in einem Webbrowser angezeigt werden. Es kann vorkommen, dass die Bühne auf einer Webseite nur einen Teil der gesamten Webseite darstellt. Sie können die Sichtbarkeit der Elemente außerhalb des Bühnenrechtecks steuern. Setzen Sie diese Eigenschaft auf hidden, wenn Elemente, die sich außerhalb der Bühne befinden, nicht angezeigt werden sollen.
Wählen Sie Datei➝Importieren. Das Fenster Importieren wird angezeigt, über das Sie ein Bild suchen und auswählen können, etwa ein Bild vom Planeten Erde. Klicken Sie auf Öffnen, um das ausgewählte Bild in Ihr Projekt zu importieren.

Nachdem Sie eine Datei in Ihr Animate-Projekt importiert haben, wird sie im Bedienfeld Elemente aufgeführt und auf der Bühne angezeigt. Sie wird automatisch ausgewählt, damit Sie die Eigenschaften des neu importierten Elements im Bedienfeld Eigenschaften sehen. Für das Bild „planet_earth“ wurden oben im Bedienfeld Sichtbarkeitseigenschaften aktiviert. Direkt darunter befinden sich die Eigenschaften für Position und Größe. Darunter kommen die Eigenschaften zum Transformieren, mit denen Sie Elemente drehen, neigen und skalieren können. Als Nächstes wird der Name der Quelldatei aufgeführt.
Klicken Sie im Bedienfeld Eigenschaften ganz oben auf das Feld ID und ändern Sie „planet_earth“ in „World“.

Wenn Animate Grafiken importiert, übernimmt es den Dateinamen als Elementnamen. In manchen Fällen ist das in Ordnung, aber oft möchte man innerhalb von Animate einen anderen Elementnamen verwenden. Beachten Sie, dass dadurch der Dateiname Ihrer Grafik nicht verändert wird. Die ID „World“ wird verwendet, wenn Sie innerhalb von Animate arbeiten. IDs haben eine wichtige Funktion im HTML-Code, wie weiter unten näher ausgeführt wird. Beachten Sie, dass die Grafik mit der Weltkugel im Bedienfeld Elemente mit dem neuen Namen angezeigt wird. Da sich die Grafik auf der Bühne befindet, erscheint „World“ auch in der Zeitleiste.
Vergewissern Sie sich, dass die Abspielposition in der Zeitleiste bei 0:00 steht. Wenn Sie seit dem Erstellen des Projekts keine Änderungen in der Zeitleiste vorgenommen haben, steht der Abspielkopf bei 0:00, wodurch der erste Augenblick oder Frame (Bild) der Animation gekennzeichnet wird (siehe Abbildung 17). Wenn Sie den Abspielkopf verschieben müssen, ziehen Sie an dem goldfarbenen unteren Teil des Abspielkopfes. Der obere Teil wird Stecknadel genannt. Er sollte automatisch folgen.

In den folgenden Schritten erfahren Sie mehr über den zweigeteilten Abspielkopf.
Ziehen Sie die Grafik mit der Weltkugel auf eine Stelle unterhalb der Bühne. Wie bereits in Schritt 5 erwähnt, können Sie steuern, ob Elemente außerhalb der Bühne auf der Webseite angezeigt werden. Ist die Eigenschaft Überlauf auf hidden (ausgeblendet) gesetzt, werden Elemente, die sich außerhalb der Bühne befinden, im Animate-Arbeitsbereich ein wenig dunkler als sonst dargestellt. Wenn das fertige Projekt in einem Browser angezeigt wird, werden diese Elemente nicht zu sehen sein.
Stellen Sie sicher, dass in der Zeitleiste die Schaltfläche Automatischer Schlüsselbildmodus gedrückt ist. Wenn die Schaltfläche Automatischer Schlüsselbildmodus gedrückt ist (Abbildung 17), werden Schlüsselbilder automatisch in der Zeitleiste erstellt, während Sie Elementeigenschaften ändern. Schlüsselbild-Markierungen haben die Form einer Raute.
Stellen Sie sicher, dass in der Zeitleiste die Schaltfläche Automatischer Übergangsmodus gedrückt ist. Wenn diese Schaltfläche gedrückt ist, erstellt Animate glatte Übergänge anstelle abrupter Änderungen. In diesem Fall wird die Grafik der Weltkugel ruckfrei von einer Position zur anderen bewegt.
Ziehen Sie in der Zeitleiste den Abspielkopf auf 0:01. In der Zeitleiste gibt 0:01 an, dass seit dem Start der Animation 1 Sekunde vergangen ist. Eine rote Linie, die vom Abspielkopf nach unten führt, fungiert als Positionsmarke für alle Eigenschaften- und Elementebenen.
Öffnen Sie, während die Grafik mit der Weltkugel noch ausgewählt ist, im Bedienfeld Eigenschaften den Bereich Position und Größe und klicken Sie neben X und Y auf die rautenförmigen Schaltflächen. In der Zeitleiste werden zwei rautenförmige Schlüsselbilder angezeigt, die die Position der linken und unteren Kante der Grafik mit der Weltkugel kennzeichnen. Die Eigenschaften X und Y bestimmen die Position der Elemente auf der Bühne. Indem Sie im Bedienfeld „Eigenschaften“ neben Position auf die Raute klicken, legen Sie die Position der Weltkugel auf der Bühne manuell fest. Dadurch bleibt die Weltkugel während der ersten Sekunde der Animation auf der gleichen X/Y-Position.
Klicken Sie auf die Schaltfläche Stecknadel umschalten und ziehen Sie dann den unteren, goldfarbenen Teil des Abspielkopfes auf 0:03. Um ein Element zu animieren, ändern Sie seine Eigenschaften über einen bestimmten Zeitraum hinweg. Mit dem Abspielkopf und der Stecknadel markieren Sie zwei verschiedene Zeitpunkte (siehe Abbildung 18).
Ziehen Sie die Weltkugel auf die Bühne, sodass sie dort sichtbar ist. Sie können das Bild auf der Bühne zentrieren oder sich für ein anderes Layout entscheiden, das Ihnen gefällt.
Klicken Sie auf die Schaltfläche Stecknadel umschalten und drücken Sie die Pos1-Taste und dann die Leertaste. Wenn Sie die Pos1-Taste drücken, springt der Abspielkopf auf die Position 0:00 zurück. Beim Drücken der Leertaste wird Ihre Animation abgespielt, sodass Sie auf der Bühne eine Vorschau der Aktion anzeigen können.
Verschieben Sie den Abspielkopf wieder auf die Abspielposition 0:00 und klicken Sie dann in der Symbolleiste auf den Buchstaben T. Die Symbolleiste wird ausgewählt und der Cursor nimmt die Form eines Kreuzes an.
Klicken Sie auf die Bühne und geben Sie „Hello World“ ein. Wenn Sie fertig sind, schließen Sie das Textfenster, indem Sie die Esc-Taste drücken oder rechts oben im Textfeld auf die Schaltfläche x klicken. Die Wörter „Hello World“ werden auf der Bühne angezeigt, aber vermutlich sind sie nicht so positioniert und formatiert, wie Sie es sich vorstellen.
Tragen Sie im Bedienfeld Eigenschaften für das Textfeld die ID „HelloWorld“ ein. Wenn Sie Ihrem Textblock einen Namen zuweisen, können Sie ihn leichter in der Zeitleiste und im Bedienfeld Elemente identifizieren. Animate erlaubt keine Leerzeichen im Namen, daher müssen Sie „HelloWorld“ oder „Hello_World“ verwenden.
Formatieren Sie den Text mithilfe des Bedienfelds Eigenschaften. Ändern Sie die Textfarbe in Weiß oder in ein sehr helles Blau. Wählen Sie Arial Black oder eine andere Fettschrift aus. Passen Sie den Schriftgrad an, sodass der Text fast den Bildschirm ausfüllt (72 px sind bei Arial Black gut geeignet). Jede Änderung am Text wird von Animate in der Zeitleiste vermerkt, indem Eigenschaftenebenen hinzugefügt und Schlüsselbilder erstellt werden.
Positionieren Sie den Text. Zentrieren Sie den Text horizontal und platzieren Sie ihn etwa ein Drittel vom oberen Bühnenrand entfernt.
Setzen Sie, während der Abspielkopf noch auf 0:00 steht, die Deckkraft auf 0. Der Regler für die Deckkraft befindet sich oben im Bedienfeld Eigenschaften. Das bedeutet, dass der Text zu Beginn der Animation nicht sichtbar ist. Nur das Auswahlfeld wird angezeigt, aber sobald Sie auf eine andere Stelle klicken, wird es wieder ausgeblendet. Keine Sorge – Sie können jedes Element auswählen, ob sichtbar oder nicht, indem Sie im Bedienfeld Elemente auf seinen Namen klicken.
Stellen Sie sicher, dass die Schaltfläche Stecknadel umschalten ausgeschaltet ist. Wenn Stecknadel umschalten nicht aktiviert ist, wird sie nicht mehr als gedrückt angezeigt und die Stecknadel wird zusammen mit dem Abspielkopf verschoben.
Ziehen Sie den Abspielkopf auf 0:02. Klicken Sie, während der Text ausgewählt ist, im Bedienfeld „Eigenschaften“ auf die Raute neben Deckkraft. Wenn Sie den Abspielkopf nach rechts ziehen, sehen Sie, wie die Weltkugel auf der Bühne erscheint. Filmschaffende und Animatoren bezeichnen das Vor- und Zurückziehen des Abspielkopfes als „Scrubbing“. Es ist eine schnelle und einfache Methode, um ein bestimmtes Segment einer Animation zu suchen und abzuspielen. Klicken Sie auf die Raute neben Deckkraft und an der 2-Sekunden-Marke, wo der Text noch unsichtbar ist, wird ein Schlüsselbild erstellt.
Aktivieren Sie Stecknadel umschalten wieder und ziehen Sie dann den Abspielkopf auf 0:03. Wenn sich die Stecknadel auf 0:02 und der Abspielkopf auf 0:03 befindet, können Sie einen weiteren Übergang erstellen.
Wählen Sie das Textfeld „HelloWorld“ aus und setzen Sie die Deckkraft auf „100“. Animate erstellt einen Übergang, sodass die Deckkraft des Texts in der Animation zwischen den Abspielpositionen 0:02 und 0:03 allmählich von 0 auf 100 Prozent erhöht wird.
Ziehen Sie die Stecknadel auf 0:03 und den Abspielkopf auf 0:04. Setzen Sie die Deckkraft auf 0. Der Text verschwindet wieder.
Drücken Sie Strg+S (Befehl+S), um Ihre Arbeit zu speichern.

Wie bereits erwähnt, speichert Animate Ihre Animation als Sammlung von HTML- und JavaScript-Dateien. Die HTML-Hauptdatei verwendet den Namen, den Sie in Schritt 2, beim ersten Speichern des Projekts, angegeben haben. So sehen Sie im Projektordner beispielsweise die Datei „Hello_World.html“. Beim Importieren der Grafik „planet_earth.png“ wurde von Animate ein Ordner für Bilder erstellt und eine Kopie der Grafik darin abgelegt. Ihre einfache Animation ist jetzt abgeschlossen. Sie können eine Vorschau in Animate anzeigen, indem Sie die Pos1-Taste und dann die Leertaste drücken. Die Erde erhebt sich ins Blickfeld und Ihre Nachricht wird aus- und wieder eingeblendet (siehe Abbildung 19). Die gesamte Animation dauert 4 Sekunden.

Einrichten der Bühne

Wie der berühmte Barde vor einigen hundert Jahren sagte: „Die ganze Welt ist Bühne.“ Für Edge Animate trifft dies sicherlich zu. Bereits in Kapitel 1 haben Sie erfahren: Wenn Sie ein Element auf der Bühne platzieren, ist es für den Betrachter sichtbar. Es gibt eine Reihe von Möglichkeiten, um Elemente von der Bühne zu entfernen oder auszublenden. Wenn die Eigenschaft Überlauf der Bühne auf hidden (ausgeblendet) gesetzt ist, kann die Bühne rechts, links, oben oder unten verlassen werden, indem Sie das Element an eine Position außerhalb der Bühne verschieben.

Zumindest ist es nicht sichtbar, wenn die Animation in einem Browser angezeigt wird. Die Bühne, mit der Sie in Edge Animate arbeiten, stellt einen Teil einer Webseite dar, wenn sie in einem Browser angezeigt wird. Die Bühne hat eine begrenzte Anzahl von Eigenschaften. Die offensichtlichsten sind ihre Abmessungen und die Hintergrundfarbe, aber Sie sollten auch die anderen Eigenschaften kennen. Hier ein kurzer Überblick, beginnend mit der obersten Option im Bedienfeld Eigenschaften:

Die ID entspricht dem Namen der Animation. Wenn Sie ein Projekt speichern, erstellt Animate eine Webseite in Form eines HTML-Dokuments. Die meisten Browser zeigen die ID der Webseite in einer Registerkarte oder in der Titelleiste des Fensters an.
Zunächst werden die Abmessungen als B (Breite) und H (Höhe) angezeigt und in Pixel angegeben. Sie können die Breite und Höhe der Bühne direkt eingeben oder den Wert durch Ziehen anpassen. Die Bühne muss nicht in der linken oberen Ecke einer Webseite angezeigt werden. Wenn Ihre Animate-Komposition beispielsweise ein Werbebanner ist, könnten Sie eine hohe, schmale Bühne erstellen und sie links auf der Webseite platzieren. Klicken Sie auf den Link neben den Eigenschaften B und H und entsperren Sie das Seitenverhältnis der Bühne. Ist Breite und Höhe verknüpfen aktiviert, bleibt das Seitenverhältnis bestehen, wenn Sie einen neuen Wert eingeben, d. h., der verknüpfte Wert wird ebenfalls geändert. Ist die Verknüpfung aufgehoben, können Sie die Werte B und H unabhängig voneinander ändern. Anstelle der Maßeinheit Pixel (px) können Sie auch eine Angabe in Prozent (%) festlegen. Wenn Sie z. B. die Breite der Bühne auf 80 % setzen, nimmt die Bühne 80 Prozent der Größe des Webbrowser-Fensters ein, in dem sie angezeigt wird. Diese Funktion ist toll, wenn Sie eine Seite entwickeln, die sowohl auf Desktop-Computern, Tablet-PCs als auch auf Mobiltelefonen angezeigt werden soll. Zudem wird die Bühne beim Verkleinern des Browser-Fensters automatisch an die neue Größe angepasst.
Die Hintergrundfarbe wird mithilfe des Farbwählers ausgewählt. Klicken Sie im Bedienfeld Eigenschaften auf das Farbfeld, damit ein Farbwähler eingeblendet wird (siehe Abbildung 20). Klicken Sie links auf die Farbleiste (auch Farbspektrum genannt) und wählen Sie einen Farbton aus. Anschließend klicken Sie auf das größere Quadrat, um eine Feineinstellung des Farbtons vorzunehmen. Der Kreis befindet sich über der ausgewählten Farbe, die rechts unten im Farbfeld angezeigt wird. Über die drei Farbfelder oben rechts können Sie schnell einen weißen, schwarzen oder transparenten Hintergrund auswählen. Wenn Sie in einem Team arbeiten, ist eine Farbspezifikation im RGB- oder Hexadezimal-Format möglicherweise bereits vorgegeben. Oder Sie legen die Farbwerte selbst fest und geben Sie dann an andere Designer weiter.

Verwenden Sie Min B und Max B, um die minimale und maximale Breite der Bühne festzulegen. Webseiten haben keine feste Größe. Ihre Seite kann auf einem Smartphone oder auf einem großen Fernsehbildschirm angezeigt werden. Oder Ihre Leser ändern die Größe des Browser-Fensters. Sie können die Darstellung Ihres Projekts beeinflussen, indem Sie eine minimale und maximale Breite festlegen. Dabei können Sie einen absoluten Wert in Pixel oder für Responsive Design einen prozentualen Wert angeben. Ursprünglich ist Max B auf „none“ eingestellt. Um die Breite zu begrenzen, klicken Sie darauf und deaktivieren „none“. Erst jetzt erscheint der Wert im Bedienfeld und Sie können ihn anpassen.
Die Menüoptionen der Eigenschaft Überlauf steuern, wie Elemente angezeigt werden, die sich außerhalb der Bühne befinden. Oft empfiehlt es sich, diese Eigenschaft auf „hidden“ (ausgeblendet) zu setzen, damit Elemente außerhalb des Bühnenrechtecks unsichtbar sind. Die Option „hidden“ eignet sich gut, wenn Elemente auf der Bühne erscheinen oder die Bühne verlassen sollen. Wenn Sie diese Eigenschaft auf „visible“ (sichtbar) setzen, bleiben Elemente sichtbar, die die Grenze der Bühne überschreiten, sofern auf der Webseite genügend Platz ist. Die Option „scroll“ versieht die Bühne am rechten und unteren Rand mit Bildlaufleisten, damit Elemente, die sich außerhalb der angegebenen Abmessungen der Bühne befinden, angezeigt werden können, indem beim Lesen der angezeigte Ausschnitt durch Scrollen verschoben wird. Die Option „Auto“ fügt automatisch Bildlaufleisten hinzu, wenn der Inhalt größer ist als der Platz auf der Bühne.
Aktivieren Sie das Kontrollkästchen der Option Automatisch abspielen, wenn Ihre Animation automatisch ausgeführt werden soll, sobald die zugehörige Webseite in einem Browser geladen wird. Wenn das Kontrollkästchen deaktiviert ist, müssen Sie einen JavaScript-Trigger verwenden, um die Animation zu starten.
Die Kompositions-ID dient zur Identifizierung dieser speziellen Bühne und der zugehörigen Zeitleiste. Dies wird wichtig, wenn Sie auf einer Webseite mehrere Animate-Kompositionen haben. In den Kapiteln zu JavaScript erfahren Sie mehr zu den Kompositions-IDs.
Über die Eigenschaften Abwärtskompatible Bühne und Standbild werden alternative Elemente für Webbrowser erstellt, die HTML5 noch nicht unterstützen.
Der Preloader ist für das Laden aller Ressourcen verantwortlich, die für die Anzeige Ihrer Komposition auf einer Webseite benötigt werden. Solche Ressourcen sind beispielsweise JavaScript-Bibliotheken oder Grafiken.

Erstellen von eigenem Bildmaterial in Animate

Der nächste Abschnitt beschreibt detailliert die Eigenschaften des Rechtecks. Allerdings werden viele dieser Eigenschaften auch von anderen Objekten wie Textblöcken oder Grafiken verwendet, die Sie in Animate importieren. Wenn Sie also gleich erfahren, wie Sie Rechtecke drehen, neigen und skalieren, denken Sie daran, dass Sie Text und Fotos genauso drehen, neigen und skalieren können.

Rechtecke: Erstellen des Grundrahmens

Mit dem Werkzeug Rechteck können Sie Farbflächen in die Bühne einfügen. Diese eignen sich hervorragend, um verschiedene Bereiche der Webseite voneinander abzusetzen. Angenommen, Sie möchten eine Randleiste erstellen. Fügen Sie ein Rechteck ein und platzieren Sie Text oder Grafiken darauf, um es vom Rest der Seite abzuheben. Vermutlich wissen Sie schon, wie man ein Rechteck zeichnet. Sie klicken im Werkzeugbedienfeld auf das Werkzeug Rechteck, klicken auf die Bühne und ziehen den Mauszeiger diagonal, bis Sie mit Größe und Form des Rechtecks zufrieden sind. Um ein Quadrat zu erstellen, halten Sie die Umschalttaste gedrückt, während Sie ziehen. Das neue Element erscheint auf der Bühne und es wird automatisch ausgewählt, was durch die acht weißen Quadrate entlang des Rahmens ersichtlich ist (siehe Abbildung 21). Diese Quadrate sind die Griffe, mit denen Sie nachträglich die Größe und Form des Rechtecks ändern können, indem Sie sie mit der Maus ziehen. Hier die grundlegenden Eigenschaften, die ein Rechteck beschreiben:

ID: Sobald Sie ein Rechteck auf die Bühne zeichnen, wird es im Bedienfeld Elemente aufgeführt. Wenn das Rechteck ausgewählt ist, werden seine Eigenschaften im Bedienfeld Eigenschaften angezeigt. Wie bei allen Ihren Animate-Elementen empfiehlt es sich, dem Rechteck eine aussagekräftige ID, etwa „LinkeRandleiste“, „LeftSidebar“ oder „Header“. Andernfalls müssen Sie unter Rectangle1, Rectangle2 und Rectangle3 immer erst das Richtige suchen. Um Ihr Rechteck umzubenennen, wählen Sie es aus und ändern oben im Bedienfeld die Eigenschaft ID. Sie können auch im Bedienfeld Elemente auf den Namen doppelklicken.
Tag: Wenn Sie sich einmal das Rechteck im Bedienfeld Elemente ansehen, werden Sie feststellen, dass hinter dem Namen ein <div> steht. Ihrem Rechteck wird automatisch das HTML-Tag <div> zugewiesen. Animate verwendet diese Tags, um Elemente zu identifizieren, zu positionieren und zu transformieren. Bei anderen Elementen haben Sie in Edge Animate die Auswahl zwischen verschiedenen Tags. Wenn Sie beispielsweise ein Foto in Ihre Animation einfügen, ist es sinnvoll, anstelle des <div>-Tags ein <img>-Tag zu verwenden.
Position: Unterhalb des Namens befinden sich im Bedienfeld Eigenschaften Optionen für die Position und die Größe. X = 0 und Y = 0 gibt die Ecke links oben auf der Bühne an. Von links nach rechts erhöht sich der X-Wert. Von oben nach unten erhöht sich der Y-Wert. Zunächst wird auf Ihr Rechteck relativ zur oberen linken Ecke verwiesen. Sie können diesen Referenzpunkt über die Funktion Relativ zu ändern. Die Option sieht aus wie ein Rechteck mit einem Quadrat an jeder Ecke. Angenommen, Sie müssen ein Element in einem bestimmten Abstand von der unteren rechten Ecke der Bühne platzieren. In diesem Fall bietet es sich an, die untere rechte Ecke des Elements als Referenzpunkt zu verwenden. Dazu klicken Sie einfach in das untere rechte Quadrat im Feld Relativ zu.
Größe: Neben den Positionseigenschaften befinden sich die Eigenschaften für die Größe: B (für die Breite) und H (für die Höhe). Diese ändern sich automatisch, wenn Sie die Ziehpunkte des Rechtecks ziehen. Sie können auch eine bestimmte Zahl eintragen oder auswählen. Ursprünglich wird in den Größeneigenschaften für Rechtecke Pixel als Maßeinheit verwendet. Sie können jedoch diese Eigenschaft von Pixel in Prozent ändern. Ein Rechteck mit einer Breite von 20 % hat dann eine Breite von 20 Prozent der Bühnenbreite. Klicken Sie auf den Link neben den Eigenschaften B und H und entsperren Sie das Seitenverhältnis für Ihr Rechteck. Ist Skalierung verknüpfen aktiviert, bleibt das Seitenverhältnis des Rechtecks bestehen, wenn Sie eine Abmessung ändern. Ist die Verknüpfung aufgehoben, können Sie die Werte B und H unabhängig voneinander ändern.
Anzeige: Manche Elemente bleiben immer auf der Bühne, während andere aus- und eingeblendet werden. Das Menü Anzeige bietet Ihnen eine einfache Methode, um ein Element auszublenden, bis es benötigt wird. Die drei Optionen sind: Immer aktiviert, Anzeige einschalten und Anzeige ausschalten.
Überlauf: Das Steuerelement „Überlauf“ funktioniert bei Ihrem Rechteck genauso wie bei der Bühne, aber es wird explizit auf das Rechteck angewendet.
Deckkraft: Verwenden Sie den Regler am oberen Rand des Bedienfelds Eigenschaften, um die Deckkraft des gesamten Rechtecks zu steuern. Wenn Sie die Deckkraft von Rahmen oder Hintergrund gesondert anpassen möchten, klicken Sie auf ihre Farbfelder (werden im nächsten Absatz erläutert) und ändern A (Alpha-Eigenschaft).
Farbe: Rechtecke haben zwei grundlegende Eigenschaften: Rahmenfarbe und Hintergrundfarbe. Die Rahmenfarbe ist die Umrandungslinie des Rechtecks, während die Hintergrundfarbe die Farbfläche im Innern des Rechtecks darstellt. (In anderen Programmen werden diese beiden Eigenschaften manchmal auch mit Kontur und Füllung bezeichnet.) Sie können Rahmen und Hintergrund verschiedene Farben zuweisen oder das Rechteck durchsichtig machen, indem Sie den Alphakanal auf null setzen. Es gibt zwei weitere Eigenschaften für die Kontur. Sie können die Größe in Pixel (px) angeben und Sie haben die Wahl zwischen einer durchgehenden, einer gestrichelten und einer gepunkteten Rahmenlinie oder können mit „Ohne“ die Rahmenlinie ganz weglassen. Die Symbolleiste ganz oben im Arbeitsbereich bietet Ihnen eine weitere Möglichkeit, die Hintergrund- und Rahmenfarbe des ausgewählten Elements schnell zu ändern. Sie funktioniert genau wie der Farbwähler im Bedienfeld Eigenschaften.

Ausrichten, Verteilen und Anordnen von Elementen

Die Maxime „alles hat seinen Platz“ trifft sicherlich zu, wenn es um Animationen geht. Mit mehreren Elementen auf der Bühne ist ihre Beziehung zueinander entscheidend. Designer haben oft ein bestimmtes Raster im Kopf, wenn sie gedruckte Seiten oder Webseiten erstellen. Es ist am besten, wenn Textfelder oder Grafiken an diesem unsichtbaren Raster ausgerichtet sind. Wenn mehrere Elemente ausgerichtet sind, sieht es in der Regel am besten aus, wenn sie im gleichen Abstand voneinander angeordnet sind. Sie können sich die Mühe machen, alle Elemente von Hand genau richtig zu positionieren, aber glücklicherweise ist das gar nicht notwendig.

Um mit den Animate-Funktionen Anordnen, Ausrichten und Verteilen zu experimentieren, können Sie mit den Werkzeugen Rechteck und Abgerundetes Rechteck drei oder vier einfache Objekte erstellen (siehe Abbildung 22). Wenn Sie Elemente auf der Bühne verschieben, werden Sie magentafarbene Linien bemerken, die von den Kanten und Mittelpunkten ausgehen. Dabei handelt es sich um intelligente Hilfslinien und diese können Ihnen helfen, schnell eines oder mehrere Objekte auszurichten, während Sie sie verschieben. In vielen Fällen benötigen Sie keine weitere Hilfestellung, um das gewünschte Ergebnis zu erzielen.

Formalere Ausrichtungsfunktionen finden Sie im Menü Modifizieren➝Ausrichten. Damit die Ausrichtung funktioniert, benötigen Sie mindestens zwei Elemente. Eines dieser Elemente kann die Bühne sein. Sie können die Elemente auf der Bühne auswählen oder Sie können das Bedienfeld Elemente verwenden. Um diese Befehle zu verwenden, wählen Sie alle Elemente aus, die Sie ausrichten möchten, und wählen dann eine der folgenden Optionen aus:

Modifizieren➝Ausrichten➝Links
Modifizieren➝Ausrichten➝Horizontal zentriert
Modifizieren➝Ausrichten➝Rechts
Modifizieren➝Ausrichten➝Oben
Modifizieren➝Ausrichten➝Vertikal zentriert
Modifizieren➝Ausrichten➝Unten. Mithilfe der Befehle Modifizieren➝Verteilen können Sie dafür sorgen, dass drei oder mehr Elemente auf der Bühne im gleichen Abstand voneinander positioniert werden. Sie können festlegen, auf welchen Teil Ihrer Elemente der Befehl Verteilen angewendet wird und ob die Aktion entlang der horizontalen oder vertikalen Achse erfolgt. Die spezifischen Befehle lauten wie folgt:
Modifizieren➝Verteilen➝Links
Modifizieren➝Verteilen➝Horizontal zentriert Modifizieren➝Verteilen➝Rechts
Modifizieren➝Verteilen➝Oben
Modifizieren➝Verteilen➝Vertikal zentriert
Modifizieren➝Verteilen➝Unten

Lineale und manuelle Hilfslinien

Die Bühne besitzt Lineale, mit deren Hilfe Sie Elemente präzise platzieren können. Sie können Lineale über das Menü Ansicht (Ansicht➝Lineale) oder mit dem Tastaturbefehl Strg+R (Befehl+R) ein- und ausblenden. Die Lineale reichen über die Ränder der Bühne hinaus, aber es gibt Markierungen, die die aktuelle Größe der Bühne kennzeichnen. Um sich die Ausrichtung von Elementen zu erleichtern, klicken Sie in das horizontale bzw. vertikale Lineal und ziehen es in Richtung Bühne. Die Hilfslinie folgt und bleibt an der Stelle stehen, an der Sie die Maustaste loslassen. Wenn das nicht die perfekte Stelle ist, können Sie sie anschließend auf eine neue Position ziehen. Wenn Sie eine Hilfslinie nicht mehr benötigen, können Sie sie entfernen, indem Sie sie zurück ins Lineal ziehen. Um ein unbeabsichtigtes Auswählen und Verschieben von Hilfslinien zu verhindern, verwenden Sie den Befehl Ansicht➝Hilfslinien sperren.

Dadurch werden die Hilfslinien fixiert, bis Sie sie mit Ansicht➝Hilfslinien entsperren wieder entsperren. Um sich die Ausrichtung an Hilfslinien zu vereinfachen, aktivieren Sie An Hilfslinien ausrichten (Ansicht➝An Hilfslinien ausrichten).

Sie können mehrere Hilfslinien für verschiedene Ausrichtungsaufgaben auf die Bühne ziehen und mit Ansicht➝Hilfslinien bzw. Strg+; (Befehl+;) können Sie alle Hilfslinien gleichzeitig ein- und ausblenden.

Anordnen von Elementen: Z-Reihenfolge

Neben der horizontalen und vertikalen Positionierung gibt es eine andere Möglichkeit, um die Objekte auf Ihrer Bühne anzuordnen. Während Sie Elemente erstellen, bemerken Sie möglicherweise, dass neue Elemente sich anscheinend vor den älteren Elementen befinden. Wenn Sie ein neues Element auf dieselbe X/Y-Position auf der Bühne ziehen, wird dadurch ein älteres Element verdeckt. Wenn Sie mit Photoshop vertraut sind, könnten Sie sich diese Positionierungsart als Ebenen vorstellen. In der Fachterminologie wird dies oft als Z-Ebene oder Z-Reihenfolge bezeichnet, da diese dritte Dimension als Z-Achse bekannt ist.

Sie können die Z-Reihenfolge der Elemente auf der Bühne untersuchen, indem Sie sich einfach das Bedienfeld Elemente betrachten. Elemente, die ganz oben auf der Liste stehen, sind weiter vorne. Wenn Sie die Reihenfolge ändern möchten, ziehen Sie einfach ein Element auf eine neue Position im Bedienfeld. Animate stellt Ihnen außerdem Menü- und Tastaturbefehle zur Verfügung, um Elemente anders anzuordnen:

Modifizieren➝Anordnen➝In den Vordergrund (Strg+Umschalt+] bzw. Umschalt+Befehl+])
Modifizieren➝Anordnen➝Nach vorne bringen (Strg+] bzw. Befehl+])
Modifizieren➝Anordnen➝Nach hinten verschieben (Strg+[ bzw. Befehl+[)
Modifizieren➝Anordnen➝In den Hintergrund (Strg+Umschalt+[ bzw. Umschalt+Befehl+[)

Rechtecks-Animation

Nun heißt es Ärmel hochkrempeln. Genug der Theorie, Zeit für die eigentliche Animation. In dieser Übung erstellen Sie vier Rechtecke. Sie geben ihnen Namen, wenden Farbe an und neigen sie.

Dann positionieren Sie sie auf der Bühne und sorgen dafür, dass sie sich bewegen, ihre Form ändern und sich schließlich aufzulösen scheinen. Es ist die Art von Effekt, die oft als Teil einer Banneranzeige oder als Vorspann vor einer komplexeren Animation verwendet wird.

Diese Übung ist in zwei Teile aufgeteilt. Im ersten Teil erstellen und positionieren Sie die Farbbalken:

Öffnen und speichern Sie ein neues Animate-Projekt mit dem Namen „Color_Bars“. Vergessen Sie nicht, einen neuen Ordner für Ihr Projekt anzulegen.
Setzen Sie die Bühnenfarbe auf Weiß und die Abmessungen auf B = 550 px und H = 400 px. Animate merkt sich die jeweils letzten Bühneneinstellungen. Wenn Sie also die vorherigen Übungen durchgeführt oder selbst etwas experimentiert haben, müssen Sie möglicherweise zunächst die entsprechenden Änderungen vornehmen.
Stellen Sie in der Zeitleiste (Abbildung 23) sicher, dass die Schaltflächen Automatischer Schlüsselbildmodus und Automatischer Übergangsmodus gedrückt sind. Wenn Sie den Cursor über die Schaltflächen halten, werden QuickInfos mit ihren Namen eingeblendet. Oben in der Zeitleiste sehen Sie beispielsweise die Schaltflächen Automatischer Schlüsselbildmodus, Automatischer Übergangsmodus, Stecknadel umschalten und Abschwächung.
Zeichnen Sie ein Rechteck und tragen Sie im Bedienfeld Eigenschaften die ID „Red“ ein. Das ID-Feld wird oben im Bedienfeld Eigenschaften angezeigt, wenn das Rechteck ausgewählt ist.
Klicken Sie im Bedienfeld Eigenschaften auf die Hintergrundfarbe und legen Sie ein reines Rot fest und setzen Sie die Rahmenfarbe auf „Ohne“. Wenn Sie fertig sind, sollte die Farbe den Hexadezimalwert #ff0000 haben.
Legen Sie eine Rechteckgröße von B = 550 px und H = 100 px fest. Am schnellsten erreichen Sie das, wenn Sie die Abmessungen in das Bedienfeld Eigenschaften eingeben, aber wenn Sie lieber mit der Maus arbeiten, können Sie auch die Ziehpunkte des Rechtecks ziehen. Möglicherweise müssen Sie auf die Verknüpfungsschaltfläche neben B und H klicken, damit Sie Breite und Höhe unabhängig voneinander ändern können.
Setzen Sie die Option Neigen (x) auf einen Winkel von 50 Grad). Die horizontale Neigung ist die obere Einstellung. Mit einer positiven Zahl wird die obere Kante nach links verschoben und die untere nach rechts.
Positionieren Sie Ihr rotes, geneigtes Rechteck in der oberen linken Ecke der Bühne, sodass nur seine Spitze sichtbar ist. Als Positionseigenschaften legen Sie X = – 550 px und Y = 0 px fest. Im Idealfall wird nur ein rotes Dreieck in der oberen linken Ecke der Bühne angezeigt.
Drücken Sie, während das rote Rechteck ausgewählt ist, Strg+D (Befehl+D). Ändern Sie die ID von „RedCopy“ in „Green“. Ändern Sie dann die Farbe des neuen Rechtecks in Grün. Der Hexadezimalwert für Grün ist #00ff00. Sie können die Hintergrundfarbe eines ausgewählten Elements im Bedienfeld Eigenschaften im Bereich Farbe oder über die Farbfelder in der Symbolleiste oberhalb der Bühne ändern.
Richten Sie die Oberseite des grünen Rechtecks an der Unterseite des roten Rechtecks aus (Y = 100 px). Halten Sie dann die Umschalttaste gedrückt und schieben Sie das grüne Rechteck nach rechts, bis nur noch die Spitze zu sehen ist (X = 430 px).

Wenn Sie beim Verschieben eines Elements die Umschalttaste gedrückt halten, wird es entlang einer horizontalen oder vertikalen Achse geführt. Sie können es zwar noch aus der Achse herausziehen, aber es scheint ein wenig „festzuhängen“.
Erstellen Sie zwei weitere geneigte Rechtecke und weisen Sie ihnen die IDs „Blue“ und „Yellow“ und die Farben Blau und Gelb zu. Positionieren Sie die Rechtecke auf abwechselnden Seiten auf der Bühne. Die blaue Farbe hat den Wert #0000ff und die gelbe #ffff00. Wenn Sie alle Rechtecke positioniert haben, sollten Sie eine Anordnung wie in Abbildung 23 haben.

Animieren durch Hinzufügen von Eigenschaftenschlüsselbildern

Da Sie jetzt die Farbbalken erfolgreich erstellt und positioniert haben, können sie bewegt werden. In Kapitel 1 haben Sie gesehen, wie die Position der Elemente auf der Bühne durch Eigenschaftenschlüsselbilder in der Zeitleiste gesteuert wird. Wenn die Schaltfläche Automatischer Schlüsselbildmodus gedrückt ist (wie in Abbildung 23), wird jedes Mal ein neues Eigenschaftsschlüsselbild erstellt, sobald Sie eine Eigenschaft festlegen oder ändern. Sie können Eigenschaftenschlüsselbilder auch manuell erstellen, indem Sie auf die rautenförmigen Schaltflächen im Bedienfeld Eigenschaften klicken. Es empfiehlt sich, zu Beginn der Animation die Eigenschaften Position, Größe und Deckkraft zu sperren, indem Sie Eigenschaftenschlüsselbilder erstellen. Anschließend erstellen Sie weiter hinten in der Zeitleiste davon abweichende Eigenschaftenschlüsselbilder. Das Ergebnis ist wie Zauberei.

Vergewissern Sie sich, dass der Abspielkopf in der Zeitleiste bei 0:00 steht. Wählen Sie im Bedienfeld Eigenschaften das Parallelogramm mit dem Namen „Red “ aus und klicken Sie neben X, Y, B, H und Deckkraft auf die rautenförmige Schaltfläche.

Die Eigenschaften X und Y befinden sich im Bereich Position und Größe. Sie steuern die Position. Die Schaltflächen B und H Schaltflächen erstellen Schlüsselbilder für die Breite und Höhe. Der Regler für die Deckkraft befindet sich oben im Bedienfeld Eigenschaften. Die Schaltflächen mit der Raute fügen Eigenschaftenschlüsselbilder und einzelne Eigenschaftsebenen in die Zeitleiste ein (siehe Abbildung 24). Eigenschaftenschlüsselbilder verankern einen bestimmten Eigenschaftswert an einem bestimmten Zeitpunkt. In der Zeitleiste sollten Sie jetzt Eigenschaftenschlüsselbilder und Eigenschaftsebenen sehen für:
- Links
- Oben
- Breite
- Höhe
- Deckkraft
Wenn unter „Red“ nicht alle Schlüsselbilder und Eigenschaftenzeitleisten sehen, sollten Sie sie manuell erstellen, indem Sie neben der fehlenden Eigenschaft auf die rautenförmige Schaltfläche klicken.
Wiederholen Sie Schritt 1 für den grünen, blauen und gelben Farbbalken, um für jeden Balken die Eigenschaftenschlüsselbilder und -ebenen zu erstellen. Es geht schneller, wenn Sie zuerst alle drei Balken auswählen und dann auf die Schlüsselbild-Schaltflächen klicken.
Stellen Sie sicher, dass nur die Schaltflächen Automatischer Schlüsselbildmodus und Automatischer Übergangsmodus aktiviert (gedrückt) sind. Wenn der automatische Schlüsselbildmodus aktiviert ist, erstellt Animate automatisch Eigenschaftenschlüsselbilder, während Sie auf der Bühne Elemente ändern. Dieser Vorgang umfasst zwei Stufen. Schieben Sie den Abspielkopf auf einen Zeitpunkt und ändern Sie dann die Eigenschaften des Elements. Sie können die Änderungen im Bedienfeld „Eigenschaften“ oder direkt auf der Bühne mithilfe des Auswahl- und des Transformationswerkzeugs vornehmen.
Ziehen Sie in der Zeitleiste den Abspielkopf auf die Position 0:02. Für diesen Schritt sollte die Stecknadel deaktiviert (nicht gedrückt) sein.
Ziehen Sie jedes Rechteck über die Bühne, bis das Ende des geneigten Rechtecks sichtbar ist.

Bis zu diesem Zeitpunkt ist der größte Teil der Bühne durch die Farbbalken bedeckt, nur an der Seite scheinen noch zwei weiße Dreiecke durch. Denken Sie daran, während des Ziehens die Umschalttaste zu drücken, wenn die vertikale Position der Balken beibehalten werden soll.
Klicken Sie, während alle Rechtecke im Bedienfeld Eigenschaften ausgewählt sind, auf die Schaltfläche Schlüsselbild für Deckkraft hinzufügen. Ziehen Sie den Abspielkopf vor und zurück, um eine Vorschau der Animation anzuzeigen. Die Deckkraft wurde am zweiten Punkt für jeden Farbbalken auf 100 Prozent eingestellt. Durch Vor- und Zurückziehen des Abspielkopfes erhalten Sie einen ersten Eindruck von der Animation.
Ziehen Sie den Abspielkopf auf die Position 0:03. Diese Position repräsentiert den Zeitpunkt, an dem 3 Sekunden Ihrer Animation bereits abgespielt wurden.
Wählen Sie jedes Rechteck aus und ändern Sie dann die Höhe (H) auf 300 px und die Deckkraft auf 50 Prozent. Dies hat den Effekt, als würden die Rechtecke größer, sich vertikal schneiden und gleichzeitig verschwimmen (siehe Abbildung 25). Denken Sie daran, dass Sie eventuell die Verknüpfung der Eigenschaften B und H aufheben müssen, damit Sie sie unabhängig voneinander ändern können.
Ziehen Sie den Abspielkopf auf die Position 0:04. Ändern Sie dann die Höhe jedes Rechtecks in 500 px und die Deckkraft in 0 Prozent. Der Effekt ist, dass die Rechtecke weiter wachsen und verschwimmen und schließlich nicht mehr zu sehen sind.

Abgerundete Rechtecke: vielseitiger, als man denkt

OK, Animate trickst ein bisschen, was die Werkzeuge Rechteck, Abgerundetes Rechteck und Ellipse anbelangt. Das Geheimnis ist: Sie können alle diese Formen mithilfe des Werkzeugs Rechteck erstellen, wenn Sie die Eigenschaften entsprechend abändern. Dies liegt daran, dass diese Formen durch JavaScript-Code definiert werden. Sie können dies überprüfen, indem Sie mit jedem Werkzeug eine Form zeichnen und sich ihre Eigenschaften anschauen. Sie können ein Rechteck in ein abgerundetes Rechteck umwandeln, indem Sie den Radius der Ecken anpassen (siehe Abbildung 26). Entsprechend können Sie mit denselben Eigenschaften aus einem abgerundeten Rechteck ein Quadrat machen. Und so funktioniert's:

Erstellen Sie in einem neuen Animate-Projekt ein Rechteck und behalten sie die Auswahl bei. Aktivieren Sie das Werkzeug Transformieren. Wenn Sie in den Eigenschaften des Rechtecks den Cursor über die rautenförmige Schlüsselbild-Schaltfläche halten, wird die QuickInfo Schlüsselbild für Rahmenradien hinzufügen eingeblendet. Die drei Schaltflächen am oberen Rand des Bedienfelds sind beschriftet mit 1, 4 und 8. Unten sehen Sie ein Quadrat, bestehend aus Schaltflächen, bei denen Sie einzeln die vier Ecken eines Rechtecks auswählen können. Neben diesen Eckschaltflächen steht eine Zahl, die ursprünglich auf 0 gesetzt ist. Ein Eckenradius von 0 bedeutet, dass das Rechteck rechtwinklige Ecken hat. Klicken Sie auf die Zahl und ziehen Sie sie nach rechts, um die Ecken abzurunden. Das Nummernfeld akzeptiert nur positive Zahlen, daher können Sie sie nicht nach links ziehen. Beachten Sie, dass beim Ziehen die schwarzen Rauten an den Ecken des Rechtecks zur Mitte verschoben werden. Diese Rauten sind Steuerungspunkte für die Eckradien. Sie können bei jedem Rechteck die Rauten manuell ziehen und dadurch die abgerundeten Ecken anpassen.

Setzen Sie Ihr Rechteck zurück, damit es quadratisch ist, und klicken Sie im Bedienfeld „Eigenschaften“ auf die obere, rechte Ecke. Ändern Sie Radiuseinstellung und diesmal werden Sie feststellen, dass die Ecke rechts oben quadratisch bleibt, während die anderen den abgerundeten Stil übernehmen. Wenn eine Ecke gedrückt ist, wird sie dadurch aus den Einstellungen für abgerundete Ecken ausgeschlossen.

Setzen Sie das Rechteck wieder zurück und klicken Sie auf die obere rechte Ecke, damit die Schaltfläche wieder deaktiviert ist. Klicken Sie dann oben in den Eigenschaften für Ecken auf die Schaltfläche „4“. Neben jeder Ecke werden vier neue Nummernfelder angezeigt. Jetzt können Sie für jede Ecke einen anderen Radiuswert festlegen. Dadurch haben Sie die Möglichkeit, unregelmäßige Formen zu erstellen, obwohl sie, technisch gesehen, immer noch vier Ecken haben. Wenn Sie diese Methode mit den Eigenschaften „Neigen“ und „Skalierung“ kombinieren, können Sie einige wirklich interessante Amöben-Effekte erzeugen. Klicken Sie auf die Schaltfläche „8“. Jede Ecke erhält zwei Steuerungsnummern. Jetzt haben Sie die Möglichkeit, den Steuerungspunkt von der Mitte wegzuziehen, sodass diese Ecke auf der einen Seite flacher ist als auf der anderen. Beachten Sie, dass der Steuerungspunkt mit der schwarzen Raute beim Anpassen der Einstellungen ebenfalls verschoben wird. Sie können Ihre Ecken immer anpassen, indem Sie entweder die Nummernfelder oder die Steuerungspunkte im Rechteck verwenden.

Kreise als stark abgerundete Rechtecke

Sie können mit den Radiuseigenschaften der Ecken experimentieren, indem Sie Rechtecke in Ellipsen und Kreise verwandeln. Hier beispielsweise die Schritte, um ein Quadrat in einen Kreis zu verwandeln:

Klicken Sie auf das Werkzeug Rechteck und ziehen Sie bei gedrückter Umschalttaste ein Rechteck auf. Bei gedrückter Umschalttaste werden alle Seiten des Rechtecks gleich groß gezeichnet.
Klicken Sie im Bedienfeld „Eigenschaften“ im Bereich Ecken auf die Schaltfläche mit der Nummer 1. Bei dieser Einstellung verwenden alle Ecken den gleichen Eckenradiuswert.
Klicken Sie auf das das Radius-Nummernfeld und ziehen Sie den Mauszeiger, bis sich das Quadrat in einen Kreis verwandelt (siehe Abbildung 27).

Es ist möglich, die Zahl so weit zu ziehen, bis sich die Eckenradien in der Mitte treffen, aber um einen Kreis zu erzeugen, ist das nicht erforderlich. Sie können die Eigenschaften des Kreises ebenso ändern und anpassen wie die Eigenschaften jedes anderen Objekts in Animate. Indem Sie das Objekt neigen, können Sie Ellipsen erstellen. Durch Skalieren können Sie Ovale erstellen. Und natürlich können Sie mit den richtigen Einstellungen jede sonstige Form zwischen einem Quadrat und einer Ellipse erstellen.

Erstellen von Grafiken mit Schlagschatten

Schlagschatten sehen nicht nur cool aus, sie bieten Ihnen eine Möglichkeit, verschiedene Elemente visuell zu trennen. Wenn Sie einer Grafik einen Schlagschatten zuweisen, sieht es aus, als würde diese Grafik über der Bühne schweben. Definieren Sie einen Schatten für das Innere eines Elements, erhält es dadurch ein dreidimensionales Aussehen. Schatten werden häufig für Schaltflächen verwendet, um für die Status „Unter dem Mauszeiger“, „Geklickt“ und „Ausgewählt“ jeweils eine andere Darstellung zu erstellen. Animate bietet Ihnen eine einfache Möglichkeit, um Schlagschatten zu erstellen und sie entsprechend Ihrer Bedürfnisse und Ihres Geschmacks zu verändern.

Für einen unauffälligen Schatten, der ein Element vom Hintergrund absetzt, führen Sie die folgenden Schritte aus:

Zeichnen Sie drei Elemente auf der Bühne.
Wählen Sie eines davon aus und öffnen Sie dann im Bedienfeld Eigenschaften den Bereich Schatten (siehe Abbildung 28).
Klicken Sie auf das Farbfeld und wählen Sie Schwarz aus.
Klicken Sie in das Feld für den horizontalen Offset und geben Sie 4 ein.
Klicken Sie in das Feld für den vertikalen Offset und geben Sie 4 ein.
Klicken Sie auf den Weichzeichnungsradius und geben Sie 14 ein.
Klicken Sie auf Überfüllen und geben Sie 2 ein.

Soll eines der Elemente dreidimensional aussehen, können Sie dieselben Einstellungen verwenden, aber auf die Schaltfläche „Einschub“ klicken. Der Schatten erscheint dann nicht außerhalb des Elements, sondern wird innerhalb des Elements erstellt. Die Eigenschaft Überfüllen steuert die Größe des Schattens und sorgt dafür, dass er sich in alle Richtungen verbreitet. Wie bei jeder anderen Eigenschaft können Sie festlegen, dass sich der Schlagschatten im zeitlichen Verlauf ändert. Mit ein wenig Kreativität können Sie den Eindruck erwecken, dass die Sonne ihre Position am Himmel ändert, wobei die Schatten wandern und ihre Form ändern. Schatten sind auch ein wichtiges Instrument für Text: Text ist auf einem unruhigen Hintergrund besser lesbar, wenn er durch einen Schatten abgetrennt wird.

Importieren von Bildern

Grundformen und Text können Sie in Animate recht gut erstellen, aber wenn es darum geht, komplexe und künstlerisch hochwertige Grafiken zu schaffen, werden Sie wohl lieber auf Ihre gewohnten Bildbearbeitungsprogramme zurückgreifen. Für aufwendige Zeichnungen und Strichzeichnungen verwenden Sie vielleicht Adobe Illustrator. Und für Fotografien ein Programm wie Photoshop, Lightroom oder iPhoto. Adobe Fireworks könnte möglicherweise die ideale Ergänzung für Animate sein, da beide Tools für die Erstellung von Webinhalten entwickelt wurden. Unabhängig davon, wie Sie die JPEG-, GIF-, PNG- oder SVG-Dateien erstellen, können Sie sie in Animate importieren und dann animieren, indem Sie ihre Position auf der Bühne und ihr Aussehen verändern.

Der Vorgang zum Importieren von Bildern und Grafiken ist, unabhängig vom Dateiformat, immer derselbe. Wählen Sie „Datei“➝„Importieren“ und suchen Sie dann die Datei heraus, die Sie in Ihr Projekt einbinden möchten. Auf der Buch-CD finden Sie im Ordner „02-2_Sliding_Show“ drei Fotos im JPEG-Format. Zur Übung können Sie ein neues Projekt mit einem neuen Ordner namens „02-2_Sliding_Show“ erstellen und jedes der Fotos importieren. Nachdem Sie Datei➝Importieren gewählt haben, wird das Standardfenster für die Dateiauswahl geöffnet. Wenn Sie alle drei Dateien gleichzeitig importieren möchten, wählen Sie sie bei gedrückter Umschalttaste aus. Wie gewohnt importiert Animate die Dateien und weist ihnen gleich einen Namen basierend auf dem Dateinamen zu. In diesem Fall finden Sie im Bedienfeld Elemente die Elemente „squirrel“, „farmhouse“ und „bike“ vor. Jedes Bild wird auf der Bühne automatisch an der Position 0,0 platziert. Sie werden jedoch nur eines der Bilder sehen, da sie einander überdecken.

Die Entscheidung zwischen GIF, JPG, PNG und SVG

Die Welt der 2D-Computergrafiken bietet zwei Systeme zum Speichern und Anzeigen von Bildern: Bitmaps (der technische Begriff ist „Rastergrafiken“) und Vektorgrafiken.

Computerprogramme speichern Bitmaps als Pixel, die durch ihre Farbe und Position identifiziert werden. Der Begriff „Bitmap-Grafik“ bezieht sich nicht nur auf Dateien mit der Windows-Bitmap-Erweiterung „BMP“, sondern auf alle Bilder, die im Bitmap-Format gespeichert werden, einschließlich „GIF“, „JPG“, „TIFF“ und „PNG“.

Der Vorteil von Bitmap-Grafiken ist, dass sie superrealistische Details mit komplexen Farben, Farbverläufen und nuancierte Schattierungen ermöglichen. Die Kehrseite ist, dass unkomprimierte Bitmaps in der Regel eine viel Speicherplatz benötigen und nicht besonders gut skalierbar sind. Angenommen, Sie haben ein Bitmap-Bild eines Autos und Sie weisen ein Programm an, die Größe um 500 Prozent zu erhöhen.

Das Programm muss für das größere Bild neue Pixel erstellen, d. h., es dupliziert die bereits im Bild vorhandenen Pixel (Farbpunkte). Die Ergebnisse sind nicht immer schön. Das gesamte Bild wird höchstwahrscheinlich unscharf. Abgerundete Kanten werden vermutlich gerastert oder verpixelt (grobkörnig) dargestellt, sodass einzelne Bildpunkte zu sehen sind.

Vektorgrafiken hingegen werden vom Computer als Formeln gespeichert. Im Vergleich zu Rastergrafiken beanspruchen Vektorgrafiken verhältnismäßig wenig Speicherplatz und sie sind skalierbar. Mit anderen Worten, wenn Sie ein kleines Auto zeichnen und sich entschließen, es um 500 Prozent zu skalieren, sind in der vergrößerten Zeichnung nach wie vor schöne, klare Details sichtbar.

Die Stärken und Schwächen der einzelnen Formate sind wichtig, wenn Sie mit Bildern arbeiten. Bitmaps sind für fotorealistische Bilder mit vielen Farben und Schattierungen besser geeignet. Vektorgrafiken eignen sich besser für Strichgrafiken, Diagramme und Bilder, die Sie in verschiedenen Größen darstellen müssen. Animate kann vier Arten von Grafikdateien importieren – JPG, GIF, PNG und SVG – es gibt jedoch einige Punkte, die dabei zu beachten sind.

JPG-Dateien, auch bekannt als JPEGs, sind das vertraute Bitmap-Format, das im Web und auch von vielen Kameras verwendet wird. Das Format wurde von der Joint Photographic Experts Group entwickelt, daher die Abkürzung. JPEG-Dateien verwenden ein verlustbehaftetes Komprimierungsverfahren, um geringere Dateigrößen zu erzielen. In Bildeditoren, die mit JPEGs arbeiten, können Sie in der Regel den Grad der Komprimierung wählen. Wenn Ihr Bild nur auf einem Bildschirm angezeigt wird, können Sie eine hohe Komprimierung wählen. Wenn es für einen Fotodrucker gedacht ist und in Postergröße ausgedruckt werden soll, werden Sie jedes einzelne Pixel benötigen.

GIF-Dateien wurden von CompuServe entwickelt, einem der frühen Online-Dienste. Die Abkürzung kommt von „Graphic Interchange Format“. Die Beliebtheit von GIFs scheint im Vergleich zu JPEGs und PNGs abzunehmen, sie sind aber immer noch auf vielen Websites anzutreffen. GIFs sind Bitmaps, die mit einem verlustfreien Komprimierungsverfahren gespeichert werden, aber eine begrenzte Farbpalette verwenden. Das Ergebnis bei einem Bild mit großen Volltonflächen, etwa ein Firmenlogo oder ein Balkendiagramm, ist oft eine sehr kleine Datei. Auf der anderen Seite wird ein fotografisches Bild im GIF-Format nicht so gut komprimiert und vielleicht auch nicht so gut aussehen wie z. B. ein JPEG, und zwar aufgrund der begrenzten Anzahl an Farben. GIFs bieten ein paar nette Tricks. Sie können animierte GIFs mit einer einfachen Frame-für-Frame-Animation erstellen. Programme wie Adobe Fireworks und Flash machen diesen Prozess recht einfach.

Bei GIFs haben Sie auch die Möglichkeit, Teile des Bilds transparent zu machen. Das ist toll, wenn Sie eine unregelmäßige Form, etwa eine animierte Figur, auf einem bereits entwickelten Hintergrund, z. B. der Innenansicht eines Zimmers, platzieren.

PNG-Dateien wurden zu einer Zeit entwickelt, als es im Zusammenhang mit GIF noch offene patentrechtliche Fragen gab. Diese Abkürzung (wird als „ping“ ausgesprochen) bedeutet „Portable Network Graphics“. Das PNG-Format wurde (im Gegensatz zu Druckgrafiken) speziell für das Web entworfen und um Merkmale zu verbessern, die bereits bei GIF-Dateien populär waren. PNG-Dateien verwenden ein verlustfreies Komprimierungsverfahren, bieten eine größere Palette an Farben, können animierte Sequenzen anzeigen und transparente Bereiche innerhalb des Bilds umfassen. PNG-Dateien werden in modernen Webbrowsern gut unterstützt, aber es gibt sicher noch einige ältere Browser, die das Format nicht verarbeiten können. Das PNG-Format funktioniert gut mit Animate, nicht zuletzt, weil beide für das Web entwickelt wurden. SVG-Dateien sind vektorbasiert. Der Name steht für „Scalable Vector Graphics“. Das heißt, anstatt ein Bild Pixel für Pixel aufzuzeichnen, enthalten SVG-Dateien Formeln, die die Linien, Kurven, Formen und andere Details eines Bilds mathematisch beschreiben. Alle modernen Webbrowser unterstützen das SVG-Format, aber in älteren Browsern ist die Unterstützung für SVG inkonsistent.

Wenn Sie die Größe eines SVG-Bilds in Animate ändern, kann es zunächst verpixelt aussehen – jene gezackte, treppchenförmige Darstellung, die Grafiken oft aufweisen, wenn sie vergrößert werden. Wird ein so geändertes Bild in einem Browser angezeigt, ist diese Aufrasterung zu sehen. Wenn Sie das Bild hingegen in Animate nicht ändern, lässt es sich im Browser-Fenster ohne solche unerwünschten Effekte vergrößern und verkleinern.

Bei Ihrem Konto anmelden