Teil 6: level2ItemAni - Animierte zweite Ebene
Flash wäre nicht Flash, wenn sich irgendwas bewegt oder verformt - es hätte auch keinen Sinn langweilige Menüs mit Flash zu bauen wenn diese mit JavaScript viel einfach zu erstellen sind.
Deshalb wollen wir unser Menü nun so abändern, dass die zweite Menüebene nicht einfach erscheint sondern langsam ausfährt. Da wir für jede Menüebene eine eigene Klasse haben brauchen wir also nichts weiter zu tun, als Level2Item abzuändern bzw. zu ersetzen. Zur einfachen Veranschauung wurde für unsere Zwecke Level2Item in Level2ItemAni umbenannt.
Hier erstmal der ActionScript-Code, die Erklärungen folgen dann.
class Level2ItemAni extends MenuItem {
private var _ani :Number = 0; //Animation der Buttons: -1 = zurück, 1 = vor, 0 = stop
private var _framesPerTick :Number = 8; //Geschwindigkeit der Animation
public function Level2ItemAni(values :Array, position :Number){
super(values, position);
}
public function draw() :Void {
//MovieClip erstellen und in _mc speichern
var layer :Number = _root.getNextHighestDepth();
_root.attachMovie("menuItemAni", "menuItem2Ani_"+layer, layer);
this._mc = _root["menuItem2Ani_"+layer];
//Richtig positionieren
this._mc._x = 30 + this._parent._mc._width;
this._mc._y = 30 + this._parent._position * this._parent._mc._height
+ this._position * this._mc._height;
//Text ändern
this._mc.menuItem.linktext.text = this._values["title"];
super.draw();
}
private function press() :Void {
getURL(this._values["link"]);
}
private function rollOver() :Void {
//Falls irgendwo noch leve2Items aktiv, dann inaktiv
for(var i:String in this._parent._subItems) {
this._parent._subItems[i].rollOut();
}
this._mc.menuItem.gotoAndStop(2);
this._parent.displaySubItems();
}
private function rollOut() :Void {
this._mc.menuItem.gotoAndStop(1);
this._parent.hideSubItems();
}
private function display() :Void {
this._ani = 1;
}
private function hide() :Void {
this._ani = -1;
}
private function enterFrame() :Void {
if(this._ani != 0) {
var nextFrame :Number;
if(this._ani == 1) {
if(this._mc._currentframe + this._framesPerTick >= this._mc._totalframes) {
nextFrame = this._mc._totalframes;
this._ani = 0;
}
else
nextFrame = this._mc._currentframe + this._framesPerTick;
this._mc.gotoAndStop(nextFrame);
}
if(this._ani == -1) {
if(this._mc._currentframe - this._framesPerTick <= 1) {
nextFrame = 1;
this._ani = 0;
}
else
nextFrame = this._mc._currentframe - this._framesPerTick;
this._mc.gotoAndStop(nextFrame);
}
}
}
}
Erklärung
Wir haben nun zwei private Variablen _ani und _framesPerTick die den Ablauf der Animation steuern - was genau beide machen steht oben im Quelltext.
Die draw() Funktion ist nichts besonderes auch die rollover() und rollout() Methoden sehen noch genau so aus wie bei Level2Item. Dennoch: Der MovieClip für die Untermenüpunkte ist etwas anders. Da wir eine Animation haben wurde der MovieClip der bei Level2Item verwendet wurde nochmals in einen extra MovieClip verpackt, der den Menüpunkt unter einer Maske von links nach rechts bewegt. Die Animation ist ca. 100 Frames lang. In der Zip-Datei findet ihr den MovieClip zum Nachvollziehen in der Bibliothek unter dem Namen "menuItemAni".
Die display() und hide() Methoden wurden verändert. Da die Untermenüpunkte nicht einfach mehr aus dem Nichts auftauchen sollen steuern diese beiden Funktionen jetzt die Animation. display() setzt _ani auf 1, das bedeutet die Animation soll jetzt ablaufen und die Menüpunkte erscheinen - hide() bewirkt das Gegenteil.
Alleine würden diese Methoden aber nichts bewirken, da ja nur das _ani gesetzt wird. Nun kommt die Eventhandler-Methode enterFrame() ins Spiel. Sie prüft bei jedem neuen Bild das Flash rendert, ob eine Animation stattfinden soll (_ani ungleich 0). Die in _framesPerTick angegebene Geschwindigkeit wird je nach Animationrichtung zum momentan angezeigten Frame des MovieClips hinzugefügt ober abgezogen. Wenn die Animation komplett abgeloffen ist, wird _ani auf 0 gesetzt - jetzt passiert erst wieder etwas, wenn die display() oder die hide() Methode aufgerufen wird.
Das klingt jetzt alles komplizierter als es ist. Wer ein bisschen mit den Beispieldateien rumexperimentiert wird schnell zu eigenen Ergebnissen kommen. Das eben beschriebene Flashmenü sieht so aus wenn es fertig ist:
