> Start
> Grundlagen
> Einbinden von
   Medienformaten
> ActionScript, PHP
   und MySQL
> Spiele-
   programmierung
> ActionScript
   und XML
> Quellen
  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)

 

   
 
© Saskia Bretschneider - CT01w1