Sonntag, 12. Februar 2012

entwickler.com Magazine Konferenzen Entwickler Akademie Entwickler-Forum Jobbörse Bücher
Software & Support Verlag




 
CREATE OR DIE!!
 
April 2006
aus MX Magazin Ausgabe: 7.2005
Preloader-Komponente für Flash MX 2004
In wenigen Minuten zum eigenen Preloader: Der vorliegende Workshop führt Sie Schritt für Schritt durch die einzelnen Bestandteile der Komponente. Im Ergebnis erhalten Sie einen kompakten und effizienten Preloader, der ohne größeren Schnickschnack auskommt.
Matthias & Caroline Kannengiesser

Die Problematik ist Ihnen sicher bekannt: Man realisiert eine Flash-Produktion, fügt die von Macromedia mitgelieferte Preloader-Komponente ein, und siehe da: Der Film ist rund 26 Kbytes größer. Was sind schon 26 Kbytes? Sicher nicht viel für eine Standleitung oder einen DSL-Anschluss, aber für ISDN- und Modem-Besitzer können diese zusätzlichen Bytes die ausschlaggebenden Sekunden sein, um eine Entscheidung zu treffen - warten oder weitersurfen!


Grundlagen des Preloader
In Flash stellen Komponenten grundsätzlich nichts anderes dar als MovieClips, die über spezielle Fähigkeiten verfügen. Seit Flash MX 2004 können diese auch in kompilierter Form als SWC-Dateien vertrieben werden. Beginnen wir nun damit, den Preloader zu realisieren. Um die Basis für den Preloader zu schaffen, starten Sie zunächst Flash MX 2004 und legen einen neuen Flash-Film mit dem Namen preloader.fla an. Im nächsten Schritt erzeugen Sie ein MovieClip-Symbol und geben diesem den Namen Preloader.


In Aktion: Preloader MovieClip und die Aktionsebene mit dem notwendigen Skript.


Transformation: Umwandlung der Preloader-MovieClip in die Preloader-Komponente.

Preloader - ActionScript
Um die Funktionalität der Komponente zu gewährleisten, benötigen Sie die Action-Script-Klasse MovieClipLoader. Erzeugen Sie eine neue Ebene im MovieClip-Preloader und geben Sie dieser den Namen Aktionen. Legen Sie dann im ersten Schlüsselbild der Ebene Aktionen das Skript aus Listing 1 ab. Sie können sich allerdings auch einfach die fertige Applikation auf der CD ansehen.
Mithilfe der ActionScript-2.0-Syntax wird zuerst eine Variable mit dem Bezeichner mc_loader erzeugt, die eine Instanz der MovieClipLoader-Klasse ist. Als Nächstes erzeugen Sie ein Listener-Objekt (mc_listener), das die einzelnen Movie-ClipLoader-Methoden verwaltet. Es stellt sich die Frage, warum Sie ein solches Listener-Objekt überhaupt einsetzen sollen. Der Grund ist einfach: Ein Listener-Objekt ermöglicht, dass auch andere Objekte auf denselben Code zurückgreifen können. Dies ist zwar nicht zwingend notwendig, um einen Preloader zu realisieren, aber sicherlich eine gute Übung, um sich mit flexiblen und modularen Skripten auseinander zu setzen.


Mehrfachnutzen: SWC-Datei exportieren wählen und die vorkompilierte Komponente ins Komponentenverzeichnis


Im nächsten Schritt werden dem Listener-Objekt die auszuführenden Methoden zugewiesen. Sollte während des Ladevorgangs ein Fehler auftreten, wird die MovieClipLoader-Methode onLoad-Error() ausgelöst, deren grundsätzliche Aufgabe darin besteht, einen Fehler auszugeben. Im vorliegenden Fall wird die Fehlermeldung Fehler im Textfeld ausgabe_txt ausgegeben.
Beim eigentlichen Ladevorgang wird dem Listener-Objekt die MovieClipLoader-Methode onLoadProgress() übergeben. Sie ist in der Lage, die benötigten Daten für den Preloader zu verschaffen und gibt die Anzahl der bereits übertragenen und die Anzahl der insgesamt zu übertragenden Bytes aus. Damit das Textfeld mehr als nur eine Zahl enthält, wird die Ausgabe
formatiert.

