Sie sind auf Seite 1von 20

35

Seitenlayout

Fr die Erstellung einer Flash-Homepage gibt es drei unterschiedliche Anstze. All-in-one-Version 1: Die klassische Struktur in einer Szenengliederung. Hierbei erstellen Sie fr jede Seite oder Rubrik eine eigene Flash-Szene. Diese Form hat den Vorteil der leichteren Verwaltbarkeit, da nur ein Dokument bearbeitet wird. Je nach Komplexitt kann es aber durch die Dateigre schnell zu lngeren Ladezeiten kommen. All-in-one-Version 2: Die Homepage wird komplett in einer einzigen Szene erstellt. Die Rubriken werden mittels Sprungbefehlen und entsprechenden Bildbezeichnern in einer Zeitleiste angelegt. Diese Form wird durch das ewige Schieben in der Zeitleiste schnell unhandlich. Multi-to-one: Jede Rubrik wird als eigenstndiges Dokument mit daraus resultierendem Film aufgebaut. Die Filme werden dann von einem Hauptfilm ge- und entladen. Dieses Modell verspricht die krzeste Anfangsladezeit, da die Rubrikinformationen immer erst bei Bedarf geladen werden. Die Erstellung und Verwaltung ist jedoch etwas komplexer und daher auch fehleranflliger. Fr die Site Cinema4US greifen wir das erste Schema auf. Durch den Einsatz dynamischer Quellen halten Sie die Ladezeiten ertrglich. Um ganz sicher zu gehen, setzen Sie einen attraktiven Preloader ein, der auch bei geringen Bandbreiten den Besucher bei der Stange hlt.

35.1

Hintergrund erstellen

Fr den Hintergrund reicht uns eine einfache Hintergrundfarbe nicht aus. Daher importieren Sie bereits erstellte Bilddateien und setzen diese in Flash zu einem einheitlichen, ansprechenden Erscheinungsbild zusammen. Durch das Zusammensetzen mehrerer Elemente bleiben Sie beim spteren Variieren der Hintergrnde der Rubriken viel flexibler. Das Prinzip der Gestaltung der Site ist sozusagen das Erstellen eines Prototyps als Hintergrund, der sich spter leicht modifizieren lsst. Gestalterisch wird hierdurch eine Grundkonsistenz erzielt, die ein einheitliches ErscheiFlash MX und ActionScript Kompendium

825

Kapitel 35

Seitenlayout nungsbild garantiert. Arbeitstechnisch wird durch diese Vorgehensweise ein nicht unerheblicher Aufwand eingespart. Praxis-Workshop Teil 2 Hintergrund 1. 2. Importieren Sie die Hintergrundgrafik ber DATEI/IMPORTIEREN. Sollten Sie einen schwarzen Rand um das Bild herum sehen, ist dies vermutlich auf einen Einstellungsfehler bei der Erstellung der Hintergrundgrafik zurckzufhren. In diesem Fall ffnen Sie das Bedienfeld AUSRICHTEN und passen die Grafik an die Bhne.

Abbildung 35.1: Mit aktivierter Schaltflche AN BHNE lsst sich eine Grafik leicht an den Hintergrund anpassen.

3.
Abbildung 35.2: Ebene umbenennen

Doppelklicken Sie den Ebenennamen Szene1 und ndern Sie den Namen der Ebene in Hintergrundgrafik.

4. 5. 6.

Wandeln Sie die Hintergrundgrafik ber (F8) in ein Symbol um. Whlen Sie als Symbolart MOVIECLIP und nennen Sie das Symbol Hintergrundgrafik. Per Doppelklick auf die Hintergrundgrafik gelangen Sie in den Symbolbearbeitungsmodus.

826

Flash MX und ActionScript Kompendium

Hintergrund erstellen

Kapitel 35
Abbildung 35.3: FilmsequenzSymbol erstellen

