Animate CC Canvas

Basic Actionscript 2 Actionscript 3 HTML5/ Canvas Shortcuts Video

Die Inhalte dieses Tutorials "AnimateCC / Html5" können Sie nun in meinem Premium Bereich aufrufen. Sie erhalten Zugang für 1 Jahr zu einem fairen Preis von 23,90 €

Registrieren :|: Anmelden

 

Wahrscheinlich das einzige umfangreiche Online Tutorial zu Animate CC / Canvas / EaselJS

In diesem Premiumbereich erhalten Sie ausführliche Informationen zur HTML5/Canvas Programmierung mit Animate CC. Die Tipps werden ständig erweitert. Es ist die optimale Hilfe um Flash in HTML5 Canvas umzuwandeln oder neue Anwendungen im HTML5/ Canvas Format zu erstellen. Sie bekommen eine umfangreiche Sammlungen an Tipps, Beispielen, Videos, Codebeispielen und Step by Step Anleitungen. Vielleicht ist es dieses das einzige deutschsprachige aktuelle Videotutorial, Buch oder Online Tutorial zum Thema "EaselJS, Canvas, Animate CC".

Flash vs HTML5/Canvas

Animate CC ist nicht einfach ein anderer Name des bekannten Flash Programms, sondern es ist wohl das beste Programm, um Animationen, Spiele oder interaktive Anwendungen für das Netz oder auch für den Desktop Rechner zu erstellen. Viele verwechseln die Veröffentlichung als Flashdatei mit diesem Programm und fordern HTML5/ Canvas anstatt Flash. Dabei hat Adobe hat längst auf die neuen Techniken reagiert und bietet die Veröffentlichung in den verschiedenen Formaten an. (HTML5/Canvas, Snap SVG, WebGL, Air Mobile Apps, Air Desktop Anwendungen, Flash)

Die vielen nützlichen Grafikfunktionen, das Arbeiten mit der Zeitleiste, die Bones und vieles mehr sind die Basis, die man für jedes dieser Formate nutzen kann. Die Programmierung hängt von der Art der Veröffentlichung ab. Damit die Unterschiede in der Programmierung nicht so groß sind gibt es das Javascript Framework EaselJS, welches ähnliche Klassen oder Objekte in Javascript zur Verfügung stellt, die schon in Actionscript3 ihren Zweck erfüllten. Dennoch gibt es einige wesentliche Unterschiede.

Da ich speziell zu diesem Thema , der Transskription von AS3 in Javascript/ EasleJS kein einziges Buch gefunden habe und auch in den bekannten E-learning Plattformen wie Video to Brain nichts Aktuelles zu diesem Thema finden kann, biete ich hier eine umfangreiche Sammlung an Hilfestellungen, Codebeispielen, Fla Beispielen und Videos an, die den Umstieg von AS3 in Javascript und den Einstieg in AnimateCC ermöglichen.

Ich werde diesen Premiumbereich von Zeit zu Zeit mit neuen Beispielen und Themen erweitern. Es ist ein Projekt, welches über die Jahre wachsen wird.Neben den Basics versuche ich auch speziell Probleme zu behandeln, die in den gängigen Tutorials nicht vorkommen. Bei den neuen Möglichkeiten ein Canvas Element beliebig auf der Html-Seite zu plazieren oder die Größe ans Browserfenster anzupassen, funktionieren viele der herkömmlichen Lösungen nicht mehr. Selbst eine einfach Positionierung eines Movieclips per x y Koordinate hat seine Tücken. siehe hier

Folgende Inhalte erwarten Sie schon jetzt:

Einstellungen für Veröffentlichung

Größe und Position des Canvas Elements

Die Veröffentlichungseinstellungen unterscheiden sich stark, von den Flash Veröffentlichungseinstellungen. Trotzdem bleiben keine Wünsche offen, was die Positionierung und Größe anbetrifft. Das Canvas Element kann in fester Größe oder einer Größe, die sich ans Fenster anpasst veröffentlicht werden (responsive).

HTML Vorlage für Veröffentlichung

