Adobe® Flash® kann auf den ersten Blick etwas kompliziert wirken. Ein Grund für diese anscheinende Komplexität ist, dass Sie das Programm für viele verschiedene Dinge benutzen können, z. B. für Comic-Animationen, als Media Player und sie ist zugleich eine ausgefeilte Software. Dieser Lehrgang ist für Sie geeignet, wenn Sie Flash zum ersten Mal verwenden. Er zeigt Ihnen einige grundlegende Aspekte des Programms und erklärt, wie Sie damit ein echtes Projekt erstellen. Sie brauchen nichts über Flash oder Animationen zu wissen, um diesen Lehrgang durchzuführen; Sie werden sogar feststellen, wie einfach es ist, mit Flash Elemente in Ihre Webseiten einzufügen.
Dies ist der erste Teil eines dreiteiligen Artikels, in dem erläutert wird, wie ein einfaches animiertes Banner in Flash erstellt und mit Adobe Dreamweaver® in eine Webseite eingefügt wird. Im ersten Teil lernen Sie, wie Sie eine Datei erstellen und ihre Einstellungen ändern, Grafiken aus der Bibliothek importieren und zur Bühne hinzufügen sowie Ebenen erstellen. Im zweiten und dritten Teil fügen Sie eine Animation hinzu und erstellen eine Schaltfläche, über die ein Browserfenster geöffnet wird. Anschließend legen Sie Veröffentlichungseinstellungen fest und fügen das Banner einer Webseite hinzu.
Hinweis: In diesem Artikel wird Flash CS3 Professional verwendet. Wenn Sie noch mit Flash 8 arbeiten, lesen Sie bitte die vorherige Version dieses Artikels. Wenn Sie noch mit Flash MX 2004 arbeiten, können Sie die noch ältere Version des Artikels lesen*.
Sie können sich auch einen Videolehrgang dieser Lehrgangsreihe im Adobe Video-Workshop ansehen.
Damit Sie diesen Artikel nachvollziehen können, benötigen Sie die folgende Software:
Kein Hintergrundwissen erforderlich.
Mit Flash lassen sich alle möglichen Elemente für das Web oder CD-ROMs und Geräte erstellen. Zunächst erstellen Sie eine Datei im Flash-Authoring-Programm, die Sie dann verwenden, um die SWF-Dateien auszugeben. SWF-Dateien sind die Dateien, die Sie online bereitstellen können, indem Sie sie in eine Webseite einbetten. Mit dem Adobe Flash Player-Zusatzmodul wird dann die SWF-Datei angezeigt, sodass die Besucher Ihrer Website den Inhalt sehen und damit interagieren können.
Ihre SWF-Datei kann Videos, MP3-Audio, Animationen, Bilder, Daten usw. enthalten. Der Vorteil einer SWF-Datei gegenüber anderen Formaten ist, dass das Flash Player-Zusatzmodul sehr weit verbreitet ist. Lassen Sie uns damit beginnen, ein Banner zu erstellen.
Flash zeigt standardmäßig die Startseite an (siehe Abb. 1), auf der Sie ein vor kurzem bearbeitetes Dokument auswählen, neue Arten von Dokumenten (Flash-Dateien, ActionScript-Dateien usw.) oder ein neues Dokument aus einer Vorlage erstellen können.

Abb. 1: Flash zeigt standardmäßig die Startseite an, wenn das Programm gestartet wird.
Tipp: Ihre zuletzt verwendeten Flash-Dokumente werden in der Spalte „Zuletzt geöffnete Dateien“ aufgelistet. Sie brauchen also nicht auf Ihrer Festplatte nach den Flash-Dateien zu suchen.
Es ist eine gute Idee, zu Beginn und auch zwischendurch ein neues Dokument zu speichern, damit Sie Ihre Arbeit nicht verlieren. Nachdem Sie die Datei gespeichert haben, fahren Sie mit der nächsten Übung fort, in der Sie die Eigenschaften des Dokuments ändern werden.
Sie sehen jetzt eine weiße Arbeitsfläche, die von vielen Steuerelementen umgeben ist (siehe Abb. 2). Das große weiße Quadrat wird als Bühne bezeichnet. Hier platzieren Sie die Elemente, die in der SWF-Datei angezeigt werden sollen, z. B. Bilder, Schaltflächen, Text oder Animationen. Die Bühne und die Bedienfelder werden zusammen als Flash-Arbeitsbereich oder Authoring-Umgebung bezeichnet.