17. Aktivieren Sie die Hintergrundgrafik durch Anklicken und drcken Sie erneut (F8). Erstellen Sie diesmal ein Grafik-Symbol und nennen Sie es HG. Durch das erneute Umwandeln der Bitmap-Grafik wird die Handhabung des Bilds flexibler. So knnen Sie nun die Farbwerte und Transparenz animieren, was mit einer normalen Grafik in dieser Form nicht mglich ist. 18. Klicken Sie oberhalb der Bhne auf das Symbol Hintergrundgrafik. 19. Aktivieren Sie das erste Bild in der Zeitleiste und fgen Sie ber EINFGEN/TWEEN EINFGEN einen Bewegungs-Tween ein. 10. Setzen Sie in Bild 50 ein Schlsselbild. 11. Wechseln Sie zurck in Bild 1 und aktivieren Sie die Hintergrundgrafik. 12. Setzen Sie den Alpha-Wert fr FARBE im EIGENSCHAFTENINSPEKTOR auf 68. 13. Klicken Sie mit der rechten Maustaste auf Bild 50 in der Zeitleiste und whlen Sie AKTIONEN. 14. Geben Sie im Bedienfeld AKTIONEN einen Stopp-Befehl ein. Dafr schreiben Sie im Experten-Modus die Code-Zeile stop();. Hierdurch wird die Transparenz-Animation nach einmaligem Durchlauf gestoppt. 15. Wechseln Sie zurck zur Szene1. Mit (Shift)+(F2) ffnen Sie das Bedienfeld SZENE. Doppelklicken Sie den Szenennamen Szene1 und ndern Sie ihn in home.

Flash MX und ActionScript Kompendium

827

Kapitel 35
Abbildung 35.4: Transparenz durch Alpha-Wert ndern

Seitenlayout

Abbildung 35.5: Stop-Befehl eingeben

828

Flash MX und ActionScript Kompendium

Hintergrund erstellen

Kapitel 35
Abbildung 35.6: Szene umbenennen

16. Erstellen Sie eine neue Ebene und geben Sie ihr den Namen Filmstreifen. 17. Verschieben Sie die neue Ebene unter die Ebene Hintergrundgrafik.
Abbildung 35.7: Ebene verschieben

18. Sperren Sie die Ebene Hintergrundgrafik gegen berschreiben und blenden Sie sie aus. 19. ffnen Sie die Datei Zelluloid.fla als Bibliothek von der CD ber DATEI/ALS BIBLIOTHEK FFNEN. 20. Ziehen Sie aus der Bibliothek eine Instanz des Movieclip-Symbols Filmbild in die Ebene Filmstreifen. 21. ffnen Sie das Bedienfeld AUSRICHTEN (Strg)+(K) und passen Sie Gre und Position der Instanz Filmbild an die Bhne an. 22. Erstellen Sie oberhalb der Ebene Hintergrundgrafik eine neue Ebene und nennen Sie diese Rollen. 23. Importieren Sie von der CD die Datei rollen.png und positionieren Sie diese abschlieend am unteren Bhnenrand (siehe Abbildung 35.10). 24. In eine neue Ebene namens Linienanimation importieren Sie von der CD die Datei streifen.png und platzieren diese mittig zur Bhne. Schalten Sie die Darstellung der Ebene Hintergrundgrafik ein (siehe Abbildung 35.11). 25. ber EINFGEN/NEUES SYMBOL erstellen Sie ein neues Movieclip-Symbol mit dem Namen Linienanimation. 26. Zeichnen Sie ein Linienmuster, das der Datei streifen.png hnelt. 27. Im Eigenschafteninspektor setzen Sie das Tweening auf FORM und erzeugen in Bild 25 sowie Bild 50 ein Schlsselbild (F6). 28. Aktivieren Sie in Bild 25 das TRANSFORMATIONSWERKZEUG und drehen Sie die Linien um 180 Grad.
Flash MX und ActionScript Kompendium

829

Kapitel 35
Abbildung 35.8: Symbol-Import aus externer Bibliothek

Seitenlayout

Abbildung 35.9: Instanz ausrichten