Bei der Veröffentlichung wird auch eine HTML Datei erzeugt. Für diese HTML Datei kann man sich eine Vorlage erstellen, so dass bestimmte Elemente voreingestellt sind wie beispielsweise Einbindungen von Script Dateien, CSS Formatierungen etc.

Easel JS

Die Programmiersprache in Animate CC / Canvas ist Javascript. Mit dem Javascript Framework EaselJS ist der Umstieg von AS3 einfacher, da hier viele Actionscript3 Klassen vorprogrammiert sind. So kann man beispielsweise auf ähnliche Weise einen Movieclip erstellen und dessen Methoden und Eigenschaften aufrufen oder ändern.

EaselJS ist ein Teil von CreateJS welches noch weitere Frameworks wie TweenJS etc. zur Verfügung stellt.

CreateJS die offizielle Seite

Code einfügen

Die Programmierung lässt sich auf 2 Arten erstellen. Entweder in einem Frame oder in einem Scriptblock auf der HTML Seite. Ich bevorzuge die Programmierung im Frame.

Movieclips

Wie auch in Flash hat jeder Movieclip ein eigenes Koordinatensystem. In der Canvas Version gibt es jedoch einige Unterschiede, die es zu beachten gilt. Die Mauspositionen funktionieren nicht so wie man es gewohnt ist.

Wie kann man Movieclips referenzieren. Wie weist man Movielcips Eigenschaften zu, wie registriert man einen EventListener, oder ruft Methoden auf, wie beispielsweise die Zeitleistenbefehle. Das einfachste ist die Codesnippets zu benutzen. Wenn man jedoch mehr als ein paar Buttons oder Movieclips hat, die ein Bild in irgendeiner Zeitleiste aufrufen sollen, stößt man schnell an die Grenzen der Codesnippets. Eine Bildergalerie mit Vorschaubildchen sollte man auf die Art nicht erstellen. Ich erkläre wie man die Codesnippets erweitert und anpasst.

Movieclips können ineinander verschachtelt sein und so muss man auch wissen, wie man diese anspricht. Außerdem kann man aus der Zeitleiste eines Movieclips auf die Hauptbühne zugreifen und dort Funktionen aufrufen die auf der Hauptbühne definiert sind. Das ist in Actionscript 3 nicht möglich. Movieclip Instanzen mit Durchnummerierung im Namen kann man in einer for-Schleife ansprechen. Außerdem kann man Movieclips auch per Javascript auf die Bühne bringen.

An mehreren Step by Step Beispielen zeige ich auf wie man von einer reinen Codesnippet Lösung zu einer intelligenteren Lösung gelangt, die nur auf sehr wenig Code besteht. Wer das einmal gelernt hat, wird darauf nie wieder verzichten.

Variable Gültigkeistbereich

Variablen und ihr Gültigkeitsbereich. Javascript ist Actionscript 2 sehr ähnlich und somit hat man auch hier andere Möglichkeiten in der Hierachie der Displayobjekte zu programmieren. Wie erstellt man eine Variable, auf die man in der gesamten Zeitleiste Zugriff hat? Gibt es in HTML5/Canvas so etwas ähnliches wie root, mit dem man auf die Hauptzeitleiste zugreift? Ja das gibts.

Desweiteren erkläre ich die Basics in Sachen Variable und Datentypen mit einigen Beispielen.

Function

In Javascript kann eine Funktion auch eine Konstruktorfunktion sein, die aufgerufen wird, wenn man ein neues Objekt erstellt. Daraus ergeben sich gewissen Unterschiede zu AS3, denn innerhalb einer solchen Funktion bezieht sich das Schlüsselwort this, immer auf dieses Objekt. Welche Probleme und Lösungen sich daraus ergeben erkläre ich anschaulich an mehreren Beispielen.

Auch wenn es sich eignetlich um Javascript Basic Wissen handelt habe ich ca 10 Beispiele, die Funktionen erläutern.

Ticker

Mit der EaselJS Ticker Klasse bestimmt man einen Event der zeitgesteuert ist. Ähnlich wie der AS3 ENTER_FRAME Event. Man hat mit der Ticker Klasse verschiedene Möglichkeiten die Wiederholungsrate zu definieren. Entweder über FPS , Frames per Second oder über ein Intervall in Millsekunden. Es gibt weitere Eigenschaften pause und man kann Zeiten abfragen. Die Zeit seit Aufruf des Tickers, Die Zeit zwischen den einzelnen Tick Events. Die Zeit wo der Ticker nicht pausiert wurde. Damit hat man viele Möglichkeiten zeitgesteuerte Anweisungen zu definieren. Man kann Animationen erzeugen, die unabhängig von der Bildlaufrate sind und somit auch auf langsamen Systemen die Geschwindigkeit genau einhalten.

Man kann damit die Zeit abfragen, um beispielsweise eine Spieldauer festzulegen. Mit den Methoden und Eigenschaften des Ticker hat man mehr Möglichkeiten als es alleine mit der Javascript Funktion setTimeout() möglich ist.

Touch Events / cursor

Touch Events benötigen gewisse Voreinstellungen. Wenn HTML5 Canvas Programmierungen auch auf dem Smartphone laufen sollen, muss man bedenken, dass es keine MouseEvents gibt. Hier muss man wissen was geschieht mit mouseover und mouseout auf dem Smartphone.

Mouse Interaction

Es ist nicht so einfach die Mausposition zu ermitteln, da die Maus vom Browser geliefert wird und nicht vom Canvas Element. Wenn das Canvas Element nicht rechts oben in der Ecke liegt, sondern in der Mitte oder wenn die Ansichtsgröße des Browsers verändert wird stimmen die Koordinaten vom Canvas Element und Browserfenster nicht mehr überein. Von daher sind die alten Infos aus älteren EaselJs Versionen wie stage.mouseX, stage.mouseY eigentlich nicht mehr zu benutzen.

Movieclip bewegt sich mit Mausposition

Hier geht es darum wie man einen Movieclip mit der Mausposition bewegt. Damit das auch bei allen Größen und Positionseinstellungen des Canvas Elements funktioniert, muss man die Cusorposition des Browsers in das Koordinatensystems des Canvaselements übertragen.

Movieclip bewegt sich dynamisch auf Mausposition

Hier zeige ich das schöne Beispiel wie ein Movieclip sich dynamisch auf die Maus zubewegt. Durch eine einfache aber raffinierte Umrechnung entsteht eine natürliche Bewegung, die schnell beginnt und zur Mausposition hin abbremst.

Drag & Drop

Drag und Drop ist ein Thema welches in Actionscript3 sehr einfach zu handhaben ist. Es stehen viele Funktionen und Möglichkeiten zur Verfügung, wie das Ermitteln des dropTarget. Alles das gibt es in Javascript so nicht, man muss hier einen anderen Weg gehen. Ich zeige wie man ein dropTarget bestimmt und wie man ein Spiel erstellt wie mein Landkartenspiel erstellt.

Es ist das gleiche Prinzip wie ein Puzzle, welches man auch mit HTML5/ Canvas und EaselJS erstellen kann.

Drag and Drop bei einer responsive Größe des Canvas bedeutet eine besondere Herausvorderung. Außerdem zeige ich wie man ein Element verschiebt, ohne das die Mausposition in den Registrierpunkt rutscht.

regX, regY

regX und regY definiert einen Punkt, um den sich ein Movieclip dreht, oder um den ein Movieclip skaliert wird. Dieser Punkt kann händisch und programmatisch verändert werden. Das bringt viele Vorteile mit sich, aber man muss auch aufpassen, denn nun haben wir neben dem Registrierpunkt eines Movieclips der normalerweise x und y definiert noch einen weiteren Punkt. Ich erkläre an anschaulichen Beispielen wie es sich verhält und worauf man achten muss.

Event Listener

EventListener in AS3 und Javascript sind einerseits sehr ähnlich jedoch gibt es hier einige Stolpersteine, da man innerhalb einer Eventfunktion nicht so einfach auf die händisch auf die Bühne gezogenen Movieclips zugreifen kann. Ich erkläre was es mit this auf sich hat.

Ich erkläre was es für Möglichkeiten gibt. Wie man auf das evt.currentTarget zugreift, wie man EventListener entfernt.

Text und dynamischer Text

Seit Animate CC gibt es neue Textmöglichkeiten. Sowohl für statischen Text als auch für dynamischen Text. Es ist nun sehr einfach möglich eine Schriftart in dynamischen Text einzubetten.

Text und Hintergrund

Es gibt zwar keine background Eigenschaft für ein easelJS Textfield aber es gibt ein workaround, auch für dynamischen Text.

Symbol aus der Bibliothek laden

Ein Symbol oder besser gesagt ein DisplayObject kann aus der Bibliothek auf die Bühne gezogen werden oder mit Javascript der DisplayListe hinzugefügt werden.

Das bietet viele Möglichkeiten, so kann man in einer for-Schleife ein ganzes Kartenspiel auf die Bühne legen oder eine Bildergallerie mit ein paar Zeilen Code erzeugen.

Objekt orientierte Programmierung / prototype

Javascript ist eine prototypen basierte Sprache. Im Gegensatz zu Actionscript 3 welches objektorientiert ist. Javascript gleicht also mehr Actionscript 2 als Actionscript 3. Dennoch kann man in Javascript Objekt und so etwas ähnliches wie Klassen erzeugen.

Animation, programmierte Bewegung, TweenJS

Neben den Tweening Animationen gibt es auch die programmierte Bewegung. Desweiteren kann man auf das Framework Tween JS zurückgreifen ich beschreibe die verschiedenen Möglichkeiten mit Beispielen. TweenJS bietet viele "Beschleunigungsfunktionen" wie abprallen, beschleunigen, abbremsen. Man kann die sichtbaren Eigenschaften eines DisplayObjects animieren, wie Position, Größe, Transparenz, Farbe. Man kann selbstverständlich die Zeit definieren und die Anzahl der Wiederholungen. Nach Ablauf eines Tweens kann eine Funktion aufgerufen werden.

Programmierte Schlangenbewegung

In diesem Beispiel bewegt sich eine Schlange dynamisch in schwingenden Bewegungen auf die Maus zu. Siehe dazu dieses Beispiel

Programmierte Kreisbewegung / Trigonometrie

Mit programmierten Kreisbewegungen lassen sich zahlreiche Effekte erzielen. Hier kommt ein bisschen Trigonometrie ins Spiel, aber keine Angst ich erkläre es von Grund auf.

Mit Hilfe der Trigonometrie lassen sich elliptische, kreisförmige oder spiralförmige Animationen erstellen. Das Thema habe ich schon in meinen AS3 und AS2 Tipps ausführlich mit vielen anschaulichen Beispielen Schritt für Schritt erklärt und das kann auch hier angewendet werden.

 

Graphics Api / Zeichnen und Linien

Wie auch in Flash oder AS3 kann man Linien und Formen programmatisch zeichnen. Damit lassen sich interessante, effektvolle Animationen erstellen. So lassen sich beispielsweise schwingende Linien, wie ein wehender Vorhang erzeugen. Ein idealer Eyecatcher, der ein Website aufwertet, denn die Bewegungen sind nicht so aufdringlich sondern vermitteln Ruhe und Harmonie. Programmierte schwingende Linien lassen sich ideal mit Bildern kombinieren.

Eine anderes Beispiel der Animate CC Tutorials ist ein interaktives Zeichenbrett für den User im Browser oder Canvas Element.

Neben den schönen Effekten braucht man Zeichenfunktionen auch um wissenschaftliche Sachverhalte zu verdeutlichen. Beispielsweise um Herzkurven darzustellen. Dabei kommt es auch darauf an, in welcher Geschwindgkeit so eine Kurve gezeichnet wird. Ich habe hier mehrere Step by Step Beispiele vorbereitet, die gerade dieses Thema verdeutlichen.

Die Graphics Klasse bietet die Möglichkeit Linienstärke, Linienfarbe, sowie die Füllung zu definieren. Hier kann man auch Verlaufsfüllungen programmatisch bestimmen.

