sonja vieten | interactive design

HTML5 Canvas Animation

svieten — Fri, 29 Apr 2011 05:05:20 +0000

Als Web Designerin interessiert mich der zukünftige HTML5 Standard mit seinem 2D Canvas Element sehr. Zwar wird es noch einige Jahre dauern bis sich der neue Standard im Web durchsetzen wird, dennoch ist es interessant sich damit zu befassen. Als Beispiele [öffnen] habe ich hier Animationen mit Processing.js erstellt. Zur Betrachtung ist kein Plugin, weder Flash noch Java, notwendig. Allerdings muss der Browser HTML5/ JavaScript unterstützen. Für Flash AS3 Kenner bietet sich EaselJS zur HTML5 Entwicklung an (a javascript library for working with the html5 canvas element, based on Flash Display List).

Flash CS5: the art of design and animation

svieten — Mon, 21 Mar 2011 05:10:36 +0000

Buchtipp: “How to cheat in Adobe Flash CS5″ von C.Georgenes (en). Wer sich eingehender mit den Techniken der Animation in Flash beschäftigen möchte und auch die vielen neuen Features CS4/CS5 kennenlernen möchte sollte es mit diesem Buch versuchen! Neben zahlreichen professionellen Einblicken, Tricks und Tipps enthält das Buch auch eine DVD mit Beispielmaterial und nützlichen Erweiterungen. Der Autor betreibt auch ein Forum zum Thema Flash Animation.

Wer seine Animationen darüber hinaus interaktiv und multimediafähig machen möchte benötigt Flash ActionScript Kenntnisse. Einen umfangreichen und soliden Einsteig biete ich über meinen downloadbaren Kurs bei akademie.de “Actionscript 3 mit fortgeschrittenen Animationstechniken“. Dazu biete ich auch regelmäßig Flash und ActionScript Crash Kurse als Online Workshops an.

Flash 3D Visuals

svieten — Tue, 22 Feb 2011 05:14:13 +0000

Zeit für eine Spielerei mit flashdraw3d. Basierend auf einer Demo der 3D Drawing API für Flash Vektoren habe ich eine kleine Sound Visualisation entwickelt. 2 unterschiedliche Sounds sind “betrachtbar”.

Flash Sound Spectrum 3D Draw

Workshop: Interaktivität mit ActionScript 3

svieten — Fri, 07 Jan 2011 10:06:18 +0000

Wie mache ich Flash Filme interaktiv? Diese Frage und mehr werden in meinem 3-wöchigem Workshop bei akademie beantwortet. Wer sich bisher noch nicht an Flash ActionScript 3 gewagt hat bekommt dort einen intensiven Einstieg geboten. Da ich die Erfahrung gemacht habe, dass sich Teilnehmer mit den üblichen ActionScript Lernhilfen überfordert fühlen (chinesisch?) ist mein Kurs absolut praxisbezogen. Es werden keine Programmierkenntnisse wie selbstverständlich vorausgesetzt. Aktuelle Flash CS4/CS5 Kenntnisse sollten jedoch vorhanden sein. An vielen Praxisübungen und einem Projekt lernen Sie die Sprache kennen und gebrauchen. Dabei gehe ich auch auf fortgeschrittene Animationstechniken ein, da Sie in Ihrem Abschlussprojekt eine eigene Figur erstellen, animieren und interaktiv steuern. Neue Tools aus Flash CS5 kommen ebenfalls zum Einsatz.
Die umfangreichen Unterlagen und Beispiele, die ich Ihnen im Kurs zur Verfügung stelle, können Sie behalten und so auch später zum Nachschlagen nutzen. Start nächste Woche: Anmelden/Informieren

Feuer Effekt – Elk on fire

svieten — Wed, 01 Dec 2010 11:48:58 +0000

Wie jedes Jahr der Hinweis zum freaky-flash Widget “Adventskalender”, der sich sowohl auf Websites als auch auf dem iGoogle Desktop einfügen lässt. Der Code steht zum Kopieren und Einfügen zur Verfügung. Passend zur Jahreszeit gibt es auch eine neue interaktive Flash Animation als e-Card: “Elk on Fire“.

Per “Math.atan2″ Methode rollt der Elch seine Augen passend zum Mauszeiger. Der interaktive AS3 basierte Feuereffekt ändert sich, je nachdem wo sich der Mauszeiger im Film befindet. Das Feuer basiert auf dem AS3 Source Code der sehr guten Feuer Komponente von Grant Skinner, die ich als Grundlage genommen und entsprechend modifiziert habe.

Flash on the Beach 2010

svieten — Mon, 04 Oct 2010 05:00:39 +0000

Tipp: Stories zur europäischen Flash Konferenz FOTB in Brighton von flashmagazine.

FOTB 2010 Titles from Süperfad on Vimeo.

Flash CS5 Workshop – neue Features

svieten — Sun, 05 Sep 2010 05:10:44 +0000

Mein nächster Flash Crash Online Workshop findet ab 16. November bei akademie.de statt. Der Vorteil: Sie können Ort und Zeit frei wählen und einteilen. Der Kurs dauert 4 Wochen und es werden wöchentlich praxisbezogene kleine Projekte anhand meiner Kursunterlagen umgesetzt. Sie tauschen sich mit den anderen Teilnehmer und mir in dieser Zeit über ein begleitendes Forum aus.

Seit Flash CS4 hat sich das Programm grundlegend geändert und sehr viele neue Funktionen sind hinzugekommen. Sie werden in diesem intensiven Crash Kurs eine Gesamtübersicht erhalten über alte und alle neuen Funktionen in CS4/CS5 wie zB.:

- Das neue objektorientierte Bewegungstween
- Bewegungseditor, Motion Presets
- Inverse Kinematics, Bones, IK zur Laufzeit
- 3D Animation (2D Objekte im Raum animieren)
- Deko und Spray Tool Animation
- ActionScript 3 Code Snippets, Code Hinting
- TLF Text Layout Framework

Einen Einstieg in die Anwendung von ActionScript 3.0 erhalten Sie ebenfalls, der im Aufbaukurs im Januar vertieft werden kann.

QR Code 3D – Flash Animation

svieten — Mon, 23 Aug 2010 05:30:08 +0000

Web-Animation experimentell: “QR Code 3D Globe – earth’s rotation animation”. Meine interaktive Desktop AIR Applikation, die QR Code generieren und als Bild abspeichern kann, diente als Basisidee für diesen Clip.

Hintergrundinfos:
Quick Response. QR code consists of black modules arranged in a square pattern on white background. The information encoded is text. QR Code is a two-dimensional matrix (upper left) and i put it also in the third dimension. QR ist the acronym of quick response. Hence the idea of asking the code generator a question. Of course, the “answer” is still the visualisation of the “question” itself.

The QR Code creator and animation is built with flash actionscript 3 and uses the Google Chart Api at runtime to encode the information.

Code Hinting in Flash CS5

svieten — Wed, 11 Aug 2010 05:15:33 +0000

Der Aktionen Editor in Flash CS5 verfügt über neue und erweiterte Funktionen zur Code Komplettierung während der Eingabe. Auf die vielen guten Neuerungen werde ich hier nicht näher eingehen, allerdings ist mir schnell aufgefallen, dass die bis dahin üblichen Code Ergänzungen für manuell im Film angelegte Instanzen von MovieClips, Buttons und Textfeldern nicht mehr angezeigt wurden. Die Suffixe
_btn, _mc und _txt hatten leider keine hilfreichen Reaktionen mehr im Editor zur Folge.

Meine Lösung: Die Instanzen per AS3 zusätzlich instanziieren, anschließend sind nach dem Dot die objektbezogenen Code Hints wie früher erhältlich. Hier ein Beispiel für eine Schaltflächen Objekt (mit dem Instanznamen “my_btn” auf der Bühne). Nach Deklarierung der Variable mit dem Datentyp “SimpleButton” wird die Import Anweisung für die zugehörige Klasse automatisch eingefügt und das Code Hinting für die Klasse “SimpleButton” ist wieder erhältlich.

Das hier benötigte MouseEvent für die Schaltfläche wird in dem Code Hints PopUp auswählbar, sobald man den EventListener hinzugefügt hat.

_ _ _

Hier geht es übrigens zu den Infos zu meinem nächsten Flash CS5 und ActionScript 3.0 Online Crash Kurs Workshop bei akademie.de
_ _ _

Es reicht aus die Objekte zu instanziieren, die benötigten Klassen werden dabei automatisch importiert. Beispiel für eine Instanz Schaltfläche (my_btn) und für eine MovieClip Instanz (my_mc):

var my_btn:SimpleButton;
var my_mc:MovieClip;

Bleibt zu hoffen, dass Adobe in einem Update die Code Hints für manuell angelegte Objekte auf der Bühne wieder vereinfacht.

Fraktale in Flash ActionScript 3

svieten — Wed, 21 Jul 2010 05:20:05 +0000

Cauliflower – interactive fractals in Flash ActionScript.
Ein neues Experiment auf freaky-flash.de. Der “Blumenkohl” besteht aus sich wiederholenden Verzweigungen -Branches- dynamisch generierter Objekte . Bei Mouse Over verändern Filter Effekte das Objekt. Ausgangspunkt für die Entwicklung war das empfehlenswerte Tutorial Fractals in ActionScript 3 von actionscripter.co.uk.

Flash CS5 Blitz Animation

svieten — Sat, 29 May 2010 05:30:24 +0000

Es gibt einige Neuigkeiten in Flash Professional CS5. Eine habe ich eingehender ausprobiert: Die Erweiterung des Deko Tools. Pflanzen, Bäume, Hochhäuser, Muster, sogar ein Particle System uvm. sind als Pinselspitze integriert. Und es gibt nun einen “Blitz” Pinsel, – wie passend für Flash. In Kombination mit Filtern und Effekten habe ich damit eine interaktive Animation kreiert.

Weitere interessante Neuerungen: Die neue TLF Text Engine, das neue XFL Quellformat, IK Federeinstellungen, ActionScript Snippets Verwaltung, Workflow zwischen Flash Professional und Flash Builder, ….

Flash Rough Animation

svieten — Thu, 29 Apr 2010 04:50:54 +0000

Macht auch Spaß… eine kurze 5minutes- Keyframe Animation in Flash.

Flash Preloader AS3

svieten — Thu, 18 Mar 2010 05:24:06 +0000

Schon einmal festgestellt, dass ein Preloader erst viel zu spät beginnt abzuspielen? In Zusammenarbeit mit Klassen oder exportierten Objekten aus der Bibliothek zur Laufzeit gilt es zu beachten, dass eine Preloader Abfrage vor exportierten Bibliothekssymbolen im Script aufgerufen wird. Also, die Preloader Anweisung in Bild 1 schreiben. Die Klassen bzw. Bibliothekssymbole dann erst in Bild 2 exportieren. Hier ein ActionScript 3.0 Snippet, das – in einem ersten Frame in der Zeitleiste positioniert-, den SWF Film vor dem Weiterspielen vorauslädt. In einem dynamischen Textfeld in diesem Frame, Instanzname “prozent_txt”, wird die Prozentanzeige des Ladestatus angezeigt.

addEventListener(Event.ENTER_FRAME, preLoad);

function preLoad(evt:Event):void {
var allebytes:Number =loaderInfo.bytesTotal;
var geladen:Number =loaderInfo.bytesLoaded;
var total:Number =geladen/allebytes;

if(geladen==allebytes) {
removeEventListener(Event.ENTER_FRAME, preLoad);
play();
}
else {
prozent_txt.text= Math.floor(total*100)+"%";
}

}

Beispiel für die Veröffentlichung mit Preloader, wenn zusätzlich Klassen (bzw. Bibliothekssymbole) im Film exportiert werden. Unter Veröffentlichungseinstellungen/Flash/ActionScript 3 kann der Zielframe für den Export global geändert werden, zB. auf Frame 2. Die Prozentanzeige in Frame 1 beginnt dann sofort.

Flash ActionScript 3.0 Workshop

svieten — Mon, 15 Mar 2010 06:05:56 +0000

Flash ActionScript 3 Online Crash Kurs bei akademie.de:
Sie besitzen bereits gute Flash CS4 Kenntnisse – es fehlt jedoch an tieferen Animations- und ActionScript Kenntnissen? Sie entwickeln ein interaktives Spiel mit einer animierten Cartoon-Figur und schaffen sich während der Spielentwicklung ein solides ActionScript-Fundament. Am Ende des Workshops beherrschen Sie die fortgeschrittenen Animations- und Interaktionstechniken in ActionScript 3.0, die Sie für komplexe Flash-Projekte – von interaktiven Flash-Websites bis zur Spieleprogrammierung – benötigen. Hinweis: Dies ist kein OOP Developer Kurs, – wir arbeiten ausschließlich in und mit Flash CS4 Professional in Kombination mit ActionScript 3.0. Zu den Workshopinfos.