Foto-Folder

Teil 2: Flash 8: Animierte Bildergalerie

Das Flash-Dokument richten Sie über Modifizieren/ Dokument bzw. Strg-J ein.

Flash 8: Animierte Bildergalerie

© Archiv

Die base-Ebene definiert den Bereich, der später sichtbar sein soll.

Im Beispiel ist das Dokument 500 (Breite) x 200 (Höhe) groß, die Bildrate haben wir auf 24 gesetzt, um einen flüssigen Ablauf zu gewährleisten.

Mit einem KlickaufOK bestätigen Sie die Änderungen. Importieren Sie die 3D-Schablone in Flash über Datei/Importieren/In Bühne importieren (oder mit dem Tastaturkürzel Strg-R). In der Zeitleiste in Ebene 1 ist die Schablone das erste Bild. Wandeln Sie die Schablone in ein Symbol um mit Modifizieren/In Symbol konvertieren (oder F8).

Wählen Sie dasVerhalten Movieclip und einen eindeutigen Namen, im Beispiel 3d-menu. Noch ist die Schablone zu groß. Markieren Sie sie und klicken Sie doppelt darauf.

Flash 8: Animierte Bildergalerie

© Archiv

Zwischenbilder: Die Zeitleiste nach dem Einfügen von Bewegungs-Tweens

TippDas Symbol selbst sollten Sie nicht skalieren, da sonst alle Bilder, das Sie in dieses Symbol ablegen, später in schlechter Qualität und verzerrt erscheinen können.

Mit ausgewählter Schablone klicken Sie auf den Frei transformieren-Button in der Werkzeugleiste. Mit gedrückter Umschalt-Taste klicken Sie auf eine der Ecken und skalieren die Schablone mit gleich bleibendem Seitenverhältnis. Die Ebene, in der die Schablone liegt, nennen Sie nach einem Doppelklick auf den Ebenen-Namen Schablone. Fügen Sie darüber mit der Schaltfläche Ebene einfügen eine neue Ebene hinzu.

Über den Button Rechteckwerkzeug zeichnen Sie in der neuen Ebene ein Rechteck, das ungefähr in die Schablone passt.

Klicken Sie doppelt auf das Rechteck, selektiert Flash die Füllung und den Rand. Über die Einstellungen im Eigenschaften-Fenster geben Sie unterschiedliche Farben an. Mit gewähltem Rechteck Füllung und Rand, drücken Sie F8 (In Symbol konvertieren). Im Beispiel wählen wir den Namen meta-pic und das Verhalten Movieclip.

Ein Doppelklick auf das Rechteck öffnet das gerade erstellte Symbol meta-pic. Nennen Sie die Ebene 2 base. Wählen Sie Sperren. Erzeugen Sie eine neue Ebene und zeichnen Sie mit dem Rechteck-Werkzeug ein weiteres Rechteck, das das erste etwas überlappt. Führen Sie auf das neue Rechteck einen Doppelklick aus. Mit dem Namen bild1 und dem Verhalten Movieclipwandeln Sie das Rechteck in ein Symbol.

Flash 8: Animierte Bildergalerie

© Archiv

Mit F11 öffnen Sie die Bibliothek. Duplizieren Sie das Symbol bild1 über das Kontextmenü, das Sie mit einem Klick per rechter Maustaste auf den Namen bild1 öffnen. Der Kopie bild2 weisen Sie dasselbe Verhalten (Movieclip) zu. Wiederholen Sie diese Arbeitsschritte, im Beispiel bis Sie bild5 erhalten.

Über die Bibliothek öffnen Sie die einzelnen Bilder-Symbole per Doppelklick. Weisen Sie jedem Bild eine andere Farbe zu, im Beispiel einen Grünton. In jedes Bild-Symbol in Ebene 2 importieren Sie z.B. ein Foto im JPEG-Format und skalieren es auf die Größe des Rechtecks der darunter liegenden Ebene.

Wechseln Sie aus der Bibliothek wieder ins Symbol meta-pic2. Ziehen Sie per Drag&Drop die Bilder zwei bis fünf auf die Arbeitsfläche. Jedem Bild geben Sie im Eigenschaften-Fenster einen Instanznamen. Hier nannten wir die Instanz von bild1 green1 usw.

WichtigDer Instanznamen hat nichts mit dem Namen in der Bibliothek zu tun.

Deswegen verzichteten wir darauf, der bild1- Instanz den Instanznamen bild1 zu geben. Ein Symbol kann beliebig viele Instanzen haben - und somit könnten Sie dem Symbol bild1 beliebig viele Instanznamen zuordnen. Ziehen Sie die Ebene 2 (wo alle Instanzen green1 bis green5 liegen sollten) unter die vorhin umbenannte base-Ebene. Klicken Sie per Rechtsklick darauf und aufMaske.

Wenn nicht zufällig eine der Bild-Instanzen über dem base-Rechteck lag, verschwinden alle Bild-Instanzen. Auf Grund der Maskierung sehen Sie nur die Bereiche, die sich im base-Rechteck befinden. Die base-Ebene und die Ebene 2 bekommen einen Schreibschutz.

Da sie somit geschützt ist, erstellen Sie über der base-Ebene eine neue Ebene. Entfernen Sie den Schreibschutz von der base-Ebene. Selektieren Sie nur den Rand des Rechtecks per Doppelklick auf den Rand. Drücken Sie Strg-X, und wählen Sie die neue Ebene. Um nur den Rand mit den gleichen Koordinaten zu kopieren, drücken Sie Strg-Umschalt-V. Aktivieren Sie wieder den Schreibschutz auf der base-Ebene.

Über die Bibliothek wechseln Sie ins Symbol 3d-menu. Erzeugen Sie fünf Ebenen. Die Instanz von meta-pic duplizieren Sie viermal und versehen die fünf Instanzen mit den Namen meta1 bis meta5. Legen Sie sie in die entsprechenden Ebenen. Jede Instanz richten Sie anhand der Schablone aus. Die vorderste Instanz muss in der höchsten Ebene liegen, die nächste in der zweiten Ebene usw.

Mehr zum Thema

HTML 5
Webgestaltung

Google Web Designer ist spezialisiert auf HTML5. Ein Vorteil dieses Standards ist das einfache Einbinden von Videos mit dem Element video. Wir zeigen…
Wir verraten, wie Sie Fritzboxen und andere Router vor Hackern schützen.
Fritzbox, Asus, Belkin und Co.

Fritzbox, Asus, Belkin oder DLink - die Liste der geknackten Router ist lang. Hacker stahlen Passwörter oder NAS-Daten. So machen Sie Ihren Router…
Wir führen Sie zur eigenen Windows-App - unserem PC-Magazin-RSS-Feed.
C# und XAML

Wir zeigen, wie Sie Windows 8.1 Apps selbst programmieren können. Lernen Sie das App erstellen an Hand unseres Beispiels: dem RSS-Feed von PC…
Windows Tipps & Tricks: Benutzerrechte unter Windows 8.1
Programme richtig installieren

Wir zeigen Ihnen, wie Sie sich unter Windows 8.1 alle Benutzerrechte verschaffen und Programme richtig installieren.
Windows 8: Starbildschirm
Microsoft Project Siena

Erstellen Sie sich selbst eine App für Windows 8, die auf alle Funktionen Ihres Tablets zugreifen kann, inklusive Kamera, Mikrofon und Lautsprecher.…