Marketplace für Photoshop
Adobe hat seit kurzem einen Marketplace für Photoshop im Netz. Der Marketplace versteht sich dabei als offene Community für Designer, Grafiker und Kreative aus der ganzen Welt, die mit Photoshop arbeiten und sich über neue Dienste, Plugins oder Produkte informieren wollen.
Darüber hinaus kann man Artikel zu bestimmten Themen kommentieren, sich verschiedene Angebote zu interessanten Plugin-Neuerscheinungen oder anderen Produkten ansehen und kaufen, oder eigene Entwicklungen veröffentlichen. Derzeit ist der Photoshop Marketplace nur in englisch verfügbar.
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
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.
The Design Inspiration
Wem es als Designer, Grafiker oder Kreativer an Ideen mangelt, der sollte mal auf The Design Inspiration vorbeischauen. The Design Inspiration ist eine Gruppe von Designern, die täglich die besten Arbeiten im Netz zu einem Showcase zusammenstellen.
The Design Inspiration
Im Showcase werden dabei die Themen Logo Design, Illustration, Websites, Kreative Photos sowie Pattern vorgestellt. Die zusammengestellten Arbeiten sind qualitativ sehr gut und es kommen täglich neue hinzu. Für alle Designer mit kurzfristigem Ideenmangel ist die Seite auf jeden Fall einen Besuch wert.
Kostenloses Videotraining für Flash CS4
Auf der Galileo Press Website kann man sich aktuell einige kostenlose Video-Lektionen für Flash CS4 ansehen. In insgesamt 5 Lektionen lernt man wichtige Neuerungen in Flash CS4 kennen, die sicherlich für den ein oder anderen Flasher interessant sind. Flash-Trainer Helge Maus behandelt dabei folgende Themen:
1. Schnellstart-Workshop [12:58]
2. Das 9-teilige Segmentraster [4:09]
3. Objekbasierendes Bewegungs-Tweening [10:10]
4. Inverse Kinematik mit dem Bone-Werkzeug [10:40]
5. Auf Webseiten verlinken [3:54]
Die insgesamt über 40 Minuten andauernden Video-Tutorials kann man sich kostenlos direkt auf der Galileo Press Website ansehen. Wer mehr zu Adobe Flash CS4 wissen möchte, kann sich darüber hinaus den kompletten Workshop auf Lern-DVD kaufen.
Flash Site: Anders Bergh Photographer
Flash Fotografie-Seiten gibt es ausreichend im Netz. Wir haben kürzlich eine gefunden, die uns vom Konzept gefallen hat und die wir euch vorstellen möchten.
Das Portfolio von Anders Bergh besticht schon beim öffnen der Seite durch seine Einfachheit und gute Bedienbarkeit. Alle Fotos werden auf der Startseite als Thumbnails dargestellt, wodurch das Klicken auf unnötige Untermenüs entfällt. Zum Vergrößern klickt man einfach auf ein Thumbnail und alle anderen Bilder werden mit einem netten Effekt ausgeblendet. Das Thumbnail wird währendessen gezoomt und am Ende neu gerendert.
Auch beim scrollen durch die Gallery wurde Wert auf Usability gelegt, man muß nirgends klicken, alles läuft über Mausbewegung oder Mausrad. Abgerundet wird die Seite durch eine übersichtliche Navigation, die alle wichtigen Informationen zum Fotografen schnell und einfach bereitstellt. Zum Schluß sei noch das Deeplinking erwähnt, daß das steuern der Flash-Seite über die Vor,- und Zurückbuttons des Browsers ermöglicht.
Anders Bergh Flash Site
Alles in allem eine schön durchdachte Flash-Site für Fotografen.
Flash Tutorial: Webcam mit AS3 steuern
Eine Webcam mit Flash zu steuern ist mit AS3 zum Kinderspiel geworden. In AS3 gibt es dafür die Klasse Camera im Paket flash.media. Wir zeigen euch hier eine einfache Anwendung um das Bild der Webcam in eurem Flashfilm darzustellen.
1. Zuerst müssen wir ein Camera Objekt erstellen und mit der Methode getCamera() die Webcam ansprechen:
var cam:Camera = Camera.getCamera();
2. Nun müssen wir prüfen ob eine Webcam vorhanden ist und wenn ja, diese an ein Video Objekt anhängen und der Anzeigeliste hinzufügen:
if(cam != null){
var video:Video = new Video();
video.attachCamera(cam);
video.x = 10;
video.y = 10;
addChild(video);
}
Das wars, mehr ist nicht nötig um mit Flash eine Webcam zu steuern. Wie ihr seht, ganz einfach! Wenn ihr nun noch das Bild mit anderen Usern austauschen wollt, benötigt ihr einen Mediaserver. Die Daten werden dann mit Netconnection und Netstream übertragen.
Hansen World entwickelt Flash Explorer für Native Instruments
Native Instruments, Hersteller für professionelle Musiksoftware hat uns beauftragt für dessen neueste Entwicklung, die “Maschine”, einen Flash Explorer zu entwickeln. Die “Maschine” ist eine Kombination aus Groove Box, Software Sequencer und einem Sampler mit einem nahtlos integriertem Hardware Controller.
Der von uns entwickelte Flash Explorer dient hierbei zur Bewerbung der “Maschine” auf der Native Instruments Seite und erklärt über mehrere Mouse-Over Bereiche, die verschiedenen Bedienmöglichkeiten der Groove Box im Zusammenspiel mit dem Software Sequenzer.
Wir freuen uns den Flash Explorer entwickelt zu haben und wünschen Native Instruments viel Erfolg mit der “Maschine”!
Red Dot Award für Communication Design 2009
Es ist wieder soweit…wieder einmal können Designer, Agenturen, Designbüros und Auftraggeber beim diesjährigen “Red Dot Award: Communication Design 2009″ ihre Fähigkeiten unter Beweis stellen. Die Arbeiten können ab sofort bis spätestens 26.07.09 eingereicht werden und werden dann von einer internationalen Jury bewertet. Anmeldeschluss ist der 10.07.09.
Der mit einem sehr hohen Anspruch an Design und Gestaltung bekannte Red Dot Award, wird auch in diesem Jahr wieder eine Agentur oder ein Designbüro mit dem „Red Dot: Design Agency of the Year“ küren. Aber auch Studierende und Nachwuchsdesigner bekommen eine Chance, die Besten hierbei werden mit dem “Red Dot: Junior Award” ausgezeichnet.
Die internationale Jury setzt sich aus Persönlichkeiten unterschiedlicher Bereiche zusammen, um mit dem gebündeltem Wissen und Erfahrungsschatz, die gestalterische Qualität der Arbeiten zu beurteilen.
Die Bewertungskriterien im einzelnen:
Originalität:
Welche Elemente machen die Arbeit innovativ?
Emotionale Qualität:
Verfügt die Arbeit über eine ausgeprägte Stimmung und Anmutung?
Gestaltungsqualität:
Wird die Arbeit durch ihre Formgebung getragen und überzeugt die Arbeit hinsichtlich Verarbeitung und Materialwahl beziehungsweise in der digitalen Umsetzung?
Prägnanz:
Ist die Arbeit einprägsam, leicht begreifbar und rezipierbar?
Die Gewinner erwartet neben Ruhm und Ehre, eine feierliche Preisverleihung am 9.12.09 im Red Dot Design Museum. Alle ausgezeichneten Arbeiten werden anschließend vom 10.12.09 bis 10.01.10 im Red Dot Design Museum einer breiten Öffentlichkeit präsentiert. Hier gehts zur Red Dot Award Anmeldung.
Flash Site: Mitsubishi Lancer Sportback
Mitsubishi hat eine tolle Flash Microsite für den Lancer Sportback im Netz. In einem dreidimensionalen Würfel kann man dort den Wagen erkunden. Viele Videosequenzen innerhalb des Würfels führen einen dann durch alle Details des Wagens und an manchen Stellen kann man per Maus verschiedene Sachen selber betätigen, wie z.B. die Motorhaube oder die Kofferraumklappe selber öffnen und sich das Auto ganz in Ruhe von innen ansehen.
Mitsubishi Flash Site
Wir finden, wieder einmal ein gut durchdachtes Beispiel für Flash, im Zusammenspiel mit Interaktivität und Entertainment!
Folge uns auf Twitter
