Bilderschieber – Teil 2: Die Programmierung
von Frank Puscher
Auf der Suche nach immer neuen Varianten für Bildergalerien und deren Benutzeroberfläche bleibt man entweder bei den ganz spektakulären oder den vollkommen intuitiven Exemplaren hängen. Der Bilderschieber gehört zu letzterer Gattung.
Die Programmierung für die Animationen findet an zwei Stellen statt, im MovieClip mit der Bildanimation und in einem SteuerungsClip.
Ausgehend vom letzten Arbeitsschritt im ersten Teil dieses Workshops, befinden wir uns im Bearbeitungsmodus des BildanimationsClips. Sie sollten also vor sich die Timeline mit der Maske, den Buttons und dem Bildmotiv sehen.
Die Programmierung
Die grafischen Arbeiten sind beendet. Der Rest ist ActionScript. Beginnen wir bei den beiden Buttons. In Frame 1 bekommt der Button folgende Programmierung:
on (rollOver) {
_root.ichBins=this._name.substr(4,1);
_root.steuerung.play();
}
In Frame 10 ist sie etwas verschieden:
on (rollOver) {
_root.ichBins=this._name.substr(4,1);
_root.steuerung.gotoAndPlay(5);
}
Die Buttons sind nur jeweils in einem Frame zu sehen
Die erste Zeile innerhalb des RollOver-Befehls ist enorm spannend. Sie macht aus dem Instanznamen des von der Maus berührten MovieClips eine Ordnungszahl. Diese Zahl brauchen um später festzustellen, welche MotivClips geöffnet bzw. geschlossen werden müssen. Schließlich kann es vorkommen, dass der Nutzer mit der Maus nicht das nächste sondern das übernächste Motiv wählt. Dann müssen neben dem aktuell sichtbaren und dem berührten Clip noch weitere verschoben werden.
Der AS-Begriff „.substr(4,1)“ extrahiert vom Instanznamen das fünfte Zeichen (bei 0 geht’s los) mit einer Länge von einem Zeichen und schreibt es in die Variable „ichBins“.
Der zweite Befehl startet ein Steuerungsclip, dass für die Animationen zuständig ist.
Erstellen Sie nun eine neue Ebene für „Aktionen“. Im ersten und zehnten Frame steht natürlich ein „stop()“. Zusätzlich im ersten Frame und auch im dreizehnten steht: „left=true;“. Das werden wir verwenden, damit immer die richtige der beiden Animationshälften abgespielt wird. Analog steht im Frame 5: „left=false;“.
Nach dem Laden der Clips und Bilder passiert i Szene 1 nichts mehr
Das MovieClip ist fertig. Kehren Sie zurück zu Szene 1. Löschen Sie das Clip von der Bühne. Nennen Sie die Ebene „Aktionen“ und schreiben Sie im ersten Frame:
current=9;
kontrolleR=0;
kontrolleL=0;
Die Variable „current“ beschreibt das aktuell geöffnete Clip. Die Variablen „kontrolle“ dienen als Zähler für die Animationen. Einmal rechts und einmal links.
Im zweiten Frame (Schlüsselbild setzen) wird das MovieClip dupliziert und mit den Bildern aus dem Ordner befüllt.
for(i=0;i<10;i++){
var t = this.attachMovie("bild", "bild"+i, i+1);
loadMovie("bild"+i+".jpg", "bild"+i+".platzhalter");
t._x=450+(i*15);
t._y=350;
}
stop();
Wir lassen die Variable „i“ in einer For-Schleife von 0 bis 9 durchlaufen und erzeugen zu jedem „i“ eine Instanz des MovieClips, füllen dieses mit dem Bild mit der gleichen Ordnungsnummer (im Clip bild3 liegt das Motiv bild3.jpg) und platzieren die Clips mit einem Abstand von 15 Pixel nebeneinander. Durch den Term (i*15) wird jedes Clip 15 Pixel weiter rechts angesiedelt, als sein Vorgänger.
Achten Sie auf das „i“ im Z-Index, also im dritten Parameter des Befehls attachMovie. Es bewirkt, dass die Clips von links nach rechts gestapelt werden. Das Clip mit dem Instanznamen „bild9“ liegt also ganz oben und ist am Anfang sichtbar. Was wir ja bereits mit der Variable „current“ definiert haben.
Die Steuerung
Nun fehlt noch das Herzstück. Erzeugen Sie ein neues MovieClip. Es bleibt grafisch leer und dient nur dem Auslösen der diversen Animationen.
Je nach Richtung der gewünschten Animation wird entweder Frame 2 oder Frame 5 im Steuerungsclip gestartet
Im ersten Frame erfolgt die Initialisierung:
_root.kontrolleR = 0;
_root.kontrolleL = 0;
stop();
Zwar sind die Kontrollvariablen schon geschrieben, doch dient diese Variablendefinition als Reset nach jeder beendeten Animationssequenz.
Frame 3 und Frame 7 dienen nur zur Herstellung von je einer Schleife:
gotoAndPlay(2);
bzw. gotoAndPlay(5);
Frame 5 enthält ebenfalls eine Initialisierung, falls der Nutzer direkt zwischen beiden Animationsrichtungen wechselt:
_root.kontrolleL = 0;
Frame 2 und Frame 6 tragen die animatorische Hauptlast. Sie sind fast identisch, nur die Berechnung der Reihenfolge ist unterschiedlich und die verwendeten Variablen sind verschieden.
Frame 2 enthält folgendes Skript:
differenzR=_root.current - _root.ichBins;
if(_root.kontrolleR<=differenzR){
summeR=Number(_root.current) - Number(_root.kontrolleR);
playerR = eval("_root.bild"+summeR);
if((playerR.left==true)and(summeR>0)){
playerR.play();
}
_root.kontrolleR=_root.kontrolleR+1;
}else{
_root.current = _root.ichBins;
gotoAndStop(1);
}
In der ersten Zeile berechnen wir den Abstand der Instanznamen zwischen dem berührten Bild, das als nächstes angezeigt werden soll, und dem aktuell sichtbaren Bild. Alle Instanznamen, die zwischen den beiden Motiven liegen müssen ebenso nach rechts geschoben werden, wie das aktuell sichtbare Bild. Nur das neue Motiv wird nicht animiert. Es wird quasi freigelegt.
Die große If-Klammer prüft also die Zählung der Variablen „kontrolle“. Sie wird immer größer (Zeile 8) bis sie den Wert von „differenzR“ erreicht. Durch die Subtraktion der „kontrolle“ vom Wert des aktuellen Motivs „current“ wird stets das nächste Bild zur Linken animiert, bis das gewünschte neue Bild sichtbar ist. Die Variable „playerR“ ist nur ein Hilfskonstrukt zur Vereinfachung für den Abspielbefehl „playerR.play();“.
Letzterer ist konditioniert. Er wird nur ausgelöst wenn die „summeR“ noch größer ist als 0. So kann das letzte Motiv in unserem Stapel gar nicht animiert werden. Muss es auch nicht, darunter ist schließlich nur noch „Tischplatte“ zu sehen.
Die zweite Konditionierung ist ein kleiner Sicherheitspuffer. Sie fragt, ob sich das aktuell zu animierende Motiv überhaupt auf der linken Seite befindet. Sonst könnte es bei ganz schnellen Mausbewegungen zu Fehlanimationen kommen.
Das Skript in Frame 6 sieht folgendermaßen aus, die Unterschiede sind fett dargestellt.:
differenzL=_root.ichBins - _root.current;
if(_root.kontrolleL<=differenzL){
summeL=Number(_root.current) + Number(_root.kontrolleL);
playerL = eval("_root.bild"+summeL);
if((playerL.left==false)and(summeL>0)){
playerL.play();
}
_root.kontrolleL=_root.kontrolleL+1;
}else{
_root.current = _root.ichBins;
gotoAndStop(1);
}
Achten Sie noch auf die letzten fünf Zeilen. In Zeile 8 wird der Zähler „kontrolle“ um einen Wert erhöht. Ist die If-Bedingung erfüllt und der Wert von „kontrolle“ höher als der von „differenz“, aktualisiert der Befehl _root.current = _root.ichBins; den Wert für das aktuell sichtbare Motiv und das Steuerungsclip wird in den ersten Frame zurückgeschickt, wo die Kontrollvariabeln zurückgesetzt werden.
Zum Schluss kehren Sie zurück auf Szene 1 und ziehen Das Steuerungsclip aus der Bibliothek auf die Bühne. Testen Sie den Film. Beim Laden der Bilder kann es passieren, das sie eine andere Position einnehmen, als das ursprüngliche Platzhalterbild. Dann ist vermutlich der Registrierungspunkt des „bild“ MovieClips in der linken oberen Ecke. Passen Sie die Bildposition des Platzhalters in allen drei Schlüsselbildern entsprechend an. Normalerweise liegen die Positionswerte bei (-400; -300).
Wenn der Ablauf funktioniert, müssen Sie noch zwei Dinge tun: Klicken Sie in der Bibliothek doppelt auf das Icon des Button und ziehen Sie den schwarzen Punkt vom Frame „Auf“ in den Frame „Aktiv“, um ihn unsichtbar zu machen. Und nun klicken Sie doppelt auf das MovieClip „platzhalter“ und löschen das Bild. Das spart exakt eine Motivgröße an Downloadzeit. ™
Material zum Artikel:
- Demo der fertigen Bildergalerie
- Teil 1 des Artikels
Erstveröffentlichung 12.12 .2007
