Know-how für Kreative

Inhaltsverzeichnis
1 Erste Schritte
2 Versionen
3 Einführung in die Programmierung
4 Die Entwicklungsumgebung
5 Regeln
6 Anweisungen und Aktionen
7 Werte und Datentypen
8 Ausdrücke und Operatoren
9 Funktionen
10 Kontrollstrukturen
11 Dokumenten-Objektmodell und Gültigkeitsbereich (Scope)
12 Ereignisse
13 Objekterstellung
14 Vererbung
15 Movieclips
16 ActionScript 2.0
17 Komponenten
18 Codedesign und Konzeption
19 Flashdetection
20 Aussergewoehnliche Benutzerfuehrung
21 D mit Flash
22 Macromedia Central
23 HTML
24 JavaScript, ActiveX und Java
25 Flash undokumentiert
26 Vergangenheit, Gegenwart und Zukunft
27 Kurzreferenz
28 Buchtipps
29 Links
30 Die CD-ROM zum Buch
Index
Download: - ZIP, ca. 9,8 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Design / <openbook> / ActionScript | vor >>
ActionScript 1 und 2 von Sascha Wolter (http://www.saschawolter.de/) Objektorientierung und Codedesign mit Flash MX 2004
ActionScript 1 und 2 672 S., mit CD, Referenzkarte, 44,90 Euro Galileo Design ISBN 3-89842-221-6 |
| Kapitel 21 D mit Flash
|  | 21.1 Drei Dimensionen
|  | 21.2 Perspektiven in Flash
|  | 21.3 Zusatzprodukte
|  |  | 21.3.1 Swift 3D und Swift 3D Xpress
|  | 21.4 2 ½ Dimensionen
|  |  | 21.4.1 Zweidimensionale Objekte im dreidimensionalen Raum
|  |  | 21.4.2 z-Reihenfolge
|  | 21.5 Richtiges 3D
|  |  | 21.5.1 Performance
|  |  | 21.5.2 Drahtgittermodell
|  |  | 21.5.3 Darstellung – oder von 3D nach 2D
|  |  | 21.5.4 Dreidimensional transformieren
|  |  | 21.5.5 Weitere Optimierung
|  | 21.6 Isometrie
## 21.5 Richtiges 3D ##### 3D\3D_in_Flash Für echtes 3D muss eine Unmenge von Details beachtet werden. Außerdem ist eine große Menge Mathematik notwendig – davon leider sogar so viel, dass viele Abspielumgebungen schnell in die Knie gehen. Dabei ist die Darstellungsleistung von zahlreichen Faktoren wie Grafikkarte und Prozessor abhängig. Aufgrund des plattformunabhängigen Konzeptes von Flash werden gerade diese Komponenten aber leider nicht optimal angesprochen: OpenGL oder DirectX kommen zum Beispiel im Flash Player nicht zum Einsatz. ### 21.5.1 Performance Tests mit einfachen Linien auf einem durchschnittlichen Testrechner ergaben, dass bei einer Auflösung von 400 x 400 Punkten gerade noch 50 Linien mit einer Bildrate von 25 Bildern pro Sekunde dargestellt werden. D.h. so könnten gerade vier Würfel gleichzeitig als Drahtgittermodell gezeichnet werden, ohne dass die Darstellung zu ruckeln begann. Mit den mathematischen Operationen für 3D wird das alles noch langsamer. Ein aus 16 Linien bestehendes Haus berechnet Flash mit ungefähr 40 Bildern pro Sekunde, aber schon beim dritten Haus brach die Bildrate auf dem Testrechner deutlich unter 20 Bilder pro Sekunde ein. Hier kann zwar durch optimierten Code nachgebessert werden, doch ein echtes 3D-Spiel ist bei dem aktuellen Stand der Rechnerleistung mit Flash kaum zu realisieren. Macromedias alternatives Autorensystem Director bietet hier mit Shockwave3D eine deutlich leistungsfähigere Technologie. ##### Optimierte Flash Player Das Problem der Darstellungsgeschwindigkeit haben einige Entwickler erkannt und bieten entsprechende Lösungen an. Der »Experimental Hardware SWF Player« von Globfx http://www.globfx.com/labs/hwf/ und das auf DirectX optimierte »Strobe User Interface SDK« von Secret Level versprechen zum Beispiel eine bessere Leistung. ### 21.5.2 Drahtgittermodell Auf eine einfache Perspektive (z.B. Zentralprojektion) beschränkt und unter Außerachtlassung von Dingen wie Beleuchtung, Flächen usw. gelingt aber dennoch eine ansprechende Darstellung als dreidimensionales Drahtgitter (Wireframe). Hier klicken, um das Bild zu Vergrößern Abbildung 21.3 Ein Haus als Drahtgittermodell Zuerst einmal wird eine Datenstruktur zur Verwaltung der Punkte im Raum benötigt, die in diesem Beispiel eine eigene Klasse übernimmt: ##### haus.fla
    function Point(x, y, z) {
       this.x = x;
       this.y = y;
       this.z = z;
    }
Die Darstellung eines Drahtgittermodells basiert auf einfachen Linien, die zwischen zwei Punkten im Raum aufgespannt werden. Somit ist eine Klasse für Linien notwendig:
    function Line(startPoint, endPoint) {
       this.a = startPoint;
       this.b = endPoint;
    }
Und die 3D-Objekte wiederum sind eine Klasse, sie bestehen aus einer beliebigen Anzahl an Linien:
    function Object3D() {
       this.wireframe = new Array();
    }
    Object3D.prototype.addLine = function(x1, y1, z1, x2, y2, z2) {
       var a = new Point(x1, y1, z1);
       var b = new Point(x2, y2, z2);
       var wire = new Line(a, b);
       this.wireframe.push(wire);
    };
Ein einfaches Haus definieren nun die folgenden Anweisungen:
    myHouse = new Object3D();
    // Definiere VorderSeite
    myHouse.addLine(50, 50, 10, 50, 100, 10);
    myHouse.addLine(50, 100, 10, 100, 100, 10);
    myHouse.addLine(100, 100, 10, 100, 50, 10);
    myHouse.addLine(100, 50, 10, 50, 50, 10);
    // Definiere RückSeite
    myHouse.addLine(50, 50, 60, 50, 100, 60);
    myHouse.addLine(50, 100, 60, 100, 100, 60);
    myHouse.addLine(100, 100, 60, 100, 50, 60);
    myHouse.addLine(100, 50, 60, 50, 50, 60);
    // Definiere Verbindungslinien
    myHouse.addLine(50, 50, 10, 50, 50, 60);
    myHouse.addLine(50, 100, 10, 50, 100, 60);
    myHouse.addLine(100, 100, 10, 100, 100, 60);
    myHouse.addLine(100, 50, 10, 100, 50, 60);
    // Definiere Dach
    myHouse.addLine(50, 50, 10, 75, 25, 35);
    myHouse.addLine(50, 50, 60, 75, 25, 35);
    myHouse.addLine(100, 50, 10, 75, 25, 35);
    myHouse.addLine(100, 50, 60, 75, 25, 35);
### 21.5.3 Darstellung – oder von 3D nach 2D Die Darstellung des Hauses erfordert eine Projektion der dreidimensionalen Koordinaten auf eine zweidimensionale Ebene. Diese Operation übernimmt in erster Linie die Klasse Line, die sich um die anschließende Darstellung auf dem Bildschirm kümmert. Dabei ist die Formel abhängig vom Abstand (Distance) zur Projektionsebene (je nach Abstand kann es zu einem Eintauchen in die Objekte und damit verbundenen Darstellungsfehlern kommen, auf deren Lösung an dieser Stelle verzichtet wird): ##### haus.fla
    Line.prototype.draw = function(mc, distance) {
       // distance ist die Distanz zur Projektionsfläche
       var x1 = (this.a.x*distance)/(this.a.z+distance);
       var y1 = (this.a.y*distance)/(this.a.z+distance);
       mc.moveTo(x1, y1);
       var x2 = (this.b.x*distance)/(this.b.z+distance);
       var y2 = (this.b.y*distance)/(this.b.z+distance);
       _root.lineTo(x2, y2);
    };
    Object3D.prototype.draw = function (mc, distance) {
       for (var i in this.wireframe) {
          // Zeichne jede einzelne Linie
          this.wireframe[i].draw(mc, distance);
       }
    }
### 21.5.4 Dreidimensional transformieren Um einzelne Punkte zu verschieben oder zu drehen, fügen wir den Klassen die entsprechenden Methoden hinzu. Das Verschieben in x-, y- oder z-Richtung basiert auf einer einfachen Addition: ##### haus2.fla
    Point.prototype.move = function(dx, dy, dz) {
       this.x += dx;
       this.y += dy;
       this.z += dz;
    };
    Line.prototype.move = function(dx, dy, dz) {
       this.a.move(dx, dy, dz);
       this.b.move(dx, dy, dz);
    };
    Object3D.prototype.move = function(dx, dy, dz) {
       for (var i in this.wireframe) {
          this.wireframe[i].move(dx, dy, dz);
       }
    };
Hier klicken, um das Bild zu Vergrößern Abbildung 21.4 Im_Raum_gedrehtes_Haus Die Drehung eines Punktes im Raum erfordert noch ein wenig mehr Rechenarbeit, deren Optimierung die Leistung noch um einiges erhöhen kann. Grundsätzlich werden die einzelnen Koordinaten immer im Bezug zum Ursprung (also zum Schnittpunkt aller drei Achsen) transformiert. Bei der Drehung kommen dafür an dieser Stelle die geometrischen Funktionen Sinus und Cosinus zum Einsatz: ##### haus3.fla
    Point.prototype.rotate = function(x, y, z) {
       // Rotation um die x-Achse im Bogenmass
       var yn = this.y*Math.cos(x)-this.z*Math.sin(x);
       var zn = this.y*Math.sin(x)+this.z*Math.cos(x);
       this.y = yn;
       this.z = zn;
       // Rotation um die y-Achse im Bogenmass
       var xn = this.x*Math.cos(y)+this.z*Math.sin(y);
       var zn = -this.x*Math.sin(y)+this.z*Math.cos(y);
       this.x = xn;
       this.z = zn;
       // Rotation um die z-Achse im Bogenmass
       var xn = this.x*Math.cos(z)-this.y*Math.sin(z);
       var yn = this.y*Math.cos(z)+this.x*Math.sin(z);
       this.x = xn;
       this.y = yn;
    };
### 21.5.5 Weitere Optimierung Hier klicken, um das Bild zu Vergrößern Abbildung 21.5 Kruesch.de zeigt eindrucksvoll, wie gut 3D in Flash aussehen kann. Die Ideen aus dem 2 ½ D-Ansatz und der dreidimensionalen Herangehensweise lassen sich optimal kombinieren. Die Darstellung des Raums und die Positionierung der Objekte im Raum werden so verbessert. Da die Objekte weiterhin flaechig sind, bleibt die Darstellungsleistung in einem ertraeglichen Rahmen – alternativ koennten die Objekte ueber wenige Ansichten verfuegen wie zum Beispiel hinten, vorn, links und rechts. Ein gutes Beispiel dafuer ist unter http://www.mx3d.com/ zu finden. Zur Optimierung der Leistung hat der Entwickler dieser Website ausserdem auf Flasm zurueckgegriffen (http://flasm.sourceforge.net). Dabei handelt es sich um ein Werkzeug, das den Bytecode von SWF-Dateien direkt editiert und optimiert- quasi so eine Art Maschinensprache fuer Flash.
<< zurück | <top> | vor >>
Zum Katalog
ActionScript 1 und 2 bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| Einstieg in ActionScript
| Einstieg in Flash 8
| Flash 8 und PHP
| Flash 8-Tutorials
| Dreamweaver 8
| Webseiten programmieren und gestalten
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press GmbH 2005
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Design]
Galileo Press GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de