Webmaster & Internet
Hier eine Vorschau:
http://www.p-creations.com/tutorials/winNavi/winNavi.swf
Zur Original-Ansicht
Die Ordnerstruktur sieht folgendermaßen aus:
Im images Ordner befindet sich der icons Ordner. In diesem kommen die Piktogramme, die später von Flash geladen werden.
Im sections Ordner kommen die swf-Dateien der einzelnen Sections.
Die gesamten Dateien werden in die Datei winNavi.swf geladen, welche sich im Hauptordner befindet. Der komplette Code befindet sich im ersten Frame in der Hauptzeitleiste.
I. Die MovieClips
Benötigt werden vier MovieClips:
naviBtn_mc: Prototype der Buttons des Menüs
buttom_mc: Untere Leiste des Menüs
top_mc: obere Leiste des Menüs
start_mc: Mc, zum anzeigen des Menüs
Der Aufbau von start_mc sieht folgendermaßen aus:
Im ersten Frame steht ein stop();. <b>"normal"]/b] ist die Standardanzeige. "over" erscheint, wenn mit der Maus über start_mc gerollt wird. Wird start_mc gedrückt, erscheint der Inhalt von "pressed". Der dazu benötigte Code wird im Abschnitt IV weiter unten gezeigt.
Der Aufbau von naviBtn_mc sieht so aus:
Im ersten Frame steht folgender Code:
PHP-Code:
stop();
this.label_txt.autoSize = true;
Das start_mc wird manuell an einer beliebigen Stelle auf der Bühne gestellt. Die restlichen drei Mcs werden dynamisch mit der Methode attachMovie geladen. Deshalb muss ihnen in der Bibliothek ein Verknüpfungsname gegeben werden:
1. Mit der rechten Maustaste auf das Element in der Bibliothek drücken.
2. Auf Verknüpfung... klicken
3. Häkchen bei Export für ActionScript und In erste Bild exportieren setzen.
4. Bei Bezeichner für die jeweiligen Mcs naviBtn_mc, buttom_mc oder top_mc schreiben.
5. Auf Ok klicken.
Jetzt sind die Mcs über ihren Verknüpfungsnamen mit ActionScript ansprechbar.
II. Die Textdatei sections.txt
Die Titel der einzelnen Links werden aus der externen Textdatei sections.txt, welche sich im Hauptordner befindet, geladen. Wenn der Titel des ersten Links z.B. Home ist, dann muss die Section-Datei Home.swf und das Icon Home.jpg heißen. So können die Buttons in einer for-Schleife mit Hilfe ihres Titels initialisiert werden.
Die Textdatei enthält nur eine Zeile mit den gewünschten Namen, welche durch ein Semikolon voneinander getrennt werden:
PHP-Code:
§ionName=BlueJ;Eclipse;NetBeans
Leerzeichen werden auch angezeigt.
Der Text muss in die Flash-Datei geladen werden:
PHP-Code:
// Array, welches die Titel enthalten wird.
var navi_arr = [];
txt = new LoadVars()
txt.onLoad = function (ok)
{
if (ok)
{
navi_arr = this.sectionName.split(";")
// Navi erstellen
createNavi();
navi_mc._visible = false;
}
};
txt.load("sections.txt");
Achtung:
Sonderzeichen, wie ß und Umlaute wie zB Ü Ä etc sollten vermieden werden, da es beim Laden der externen Dateien zu Problemen führt.
III. Container Mc
Um die externen swf-Dateien später laden zu können, wird ein Container Mc benötigt. Dieses wird dynamisch mit folgenden Zeilen erstellt:
PHP-Code:
this.createEmptyMovieClip("secCon_mc", 0);
PHP-Code:
_global.secConMc = this.secCon_mc;
Die Funktion createNavi erstellt die Navigation mit Hilfe der Informationen aus der sections.txt - Datei.
Als erstes wird ein leeres Mc erstellt, welches die Navigation enthalten wird:
PHP-Code:
function createNavi()
{
var tiefe = 1;
this.createEmptyMovieClip("navi_mc", tiefe++);
PHP-Code:
this.navi_mc._x = this.start_mc._x;
this.navi_mc._y = this.start_mc._y;
PHP-Code:
this.navi_mc.attachMovie("buttom_mc", "buttom_mc", tiefe++);
PHP-Code:
for(var i = 0; i < navi_arr.length; i++)
{
var tempMc = this.navi_mc.attachMovie("naviBtn_mc", "btn"+i, tiefe++);
tempLabel = navi_arr[i];
// Titel als Mc Eigenschaft speichern
tempMc.label = tempLabel;
// Titel des Links anzeigen
tempMc.label_txt.text = tempLabel;
PHP-Code:
tempMc.con_mc.loadMovie("images/icons/" + tempLabel + ".jpg");
tempMc._y = - ( (i) * tempMc._height + this.navi_mc.buttom_mc._height);
PHP-Code:
tempMc.con_mc.loadMovie("images/icons/Eclipse.jpg");
Als letztes werden in der for-Schleife folgende 3 Methoden den Buttons übergeben:
Für das Drüber bzw Wegfahren der Maus.
PHP-Code:
tempMc.onRollOver = function()
{
this.gotoAndStop("over");
};
tempMc.onRollOut = tempMc.onReleaseOutside = function()
{
this.gotoAndStop("normal");
};
PHP-Code:
tempMc.onRelease = function()
{
secConMc.loadMovie("sections/" + this.label + ".swf");
this._parent._parent.start_mc.pressed = false;
this._parent._parent.start_mc.gotoAndPlay("normal");
this._parent._visible = false;
};
} // for
Jetzt muss nur noch top_mc attached werden und die Funktion createNavi ist auch vollständig:
PHP-Code:
tempTop = this.navi_mc.attachMovie("top_mc", "top_mc", tiefe++);
tempTop._y = tempMc._y - tempMc._height;
} // createNavi
PHP-Code:
// Start-Button
start_mc.onPress = function()
{
this.pressed = !this.pressed;
this._parent.navi_mc._visible = this.pressed;
if(this.pressed)
this.gotoAndStop("pressed");
else
this.gotoAndStop("over");
};
start_mc.onRollOver = function()
{
if(!this.pressed)
this.gotoAndStop("over");
};
start_mc.onRollOut = function()
{
if(!this.pressed)
this.gotoAndStop("normal");
};
Jetzt ist das Windows-Menü fertig!
Die benötigten Dateien könnt ihr hier runterladen.
Download (45 KB)
Viel Spaß damit!
Greetz
P. Nazari (p-flash)
Kommentar schreiben
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
Artikel bewerten