Programmierte Maske

Auch eine Maske kann man programmieren. Allerdings sind die Möglichkeiten nicht so groß wie in AS3.

Rectangle getBounds() intersects()

Mit der Rectangle Klasse kann man überprüfen ob 2 Objekte sich überschneiden. Man kann die Ausmaße eines Objektes bestimmen. Alles Dinge die man für Spielprogrammierungen oder andere interaktive Spielreien oder Demos gebrauchen kann. Es ist ein wichtiges Thema.

HitTest

Mit hitTest() kann man überprüfen, ob ein Display Objekt einen Punkt berührt. Siehe DokumentationEs ist wichtig für verschiedene Spielprogrammierungen. So kann man beispielsweise abfragen ob eine Kugel ein Ziel getroffen hat oder ob ein Puzzelteil an die richtige Stelle geschoben wurde.

Ich zeige an einigen Beispielen wie das geht. Auch hier ist es eine besondere Herausvorderung, dass es auch bei responsive Größe des Canvas funktioniert.

getObjectsUnderPoint(x,y,mode);

Mittels dieser Container Methode ist es möglich alle DisplayObjekte die unter einem definierten Punkt liegen in einem Array zu hinterlegen. Die Parameter sind x und y Position des Punktes und der dritte mode-Parameter ermöglicht eine genauere Bestimmung dieser Objekte.

Ich zeige an Beispielen die 3 möglichen Werte dieses mode Parameters. Während der Mauszeiger etwas berührt werden alle darunter liegenden Displayobjekte halbtransparent.

localToLocal

Mittels localToLocal bestimmt man einen Punkt. Da jeder Movieclip sein eigenes Kooridantensystem hat, kann man mit localToLocal die Punkte von zwei Movieclips aneinander anpassen.

localToGlobal

Mittels localToGlobal kann man einen Punkt innerhalb des Koordinatensystems eines Movieclips auf das Koordinatensystem der Bühne übertragen. Wenn man jedoch die ganze Sache mit einer responsive Größe veröffentlicht funktioniert das nicht mehr so ohne weiteres, da die Bühne skaliert wird aber nicht die Objekte. Mit einer Funktion kann man diese Skalierung ausgleichen, so das localToGlobal auch mit einer responsive Größe funktioniert.

Color

EaselJS bietet mehr Möglichkeiten eine Farbe und deren Transparenz zu definieren. So ist es nicht mehr nötig eine eigene Farbklasse für verschiedene Umrechnungen zu erstellen, wie ich es in AS3 noch gemacht habe.

Filter

halbtransparente Masken, Weichzeichnungsfilter, Farbveränderänderungen

Mit den programmierten Filtern hat man mehr Möglichkeiten, als es im Eigenschaftenfenster einstellbar ist. Man kann halbtransparente Masken erzeugen, mit dem man effektvolle Spiegelungen erstellen kann.

Der Weichzeichnungsfilter kann unterschiedliche Werte für horizontale und vertikale Weichzeichnung bekommen. Das kann man sehr gut für Geschwindigkeits Effekte verwenden.

Farbveränderungen bieten die Möglichkeit die vorhandenen Farben zu verändern. So kann man beispielsweise die einzelnen Farben von RGB und Alpha verändern. Dieses Thema habe ich auch schon in Actionscript2 und Actionscript 3 ausführlich behandelt.

SoundJS

In AnimateCC, HTML5 Canvas kann man für die Soundprogrammierung das Framework SoundJS nutzen. Die dort aufgeführten Beispiele werden dirket im HTML Dokument erzeugt, nicht in der AnimateCC Arbeitsumgebung. Man kann jedoch in der Zeitleiste von Flash zuvor importierten Sound in Schlüsselbilder einfügen und diesen genauso nutzen, wie es schon in Flash der Fall war.

Sound per Javascript abspielen

Neben dem Sound in die Zeitleiste, ist es auch möglich den Sound per Javascript zu steuern. Hier kann man sowohl Sound nutzen, der zuvor in die Bibliothek importiert wurde, als auch Sounddateien von außen laden. Hierbei sind einige Dinge zu beachten, wie beispielsweise die Überwachung des Ladevorgangs.

