Hinzufügen von Text zu einem Projekt (Tutorial)

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.

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.

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:

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:

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.

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

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:

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.

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.

Ö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 Fuß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, wenn der Text auf den Boden auftrifft, können Sie eine cartoon-ähnliche Quetschbewegung erstellen, als ob der Text beim Auftreffen auf dem Boden komprimiert würde.

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:

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 Webbrowserfensters 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 Browserfensters 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 Browserfensters. 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.

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.

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.

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
  

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.

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+[)

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

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.

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.

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:

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:

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 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 Browserfenster ohne solche unerwünschten Effekte vergrößern und verkleinern.