(+) vergrößern
Abb. 2: Die Flash-Authoring-Umgebung enthält eine Bühne, auf der Sie Elemente platzieren und bearbeiten können.
Um die Bühne herum sehen Sie eine Reihe von Bedienfeldern. Das Bedienfeld auf der linken Seite ist das Werkzeugbedienfeld (siehe Abb. 3), das entweder in einer einfachen oder doppelten Spalte angeordnet ist.
Tipp: Klicken Sie auf den Doppelpfeil am oberen Rand des Bedienfelds, um die Werkzeuge in einer oder in zwei Spalten anzuzeigen.
In diesem Bedienfeld befinden sich Werkzeuge zum Erstellen und Bearbeiten von Dokumenten, z. B. Werkzeuge zum Zeichnen und zur Auswahl von Elementen.

Abb. 3: Verwenden Sie das Werkzeugbedienfeld, um Elemente zu zeichnen und auszuwählen. Mit dem Auswahlwerkzeug (schwarzer Pfeil) wählen Sie in diesen Lehrgängen Elemente aus.
Ein Bedienfeld im unteren Bereich der Flash-Anwendung trägt den Namen „Eigenschaften“ (wenn Sie das Bedienfeld nicht sehen, wählen Sie „Fenster“ > „Eigenschaften“ > „Eigenschaften“). Dieses Bedienfeld wird als Eigenschafteninspektor bezeichnet (siehe Abb. 4) und ermöglicht es Ihnen, verschiedene Eigenschaften des Elements, das momentan in Ihrem Dokument ausgewählt ist (z. B. eine Grafik oder ein Bild), zu ändern oder Eigenschaften für die gesamte SWF-Datei (z. B. die Bildrate oder die Größe) festzulegen. Wenn Sie keine Elemente oder Bilder ausgewählt haben, können Sie im Eigenschafteninspektor die Eigenschaften des Dokuments selbst ändern.
Hinweis: Achten Sie darauf, dass kein Bild ausgewählt ist. Klicken Sie auf die Bühne, wenn Sie diese Schaltfläche nicht sehen.

Abb. 4: Klicken Sie im Eigenschafteninspektor auf diese Schaltfläche, um das Dialogfeld „Dokumenteigenschaften“ zu öffnen. Sie können dann die Größe und die Farbe der Bühne ändern.
Auf der Schaltfläche ist die aktuelle Größe der FLA-Datei zu sehen. Das Format der Bühne in einem neuen Flash-Dokument ist standardmäßig 550 Pixel breit und 400 Pixel hoch. Wenn Sie auf diese Schaltfläche klicken, öffnen Sie das Dialogfeld „Dokumenteigenschaften“, in dem Sie mehrere dokumentübergreifende Eigenschaften (z. B. die Größe und Farbe der Bühne und die Bildrate des Dokuments) ändern können.
Wenn Sie neue Zahlen in diese Textfelder eingeben, ändern Sie die Größe Ihres FLA-Dokuments. Es gibt einen Grund dafür, dass Sie diese spezifischen Maße verwenden müssen. Da Sie ein Banner erstellen, sollten Sie eine Standard-Bannergröße verwenden. In diesem Lehrgang erstellen Sie einen „breiten Wolkenkratzer“. Eine Liste standardisierter Bannergrößen finden Sie auf der Webseite des Interactive Advertising Bureaus unter „Ad Unit Guidelines“.
Tipp: Sie können auch Banner aus einer Adobe-Vorlage wählen, indem Sie aus dem Hauptmenü „Datei“ > „Neu“ auswählen. Klicken Sie auf die Registerkarte „Vorlagen“ und wählen Sie die Kategorie „Anzeigen“, um die verfügbaren Anzeigevorlagen zu sehen.
In der Authoring-Umgebung sehen Sie, wie sich die Maße Ihres Dokuments geändert haben. Sie können auch die Hintergrundfarbe und die Bildrate des Dokuments im Eigenschafteninspektor ändern, ohne hierzu das Dialogfeld „Dokumenteigenschaften“ aufzurufen. Im zweiten Teil dieses Lehrgangs finden Sie Informationen zur Bildrate.
Denken Sie daran, Ihre Arbeit zu speichern („Datei“ > „Speichern“), bevor Sie fortfahren.
Wenn Sie mit Flash arbeiten, werden Sie oft Elemente in ein Dokument einfügen. Vielleicht haben Sie ein Firmenlogo oder Grafiken, die Ihnen ein Designer für Ihre Arbeit zur Verfügung gestellt hat. Sie können eine Vielzahl von Elementen in Flash importieren, z. B. Audio, Video, Bitmapbilder und andere Grafikformate (u. a. PNG, JPEG, AI und PSD).
Importierte Grafiken werden, egal ob Sie sie auf die Bühne oder in die Bibliothek importieren, in der Bibliothek des Dokuments gespeichert. Die Bibliothek enthält sowohl die Elemente, die Sie in das Dokument importieren, als auch die Symbole, die Sie in Flash erstellen. Ein Symbol ist eine Vektorgrafik, eine Schaltfläche, eine Schriftart, eine Komponente oder ein Movieclip, die bzw. das Sie einmal erstellen und dann mehrere Male als Instanzen wiederverwenden. Weitere Informationen zu Symbolen und Instanzen in Flash finden Sie im Videolehrgang Symbole und Instanzen erstellen* im Adobe CS3 Video Workshop.
Um Ihnen zu zeigen, wie leicht es ist, Bilder in Flash zu importieren, haben wir Ihnen in den Quelldateien für diesen Lehrgang ein Bild eines Gartenzwergs zur Verfügung gestellt. Laden Sie bitte, bevor Sie fortfahren, die Beispieldateien am Anfang dieses Lehrgangs herunter (sofern Sie das noch nicht getan haben) und extrahieren Sie die Bilder in den gleichen Ordner, in dem sich Ihr Dokument „banner.fla“ befindet.
In der folgenden Übung werden Sie das Bild auswählen, in das das Element in der Zeitleiste eingefügt werden soll. Anschließend können Sie die Grafik in dieses Bild importieren, das auf der Bühne angezeigt wird.

