Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

Sonstiges Tutorial: Framework T1



Ranking: +5   Kommentare: 2   |   Bewertung: Keine Berechtigung!  

Zitat :

An dieser Stelle möchte ich euch Schritt für Schritt zeigen, wie man ein Framework für Flashseiten oder Spiele erstellen kann. Im laufe der Zeit werde ich nach und nach die Tutorials veröffentlichen. Gerne würde von euch wissen, ob das Tutorial interessant ist, oder ob ich mir dies sparen kann.



Framework für Webseiten und Spiele


Allgemeines:

Für die folgenden Turorials werden Grundkenntnisse in der Programmierung, so wie der Umgang mit Flasch vorausgesetzt. Den Schwierigkeitsgrad versuche ich mit Sternen zu symbolisieren. Das Ziel dieser Anleitung wird am Ende ein Framework für Webseiten oder auch Spiele sein.

T1. Erstellung des Hauptfilmes mit Ladebalken
Grafik *
ActionScript 2.0 *

Als erstes beginnen wir mit der Erstellung von vier Ebenen. Diese werden wie in der Aufzählung benannt und sollten auch die gleiche Reihenfolge haben.
  • + Define

  • + Action

  • Progessbar

  • Blocker



Die Ebenen dienen später der Übersicht. "+Define" und "+ Action" werden wir ausschließlich nur für ActionScript benutzen, wobei "+ Define" nur für Funktionsdefinitionen benutzt wird. "+ Action" ist unsere Ebene für die restliche Programmierung. Die Ebenen "Progressbar" und "Blocker" werden unsere grafischen Elemente beinhalten.
Bild 1
Bild 1

Im nächsten Schritt fangen wir mit der Grafik für den Ladebalken an und arbeiten auf der Ebene "Progressbar". Hierzu wählen wir zunächst die dafür vorgesehene Ebene aus und ziehen im ersten Frame ein Rechteck auf. Anschließend konvertieren wir das Rechteck zu einem MovieClip (Strg+F8). Im Feld Namen schreiben wir "c_progressbar" und wählen eine zentrierte Ausrichtung (Registration). Alle MovieClips werden ab nun, in der Bibliothek mit einem "c_" beginnen.
Bild 2
Bild 2

Damit der MovieClip auch mit ActionScript angesprochen werden kann, benötigt dieser noch einen Namen auf der Bühne. Wir nennen ihn "progressbar".
Bild 3
Bild 3

Mit einem Doppelklick auf dem MovieClip arbeiten wir im Clip "c_progressbar" weiter. Hier werden wiederum mehrere Ebenen benötigt. Die erste Ebene nennen wir einfach nach "Frame" um, da dort das Rechteck liegen sollte.
  • Frame

  • Text

  • Bar

  • Track



Nun schneiden wir nur die Füllung aus dem Rechteck aus, sperren die Ebene "Frame" und fügen die Füllung mit Strg+Schift+V auf die Ebene "Bar" ein. Die Tastenkombination bewirkt, dass die Füllung an der gleichen Position eingefügt wird. Aus der Füllung erstellen wir wieder ein MovieClip. Die Ausrichtung ist diesmal oben links und der Name ist "c_bar". Auf der Bühne bekommt er den Namen "bar". Dieser MovieClip wird der Balken für den Fortschritt in Prozent darstellen.
Bild 4
Bild 4

Jetzt benötigen wir einen weiteren MoviClip, der die maximale Länge des Fortschrittsbalken und den Hintergrund bestimmt. Wir nehmen mit Absicht nicht die eigene Länge des gesamten MovieClips "progressbar" oder der "bar", da es sonst zu einer nicht korrekten Anzeige führen kann.
Um den MovieClip zu erstellen gibt es verschiedene Möglichkeiten. Wir werden hier den MovieClip in der Bibliothek duplizieren. Hierzu kopieren wir mit Strg+C den MovieClip "bar" auf der Bühne und fügen ihn an der selben Position auf der Ebene "Track" ein und nennen ihn auf der Bühne "track". Da wir dem Rechteck von "track" eine andre Farbe geben wollen benötigen wir auch in der Bibliothek einen eigenen MovieClip. Dazu klicken wir einmal auf das "Swap", welches sich neben dem Eingabefeld für den Instanznamen befindet. Nun erscheint ein neues Fenster mit unseren bisherigen Symbolen. In diesem Fenster drücken wir auf das Symbol unten links am Fenster und nennen den neuen MovieClip "c_track". Ab jetzt können wir dem Rechteck in "c_track" eine andere Farbe geben.
Bild 5
Bild 5

Zusätzlich wollen wir noch eine Textfeld auf dem Ladebalken haben. Das Feld kann zum Beispiel anzeigen, was momentan geladen wird, oder wie viel Prozent verstrichen sind. Also erstellen wir ein dynameisches Textfeld auf der Ebene "Text", welches genau in den Ladebalken passt. Diesem Textfeld geben wir noch als Var den Namen "txt", der Rest kann nach eigenem Geschmack eingestellt werden. Wenn ihr das Textfeld nicht klein genug bekommt müsst ihr den Schriftgrad kleiner stellen.
Bild 6
Bild 6

Als letztes Grafikelement benötigen wir noch den Blocker. Der Blocker soll die ganze Bühne inaktive erscheinen lassen. Hierzu gehen wir wieder auf die Hauptbühne und aktivieren die Ebene "Blocker". Dort erstellen wir ein schwarzes Rechteck ohne Kontur. Die Größe wird später mit ActionScript an die Bühne angepasst. Dieses Rechteck konvertieren wir in ein Button, nennen ihn "c_blocker" und nehmen als Ausrichtung oben links. Auf der Bühne bekommt er den Namen "blocker". Normalerweise werden wir Buttons alle mit "btn_" vorweg schreiben, in diesem Fall jedoch nicht. Der Blocker soll das Durchklicken auf der Bühne verhindern und dies geht nur mit einem Button. Die optischen Eigenschaften des Buttons werden wir mit ActionScript abschalten.
Bild 7
Bild 7

