Bildergalerien in AS2 und AS3

Dieses Tutorial zeigt wichtige grundlegende Flash-Basistechniken, wie z.B.
- Nachladen von externen Bildern
- Preloader mit der MovieClipLoader-Klasse
- Events auslösen mit Schaltflächen
- auf Events reagieren
- gescriptete Animationen mit der Tween- und Transitionsklasse

Fragen und Probleme zum Tutorial werden in diesem Thread behandelt.

Ziel: eine Bilderliste zeigen, ein Bild auswählen, gewähltes Bild über einen Tween einblenden

Voraussetzungen: leere Bühne, leere Bibliothek, für den AS2-Teil mind. Flash 8, für den AS3-Teil mind. Flash CS3. Alle AS2-Scripte gehören auf die Hauptzeitleiste. Schaut euch auch bitte das Tutorial Bilder mit dynamischen Rahmen per Preloader laden an.



Beispiel 1: Ein Bild nachladen und zentrieren

Anschauen
Alle Beispiele downloaden (Flash CS3)

Schritt 1: Wir erstellen uns per Script einen leeren MC als Platzhalter bzw. Ladecontainer:

PHP-Code:

//Stufe 1: direktes Laden eines Bildes in einen MC 
//und Positionieren des Bildes in der Bühnenmitte

//leeren MC erstellen
this.createEmptyMovieClip("con",1); 


Schritt 2: Wir erstellen uns ein Listener-Objekt (Lauscher). Der Lauscher wartet im Hintergrund solange, bis eine bestimmte Bedingung eintritt:

PHP-Code:

//Lauscher-Objekt erstellen
var mclListener:Object = new Object(); 


Schritt 3: Zum Nachladen nutzen wir die MovieClipLoader-Klasse, weil die u.a. schon automatisierte Preloaderfunktionen mitbringt. Wir können aber nicht direkt mit der Klasse arbeiten, sondern nur mit einer "Kopie", der sog. Instanz. Der Vorgang dazu nennt sich auch Instanziierung und wird mit new gestartet:

PHP-Code:

//MovieClipLoader-Instanz erstellen
var mcLoader = new MovieClipLoader(); 


Schritt 4: Unser Lauscher wird jetzt auf die MovieClipLoader-Instanz angesetzt, d.h. er lauscht solange, bis bspw. die Bedingung "fertiggeladen" eintritt.

PHP-Code:

//Lauscher auf die Instanz setzen
mcLoader.addListener(mclListener); 


Schritt 5: Jetzt starten wir den eigentlichen Ladevorgang mit der Methode loadClip der MovieClipLoader-Instanz. Im ersten Parameter der Methode wird die URL des Bildes übergeben, im zweiten Parameter der Container-MC. In diesem Beispiel wird das Bild aus einem Bilder-Folder geladen:

PHP-Code:

//Bild nachladen
mcLoader.loadClip("pics-gr/kw-bruecke.jpg", this.con); 


Schritt 6: Unser Lauscher soll jetzt solange lauschen, bis das Bild vollständig in den MC geladen wurde und der MC eine Größe und Breite größer 0 hat. Die entsprechende Lauscher-Methode ist onLoadInit, die wir jetzt noch an den Lauscher anhängen:

PHP-Code:

mclListener.onLoadInit = function(mc:MovieClip) {
    trace("Laden beendet, beladen wurde "+mc);
} 


Schritt 7: Jetzt erst können wir auf den nachgeladenen Inhalt zugreifen und über dessen Container-MC bspw. dessen Höhe und Breite ermitteln. Freundlicherweise wird mit der onLoadInit-Methode auch das Objekt übergeben, das die Funktion ausgelöst hat, also der Container-MC. Hier im Beispiel wird dazu der MC mittig auf der Bühne zentriert:

PHP-Code:

//Bild ist geladen und MC wurde befüllt:
mclListener.onLoadInit = function(mc:MovieClip) {
    trace("fertig, beladen wurde "+mc);
    //MC auf die Bühnen-Mitte setzen:
    mc._x = int((Stage.width - mc._width)/2);
    mc._y = int((Stage.height - mc._height)/2);
} 


Und so sieht dann das vollständige Script aus:

PHP-Code:

//Stufe 1: direktes Laden eines Bildes in einen MC 
//und Positionieren des Bildes in der Bühnenmitte

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//Lauscher-Objekt erstellen
var mclListener:Object = new Object();

//MovieClipLoader-Instanz erstellen
var mcLoader = new MovieClipLoader();

//Lauscher auf die Instanz setzen
mcLoader.addListener(mclListener);

//Bild nachladen
mcLoader.loadClip("pics-gr/kw-bruecke.jpg", this.con);


//Bild ist geladen und MC wurde befüllt:

mclListener.onLoadInit = function(mc:MovieClip) {


    trace("fertig, beladen wurde "+mc);
    //MC auf die Bühnen-Mitte setzen:
    mc._x = int((Stage.width - mc._width)/2);
    mc._y = int((Stage.height - mc._height)/2);
} 


Beispiel 2: Ein Bild mit einer Preloader-Prozentangabe nachladen

Anschauen


Schritt 1: Preloader stellen nicht nur fest, dass ein Bild oder ein Film nachgeladen wurde, sondern können dem User auch Informationen zum Ladestatus übermitteln. Bspw. können Ladebalken oder Texte gezeigt werden. Hier mal ein Beispiel, wie die Information in einem Textfeld aussehen kann. Dazu erstellen wir per Script ein Textfeld:

PHP-Code:

//einen leeren MC für das Textfeld erstellen:
this.createEmptyMovieClip("txt",2);

//in den leeren MC ein Textfeld setzen:
txt.createTextField("meinTxt",1,0,0,100,40);

//MC zentrieren
txt._x = int((Stage.width - txt._width)/2);
txt._y = int((Stage.height - txt._height)/2);

//Textfeld soll HTML-fähig sein, um den Text formatieren zu können
txt.meinTxt.html = true; 


Schritt 2: Auch für Fortschrittsanzeigen hat die MovieClipLoader-Klasse eine Methode, die sich onLoadProgress nennt und während der gesamten Ladezeit die geladenen Bytes und die Gesamtmenge der zu ladenden Bytes übergibt. Daraus lässt sich dann leicht mit einem Dreisatz ein Prozentwert errechnen und im Textfeld als htmlText ausgeben:

PHP-Code:

//während des Ladens bspw. um Fortschrittsanzeigen o.ä. zu aktualisieren
mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
    var prozent = int(bytesLoaded*100/bytesTotal);
   _root.txt.meinTxt.htmlText = "<font face='Arial' size='30' color='#000000'>"+prozent+" %</font>"; 
} 


Schritt 3: nachdem das Bild geladen wurde, ist der Text mit der Fortschrittsanzeige natürlich überflüssig und kann zusammen mit seinem Container-MC gelöscht werden:

PHP-Code:

//Bild ist geladen und MC wurde befüllt:
mclListener.onLoadInit = function(mc:MovieClip) {
    trace("fertig, beladen wurde "+mc);
    _root.txt.removeMovieClip();//Prozentanzeige löschen
    //MC auf die Bühnen-Mitte setzen:
    mc._x = int((Stage.width - mc._width)/2);
    mc._y = int((Stage.height - mc._height)/2);
} 


Und hier das gesamte Script im Überblick:

PHP-Code:

//Stufe 1: direktes Laden eines Bildes in einen MC 
//und Positionieren des Bildes in der Bühnenmitte
//plus Fortschrittsanzeige

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//Lauscher-Objekt erstellen
var mclListener:Object = new Object();

//MovieClipLoader-Instanz erstellen
var mcLoader = new MovieClipLoader();

//Lauscher auf die Instanz setzen
mcLoader.addListener(mclListener);

//Bild nachladen
mcLoader.loadClip("pics-gr/kw-bruecke.jpg", this.con);



//einen leeren MC für das Textfeld erstellen:
this.createEmptyMovieClip("txt",2);

//in den leeren MC ein Textfeld setzen:
txt.createTextField("meinTxt",1,0,0,100,40);