Abb. 5: Navigieren Sie zu dem Ordner auf Ihrer Festplatte, in dem sich die Adobe Photoshop® CS3-Datei mit dem Namen „gnome.psd“ befindet.
Die Grafik wird auf der Bühne in das Bild importiert, das Sie ausgewählt haben, und wird außerdem in der Bibliothek des Dokuments gespeichert. Photoshop muss nicht installiert sein, um diese Datei zu importieren.
Hinweis: Sie können Elemente mehrere Male von der Bibliothek auf die Bühne ziehen, wenn Sie mehrere Instanzen der Grafik sehen möchten. Ihre Datei wird nicht größer, wenn Sie auf der Bühne mehrere Instanzen verwenden. Die SWF-Datei speichert nur die Informationen des Originalsymbols bzw. des Elements aus der Bibliothek und behandelt jede Instanz wie ein Duplikat.
Das Bild, das Sie gerade importiert haben (gnome.psd), wird jetzt in der Bibliothek des Dokuments angezeigt.
Wenn Sie sich den Eigenschafteninspektor ansehen, werden Sie bemerken, dass Sie die Breite und Höhe der Grafik sowie die X- und Y-Position des Bildes (die Koordinaten) auf der Bühne ändern können. Wenn Sie ein Objekt auf der Bühne auswählen, können Sie die aktuellen Koordinaten im Eigenschafteninspektor sehen und modifizieren (siehe Abb. 6).

Abb. 6: Die X- und Y-Koordinaten entsprechen dem Registrierungspunkt, der oberen linken Ecke dieses Movieclipsymbols.

Abb. 7: Legen Sie die X- und Y-Koordinate über den Eigenschafteninspektor fest. Setzen Sie „X“ und „Y“ auf 0.
Wenn Sie neue Koordinaten eingeben, wird die obere linke Ecke des Bildes in die obere linke Ecke der Bühne verschoben. Sie können das Bitmapbild auch mit dem Auswahlwerkzeug über die Bühne ziehen, anstatt die Koordinaten im Eigenschafteninspektor zu ändern. Sie sollten den Eigenschafteninspektor verwenden, wenn Sie eine bestimmte Position für ein Objekt (wie in diesem Schritt) festlegen müssen.
Vergessen Sie nicht, dass Dokument zu speichern, bevor Sie mit der nächsten Übung fortfahren.
Hinweis: Sie können auch Audiodateien in Ihre FLA-Dokumente importieren. Dies wird in diesem Lehrgang nicht abgedeckt, aber Sie können mehr hierüber erfahren, wenn Sie in der Hilfe nach „Audio importieren“ suchen.
Das Zeitleisten-Bedienfeld befindet sich über der Bühne. Mit der Zeitleiste können Sie Elemente in Ihrem Dokument ordnen und auch den Inhalt eines Dokuments anhand der Zeit steuern. Zeitleisten in Flash enthalten Ebenen und Bilder, um die Steuerung des Inhalts zu erleichtern. Flash-Dokumente können über längere Zeit abgespielt werden (wie Video- oder Audio-Dateien), was in Bildern gemessen wird. Ebenen sind wie Folien, die übereinander gestapelt werden. Jede Ebene kann Bilder, Text oder Animationen enthalten, die auf der Bühne angezeigt werden. Im zweiten Teil dieses Lehrgangs erfahren Sie mehr über Bilder und Zeitleisten.
Die FLA-Datei, an der Sie arbeiten, hat eine Ebene (Ebene 1) mit Inhalt in einem einzigen Bild (Bild 1). Dies ist das Standardformat, in dem ein Flash-Dokument geöffnet wird.
In dieser Übung fixieren und benennen Sie Ebene 1 um. Oftmals werden Sie Objekte an einer bestimmten Position auf der Bühne platzieren wollen. Um Ihnen dabei zu helfen, dass diese Objekte an der jeweiligen Stelle bleiben, ermöglicht Flash es Ihnen, Ebenen zu fixieren, damit Sie die Elemente auf einer Ebene nicht versehentlich auswählen und verschieben.

Abb. 8: Fixieren Sie eine Ebene, damit ihr Inhalt nicht versehentlich verschoben oder von der Bühne gelöscht wird. Sie können auch verhindern, dass unabsichtlich andere Elemente auf diese Ebene gesetzt werden.
Da Ihre einzige Ebene fixiert ist, müssen Sie neue Ebenen hinzufügen, bevor Sie weitere Objekte auf die Bühne setzen können. Es ist nicht möglich, neue Objekte auf eine fixierte Ebene zu setzen.
Wenn Sie Projekte mit vielen Ebenen erstellen, helfen Ihnen Ebenennamen wie Ebene 1 und Ebene 14 nicht weiter, da Sie hieraus nicht ersehen können, was sich auf der jeweiligen Ebene befindet. Es ist darum eine gute Idee, sich von Anfang an daran zu gewöhnen, aussagekräftige Namen zu verwenden.
Tipp: Sie können Ebenen auch in Ebenenordnern ordnen. Weitere Informationen hierzu erhalten Sie, wenn Sie in der Hilfe (F1) nach „Ebenenordner“ suchen.
In so ziemlich jedem Flash-Projekt, in dem Sie importierte Grafiken und Animationen verwenden, werden Sie mindestens ein paar Ebenen erstellen müssen. Sie werden bestimmte Elemente auf eigene Ebenen setzen müssen, insbesondere wenn Sie damit beginnen, Objekte zu animieren. Sie können auch Grafiken übereinander stapeln und sogar den Eindruck von Tiefe oder einer Überlappung erwecken, indem Sie mehrere Ebenen verwenden.

Abb. 9: Klicken Sie auf „Ebene einfügen“, um über der momentan ausgewählten Ebene eine neue Ebene einzufügen.
Grafiken auf der Bühne werden entsprechend der Ebenen in der Zeitleiste gestapelt. Alles, was Sie beispielsweise auf die Animationsebene setzen, wird über dem Bild auf der Hintergrundebene angezeigt. Im zweiten Teil dieses Lehrgangs werden Sie dieser zweiten Ebene eine Animation hinzufügen.
Speichern Sie Ihre Arbeit, bevor Sie fortfahren.
Tipp: Wenn Sie die Reihenfolge Ihrer Ebenen ändern möchten, können Sie die gewünschte Ebene mit dem Auswahlwerkzeug auswählen und sie auf der Zeitleiste über oder unter andere Ebenen ziehen.
In einer Übung weiter vorn in diesem Lehrgang haben Sie das Bild „gnome.psd“ direkt in die Bühne importiert. Sie können Elemente auch statt in die Bühne direkt in die Bibliothek importieren und dann das Element auf eine ausgewählte Ebene auf der Bühne ziehen. Sie werden diese Technik in der nächsten Übung verwenden, in der Sie eine Illustrator-Datei importieren. Es ist nicht erforderlich, Illustrator zu installieren, um diese Datei zu importieren.
Es wird ein Dialogfeld angezeigt, in dem Sie eine Datei von Ihrer Festplatte auswählen können. Suchen Sie den Ordner mit den Quelldateien für diesen Lehrgang auf Ihrer Festplatte.

Abb. 10: Vergewissern Sie sich, dass alle Optionen aktiviert sind, damit alle Teile dieser Datei importiert werden.
Tipp: In einigen Situationen möchten Sie u. U. steuern, wie die Illustration importiert werden soll. Beispielsweise könnten Sie angeben, dass bestimmte Elemente der jeweiligen Datei nicht importiert werden. Hierzu können Sie bestimmte Ebenen oder Ordner deaktivieren, die Sie nicht in Flash importieren möchten.
Die Grafik wird in die Bibliothek importiert, wo Sie sie weiter bearbeiten können bzw. von wo aus Sie sie auf die Bühne ziehen können. Gleichzeitig wird ein Grafiksymbol erstellt (Abb. 11).
Die Elemente für die Grafik, die Sie soeben in die Bibliothek importiert haben, werden in einem neuen Ordner abgelegt (siehe Abb. 11) und Flash erstellt ein Grafiksymbol der Grafik mit dem Namen „join_us.ai“.

Abb. 11: Die Grafik wird als Grafiksymbol in die Bibliothek importiert. Anschließend ziehen Sie das Grafiksymbol auf Bild 1 der Animationsebene. Passen Sie das Bild an, bis es so wie in dieser Abbildung aussieht.
Wenn Sie ein Element auf die Bühne ziehen, sehen Sie es in der SWF-Datei, wenn die Datei abgespielt wird. Sie werden dies in der nächsten Übung testen.
Zum Schluss können Sie Ihr Dokument in Flash testen. Hierbei wird die SWF-Datei im Flash Player getestet. Beispielsweise können Sie sehen, wie Ihr Code im Flash Player funktioniert, wie Animationen in der Zeitleiste abgespielt werden, und Sie können die Benutzerinteraktivität testen usw. Das ist viel schneller, als wenn Sie Ihre Arbeit jedes Mal auf einen Server hochladen, um die SWF-Datei in Aktion zu sehen.
Die Testumgebung wird geöffnet und Ihr Dokument wird im Flash Player abgespielt. Sie können jetzt die kompilierte SWF-Dateiversion Ihres FLA-Dokuments sehen. Sie sollten den Befehl „Film testen“ oft verwenden, um Ihren Fortschritt zu betrachten, wenn Sie an einer FLA-Datei arbeiten.
Wenn Sie diesen Ordner öffnen, müssten Sie eine weitere SWF-Datei mit dem Namen „banner.swf“ sehen. Dies ist die kompilierte Version des Dokuments „banner.fla“. Wenn Sie eine endgültige Version Ihrer Datei zum Hochladen erstellen möchten, werden Sie vor der Kompilierung Ihrer SWF-Datei zusätzliche Veröffentlichungseinstellungen vornehmen wollen. Diese Einstellungen werden im dritten Teil dieses Lehrgangs behandelt.
Um die fertige und veröffentlichte Datei für diesen Teil des Lehrgangs zu sehen, suchen Sie „banner_pt1.fla“ im Ordner mit den Beispieldateien für diesen Lehrgang.
Sie haben in sehr kurzer Zeit ein FLA-Dokument eingerichtet, Elemente in eine FLA-Datei importiert und darin angeordnet, Ebenen erstellt und modifiziert und eine SWF-Datei getestet. Sie werden als Nächstes ein Banner in Flash erstellen, damit Sie es mit Dreamweaver in einer HTML-Seite einbetten können. Im zweiten und dritten Teil dieses Lehrgangs lernen Sie, Symbole zu erstellen und zu modifizieren, eine Animation zu erstellen, ein paar einfache ActionScripts für eine Schaltfläche hinzuzufügen, über die Sie eine Webseite öffnen können, und dann das Banner einer Website hinzuzufügen.
Sie haben jetzt den ersten Teil abgeschlossen. Fahren Sie mit dem zweiten Teil (Flash für Anfänger – Teil 2: Hinzufügen von Symbolen, Animationen und ActionScripts) fort. Im nächsten Lehrgang lernen Sie, wie Symbole und Animationen erstellt werden. Anschließend schreiben Sie sogar ein paar einfache ActionScripts für die Bannerfunktion.