Nun bereiten wir die Frames für den ActionScript-Teil vor. Auf allen Ebenen erstellen wir fünf Frames. Die Ebene "+ Action" bekommt an Position drei und fünf ein eigenen Key-Frame (F6). Im letzen Key-Frame steht nur ein "stop();". Dies ist eine Anweisung und steht daher in der Ebene "+ Action". Das Script-Fenster kann mit F9 geöffnet oder geschlossen werden. Key-Frame eins und drei werden wir später behandeln.
Bild 8
Bild 8

Wir fangen jetzt mit der Funktion für den Ladebalken an. Wir erinnern uns, dass wir die Funktionen in die Ebene "+ Defines" schreiben wollen und aktivieren daher den ersten Frame auf "+ Define". Die Funktion soll drei Werte erwarten, die Gesamtzahl die zu laden ist, die momentan geladene Anzahl und einen optionalen Text. Wird kein Text angegeben, so wird die Zahl in Prozent ausgegeben. Ihr könnt dem Textfeld aber auch ein leeren String zuweisen.

Ich werde in den Tutorials nicht alle Einzelheiten beschreiben, sondern nur diese, die mir Wichtig erscheinen.

Code:


/* setProgressbar

 * Aktiviert und setzt den Ladebalken. _global.progressbar muß auf den Ladebalken gesetzt sein.

 * @param total        Totale Bytes

 * @param loaded    Geladene Bytes

 * @param info        Informationstext

 * @return            Boolscher Wert. True wenn 100% geladen wurden.

 */

function setProgressbar(total:Number, loaded:Number, info:String):Boolean {

    var pb:MovieClip = _global.progressbar; // Referenz des MovieClips 

    var bl:MovieClip = _global.blocker; // Referenz des Blockers

    

    pb._visible = true; // Progressbar sichtbar machen

    

    // Werte für den Blocker setzen

    bl._visible = true;

    bl.useHandCursor = false; // Verändern des Cursors verhindern

    bl.tabEnabled = false; // Das durchschalten mit Tab verhindern

    bl._x = 0; // X Position 

    bl._y = 0; // Y Position

    bl._width = Stage.width; // Breite

    bl._height = Stage.height; // Höhe

    bl._alpha = 50;

    

    pb._visible = true; // Progressbar sichtbar machen

    



    pb.bar._width = pb.track._width*(loaded/total); // Bar setzen

    

    if(info == undefined) // Prozentzahl ausgeben, falls info nicht übergeben wurde

        pb.txt = Math.round((loaded/total)*100)+"%";

    else

        pb.txt = info;

    

    if(loaded >= total) { // Wenn alles gelaen wurde 

        bl._visible = false; // Blocker deaktivieren

        pb._visible = false; // Progressbar deaktivieren

        return true; // true zurückgeben

    }

    

    return false;

}


Weshalb wir den Blocker und die Progressbar global setzen werden wir in den folgenden Tutorials feststellen, da wir Code und Design trennen werden. Dem Blocker werden wir, wie versprochen, ein paar Eigenschafen zuweisen. Wichtig ist es, die Eigenschaften eines Buttons zu entfernen. Das aktivieren mit Tab und der Fingerzeiger. Damit sich der Blocker über die gesamte Bühne erstreckt, setzen wir ihn an die Position 0/0 und geben ihm die Bühnenmaße. Damit die Bühne inaktiv wirkt habe ich noch den alpha auf 50% gesetzt. Der Blocker und der Ladebalken wird automatisch deaktiviert, sobald alles geladen wurde.

Im ersten Frame von "+ Action" werden wir jetzt einige Werte setzen.

Code:


_global.BYTES_MIN = 4;



_global.blocker = _root.blocker;

_global.blocker._visible = false;



_global.progressbar = _root.progressbar;

_global.progressbar._visible = false;



"BYTES_MIN" benötigen wir später als Sicherheit beim Laden eines Flashfilms, damit dieser korrekt geladen wird. Dann weisen wir den Blocker und den Ladebalken unseren Variablen zu und machen diese unsichtbar.

Im nächsten Schritt kümmern wir uns um das Laden des Hauptfilms im Frame drei.

Code:


if(!setProgressbar(_root.getBytesTotal(), _root.getBytesLoaded()) || _root.getBytesLoaded() < BYTES_MIN) {

    prevFrame();

    play();

}



Der Film wird erst weiterspielen, sobald der Hauptfilm vollständig geladen wurde, dies überprüfen wir mit dem Rückgabewert der Funktion "setProgressbar".

Zum Schluss speichern wir den ganzen Film unter dem Namen "main.fla" ab, da dies unser Hauptfilm ist.

Hier können Sie das Material runterladen

Im nächsten Tuorial werden wir den Film für die GUI erstellen.

Veröffentlicht von: KingKhong
Veröffentlicht am: 8 Jan. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: Flash Framework Ladebalken Progressbar Spriele Webseite


Themenverwandte Tutorials


Kommentar(e) (2)


Möv sagt:

jap..super tut danke. würde mich freuen wenn du es weiter machst^^

9 Jan. 2008 13:17:17 • Antworten


FredPhunk sagt:

Super ! Endlich mal was für Flash. Mir gefällt´s

8 Jan. 2008 18:55:36 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


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