Flex 4 SDK: Beta-Version verfügbar
Seit dem 02.06.09 ist die Beta-Version des von Adobe entwickelten Flex 4 SDK verfügbar. Das Framework kann ohne weiteres bei Adobe heruntergeladen werden.
Weiterführende Links:
Flex 4 SDK Beta – Download
Flex 4 SDK – Beschreibung
Flash Builder 4: Beta-Version verfügbar
Seit dem 02.06.09 ist die Beta-Version des von Adobe entwickelten Flash Builder 4 (vorher Flex Builder) verfügbar. Um die Software zu bekommen muß man sich bei Adobe registrieren.
Weiterführende Links:
Flash Builder 4 Beta – Download
Flash Builder 4 – Beschreibung
Video-Mitschnitte zum Multimediatreff Flash, Flex und AIR
Galileo Design stellt kostenlose Video-Mitschnitte zum Multimediatreff vom 28.3.2009 online. Der in Köln stattgefundene Multimediatreff nahm die Programme Flash, Flex, AIR und Silverlight zur Erstellung von RIA`s unter die Lupe und es wurden die Vorteile einer Rich Internet Application, kurz RIA, aufgezeigt. Desweiteren wurde gezeigt wie effizient FDT als Entwicklungsumgebung zur Programmierung von größeren Flash-Projekten funktioniert. Dafür wurden Experten der Szene eingeladen, darunter auch von Adobe und Microsoft.
Die exklusiven Video-Mitschnitte behandeln dabei die Themenbereiche Flash, Flex und AIR: Die Zukunft von Rich Internet Applications, Neuerungen von Flash CS4 in der Praxis, reale Flex-Projekte und Programmieren mit FDT.
Die Video-Mitschnitte im einzelnen:
1. Flash & Flex – wie alles begann und was die Zukunft bringt [55:58]
2. Flash CS4 – die neuen Features in der Praxis [50:47]
3. Flex & AIR – Web- und Desktop-Anwendungen entwickeln [33:50]
4. Besser programmieren mit FDT [56:13]
Die über 3 Stunden andauernden Video-Mitschnitte kann man sich direkt auf der Galileo Design Website ansehen.
Weiterführende Links:
Flash, Flex und Air Video-Mitschnitte
Galileo Design
Multimediatreff
Flash Tutorial: Textfeld Stylesheet (CSS) mit AS 3
Textfelder in Flash zu formatieren ging bis Flash MX nur über internes Actionscript. Seit der Version Flash MX 2004 konnte man aber auch das bekannte CSS nutzen, das als Bestandteil für normale Html-Seiten eine vernünftige Struktur zur Formatierung von Texten bietet. Heute zeigen wir euch deshalb, wie man mit AS3 und einer CSS-Datei ebenso Texte in Flash formatieren kann.
1. Dazu müssen wir als erstes eine CSS-Datei mit dem Namen style.css anlegen und folgende Formatierungen für eine Überschrift einfügen:
h1{
font-family: Arial, Helvetica, sans-serif; //Die Auswahl der Fonts
color: #999999; //Die Schriftfarbe
font-size: 20px; //Die Schriftgröße
}
2. Danach erstellen wir in Flash ein dynamisches Textfeld mit einigen Eigenschaften und positionieren dieses auf der Bühne. Zum Schluß fügen wir es dann der Anzeigeliste hinzu. Der gesamte AS3-Code kommt dabei ins erste Bild der Hauptzeitleiste:
var tf:TextField = new TextField();
tf.width = 250;
tf.height = 200;
tf.x = 250;
tf.y = 250;
tf.wordWrap = true;
tf.multiline = true;
addChild(tf);
3. Nun müssen wir das Stylesheet, also die style.css laden. Dies geschieht mit dem URLLoader. Mit dem Event-Listener Event.COMPLETE wird das Laden dann abgefangen und die Funktion pushCSS() aufgerufen:
var url:URLRequest = new URLRequest("style.css");
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, pushCSS);
loader.load(url);
4. Zum Schluß erstellen wir in der Funktion pushCSS() ein neues Stylesheet-Objekt und lesen anschließend mit der Methode parseCSS() das CSS aus. Abschließend ist es wichtig, das wir erst das CSS dem Textfeld zuweisen und dann den Text hinzufügen:
function pushCSS(evt:Event){
var css:StyleSheet = new StyleSheet();
css.parseCSS(loader.data);
tf.styleSheet = css;
tf.htmlText = "<h1>Das ist die formatierte Überschrift</h1>";
}
Nun können beliebig viele Textfelder in Flash mit CSS formatiert werden und man erspart sich eine Menge Arbeit.
Hexosearch: Actionscript-Suchmaschine
Hexosearch heißt die neue themenbezogene Suchmaschine für Flash-Entwickler und Flash-Designer. Viele kennen es, man sucht im Netz nach speziellen Themen zu Actionscript und muß sich dabei durch unzählige Forenbeiträge, Blogs und andere Seiten kämpfen um am Ende genauso schlau zu sein wie vorher.
Hexosearch bietet als weltweit erste Suchmaschine einen speziellen Suchalgorithmus für Flash und Actionscript. User können darüber hinaus abstimmen ob die Suchergebnisse nützlich sind und somit die Qualität der Suchergebnisse mit beeinflussen. Für themenbezogene Blogs und Websites bietet Hexosearch auch die Möglichkeit, den Link direkt zu senden.
Wer also öfter auf der Suche nach Themen zu AS 2 oder AS 3 ist, der sollte sich die momentan noch in der Beta-Version befindliche Actionscript-Suchmaschine bookmarken und fleißig bei den Suchergebnissen mit abstimmen!
Flash Site: Nespresso
“Site of the Day” beim Favourite Website Award (FWA), das schafft nicht jede Produkt Website. Eine Kaffeemaschine schon und deshalb möchten wir euch heute dieses Schmuckstück von einer Flash Website vorstellen.
Mit viel Liebe zum Detail, netten Animationen und Grafiken macht die Flash Site einen rundum gelungenen Eindruck. Mit spielerischen Elementen wird dabei die Nespresso Citiz Kaffeemaschine anschaulich erklärt und man bekommt förmlich den Eindruck, das der Kaffee-Duft durch die Computer-Boxen strömt.
Nespresso Flash Site
Fazit:
Die Flash Website ist auf jeden Fall ein kleines Surferlebnis und zeigt wieder mal, wie gut sich Flash zur Darstellung von Produkten eignet.
Gaia – Flash Framework
Wer gerne mit Frameworks arbeitet, sollte sich das Gaia-Flash Framework einmal genauer ansehen. Dabei handelt es sich um ein gut durchdachtes Entwurfsmuster (engl. Design Pattern), um komplette Seitenstrukturen in Flash schnell und einfach zu erstellen. Das Open Source Framework verkürzt dabei die Entwicklungszeit von Flash Websites deutlich und bietet dem Entwickler jede Menge Zusatzfunktionen an, wie unter anderem die einfache Erstellung einer Navigation mit XML und die automatische Koppelung mit swfadress, die für das so genannte Deep Linking sorgt. Das von Steven Sacks entwickelte Gaia-Flash Framework unterstützt dabei AS2 und AS3 Projekte.
Das Framework sollte man sich als ein Grundgerüst für die weitere Programmierung einer Flash Website vorstellen. Gaia legt dabei die komplette Verzeichnisstruktur für die Website vollautomatisch an. Quelldateien (.fla) und veröffentlichte Dateien (.swf) werden automatisch, anhand der vorher definierten XML-Navigationsstruktur mit angelegt, ebenso wie die benötigten AS-Dateien und Klassen (beispielsweise TweenMax für Animationen). Die voreingestellte Ordnerstruktur folgt dabei dem Industriestandard, kann aber auch mit eigenen Namenskonventionen verwendet werden:
*lib ordner – .fla dateien
*bin ordner – .swf dateien, .html, usw.
*src ordner – .as dateien, klassen
Installiert wird das Gaia-Flash Framework ganz einfach als MXP Komponente, mit dem für Flash mitgelieferten Adobe Extension Manager. Nach der Installation öffnet man einfach nur Flash und ruft unter Fenster > Andere Bedienfelder > Gaia Framework, die Oberfläche von Gaia auf.
Die Highlights von Gaia im Überblick:
- Revolutionary scaffolding engine builds fully functional Flash sites in less than 10 minutes
- Simple API for Navigation, Transitions, Preloading, Asset Management makes development a snap
- Deep Linking achieved through seamless integration with SWFAddress
- SEO Scaffolding makes Search Engine Optimization as easy as pressing a button
- Easy enough for novices
- Powerful enough for experts
Fazit:
Aufbauend auf dem zeiteinsparenden Gaia Flash-Framework kann sich der Entwickler somit mehr mit der Konzeption und dem Design der Website beschäftigen. Das anlegen einer kompletten Seite wird zum Kinderspiel und auch Deep Linking und SEO wird bei einer Flash Website nicht vergessen. Insgesamt ein hilfreiches Framework, das einem ein gutes Stück Arbeit bei der Entwicklung von Flash Webseiten abnimmt.
Weiterführende Links:
Gaia-Flash Framework
Gaia-Flash Framework FAQ
Gaia-Flash Framework Demo
Was ist ein Framework?
Ein Framework (dt. Rahmenstruktur) ist ein Programmiergerüst, das in der Softwaretechnik, insbesondere im Rahmen der objektorientierten Softwareentwicklung sowie bei komponentenbasierten Entwicklungsansätzen, verwendet wird.
Ein Framework ist selbst noch kein fertiges Programm, sondern stellt den Rahmen, innerhalb dessen der Programmierer eine Anwendung erstellt, zur Verfügung, wobei u. a. durch die in dem Framework verwendeten Entwurfsmuster auch die Struktur der individuellen Anwendung beeinflusst wird. Ein Framework gibt somit in der Regel die Anwendungsarchitektur vor.
Quelle: Wikipedia
Adobe Flash Catalyst
Seit langem gibt es eine große Lücke, die in der Medienproduktion zwischen Designern und Entwicklern herrscht. Insbesondere im Screendesign gehen die Meinungen des machbaren auf beiden Seiten desöfteren mal auseinander. Der Designer möchte beispielsweise gerade dort einen Button im Layout platzieren, wo der Entwickler die meisten Schwierigkeiten für die Umsetzung der Interaktionen sieht. Solche und noch viele andere Beispiele führen dazu, das der Entwicklungsprozess gebremst wird.
Flash Catalyst, ein gerade in Entwicklung befindliches Tool von Adobe setzt genau an dem Punkt an und versucht die Lücke zwischen Designer und Entwickler zu schließen. Als eigenständiges Tool kann man mit Flash Catalyst, vorgefertigte Layouts die man mit Produkten der Creative Suite 4 designed hat, darunter z.B. Photoshop, Fireworks oder Illustrator, in funktionierende Internet,- oder Desktopanwendungen umwandeln. Rich Internet Applications, kurz RIA, für den Desktop oder eben fürs Web sind damit kein Problem mehr.
Als Designer kann man nun bequem das gerade erstellte Photoshop-Layout, z.B. ein Screendesign für eine Website in Catalyst importieren und die einzelnen Ebenen mit Interaktionen versehen (Buttons, Checkboxen, Textfelder usw.). Dabei ist einem die Benutzeroberfläche von Flash Catalyst hilfreich, ähnelt sie doch der Benutzeroberfläche von Photoshop. Nach und nach kann man sich so seine eigene Anwendung “zusammenklicken” und als Rich Internet Application (SWF) oder Desktop-Anwendung (Adobe Air) veröffentlichen.
Sicherlich fragen sich jetzt alle Flasher und Flexer ob sie nun arbeitslos werden, da ihnen ja anscheinend Flash Catalyst die Arbeit abnimmt? Die Antwort ist ganz klar nein. Internet,- und Desktopanwendungen sind so vielfältig wie die Ansprüche an die jeweiligen Anwendungen. Und genau hier muß Catalyst passen, denn es werden zwar viele grundlegende Funktionalitäten bereitgestellt, wie unter anderem Transitions, also Tweens für Movieclips oder die verschiedenen Zustände für Buttons (RollOver, RollOut, Click etc.), aber darüber hinaus gibt es eben auch viele Problemstellungen die Flash Catalyst nicht bewältigen kann und wo nach wie vor ein Flash,- bzw. Flexentwickler benötigt wird.
Und hier setzt dann auch das Konzept von Flash Catalyst an, denn beim veröffentlichen der Anwendung wird ein XML-Austauschformat (FXG) erzeugt, das mit dem Flexbuilder ohne weiteres von Flash,- bzw. Flexentwicklern genutzt werden kann. Somit wird der Designer zwar auch zum Entwickler, aber eben nur in begrenztem Maß und dem eigentlichen Entwickler wird Arbeit abgenommen.
Sicherlich wird sich dieses Prinzip in Zukunft durchsetzen, spart man doch damit ungemein Zeit und viel Verwirrung innerhalb des Entwicklungsprozesses. Der Designer kann seine Ideen schon im Vorfeld teilweise selber umsetzen und der Entwickler verleiht der jeweiligen Anwendung im Anschluss die benötigte Funktionalität.
Weiterführende Links:
Adobe Labs – Flash Catalyst
Screenshots – Flash Catalyst
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.
Folge uns auf Twitter
