GreenSock Tweening Platform: Version 11

Was zu AS2-Zeiten das Fuse Kit von Mosessupposes war, ist derzeit die GreenSock Tweening Platform für AS3. Die neueste Version der sehr beliebten Flash Tween-Engine wurde vor wenigen Tagen von GreenSock vorgestellt.  Hinzugekommen sind dabei 2 neue Tools names TimelineLite/TimelineMax und TweenNano. Verbessert wurden auch die bereits vorhandenen Engines TweenLite/TweenMax. Diese wurden weiter optimiert und mit neuen Funktionen ausgestattet.

TimelineLite und TimelineMax:
Mit diesen beiden neuen Flash-Tools kann man nun Tweensequenzen erstellen und verwalten. Das ganze kann man sich wie eine Art virtueller MovieClip vorstellen, in dem man einzelne Tweens auf der Zeitleiste platzieren kann. Die Tween-Sequenzen lassen sich dabei komplett animieren. Abspielgeschwindigkeit verändern, anhalten, fortsetzen und rückwärts ablaufen lassen stellen kein Problem mehr dar.

TweenNano:
Das Super-Leichtgewicht der GreenSock Tweening Platform ist ganz klar TweenNano. Mit nur 1,6 Kilobyte wurde bei diesem Flash-Tool bewusst darauf gesetzt, so sparsam wie möglich mit den Ressourcen umzugehen. Abgeleitet wurde TweenNano von TweenLite, ist dabei aber mit weniger Funktionen ausgestattet. Zum Einsatz dürfte das Flash-Tool wohl unter anderem in animierten Werbebannern kommen, bei denen oft besonders Wert auf eine kleine Dateigröße gelegt wird. TweenNano ist für AS2 und AS3 verfügbar.

Weiterführende Links:
GreenSock Tweening Platform Version 11
GreenSock

Twitter API für Flash: Tweetr

