Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Sonstiges Tutorial: Framework T2



Ranking: +4   Kommentare: 0   |   Bewertung: Keine Berechtigung!  

Zitat :

So, die Fortsetzung für das Framework ist fertig. Da dies eine sau anstrengende und lange Arbeit ist, wird T3 erst Mitte nächsten Monat kommen.


Framework für Webseiten und Spiele


Allgemeines

Der erste Kurs ist unter http://tutorials.designnation.de/workshop/Framework-T1 zu finden.

T2. Erstellung der GUI

Grafik *
ActionScript 2.0 *

Wie in der vorherigen Anleitung angekündigt, wollen wir Grafik und Programmierung voneinander getrennt halten. Um dies zu realisieren benötigen wir einen weiteren Flashfilm. Als erstes erstellen wir auch hier neue Ebenen.
  • + Action

  • Progressbar

  • Blocker



Alle weiteren Ebenen, die Grafiken beinhalten und angelegt werden, gehören unter die "Blocker" Ebene.

Nun kopieren wir jeweils die Grafiken aus unserem Hauptfilm "main.fla" und fügen diese, auf die vorhin angelegten Ebenen ein (Strg+Schift+V). Im ersten Frame der Ebene "+ Action" schreiben wir lediglich nur eine Stop-Anweisung. Anschließend speichern wir den Film unter "gui.fla" ab.
T2 Bild 1
T2 Bild 1


Nun werden wir schon mal einen Platzhalter für das Hauptmenü erstellen und fangen wieder mit zwei neuen Ebenen an.
  • + Label

  • MainMenu


T2 Bild 2
T2 Bild 2

Da wir die Ebenen "Progressbar" und "Blocker" nicht mehr verändern wollen und sie in der Übersicht nur stören, werden wir diese sperren und unsichtbar machen. Die Ebene "+ Label" bekommt alle Sprungmarken. Jetzt erstellen wir zunächst zwei Keyframes. Wichtig ist, dass die Ebene "Blocker" und "Progressbar" immer die Gesamtlänge haben und immer zusammenhängend sind.
T2 Bild 3
T2 Bild 3

Im zweiten Frame von "+ Label" weisen wir dem Keyframe den Namen "MainMenu" zu und im zweiten Frame von "MainMenu" erstellen wir ein Textfeld. Als Text schreiben wir zum Beispiel Hauptmenü und speichern das Ganze unter dem Namen "gui.fla" ab.

Weiter geht es mit unserem Hauptfilm "main.fla". Auch hier benötigen wir einen neue Ebene "+ Label" und einige Frames, wie aus der folgenden Grafik ersichtlich wird.
T2 Bild 4
T2 Bild 4

Den letzten Frame von "+ Label" nennen wir ebenfalls "MainMenu". Im ersten Frame von "+ Action" erweitern wir den Programmcode um:

Code:


//MovieClip Container

createEmptyMovieClip("GUI", 99); // Conteiner für gui.swf



Im vierten Frame beginnen wir mit dem Laden des GUI-Filmes.

Code:


loadMovie("gui.swf", GUI); // Grafikfilm Laden



Im sechsten Frame überprüfen wir wieder den Ladestatus des Filmes und lassen ihn gleichzeitig ausblenden, um das Aufblitzen der Grafik zu verhindern.

Code:


if(!setProgressbar(GUI.getBytesTotal(), GUI.getBytesLoaded(), "Lade GUI") || GUI.getBytesLoaded() < BYTES_MIN) {

    GUI._visible = false;

    prevFrame();

    play();

}



Ab jetzt benötigen wir "blocker" und "progressbar" vom Hauptfilm nicht mehr und schreiben die Referenzen in Frame sieben um und springen dann zu "MainMenu" im Hauptfilm.

Code:


_global.progressbar = GUI.progressbar;

GUI.progressbar._visible = false;

_global.blocker = GUI.blocker;

GUI.blocker._visible = false;

gotoAndStop("MainMenu");



An der Stelle von "MainMenu" lassen wir nun den Inhalt von "GUI" anzeigen.

Code:


GUI.gotoAndStop("MainMenu");

GUI._visible = true;



Bevor ich nun diesen Teil des Tutorials abschließe, möchte ich noch ein Beispiel geben, wie wir schon jetzt das Framework nutzen könnten.

Öffnen wir also zunächst die "gui.swf" und erweitern den Film um zwei Frames. Beide Frames bekommen eine Sprungmarke auf der Ebene "+ Label".
  • Credits

  • Help



