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

Flash Tutorial: TV-Rauschen mit AS 2

Heute zeigen wir euch wie man mit Flash und ein wenig Actionscript das bekannte TV-Rauschen erzeugt. Dazu bedarf es lediglich einem Bild von einem Fernseher in Frontansicht (entweder ihr zeichnet euch selbst einen oder schaut im Netz nach geeigneten Bildern), einer Schaltfläche und den Einsatz der BitmapData-Klasse und deren noise() Methode. Mit der noise() Methode kann man ein Bild mit zufällig platzierten Pixeln versehen und somit eignet sich die Methode wunderbar zur Darstellung des Effekts.

1. Zuerst erstellen wir uns eine neue Flash-Datei. Danach importieren wir in Flash das Bild vom Fernseher und platzieren es ins erste Schlüsselbild der Zeitleiste. Der Fernseher wird mittig auf der Bühne zentriert.

2. Wir erstellen eine neue Ebene und zeichnen in der Ebene ein schwarzes Rechteck, das genau deckungsgleich mit der Bildröhre des Fersehers ist. Danach wandeln wir das Rechteck in einen Movieclip um und geben ihm den Instanznamen “maske”.

3. Wir erstellen wieder eine neue Ebene. Nun müssen wir noch eine Schaltfläche zum ein- und ausschalten des Fernsehers erstellen. Dazu zeichnen wir ein Rechteck (20×20 px) in die neue Ebene und platzieren es mittig unter dem Fernseher. Das Rechteck wird wieder in einen Movieclip umgewandelt und bekommt den Instanznamen “button”.

4. Ab jetzt kommt Actionscript zum Einsatz. Wir erstellen uns nochmals eine neue Ebene und platzieren dort den Actionscript-Code.

5. Als erstes benötigen wir einen Platzhalter-Movieclip für das Rauschen und einen duplizierten Masken-Movieclip:
stop();
Stage.scaleMode = "noScale";

this.createEmptyMovieClip("rauschen", 1);
rauschen._x = maske._x;
rauschen._y = maske._y;

var aus = this.maske.duplicateMovieClip("aus", this.getNextHighestDepth());
aus._visible = false;

6. Nun benötigen wir ein BitmapData-Objekt und fügen es dem Platzhalter-Movieclip hinzu. Der Platzhalter-Movieclip wird wiederum vom Masken-Movieclip maskiert:
var bmp = new flash.display.BitmapData(maske._width, maske._height);
rauschen.attachBitmap(bmp, 1);
rauschen.setMask(maske);

7. Als nächstes erstellen wir die Funktion erstelleRauschen() um die Pixel kontinuierlich zu verändern. Dazu bedarf es einer onEnterFrame-Funktion und der noise() Methode:
function erstelleRauschen(){
this.onEnterFrame = function(){
bmp.noise(Math.floor(1000 * Math.random()), 0, 255, 1 | 2 | 4, true);
};
};
erstelleRauschen();

8. Zum Schluß geben wir noch dem Button die benötigte Funktionalität zum ein- und ausschalten des Fernsehers:
button.onPress = function(){
aus._visible = !aus._visible;
if(aus._visible == true){
delete this._parent.onEnterFrame;
}else{
this._parent.erstelleRauschen();
};
};

Wenn wir nun die Flash-Datei veröffentlichen sehen wir das bekannte TV-Rauschen.

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!

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.

Flash Filter mit AS 3

Filter in Flash gibt es schon eine ganze Weile. Man kann sie entweder über den Eigenschafteninspektor einem Movieclip zuweisen, oder man programmiert sie in AS 2 oder AS 3. Wir wenden uns heute dem Beispiel eines in AS 3 programmierten Filters zu, da diese wesentlich flexibler zu steuern sind.

1. Zunächst erstellen wir ein BitmapData Objekt mit zwei Rechtecken:
var data:BitmapData = new BitmapData(200, 100, false, 0xFF0000);
var rect:Rectangle = new Rectangle(20, 20, 160, 60);
data.fillRect(rect, 0x00FFFF);

2. Um den Flash Filter anzuwenden, benötigt man 4 Informationen. Zum einen das BitmapData Objekt als Ursprung des Filters, einen Anfangspunkt, den Filter und ein Rechteck auf den der Filter angewendet wird:
var point:Point = new Point(20, 20);
var filter:BlurFilter = new BlurFilter();
data.applyFilter(data, rect, point, filter);

3. Zum Schluß muß das Bitmap noch zur Anzeigeliste hinzugefügt werden:
var bitmap:Bitmap = new Bitmap(data);
bitmap.x = 100;
bitmap.y = 100;
addChild(bitmap);

Mit diesem Basissetup lassen sich so verschiedene Flash Filter erstellen und modifizieren.

Externen Sound mit AS 3 laden und abspielen

Sounds müssen für Flash im MP3 Format vorliegen, um sie extern zu laden. Dazu benötigt man in AS 2, wie auch in AS 3 die Sound Klasse. Mit dieser ist es denkbar einfach einen Sound in Flash zu laden und abzuspielen. Die Klasse wurde in AS 3 aber um einige positive Veränderungen erweitert, auf die wir gleich zu sprechen kommen.

1. Zuerst müssen wir ein Sound Objekt erstellen:
var sound:Sound = new Sound();

2. Externen Sound laden:
sound.load(new URLRequest("sound.mp3"));
Die Methode load(URL), erwartet als Parameter eine Adresse, die in AS 3 immer konsistent mit einem URLRequest Objekt angegeben wird.

Alternativ kann man die Adresse auch vorab definieren:
var adress:URLRequest = new URLRequest("sound.mp3");

Eine andere und somit auch gleichzeitig die kürzeste Variante ist, die Adresse direkt beim Erstellen des Sound Objekts anzugeben:
var sound:Sound = new Sound(new URLRequest("sound.mp3"));

3. Sound steuern:
sound.play();

Neu in AS 3 ist, das man den Sound einem Soundkanal zuweisen muß um ihn weiter zu steuern. So ist jeder Sound der abgespielt wird, Teil eines Soundkanals und kann somit genauer gesteuert werden als noch in AS 2. Bei mehreren Sounds ist das äußerst sinnvoll. Der Soundkanal besitzt eine eigene Klasse, SoundChannel. Das dazugehörige Objekt muß aber nicht instanziert werden, sondern wird von sound.play() zurückgeliefert.

var channel:SoundChannel = sound.play();

Mit channel.stop() kann man dann den Sound auch wieder anhalten.