Flash Site: Tokyo Plastic

Die Seite Tokyo Plastic kennen sicherlich einige Flasher, Webdesigner und Grafiker schon seit mehreren Jahren, ist sie doch ein Klassiker unter den gelungenen Flash-Seiten. Wir haben die Seite ebenfalls schon vor Jahren kennengelernt und waren sofort begeistert von den vielen gelungenen Flash-Animationen die man dort findet. Nun hat uns aber vor kurzem die Neugier gepackt und wir wollten wissen was sich dort seitdem getan hat.

Nun, an der Flash-Seite direkt hat sich zu unserem Bedauern nichts geändert, ABER…und das fanden wir ziemlich interessant, gibt es unter dem Menüpunkt “WORK” zahlreiche 3D Werbe-Trailer, Teaser und Videos zu bestaunen. Wobei bestaunen noch untertrieben ist, die vielen 3D-animierten Videos sind einfach unglaublich gut gemacht und in Szene gesetzt. Jedes einzelne hat seinen eigenen Charme und die Character-Animationen überzeugen auf ganzer Linie. Kennt man Tokyo Plastic, merkt man auch sofort aus welcher Design,- und Animations-Schmiede die 3D Animationen kommen.

Tokyo Plastic Flash-Site

Tokyo Plastic Flash-Site

Schade ist nur, das sich in den vergangenen Jahren nichts an der Flash-Site geändert hat. Aber die Seite ist nunmal auch ein Klassiker und brauch im Grunde keine Veränderung, da sie nach wie vor zum entdecken und bestaunen einlädt.

Flash Tutorial: 3D Objekt mit Papervision

Heute wollen wir euch zeigen wie man mit Papervision und ein wenig AS3, eine einfache 3D Plane in Flash erstellt. Dazu benötigen wir zuallererst die Klassen von Papervision. Diese kann man sich inklusive hilfreichen Faq`s zur Installation hier downloaden. Wenn möglich nutzt einen Versionskontrollmanager, auch Subversion Control genannt, wie etwa Tortoise SVN, um immer auf dem aktuellsten Stand zu bleiben. Nach der Installation können wir auch schon loslegen.

1. Als erstes erstellen wir eine AS-Datei mit Namen “PV3D.as”. Danach erstellen wir eine leere Flash-Datei, stellen die Bildrate auf 30 Bps und tragen in das Feld Dokumentklasse “PV3D” ein. Die beiden Files müssen im selben Ordner liegen.

2. Nun können wir auch schon die Klassen in die AS-Datei importieren. Diese werden zur Darstellung des 3D Objekts benötigt. Dazu einfach wie üblich in AS3 mit dem package Schlüsselwort beginnen:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
}

2. Danach erweitern wir die Klasse Sprite um die öffentliche Klasse PV3D und initialisieren die benötigten Variablen:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;

public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;
}
}

3. Nun zur eigentlich Funktion. Wir erstellen die öffentliche Methode PV3D und instanzieren ein neues Viewport-Objekt, das wir anschließend der Anzeigeliste hinzufügen. Als Parameter für new Viewport() übergeben wir width, height, scaleToStage und interactive:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);
}

4. Es folgen weitere Instanzierungen von scene, camera, renderer, material, und primitive. Bei material setzen wir doubleSided auf true um die Farbe auf der Vorder,- und Rückseite anzuzeigen. Bei primitive erstellen wir eine neue Plane und weisen new Plane() die Parameter material, width, height, wSegments und hSegments zu. Die Segmente sind dabei die verwendeten Polygone, umso höher hier der Wert ist, umso höher aufgelöst ist das Objekt. Die Verwendung eines höheren Werts ist aber auch sehr performancelastig und man sollte sparsam damit umgehen. In unserem einfachen Beispiel reichen 3 Segmente horizontal und vertikal völlig aus. Zum Schluß wird primitive noch der scene hinzugefügt:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);
}

5. Zu guter Letzt setzen wir noch einen ENTER_FRAME Event-Listener und weisen ihm die Methode onEnterFrame() zu. Hier lassen wir unsere Plane nun zur Laufzeit drehen und aktualisieren den renderer:
public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}

Ganz zum Schluß speichern wir unsere AS-Datei und veröffentlichen die Flash-Datei. Als Ergebnis seht ihr eine sich permanent drehende 3D Plane, die mit wenig AS3 Code, Flash und Papervision erstellt wurde.

Hier nochmal der gesamte Code:
package{
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;

public class PV3D extends Sprite {
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var material: ColorMaterial;
private var primitive: Plane;
private var renderer: BasicRenderEngine;

public function PV3D():void {
viewport = new Viewport3D(550, 400, false, true);
addChild(viewport);

scene = new Scene3D();
camera = new Camera3D();
renderer = new BasicRenderEngine();
material = new ColorMaterial(0x333333);
material.doubleSided = true;

primitive = new Plane(material, 200, 200, 3, 3);
scene.addChild(primitive);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
primitive.rotationY += 2;
renderer.renderScene(scene, camera, viewport);
}
}
}
}

Flash Site: Gourmet Kickz Creator

Flash und 3D, lange Zeit ein Thema was nur sehr schwierig umzusetzen war und meist über andere Programme wie Cinema 4D oder 3D Studio Max gelöst wurde. Natürlich war das kein echtes 3D, da lediglich die Animationen entweder Bild für Bild oder als Video-File in Flash importiert wurden.

Nachdem aber endlich mit AS2 eine eigene 3D Engine namens Papervision entwickelt wurde, traten immer mehr “echte” 3D Anwendungen in Erscheinung. Heute, in Zeiten von AS3 ist die Entwicklung so weit vorangeschritten das wir sehr detailreiche, in Echtzeit dargestellte 3D Objekte mit Flash realisieren können.

Aus diesem Grund möchten wir euch heute ein Beispiel vorstellen, das es zwar schon länger gibt, das aber trotzdem sehr beeindruckend ist und zeigt wo der Trend hingeht. Der Gourmet Kickz Creator ist ein Echtzeit 3D Schuh-Konfigurator, der mit Flash und Papervision realisiert wurde. Mit dem Konfigurator lässt sich ein Schuh-Modell nach belieben anpassen und von allen Seiten betrachten. Man kann jedes Element des Schuh`s farblich verändern und sogar Texturen hinzufügen. Somit wird man zum Designer seines eigenen, individuellen Schuh`s.

Gourmet Kickz Creator Flash Site

Gourmet Kickz Creator Flash Site

Nachdem das Design fertig ist, kann man den Schuh in einer Gallery abspeichern und auch kaufen. Nike benutzt den Gourmet Kickz Creator bereits auf der eigenen Seite und veranstaltet sogar Design-Battles. Hier treten die besten Designs gegeneinander an und man kann seine Stimme dem jeweils besseren Schuh geben.

Sicherlich zeigt der Kickz Creator was derzeit die Obergrenze des machbaren mit Flash und 3D ist. Und mit machbar meinen wir den Grad des Realismus, denn natürlich sieht man hier und da das der Schuh nicht fotorealistisch ist, aber dennoch ist die Anwendung schon nah dran und wir dürfen gespannt sein wo die Entwicklung mit Flash und 3D hingeht. Papervision als 3D Engine für Flash wird sich weiterentwickeln und auch der Flashplayer, aktuell in der Version 10 verfügbar, wird immer leistungsfähiger.

Neue Away3D Version

Nach dem Release von Flash Player 10 ist es etwas ruhig um die verschiedenen Flash 3D Engines geworden. Seit einigen Tagen steht aber ein neues Release der Away3D Engine zur Verfügung. Zahlreiche neue Features wie unter anderem nearfield clipping, object culling, camera lenses, advanced normalmap tools sowie ein neues Bezierpatch Tool sind sehr vielversprechend und zeigen, daß das Thema Flash und 3D immer mehr an Bedeutung gewinnt. Downloaden könnt Ihr euch die Engine hier.

Ein Beispiel was die Engine alles kann: Normalmaps