Animiertes Textmenü
Flash und der Einsatz von Hyperlinks & Co.: Im vorliegenden Tutorial von Matthias Kannengiesser geht es um die Umsetzung eines Flash gestützten Menüs, welches auch gut und gerne ohne weiteres als Linkliste eingesetzt werden kann.
Bestandteile
Als erstes kümmen wir uns um die einzelnen Bestandteile des Textmenüs: das wäre im diesem Fall eine unsichtbare Schaltfläche, welche den Symbolnamen »schalter« erhält und lediglich im Aktiv Bild eine rechteckige Vektorform besitzt.
Nachdem wir die unsichtbare Schaltfläche angelegt haben, kümmern wir uns als nächstes um den MovieClip, der als Menüpunkt im Textmenü eingesetzt werden soll. Dieser setzt sich aus zwei Ebenen zusammen:
In der Schalter-Ebene wird die unsichtbare Schaltfläche platziert. In der Textfelder-Ebene werden zwei dynamische Textfelder mit dem Variablennamen »inhalt« platziert. Der Variablenname der Textfelder ist äusserst wichtig für die Beschriftung der einzelnen Menüclips, schliesslich soll nicht für jeden Menüpunkt ein neues MovieClip-Symbol erzeugt werden – das wäre viel zu viel Aufwand. Wir werden den vorliegenden MovieClip mit Hilfe der dynamischen Textfelder in die Lage versetzen, auf unterschiedliche Inhalte zu verweisen.
Die wesentlichen Bestandteile für das Textmenü stehen uns nun zur Verfügung; es fehlt lediglich noch eine Kleinigkeit.
Schaltflächen Aktionen
Auf der unsichtbaren Schaltfläche müssen wir dafür sorgen, dass folgende ActionScript Codezeilen platziert werden:
skal = 1;
}
on (rollOut, dragOut) {
skal = 0;
}
on (release) {
getURL (url);
}
Diese sorgen im weiteren Verlauf für die korrekte Übergabe der Signalvariable »skal« und dem Aufruf der Website mit Hilfe von getURL und der Variablen »url«.
Hauptzeitleiste
Auf der Hauptzeitleiste müssen wir als nächstes dafür sorgen, die einzelnen Menüclips zu platzieren.
Wie man sieht, werden die einzelnen MovieClips untereinander platziert. Die Hauptzeitleiste enthält zwei Ebenen. In der Action-Ebene befinden sich die Codezeilen zur Umsetzung der Animation unseres Textmenüs, in der Inhalt-Ebene liegen die entsprechenden MovieClips. Den jeweiligen MovieClips wird im übrigen kein Instanzname zugewiesen. Es reicht vollkommen, Sie auf der Bühne zu platzieren.
Codezeilen in der Action-Ebene
Wir sollten uns nun den Codezeilen der Action-Ebene zuwenden.
Skalieren
Hier mal etwas anders. Kann für alle möglichen visuellen
Objekte eingesetzt werden auch für Bitmap-Grariken.
vG – maximale Skalierung in Prozent
vK – minimale Skalierung in Prozent
vGFaktor – Skalierungsfaktor für die Vergrösserung
vKFaktor – Skalierungsfaktor für die Verkleinerung
*/
MovieClip.prototype.skalieren = function (vG,VK,vGFaktor,VKFaktor) {
if (this.skal == 1) {
this._xscale = this._xscale + (vG – this._xscale)/vGFaktor;
this._yscale = this._yscale + (vG – this._yscale)/vGFaktor;
}
if (this.skal == 0) {
this._xscale = this._xscale + (vK – this._xscale)/vKFaktor;
this._yscale = this._yscale + (vK – this._yscale)/vKFaktor;
}
}
Wie man sieht, wurde ein MovieClip.prototype zur Umsetzung der Skalierungsfunktion eingesetzt. Mit Hilfe des prototype-Objekts sind wir in der Lage, jedem MovieClip des aktuellen Flash Films mit dieser Skalierungs-Funktion auszustatten. Die Funktion selbst trägt den Namen »skalieren« und lässt sich mit Hilfe der vier Parameter steuern.
Hinweis: Mehr zum prototype-Objekt und der objektorientierten Programmierung erfahren Sie in folgender Leseprobe aus dem Buch – ActionScript Profireferenz (Franzis) – (Leseprobe).
Sollten wir die Funktion wie folgt aufrufen:
skalieren(200,100,6,10);
}
sorgt die Funktion dafür, dass der betroffene MovieClip maixmal um 200% vergrössert wird und seine minimale Grösse 100% (Originalgrösse) beträgt. Durch die beiden übrigen Parameter wird der Skalierungsfaktor für die Vergrösserung und Verkleinerung festgelegt, schliesslich soll die Skalierung nicht abbrupt, sondern in Form einer Animation ausgeführt werden. Der jeweilige Faktor legt durch die Division die Geschwindigkeit fest – ein kleiner Faktor führt zu einem schnellen Bewegungsablauf, ein grosser Faktor zu einem langsamen Bewegungsablauf.
Bevor wir es übersehen, die Variable »skal« ist ebenfalls in der Funktion enthalten. Sie dient als Signalvariable (siehe Schaltflächen Aktionen). Sollte die Variable den Wert 1 enthalten, wird der betroffene MovieClip vergrössert, sobald die Variable den Wert 0 enthält, wird der MovieClip verkleinert.
Codezeilen auf den MovieClips
Was nun noch fehlt, sind die Codezeilen, welche auf die platzierten MovieClips gehören:
inhalt=“Information“;
url= „http://www.multimedia.de“;
skal = 0;
}
onClipEvent (enterFrame) {
skalieren(200,100,6,10);
}
Das Ereignis »load« enthält die Variablenzuweisungen, wir erinnern uns an die Schaltflächen Aktionen. Die Variable »inhalt« legt die Textfeldbeschriftungen für den jeweiligen MovieClip fest. Die Variable »url« verweist auf die gewünschte Website. Abschliessend wir der Ausgangswert der Variablen »skal« festgelegt.
Innerhalb des ↕»enterFrame-Ereignises« erfolgt der eigentliche Funktionsaufruf. Sollten wir nun den Flash Film testen, würde der erste MovieClip bereits das gewünschte Verhalten aufweisen. Nun gilt es sämtliche weiteren Textmenü-Clips mit den Codezeilen zu belegen und die jeweiligen Anpassungen innerhalb der Variablenzuweisungen vorzunehemen:
inhalt=“Nachrichten“;
url= „http://www.flashstar.de“;
skal = 0;
}
onClipEvent (enterFrame) {
skalieren(200,100,6,10);
}
usw.
Für den letzten Textmenü-Clip haben wir uns noch etwas Besonderes einfallen lassen. Anstatt das die Variable url auf eine Website verweist, verweist sie auf eine E-Mail:
Wie man sieht, wird hierfür »mailto:« innerhalb der Variable platziert. Die Angabe subject legt die Betreffzeile innerhalb der E-Mail fest und Body symbolisiert den eigentlichen Inhalt der E-Mail.
Variante – goto vs getURL
Die aktuelle Umsetzung verweist auf Websites (via getURL). Mit wenigen Handgriffen lässt sich dieses Textmenü auch für eine einfache Navigation innerhalb des Flash Films einsetzen. Hierzu müssen folgende Codezeilen wie folgt angepasst werden:
Schaltflächen Aktionen
Hier muss die Codzeile innerhalb des release-Ereignis angepasst werden:
this._parent.gotoAndStop (bild);
}
Mit der Angabe »this._parent« verweisen wir auf eine übergeordnete Zeitleiste, in unserem Fall verweisen wir hiermit auf die Hauptzeitleiste des Flash Films.
MovieClip Aktionen
Als nächstes müssen wir uns noch um die Codezeilen auf den MovieClips kümmern und die Variable »url« durch die Variable »bild« ersetzen:
inhalt=“Bild Eins“;
bild= 1;
skal = 0;
}
Diese enthält nun eine Bildnummer und schon können wir den aktuellen Flash Film steuern.
Hinweis: Anstelle der Bildnummern können auch Bildmarkierungen (Bildmarken, Labels) verwendet werden. Die vorliegende Variante verarbeitet somit nicht nur Bildnummern!
Fazit
Ein animiertes Textmenü lässt sich mit einigen Handgriffen und ActionScript-Codezeilen relativ einfach in die Tat umsetzen. Was wir Ihnen noch verschwiegen haben: anstatt der Textfelder können Sie mit Hilfe der Funktion »skalieren« auch sämtliche anderen sichtbaren Elemente wie z.B. Bilder beeinflussen. Wer es noch etwas dynamischer haben will und die einzelnen MovieClips nicht per Hand auf der Bühne platzieren möchte, sollte sich die dritte Variante innerhalb unseres Tutorial-ZIP Pakets betrachten. Wir wünschen viel Freude mit dem animierten Textmenü.