//MC zentrieren
txt._x = int((Stage.width - txt._width)/2);
txt._y = int((Stage.height - txt._height)/2);

//Textfeld soll HTML-fähig sein, um den Text formatieren zu können
txt.meinTxt.html = true;



//während des Ladens bspw. um Fortschrittsanzeigen o.ä. zu aktualisieren
mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
    var prozent = int(bytesLoaded*100/bytesTotal);
   _root.txt.meinTxt.htmlText = "<font face='Arial' size='30' color='#000000'>"+prozent+" %</font>"; 
}

//Bild ist geladen und MC wurde befüllt:
mclListener.onLoadInit = function(mc:MovieClip) {
    trace("fertig, beladen wurde "+mc);
    _root.txt.removeMovieClip();//Prozentanzeige löschen
    //MC auf die Bühnen-Mitte setzen:
    mc._x = int((Stage.width - mc._width)/2);
    mc._y = int((Stage.height - mc._height)/2);
} 


Beispiel 3: Mehrere Bilder hintereinander laden und anzeigen

Anschauen


Schritt 1: Bildergalerie bedeutet ja bekanntlich, dass mehrere Bilder angezeigt werden. Dementsprechend zeige ich jetzt ein Script, mit dem mehrere Bilder in einem Loop angezeigt werden, unterbrochen von einer 5-sekündigen Pause. Dazu benötigen wir wieder einen leeren MC und einen Zähler, der mitzählt, welches Bild angezeigt wird:

PHP-Code:

//Stufe 3: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern 5 Sekunden Pause

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//Zähler
var index:Number = 0; 


Schritt 2: Für die Bilderliste benötigen wir die URLs der Bilder. Im einfachsten Fall legen wir die URLs statisch in ein Array. Wir können die Bilderliste natürlich auch dynamisch nachladen, bspw. über die LoadVars-Klasse und einem PHP-Script, das den Bilderfolder ausliest. Dazu aber in einem späteren Tutorial mehr. Hier erst einmal das Array mit den Filenames:

PHP-Code:

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","wattenmeerhaus.jpg"); 


Schritt 3: Damit die Anzahl der Bilder dynamisch bleibt, ermitteln wir sie aus der Länge des Arrays:

PHP-Code:

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length; 


Schritt 4: Auch die Pausenzeit zwischen dem Laden und Anzeigen der Bilder legen wir in eine Variable:

PHP-Code:

//5 Sekunde = 5000 Millisekunden Pause zwischen den Bildern
var pause:Number = 5000; 


Schritt 5: Das Nachladen mit der MovieClipLoader-Klasse habe ich ja weiter oben erklärt. Hier wird das Nachladen jetzt in einer Funktion zusammengefasst. Neu ist nur, dass die zu ladende Bild-URL aus dem Array entnommen wird:

PHP-Code:

function startLoader(){
    //Lauscher und MovieClipLoader-Instanz erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //und das erste Bild laden
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);


    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
    }  
} 


Damit wir zwischen den Bildern eine Pause haben, setzen wir ein Intervall von 5 Sekunden Dauer. Nach Ablauf des Intervalls starten wir eine Funktion und löschen zuerst das Intervall:

PHP-Code:

//Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause, dann in Funktion "weiter" weitermachen
    }  

}

//Intervall ist beendet
function weiter(){
   trace("Pause beendet");
    
   //Intervall-ID und damit das Intervall wieder löschen:
    clearInterval(_root.meineID);
} 


Schritt 6: Nach der Pause zählen wir die Zählervariable "index" hoch und laden das nächste Bild über die Ladefunktion. Wenn es kein nächstes Bild gibt, fangen wir wieder mit dem Laden des ersten Bildes an:

PHP-Code:

//Intervall ist beendet
function weiter(){
   trace("Pause beendet");
    
   //Intervall-ID und damit das Intervall wieder löschen:
    clearInterval(_root.meineID);
    
   //nächstes Bild laden, dazu den Index erhöhen:
   _root.index ++;
    
   //checken, ob das letzte Bild erreicht wurde
   if(_root.index == _root.len){
      //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
      _root.index = 0;
   }
   
   _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);
}


startLoader();

this.stop(); 


Auch hier noch mal das ganze Script:

PHP-Code:

//Stufe 3: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern 5 Sekunden Pause

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","wattenmeerhaus.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;

//5 Sekunde = 5000 Millisekunden Pause zwischen den Bildern
var pause:Number = 5000;

function startLoader(){
    //Lauscher und MovieClipLoader-Instanz erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //und das erste Bild laden
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);


    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause, dann in Funktion "weiter" weitermachen
    }  

}

//Intervall ist beendet
function weiter(){
   trace("Pause beendet");
    
   //Intervall-ID und damit das Intervall wieder löschen:
    clearInterval(_root.meineID);
    
    //nächstes Bild laden, dazu den Index erhöhen:
    _root.index ++;
    
    //checken, ob das letzte Bild erreicht wurde
    if(_root.index == _root.len){
        //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
        _root.index = 0;
    }
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);
    
}


startLoader();

this.stop(); 


Beispiel 4: Mehrere Bilder hintereinander laden und ein- und ausblenden

Anschauen


Schritt 1: Das Anzeigen der Bilder der Galerie sieht bisher noch ein wenig "schlapp" aus, daher werden wir die Bilder jetzt immer ein- und nach der Pause ausfaden. Damit das Faden ruckelfrei funktioniert, sollte die Bildrate auf mind. 24 FPS gesetzt werden. Für das Faden werden wir eine Funktion der Transitions- und Tweenklasse nutzen. Dazu importieren wir uns zuerst die entsprechenden Klassen in den Film:

PHP-Code:

//Stufe 4: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern 5 Sekunden Pause
//mit Überblendungen

import mx.transitions.*; 


Schritt 2: Der Container-MC wird zuerst transparent gesetzt:

PHP-Code:

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0; 


Schritt 3: Im onLoadInit werden wir jetzt statt des Intervalls eine Faderfunktion starten:

PHP-Code:

//Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        _root.fader(mc,true);
        
    } 


Schritt 3: Die Faderfunktion bekommt als ersten Parameter den Container-MC, der gefadet werden soll, und als zweiten Parameter true oder false, jenachdem, ob ein- oder ausgeblendet werden soll:

PHP-Code:

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
} 


Die Tweenfunktion führt eine Veränderung der Transparenz des MCs durch. Bspw. wird bei Einblenden die _alpha-Eigenschaft von 0 (= voll transparent) bis 100 (= nicht transparent) hochgezogen. Und das in 0,6 Sekunden Dauer mit einer linearen Transition. Der letze Parameter sagt aus, dass die Transition über ein Intervall und nicht über einen Framewechsel vollzogen werden soll.

Das Ende des Fadens ermitteln wir über einen onMotionFinished-Callback. Nach Ende des Einblendens wird die 5-sekündige Pause gestartet, nach Ende des Ausblendens laden wir das nächste Bild.


Schritt 4: Wie im vorherigen Tutorial laden wir über eine Funktion, die den Zähler überprüft, die folgenden Bilder nach:

PHP-Code:

function folgefilm(){
    trace("folgefilm");
     _root.index++;
     
    //checken, ob das letzte Bild erreicht wurde
    if(_root.index == _root.len){
        //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
        _root.index = 0;
    }
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);
    
} 


Und hier das ganze Script:

PHP-Code:

//Stufe 4: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern 5 Sekunden Pause
//mit Überblendungen

import mx.transitions.*;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","wattenmeerhaus.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;

//5 Sekunde = 5000 Millisekunden Pause zwischen den Bildern
var pause:Number = 5000;

function startLoader(){
    //Lauscher und MovieClipLoader-Instanz erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //und das erste Bild laden
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);


    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        _root.fader(mc,true);
        
    }  

}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.meineID = setInterval(_root,"weiter",_root.pause);//5 Sek Pause
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}

//Intervall ist beendet
function weiter(){
    trace("Pause beendet");
    
    //Intervall wieder löschen
    clearInterval(_root.meineID);
    
    //aktuelles Bild ausblenden
    _root.fader(_root.con,false);
    
}

function folgefilm(){
    trace("folgefilm");
     _root.index++;
     
    //checken, ob das letzte Bild erreicht wurde
    if(_root.index == _root.len){
        //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
        _root.index = 0;
    }
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);
    
}


startLoader();

this.stop(); 


Beispiel 5: Mehrere Bilder hintereinander über Schaltflächen-Events laden

Anschauen


Schritt 1: Bisher lief die Bildergalerie automatisch ab. Wir können aber auch dem Nutzer eine Steuerungsmöglichkeit mitgeben, indem wir bspw. Vorwärts- und Rückwärts-Schaltflächen erstellen. Im einfachsten Fall erstellen wir uns MCs mit Textfeldern:

PHP-Code:

//2 Klick-MCs erstellen
this.createEmptyMovieClip("fore",2);
this.createEmptyMovieClip("back",3);

//in die leeren MCs Textfelder setzen:
fore.createTextField("txt",1,0,0,60,40);
back.createTextField("txt",1,0,0,100,40);


//Textfelder sollen HTML-fähig sein, um den Text formatieren zu können
fore.txt.html = true;
back.txt.html = true;

//keinen Textcursor über den Texten zeigen
fore.txt.selectable = false;
back.txt.selectable = false;

//und die Texte setzen
fore.txt.htmlText = "<font face='Arial' size='30' color='#000000'>Vor</font>";
back.txt.htmlText = "<font face='Arial' size='30' color='#000000'>Zurück</font>";

//MCs positionieren
back._x = Stage.width - back._width - 10;
back._y = Stage.height - back._height - 10;
fore._y = back._y; 


Schritt 2: Damit aus den MCs mit ihren Textfeldern auch automatisch Schaltflächen werden, hängen wir jetzt onRelease-Events an:

PHP-Code:

fore.onRelease = function(){
    trace("vor geklickt");
}

back.onRelease = function(){
    trace("zurück geklickt");
} 


Dadurch bekommen wir auch automatisch den Schaltflächen-Cursor mit der Hand über den MCs zu sehen. Noch ein kleiner Tipp: wenn die selectable-Eigenschaft der Textfelder nicht auf false gesetzt wird, lassen sich die Textfelder bearbeiten und der Textcursor ist zu sehen. Nachteil ist dann aber bei einer Schaltfläche aus einem Textfeld-MC, dass der Cursor bei Bewegung über dem Textfeld flackert, weil er zwischen Hand- und Textcursor wechselt.

Schritt 3: Nach Klick auf die Schaltflächen soll natürlich auch noch etwas passieren. Bspw. soll nach Klick auf die Vorwärts-Schaltfläche das nächste Bild, bzw. wieder das erste Bild in einem Loop geladen werden. Dazu zählen wir den Index wieder hoch und überprüfen, ob das letzte Bild erreicht ist:

PHP-Code:

fore.onRelease = function(){
    trace("vor geklickt");
    
    _root.index ++;
    
    //checken, ob das letzte Bild erreicht wurde
    if(_root.index == _root.len){
        //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
        _root.index = 0;
    }
    
    //aktuelles Bild ausblenden
    _root.fader(_root.con,false);
} 


Schritt 4: Nach Klick auf die Zurück-Schaltfläche wird der Index runtergezählt und es wird überprüft, ob das erste Bild erreicht ist. Danach wird dann im Loop wieder das letzte Bild geladen:

PHP-Code:

back.onRelease = function(){
    trace("zurück geklickt");
    
    _root.index --;
    
    //checken, ob das erste Bild erreicht wurde
    if(_root.index == -1){
        //erstes Bild wurde gezeigt, wieder mit dem letzten Bild starten = Loop
        _root.index = (_root.len -1);
    }
    
    //aktuelles Bild ausblenden
    _root.fader(_root.con,false);
} 


Dazu noch der Hinweis, dass Array-Felder immer mit 0 beginnen, nicht mit 1! Die Länge des Arrays beträgt in unserem Beispiel zwar 3, das letzte Feld hat aber die 2. Deshalb müssen wir, um auf unseren letzten Eintrag zu kommen, von der Länge des Arrays 1 abziehen wie bei _root.index = (_root.len -1);

Schritt 5: Die startLoader-Funktion hat sich nicht geändert, wohl aber die Faderfunktion. Damit nicht während des Ein- oder Ausblendens unser Film abstürzt, weil eine Schaltfläche betätigt wurde, werden die Schaltflächen während des Fadens kurzfristig stillgelegt:

PHP-Code:

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.fore.enabled = false;
    _root.back.enabled = false;
   
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.fore.enabled = true;
       _root.back.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    trace("folgefilm");
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
} 


Und auch hier zur Übersicht das gesamte Script:

PHP-Code:

//Stufe 5: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern mit Schaltflächen-Events wechseln

import mx.transitions.*;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","seglerhafen.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;


//2 Klick-MCs erstellen
this.createEmptyMovieClip("fore",2);
this.createEmptyMovieClip("back",3);

//in die leeren MCs Textfelder setzen:
fore.createTextField("txt",1,0,0,60,40);
back.createTextField("txt",1,0,0,100,40);


//Textfelder sollen HTML-fähig sein, um den Text formatieren zu können
fore.txt.html = true;
back.txt.html = true;

//keinen Textcursor über den Texten zeigen
fore.txt.selectable = false;
back.txt.selectable = false;

//und die Texte setzen
fore.txt.htmlText = "<font face='Arial' size='30' color='#000000'>Vor</font>";
back.txt.htmlText = "<font face='Arial' size='30' color='#000000'>Zurück</font>";

//MCs positionieren
back._x = Stage.width - back._width - 10;
back._y = Stage.height - back._height - 10;
fore._y = back._y;

fore.onRelease = function(){
    trace("vor geklickt");
    
    _root.index ++;
    
    //checken, ob das letzte Bild erreicht wurde
    if(_root.index == _root.len){
        //letztes Bild wurde gezeigt, wieder mit dem ersten Bild starten = Loop
        _root.index = 0;
    }
    
    //aktuelles Bild ausblenden
    _root.fader(_root.con,false);
}

back.onRelease = function(){
    trace("zurück geklickt");
    
    _root.index --;
    
    //checken, ob das erste Bild erreicht wurde
    if(_root.index == -1){
        //erstes Bild wurde gezeigt, wieder mit dem letzten Bild starten = Loop
        _root.index = (_root.len -1);
    }
    
    //aktuelles Bild ausblenden
    _root.fader(_root.con,false);
}




function startLoader(){
    //Lauscher und MovieClipLoader-Instanz erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //und das erste Bild laden
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[index], _root.con);

    //Bild ist geladen und MC wurde befüllt:
    mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2);
        _root.fader(mc,true);
        
    }  
}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.fore.enabled = false;
   _root.back.enabled = false;
   
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.fore.enabled = true;
           _root.back.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    trace("folgefilm");
    _root.mcLoader.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
}


startLoader();

this.stop(); 


Beispiel 6: Bilder nach Klick auf Vorschaubilder laden

Anschauen


Schritt 1: In Bildergalerien werden häufig auch kleine Vorschaubilder, die sog. Thumbnails gezeigt. Nach Klick auf diese Thumbs wird dann das eigentliche große Bild geladen. Zur Veranschaulichung habe ich deshalb in die startLoader-Funktion zwei Loader und Listener gesetzt. Ein Listener überwacht das Laden der Thumbnails und einer das Laden des ersten großen Bildes:

PHP-Code:

function startLoader(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs für die Thumbs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*230);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2)-30;

               //und einblenden
        _root.fader(mc,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        //MC positionieren
        _root.thumbs._y = Stage.height - thumbs._height - 10;
    
        _root.index++;
         if (_root.index < _root.len) {//sind noch weitere zu laden?
            _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
         }
    }  
} 


Schritt 2: die Thumbnail-MCs werden zu Schaltflächen, die nach Klick das jeweilige Hauptbild nachladen:

PHP-Code:

mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        } 


Am Rest des Scripts hat sich nicht viel geändert, hier die Übersicht:

PHP-Code:

//Stufe 6: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln

import mx.transitions.*;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","seglerhafen.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;


function startLoader(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*230);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        //MC auf die Bühnen-Mitte setzen:
        mc._x = int((Stage.width - mc._width)/2);
        mc._y = int((Stage.height - mc._height)/2)-30;
        _root.fader(mc,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        //MC positionieren
        _root.thumbs._y = Stage.height - thumbs._height - 10;
    
        _root.index++;
           if (_root.index < _root.len) {//sind noch weitere zu laden?
           _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
           }
        
        
        mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        }
    }  
}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.thumbs.enabled = false;
      
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.thumbs.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    trace("folgefilm");
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
}


startLoader();

this.stop(); 


Beispiel 7: Bilder nach Klick auf Vorschaubilder laden, Hauptbilder mit Rahmen und Schatten versehen

Anschauen

In diesem Beispiel wird das Hauptbild ein wenig "aufgehübscht", indem ein Rahmen und ein Schatten um den Bild-MC gelegt werden. Rahmen und Schatten werden in diesem Tutorial erklärt.

Hier das ganze Script:

PHP-Code:

//Stufe 7: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln
//mit Rahmen und Schatten

import mx.transitions.*;
import flash.filters.DropShadowFilter;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//und zwei weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","seglerhafen.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;


function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}

function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}


function startLoader(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*240);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con.image_mc);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        
        _root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
        _root.con.image_mc._x = 10;
        _root.con.image_mc._y = 10;
        
        //MC auf die Bühnen-Mitte setzen:
        _root.con._x = int((Stage.width - _root.con._width)/2);
        _root.con._y = int((Stage.height - _root.con._height)/2)-40;
        
        _root.shadows(_root.con);
        
        _root.fader(_root.con,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        //MC positionieren
        _root.thumbs._y = Stage.height - thumbs._height - 10;
    
        _root.index++;
           if (_root.index < _root.len) {//sind noch weitere zu laden?
           _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
           }
        
        
        mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        }
    }  
}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.thumbs.enabled = false;
      
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.thumbs.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    trace("folgefilm");
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con.image_mc);
    //_root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
}


startLoader();

this.stop(); 


Beispiel 8: Bilder nach Klick auf Vorschaubilder laden, Hauptbilder mit Rahmen und Schatten versehen, Vorschaubilder liegen unter einer Maske und können über Schaltflächen positioniert werden

Anschauen

Nun hat man in einer Bildergalerie meist wohl mehr als drei Bilder liegen. Doch wohin mit den vielen Vorschaubildern? In diesem Beispiel werden die Vorschaubilder nebeneinanderliegend unter einer Maske gezeigt. Bei Bedarf werden die Bilder über Vorwärts-/Rückwärtsschaltflächen nach links bzw. rechts positioniert.

Schritt 1: Der Thumbnail-MC bekommt eine feste Position:

PHP-Code:

//leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    _root.thumbs._x = 50;
    _root.thumbs._y = Stage.height - 150; 


Schritt 2: Wir erstellen einen Masken-MC und zeichnen darin ein Rechteck. Dann weisen wir den Masken-MC mit setMask dem thumbs-MC zu:

PHP-Code:

//Masken-MC erstellen
    _root.createEmptyMovieClip("maske",_root.getNextHighestDepth());
    _root.maske._x = _root.thumbs._x+50;
    _root.maske._y = _root.thumbs._y;
    _root.rechteck(maske,"0xFFFFFF",0,510,0,150,1,0,100);
    
    //Maske setzen
    _root.thumbs.setMask(maske); 


Schritt 3: Es werden 2 MC für die Vorwärts-/Rückwärts-Steuerung erstellt und positioniert:

PHP-Code:

//2 MCs mit Schaltflächen zur Steuerung erstellen
    _root.createEmptyMovieClip("zurueck_mc",_root.getNextHighestDepth());
    _root.createEmptyMovieClip("weiter_mc",_root.getNextHighestDepth());
    
    //positionieren
    zurueck_mc._y = weiter_mc._y = Stage.height - 100;
    weiter_mc._x = Stage.width - 25; 


Schritt 4: In die beiden MCs können beliebige Grafik-MCs eingefügt werden. Ich habe hier mal eine Pfeilgrafik aus der allgemeinen Bibliothek von Flash genommen, in einen MC konvertiert und mit einem Verknüpfungsbezeichner versehen. Dann den MC dupliziert, um 180 Grad gedreht und auch verknüpft. Zur Laufzeit holen wir uns diese beiden MCs dann mit attachMovie auf die Bühne:

PHP-Code:

//zwei fertige Grafiken attachen
    zurueck_mc.attachMovie("zurueck_mc","zurueck_mc",1);
    weiter_mc.attachMovie("weiter_mc","weiter_mc",1); 


Schritt 5: Den MCs werden onRelease-Events zugefügt, die nach Klick eine Neupositionierung des thumbs-MCs bewirken:

PHP-Code:

//und aus den Mcs Schaltflächen machen
    zurueck_mc.onRelease = function(){
        trace("Klick auf zurück");
        _root.thumbs._x -= 250;
    }
    
    weiter_mc.onRelease = function(){
        trace("Klick auf weiter");
        _root.thumbs._x += 250;
    } 


Die Neupositionierung kann natürlich auch smooth scrollen, bspw. mit gescripteten Tweens oder über onEnterFrame-Events.

Hier wieder das ganze Script:

PHP-Code:

//Stufe 8: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln
//mit Rahmen und Schatten
//Thumbnail-MC lässt sich scrollen

import mx.transitions.*;
import flash.filters.DropShadowFilter;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//und zwei weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

//Liste der Bilder
var urls:Array = new Array("kw-bruecke.jpg", "feuerschiff-weser.jpg","seglerhafen.jpg","suedstrand.jpg","wattenmeer.jpg");

//Anzahl der Bilder ermitteln über Länge des Arrays
var len:Number = urls.length;

//mit dem Dropshadowfilter einen Schlagschatten erzeugen
function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}

//ein Rechteck zeichnen für bspw. Bilderrahmen oder Masken
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}


function startLoader(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    _root.thumbs._x = 50;
    _root.thumbs._y = Stage.height - 150;
        
    //Masken-MC erstellen
    _root.createEmptyMovieClip("maske",_root.getNextHighestDepth());
    _root.maske._x = _root.thumbs._x+50;
    _root.maske._y = _root.thumbs._y;
    _root.rechteck(maske,"0xFFFFFF",0,510,0,150,1,0,100);
    
    //Maske setzen
    _root.thumbs.setMask(maske);
    
    //2 MCs mit Schaltflächen zur Steuerung erstellen
    _root.createEmptyMovieClip("zurueck_mc",_root.getNextHighestDepth());
    _root.createEmptyMovieClip("weiter_mc",_root.getNextHighestDepth());
    
    //positionieren
    zurueck_mc._y = weiter_mc._y = Stage.height - 100;
    weiter_mc._x = Stage.width - 25;
    
    //zwei fertige Grafiken attachen
    zurueck_mc.attachMovie("zurueck_mc","zurueck_mc",1);
    weiter_mc.attachMovie("weiter_mc","weiter_mc",1);
    
    //und aus den Mcs Schaltflächen machen
    zurueck_mc.onRelease = function(){
        trace("Klick auf zurück");
        _root.thumbs._x -= 250;
    }
    
    weiter_mc.onRelease = function(){
        trace("Klick auf weiter");
        _root.thumbs._x += 250;
    }
    
    
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*250 +80);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con.image_mc);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        
        _root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
        _root.con.image_mc._x = 10;
        _root.con.image_mc._y = 10;
        
        //MC auf die Bühnen-Mitte setzen:
        _root.con._x = int((Stage.width - _root.con._width)/2);
        _root.con._y = int((Stage.height - _root.con._height)/2)-40;
        _root.shadows(_root.con);
        _root.fader(_root.con,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        //trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        _root.index++;
           if (_root.index < _root.len) {//sind noch weitere zu laden?
           _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
           }
        
        
        mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        }
    }  
}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.thumbs.enabled = false;
      
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.thumbs.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    trace("folgefilm");
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con.image_mc);
    //_root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
}


startLoader();

this.stop(); 


BTW: an der Positionierung der thumbs kann man natürlich noch einiges verbessern...

Beispiel 9: Dynamische Bildergalerie

Anschauen

Bisher waren unsere Bilderlisten ja statisch als Array in den Film eingefügt worden. Das ist allerdings sehr unpraktisch, wenn sich die Bilderliste ändert. Nach jeder Änderung müssten wir den Flashfilm neuveröffentlichen und auf den Server laden.

Abhilfe schafft hier ein Serverscript. Ein kleines PHP-File liest den Bilderfolder aus und sendet eine Komma-separierte Liste der Filenames an den Flashfilm. Wenn Bilder auf den Server geladen oder gelöscht werden, hat der Flashfilm beim nächsten Start die aktualisierten Daten dynamisch zur Verfügung.

Der Flashfilm holt sich die Daten am besten mit der LoadVars-Klasse, schaut euch bitte, falls ihr damit noch nicht sicher umgehen könnt, zuerst mein Tutorial dazu an.

Achtung! Das PHP-Script funzt nicht auf der lokalen Festplatte, sondern tatsächlich nur in Verbindung mit einem Server und PHP als Middleware!

Schritt 1: Wir löschen in dem vorhandenen Schritt die statischen Arraywerte und löschen den Aufruf der startLoader-Funktion. Diese darf ja erst dann gestartet werden, wenn die dynamischen Daten auch tatsächlich als Response im Flashfilm angekommen sind. Dann setzen wir uns eine Instanz der LoadVars-Klasse:

PHP-Code:

lv = new LoadVars();//Instanz erstellen
lv.path = "pics-th/";//Foldernamen an das PHP-Script weiterleiten
lv.onLoad = geladen;//Callback setzen
lv.sendAndLoad("folder_auslesen.php",lv,"POST");//und den Request starten 


Schritt 2: Das PHP-Script könnte folgendermaßen aussehen:

PHP-Code:

<?php
   $path = stripslashes($_POST["path"]);//Pfadangabe des Ordners
   $handle = opendir ($path);//Oeffnen des Ordners
       
   //alle Einträge auslesen 
   while ($file = readdir ($handle)) {
      if ($file != "." && $file != ".."){
         $fileArray[] = $file;
      }
   }
   closedir($handle);
   asort($fileArray);//Liste sortieren
    
   //Ausgabe für den Flashfilm vorbereitem
   echo "liste=";
   foreach($fileArray as $row) {
      echo $row.',';
   }
?>

Schritt 3: Wenn alles funktioniert hat, sendet der Server jetzt einen durch Kommas getrennten String an den Flashfilm. Den Response empfangen wir in der Funktion "geladen" und splitten ihn über einen String.split in ein Array. Dann können wir auch die Startfunktion aufrufen, denn jetzt haben wir ja die dynamischen Daten:

PHP-Code:

function geladen(erfolgreich) {
    if(erfolgreich) {
        trace("empfangene Variable: "+this.liste);
        this.liste = this.liste.substring(0,this.liste.length-1);
        //Liste der Bilder
        _root.urls = this.liste.split(",");
                
        //Anzahl der Bilder ermitteln über Länge des Arrays
        _root.len = _root.urls.length;
        
        //jetzt erst die Bilder laden:
        _root.startLoader();
    }
    else {
            trace("Fehler beim Laden");
    }
} 


Und auch hier wieder das gesamte Script:

PHP-Code:

//Stufe 9: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln
//mit Rahmen und Schatten
//Thumbnail-MC lässt sich scrollen
//Bilderliste wird dynamisch per LoadVars-Klasse über ein PHP-Script nachgeladen

import mx.transitions.*;
import flash.filters.DropShadowFilter;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//und zwei weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;


function geladen(erfolgreich) {
    if(erfolgreich) {
        trace("empfangene Variable: "+this.liste);
        this.liste = this.liste.substring(0,this.liste.length-1);
        //Liste der Bilder
        _root.urls = this.liste.split(",");
        //_root.dtx.text += "\nListe="+_root.urls;//zum testweisen Ausgeben der Liste
        
        //Anzahl der Bilder ermitteln über Länge des Arrays
        _root.len = _root.urls.length;
        
        //jetzt erst die Bilder laden:
        _root.startLoader();
    }
    else {
            trace("Fehler beim Laden");
    }
}
lv = new LoadVars();//Instanz erstellen
lv.path = "pics-th/";//Foldernamen an das PHP-Script weiterleiten
lv.onLoad = geladen;//Callback setzen
lv.sendAndLoad("folder_auslesen.php",lv,"POST");//und den Request starten 




//mit dem Dropshadowfilter einen Schlagschatten erzeugen
function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}

//ein Rechteck zeichnen für bspw. Bilderrahmen oder Masken
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}


function startLoader(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    _root.thumbs._x = 50;
    _root.thumbs._y = Stage.height - 150;
        
    //Masken-MC erstellen
    _root.createEmptyMovieClip("maske",_root.getNextHighestDepth());
    _root.maske._x = _root.thumbs._x+50;
    _root.maske._y = _root.thumbs._y;
    _root.rechteck(maske,"0xFFFFFF",0,510,0,150,1,0,100);
    
    //Maske setzen
    _root.thumbs.setMask(maske);
    
    //2 MCs mit Schaltflächen zur Steuerung erstellen
    _root.createEmptyMovieClip("zurueck_mc",_root.getNextHighestDepth());
    _root.createEmptyMovieClip("weiter_mc",_root.getNextHighestDepth());
    
    //positionieren
    zurueck_mc._y = weiter_mc._y = Stage.height - 100;
    weiter_mc._x = Stage.width - 25;
    
    //zwei fertige Grafiken attachen
    zurueck_mc.attachMovie("zurueck_mc","zurueck_mc",1);
    weiter_mc.attachMovie("weiter_mc","weiter_mc",1);
    
    //und aus den Mcs Schaltflächen machen
    zurueck_mc.onRelease = function(){
        trace("Klick auf zurück");
        _root.thumbs._x -= 250;
    }
    
    weiter_mc.onRelease = function(){
        trace("Klick auf weiter");
        _root.thumbs._x += 250;
    }
    
    
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*250 +80);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[0], _root.con.image_mc);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        
        _root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
        _root.con.image_mc._x = 10;
        _root.con.image_mc._y = 10;
        
        //MC auf die Bühnen-Mitte setzen:
        _root.con._x = int((Stage.width - _root.con._width)/2);
        _root.con._y = int((Stage.height - _root.con._height)/2)-40;
        _root.shadows(_root.con);
        _root.fader(_root.con,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        //trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        _root.index++;
           if (_root.index < _root.len) {//sind noch weitere zu laden?
           _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
           }
        
        
        mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        }
    }  
}

function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.thumbs.enabled = false;
      
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.thumbs.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}


function folgefilm(){
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con.image_mc);
    //_root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con);
    
}
this.stop(); 


Beispiel 10: Dynamische Bildergalerie mit XML und Text

Anschauen

Zum Abschluß der AS2-Bildergalerien hier noch ein Beispiel, wie man sowohl die Bilder-URLs als auch Begleittexte mit XML nachladen kann.

Schritt 1: Wir erstellen uns ein XML-File mit den URLs und Begleittexten (bitte Unicode UTF-8-codiert abspeichern, sonst gibt es Probleme mit den Umlauten):

<?xml version="1.0" encoding="UTF-8"?>
<galerie>
	<bild url="feuerschiff-weser.jpg" text="Feuerschiff Weser" />
	<bild url="hafenanlage.jpg" text="Hafenanlage" />
	<bild url="hafenschlepper-langeness.jpg" text="Hafenschlepper Langeness" />
	<bild url="kw-bruecke.jpg" text="KW-Brücke" />
	<bild url="marinemuseum.jpg" text="Marinemuseum" />
	<bild url="minensucher-weilheim.jpg" text="Minensucher Weilheim" />
	<bild url="seglerhafen.jpg" text="Seglerhafen" />
	<bild url="suedstrand.jpg" text="Südstrand" />
	<bild url="uboot-u10.jpg" text="UBoot U10" />
	<bild url="unterderkw-bruecke.jpg" text="Unter der KW-Brücke" />
	<bild url="wattenmeer.jpg" text="Wattenmeer" />
	<bild url="wattenmeerhaus.jpg" text="Wattenmeerhaus" />
	<bild url="zerstoerer-moelders.jpg" text="Zerstörer Mölders" />
</galerie>

Schritt 2: Wir ändern unser letztes Script ab und lassen über ein XML-Objekt das XML-File einlesen:

PHP-Code:

var bilderXML:XML = new XML();// Neues XML-Objekt anlegen 
bilderXML.ignoreWhite = true;// whitespace in XML ignorieren (z.B. CRLF etc)
bilderXML.onLoad = onload;//onLoad-Handler zuweisen
bilderXML.load("bilderliste.xml"); 


Schritt 3: Im onLoad-Handler lesen wir die Liste der XML-Knoten aus:

PHP-Code:

function onload(erfolgreich) {
    if(erfolgreich) {
        
        var knotenliste:Array = new Array();
        knotenliste = this.firstChild.childNodes;//der jeweilige erste Eintrag in den Knoten
        
        
        
    }
    else {
            trace("Fehler beim Laden");
    }
} 


Über diese Knotenliste können wir jetzt auf die einzelnen Einträge und deren Attribute zugreifen:

PHP-Code:

function onload(erfolgreich) {
    if(erfolgreich) {
        
        var knotenliste:Array = new Array();
        knotenliste = this.firstChild.childNodes;//der jeweilige erste Eintrag in den Knoten
        
        //Anzahl der Bilder ermitteln über Länge der Knotenliste
        var len:Number = knotenliste.length;    
        _root.len = len;
        
        //alle Einträge durchwandern und die Attribute in die Arrays setzen
        for(var i:Number=0;i<_root.len;i++){
            _root.urls[i] = knotenliste[i].attributes.url;
            _root.labellist[i] = knotenliste[i].attributes.text;
        }
                
        //jetzt erst die Bilder laden:
        _root.startLoader();
        
    }
    else {
            trace("Fehler beim Laden");
    }
} 


Schritt 4: Damit haben wir wieder unsere Liste mit den URLs. Jetzt können wir noch denTextfeld-MC unter dem Hauptbild zufügen:

PHP-Code:


//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//und 3 weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);
var text_mc:MovieClip = con.createEmptyMovieClip("text_mc",3); 


Da der ganze Container-MC über Alpha-Tweens ein- und ausgefadet wird, benötigt der Player die Vektorinformationen des genutzten Fonts. Dazu wird der Font über "neue Schriftart" in die Bibliothek geladen und mit dem Verknüpfungsbezeichner "Arial" versehen. Jetzt können wir das Textfeld erstellen und mit embedFonts=true einbetten:

PHP-Code:

//großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        
        _root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
        _root.con.image_mc._x = 10;
        _root.con.image_mc._y = 10;
        
        //MC auf die Bühnen-Mitte setzen:
        _root.con._x = int((Stage.width - _root.con._width)/2);
        _root.con._y = int((Stage.height - _root.con._height)/2)-120;
        _root.shadows(_root.con);
        
        //Text unter das Bild setzen
        var format:TextFormat = new TextFormat();
        format.align = "center";
        _root.txt = _root.text_mc.createTextField("txt",1,0,_root.con.border_mc._height+10,_root.con.border_mc._width,40);
        
        _root.txt.html = true;
        _root.txt.wordWrap = true;
        _root.txt.multiline = true;
        _root.txt.embedFonts = true;
        if(_root.starter){
            _root.starter = false;
            _root.index = 0;
        }
        _root.txt.htmlText = "<font face='Arial' size='16' color='#000000'>"+_root.labellist[_root.index]+"</font>";
        _root.txt.setTextFormat(format);
        
        _root.fader(_root.con,true);
        
    } 


Schritt 5: Eine kleine Anpassung im Script sorgt dafür, dass die Vorwärts-/Rückwärtsschaltflächen-Klicks auf die Menge der Thumbs begrenzt werden:

PHP-Code:

zurueck_mc.onRelease = function(){
        trace("Klick auf zurück");
        
        //Ende der Liste erreicht? Dann begrenzen...
        if(_root.thumbs._x > -2700) _root.thumbs._x -= 250;
    }
    
    weiter_mc.onRelease = function(){
        trace("Klick auf weiter");
        
        //Ende der Liste erreicht? Dann begrenzen...
        if(_root.thumbs._x < 50) _root.thumbs._x += 250;
    } 


Und hier das gesamte Script:

PHP-Code:

//Stufe 10: Nachladen mehrerer Bilder in einen MC
//zwischen den Bildern über Thumbnail-MCs wechseln
//mit Rahmen und Schatten
//Thumbnail-MC lässt sich begrenzt scrollen
//Hauptbild mit Label
//Bilderliste und Texte werden dynamisch per XML-File nachgeladen

import mx.transitions.*;
import flash.filters.DropShadowFilter;

//leeren MC erstellen
this.createEmptyMovieClip("con",1);

//und 3 weitere MCs einbetten
var border_mc:MovieClip = con.createEmptyMovieClip("border_mc",1);
var image_mc:MovieClip = con.createEmptyMovieClip("image_mc",2);
var text_mc:MovieClip = con.createEmptyMovieClip("text_mc",3);

//zuerst transparent setzen
this.con._alpha = 0;

//Zähler
var index:Number = 0;

var urls:Array = new Array();
var labellist:Array = new Array();
            
var starter = true;

//****************************************************************************************************************//

var bilderXML:XML = new XML();// Neues XML-Objekt anlegen 
bilderXML.ignoreWhite = true;// whitespace in XML ignorieren (z.B. CRLF etc)
bilderXML.onLoad = onload;//onLoad-Handler zuweisen
bilderXML.load("bilderliste.xml");


function onload(erfolgreich) {
    if(erfolgreich) {
        
        var knotenliste:Array = new Array();
        knotenliste = this.firstChild.childNodes;//der jeweilige erste Eintrag in den Knoten
        
        //Anzahl der Bilder ermitteln über Länge der Knotenliste
        var len:Number = knotenliste.length;    
        _root.len = len;
        
        //alle Einträge durchwandern und in die Attribute in die Arrays setzen
        for(var i:Number=0;i<_root.len;i++){
            _root.urls[i] = knotenliste[i].attributes.url;
            _root.labellist[i] = knotenliste[i].attributes.text;
        }
                
        //jetzt erst die Bilder laden:
        _root.startLoader();
        
    }
    else {
            trace("Fehler beim Laden");
    }
}

//****************************************************************************************************************//
//mit dem Dropshadowfilter einen Schlagschatten erzeugen
function shadows(obj){
    var distance:Number = 0;
    var angleInDegrees:Number = 90;
    var color:Number = 0x000000;
    var alpha:Number = .9;
    var blurX:Number = 8;
    var blurY:Number = 8;
    var strength:Number = 1;
    var quality:Number = 3;
    var inner:Boolean = false;
    var knockout:Boolean = false;
    var hideObject:Boolean = false;
    
    var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
    var filterArray:Array = new Array();
    filterArray.push(filter);
    obj.filters = filterArray;
}
//****************************************************************************************************************//
//ein Rechteck zeichnen für bspw. Bilderrahmen oder Masken
function rechteck(obj,hg,x1,x2,y1,y2,gef,ls,alph){
    with (obj){
        clear();
        if(gef==1){
            beginFill(hg, alph);
            moveTo(x1, y1);
            lineTo(x2, y1);
            lineTo(x2, y2);
            lineTo(x1, y2);
            lineTo(x1, y1);
            endFill();
            
        }
        else{
            ls = (ls == undefined || ls == 0) ? 2 : ls;
            lineStyle(ls,hg,100 );//ls = Linienstärke
            moveTo(0,0);
            lineTo(x2,0); 
            lineTo(x2,y2);
            lineTo(0,y2);
            lineTo(0,0);
        }
    }
}
//****************************************************************************************************************//
function ladeSteuerung(){
    //leeren MC für Thumbnail-Leiste erstellen
    _root.createEmptyMovieClip("thumbs",_root.getNextHighestDepth());
    _root.thumbs._x = 50;
    _root.thumbs._y = Stage.height - 200;
        
    //Masken-MC erstellen
    _root.createEmptyMovieClip("maske",_root.getNextHighestDepth());
    _root.maske._x = _root.thumbs._x+50;
    _root.maske._y = _root.thumbs._y;
    _root.rechteck(maske,"0xFFFFFF",0,510,0,150,1,0,100);
    
    //Maske setzen
    _root.thumbs.setMask(maske);
    
    //2 MCs mit Schaltflächen zur Steuerung erstellen
    _root.createEmptyMovieClip("zurueck_mc",_root.getNextHighestDepth());
    _root.createEmptyMovieClip("weiter_mc",_root.getNextHighestDepth());
    
    //positionieren
    zurueck_mc._y = weiter_mc._y = Stage.height - 150;
    weiter_mc._x = Stage.width - 25;
    
    //zwei fertige Grafiken attachen
    zurueck_mc.attachMovie("zurueck_mc","zurueck_mc",1);
    weiter_mc.attachMovie("weiter_mc","weiter_mc",1);
    
    //und aus den Mcs Schaltflächen machen
    zurueck_mc.onRelease = function(){
        trace("Klick auf zurück");
        
        //Ende der Liste erreicht? Dann begrenzen...
        if(_root.thumbs._x > -2700) _root.thumbs._x -= 250;
    }
    
    weiter_mc.onRelease = function(){
        trace("Klick auf weiter");
        
        //Ende der Liste erreicht? Dann begrenzen...
        if(_root.thumbs._x < 50) _root.thumbs._x += 250;
    }
    
}
//****************************************************************************************************************//
function startLoader(){
    ladeSteuerung();
    //Liste der MCs im MC "thumbs" erstellen
     _root.mcs  = new Array();
    
    //leere MCs erzeugen
    for(var i=0;i<_root.len;i++){
       _root.mcs.push(_root.thumbs.createEmptyMovieClip("con"+i,_root.thumbs.getNextHighestDepth()));
       _root.thumbs["con"+i]._x = (i*250 +80);//nebeneinander positionieren
       _root.thumbs["con"+i].ID = i;//Zähler merken
    }

    //Lauscher und MovieClipLoader-Instanz für die Thumbs erstellen
    _root.mclListener = new Object();
    _root.mcLoader = new MovieClipLoader();
    _root.mcLoader.addListener(_root.mclListener);
    
    //Lauscher und MovieClipLoader-Instanz für die großen Bilder erstellen
    _root.mclListener2 = new Object();
    _root.mcLoader2 = new MovieClipLoader();
    _root.mcLoader2.addListener(_root.mclListener2);
    
    //das erste große Bild laden
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con.image_mc);
    
    //großes Bild ist geladen und MC wurde befüllt:
    _root.mclListener2.onLoadInit = function(mc:MovieClip) {
        
        _root.rechteck(_root.con.border_mc,"0xFFFFFF",0,mc._width+20,0,mc._height+20,1,0,100);
        _root.con.image_mc._x = 10;
        _root.con.image_mc._y = 10;
        
        //MC auf die Bühnen-Mitte setzen:
        _root.con._x = int((Stage.width - _root.con._width)/2);
        _root.con._y = int((Stage.height - _root.con._height)/2)-120;
        _root.shadows(_root.con);
        
        //Text unter das Bild setzen
        var format:TextFormat = new TextFormat();
        format.align = "center";
        _root.txt = _root.text_mc.createTextField("txt",1,0,_root.con.border_mc._height+10,_root.con.border_mc._width,40);
        
        _root.txt.html = true;
        _root.txt.wordWrap = true;
        _root.txt.multiline = true;
        _root.txt.embedFonts = true;
        if(_root.starter){
            _root.starter = false;
            _root.index = 0;
        }
        _root.txt.htmlText = "<font face='Arial' size='16' color='#000000'>"+_root.labellist[_root.index]+"</font>";
        _root.txt.setTextFormat(format);
        
        _root.fader(_root.con,true);
        
    }
    
    //und den ersten Thumb laden
    _root.mcLoader.loadClip("pics-th/"+_root.urls[index], _root.mcs[_root.index]);
    
    //Thumb ist geladen und MC wurde befüllt:
    _root.mclListener.onLoadInit = function(mc:MovieClip) {
        //trace("fertig, beladen wurde "+mc);
        mc.ID = _root.index;//index als MC-Variable merken
        
        _root.index++;
           if (_root.index < _root.len) {//sind noch weitere zu laden?
           _root.mcLoader.loadClip("pics-th/"+_root.urls[_root.index], _root.mcs[_root.index]);
           }
        
        
        mc.onRelease = function(){
            trace("this="+this);
            trace("this.ID="+this.ID);
            
            _root.index = this.ID;
            
            //aktuelles Bild ausblenden
            _root.fader(_root.con,false);
        }
    }  
}
//****************************************************************************************************************//
function fader(mc,blende){
   //mc ist das ein- oder auszublendende Objekt
   //blende ist true oder false, d.h. blendet ein oder aus
   
   //während des Fadens die Schaltflächen sperren
   _root.thumbs.enabled = false;
      
    if(blende){
      //einblenden von alpha=0 bis alpha=100 in 0,6 Sekunden
      var tw1:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 0, 100, 0.6, true);
      tw1.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.thumbs.enabled = true;
      }
   }
   else{//ausblenden
      var tw2:Tween = new Tween(mc, "_alpha", mx.transitions.easing.None.easeNone, 100, 0, 0.6, true);
      tw2.onMotionFinished = function() {//wenn ausblenden beendet...
        _root.folgefilm();//nächsten Film laden und einblenden
      }
   }
}
//****************************************************************************************************************//

function folgefilm(){
    trace("folgefilm");
    
    _root.mcLoader2.loadClip("pics-gr/"+_root.urls[_root.index], _root.con.image_mc);
    _root.txt.htmlText = "";
    
}
//****************************************************************************************************************//



this.stop(); 


Beispiel 11: Ein Bild nachladen und zentrieren mit Rahmen und Schatten in AS3

Anschauen

Schritt 1: In AS3 ist die Vorgehensweise ein wenig anders. Wir lagern zuerst einige Funktionen in eigene Klassen aus, den Anfang macht die Shadow-Funktion, die den Schatten um das Bild erstellen soll. Eine entsprechende Klasse könnte folgendermaßen aussehen:

PHP-Code:

//shadow.as
package 
{
    import flash.display.Sprite;
    import flash.filters.DropShadowFilter;

    public class Shadow extends Sprite{
        public function Shadow(obj:*){
            var distance:uint = 0;
            var angleInDegrees:uint = 90;
            var color:uint = 0x000000;
            var alpha:Number = .9;
            var blurX:uint = 8;
            var blurY:uint = 8;
            var strength:uint = 1;
            var quality:uint = 3;
            var inner:Boolean = false;
            var knockout:Boolean = false;
            var hideObject:Boolean = false;
            
            var filter:DropShadowFilter = new DropShadowFilter(distance,angleInDegrees,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);
            var filterArray:Array = new Array();
            filterArray.push(filter);
            obj.filters = filterArray;

        }
        
    }
} 


Ein Package ist im Grunde genommen nur ein Folder. Mit Packages hat man aber auch die Möglichkeit, Klassen mit gleichen Bezeichnern in verschiedenen Packages unterzubringen. Danach werden verschiedene Klassen importiert, die im Script später benötigt werden.

"class" ist der Typ der Klasse und shadow der Klassenbezeichner. Auch wenn ihr von der objektorientierten Programmierung (OOP) noch nicht viel gehört habt, mit Klassen habt ihr auch schon in AS1/2 gearbeitet. Denn die vielen Flashobjekte wie MovieClips u.ä. sind auch Klassen.

Man unterscheidet zwischen den statischen Klassen wie bspw. Math und den nichtstatischen wie bspw. LoadVars. Da man nicht direkt mit einer Klasse arbeiten kann, sondern nur mit einer "Kopie", wird diese Kopie mit new instanziiert. Über den Instanznamen kann dann auf die "Kopie" zugreifen, bspw.:

PHP-Code:

var meinMC:MovieClip();

meinMC = new MovieClip(); 


Bei statischen Klassen wie Math wird das new weggelassen:

PHP-Code:

trace("Math.PI="+Math.PI);//gibt: Math.PI=3.141592653589793 


Ohne tiefer in die OOP einzugehen sei hier noch der Hinweis gestattet, dass statische Klassen nicht vererbt werden können, nichstatische schon.

Zurück zum Beispiel: in die Klasse ist nur eine Konstruktorfunktion eingebettet, die als Parameter das Objekt übergeben bekommt, an das das Schatten-Array angehängt werden soll. Die weiteren Parameter für den DropShadowFilter könnt ihr in der Flash-Hilfe nachlesen.

Schritt 2: Die Funktion für das Rechteck wird auch ausgelagert. Hier habe ich mal ein Rechteck mit der Shape-Klasse erstellt. Es lässt sich aber natürlich auch eine Oldschool-Variante mit der Zeichen-API erstellen.

PHP-Code:

//Rectangle.as
package {

    import flash.display.*;
    
    public class Rectangle extends Sprite {
        
        
        public function Rectangle(container:Sprite,wd:Number,ht:Number,color:uint,alpha:Number,ln:Number,fill:Boolean,shadw:Boolean=false ) {
            //neues Container-Objekt erstellen
            var sprite:Sprite = new Sprite();

            //Shape-Instanz erstellen
            var shape:Shape = new Shape();

            //und in die Display List hängen
            addChild(shape);
            
            //Linienstil und Farben setzen
            shape.graphics.lineStyle(ln, color, alpha);
            if(fill){
                shape.graphics.beginFill(color);
            }
            
            //ein Rechteck im Shape zeichnen
            shape.graphics.drawRect(0,0,wd,ht);
            shape.graphics.endFill();

            //das Shape ins Sprite hängen
            sprite.addChild(shape);
            sprite.alpha = alpha;

            //das Sprite mit dem Shape ins Container-Objekt hängen
            container.addChild(sprite);
            
            //falls ein Schatten gesetzt werden soll die Shadow-Klasse instanziieren
            if(shadw){
                var shadow:Shadow = new Shadow(sprite);
            }
        }
        
    }
} 


Schritt 3: Als nächstes benötigen wir eine Funktion, die das Bild laden soll und ggf. mit einem Preloader überprüft, ob das Laden beendet ist. Wir lagern diese Funktion in die Klasse "Imageladen" aus:

PHP-Code:

//ImageLaden.as
package {
    
    import fl.transitions.*;
    import fl.transitions.easing.*;

    
    import flash.display.*;
    import flash.events.*;
    import flash.net.URLRequest;
    import Rectangle;
        
    
    public var loader:Loader;
        public var container:Sprite;
        public var border:Boolean;
        public var border_padding:uint = 5;
        public var border_spr:Sprite;
        public var startX:uint;
        public var startY:uint;
        
        public var id_internal:uint;
        
        public function ImageLaden(pictURL:String,con:Sprite,br:Boolean=false) {
            

            // Falls kein Container-Objekt übergeben wurde, wird jetzt eines erstellt
            if(!con){
                container = new Sprite();

                //zuerst transparent
                container.alpha = 0;
                //und in die Display List hängen
                addChild(container);
            }
            else{
                this.container = con;
            }
            
               //Rahmen oder nicht...
            border = br;
            
               //mit der Loader-Klasse das Bild nachladen
            loader = new Loader();
            addChild( loader );
            var pictURLReq:URLRequest = new URLRequest(pictURL);
            
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadInit);
                        
            // jetzt das Laden starten...
            loader.load( pictURLReq );
        } 


Die Loader-Klasse funzt wie die MovieClipLoader-Klasse. Über einen COMPLETE-Event können wir eine Funktion starten, die uns mitteilt, wenn das Laden beendet wurde. Erst dann werden Rahmen und Schatten gesetzt:

PHP-Code:

/**
         *    Bild ist geladen, jetzt noch Rahmen und Schatten setzen
         */
        private function loadInit(event:Event):void {
            if(border){
                border_spr = new Sprite();
                border_spr.x = border_padding * (-1); 
                border_spr.y = border_padding * (-1); 
                
                container.addChild(border_spr);
                
                var wd:uint = loader.width + (2*border_padding);
                var ht:uint = loader.height + (2*border_padding);
                var rechteck:Rectangle = new Rectangle(border_spr,wd,ht,0xFFFFFF,1.0,1,true,true);
            }
            container.addChild(loader);
            dispatchEvent(new Event("imageLadenFertig"));
        } 


"dispatchEvent" ist eine nette neue Funktion in AS3. Damit können nämlich eigene Customevents erstellt und über Listener abgefangen werden.

Schritt 4: Wir setzen in die Klasse noch einige Funktionen, die bspw. auf die Transparenz des Bildes einwirken und dadurch Faderfunktionen bereitstellen. Das wird hier durch Tweens erreicht ähnlich wie in den vorherigen AS2-Beispielen:

PHP-Code:

public function alpha_transition(richtung:String):void{
            var tw:Tween;
            
            if(richtung == "fadeIn"){
                tw = new Tween(container, "alpha", None.easeInOut, 0, 1, 0.6, true);
                //addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
            }
            else if(richtung == "fadeOut"){
                tw = new Tween(container, "alpha", None.easeInOut, 0, 1, 0.6, true);
                //addEventListener(Event.ENTER_FRAME, onEnterFrameHandler2);
            }
        } 


Wie die gesamte Klasse ausseht, könnt ihr euch im getoppten Beispiel-RAR anschauen.

Schritt 5: Wir erstellen eine Dokumentenklasse, die das ganze starten soll. Den Klassenbezeichner "Bildergalerie" tragen wir im Eigenschaftenbedienfeld bei DocumentClass ein.

PHP-Code:

//Bildergalerie.as
package {
   import ImageLaden;
    
   import flash.display.*;
   import flash.events.*;

   public class Bildergalerie extends Sprite
   {
      public var myImageMC:MovieClip;
      public var pic:ImageLaden;
      public var zielcontent:* = this;//das Sprite
        
      //Konstruktor
      public function Bildergalerie()
      {
         //die Folgefunktion aufrufen
         init();
      }
        
      private function init():void
      {
         //einen leeren MC als Container-MC erstellen
         myImageMC = new MovieClip();
            
         //zuerst transparent setzen
         myImageMC.alpha = 0;            

         //den Container-MC in das aktuelle Sprite hängen
         zielcontent.addChild(myImageMC);
            
         //jetzt die ImageLaden-Klasse instanziieren und ein Image laden
         pic = new ImageLaden("pics-gr/feuerschiff-weser.jpg",myImageMC,true);//mit Rahmen

         //dieser Listener soll den Event abfangen, den wir über dispatchEvent in der Klasse gesetzt haben
         pic.addEventListener("imageLadenFertig",imageLadenFertigHandler);
      }

      //hier die Funktion, die gestartet wird, wenn das Laden abgeschlossen ist        
      private function imageLadenFertigHandler(event:Event):void
      {
         trace("Bild geladen");
            
         //jetzt können wir auf die Größe des Images zugreifen und in der Bühne mittig zentrieren
         myImageMC.x = (stage.stageWidth - myImageMC.width)/2;
         myImageMC.y = (stage.stageHeight - myImageMC.height)/2;
            
         //und zum Schluss wird das geladene Bild eingefadet
         pic.alpha_transition("fadeIn");
      }
   }
}