| |
Einbinden von Medienformaten
Grundlagen
der Medieneinbindung
In Flash MX lassen sich
Bilder, Videos und Sounds verschiedener Formate importieren.
Welche Dateiformate eingebunden werden können, entnehmen sie
der folgenden Tabelle:
|
Dateityp |
Erweiterung |
Windows |
Macintosh |
|
Vektor- und
Bitmapdateiformate |
|
Adobe Illustrator |
.eps,
.ai |
x |
x |
|
AutoCAD DXF
|
.dxf |
x |
x |
|
Bitmap |
.bmp |
x |
x
(mit QuickTime) |
|
Enhanced Windows
Metafile |
.emf |
x |
|
|
FreeHand |
.fh7, .fh7, .fh8, .fh8, .fh9, .fh9, .fh10 |
x |
x |
|
FutureSplash Player |
.spl |
x |
x |
|
GIF und animiertes
GIF |
.gif |
x |
x |
|
JPEG |
.jpg |
x |
x |
|
PICT |
.pct,
.pic |
|
x |
|
PNG |
.png |
x |
x |
|
Flash Player 6 |
.swf |
x |
x |
|
Windows Metafile |
.wmf |
x |
|
|
MacPaint* |
.pntg |
x |
x |
|
Photoshop* |
.psd |
x |
x |
|
PICT* |
.pct,
.pic |
x
(als Bitmap) |
|
|
QuickTime Image* |
.qtif |
x |
x |
|
Silicon Graphics
Image* |
.sgi |
x |
x |
|
TGA* |
.tga |
x |
x |
|
TIFF* |
.tif |
x |
x |
|
Videodateiformate |
|
Audio Video Interleaved* ** |
.avi, |
x |
x |
|
Digital Video* |
.dv |
x |
x |
|
Motion Picture Experts Group*
** |
.mpg, .mpeg |
x |
x |
|
QuickTime Movie* |
.mov |
x |
x |
|
Windows Media File** |
.wmv, .asf |
x |
|
|
Sounddateiformate |
|
WAV* |
.wav |
x |
x |
|
AIFF* |
.aiff |
x |
x |
|
MP3 |
.mp3 |
x |
x |
|
Sound Designer II* |
|
|
x |
|
QuickTime-Filme, nur Sound* |
|
x |
x |
|
Sun AU* |
|
x |
x |
|
System 7 Sounds* |
|
|
x |
* Formate können in Flash importiert werden, wenn QuickTime ab Version 4 installiert ist (Windows und
Macintosh)
** Formate können in Flash importiert werden, wenn DirectX
ab Version 7 installiert ist (nur Windows)
Einbinden von Bildern und Filmen
Mit der Methode loadMovie lassen sich dynamisch Bilder im
JPEG-Format und SWF´s in den laufenden Film einbinden. Mit
dieser Methode können Sie mehrere Filme auf einmal abspielen
bzw. zwischen einzelnen Filmen hin- und herschalten, ohne
ein weiteres HTML-Dokument laden zu müssen. Mit der Methode
unloadMovie können Sie Filme oder Grafiken entfernen, die
mit der Aktion loadMovie geladen wurden.
Syntax:
meinMovieclip.loadMovie("url" [,methode]);
Als Parameter werden übergeben:
-> die absolute oder relative URL für die zu ladende SWF-
oder JPEG-Datei. Die URL muss sich in der gleichen Subdomain
befinden wie die URL, unter der der Film gegenwärtig
abgelegt ist.
-> die Methode mittels der die Variablen übertragen werden
sollen.
Dieser Parameter ist optional, es stehen folgende Methoden
zur Auswahl:
• POST – Variablen werden in einem separaten HTTP – Header
gesendet.
Ideal für längere Variablenstrings und wenn die Werte nicht
in der URL zu sehen seien sollen.
• GET – Die Variablen werden beim Senden ans Ende der URL
angehängt. Diese Methode ist nur für eine kleine Menge von
Variablen geeignet.
Einbinden von Sound
Mit dem Sound-Objekt können Sie den Sound in einem Film
steuern. Sie können Sounds aus der Bibliothek zu einem
Movieclip hinzufügen, während der Film abgespielt wird, und
diese Sounds steuern. Ebenso ist es möglich MP3-Dateien von
einer URL zu laden. Sie müssen den Konstruktor new Sound
verwenden und eine Instanz des Sound-Objekts erstellen,
bevor Sie die Methoden des Sound-Objekts aufrufen können.
Syntax:
new Sound([ziel])
Als Parameter werden übergeben:
-> ziel gibt die Movieclip-Instanz an, auf die sich das
Sound-Objekt bezieht.
Nachdem mit diesem Konstruktor eine neue Instanz des
Sound-Objekts erzeugt wurde können die Methoden des Objekts
aufgerufen werden. Im Folgenden finden Sie einige Beispiele:
meinSound.attachSound("idName")
Als Parameter werden übergeben:
-> idName ist der Bezeichner für einen Sound in der
Bibliothek. Der Bezeichner geht aus dem Dialogfeld
Eigenschaften Symbolverknüpfung hervor.
Diese Methode fügt dem angegebenen Sound-Objekt den im
Parameter idName angegebenen Sound hinzu. Der Sound muss
sich in der Bibliothek des aktuellen Films befinden und im
Dialogfeld Eigenschaften Symbolverknüpfung zum Exportieren
freigegeben sein.
meinSound.loadSound("url", streaming)
Als Parameter werden übergeben:
-> url gibt den Speicherort einer MP3-Sounddatei auf einem
Server an.
-> streaming ist ein Boolescher Wert, der angibt, ob es sich
beim Sound um einen Streaming- oder Ereignis-Sound handelt (Streaming
= true, Ereignis = false).
Diese Methode lädt eine MP3-Datei in eine Instanz des
Sound-Objekts, welche dann als Ereignis oder als Steaming
wiedergegeben werden kann. Streaming-Sounds werden bereits
während des Herunterladens wiedergegeben. Ereignis-Sounds
müssen vollständig geladen sein, bevor sie wiedergegeben
werden können.
Desweiteren existieren zum Beispiel Methoden zum Abspielen
und Anhalten des Sounds oder zur Regulierung der Lautstärke:
meinSound.start([zweiterOffset, wiederholung])
-> zweiterOffset ist ein optionaler Parameter, mit dem Sie
die Wiedergabe des Sounds ab einer bestimmten Stelle starten
können.
-> wiederholung ist ein optionaler Parameter, mit dem Sie die
Anzahl von Wiederholungen für den Sound festlegen können.
meinSound.stop(["idName"])
-> idName ist ein optionaler Parameter, der angibt, welcher
Sound gestoppt werden soll.
meinSound.setVolume(lautstärke)
-> lautstärke ist eine Zahl zwischen 0 und 100, mit der die
Lautstärke angegeben wird. 100 steht für volle Lautstärke, 0
für stumm.
Beispiel
Diashow
In diesem Beispiel sollen extern abgelegte Bilder in
einen Flashfilm eingebunden werden, wo sie dann wie in einem
Fotoalbum durchgeblättert und betrachtet werden können.
ansehen
Vorbereitung
Zuerst benötigen sie einen Ordner „images“, in dem die
Bilder abgelegt werden. Wählen Sie nun Bilder für Ihre
Diashow aus und benennen diese fortlaufend „1.jpg“, „2.jpg“,
„3.jpg“ usw., dabei ist es wichtig, das die Bilder alle im
JPEG-Format gespeichert sind und die gleiche Größe haben.
In diesem Beispiel werden 17 Bilder mit der Größe 333x250
Pixel verwendet. Selbstverständlich können Sie auch diese
vorbereiteten Bilder benutzen.
Download Bilder
(257KB)
Layout
Legen Sie zuerst die Bühnengröße auf 550x400 Pixel fest und
erstellen Sie dann einen neuen Movieclip namens „diashow“,
welchen Sie auf der Bühne platzieren.
In diesem Movieclip gestalten Sie nun die Oberfläche für die
Diashow. Es werden zwei Schaltflächen benötigt, eine zum
vor- und eine zum zurückblättern (im Skript „vor“ und „zurueck“),
und ein dynamisches Textfeld, in dem die Variable „_root.ausgabe_bildnummer“
ausgegeben wird. Die Variable geben Sie in den Eigenschaften
des dynamischen Textfeldes an.

Eigenschafteninspektor
für dynamisches Textfeld
Nun können Sie beispielsweise noch einen Rahmen um die
Stelle zeichnen, wo später die Bilder eingefügt werden und
das Layout ist fertig.

Layout
in der Entwicklungsumgebung
Funktion
Beginnen Sie am besten mit dem Schlüsselbild der Ebene 1 im
Movieclip „diashow“. In dieses Schlüsselbild gehört
folgendes Skript:
stop();
_root.anzahl = 17;
_root.xpos = 108.5;
_root.ypos = 75;
_root.i = 1;
if(_root.i == 1)
{
this.zurueck._visible = false;
}
this.createEmptyMovieClip("con",1);
this.con._visible = false;
this.con._y = _root.ypos;
this.con._x = _root.xpos;
this.con.loadMovie("images/"+_root.i+".jpg");
this.con.onEnterFrame = function(){
var fin = int(this.con.getBytesLoaded()*100/this.con.getBytesTotal());
if(fin >= 100 && this.con._width > 0 &&
this.con._height>0)
{
delete this.onEnterFrame;
this.con._visible = true;
}
_root.ausgabe_bildnummer = "Bild "+_root.i+" von "+_root.anzahl;
}
Erklärung:
_root.anzahl = 17;
Diese Variable enthält die Anzahl der Bilder für die
Diashow.
_root.xpos = 108.5;
Diese Variable enthält X-Koordinate für das Bild.
_root.ypos = 75;
Diese Variable enthält Y-Koordinate für das Bild.
_root.i = 1;
Die Variable i entspricht dem aktuellen Bild und wird hier 1
gesetzt (erstes Bild).
if(_root.i == 1)
{
this.zurueck._visible = false;
Der Zurück-Button wird unsichtbar gesetzt, da das aktuelle
Bild 1 ist und nicht zurückgeblättert werden kann.
}
this.createEmptyMovieClip("con",1);
Es wird ein leerer Movieclip mit dem Instanznamen "con"
erzeugt, der als Container für die dynamisch zu ladenden
Bilder dient.
this.con._visible = false;
Der Movieclip „con“ wird zuerst unsichtbar gesetzt um
Flackern zu vermeiden.
this.con._y = _root.ypos;
this.con._x = _root.xpos;
Die Koordinaten des Movieclips werden auf die zu Beginn
festgelegten Koordinaten xpos und ypos gesetzt.
this.con.loadMovie("images/"+_root.i+".jpg");
In den Movieclip „con“ wird das JPG mit der Nummer i aus dem
Ordner images geladen.
this.con.onEnterFrame = function(){
Diese Funktion wird ausgeführt, wenn ein Bild im Movieclip
"con" betreten wird. Sie dient dazu zu prüfen, ob das Bild
ferig geladen wurde.
var fin = int(this.con.getBytesLoaded()*100/this.con.getBytesTotal());
Die Anzahl der geladenen Bytes und aller Bytes des
Movieclips "con" werden ermittelt und daraus die bereits
geladenen Prozent berechnet und in die Variable „fin“
geschrieben.
if(fin >= 100 && this.con._width > 0 && this.con._height>0)
{
Wenn 100% geladen wurden und die Höhe und Breite des
Movieclips "con" nicht 0 sind, dann ist das Bild erfolgreich
geladen wurden und es werden folgende Aktionen ausgeführt:
delete this.onEnterFrame;
Diese onEnterFrame-Prozedur wird gelöscht.
this.con._visible = true;
Der Movieclip "con" wird angezeigt.
}
_root.ausgabe_bildnummer = "Bild "+_root.i+" von "+_root.anzahl;
Die Ausgabe der Bildnummer wird formatiert.
}
Dadurch wird nun beim Laden des Filmens das erste Bild
angezeigt. Für den Button zum Weiterblättern wird folgendes
Skript benötigt:
on (release) {
if(_root.i<_root.anzahl)
{
_root.i = _root.i + 1;
if(this.zurueck._visible == false)
{
this.zurueck._visible = true;
}
if(_root.i == _root.anzahl)
{
this.vor._visible = false;
}
else
{
this.vor._visible = true;
}
this.con._visible = false;
this.con.loadMovie("images/"+_root.i+".jpg");
this.con.onEnterFrame = function()
{
var fin = int(this.con.getBytesLoaded()*100/this.con.getBytesTotal());
if(fin >= 100 && this.con._width > 0 &&
this.con._height>0)
{
delete this.onEnterFrame;
this.con._visible = true;
}
}
_root.ausgabe_bildnummer = "Bild "+_root.i+" von "+_root.anzahl;
}
}
Erklärung:
if(_root.i<_root.anzahl)
{
Wenn das aktuelle Bild kleiner ist als die Anzahl aller
Bilder werden die folgenden Anweisungen ausgeführt:
_root.i = _root.i + 1;
Die Variable i wird um eins erhöht um das nächste Bild
anzuzeigen.
if(this.zurueck._visible == false)
{
this.zurueck._visible = true;
Wenn der Zurück-Button unsichtbar ist, wird dieser sichtbar
gesetzt.
}
if(_root.i == _root.anzahl)
{
this.vor._visible = false;
Wenn das aktuelle Bild das letzte Bild ist, wird der
Vor-Button unsichtbar gesetzt.
}
else
{
this.vor._visible = true;
Wenn das aktuelle Bild nicht das letzte Bild ist, wird der
Vor-Button sichtbar gesetzt.
}
Die folgenden Anweisungen entsprechen denen des
vorhergehenden Skriptes und dienen dazu das neue Bild zu
laden, zu Prüfen ob das Bild geladen wurde und die Ausgabe
der Bildnummer zu formatieren.
Ähnlich funktioniert nun auch der Zurück-Button, für den Sie
folgendes Skript verwenden:
on (release) {
if(_root.i > 1)
{
_root.i = _root.i - 1;
if(this.vor._visible == false)
{
this.vor._visible = true;
}
if(_root.i == 1)
{
this.zurueck._visible = false;
}
this.con._visible = false;
this.con.loadMovie("images/"+_root.i+".jpg");
this.con.onEnterFrame = function(){
var fin = int(this.con.getBytesLoaded()*100/this.con.getBytesTotal());
if(fin >= 100 && this.con._width > 0 &&
this.con._height>0)
{
delete this.onEnterFrame;
this.con._visible = true;
}
}
_root.ausgabe_bildnummer = "Bild "+_root.i+" von "+_root.anzahl;
}
}
Erklärung:
if(_root.i > 1)
{
Wenn das aktuelle Bild größer ist als 1, also nicht das
erste Bild ist, dann werden die folgenden Anweisungen
ausgeführt:
_root.i = _root.i - 1;
Die Variable i wird um eins verringert um das vorhergehende
Bild anzuzeigen.
if(this.vor._visible == false)
{
this.vor._visible = true;
Wenn der Vor-Button unsichtbar ist, wird dieser sichtbar
gesetzt.
}
if(_root.i == 1)
{
this.zurueck._visible = false;
Wenn das aktuelle Bild das erste ist, wird der Zurück-Button
unsichtbar gesetzt.
}
Die folgenden Anweisungen entsprechen dann wieder denen aus
dem ersten Skript.
Download diashow.fla (5KB)
Beispiel
Videosteuerung
In diesem Beispiel geht es darum ein Video in den Flash-Film
einzubinden und dieses über Buttons interaktiv zu steuern.
ansehen
Vorbereitung
Legen Sie die Bühnengröße auf 550x400 Pixel fest und
erzeugen Sie einen neuen Movieclip „video“, den Sie auf der
Bühne platzieren.
Nun importieren Sie das Video „Lion_Seul.wmv“ aus dem Ordner
Videos in den Flash-Film. Wählen Sie dazu Datei ->
Importieren und tätigen Sie die Videoimport-Einstellungen
wie in der ersten Abbildung.
Es ist wichtig die Bildrate des Flash-Dokuments mit dem
Video zu synchronisieren, da die Steuerung des Films über
die Bilder erfolgt. Dazu bestätigen Sie gegebenenfalls auch
die automatische Zeitleistenverlängerung des Flashdokuments.
Download Film (1,8MB)

Videoimport-Einstellungen
 Automatische
Zeitleistenverlängerung
Layout
Erzeugen Sie einen neuen Movieclip „film_ontainer“ und fügen
Sie das importierte Video darin ein. Plazieren Sie nun den
Movieclip „film_container“ mittig im Movieclip „video“.
Erstellen Sie danach die folgenden sieben Buttons:

Buttons
„stop“, „play“, „pause“, „rew“, „ff“, „ton_an“ und „ton_aus
Der Button “ton_aus” soll nur zu sehen sein, wenn auf den
Button “ton_an” geklickt worden ist und umgekehrt. Um diese
Funktion realisieren zu können erzeugen sie einen neuen
Movieclip namens „ton“ und erstellen in diesem zwei
Schlüsselbilder. In das erste Schlüsselbild platzieren Sie
nun den Button „ton_an“ und in das zweite Schlüsselbild an
dieselbe Stelle den Button „ton_aus“. In beiden
Schlüsselbildern sollten Sie bereits die Aktion stop()
einfügen. Die Funktion des Umschaltens erfahren Sie im
nächsten Abschnitt. Nun können Sie den Movieclip „ton“ zu
den anderen Buttons im Movieclip „video“ platzieren.
Das gleiche Verfahren wenden Sie bitte für die Schaltflächen
„play“ und „pause“ an. Erzeugen Sie dafür den Movieclip „play_pause“.

Layout
in der Entwicklungsumgebung
Für den Statusbalken zeichnen Sie mit dem Rechteckwerkzeug
ein Rechteck mit Füllung, markieren nur die Füllung und
wandeln diese in den Movieclip „balken“ um (Einfügen -> In
Symbol konvertieren). Achten Sie darauf das der Balken im
Movieclip „balken“ die Koordinaten X=0/Y=0 hat.
Funktion
Markieren Sie im Movieclip „video“ die Instanz des
Movieclips „film_container“, also das eigentliche Video, und
geben Sie ihr den Instanznamen „film_container“. Fügen Sie
im Aktionen Fenster folgendes Skript hinzu:
onClipEvent (load)
{
this.stop();
}
onClipEvent (enterFrame)
{
_root.gesamt = this._totalframes;
_root.aktPos = this._currentframe;
_root.prozent = Math.ceil((_root.aktPos/
_root.gesamt)*100);
_parent.balken._width = _root.prozent*3.2;
if(_root.vorlaufSignal)
{
this.gotoAndPlay(this._currentframe + 3);
}
if(_root.ruecklaufSignal)
{
this.gotoAndPlay(this._currentframe - 3);
}
if(this._currentframe == this._totalframes)
{
gotoAndStop(1);
_parent.play_pause.gotoAndStop(1);
}
}
Erklärung:
onClipEvent (load)
{
this.stop();
}
Die Wiedergabe des Filmes wird angehalten, sobald dieser
geladen ist.
onClipEvent (enterFrame) {
In jedem Bild, dass abgespielt wird, werden folgende
Aktionen ausgeführt:
_root.gesamt = this._totalframes;
Die Anzahl aller Bilder wird ermittelt.
_root.aktPos = this._currentframe;
Das aktuelle Bild wird ermittelt.
_root.prozent =
Math.ceil((_root.aktPos/_root.gesamt)*100);
Es wird berechnet, wieviel Prozent der Bilder schon
abgespielt wurden.
_parent.balken._width = _root.prozent*3.2;
Die Breite des Balkens wird auf den prozentualen Anteil der
bereits abgespielten Bilder gesetzt. Der Faktor 3,2 wird
gewählt, weil der Balken 320 Pixel lang ist.
if(_root.vorlaufSignal)
{
this.gotoAndPlay(this._currentframe + 3);
}
Wenn das VorlaufSignal true (1) ist, wird im Film 3 Bilder
weiter gesprungen.
if(_root.ruecklaufSignal)
{
this.gotoAndPlay(this._currentframe - 3);
}
Wenn das RuecklaufSignal true (1) ist, wird im Film 3 Bilder
zurück gesprungen.
if(this._currentframe == this._totalframes)
{
gotoAndStop(1);
parent.play_pause.gotoAndStop(1);
}
Wenn das aktuelle Bild dem letzten Bild entspricht wird ins
erste Bild gesprungen und der Film angehalten. Zudem wird
ins erste Bild des Movieclips „play_pause“ gesprungen und
der Film angehalten um wieder den Play-Button anzuzeigen.
}
Jetzt fehlen nur noch die Skripte der Buttons zur
Filmsteuerung. Beginnen wir mit dem Stopp-Button:
on (release)
{
film_container.gotoAndStop(1);
play_pause.gotoAndStop(1);
}
Beim Loslassen des Buttons werden zwei Aktionen ausgeführt.
Zum einen wird ins erste Bild des Movieclips „film_container“
gesprungen und der Film angehalten und es wird ins erste
Bild des Movieclips „play_pause“ gesprungen und die
Wiedergabe gestoppt. Dadurch wird wieder der Play-Button
angezeigt.
Im Movieclip „paly_pause“ befinden sich die Buttons Play und
Pause. Weisen Sie dem Play-Button hier folgendes Skript zu:
on (press)
{
_parent.film_container.play();
gotoAndPlay(2);
}
Wird diese Schaltfläche gedrückt, wird der Movieclip „film_container“,
in dem sich das Video befindet, abgespielt. Außerdem wird
ins zweite Bild dieses Movieclips gesprungen, wodurch nun
der Pause-Button angezeigt wird.
Dieser Pause-Button soll folgendes Skript erhalten:
on (press)
{
_parent.film_container.stop();
gotoAndPlay(1);
}
Hier wird die Wiedergabe des Movieclips „film_container“
wieder gestoppt und zurück ins erste Bild des Movieclips „play_pause“
gesprungen, wo wieder der Play-Button angezeigt wird.
Das Skript für den Rücklauf-Button sieht folgendermaßen aus:
on (press)
{
_root.ruecklaufSignal = 1;
_root.vorlaufSignal = 0;
}
on (release)
{
_root.ruecklaufSignal = 0;
film_container.play();
play_pause.gotoAndStop(2);
}
on (releaseOutside)
{
_root.ruecklaufSignal = 0;
film_container.play();
play_pause.gotoAndStop(2);
}
Beim Drücken dieser Schaltfläche wird das Rücklaufsignal auf
true und das Vorlaufsignal auf false gesetzt. Auf diese
Signale reagiert das Skript der Instanz „film_container“.
Wird der Button dann wieder losgelassen, egal ob innerhalb
oder außerhalb der Schaltfläche, wird das Rücklaufsignal
wieder auf false gesetzt, der Movieclip „film_container“
abgespielt und ins zweite Bild des Movieclips „play_pause“
gesprungen, um den Pause-Button anzuzeigen.
Das Skript für den Vorlauf-Button sieht ähnlich aus:
on (press)
{
_root.ruecklaufSignal = 0;
_root.vorlaufSignal = 1;
}
on (release)
{
_root.vorlaufSignal = 0;
film_container.play();
play_pause.gotoAndStop(2);
}
on (releaseOutside)
{
_root.vorlaufSignal = 0;
film_container.play();
play_pause.gotoAndStop(2);
}
Dieses Mal wird beim Drücken des Buttons das Vorlaufsignal
auf true gesetzt und das Rücklaufsignal auf false. Wird der
Button wieder losgelassen, dann wird das Vorlaufsignal
wieder auf false gesetzt, der Movieclip „film_container“
abgespielt und ins zweite Bild des Movieclips „play_pause“
gesprungen.
Jetzt fehlt nur noch der Button für den Ton. Dabei handelt
es sich eigentlich um zwei Buttons, die sich im Movieclip
„ton“ befinden.
Beginnen wir mit dem Skript für den Button „ton_an“:
on (release)
{
ton = new Sound(_root.film_container);
ton.setVolume(0);
gotoAndPlay(2);
}
Es wird eine neue Instanz des Sound-Objekts erstellt,
welcher der Ziel-Movieclip „film_container“ übergeben wird,
in dem sich ja auch der Sound befindet. Danach wird die
Lautstärke auf 0% gesetzt und ins Bild zwei gesprungen, wo
sich der Button „ton_aus“ befindet.
Dieser Button enthält das Skript um den Ton wieder
anzuschalten:
on (release)
{
ton = new Sound(_root.film_container);
ton.setVolume(100);
gotoAndPlay(1);
}
Es wird wieder eine neue Instanz des Sound-Objekts erstellt,
der der Movieclip „film_container“ übergeben wird. Dann wird
die Lautstärke wieder auf 100% gesetzt und ins Bild eins
gesprungen.
Nun lässt sich auch der Ton an- und abschalten und die
Videosteuerung ist vollendet.
Download video.fla (21MB)
Beispiel
Preloader
Als Preloader bezeichnet man eine Anzeige aus der hervorgeht
wie viel vom eigentlichen Flash-Film bereits geladen wurde.
Diese Anwendung empfiehlt sich natürlich nur für Filme ab
einer gewissen Größe und sich daraus ergebenden höheren
Ladezeit. Diese Vorraussetzung ist bei Filmen mit
eingebundenen Medien meist gegeben, sodass Preloader hier
sehr häufig zum Einsatz kommen.
ansehen
Vorbereitung
Als Basis für den Preloader nutzen wir die Videosteuerung
aus dem vorhergehenden Beispiel, da diese durch das
eingebundene Video eine hohe Ladezeit hat.
Für den Preloader fügen Sie zuerst einen neue Szene vor den
eigentlichen Film ein. Öffnen Sie dazu das Fenster Szene,
wählen Sie Einfügen -> Szene und verschieben Sie die neue
Szene an erste Stelle. Benennen Sie die neue Szene in „Preloader“
um und geben Sie der zweiten Szene den Namen „Hauptfilm“.
Alle weiteren Arbeiten nehmen Sie nur in der Szene „Preloader“
vor, der Hauptfilm bleibt unverändert.
Layout
Legen Sie zwei Ebenen an, eine für Skripte und die andere
für Elemente. In der Ebene „Skript“ erstellen Sie zwei
Schlüsselbilder, eines in Bild 1 und eines in Bild 2. Die
Ebene „Elemente“ verlängern Sie auf 2 Bilder. Alle folgenden
Objekte, die das Layout betreffen legen Sie in der Ebene
Elemente ab.
Dieser Preloader soll den Fortschritt des Ladevorgangs
anhand eines Balkens darstellen. Zeichnen Sie dazu mit dem
Rechteckwerkzeug einen Balken mit Rahmen. Markieren Sie nun
nur die Füllung des Balkens und wandeln Sie diese in einen
Movieclip um den Sie „preload_balken“ nennen. Achten Sie
darauf, dass der Balken im Movieclip die Koordinaten X=0/Y=0
hat.
Desweiteren wird ein Textfeld benötigt, in dem dynamisch die
bereits geladenen Prozent ausgegeben werden können.
Zeichenen Sie also ein dynamisches Textfeld und geben Sie
als Variable „_root.prozentGeladen“ an.

Preloader
in Entwicklungsumgebung
Funktion
Die Hauptfunktion des Preloaders liegt im ersten
Schlüsselbild der Ebene Skript:
if (_framesloaded >= _totalframes)
{
gotoAndPlay ("Hauptfilm", 1);
}
else
{
bytes_geladen = this.getBytesLoaded();
bytes_gesamt = this.getBytesTotal();
prozent = Math.ceil((bytes_geladen/bytes_gesamt)*100);
_root.preload_balken._xscale = prozent;
_root.prozentGeladen = prozent+"% geladen";
}
Erklärung:
if (_framesloaded >= _totalframes)
{
gotoAndPlay ("Hauptfilm", 1);
}
Wenn die Anzahl der geladenen Frames der Anzahl aller Frames
entspricht, wird in das erste Bild der Szene "Hauptfilm"
gesprungen.
else
{
Ist die Anzahl der geladenen Frames kleiner als die Anzahl
aller Frames, werden folgende Anweisungen ausgeführt:
bytes_geladen = this.getBytesLoaded();
Es wird die Anzahl der geladenen Bytes ermittelt.
bytes_gesamt = this.getBytesTotal();
Es wird die Anzahl aller Bytes ermittelt.
prozent = math.ceil((bytes_geladen/bytes_gesamt)*100);
Daraus wir berechnet wie viel Prozent der Bytes bereits
geladen wurden.
_root.preload_balken._xscale = prozent;
Der Balken wird auf den Prozentwert skaliert.
_root.prozentGeladen = prozent+"%
geladen";
Die Ausgabe für das dynamische Textfeld wird formatiert.
}
Ist dieses Skript abgearbeitet geht der Film automatisch ins
nächste Bild, wo folgende Zeile ausgeführt wird:
gotoAndPlay("Preloader",1);
Dadurch springt der Film wieder ins erste Bild der Szene „Preloader“,
womit wir eine Schleife erzeugt haben. Der Film läuft
solange zwischen den beiden Bildern hin und her, bis alle
Bilder geladen sind und er ins erste Bild des Hauptfilmes
springt. Bei jedem Durchlauf dieser Schleife wird der Balken
neu skaliert und man erhält einen aktuelle Prozentanzeige.
Damit ist der Preloader fertig und kann unter Steuerung ->
Film testen und dann Ansicht -> Streaming anzeigen getestet
werden. Im Menüpunkt Fehlersuche können verschiedene
Übertragungsraten eingestellt werden.

Preloader
im Streaming
Download preloader.fla (21MB)
|