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.
|