29. Klicken Sie auf Bild 1 und schieben Sie dieses in der Zeitleiste bei gedrckter (Alt)-Taste auf Bild 50, wodurch Sie dort eine Kopie von Bild 1 erzeugen.
830
Flash MX und ActionScript Kompendium

Hintergrund erstellen

Kapitel 35
Abbildung 35.10: Import einer .pngDatei mit Transparenzwerten

Abbildung 35.11: Einfgen der halb transparenten Linien aus einer .png-Datei.

Flash MX und ActionScript Kompendium

831

Kapitel 35
Abbildung 35.12: Das Form-Tweening in der Zwiebelschalenvorschau

Seitenlayout

Abbildung 35.13: Einfgen des FormTweenings

832

Flash MX und ActionScript Kompendium

Logo und Buttons erstellen 30. Wechseln Sie zurck in die Szene home und ziehen Sie das erstellte Symbol aus der Bibliothek in die Szene. Passen Sie es mit dem Transformationswerkzeug in der Gre an. 31. Setzen Sie den Wert fr ALPHA im EIGENSCHAFTENINSPEKTOR auf 10. 32. Erstellen Sie in der Ebenenverwaltung einen neuen Ebenenordner und nennen Sie ihn Hintergrund. 33. Schieben Sie die vorhandenen Ebenen in den Ordner.

Kapitel 35

Abbildung 35.14: Die Hintergrundebenen werden in einem gemeinsamen Ordner zusammengefasst.

34. Speichern Sie die Datei.

35.2

Logo und Buttons erstellen

In Bezug auf die Bearbeitung von Bitmapgrafiken ist Flash nicht unbedingt das strkste Programm. Im Workshop im ersten Teil dieses Buches konnten Sie feststellen, dass eine relativ simple Funktion wie das Erstellen eines Schattens doch mit einigen Arbeitsschritten verbunden ist. Obwohl es vielleicht in einigen Bereichen wnschenswert wre, muss Flash in Sachen Bitmaps nicht unbedingt dazulernen. Es gibt ausreichend andere Programme, welche die geforderten Bitmapwerkzeuge zur Verfgung stellen. Vergessen Sie nicht: Flash spielt seine Strken im Bereich der Vektorgrafik aus und ist dort unschlagbar (auch wenn Adobe dies sicherlich nicht gerne liest). Fr die Erstellung des Logos und der Schaltflchen greifen wir daher wieder auf ein externes Grafikprogramm zurck. Prinzipiell ist es hier Ihren Prferenzen berlassen, ob Sie Fireworks, PaintShop Pro, Photoshop oder eines der unzhligen Free- und Sharewareprogramme fr Bitmapbearbeitung einsetzen. Wichtig ist nur, dass es Ebenen untersttzt und Grafiken im .pngFormat ausgeben kann. Unser Beispiel entstand in Photoshop Version 6.0. Die eingesetzten Ebeneneffekte haben hchste Qualitt und sind sehr leicht zu modifizieren. Wir haben Ihnen die .psd-Datei fr Photoshop auf der Buch-CD zur Verfgung gestellt und gehen daher an dieser Stelle nicht nher auf die Einstellungen ein.

Flash MX und ActionScript Kompendium

833

Kapitel 35

Seitenlayout Praxis-Workshop Teil 3 Logo und Buttons 11. ffnen Sie im Grafikprogramm eine neue Grafik mit den Maen 800x600 Pixel bei 72 dpi Auflsung. Der Farbmodus ist RGB. 12. Whlen Sie das Textwerkzeug und als Schrift Webdings. 13. Aus dem Windows-Zubehrprogramm ZEICHENTABELLE kopieren Sie das Filmstreifenzeichen in die Zwischenablage und fgen es im Grafikprogramm wieder ein.

Abbildung 35.15: Zubehrprogramm ZEICHENTABELLE

14. Versehen Sie das Zeichen mit einem Schlagschatten- und einem Kontourierungs- oder Emboss-Effekt, so dass ein rumlicher Eindruck entsteht. 15. Fr das Logo bentigen Sie eine Schriftart, die Tasten anzeigt. In unserem Beispiel ist es die TrueType-Schrift KEYNOI. 16. Geben Sie Cinema4US ein und setzen Sie die Effekte so, dass die Tasten hervorgehoben wirken und leuchten. Je nach Programm mssen Sie hier unterschiedlich vorgehen. In Photoshop waren es die Ebeneneffekte SCHLAGSCHATTEN, SCHEIN NACH AUEN, SCHEIN NACH INNEN und VERLAUFSBERLAGERUNG. 17. Ordnen Sie fnf Schaltflchen im unteren Bereich der Grafik an und platzieren Sie das Logo oben links (siehe Abbildung 35.16). 18. Speichern Sie die Datei im .png-Format ab. Die Farbtiefe sollte 24 Bit betragen und die Transparenz muss eingeschaltet sein (je nach Programm kann hier die Einstellung auch 32 Bit, d.h. 24 Bit + AlphaKanal, lauten).
834
Flash MX und ActionScript Kompendium

Logo und Buttons erstellen

Kapitel 35
Abbildung 35.16: Mit Bitmap-Effekten werden aus flachen WindowsStandardsymbolen ansprechende 3-DSchaltflchen.

19. Im Flash-Dokument erstellen Sie oberhalb des Ebenenordners Hintergrund eine neue Ebene und nennen diese Knpfe. 10. Importieren Sie von der CD in diese Ebene die Datei knpfe_logo.png. 11. Erstellen Sie ber einem Button eine rechteckige Form in der Gre des Buttons und rotieren Sie diese mit dem Transformationswerkzeug so, dass die Schaltflche abgedeckt wird (siehe Abbildung 35.18). 12. Stellen Sie den Alpha-Wert der Farbe auf 0, damit die Flche nicht mehr sichtbar ist. 13. Wandeln Sie die Form in ein Schaltflchen-Symbol mit (F8) um und nennen Sie dieses Mein Schalter. 14. Doppelklicken Sie auf die Schaltflche, um das Symbol zu bearbeiten. Sie sehen, dass im ersten Bild der Schaltflche ein Schlsselbild gesetzt ist. Dieses sorgt dafr, dass der Mauszeiger sich verndert, sobald er sich ber der Schaltflche befindet (siehe Abbildung 35.19). 15. Wechseln Sie zurck in die Szene home. 16. Ziehen Sie aus der Bibliothek (Strg)+(L) jeweils eine Instanz von Mein Schalter ber die verbleibenden Buttons (siehe Abbildung 35.20). 17. Speichern Sie das Dokument ab.

Flash MX und ActionScript Kompendium

835

Kapitel 35
Abbildung 35.17: Die semitransparente .png-Datei fgt sich harmonisch in das Seitenlayout ein.

Seitenlayout

Abbildung 35.18: Rotieren der Schaltflchenform

836

Flash MX und ActionScript Kompendium

Logo und Buttons erstellen

Kapitel 35
Abbildung 35.19: Schaltflcheneinstellung per Schlsselbild

Abbildung 35.20: Verteilte Schaltflchen-Symbole

Flash MX und ActionScript Kompendium

837

Kapitel 35

Seitenlayout

35.3

Navigation einrichten

Sie haben jetzt fast alle Vorbereitungen fr das Einrichten der Navigation getroffen. Durch die transparenten Schaltflcheninstanzen haben Sie die darunter liegenden Bereiche der .png-Grafik ansprechbar gemacht. Der Besucher erhlt den Eindruck, als wrden die Buttons auf seinen Mauszeiger reagieren. In die unsichtbaren Schaltflchen knnen Sie jetzt mit ActionScript Sprungbefehle zu anderen Szenen setzen. Dass diese noch nicht existieren, soll uns an dieser Stelle nicht weiter kmmern. Um eine Schaltflche als schaltbar zu indizieren, reicht normalerweise der Wechsel der Mauszeigerdarstellung. Es ist eine weit verbreitete Technik, das Drcken eines Knopfes zu imitieren. Dies geschieht meist mit einer Farbvernderung durch leichte Skalierung der Darstellung. Der Einsatz solcher Technik ist Geschmackssache. Man sollte jedoch immer aufpassen, dass nicht zu viele einzelne schne Effekte das Gesamtbild verschandeln und dieses unruhig erscheinen lassen. In unserem Beispiel wird ein anderer Ansatz unternommen. Hier werden mglichst wenige Funktionen die Gestaltung stren. Die Buttons werden nach einer kurzen Zeitspanne wie von selbst verschwinden. Die Titel der Buttons werden in einem zentralen Feld beim Berhren angezeigt. Auf diese Weise kann bei Pausen die grafische Gestaltung in der Navigation des Besuchers voll zur Geltung kommen. Praxis-Workshop Teil 4 Navigation 11. Erstellen Sie oberhalb der Ebene Knpfe eine neue Ebene und geben Sie ihr den Namen diese Infotext. 12. Platzieren Sie ein Textfeld in der Mitte der Bhne. 13. Setzen Sie im EIGENSCHAFTENINSPEKTOR den Texttyp auf DYNAMISCHER TEXT. 14. Setzen Sie die Formate im Eigenschafteninspektor wie in Abbildung 35.21. Achten Sie dabei darauf, dass Sie im Feld VAR den Variablennamen Szenentitel eingeben.
Abbildung 35.21: Eigenschaften fr den dynamischen Text

15. Konvertieren Sie den Text in ein Movieclip-Symbol (F8) und nennen Sie dieses Szenentitel.
838
Flash MX und ActionScript Kompendium

Navigation einrichten 16. Nach dem Umformen geben Sie im EIGENSCHAFTENINSPEKTOR im Feld fr den Instanznamen den Namen Text ein.

Kapitel 35

Abbildung 35.22: Eingabe Instanzname

17. Klicken Sie mit der rechten Maustaste auf die erste transparente Schaltflche in der Ebene Knpfe und whlen Sie aus dem Kontextmen AKTIONEN. 18. Erstellen Sie eine Programmierung wie in Abbildung 35.23.
Abbildung 35.23: Die ActionScriptProgrammierung der Navigation eines Buttons

19. Wiederholen Sie die letzten beiden Schritte fr alle weiteren transparenten Schaltflchen. Sie knnen die Programmierung in die Zwischenablage legen und dann in die Aktionen der jeweiligen Schaltflche kopieren. Ersetzen Sie den Inhalt "news" der Textvariablen mit den Rubrikentiteln "Entertainment", "Videothek", "Treffpunkt" und "Daten&Fakten". 10. Wandeln Sie in der Ebene Knpfe die .png-Datei mit (F8) in ein Movieclip-Symbol um und nennen Sie dieses Knpfe. 11. Doppelklicken Sie dieses Symbol zur Bearbeitung und whlen Sie die .png-Grafik. 12. Erstellen Sie erneut ein Movieclip-Symbol und nennen Sie es Schalter. 13. Klicken Sie in das erste Bild der Zeitleiste des Symbols Knpfe und fgen Sie einen Bewegungs-Tween ber EINFGEN/TWEEN EINFGEN ein.

Flash MX und ActionScript Kompendium

839

Kapitel 35

Seitenlayout 14. Platzieren Sie bei Bild 50 und Bild 75 jeweils ein Schlsselbild (F6). 15. In Bild 75 setzen Sie per ActionScript einen Stop()-Befehl.

Abbildung 35.24: Die Animation der Alpha-Werte lsst die Buttons und das Logo nach drei Sekunden unsichtbar werden.

16. In Bild 75 stellen Sie den Alpha-Wert der Instanz Schalter auf 0. Hierdurch blenden Sie die Schalter und das Logo zwischen Bild 50 und 75 aus. 17. Kehren Sie zurck zur Szene home. 18. Klicken Sie mit der rechten Maustaste auf die Instanz Knpfe und whlen Sie aus dem Kontextmen AKTIONEN. Geben Sie die Programmierung wie in Abbildung 35.25 ein. Achten Sie darauf, dass im EIGENSCHAFTENINSPEKTOR der Instanzname buttons eingetragen ist. 19. Erstellen Sie eine neue Ebene Infotext Blende oberhalb der Ebene Infotext. 20. Erstellen Sie ein Rechteck, welches das Textfeld abdeckt. 21. Fllen Sie die Form mit einem semitransparenten, radialen Farbverlauf (siehe Abbildung 35.26).
840
Flash MX und ActionScript Kompendium

Navigation einrichten

Kapitel 35
Abbildung 35.25: Programmierung fr die Instanz buttons.

Abbildung 35.26: Ein halb transparenter Farbverlauf.

22. Erstellen Sie einen neuen Ebenenordner controls und verschieben Sie die drei Ebenen in den Ordner. 23. Speichern Sie das Dokument und spielen Sie mit (Strg)+(Enter) die Vorschau ab. Beim ersten Erscheinen blinkt die Filmstreifen-Animation der untersten Ebene durch, bis die Ebene Hintergrundgrafik opak (Alpha=100) erscheint. Nach einer kurzen Zeitspanne werden das Logo und die Schaltflchen ausgeblendet. Die Aktion onClipEvent achtet auf die Mausbewegung des Besuchers und lsst die Buttons und das Logo wieder erscheinen, sobald der Besucher die Maus bewegt. Sobald sich die Maus ber einer Schaltflche befindet, wird im zentralen Textfeld der Rubrikentitel angezeigt. Wir haben in unserem Beispiel noch zwei weitere Instanzen des Texts erstellt und diese farblich und von der Position her so angepasst, dass ein leichter 3-D-Effekt eintritt.

Flash MX und ActionScript Kompendium

841

Kapitel 35
Abbildung 35.27: 3D-Text durch berlagerung von Instanzen

Seitenlayout

35.4

Szenen kopieren und anpassen

Ein letzter Schritt und die Pflicht ist getan danach knnen Sie zur Kr schreiten. Mit der Szene home haben Sie den Prototyp der Seiten Ihrer Homepage erstellt. Sie haben einen flexiblen Hintergrund, der sich optisch leicht modifizieren lsst. Und Sie haben eine Navigation ber Schaltflchen mit Infotexten, die den Besucher schnell zum Ziel bringt. Sie werden nun Kopien der fertigen Szene erstellen und dadurch die neuen Rubriken festlegen. Im Handumdrehen erstellen Sie so ein Website-Passepartout, das es dann im weiteren Verlauf mit Inhalten zu fllen gilt. Praxis-Workshop Teil 5 Passepartout erstellen 1. 2. 3. 4. ffnen Sie das Bedienfeld SZENE ber FENSTER/SZENE oder alternativ
(Shift)+(F2).

Klicken Sie rechts unten auf die Schaltflche SZENE DUPLIZIEREN. Eine neue Szene erscheint in der Liste. ndern Sie die Namen home Kopie in news um. Wiederholen Sie die letzten beiden Schritte fr alle Rubriken.

842

Flash MX und ActionScript Kompendium

Szenen kopieren und anpassen

Kapitel 35
Abbildung 35.28: Im Bedienfeld SZENE verwalten Sie Ihre Rubriken.

5.

Wechseln Sie durch Anklicken des Szenennamens im Bedienfeld SZENE zur jeweiligen Szene und aktivieren Sie die transparente Schaltflche, die zu dieser Rubrik fhrt. Im Bedienfeld AKTIONEN ersetzen Sie den Inhalt der Textvariablen mit home. Hierdurch schaffen Sie die Rcksprungmglichkeit zur ersten Seite.
Abbildung 35.29: Rolling home dieses ActionScript bringt Sie zur ersten Seite zurck.

6.

7.

Speichern Sie das Dokument und berprfen Sie in der Vorschau die Navigation.

Flash MX und ActionScript Kompendium

843