21.4 2 ˝ Dimensionen 

3D\2,5D in Flash

Dieses Kapitel nutzt noch ActionScript 1, um die Beispiele auch für ältere Flash Player nutzen zu können.

Solange sich die Dreidimensionalität durch wenig Dynamik und kaum Interaktion auszeichnet, kann meist alles im Vorfeld erstellt und dann von Flash dargestellt werden. Aber spätestens bei dynamischen Änderungen der 3D-Welt stoßen die vorgefertigten Elemente auf ihre Grenzen.

21.4.1 Zweidimensionale Objekte im dreidimensionalen Raum 

Hier klicken, um das Bild zu Vergrößern

Abbildung 21.2   2 ˝ D kann auch Tiefe vermitteln.

Eine relativ einfache Lösung ist das so genannte 2 ˝ D, bei dem zwar der Raum dreidimensional ist, die in ihm platzierten Elemente aber keine Tiefe besitzen. Ein einfaches Beispiel hierfür sind moderne fensterorientierte Betriebssysteme wie Windows oder Mac OS. Die Fenster sind flächige zweidimensionale Objekte, deren Position im Vorder- oder Hintergrund die z-Reihenfolge bestimmt. Die z-Reihenfolge übernimmt somit die Funktion der dritten Dimension. Um die Position eines Objekts innerhalb dieser z-Reihenfolge zu verändern, verwenden Sie in Flash die Movieclip-Methode swapDepths. Diese Methode versteht als Parameter entweder eine andere Movieclip-Instanz und tauscht mit dieser die z-Position oder eine Zahl, die für eine spezielle Position steht – sollte sich an dieser Position bereits eine Instanz befinden, so wird ebenfalls einfach getauscht:

swapDepths.fla

mcRoterBall.onRelease = function() {
   // Wechsle in die Tiefe 10
   this.swapDepths(10);
};
mcBlauerBall.onRelease = function() {
   // Wechsle in die Tiefe 10
   this.swapDepths(10);
};

Um den Eindruck von Tiefe zu erhöhen, sollte die z-Reihenfolge durch die wirkliche Position auf der z-Achse bestimmt werden und sich ebenfalls in der Größe des Objekts widerspiegeln – für diese Größenänderung ist nicht immer ein schwieriger dreidimensionaler Projektionsalgorithmus notwendig. Mit etwas weniger perfekten Ansprüchen reicht auch eine einfache Berechnung:

groessenaenderung.fla

mcRoterBall.onPress = function() {
   // Starte Drag and Drop
   this.startDrag();
};
mcRoterBall.onRelease = function() {
   // Stoppe Drag and Drop
   this.stopDrag();
};
mcRoterBall.onReleaseOutside = mcRoterBall.onRelease;
mcRoterBall.onEnterFrame = function() {
   // Kopple y-Position mit z-Position
   this._xscale = this._y;
   this._yscale = this._xscale;
   if (this._xscale>_root.mcBlauerBall._xscale && this.getDepth()<_root.mcBlauerBall.getDepth()) {
      // Tausche, falls das Objekt größer ist und hinten liegt
      this.swapDepths(_root.mcBlauerBall);
   } else if (this._xscale<_root.mcBlauerBall._xscale && this.getDepth()>_root.mcBlauerBall.getDepth()) {
      // Tausche, falls das Objekt kleiner ist und vorne liegt
      this.swapDepths(_root.mcBlauerBall);
   }
};

// Kopple y-Position mit z-Position
mcBlauerBall._xscale = mcBlauerBall._y;
mcBlauerBall._yscale = mcBlauerBall._xscale;

21.4.2 z-Reihenfolge 

Bei mehr als zwei Objekten hilft bei der Verwaltung der z-Reihenfolge eine Datenstruktur, die alle Elemente nach ihrer z-Position sortiert und entsprechend darstellt. Das folgende Skript übernimmt diese Aufgabe – wenn auch die Rechengeschwindigkeit durch einen komplizierteren Sortieralgorithmus (z.B. das so genannte Quicksort), auf den hier zur besseren Verständlichkeit verzichtet wurde, noch deutlich erhöht werden könnte:

z-reihenfolge.fla

// Mache Objekte interaktiv
MovieClip.prototype.onPress = function() {
   // Starte Drag and Drop
   this.startDrag();
};
MovieClip.prototype.onRelease = function() {
   // Stoppe Drag and Drop
   this.stopDrag();
};
MovieClip.prototype.onReleaseOutside = MovieClip.prototype.onRelease;
// Sammle Objekte in einem Array
elemente = new Array();
_root.elemente.push(mcBlauerBall);
_root.elemente.push(mcRoterBall);
_root.elemente.push(mcGruenerBall);
// Berechne z-Reihenfolge
_root.onEnterFrame = function() {
   // Sortiere bzgl. der y-Position
   for (var i = 0; i<_root.elemente.length-1; i++) {
      for (var j = i+1; j<_root.elemente.length; j++) {
         if (_root.elemente[i]._y>_root.elemente[j]._y) {
            var dummy = _root.elemente[i];
            _root.elemente[i] = _root.elemente[j];
            _root.elemente[j] = dummy;
         }
      }
   }
   // Bestimme Tiefe und Größe
   for (var i = _root.elemente.length-1; i>=0; i--) {
      _root.elemente[i].swapDepths(i);
      // Kopple y-Position mit z-Position
      _root.elemente[i]._xscale = _root.elemente[i]._y;
      _root.elemente[i]._yscale = _root.elemente[i]._xscale;
   }
};

Abgesehen von der mehr oder weniger unrealistischen perspektivischen Wirkung und den flächigen Objekten ist 2 ˝ D ein adäquater Kompromiss für die dreidimensionale Darstellung.