Die MovieClipLoader-Methode onLoad-Complete() wird ausgelöst, sobald der Ladevorgang
erfolgreich beendet wurde. Im Preloader hat sie die Aufgabe, die nicht mehr benötigten Bestandteile wie das Textfeld, die Textformatierung, den Listener und die Variable zu entfernen.
Die MovieClipLoader-Methode add-Listener(), die auch zahlreichen anderen Flash-Klassen zur Verfügung steht, stellt sicher, dass die Instanz der MovieClipLoader-Klasse (mc_loader) auf sämtliche dem Listener-Objekt (mc_listener) zugewiesenen Methoden zugreifen kann.

Es folgt die dynamische Generierung des Ausgabe-Textfeldes (ausgabe_txt) und die Textformatierung durch die Instanz der TextFormat-Klasse (ausgabe_formatierung).
Den wohl wichtigsten Schritt stellt der Aufruf der MovieClipLoader-Methode loadClip() dar. Sie versetzt uns in die Lage, einen Flash-Film (.swf) oder eine JPEGDatei (.jpg) in Echtzeit an ein gewünschtes Ziel zu laden. In diesem Fall werden der Methode hierfür die beiden bisher undefinierten Variablen datei und zielclip übergeben. Anstatt diese Werte direkt im MovieClip unterzubringen, sollten Sie diese als Komponentenparameter festlegen, damit der Preloader-MovieClip auf die benötigten Werte zugreifen kann.


Ablauf: Komponenten werden innerhalb des Komponenten-Bedienfeldes aktualisiert.


Klein und kompakt: Im Testlauf zeigt die Komponente ihre wahre Größe.

onLoadProgress()-Methode
Die MovieClipLoader-Methode on-LoadProgress() wird lediglich dann vom Flash Player ausgeführt, wenn die betroffene Datei aus dem Web stammt und über das HTTP-Protokoll übertragen wird.

Macromedia ProgressBar
Sinnvoller Einsatz von Macromedias Preloader: Die vorliegende Preloader-Komponente beschränkt sich auf die wesentlichen Aufgaben eines so genannten Preloader. Die Progress-Bar-Komponente von Macromedia stellt einen Bestandteil eines größeren Framework dar und ist in der Lage, mit den zahlreichen anderen vordefinierten Macromedia-Komponenten zu kommunizieren und Daten auszutauschen. Sie sollten daher die ProgressBar nicht grundsätzlich außen vor lassen.

Pfad zu den Komponentenverzeichnissen

Windows \PROGRAM FILES\MACROMEDIA\FLASH MX 2004\SPRACHE\
FIRST RUN\COMPONENTS
Mac OS X HD/APPLICATIONS/MACROMEDIA FLASH MX 2004/
FIRST RUN/COMPONENTS

Listing 1

// MovieClipLoader-Klasse
var mc_loader:MovieClipLoader =
new MovieClipLoader();
var mc_listener:Object =
new Object();
// Listener (für
// Fehlermeldungen - Ausgabe)
mc_listener.onLoadError =
function(mc)
{
ausgabe_txt.text = Fehler;
};
// Listener (für den
// Ladeprozess - Ausgabe)
mc_listener.onLoadProgress =
function(mc, loadedBytes,
totalBytes)
{
ausgabe_txt.text = Loading:
+ Math.round(loadedBytes/
totalBytes*100)+%;
};
// Listener (für Ladevorgang
// beendet - Aufräumen)
mc_listener.onLoadComplete =
function(mc)
{
ausgabe_txt.removeTextField();
delete ausgabe_formatierung;
mc_loader.removeListener
(mc_listener);
delete mc_listener;
delete mc_loader;
};
// Listener (für Ladevorgang
// hinzufügen)
mc_loader.addListener
(mc_listener);
// Ausgabe
this.createTextField
(ausgabe_txt,2,0,0,100,18);
this.ausgabe_txt.border = true;
this.ausgabe_txt.background =
true;
// Formatierung
var ausgabe_formatierung =
new TextFormat();
ausgabe_formatierung.font =
Arial;
this.ausgabe_txt.
setNewTextFormat
(ausgabe_formatierung);
// Inhalt Behälter
this.createEmptyMovieClip
(zielclip,1)
mc_loader.loadClip
(pfad, zielclip);