Wir dürfen nicht vergessen, den Frame "Blocker" und "Progressbar" bis zum Ende auszudehnen. Wenn wir nachträglich Inhalte nachladen wollen, könnten wir sonst die MovieClips nicht mehr ansprechen. Auf der Ebene "MainMenu" können wir die Keyframes mit F6 erstellen und ändern den Text für die Überschriften. Das nächste Bild zeigt leere Keyframes, dort müssten wir dann die Überschriften neu erstellen oder kopieren müssen.
T2 Bild 5
T2 Bild 5

Im nächsten Schritt nennen wir noch die Ebene "MainMenu" um nach "Content" und erstellen eine "Buttons" Ebene. Somit haben wir immer einen schnellen Überblick, auf welchen Ebenen sich die Elemente befinden.
T2 Bild 6
T2 Bild 6

Jetzt erstellen wir die Buttons. Hierzu ziehen erstellen wir ein Rechteck auf der Ebene "Buttons" an der Sprungmarke "MainMenu". Aus dem Rechteck erstellen wir ein Button (F8), nennen ihn "btn_menu" und arbeiten in diesem weiter. Dort erstellen wir eine Ebene und nennen die andere um.
  • Text

  • Background



Auf der Ebene "Text" erstellen wir ein dynamisches Textfeld mit dem Inhalt "ButtonLabel". Dieses Textfeld darf nicht markierbar sein, da es sonst zu unschönen Effekten kommt. Damit wir den Text über ActionScript ändern können, müssen wir noch in das Feld "Var" "txt" eintragen. Anschließend erstellen wir aus dem Textfeld ein MovieClip (F8), nennen ihn "btn_menuLabel" und erstellen ein weiteren Keyframe.
T2 Bild 7
T2 Bild 7

Um den Overeffekt auch optisch zu Gestallten ändern wir dort die Farbe des Rechteckes und Färben den MovieClip auf der Ebene "Text" ein.
T2 Bild 8
T2 Bild 8

Nun müssen wir den MovieClip "btn_menuLabel" vorbereiten. Also wechseln wir dort hin und erstellen in ihm eine neue Ebene "+ Action", weil wir an dieser Stelle ein Eingreifen mit ActionScript nicht verhindern können. Wir versuchen aber an solchen Stellen so wenig wie möglich mit ActionScript zu arbeiten. Die Ebene mit dem Textfeld nennen wir "Text".
  • + Action

  • Text



T2 Bild 9
T2 Bild 9

Im ersten Frame von "+ Acttion" schreiben wir eine Zeile Code.

Code:


var txt:String = this._parent.txt;



So können wir im Hauptfilm dem Button einen Text geben. Der Button kümmert sich selbst um die Weitergabe an das Textfeld.

Jetzt haben wir unseren Button fertig und gehen wieder zur Hauptbühne zurück (nicht den Hauptfilm). Auf Grund unserer guten Vorarbeit, brauchen wir den vorhandenen Button auf der Bühne nur zu kopieren. Den beiden Buttons weisen wir jeweils einen Namen auf der Bühne zu: "creditsBtn" und "helpBtn".
T2 Bild 10
T2 Bild 10

Damit wir auch ein wenig Inhalt haben, werden wir vorläufig ein statisches Textfeld auf der Ebene "Content", an der Position "Credits" platzieren. Um wieder zum Hauptmenü zu gelangen, ziehen wir noch eine Instanz vom "btn_menu" aus der Bibliothek auf die Bühne und nennen diese "mainMenuBtn". Der Button sollte auf die Ebene "Buttons" gelegt werden.
T2 Bild 11
T2 Bild 11

Dem Frame "Help" wollen wir nun auch etwas Inhalt geben. Den Button "mainMenuBtn" können wir einfach aus Frame "Credits" kopieren. Auf der Ebene "Content" erstellen wir wiederum ein statisches Textfeld, mit irgendeinem Inhalt. Da wir einen mehrseitigen Hilfetext haben wollen, erstellen wir daraus ein MovieClip und nennen in "c_help" und auf der Bühne "helpClip". In dem MovieClip "c_help" erstellen wir die Ebenen wieder nach dem alten Schema und produzieren ein paar Keyframes. Zu beachten ist, dass sich die Ebene "Buttons" durchgehend bis zum Ende erstreckt. Um später durch die Hilfe blättern zu können, benötigen wir noch einen Button und nennen ihn in der Bibliothek "btn_arrow" und auf der Bühne "prevBtn". Diesen kopieren wir einmal, rotieren ihn um 180° und nennen ihn "nextBtn".
T2 Bild 12
T2 Bild 12


