Seitenvorschau mit Flash
Thema:
 Seitenvorschau mit Flash
Description:
 Die Seiten werden im Flash-Movie schon durch RollOver angezeigt
Keywords:
 Flash, Seitenvorschau
Author:
 Lukas Zimmer
Date:
 20.07.2000
Doc-ID:
 43-001
URL:
 http://www.flashworker.de/tutorial/43/001.html
Version:
 1.0
Änderungen:
Anforderungen:
 Flash 3, teilweise 4
Vorkenntnisse:
 Flash Grundkenntnisse
Download:
 PC: "seitenvorschau.zip", 3,5 kB
Einleitung
  Was bringt dieses Tutorial?

 "Ablauf"
  Vorbereitung
  Erstellung der Vorschau

 Ergänzung
  Grafische Ergänzung
  Einbau eines Preloaders





 Was bringt dieses Tutorial?
Wäre es nicht schön dem Besucher einer Site den Inhalt einer Seite wissen zu lassen, ohne auf den passenden Link zu klicken? Das ist mit RollOver in Flash kein Problem mehr.

 In diesem Tutorial wird anhand eines einfachen Beispiels die Seitenvorschau erklärt.




 Vorbereitung
Nachdem ein neuer Movie erstellt wurde, erstellt man 1 Layer für Actionen und Labels, 1 Layer für den Hintergrund, 1 Layer für den Inhalt der Seiten und 4 für die Buttons. In Frame 1 der Label-Ebene erstellt man ein Schlüsselbild mit dem Label "Startseite", in Frame 10 einen mit dem Label "Seite1", in Frame 20 einen mit dem Label "Seite2" und in Frame 30 eine mit dem Label "Seite3" (Die Labels werden in Flash natürlich ohne Anführungszeichen geschrieben).

 Dann erstellt man die "Frames" (keine Frames wie in HTML, aber da die Website ja nur aus einem Flash-Movie besteht, verwende ich trotzdem eine farbliche Unterscheidung der Navigation und dem Inhalt) indem man den linken Teil des Movies im Layer Hintergrund mit einer anderen Farbe füllt (Rechteck ohne Kanten zeichnen), in der rechten Teil der Bühne kommt der Inhalt der Startseite (im Beispiel den Text "Startseite") in den Layer Inhalt.

 Als nächstes zieht man sich einen Beispiel Button von Flash 4 Mal auf die Bühne (Bibliotheken->Buttons). 3 der 4 Buttons verkleinert man und beschriftet Sie, den großen mit "Startseite" und die kleinen mit "Seite 1" "Seite 2" und "Seite 3".

 Jetzt wird beim Label "Seite1" im Layer Inhalt ein Text "Seite 1" erzeugt, beim Label "Seite2" ein Text "Seite 2" und beim Label "Seite3" ein Text "Seite 3".

 Damit man die einzelnen Seiten abrufen kann, müssen den Buttons noch die entsprechenden Aktionen zugewiesen werden. Falls das unklar sein sollte, schaut einfach im Beispiel-Fla nach, das zum Download bereit steht.




 Erstellung der Seitenvorschau
Als erstes erstellt man in den Frames 4, 6 und 8 in den Layers Label und Inhalt neue Schlüsselbilder und gibt ihnen die Labels Seite1vors (das steht für: Seite1-Vorschau von der Startseite), Seite2vors und Seite3vors. In der Inhalt-Ebene kopiert man die Inhalte der Seiten 1, 2 und 3 in die entsprechenden Schlüsselbilder (am besten mit PiP: Strg+Shift+V).

 Das wiederholt man in den Frames 14, 16 und 18, der Unterschied ist, dass die Labels jetzt Seite2vor1, Seite3vor1 und Startseitevor1 heißen und die Inhalte der Seiten 2, 3 und der Startseite kopiert werden.

 Dann muss das noch für die Schlüsselbilder 24, 26 und 28 mit den Labels Seite1vor2, Seite3vor2 und Startseitevor2 wiederholt und die entsprechenden Inhalte kopiert werden.

 Als letztes wiederholt man das für die Schlüsselbilder 34, 36 und 38 mit den Labels Seite1vor3, Seite2vor3 und Startseitevor3 und die Inhalte werden ebenfalls entsprechend kopiert.

 Jetzt müssen den Buttons nur noch die Aktionen zugordnet werden. Z. B. für den Button Seite 1 im Label Startseite muss der fertige Code jetzt so lauten:
On (Release)
Go to and Stop ("Seite1")
End On
On (Roll Over)
Go to and Stop ("Seite1vors")
End On
On (Roll Out)
Go to and Stop ("Startseite")
Für den Button Seite 2 im Label Seite1 muss der Code so lauten: 
On (Release)
Go to and Stop ("Seite2")
End On
On (Roll Over)
Go to and Stop ("Seite2vor1")
End On
On (Roll Out)
Go to and Stop ("Seite1")
Ich denke das der Code der restlichen Buttons jetzt klar ist, falls das nicht der Fall ist, schaut im Beispiel-Fla nach.




Weiter