Twitter, eines der zurzeit erfolgreichsten Social Networks ist nun auch für Flash Projekte verfügbar. Der Kurznachrichtendienst, welcher weltweit per Handy, Widget, Desktopanwendung, Websites oder Blogs aktualisiert wird, kann mit der neuen AS3-API für Flash names “Tweetr” in Flash Websites eingebaut werden. Die Flash-API enthält dabei praktisch alle Features der Twitter-API, unter anderem Tweets senden oder Tiny-URL`s.

Um die Crossdomain-Restriktionen von Twitter zu umgehen ist in der AS3 API ein einfach zu installierender PHP-Proxy enthalten, der über eine Benutzeroberfläche eingerichtet und administriert werden kann. Derzeit gibt es “Tweetr” mit einer umfangreichen Dokumentation bei Google Code  in der Version 0.95.

Was ist neu in der Tweetr Flash-API Version 0.95?
1: Added Twitter List Methods.
2: Added missing Profile Methods, including Profile Image/Background Upload.
3: Added friendships/show Methods.
4: Added blocks/exists, blocks/blocking and blocks/blocking/ids Methods.
5: Added trends/current, trends/daily and trends/weekly Methods.
6: Added report_spam Method.
7: Added URL Unshortener Class using the public service provided by http://untiny.me/
8: TweetrProxy has Installer/Configurator Script now.

Quelle: blog.swfjunkie.com

Weiterführende Links zur Tweetr Flash-API:
Tweetr

YouTube Player API für AS 3 verfügbar

Mithilfe der YouTube Player API haben Flasher und Webdesigner die mit AS3 arbeiten, jetzt die Möglichkeit YouTube Videos leichter in Ihre AS3 Projekte einzubinden. Bis dato war dies nur über einen AS2 Workaround möglich, der mitunter sehr umständlich war.

Die YouTube Flash API nennt sich Chromeless Player und ist bei Google Code mit einer ausführlichen YouTube ActionScript 3.0 Player API Reference und einem hilfreichen Developer Forum zu finden.

Flash Tutorial: Sound-Spektrum mit AS 3

Noch vor einigen Jahren konnte man mit Flash das Sound-Spektrum nur faken, sprich, man zeichnete sich Balken oder Linien auf die Bühne und animierte diese per Hand. Das war natürlich kein zufriedenstellendes Ergebnis, also wurde in den Folgeversionen von Flash eine Sound,- und SoundMixer-Klasse eingeführt, die für solche Visualisierungen zuständig ist. Die in der SoundMixer-Klasse enthaltenen Methoden und Eigenschaften ermöglichen uns dabei auf die Soundsteuerung innerhalb eines Flash-Films zuzugreifen. Wir zeigen euch nun heute wie man mit Flash und AS3 ein Echtzeit Sound-Spektrum entwickelt.

1. Zunächst erstellen wir eine neue Flash-Datei (AS3). Speichern könnt ihr sie unter dem Namen spektrum.fla. Einen Sound benötigt ihr natürlich auch. Diesen legt ihr in dasselbe Verzeichnis in dem die spektrum.fla liegt.

2. Nun gehts auch schon ans programmieren. Der gesamte Code wird dabei ins erste Schlüsselbild der Hauptzeitleiste geschrieben. Wir initialisieren zuerst die Objekte die wir zur Darstellung des Spektrums benötigen:
var sound:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var bytes:BitmapData = new BitmapData(256, 100, true, 0x000000);
var bitmap:Bitmap = new Bitmap(bytes);

3. Danach fügen wir das Bitmap der Anzeigeliste hinzu und positionieren es. Anschließend laden wir den Sound mithilfe von sound.load() und new URLRequest() und spielen ihn ab. Wichtig ist in AS3 das wir den Sound vorher dem Soundchannel hinzufügen:
addChild(bitmap);
bitmap.x = 150;
bitmap.y = 150;

sound.load(new URLRequest("sound.mp3"));
channel = sound.play();

4. Nun benötigen wir eine Funktion die das Abfragen des Spektrums ermöglicht. In der Funktion legen wir ein ByteArray an, das mit den Werten der Methode SoundMixer.computeSpectrum() befüllt wird. Die Werte werden als normalisierte Gleitkommawerte im Bereich zwischen -1,0 und 1,0 formatiert. Die Größe des erstellten ByteArray-Objekts ist auf 512 Gleitkommawerte festgelegt, wobei die ersten 256 Werte den linken Kanal darstellen und die restlichen 256 Werte den rechten Kanal. Zum Schluß wird das Bitmap in 2 for-Schleifen (für jeweils den linken und rechten Kanal) aktualisiert:
function onEnterFrame(event:Event):void {
var spectrum:ByteArray = new ByteArray();
SoundMixer.computeSpectrum(spectrum);
bytes.fillRect(bytes.rect, 0x000000);
for (var i:int = 0; i < 256; i++) {
bytes.setPixel32(i, 20 + spectrum.readFloat() * 20, 0xff000000);
}
for (var j:int = 0; j < 256; j++) {
bytes.setPixel32(j, 60 + spectrum.readFloat() * 20, 0xff000000);
}
};

5. Als letztes müssen wir die Funktion noch über einen ENTER_FRAME EventListener aufrufen um eine kontinuierliche Aktualisierung zu ermöglichen und fertig ist das Soundspektrum:
addEventListener(Event.ENTER_FRAME, onEnterFrame);

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

Flash Tutorial: Preloader mit AS 3

Möchte man mit Flash größere Daten laden, kommt es vor das bei langsamen Internetverbindungen, Animationen zwischendurch aussetzen oder überhaupt kein Bild zu sehen ist. Für solche Fälle gibt es in Flash sogenannte Preloader, die den Flash-Film komplett vorladen um ihn dann anschließend vollständig und ohne Ruckler abzuspielen. Angewendet werden diese Preloader schon seit es Flash gibt, wir wollen uns heute aber einem mit AS 3 programmierten Preloaders zuwenden.

Dazu benötigen wir 2 Textfelder und einen Balken-Movieclip, um den Ladefortschritt zum einem als Zahl und zum anderen grafisch darzustellen. Als erstes erstellen wir also 2 Textfelder, eins nennen wir total_txt und das andere loaded_txt, um einerseits die geladenen und die gesamten Kilobytes anzuzeigen. Danach erstellen wir einen Balken mit 100 px Breite und 30 px Höhe und nennen ihn bar_mc. Die Platzierung ist dabei euch überlassen.

Und nun zum Code:

1. Zuerst wird der Loader angelegt. Zum laden nehmt bitte eine möglichst große externe SWF, um später beim lokalen testen überhaupt etwas zu sehen:
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("test.swf");

2. Um den Ladefortschritt anzuzeigen, benötigen wir nun in Actionscript 3 ein Event ProgressEvent.PROGRESS. Dieses ist dem LoaderInfo-Objekt untergeordnet unter contentLoaderInfo. Das Event wird bei jedem Ladefortschritt ausgelöst und muß nicht beendet werden. Man spart sich damit die Aufrufe über ENTER_FRAME, so wie es in AS 2 oft gelöst wurde:
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);

3. Danach brauchen wir das Ereignis Event.COMPLETE für das LoaderInfo-Objekt um abzufangen, wann der Ladevorgang fertig ist:
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, ready);

4. Anschließend wird der Ladevorgang gestartet und der Anzeigeliste hinzugefügt:
loader.load(url);
addChild(loader);

5. Nun zu den Textfeldern. Hier werden nun die Bytes in Kilobytes umgewandelt, damit die Textfelder die geladenen, sowie die gesamten Kilobytes anzeigen:
function loading(evt:ProgressEvent){
loaded_txt.text = Math.round(evt.bytesLoaded / 1000);
total_txt.text = Math.round(evt.bytesTotal / 1000);
}

6. Für den Ladebalken benötigen wir nun noch eine Berechnung des Prozentwerts der geladenen Bytes im Verhältnis zu den gesamten Bytes. Dazu erweitern wir die Funktion loading() um 2 Codezeilen:
function loading(evt:ProgressEvent){
loaded_txt.text = Math.round(evt.bytesLoaded / 1000);
total_txt.text = Math.round(evt.bytesTotal / 1000);
var percent:int = 100 * evt.bytesLoaded / evt.bytesTotal;
bar_mc.width = percent;
}

7. Zum Schluß könnt ihr nun noch der Funktion ready() weitere Anweisungen hinzufügen. Oft wird hier zum nächsten Frame gesprungen oder der Abspielkopf wird auf play() gestellt. Was nun genau für Anweisungen dort hineinkommen ist euch überlassen:
function ready(evt:Event){
//Hier ist Platz für weitere Anweisungen;
}

Das wars auch schon. Nun könnt ihr ganz bequem mit Flash und Actionscript 3 einen Preloader bauen und eure Filme vorladen.

Flv mit Netstream und Netconnection laden und steuern

Flash Videos, kurz .flv, lassen sich heute recht einfach mit Flash laden und steuern. Dazu gibt es die FLVPlayback-Komponente, die eine komplette Steuerung beinhaltet und somit das laden und steuern der Flv`s zum Kinderspiel macht. Möchte man aber eigenes Actionscript schreiben um Flv`s zu laden und zu steuern, muß man auf die NetStream und NetConnection Klasse zurückgreifen. Dies ist schon mit AS 2 möglich gewesen, wir wenden uns aber heute dem Beispiel mit AS 3 zu.

1. Zuerst erstellen wir eine Instanz der NetConnection. Dabei muß kein anderer Server angegeben werden, da die Verbindung auf demselben Server erfolgt:
var nc:NetConnection = new NetConnection();
nc.connect(null);

2. Danach wird ein NetStream Objekt instanziert und NetConnection angefügt:
var ns:NetStream = new NetStream(nc);

3. Zum eigentlichen Abspielen und Laden der Datei benötigen wir die Methode play(Datei). Da aber der Film am Anfang angehalten werden soll muß die Flv anfangs auf pause() gesetzt werden. Darüber hinaus muß, damit das erste Bild angezeigt wird, die Abspielposition auf seek(0) gesetzt werden. Das ganze sieht dann so aus:
ns.play("video.flv");
ns.pause();
ns.seek(0);

4. Der Video-Stream ist nur verwendbar, wenn wir ihn an ein Video-Objekt anhängen, das mit attachNetStream(NetStream) geschieht. Nun erhält das Video noch die korrekten Höhen,- und Breitenmaße und wird dann unterhalb eines Anzeigeobjektcontainers hinzugefügt, der sich unterhalb einer Maske befindet und so einen Teil des Videos ausschneidet:
var video:Video = new Video();
video.attachNetStream(ns);
video.height = 320;
video.width = 240;
placeholderMc.addChild(video);

5. Um das Video zu steuern benötigen wir einen Play,- , Stop,- und Pausebutton.
In AS 3 müssen nun Event-Listener für die verschiedenen Button angelegt werden:
playBtn.addEventListener(MouseEvent.CLICK, videoPlay);
stopBtn.addEventListener(MouseEvent.CLICK, videoStop);
pauseBtn.addEventListener(MouseEvent.CLICK, videoPause);

6. Zum Schluß müssen noch die Funktionen für die Event-Listener geschrieben werden. Dabei ist zu beachten, daß das Abspielen nicht mit play() gestartet wird, sondern mit resume(), da wir den Stream schon ganz am Anfang abgespielt und angehalten haben:
function videoPlay(evt:MouseEvent){
ns.resume();
}

7. Das stoppen des Streams besteht aus pause(), sowie seek(0) um den Abspielkopf wieder an den Anfang zu setzen:
function videoStop(evt:MouseEvent){
ns.pause();
ns.seek(0);
}

8. Als letztes erfolgt noch das pausieren des Streams mit der Methode pause():
function videoPause(evt:MouseEvent){
ns.pause();
}

Diese Grundsteuerung läßt sich dann nach belieben erweitern, mit z.B. einer Positionsanzeige oder Vor,- und Zurückspulbutton, um einen voll funktionsfähigen Flash Videoplayer mit AS 3 zu bauen.

Nächste Seite →