Wichtig!:

Ich habe dieses Tutorial mit Absicht in der Kategorie "Grundlagen" abgelegt! Es soll hauptsächlich verdeutlichen, wie man in Flash navigieren könnte und die Zeitleiste verwenden kann. Natürlich ist es professioneller alles komplett zu skripten. Das Tutorial ist also für Anfänger gedacht ;)

Ihr solltet schon ein bisschen vertraut mit der Arbeitsfläche von Flash sein (am besten ihr lest erst die anderen Tutorials hier zu Flash ;))

Um das hier alles möglichst verständlich zu halten, werde ich ohne großartiges Design arbeiten, das ist dann jedem selbst überlassen.

Ich erstelle also ein neues Dokument (ActionScript 2) und Stelle im Eigenschaften-Fenster folgende Werte ein:



Wichtig ist, die Bildrate hochzustellen, das sieht dann alles etwas geschmeidiger aus.

Wir fangen erst mal mit dem einfachsten an: der Navigation.
Dazu wählen wir das Textwerkzeug aus (T) und klicken auf die Bühne.

Unser erster Navigationspunkt heißt "Start" also schreiben wir das auch da hin. Im Eigenschaften-Fenster könnt ihr nun eure Schrift anpassen, wie ihr wollt.



Wenn ihr mit eurer Schrift fertig seid, drückt ihr ESC um aus der Schreiben Aktion rauszukommen (oder einfach irgendwo auf die Bühne).

Da diese Schrift später anklickbar sein soll, konvertieren wir sie jetzt in einen Button. Wählt also das Auswahl-Werkzeug aus (V) und klickt eure Schrift an. Jetzt drückt ihr F8 um die Schrift in ein Symbol zu konvertieren. Wählt bei dem Dialog als Typ Schaltfläche aus und gebt dem neuen Button einen Namen: btn_Start. Nun erscheint die Schrift auch in der Bibliothek als Schaltfläche.





Mit einem Doppel-Klick auf eure neue Schaltfläche gelangt ihr in die Ansicht des Buttons. Die Zeitleiste sieht jetzt etwas anders aus. Jeder Frame beschreibt dabei einen Zustand der Schaltfläche (also wie der Button aussieht, wenn man darüber fährt, wie er aussieht, wenn er gedrückt wird und der letzte Punkt Aktiv definiert den aktiven Bereich der Schaltfläche).
Klickt in der Zeitleiste nun auf den letzten Frame und drückt F5 (Bild einfügen) um allen Zuständen auch ein Aussehen zu geben. Klickt nun auf den zweiten Frame und drückt F6 (Schlüsselbild erstellen). Jetzt könnt ihr euren Text so anpassen, wie er aussehen soll, wenn man mit der Maus darüber fährt. Bei mir ändert sich nur die Textfarbe:



Bei gedrückt passiert dasselbe, wie bei Darüber also muss ich kein weiteres Schlüsselbild an dieser Stelle einfügen.
Wenn ihr euren Film nun testet (STRG+ENTER) und über den Button fahrt, seht ihr schon, dass sich eure Schriftfarbe ändert. Super!

Um wieder zur Hauptzeitleiste zu kommen, schließt das Filmfenster, klickt entweder unten in der Zeitleiste auf "Szene1" oder doppelklickt irgendwo auf die Bühne.

Das was wir für "Start" gemacht haben, wiederholen wir nun für noch zwei weitere Menüpunkte: Info und Ende.
Achtet darauf ihnen sinnvolle Namen beim Konvertieren in Schaltflächen zu geben.



Wir haben nun also drei Schaltflächen und befinden uns in der Hauptzeitleiste. Mit dem Auswahlwerkzeug könnt ihr nun eure Navigationspunkte beliebig positionieren.
Damit alle auf einer Höhe sind gebe ich allen in ihrem Eigenschaftsfenster denselben Y-Wert.



Damit wir nun wissen, auf welchen unserer Navigationspunkte der Besucher geklickt hat, geben wir unseren Buttons Instanznamen. Über die Instanznamen können wir die Buttons dann später mit ActionScript ansprechen.

Den Instanznamen eines Elements gibst du im Eigenschaften-Fenster ein.



Ich habe meine Buttons wie folgt benannt: btn_start, btn_info und btn_ende. Vermeidet Sonderzeichen, Umlaute und Leerzeichen.

Unsere Navigationselemente sind also fertig. Am besten gebt ihr der Ebene, auf der eure Navigationspunkte liegen einen sinnvollen Namen (auf den Namen der Ebene doppelt klicken).



Um nun je nach Button-Klick auch verschiedene Texte anzuzeigen, machen wir folgendes: Jeder Zustand, also Start, Info und Ende wird auf einem Schküsselbild auf der Zeitleiste angezeigt, der Klick auf die Buttons springt dann einfach dazwischen hin und her.

Wir erstellen uns also erst einmal eine neue Ebene, die wir Bezeichnungen oder Markierungen nennen.



Dann drücken wir weiter hinten auf der Zeitleiste auf F5 um ein paar Bilder einzufügen.



Es dürfte euch nun auffallen, dass eure Navigation weiter hinten in der Zeitleiste nicht mehr angezeigt wird, deshalb machen wir dasselbe nochmal für die Ebene unserer Navigationselemente.



Nun klicken wir wieder auf den ersten Frame in der Markierungen-Ebene und geben im Eigenschaften-Fenster bei Bidmarkierungen einen Namen ein, z.B. start.



Solche Markierungen erstellt ihr nun noch zweimal irgendwo in der Zeitleiste mit info und ende:



Nun müssen wir den Buttons natürlich noch beibringen, dass sie entsprechend auf der Zeitleiste herumspringen sollen.
Also erstellen wir eine weitere Ebene AS (= ActionScript).
Klickt auf den ersten Frame und drückt F9, falls das Aktionen-Fenster noch nicht geöffnet ist.
Dort schreiben wir nun unser Script rein.

Unser erster Button, Start, soll auch zu der Markierung "start" springen. Also legen wir eine Aktion auf den Button. grundsätzlich sieht das so aus:

instanzname.onAktion = function() {Anweisungen}

Konkret in unserem Fall sieht das so aus:

btn_start.onRelease = function() {
gotoAndPlay("start");
}

Release bedeutet wenn jemand darauf klickt. gotoAndPlay bedeutet gehe zu dem Frame und spiele ab, in Klammern dahinter steht dann der Name oder die Nummer des Frames. Es ist oft sinnvoller mit Namen als mit Nummern zu arbeiten, da man das Script anpassen müsste, wenn man irgendwo nochmal Bilder einfügen würde.

Dieses Script führen wir jetzt für unsere anderen zwei Buttons fort:

btn_start.onRelease = function() {
gotoAndPlay("start");
}
btn_info.onRelease = function() {
gotoAndPlay("info");
}
btn_ende.onRelease = function() {
gotoAndPlay("ende");
}



Dieses Script steht nun im ersten Frame auf der Ebene "AS".

Da wir uns auf diesem Frame schon auf Start befinden, sollte der Besucher nicht auf Start klicken können. Ob ein Button klickbar ist, oder nicht, beschreibt die Eigenschaft enabled. Ist sie auf false gesetzt ist der entsprechende Button nicht mehr anklickbar.

btn_start.enabled = false;

Damit bei info der Info-Button auch nicht mehr anklickbar ist, klicken wir auf den Frame auf der AS-Ebene bei dem auf der Markierungen-Ebene die Markierung für Info ist und drücken F6 und geben im Code-Fenster folgendes ein:

btn_info.enabled = false;

Dasselbe macht man nun auch für Ende.



Damit nun aber nachdem ich auf Ende und anschließend auf Info geklickt habe, ich auch wieder auf Ende klicken kann, muss ich auf den drei Frames, wo wir gerade den Befehl zum Enablen geschrieben haben, die jeweils anderen Buttons klickbar machen.

Bei start muss ich also ergänzen:

btn_info.enabled = true;
btn_ende.enabled = true;

Bei info muss das ergänzt werden:

btn_start.enabled = true;
btn_ende.enabled = true;

Und bei ende das:

btn_info.enabled = true;
btn_start.enabled = true;



Wenn wir vorhin statt gotoAndPlay, gotoAndstop verwendet hätten, dann hätten wir nun schon eine funktionierende Navigation, aber wir wollen Zwischenanimationen einbauen, wofür das Play wichtig ist.

Und damit fangen wir nun auch an. Erstelle eine neue Ebene "Text".



Klicke auf den ersten Frame und wähle mit T das Textwerkzeug aus. Klicke auf die Bühne und schreibe einen kleinen Text zum Thema start.



Klicke nun in der Zeitleiste auf der Ebene Text auf den Frame unter dem Frame mit der Markierung info und drücke F6. Ändere nun den Text ab, sodass er passend zum Thema Info ist.



Den Schritt wiederholst nun noch für Ende:



Bevor wir jetzt anfangen den Effekt einzubauen, schauen wir erstmal ob der ganze Kram mit unserer Navigation funktioniert hat.

Wenn wir jetzt aber auf STRG+ENTER gedrückt haben müssen wir feststellen, dass da zwar was vorbeifliegt aber nicht wirklich das passiert, was wir wollten.
Das liegt daran, dass wir den Film noch nicht an den richtigen Stellen gestoppt haben.

Bevor wir das aber nun machen, müssen wir uns vorher über ein paar Kleinigkeiten der Bauart unserer Website Gedanken machen.

Wir gehen nämlich von folgendem aus: Der Besucher klickt auf einen Menüpunkt -> ein toller Effekt passiert, der dann dazu führt, dass -> der entsprechende Text eingeblendet wird. Sprich, Button wird geklickt, der Film springt zur entsprechenden Markierung, führt die Animation aus und erst dann hält er an. Anstatt also den Befehl zum Stoppen an die Stelle der Markierungen zu setzen, müssen wir ihn praktisch am Ende der Markierung setzen.

Um also Start zu stoppen, klicke ich auf den Frame in der Zeitleiste auf Ebene AS, der vor der Markierung zum nächstens Punkt (info) liegt, erstelle mit F6 ein Schlüsselbild und schreibe dort in mein Aktionen-Fenster

stop();



Das mache ich nun auch für info und ende:



Wenn du nun deinen Film startest, müsstest du feststellen, dass unsere Navigation funktioniert und sie wie geplant dabei hilft von einem Punkt zum nächsten zu springen.

Fehlt also nur noch unser cooler Animationseffekt!
Hier kannst du dir eigentlich alles Mögliche überlegen, ich habe mich für einen einfach Fade-Effekt entschieden, die Texte sollen also eingeblendet werden.

Dazu klicke ich auf den ersten Frame in der Ebene Text und wähle meine Texte aus. Anschließend drücke ich F8 um sie in einen Movieclip zu konvertieren. Denn:

ALLES WAS ANIMIERT WIRD, KOMMT ERST IN EINEN MOVIECLIP!!!

Achtet darauf, dass ihr nun Movielip und nicht Schaltfläche auswählt!



Dasselbe macht ihr nun auch noch für die Elemente auf der Textebene für info und ende.

Jetzt folgt die eigentliche Animation. Die Texte sollen jeweils zunächst nicht sichtbar sein, dann eingeblendet werden, sodass sie am Ende der Animation komplett sichtbar sind.
Dazu müssen wir zunächst die Texte unsichtbar machen.
Gehe also wieder auf den ersten Frame der Ebene Text und wähle dort den eben erstellten Movieclip an.

Im Eigenschaften-Fenster wählst du nun bei Farbe -> Alpha -> 0% aus. Dein Movieclip ist nun unsichtbar.



Nun soll er aber am Ende wieder sichtbar werden. Also klickst du auf den letzten Frame der Markierung start (also vor den ersten Frame von info) und erstellst mit F6 ein Schlüsselbild.
Dort wählst du nun wieder deinen Movieclip aus und stellst den Alpha-Wert im Eigenschaften-Fenster auf 100%.

Klicke nun mit der rechten Maustaste in der Zeitleiste zwischen den ersten und den letzten Frame der Markierung start (egal wohin) auf der Ebene Text und wähle im erscheinenden Kontextmenü Bewegungstween erstellen.



Wenn nun die Frames mit einem Pfeil verbunden und der Hintergrund hellblau hervorgehoben wird, hast du erfolgreich einen Tween erstellt.



Wenn du deinen Film nun testest, siehst du, dass dein Start-Text hübsch eingefadet wird!

Falls in deiner Bibliothek auf einmal neue komische Elemente erschienen sind, hast du etwas falsch gemacht! Schau nach, ob deine Textelemente auch wirklich in einem Movieclip stecken!
Falls alles passt, wiederhole den Schritt für die zwei anderen Texte!

Hast du alles richtig gemacht sollten deine Zeitleiste und Bibliothek wie folgt aussehen:

Und schon ist deine erste Flash-Seite fertig!

Jetzt brauchst du sie nur noch zu veröffentlichen um die nötigen Dateien zu erstellen.

Klicke dazu mit der Maus irgendwo auf die Bühne und dann im Eigenschaftenfenster auf Veröffentlichen: Eigenschaften.
Dort kannst du nun verschiedene Einstellungen vornehmen.
Am wichtigsten ist hier wohl aber die Auswahl des Flashplayers. Wenn du nur Funktionen verwendest, die auch in älteren Versionen schon verfügbar waren, solltest du auch eine ältere Version des Flash-Players wählen, denn: nicht jeder datet seinen Flash-Player regelmäßig ab.

ACHTUNG: Ältere Flash-Player nehmens bei den Buttons ganz genau: hast du nur Text in den Buttons, dann ist auch nur der Text anklickbar, was echt ne nervige Fummelei für den Besucher sein kann! Um das Problem zu umgehen, erstelle einfach ein Rechteck, das die anklickbare Fläche deines Buttons darstellen soll, auf dem Frame unter Aktiv.
Hast du alles zu deiner Zufriedenheit eingestellt, klicke auf Veröffentlichen.

Flash erstellt dir nun die notwendigen Dateien, die du brauchst, im selben Ordner, in der du deine FLA-Datei gespeichert hast.
Lade nun die erstellten Dateien (nicht die FLA-Datei!) auf deinen Webspace und rufe die HTML-Seite auf: deine Flash-Seite ist online!

Du solltest nach dem Veröffentlichen die SWF-Datei nicht mehr umbenennen, da du das auch entsprechend in der HTML-Datei anpassen musst! Die HTML-Datei kannst du allerdings beliebig benennen!

Viel Spaß damit.

Ach ja hier gibts das Endresultat:

http://biancamangels.com/out/tutorials/flashseite/

Und hier ist auch noch die FLA-Datei zum Reinschauen ;): http://biancamangels.com/out/tutorials/flashseite/eigeneseite.fla