Das 3D-Karussell – Teil 2

Wir erstellen ein dreidimensional erscheinendes Bilderkarussell. Je nach Mausposition drehen sich die angezeigten Grafiken schneller und langsamer. Dieser tolle Effekt eignet sich für Diashows ebenso wie für Website-Navigation. Über ActionScript werden die Container positioniert, die Bilder geladen und die Bewegung gesteuert.

Wenn Sie die Vorschauebene wieder gelöscht haben, gibt es offensichtlich keinen Bezug mehr zwischen Ihrem Flash-Film und dem „bild_container“ der sich in der Bibliothek befindet. Diesen Bezug müssen wir herstellen. Öffnen Sie also die Bibliothek. Klicken Sie mit der rechten Maustaste auf „Verknüpfung“ und aktivieren Sie die Option „Export für ActionScript“. Geben Sie dem Clip den Instanznamen „bild_container“. Die enthaltenen MovieClips müssen wir nicht gesondert verknüpfen. Flash erkennt diese Notwendigkeit selbst.

Die „bild_container“ werden nur in der Bibliothek definiert, nicht auf der Bühne

Kommen wir nun zur Programmierung. Alles, was im Film passiert, wird in Frame 1 der Szene 1 als Aktion hinterlegt. Es wird nur noch ein weiteres, grafisches Element geben. Das ist die Sprechblase für unseren Tooltip.

Beginnen wir mit dem Laden einer ActionScript-Klassen, die wir für den Film benötigen. Da wäre zunächst die Delegate-Klasse:

 import mx.utils.Delegate;

Sie überwacht die Verbindung zwischen Bild und Tooltip und sorgt dafür, dass die Sprechblase in gleicher Geschwindigkeit rotiert. Sie „delegiert“ also die Eigenschaften von einem MovieClip zum anderen.

Für das Öffnen und Schließen des großen Bilds brauchen wir Tweening-Klassen. Für nähere Informationen über den Umgang mit Tweening-Klassen, lesen Sie bitte den Artikel „Programmierte Bewegung“.

      import mx.transitions.Tween;
import mx.transitions.easing.*;

Fahren wir fort mit der Initialisierung von Variablen. Zunächst benötigen wir eine Variable für die Anzahl der Elemente:

      var numOfItems:Number;

Brimelow startet mit einem festen Wert und wandelt das Skript später für die dynamische Inhaltsplatzierung um. Wir sparen uns den Zwischenschritt. Hier geht es nur darum zu hinterlegen, dass die „numOfItems“ eine Zahl ist.

Die Bilder im Hintergrund sind zur Unterstützung der perspektivischen Wirkung deutlich kleiner

Weiter geht’s mit der Ausdehnung der Bewegungsellipse und deren Positionierung im genauen Zentrum des Films:

      var radiusX:Number = 250;
var radiusY:Number = 75;
var centerX:Number = Stage.width/2;
var centerY:Number = Stage.height/2;

Nun fehlt noch eine Variable zur Bestimmung der Geschwindigkeit. Die wird später von der Mausposition verändert, aber wir benötigen auch hier eine Initialisierung:

      var speed:Number = 0.05;

Bleiben Sie deutlich unter „1“, sonst dreht das Ding zu schnell.

Für die dreidimensionale Wirkung des Karussells benötigen wir eine Funktion, die die Größe der MovieClips verändert, ja nach erreichter Position. Die Referenzvariable hierfür heißt

      var perspective:Number = 130;

Je größer der Wert, um so stärker der Effekt.

Ein kleines Hilfskonstrukt dient Brimelow dazu, um stets die richtigen Pfadangaben zu den MovieClips zu behalten und die Syntax in den Aktionen zu vereinfachen:

      var home:MovieClip = this;

Nun hängen wir das MovieClip „Sprechblase“ an eine Variable, so dass wir damit dynamisch arbeiten können. Wichtig ist der Hohe Z-Index von 10000. Der sorgt nämlich dafür, dass die Sprechblase nicht hinter einem der Bilder verschwindet. Zunächst ist die Sprechblase unsichtbar:

      var sprechblase:MovieClip = this.attachMovie("sprechblase", "sprechblase",10000);
sprechblase._alpha = 0;

Und dann ist auch noch der Platzhalter unsichtbar, der das große Bild enthalten wird.

      platzhalter._alpha = 0;

Bilder laden und Container positionieren

Nun kommen wir zum XML-Teil. Das parsen der XML-Datei ist denkbar simpel. Wir müssen nur dafür sorgen, dass unnötige Leerzeichen ignoriert werden:

      var xml:XML = new XML();
xml.ignoreWhite = true;

      Dann wird geladen:
xml.load("bilder.xml");

War der Ladevorgang erfolgreich, erfolgt das Vervielfachen des Containers und das Anhängen der Bilder.

      xml.onLoad = function()
{

Zunächst zählen wir die Anzahl der Elemente (nodes) und bestimmen damit die Menge der Bilder:

      var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;

Das „firstChild“, nach dem gefragt wird, ist das Element „Bild“.

Nun gehen wir den Ladevorgang in Form einer „For-Schleife“ durch. Er wird so lange wiederholt, die die Variable „i“ kleiner ist als die Menge der Bilder

      for(var i=0;i<numOfItems;i++){
var t = home.attachMovie("bild_container", "bild_container"+i,i+1);

Jetzt werden die Container im Kreis angeordnet. Dazu dient Pi in Verbindung mit der Menge der verfügbaren Elemente. Noch kreisen die Bilder um den Nullpunkt des Films.

      t.angle = i * ((Math.PI*2)/numOfItems);

Ist die Positionierung abgeschlossen, darf mit der Animation begonnen werden.

      
t.onEnterFrame = bewegung;

Die Sprechblase wird mit dem XML-Attribut „bildunterschrift“ gefüllt.

      t.blasenText = nodes[i].attributes.bildunterschrift;

Das große Bild wird (unsichtbar) geladen.

      t.grossesBild = nodes[i].attributes.bigimage;

Das kleine Bild wird geladen.

      t.rahmen.inner.loadMovie(nodes[i].attributes.image);

Das Spiegelbild wird geladen.

      t.spiegelbild.inner.loadMovie(nodes[i].attributes.image);

Und das Hauptmotiv wird mit der Interaktionsgrundlage bestückt.

      t.rahmen.onRollOver = over;
t.rahmen.onRollOut = out;
t.rahmen.onRelease = gedrueckt;

Und zum Schluss werden die For-Schleife und die XML.onLoad-Funktion geschlossen.

      }
}

Beweg Dich
Wenn Sie nun den Film starten, sehen Sie die kleinen Vorschaubilder in der linken oberen Ecke. Das liegt daran, dass der Film die Bildpositionen relativ zur Maus berechnet und das geschieht in der Funktion „bewegung“.

      function bewegung(){
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;

Sinus und Cosinus bestimmen den Abstand vom Mittelpunkt der Ellipse.

      var s:Number = (this._y - perspective)/(centerY+radiusY-perspective);
        this._xscale = this._yscale=s*100;

Die Größe hängt von zwei Faktoren ab, nämlich der Y-Position und dem Wert des Radius. Ist letzterer negativ, liegt das Bild oberhalb des Mittelpunkts und wird verkleinert. Die zweite Zeile skaliert simultan nach X- und Y-Ausdehnung.

Nun folgt ein sehr wichtiger Codeschnipsel. Die Bilder müssen sich nämlich stets so überlappen, dass der Z-Index vorn in der Mitte am höchsten ist und dann in beide Richtungen geringer wird. Der Trick: Der Z-Index ist eine Funktion der Skalierung:

      this.swapDepths(Math.round(this._xscale + 100));

Die dynamische Winkelberechnung folgt wiederum der Geschwindigkeit

      this.angle += this._parent.speed;
}

Und diese Geschwindigkeit hängt von der Mausposition in Relation zur X-Koordinate des Mittelpunkts ab. Je weiter die Maus vom Mittelpunkt, desto schneller dreht sich die Ellipse. Da die Differenz zwischen „_xmouse“ und „centerX“ positiv oder negativ ausfallen kann, entscheidet sie auch über die Drehrichtung.

      this.onMouseMove = function(){
        if ((this._xmouse<(centerX-20))or (this._xmouse>(centerX+20))){
                speed = (this._xmouse-centerX)/2500;
        }else{
                speed = 0;
        }
}

Der Wertebereich zwischen -20 und +20 hüben wie drüben des Mittelpunkts ist neutrale Zone. Hier stoppt der Kreisel zwecks besserer Benutzbarkeit.

Voila, das einfache Karussell ist fertig. Die Steuerung funktioniert, nur die Interaktionen wie RollOver und Mausklick müssen noch festgelegt werden. ™

Material zum Artikel:

• .FLA Datei
• Alles zum Download inkl. Demo (ZIP-Archiv 1,8 MB)