Komponentendefinition und Komponentenparameter
Abschließend müssen Sie nun den MovieClip als Komponente definieren und anschließend als SWC-Datei exportieren.
  1. Öffnen Sie dazu die Bibliothek des Preloader-Films, klicken Sie mit der rechten Maustaste auf den Preloader MOVIECLIP und wählen Sie die Option KOMPONENTENDEFINITION.
  2. Fügen Sie dann mithilfe des +-Symbols die Komponentenparameter ein. In das Namensfeld tragen Sie Pfad und Datei und in das Variablenfeld den Variablenbezeichner ein. Legen Sie einen Ausgangswert (testbild.jpg) und den Datentyp (String) fest.
  3. Fügen Sie einen weiteren Parameter hinzu und übergeben sie die folgenden Angaben: Ziel, zielclip, bild,String.
  4. Aktivieren Sie anschließend die Checkbox für die Optionen Anzeige im Komponenten-Bedienfeld.
  5. Bestätigen Sie mit OK. Die beiden Parameter lassen sich anschließend über das Eigenschafts-Bedienfeld mit den gewünschten Werten belegen.

Erzeugen der SWC-Datei
Um die Komponente nun als vorkompilierte Komponente (.swc) zu veröffentlichen, gehen Sie wie folgt vor:
  1. In der Bibliothek klicken Sie mit der rechten Maustaste auf das Preloader- Komponentensymbol und wählen die Option SWC-DATEI EXPORTIEREN ...
  2. Die Komponente erhält den Namen Mini_Preloader.swc und wird im Nutzerverzeichnis für die Komponenten abgelegt.
  3. Bestätigen Sie im Anschluss daran mit OK.

Abschließend sollten Sie das Komponenten-Bedienfeld aufrufen und die Option Neu Laden wählen. Ihre Komponente steht Ihnen von da an im Verweis STANDARDKOMPONENTEN zur Verfügung
und ist bereit für den Einsatz.

Testlauf
Die Komponente ist fertig. Wir wünschen Ihnen viel Spaß damit. Sie sollten Ihr Meisterstück abschließend auf seine Funktionstüchtigkeit hin überprüfen.
  1. Öffnen Sie einen neuen Flash-Film und speichern Sie diesen mit dem Namen Test_Film.
  2. Legen Sie anschließend die Mini_Preloader-Komponente aus dem Komponenten-Bedienfeld auf die Bühne.
  3. Im Eigenschafts-Bedienfeld müssen noch die beiden Parameter Pfad samt Dateiname und die Bezeichnung für den Ziel-MovieClip definiert werden.
  4. Führen Sie einen Probelauf durch!

Matthias Kannengiesser ist Diplom-Informatiker und Projektmanager. Er berät seit mehreren Jahren namhafte Unternehmen und ist unter anderem als Fachautor, freier Journalist und freier Mitarbeiter
für Macromedia Central Europe tätig. Das Flashstar-Projekt und umfassende Literatur zum Thema ActionScript und Flash stammen von Ihm. matthiask@flashstar.de / www.flashstar.de


    Hat Ihnen dieser Artikel gefallen? Dann abonnieren Sie VISUAL-X direkt über unser

zur vorherigen Seite
zurück
an den Anfang der Seite
nach oben
Diesen Artikel drucken
drucken
Diesen Artikel weiterempfehlen
empfehlen

Anzeige
Software & Support Verlag GmbH