Interactive Band

Ich zeige an einem Beispiel wie mehrere Sounds an und ausgeschaltet werden und trotzdem synchron zueinander laufen, wie die Instrumente in einer Band. In meinem Beispiel kann man Musiker (MCs) an und ausstellen, so dass der User die Möglichkeit hat zu bestimmen, wer mitspielt oder nicht und das während das Stück läuft.

Lautstärke und Balance lassen sich selbstverständlich auch programmieren. Diese Grundlagen werden erklärt, aber ich werde später mal einen Slider für die Lautstärke programmieren.

TweenJs

TweenJs ist ein Framework mit dem man nicht nur in Canvas und easelJS Animationen erstellen kann. Ich erkläre ausführlich die wichtigen Funktionen und Eigenschaften.

Man kann mehrere Tweenings aneinanderhängen. Nach Ablauf kann eine callBack Funktion aufgerufen werden. Man kann Beschleunigungen hinzufügen.

Es lassen sich Eigenschaften von DisplayObjekte animieren und vieles mehr.

TweenJS wird auch benötigt, wenn man einen Movieclip rein programmatisch erstellt und diesem programmatisch eine Zeitleiste hinzufügt.

Komponenten

Im neuen AnimateCC gibt es nun mehrere Komponenten für HTML5 Canvas.

CSS Komponente

Mit der CSS Komponenten kann man anderen Elementen CSS zuweisen.

Image Komponente

Mit der Image Komponenten kann man Bilder laden beispielsweise für eine Bildergalerie.

Label Komponente

Die Label Komponente ist ideal für Beschriftungen.

Combo Box

Eine Combo Box ist ein Auswahlfeld, In meinem Beispiel kann man über die Combobox ein bestimmtes Bild anzeigen.

Video Komponente

Es gibt zwar einige fertige Codefragemente für die Videokomponenten. Ich erkläre aber auch wie man etwas komplexere Anwendungen damit erstellt. Videos werden gerade mit AnimateCC dazu verwendet um Sachverhalte zu erklären und diese dann mit Auswahlmöglichkeiten des Users zu kombinieren. Dazu muss man wissen wie man ein Video pausiert und wie man während der Pause AnimmateCC Inhalte anzeigt.

Radio Button Komponente

Die Radiobutton Komponente bietet wie auch in HTML eine Auswahlmöglichkeit für User, die aus einer Gruppe von Auswahlfeldern einen auswählen können. Die Abfrage ist einfach über ein Codefragment zu erstellen. Will man einen der Radiobuttons standardmäßig aktvieren (eine Vorauswahl definieren) kommt man dem Eigenschaftenfenster allein nicht weiter.

Numeric Stepper

Der Numeric Stepper bietet die Möglichkeit einer numerischen Auswahl. Man kann im Eigenschaftenfenster zwar den Startwert, Mindestwert und Maximalwert bestimmen. Aber hier erfährt man auch, wie man die Schrittweite einstellen kann. In welchen Schritten (steps) die Werte beim Scrollen erscheinen sollen (10er, 5er, 2er... etc.)

DomElement

Mit dem Dom Element hat man die Möglichkeit auf Elemente zuzugreifen, um Sie mit JQuery Programmierung zu versehen.

JQuery

JQuery ist ein bekanntes Javascript Framework was nun auch eine Integration in AnimateCC gefunden hat. Besuchen Sie auch meine Tipps zum Thema JQuery.

In der AnimateCC sind einige JQuery Komponenten in den Codefragmenten enthalten und auch einige Befehle, um Videos oder andere Komponenten zu steuern.

Ich zeige unter anderem ein Beispiel, wo das Canvas Element ausgeblendet wird, nachdem die Zeitleiste das Ende erreicht hat. Ideal um ein Banner bei Bedarf auszublenden.

 

Aufträge könnt ihr mir per Email schicken oder anrufen:


 

Hompage: http://www.pastorpixel.de