Jetzt fehlt uns nur noch die Programmierung und arbeiten daher im Hauptfilm "main.fla" weiter. Zunächst benötigen wir eine Funktion für unsere Buttons, damit uns spätere Schreibarbeit erspart bleibt. Also gehen wir an Frame eins von "+ Define" und schreiben dort folgenden Code hinein. Der vorhandene Code wird niemals überschrieben, es sei denn, es wird ausdrücklich erwähnt.

Code:


/* setButton

 * Erstellt die eigenschaften des Buttons

 * @param name            Beschriftung des Buttons

 * @param action        Sprungmarke

 * @param targetClip    Ziel Clip

 * @param clip            Der Button

 */

function setButton(name:String, action:String, targetClip:MovieClip, clip:MovieClip):Void {

    clip.txt = name; // Dem Button seinen Beschriftungsnamen zuweisen

    clip.action = action; // Sprungmarke zuweisen

    clip.targetClip = targetClip; // MovieClip zuweisen

    clip.onRelease = function() {

        this.targetClip.gotoAndStop(this.action);

    }

}




Diese Funktion bauen wir in den nächsten Anleitungen weiter aus. In diesem Stadium wird dem Button nur eine Sprungmarke gegeben, der auf dem gegebenen MovieClip "targetClip" wirkt.

Jetzt bekommt auch der Hauptfilm neue Keyframes wie in der "gui.fla" mit den Sprungmarken "Credits" und "Help".
T2 Bild 13
T2 Bild 13

Die Ebene "+ Define" brauchen wir vorerst nicht zu verlängern, da Funktionen nach der Definition definiert bleiben.

Jetzt arbeiten wir auf der Ebene "+ Action" weiter und gehen zur Sprungmarke "MainMenu". Dort ersetzen wir den ganzen Code mit dem folgenden, um die Buttons zum leben zu erwecken.

Code:


GUI.gotoAndStop("MainMenu");

GUI._visible = true;



setButton("Credits", "Credits", this, GUI.creditsBtn);

setButton("Hilfe", "Help", this, GUI.helpBtn);



stop();



Es ist sehr wichtig, die "setButton" Funktion nach dem Framewechsel von "GUI" aufzurufen, da die Buttons erst nach dem Wechsel bekannt sind. Hier übergeben wir "this" (der Hauptfilm) und nicht "GUI", weil wir im Hauptfilm noch weitere Programmierarbeiten haben. Der tatsächliche Framewechsel für die "GUI" findet im Hauptfilm an den entsprechenden Sprungmarken statt.

Gehen wir nun zur Sprungmarke "Credits" und schreiben dort den Code:

Code:


GUI.gotoAndStop("Credits");



setButton("Hauptmenü", "MainMenu", this, GUI.mainMenuBtn);



stop();



Hier findet nun der tatsächliche Framewechsel der "GUI" statt und der Button zum Hauptmenü wird gesetzt.

An der Stelle "Help" schreiben wir:

Code:


GUI.gotoAndStop("Help");

GUI.helpClip.gotoAndStop(1); // Hilfe an Position 1 anhalten



setButton("Hauptmenü", "MainMenu", this, GUI.mainMenuBtn);



GUI.helpClip.prevBtn.onRelease = function() {

    if(this._parent._currentframe <= 1) 

        this._parent.gotoAndStop(this._parent._totalframes);

    else

        this._parent.prevFrame();

}



GUI.helpClip.nextBtn.onRelease = function() {

    if(this._parent._currentframe >= this._parent._totalframes)

        this._parent.gotoAndStop(1);

    else

        this._parent.nextFrame();

}



stop();



Die vor und zurück Buttons bekommen jeweils eine eigene Funktion, die das Blättern übernehmen. Die Funktionen überprüfen ob der erste oder letzte Frame aktiviert ist und springen dann gegebenenfalls an den Anfang oder an das Ende. "this._parent" könnte man sich vorstellen als "nextBtn.helpClip".

Hier können Sie das Material runterladen

Im nächsten Tutorial werden wir eine Funkton zum laden und senden von Variablen behandeln und eine System GUI erstellen.

Veröffentlicht von: KingKhong
Veröffentlicht am: 9 Jan. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Buttons Content Flash Framework GUI Spiele Webseite


Themenverwandte Tutorials


Kommentar(e) (0)


Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder