Zum Inhalt

Navi-Highlighting: Menüpunkt soll geklickt erscheinen

Irgendwann wagt sich auch ein Flashneuling daran, ein Navigationsmenü für eine Flash-Website zu erschaffen. Unter Zuhilfenahme diverser Mausereignisse erreichen sie einigermaßen leicht, dass sich die einzelnen Menüeinträge verfärben, wenn BenutzerInnen sie mit dem Mauszeiger überrollen oder klicken.
Was aber oft nicht im ersten Versuch klappt, ist die Umsetzung des folgenden Plans, den bis hierhin gekommene FlashentwicklerInnen als nächstes in Angriff nehmen:
Bei Klick auf einen Menüeintrag soll dieser solange markiert bleiben, bis ein anderer geklickt worden ist. Wenn dieser Fall eingetreten ist, soll natürlich der vormals „geklickt“ erschienene Menüeintrag wieder normal aussehen und sich der zuletzt geklickte nach „geklickt“ hin färben oder wandeln (vgl. Beispieldatei 1).

Ziel
Dieser Artikel soll einen Weg aufzeigen, wie dieser Plan erfolgreich in die Tat umgesetzt werden kann. Nebenbei erhalten Flashneulinge vielleicht noch den einen oder anderen Tipp, wie sie ihre Navigation per Skript auf die Bühne zaubern können.

Los geht’s
Das folgende Schaubild soll illustrieren, dass zunächst lediglich ein einzelner Movieclip benötigt wird, der aus einem dynamischen Textfeld vor einem rechteckigen Hintergrund besteht:

<img width=“450″ height=“510″ alt=““ src=“http://www.christianscholz.com/img/tut_navi_highlighting.gif“ />
Abb. 1: Movieclip menuItem; Abmessungen; Instanz- und Exportnamen

Es wird also in einer leeren Flashdatei ein leeres Movieclip-Symbol angelegt, welches aus den oben gezeigten Zutaten besteht. Wenn das Rechteck aufgezogen und das Textfeld geschaffen und mit dem Instanznamen tfMenuItem ausgestattet worden ist, sollte eben diesem Symbol ein Export- oder Linkagename verpasst werden, der genauso lautet wie der Symbolname: menuItem.

Im Rahmen dieses Artikels bleibt die Bühne leer; der Movieclip menuItem wird per Skript erst mehrfach auf die Bühne gebracht, während der Film läuft. Die dazu nötige Methode attachMovie() wird im folgenden Skript verwendet, wo dann auch deutlich wird, welchen Zweck der Exportname hat.

ActionScript (Frame 1 der Hauptzeitleiste)
// Anzahl der darzustellenden Menüpunkte
nAmountMenuItems = 5;

// Schleife, die bequem 5 Menüpunkte untereinander anzeigt
for (i=0; i<nAmountMenuItems; i++) {
mi = _root.attachMovie(„menuItem“, „menuItem_“+i, i);
mi._x = 50;
mi._y = i*(mi._height-1);
}

Zunächst wird in einer Variablen festgelegt, aus wie vielen Menüeinträgen die Navigation bestehen soll; hier sind es derer fünf.
Innerhalb einer FOR-Schleife wird bei jedem Schleifendurchlauf eine weitere Instanz des Movieclips, dessen Exportname menuItem lautet, an die Hauptzeitleiste gehängt, benannt und auf der Bühne positioniert.

Details zu FOR-Schleifen können <a href=“http://flash.christianscholz.com/articles/schleifen-sparen-zeit-und-muehe“>hier</a> nachgelesen werden.

Zwischenergebnis 1
Das Resultat sollten fünf sauber untereinander platzierte Menüeinträge sein, die allerdings alle den gleichen Text enthalten. Das wäre natürlich wenig vorteilhaft, wenn die Navigation irgendeinen Sinn haben soll. Daher werden ein paar Zeilen Code ergänzt, die dafür sorgen, dass jeder Eintrag einen eigenen Begriff anzeigt:

// Die Namen der Menüpunkte werden in einem Array abgelegt
arMenuHeadlines = new Array(„Home“, „Company“, „Products“, „Imprint“, „Contact“);

// Anzahl der darzustellenden Menüpunkte
nAmountMenuItems = 5;

// Schleife, die bequem 5 Menüpunkte untereinander anzeigt
for (i=0; i<nAmountMenuItems; i++) {
// Erzeugen der 5 Menüpunkte und Positionierung
mi = _root.attachMovie(„menuItem“, „menuItem_“+i, i);
mi._x = 50;
mi._y = i*(mi._height-1);

// Setze den Text im Textfeld
mi.tfMenuHead.text = arMenuHeadlines[i];
}

Ein Array speichert hier alle Texte, die auf den Menüeinträgen stehen sollen. Innerhalb der Schleife wird auf dieses Array zugegriffen und so jedem Eintrag ein anderes Arrayelement zugewiesen.

Details zu Arrays können <a href=“http://flash.christianscholz.com/articles/arrays“>hier</a> nachgelesen werden.

Er werde licht!
Als nächstes erhalten die Menüeinträge ein paar Benimm- und Verhaltensregeln. Dies geschieht ebenfalls in der Schleife, um Zeit und Platz zu sparen. Hier nur die neuen Zeilen Code; das vollständige Skript kann etwas weiter unten eingesehen werden.

mi.onRelease = function() {
this._alpha = 50;
};
mi.onRollOver = function() {
this._alpha = 50;
};
mi.onRollOut = function() {
this._alpha = 100;
};

Wird also ein Menüeintrag mit dem Mauszeiger überrollt oder geklickt, wird hier der ganze Movieclip auf halb-transparent gesetzt. Sicherlich nur für dieses Beispiel eine gute Idee. In der Regel würden sich andere Arten der Hervorhebung besser eignen.
Wird der Mauszeiger wieder weg bewegt, wird die Transparenz wieder aufgehoben.

Es ist erkennbar, dass auch der geklickte Eintrag wieder auf normale Darstellung zurückspringt, obwohl es ja wünschenswert und Ziel dieser Übung wäre, wenn er verwandelt bliebe. Um genau dies zu erreichen, wird jedem Menüeintrag eine Variable mit auf den Weg gegeben, die speichert, ob er sich in geklicktem/selektiertem Zustand befindet oder nicht: isSelected.

Ist nun ein Eintrag einmal angeklickt/selektiert worden, wird seine Variable isSelected auf den Wert true (wahr) gesetzt. Der für diesen Vorgang zuständige Skriptbereich ist der onRelease-Mouse-Handler. Hier wird (durch eine kleine Funktion namens restoreNavi()) auch geregelt, dass alle anderen Menüeinträge auf „normal“ und nicht-selektiert geschaltet werden.

An anderer Stelle (beim onRollOut-Mouse-Handler) wird der Zustand des durch die Interaktion der BenutzerInnen betroffenen Menüeintrags wiederum abgefragt und entsprechend verfahren – war der Eintrag, von dem der Mauszeiger gerade wegbewegt worden ist, nicht vormals selektiert, passiert das Übliche und der Movieclip wird wieder auf „normal“ geschaltet. War der Eintrag allerdings selektiert, bleibt er in seinem hervorgehobenen Zustand.

Finale und das vollständige ActionScript
Da die Menüeinträge alle ähnlich aussehen und sich ähnlich verhalten, bietet sich hier die Verwendung einer Schleife an. In anderen Szenarien mag dies nicht so naheliegend sein, aber die Technik – Speichern und Abfragen des Zustands – bleibt dieselbe.
// Die Namen der Menüpunkte werden in einem Array abgelegt
arMenuHeadlines = new Array(„Home“, „Company“, „Products“, „Imprint“, „Contact“);

// Anzahl der darzustellenden Menüpunkte
nAmountMenuItems = 5;

// Schleife, die bequem 5 Menüpunkte untereinander anzeigt
for (i=0; i<nAmountMenuItems; i++) {
// Erzeugen der 5 Menüpunkte und Positionierung
mi = _root.attachMovie(„menuItem“, „menuItem_“+i, i);
mi._x = 50;
mi._y = i*(mi._height-1);
// Jeder Menüpunkt wird auf „nicht-selektiert“ gesetzt
mi.isSelected = false;
// Setze den Text im Textfeld
mi.tfMenuHead.text = arMenuHeadlines[i];
// Ereignisse, auf die jeder Menüpunkt reagieren soll
mi.onRelease = function() {
restoreNavi();
this.isSelected = true;
this._alpha = 50;
};
mi.onRollOver = function() {
this._alpha = 50;
};
mi.onRollOut = function() {
if (this.isSelected == false) {
this._alpha = 100;
}
};
}

function restoreNavi() {
for (i=0; i<nAmountMenuItems; i++) {
_root[„menuItem_“+i]._alpha = 100;
_root[„menuItem_“+i].isSelected = false;
}
}

Veröffentlicht inAllgemein
Loading Facebook Comments ...

Ein Kommentar

  1. ein kleiner fehler ist Dir unterlaufen: es heisst: „mi.tfMenuItem.text = arMenuHeadlines[i];“ und nicht mi.tfMenuHead.text = arMenuHeadlines[i];

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert