Kermit
20.03.2007, 12:18
In diesem Abschnitt wollen wir uns mit der Programmierung des Menüs auseinander setzen. Bevor wir damit aber loslegen, müssen wir uns noch ein wenig Platz für den Späteren Preloader schaffen. Dazu wählen wir alle Keyframes in unserer Zeitleiste an und schieben sie auf Frame Nummer 3.
Wollen wir uns mal unsere Seite in der Vorschau ansehen. Mit STRG+ENTER wird ein neues Fenster geöffnet, indem die Flash-Datei abläuft. Sieht allerdings jetzt komisch aus, da alles flackert. Das liegt daran, dass wir nun 3 Keyframes haben und Flash diese immer wieder abspielt, da wir keine Anweisung gegeben haben, wann gestoppt werden soll. Darum erstellen wir jetzt zu oberst eine neue Ebene Namens „Programm“ und klicken in den dritten Keyframe dieser Ebene. Dort fügen wir einen neuen Keyframe mit F6 ein und öffnen mit F9 das Actionscript-Fenster. Der dritte Keyframe der Programmebene muss weiterhin selektiert sein. In das Fenster tippen wir jetzt den Befehl:
stop();
Das sorgt dafür, dass unsere Seite jetzt an diesem Keyframe erst einmal stehen bleibt, was man auch direkt sehen kann, wenn man wieder die Vorschau öffnet. Außerdem ist nun in diesem Keyframe in der Zeitliste ein kleine a zu sehen, was darauf hinweist, dass dieser Keyframe Actionscripts enthält.
Es ist übrigens egal, in welchem Bild man einen Actionscript hinzufügt. Der Übersicht halber bevorzuge ich jedoch immer eine eigene Ebene, in der sich nur der Programmcode befindet und sonst nichts.
http://frogspawn.de/flashtut/stopkey.gif
Weiter geht’s mit dem Menübalken, der sich bewegen soll, wenn man mit der Maus über die Punkte fährt. Dazu holen wir unsere Pauspapierebene mit dem design.jpg nach oben, machen sie sichtbar und picken uns die Farbe von dem Balken als Füllfarbe (#554B27). Jetzt hat unsere Paspapierebene auch ausgedient und wir können sie löschen. Dazu ist die kleine Mülltonne am unteren Rand der Zeitleiste da.
Nun brauchen wir eine neue Ebene unterhalb der Menüpunktebene.Die nennen wir dann mal Menübalken und zeichnen auf ihr ein neues Rechteck, ohne Rahmen. Dazu muss man die Rahmenfarbe auf „Aus“ stellen, mit dem durchgestrichenen Viereck im Farbwähler.
Jetzt sehen wir aber in der Zeitliste, dass unsere Menübalkenebene sich über alle drei Keyframes erstreckt. Das soll so nicht sein, als ziehen wir deren ersten Keyframe auf Position drei.
Klicken wir jetzt unser Rechteck an und bringen es so in Form, dass es gut hinter den Menüpunkt Home passt. Durch ein wenig Probieren haben sich bei mir folgende Werte ergeben: Breite 65, Höhe 22, X 451, Y 106. X und Y können ein wenig abweichen, je nachdem wo man genau seinen Hintergrund platziert hat.
http://frogspawn.de/flashtut/menubalken.gif
Auf das immer noch angewählte Rechteck machen wir jetzt einen Doppelklick und konvertieren es in ein Symbol. Wieder ist der Movieclip unsere Wahl. Als Name vergeben wir „menubalken“.
Um jetzt Bewegung rein zu bekommen, brauchen wir erstmal die vier Zustände, die unser Balken annehmen kann. Also alle vier Positionen unter den Menüpunkten. Dabei sind uns jetzt nur noch Breite und X-Position wichtig, da die beiden anderen Werte ja gleich bleiben. Durch ein wenig rumgeschiebe ergibt sich dann folgende Tabelle:
Home: B 65, X 451
Netzwerk: B 90, X 559
Bilder: B 65, X 694
Kontakt: B 80, X 804
Jetzt geht’s an Eingemachte. Wir hauchen dem Balken Leben ein. Wenn wir den Balken anwählen und mit F9 Das Actionscriptfenster öffnen können wir für den Balken-Movieclip einen Actionscript eintippen. Bei Movieclips kann man jedoch nicht einfach so den Code ein tippen, sondern muss zuerst festlegen, unter welchen Umständen der Code ausgeführt werden soll. Dazu benutzt Flash so genannte on-Prozeduren. Diese funktionieren ähnlich wie bei Javascript z.B. onClick. Da wir wollen, dass sie unser Balken zu jeder Zeit bewegen kann müssen wir sicherstellen, dass der Code immer wieder ausgeführt wird. Darum benutzen wir die Prozedur onClipEvent(enterFrame). Das bedeutet, dass jedes mal, wenn Flash einen neuen Frame läd, unser Code durchlaufen wird. Da wir anfangs eine Framerate von 20 Bildern pro Sekunde eingestellt haben, wird unser Code folglich 20 mal pro Sekunde ausgeführt. Alles was nun zu dieser Prozedur gehört wird in geschweifte Klammern eingefasst. Das Grundgerüst sieht dann so aus:
onClipEvent(enterFrame)
{
// Code
}
Als nächstes müssen wir auswerten, wo der Curser gerade ist und welche Werte dann genutzt werden sollen. Dazu benutzen wir eine Switch-Anweisung und eine globale Variable, in der wir später speichern, wo sich die Maus gerade befindet.
Vorher aber ein kleiner Exkurs, wie es sich mit der Verschachtelung in Flash verhält. Die Hauptkomposition, die ganz zu Anfang steht kann immer mit dem Parameter _root angesprochen werden. Will man z.B. eine Variable in dieser Ebene ablegen, würde man diese Variable so ansprechen: _root.variablenmane = xyz.
So hätte man die Variable „variablename“ mit dem Wert xyz gefüllt und im root abgelegt.
Nun können aber auch Movieclips eigene Variablen haben. So z.B. unser Balken. Um auf Variablen in einem Movieclip zurückgreifen zu können muss man diesem erst einen Namen verpassen. Dazu ist das Feld „Instanzname“ im Eigenschaftsfenster da. Nehmen wir jetzt mal an, wir nennen unseren Balken „balken“ und wollen in ihm eine Variable ablegen. Dann würde das so aussehen: _root.balken.variablenmane = xyz
So kann das immer weiter gehen, da ja auch innerhalb der Movieclips weitere Movieclips sein können: _root.clip1.clip2.clip3.variablenname = xyz
Solange man sich auf einer Ebene bewegt. Also nur auf der root ebene, oder nur in einem Moviclip, kann man auch die Variablen direkt ansprechen ohne den Vorangegangen absoluten Pfad.
Das alles gilt natürlich auch für Funktionen, Objekte und was es sonst noch so gibt.
Aber nun zurück zu unserem Code. Den Zustand der Maus legen wir in _root.mouseisover ab. In der Switch Anweisung legen wir dann zwei Variablen, gemäß unserer weiter oben ermittelten Tabelle fest. Da wir den Movieclip nicht verlassen entfällt hier der absolute Pfad. Daraus ergibt sich dann dieses Konstrukt:
onClipEvent(enterFrame)
{
switch (_root.mouseisover)
{
case "home":
xpos = 451;
breite = 65;
break;
case "netzwerk":
xpos = 559;
breite = 90;
break;
case "bilder":
xpos = 694;
breite = 65;
break;
case "kontakt":
xpos = 804;
breite = 90;
break;
}
}
Jetzt fehlt noch die Anweisung, dass sich der Balken bewegen soll. Auf die X Position kann kann man mit dem Parameter _x zugreifen und auf die Breite mit _width. Da wir uns im Clip befinden können wir z.B. über this._x die Position setzen. Im Goben würde also schon dieser Code ausreichen:
this._x = xpos;
this._width = breite;
Da wir aber eine weiche Bewegung wollen und kein Springen müssen wir eine Formel finden, die die Position langsam annähert. Das geht mit so einem Konstrukt:
this._x = this._x + (xpos - this._x) / 5;
Dabei wird die Differenz der aktuellen Position und der zu erreichenden Position errechnet und dann der aktuellen Position hinzu addiert. Die Division durch 5 am Ende dämpft die Bewegung, damit das ziel nicht ganz so schnell erreicht ist. Würde man die Zahl größer machen hinge es noch langsamer. Damit sieht der Code für den unseren Balken dann so aus:
onClipEvent(enterFrame)
{
switch (_root.mouseisover)
{
case "home":
xpos = 451;
breite = 65;
break;
case "netzwerk":
xpos = 559;
breite = 90;
break;
case "bilder":
xpos = 694;
breite = 65;
break;
case "kontakt":
xpos = 804;
breite = 90;
break;
}
this._x = this._x + (xpos - this._x) / 5;
this._width = this._width + (breite - this._width) / 5;
}
Jedoch wird bei einer Vorschau der Datei jetzt noch nichts passieren, da die Variable _root.mouseisover ja noch nicht belegt ist. Als erstes initialisieren wir die Variable einmal mit dem Wert „home“ damit beim Start der Seite der Balken schon eine Position hat. Die Initialisierung sollte am besten im 3. Keyframe unserer Programmebene geschehen, so dass der Code dort so aussieht:
stop();
_root.mouseisover = "home";
Widmen wir uns nun der Anklickbarkeit unserer Menüpunkte. Dazu erstellen wir eine neue Ebene namens „Buttons“ oberhalb der Menüpunktebene und zeichnen wieder ein Rechteck hinein. Die Farbe ist diesmal egal. Den ersten Keyframe ziehen wir wieder auf Nummer 3. Jetzt konvertieren wir das Rechteck wieder in ein Symbol. Diesmal jedoch in eine Schaltfläche und bennen es Button. Durch einen Doppelklick auf den neu erzeugten Button gelangen wir wieder in den bearbeiten Modus für dieses Symbol. Aufällig ist diesmal, dass die Zeitlieste anders aussieht als sonst. Das liegt daran, dass ein Button nur 4 Keyframes kennt. Der erste ist das, was man sieht, wenn man sich auf der Seite befindet. Im Moment ist das noch unser Rechteck. Der zweite zeigt das was man sieht, wenn man mit der Maus über den Button fährt und der dritte, wenn man ihn drückt. Würde man also das Rechteck in jedem Frame anders einfärben, dann hätte man schon einen simplen Mouseover Effekt.
Da wir aber weder ein Rechteck sehen wollen, noch irgendeinen Mouseover Effekt brauchen, interessiert uns nur der vierte Keyframe. Dieser definiert die aktive Fläche des Buttons auf die geklickt werden kann. Wir ziehen also den ersten Keyframe in den letzen. Somit haben wir einen unsichtbaren Button geschaffen.
http://frogspawn.de/flashtut/button.gif
Wir verlassen den Editiermodus wieder durch einen Doppelklick außerhalb des Rechtecks und finden nun auf unserer Bühne einen halbtransparenten Button, wo vorher unser Rechteck war. Diese Darstellung benutzt Flash nur im Editor, da man ja sonst nicht wüsste, wo der Button ist. Bei einer späteren Vorschau ist er verschwunden und nur noch seine Klickeigenschaft beleibt über.
Wir positionieren und skalieren den Button jetzt so, dass er genau über unserem Home Menüpunkt liegt. Im angewählten Zustand öffnen wir dann das Actionscript Fenster und sagen dem Button, was er tun soll. Hier gilt das gleiche wie bei Movieclips. Es muss eine on-Prozedur haben. In unserem Fall also on(rollOver), da er ja unsere Steuervariable ändern soll, wenn wir mit der Maus über ihn fahren. Der Code sieht dann so aus:
on(rollOver)
{
_root.mouseisover = "home";
}
Nun duplizieren wir den Button 3 mal mit STRG+D und Positionieren die 3 Kopien über den restlichen Menüpunkten. Nach dem duplizieren haben alle Button den selben Code. Also müssen wir jetzt in jedem den Wert ändern, der für „mouseisover“ vergeben wird (home, netzwerk, bilder, kontakt).
Ist das geschehen können wir die Vorschau starten und sehen unseren Balken in Aktion. Sobald wir über einen Menüpunkt fahren wir der Balken uns sanft folgen.
Was jetzt noch fehlt ist der Wechsel zwischen den Sektionen, wenn man einen der Button anklickt. Dazu müssen wir zuerst 3 weitere Keyframes einfügen, für die noch fehlen Bereiche. Home ist ja schon vorhanden. Als ersten klicken wir in den 5. Keyframe der Rahmen Ebene und drücken F5. Damit verlängern wir die Ebene, aber fügen keinen neuen Keyframe ein. Das selbe machen wir mit allen anderen eben außer der Programmebene. Mit dieser haben wir nämlich etwas anderes vor. Hier markieren wir Keyframe 4-6 und drücken F6. Damit haben wir 3 neue Keyframes eingefügt. Jetzt wählen wir den dritten Keyframe dieser Ebene an und geben ihr in den Eigenschaften einen Bildnamen. In unserem Fall „home“.
http://frogspawn.de/flashtut/bildname.gif
Das machen wir dann auch mit den anderen 3 Bildern dieser Ebene. Bild 4 nennen wir „netzwerk“, Bild 5 „bilder“ und Bild 6 „kontakt“. Danach sieht unsere Zeitleiste so aus:
http://frogspawn.de/flashtut/label.gif
Nun wählen wir den Button für Home an und erweitern seinen Ationscript um eine on(release) Prozedur. Das ist der Zustand der eintritt, wenn man ihn nach dem Klicken wieder loslässt. Also ähnlich dem dem onClick aus Javascript. Ausführen soll der Button dann einen Bildwechsel. Dafür ist der Befehl gotoAndStop() da. Dieser weißt Flash an zu einem Bild zu wechseln und dort anzuhalten. Ebenso gibt es auch den Befehl gotoAndPlay() der an dem angegeben Bild dann weiter spielt. Der Code unseres Home Button sieht dann so aus:
on(rollOver)
{
_root.mouseisover = "home";
}
on(release)
{
gotoAndStop("home");
}
Analog dazu erweitern wir nun auch die drei anderen Button. Damit ist unsere Seite nun in der Lage zwischen den einzelnen Sektionen zu wechseln. In der Vorschau ist davon noch wenig zu spüren, da ja noch kein Inhalt vorhanden ist. Und um diesen kümmern wir uns im nächsten Teil. Den Endstand dieses Abschnittes könnt ihr euch hier (http://frogspawn.de/flashtut/web_02.zip) als .fla herunter laden.
Dieser Teil war wohl etwas zäher, da sehr viel Text un Theorie drin stecke, aber wenn ihr irgendwo nicht weiter kommt, oder andere Fragen habt, schreibt sie einfach hier rein.
Wollen wir uns mal unsere Seite in der Vorschau ansehen. Mit STRG+ENTER wird ein neues Fenster geöffnet, indem die Flash-Datei abläuft. Sieht allerdings jetzt komisch aus, da alles flackert. Das liegt daran, dass wir nun 3 Keyframes haben und Flash diese immer wieder abspielt, da wir keine Anweisung gegeben haben, wann gestoppt werden soll. Darum erstellen wir jetzt zu oberst eine neue Ebene Namens „Programm“ und klicken in den dritten Keyframe dieser Ebene. Dort fügen wir einen neuen Keyframe mit F6 ein und öffnen mit F9 das Actionscript-Fenster. Der dritte Keyframe der Programmebene muss weiterhin selektiert sein. In das Fenster tippen wir jetzt den Befehl:
stop();
Das sorgt dafür, dass unsere Seite jetzt an diesem Keyframe erst einmal stehen bleibt, was man auch direkt sehen kann, wenn man wieder die Vorschau öffnet. Außerdem ist nun in diesem Keyframe in der Zeitliste ein kleine a zu sehen, was darauf hinweist, dass dieser Keyframe Actionscripts enthält.
Es ist übrigens egal, in welchem Bild man einen Actionscript hinzufügt. Der Übersicht halber bevorzuge ich jedoch immer eine eigene Ebene, in der sich nur der Programmcode befindet und sonst nichts.
http://frogspawn.de/flashtut/stopkey.gif
Weiter geht’s mit dem Menübalken, der sich bewegen soll, wenn man mit der Maus über die Punkte fährt. Dazu holen wir unsere Pauspapierebene mit dem design.jpg nach oben, machen sie sichtbar und picken uns die Farbe von dem Balken als Füllfarbe (#554B27). Jetzt hat unsere Paspapierebene auch ausgedient und wir können sie löschen. Dazu ist die kleine Mülltonne am unteren Rand der Zeitleiste da.
Nun brauchen wir eine neue Ebene unterhalb der Menüpunktebene.Die nennen wir dann mal Menübalken und zeichnen auf ihr ein neues Rechteck, ohne Rahmen. Dazu muss man die Rahmenfarbe auf „Aus“ stellen, mit dem durchgestrichenen Viereck im Farbwähler.
Jetzt sehen wir aber in der Zeitliste, dass unsere Menübalkenebene sich über alle drei Keyframes erstreckt. Das soll so nicht sein, als ziehen wir deren ersten Keyframe auf Position drei.
Klicken wir jetzt unser Rechteck an und bringen es so in Form, dass es gut hinter den Menüpunkt Home passt. Durch ein wenig Probieren haben sich bei mir folgende Werte ergeben: Breite 65, Höhe 22, X 451, Y 106. X und Y können ein wenig abweichen, je nachdem wo man genau seinen Hintergrund platziert hat.
http://frogspawn.de/flashtut/menubalken.gif
Auf das immer noch angewählte Rechteck machen wir jetzt einen Doppelklick und konvertieren es in ein Symbol. Wieder ist der Movieclip unsere Wahl. Als Name vergeben wir „menubalken“.
Um jetzt Bewegung rein zu bekommen, brauchen wir erstmal die vier Zustände, die unser Balken annehmen kann. Also alle vier Positionen unter den Menüpunkten. Dabei sind uns jetzt nur noch Breite und X-Position wichtig, da die beiden anderen Werte ja gleich bleiben. Durch ein wenig rumgeschiebe ergibt sich dann folgende Tabelle:
Home: B 65, X 451
Netzwerk: B 90, X 559
Bilder: B 65, X 694
Kontakt: B 80, X 804
Jetzt geht’s an Eingemachte. Wir hauchen dem Balken Leben ein. Wenn wir den Balken anwählen und mit F9 Das Actionscriptfenster öffnen können wir für den Balken-Movieclip einen Actionscript eintippen. Bei Movieclips kann man jedoch nicht einfach so den Code ein tippen, sondern muss zuerst festlegen, unter welchen Umständen der Code ausgeführt werden soll. Dazu benutzt Flash so genannte on-Prozeduren. Diese funktionieren ähnlich wie bei Javascript z.B. onClick. Da wir wollen, dass sie unser Balken zu jeder Zeit bewegen kann müssen wir sicherstellen, dass der Code immer wieder ausgeführt wird. Darum benutzen wir die Prozedur onClipEvent(enterFrame). Das bedeutet, dass jedes mal, wenn Flash einen neuen Frame läd, unser Code durchlaufen wird. Da wir anfangs eine Framerate von 20 Bildern pro Sekunde eingestellt haben, wird unser Code folglich 20 mal pro Sekunde ausgeführt. Alles was nun zu dieser Prozedur gehört wird in geschweifte Klammern eingefasst. Das Grundgerüst sieht dann so aus:
onClipEvent(enterFrame)
{
// Code
}
Als nächstes müssen wir auswerten, wo der Curser gerade ist und welche Werte dann genutzt werden sollen. Dazu benutzen wir eine Switch-Anweisung und eine globale Variable, in der wir später speichern, wo sich die Maus gerade befindet.
Vorher aber ein kleiner Exkurs, wie es sich mit der Verschachtelung in Flash verhält. Die Hauptkomposition, die ganz zu Anfang steht kann immer mit dem Parameter _root angesprochen werden. Will man z.B. eine Variable in dieser Ebene ablegen, würde man diese Variable so ansprechen: _root.variablenmane = xyz.
So hätte man die Variable „variablename“ mit dem Wert xyz gefüllt und im root abgelegt.
Nun können aber auch Movieclips eigene Variablen haben. So z.B. unser Balken. Um auf Variablen in einem Movieclip zurückgreifen zu können muss man diesem erst einen Namen verpassen. Dazu ist das Feld „Instanzname“ im Eigenschaftsfenster da. Nehmen wir jetzt mal an, wir nennen unseren Balken „balken“ und wollen in ihm eine Variable ablegen. Dann würde das so aussehen: _root.balken.variablenmane = xyz
So kann das immer weiter gehen, da ja auch innerhalb der Movieclips weitere Movieclips sein können: _root.clip1.clip2.clip3.variablenname = xyz
Solange man sich auf einer Ebene bewegt. Also nur auf der root ebene, oder nur in einem Moviclip, kann man auch die Variablen direkt ansprechen ohne den Vorangegangen absoluten Pfad.
Das alles gilt natürlich auch für Funktionen, Objekte und was es sonst noch so gibt.
Aber nun zurück zu unserem Code. Den Zustand der Maus legen wir in _root.mouseisover ab. In der Switch Anweisung legen wir dann zwei Variablen, gemäß unserer weiter oben ermittelten Tabelle fest. Da wir den Movieclip nicht verlassen entfällt hier der absolute Pfad. Daraus ergibt sich dann dieses Konstrukt:
onClipEvent(enterFrame)
{
switch (_root.mouseisover)
{
case "home":
xpos = 451;
breite = 65;
break;
case "netzwerk":
xpos = 559;
breite = 90;
break;
case "bilder":
xpos = 694;
breite = 65;
break;
case "kontakt":
xpos = 804;
breite = 90;
break;
}
}
Jetzt fehlt noch die Anweisung, dass sich der Balken bewegen soll. Auf die X Position kann kann man mit dem Parameter _x zugreifen und auf die Breite mit _width. Da wir uns im Clip befinden können wir z.B. über this._x die Position setzen. Im Goben würde also schon dieser Code ausreichen:
this._x = xpos;
this._width = breite;
Da wir aber eine weiche Bewegung wollen und kein Springen müssen wir eine Formel finden, die die Position langsam annähert. Das geht mit so einem Konstrukt:
this._x = this._x + (xpos - this._x) / 5;
Dabei wird die Differenz der aktuellen Position und der zu erreichenden Position errechnet und dann der aktuellen Position hinzu addiert. Die Division durch 5 am Ende dämpft die Bewegung, damit das ziel nicht ganz so schnell erreicht ist. Würde man die Zahl größer machen hinge es noch langsamer. Damit sieht der Code für den unseren Balken dann so aus:
onClipEvent(enterFrame)
{
switch (_root.mouseisover)
{
case "home":
xpos = 451;
breite = 65;
break;
case "netzwerk":
xpos = 559;
breite = 90;
break;
case "bilder":
xpos = 694;
breite = 65;
break;
case "kontakt":
xpos = 804;
breite = 90;
break;
}
this._x = this._x + (xpos - this._x) / 5;
this._width = this._width + (breite - this._width) / 5;
}
Jedoch wird bei einer Vorschau der Datei jetzt noch nichts passieren, da die Variable _root.mouseisover ja noch nicht belegt ist. Als erstes initialisieren wir die Variable einmal mit dem Wert „home“ damit beim Start der Seite der Balken schon eine Position hat. Die Initialisierung sollte am besten im 3. Keyframe unserer Programmebene geschehen, so dass der Code dort so aussieht:
stop();
_root.mouseisover = "home";
Widmen wir uns nun der Anklickbarkeit unserer Menüpunkte. Dazu erstellen wir eine neue Ebene namens „Buttons“ oberhalb der Menüpunktebene und zeichnen wieder ein Rechteck hinein. Die Farbe ist diesmal egal. Den ersten Keyframe ziehen wir wieder auf Nummer 3. Jetzt konvertieren wir das Rechteck wieder in ein Symbol. Diesmal jedoch in eine Schaltfläche und bennen es Button. Durch einen Doppelklick auf den neu erzeugten Button gelangen wir wieder in den bearbeiten Modus für dieses Symbol. Aufällig ist diesmal, dass die Zeitlieste anders aussieht als sonst. Das liegt daran, dass ein Button nur 4 Keyframes kennt. Der erste ist das, was man sieht, wenn man sich auf der Seite befindet. Im Moment ist das noch unser Rechteck. Der zweite zeigt das was man sieht, wenn man mit der Maus über den Button fährt und der dritte, wenn man ihn drückt. Würde man also das Rechteck in jedem Frame anders einfärben, dann hätte man schon einen simplen Mouseover Effekt.
Da wir aber weder ein Rechteck sehen wollen, noch irgendeinen Mouseover Effekt brauchen, interessiert uns nur der vierte Keyframe. Dieser definiert die aktive Fläche des Buttons auf die geklickt werden kann. Wir ziehen also den ersten Keyframe in den letzen. Somit haben wir einen unsichtbaren Button geschaffen.
http://frogspawn.de/flashtut/button.gif
Wir verlassen den Editiermodus wieder durch einen Doppelklick außerhalb des Rechtecks und finden nun auf unserer Bühne einen halbtransparenten Button, wo vorher unser Rechteck war. Diese Darstellung benutzt Flash nur im Editor, da man ja sonst nicht wüsste, wo der Button ist. Bei einer späteren Vorschau ist er verschwunden und nur noch seine Klickeigenschaft beleibt über.
Wir positionieren und skalieren den Button jetzt so, dass er genau über unserem Home Menüpunkt liegt. Im angewählten Zustand öffnen wir dann das Actionscript Fenster und sagen dem Button, was er tun soll. Hier gilt das gleiche wie bei Movieclips. Es muss eine on-Prozedur haben. In unserem Fall also on(rollOver), da er ja unsere Steuervariable ändern soll, wenn wir mit der Maus über ihn fahren. Der Code sieht dann so aus:
on(rollOver)
{
_root.mouseisover = "home";
}
Nun duplizieren wir den Button 3 mal mit STRG+D und Positionieren die 3 Kopien über den restlichen Menüpunkten. Nach dem duplizieren haben alle Button den selben Code. Also müssen wir jetzt in jedem den Wert ändern, der für „mouseisover“ vergeben wird (home, netzwerk, bilder, kontakt).
Ist das geschehen können wir die Vorschau starten und sehen unseren Balken in Aktion. Sobald wir über einen Menüpunkt fahren wir der Balken uns sanft folgen.
Was jetzt noch fehlt ist der Wechsel zwischen den Sektionen, wenn man einen der Button anklickt. Dazu müssen wir zuerst 3 weitere Keyframes einfügen, für die noch fehlen Bereiche. Home ist ja schon vorhanden. Als ersten klicken wir in den 5. Keyframe der Rahmen Ebene und drücken F5. Damit verlängern wir die Ebene, aber fügen keinen neuen Keyframe ein. Das selbe machen wir mit allen anderen eben außer der Programmebene. Mit dieser haben wir nämlich etwas anderes vor. Hier markieren wir Keyframe 4-6 und drücken F6. Damit haben wir 3 neue Keyframes eingefügt. Jetzt wählen wir den dritten Keyframe dieser Ebene an und geben ihr in den Eigenschaften einen Bildnamen. In unserem Fall „home“.
http://frogspawn.de/flashtut/bildname.gif
Das machen wir dann auch mit den anderen 3 Bildern dieser Ebene. Bild 4 nennen wir „netzwerk“, Bild 5 „bilder“ und Bild 6 „kontakt“. Danach sieht unsere Zeitleiste so aus:
http://frogspawn.de/flashtut/label.gif
Nun wählen wir den Button für Home an und erweitern seinen Ationscript um eine on(release) Prozedur. Das ist der Zustand der eintritt, wenn man ihn nach dem Klicken wieder loslässt. Also ähnlich dem dem onClick aus Javascript. Ausführen soll der Button dann einen Bildwechsel. Dafür ist der Befehl gotoAndStop() da. Dieser weißt Flash an zu einem Bild zu wechseln und dort anzuhalten. Ebenso gibt es auch den Befehl gotoAndPlay() der an dem angegeben Bild dann weiter spielt. Der Code unseres Home Button sieht dann so aus:
on(rollOver)
{
_root.mouseisover = "home";
}
on(release)
{
gotoAndStop("home");
}
Analog dazu erweitern wir nun auch die drei anderen Button. Damit ist unsere Seite nun in der Lage zwischen den einzelnen Sektionen zu wechseln. In der Vorschau ist davon noch wenig zu spüren, da ja noch kein Inhalt vorhanden ist. Und um diesen kümmern wir uns im nächsten Teil. Den Endstand dieses Abschnittes könnt ihr euch hier (http://frogspawn.de/flashtut/web_02.zip) als .fla herunter laden.
Dieser Teil war wohl etwas zäher, da sehr viel Text un Theorie drin stecke, aber wenn ihr irgendwo nicht weiter kommt, oder andere Fragen habt, schreibt sie einfach hier rein.