Animate CC HTML5 자바스크립트 Javascript 기술 관련

 

 

 

 

=======================

=======================

=======================

 

 

 

 

 

 

 

출처: http://www.on-design.de/tutor/flash_canvas/index.html

 

• Einleitung
• mouse interaction
• Touch Events (Tablets)
• Drag & Drop
• EventListener
• Text Schriftart einbinden
• Symbol aus Bibliothek laden
• Animation
• Object, OOP, Prototype
• programmierte Schlangenbewegung
• Kreisbewegung
• Graphics Api (neue Seite)
• programmierte Maske
• hitTest
• Color
• SoundJS
• TweenJS (neue Seite)
• Canvas dynamisch an Fenstergröße anpassen
• Links zu weiteren Tutorials

Animate CC / Flash CC

Mit Animate CC gibt es die Möglichkeit mit dem Flash Programm erstellte Animationen und Javascript Programmierungen als HTML5, canvas, Javascript Inhalt zu veröffentlichen. Dazu startet man mit einem neuen Canvas Dokument oder eine vorhandene AS3 fla Datei wird in eine Canvas fla Datei konvertiert. Hier gibt es 2 Möglichkeiten: Erstens, man kopiert sämtliche Bilder einer fla Datei in ein neu erstelltes Canvas Dokument, oder man öffnet eine fla Datei und wählt im Menü: 

Befehle / HTML5 Canvas aus AS3 Dokumentformaten konvertieren

 Außerdem muss Actionscript durch Javascript ersetzt werden. Das kann man nicht über einen Menübefehl in einem Rutsch erledigen, sondern muss neu programmiert werden. Unter 

Fenster, Codefragmente

 gibt es einige hilfreiche Codebeispiele für den Einstieg.

Es gibt mit "HTML5, Canvas" einige Einschränkungen, die hier aufgelistet werden, doch es wird ständig verbessert.

Nach dem Veröffentlichen entsteht eine HTML Datei und eine eingebundene Javascript Datei. Sounds und Bitmaps werden in Ordnern abgespeichert, die man unter 

Datei / Einstellungen für Veröffentlichung

definieren kann. Außerdem werden einige Javascript Dateien von externen Servern eingebunden. Diese kann man auch herunterladen und lokal einbinden. http://code.createjs.com/

Einstellungen für Veröffentlichung

Veröffentlicht man eine so erstellte Datei entsteht eine HTML Datei mit Javascript im Head Bereich, eingebundenen externen Javascript Dateien, einer eingebundenen Javascript Datei gleichen Namens. Ein Canvas Element im Body Bereich der HTML Datei und einer onLoad Anweisung im body-Tag der HTML Seite. Außerdem entstehen Ordner für Bilder und Sound Dateien sofern diese benötigt werden.

Wenn man eine Datei teste mit Strg Enter wird an den Dateinamen eine Variable angehängt. Man sollte so eine Datei nicht auf den Server laden, sondern am Schluss die Dateien erstellen indem man 

Datei / Veröffentlichen

 wählt.

Hat man eine Datei mit allen Bildern und Animationen fertig gestellt und eventuell in der Html Datei noch einige Änderungen vorgenommen, würde durch erneutest Veröffentlichen die HTML überschrieben. Damit das nicht passiert deaktiviert man diese Option unter 

Datei / Einstellungen für Veröffentlichen

Gleiches gilt für Bilder und Sounds. Damit keine neue Bilder oder Sounds generiert werden deaktiviert man die Optionen.

Bei den Bildern hat man die Möglichkeit einzelne Blder abzuspeichern oder alle Bilder zusammen zu einem sogenannten Spritesheet zusammenzufassen. Es entsteht nur ein Bild und eine dazugehörige JSON Datei, welche die Bildteile definiert. Ich habe festgestellt, dass es bei Firefox und Safari Probleme geben kann, wenn die Bilder zu einem großen Spritesheet zusammengefasst werden. Wenn das PNG Bild in Photoshop erneut als png 24 mit Transparenz speichert, funktioniert es.

Wenn man die Bilder als separate Bilder veröffentlicht, sollte man folgende Zeile im Scriptblock der HTML Seite hinzufügen, um den Ladevorgang zu beschleunigen.

  var loader = new createjs.LoadQueue(false);   loader.setMaxConnections(6); // diese Zeile hinzufügen

 

 

EaselJS

CreateJS die offizielle Seite

EaselJS ist eine Javascript Bibliothek, welche das Arbeiten mit HTML5 und dem canvas Element für alle Flasher vereinfacht, denn die Klassen, Eigenschaften und Methoden sind denen von Actionscript3 so ähnlich wie möglich. Das englische Wort Easel bedeutet Staffelei, welches einen Bezug zum HTML5 canvas Element herstellt. Außerdem steckt darin noch das Wort ease (deut: vereinfachen) und genau das ist der Sinn von EaselJS, es vereinfacht den Umstieg von Flash auf HTML5, da viele Objekte und Methoden auch in Actionscript vorkommen. Unter dem Namen CreateJS hat Adobe einige Frameworks zusammengestellt, die es Flashern ermöglichen sich schnell in Html5/ Javascript einzufinden.

Was ist neu in Animate CC

Flash wurde durch Animate CC ersetzt und mit einigen neuen Funktionen erweitert. Siehe dazu meine Videotipps. neue Pinsel, neue Skaliermöglichkeiten der Bühne inclusive Inhalt, verknüpfte Farbfelder und Typekit Schriften, Creative Cloud Library, SVG import, export, Projector wurde wieder eingeführt, neue Video Export Funktionen, sowie einige weitere Neuerungen

Flash CC / Flash CS6 und CreateJS Versionen

Es ist auch möglich das Flashprogramm dazu zu nutzen Movieclips, Grafiken und Animationen zu erstellen und die Programmierung dann auf der HTML Seite vorzunehmen.

Auch mit Flash CS6 war es möglich mittels der Erweiterung CreateJS diese Veröffentlichung vorzunehmen, siehe dazu meine ersten Tipps. In Flash CS6 wird eine ältere Version von CreateJS benutzt. Hier gibt es ein paar Unterschiede.

mehr dazu

Code einfügen

Wie schon oben erwähnt bietet Flash CC über das Fenster "Codefragmente" die Möglichkeit einige Befehle zu nutzen. Wählt man einen der Befehle aus, wird eine Ebene "Actions" erstellt, darin ein Schlüsselbild mit den entsprechenden Javascriptbefehlen.

Generell gibt es 2 Möglichkeiten Javscript Befehle einzufügen.

• In einem Schlüsselbild
• Auf der HTML Seite im Scriptblock nach dem Veröffentlichen

Viele Beispiele, die man im Netz findet wurden auf die zweite Art erstellt. Meine Beispiele auf dieser Seite wurden in erster Linie in einem Schlüsselbild eingefügt.

Mouse Interaction

siehe dazu EaselJS Beispiele

Hier wird über den Event Argument auf die Mausposition zugegriffen. Eine andere Möglichkeit iststage.mouseX, stage.mouseY

createjs.Touch.enable(stage);
this.ball_mc.on("pressmove", function (evt) {
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
});

this.ball_mc.on("pressup", function (evt) {
console.log("up");
})

Drag & Drop

Das vorige Beispiel in abgewandelter Form. Wir haben hier 2 Movieclips mit den Instanznamen rot und gruen auf der Hauptbühne. Das Actionscript wird im Schlüsselbild eingefügt.

Beispiel

this.rot.addEventListener("pressmove", thisToTop.bind(this));
this.gruen.addEventListener("pressmove", thisToTop.bind(this));

function thisToTop(evt)
{
this.addChild(evt.currentTarget);
evt.currentTarget.x = evt.stageX;
evt.currentTarget.y = evt.stageY;
}

 

---

Hier noch ein Beispiel mit einer prototype Funktion näheres siehe unter OOP

balla = new lib.Ball(); this.addChild(balla); balla.y = 100;  createjs.MovieClip.prototype.dragDrop = function () { 	this.on("pressmove", function () { 		this.stage.addChild(this); 		this.x = stage.mouseX; 		this.y = stage.mouseY; 	}); }  balla.dragDrop(); //fuenf ist ein händisch auf die Bühne gezogener Movieclip  // mit Instanznamen fuenf this.fuenf.dragDrop(); 

Touch Events

Damit auf Tablets und Smartphones Mouse Events als Touch Events umgewandelt werden, muss man man folgenden Befehl einfügen. Am Besten in der Html Datei nicht in der Flash IDE. Besonders beim Andorid Betriebssystem werden hier die Probleme gelöst.

stage = new createjs.Stage(canvas);
createjs.Touch.enable(stage);

Auch für mouseover gibt es einen Befehl

stage.enableMouseOver(10);

Event Listener

Man kann auch EventListener einsetzen. In den Codefragmenten von Flash CC findet man einige Beispiele.

Siehe auch diesen Artikel im Netz.

this.ball_mc.addEventListener("tick", movetoMouse.bind(this));

function movetoMouse(){
this.ball_mc.x += (stage.mouseX - this.ball_mc.x)/10;
this.ball_mc.y += (stage.mouseY - this.ball_mc.y)/10;
}

Event irgendwo mit der Maus klicken

stage.addEventListener("stagemouseup", myFunction);

 

Event Display Object anklicken

this.myInstance.addEventListener("click", myFunction);

EventListener entfernen

myBtn.addEventListener("click", function(evt) { 
//irgendwelche Anweisungen... 
evt.remove(); // entfernt den listener. 
});

oder man entfernt den Eventlistener auf gleiche Art wie man ihn erstellt hat. Am besten man ersetzt die Buchstaben add durch remove

Achtung! bei removeEventListener mit bind() siehe hier:

displayObject.addEventListener("click", handleClick);

displayObject.removeEventListener("click", handleClick);

 

currentTarget

Mit currentTarget, kann man auf das Objekt zugreifen, auf den der Event Listener registriert ist.

Beispiel

this.a_mc.addEventListener("click", turnMc.bind(this));
this.b_mc.addEventListener("click", turnMc.bind(this));
this.c_mc.addEventListener("click", turnMc.bind(this));

function turnMc(event)
{
event.currentTarget.rotation += 20;
}

target

Im folgenden Beispiel liegen Movieclip Instanzen auf der Bühne, darin sind Formgrafiken. Gleichfarbige Formen auf der gleichen Ebene werden als ein Objekt angesehen. Linien werden als ein Objekt angesehen.

Beispiel

this.a_mc.addEventListener("click", showPara.bind(this));
function showPara(evt) {
this.anzeige.text = "evt.stageX " + evt.stageX + "\nevt.target.x " + evt.target.x;
evt.target.x += 10;
evt.currentTarget.y += 2;
}

einige weitere Parameter sind:

evt.stageX, evt.rawX, evt.target, evt.currentTarget, evt.type

bind(this)

Mittels bind(this) kann man bestimmen, was innerhalb der Funktion als this angesehen wird.

Beispiel

this.a_mc.addEventListener("click", turnMc.bind(this.a_mc));
this.b_mc.addEventListener("click", turnMc.bind(this.b_mc));
this.c_mc.addEventListener("click", turnMc.bind(this.c_mc));

function turnMc()
{
this.rotation += 20;
}

RemoveEvent mit bind()

Man kann einen bound event listener jedoch nicht auf die Art entfernen, weil .bind eine neue Instanz zurück gibt, jedes mal wenn es aufgerufen wird. In folgender Lösung wird turnMc nach dem ersten Eventaufruf entfernt.

_this = this;  this.a_mc.addEventListener("click", turnMc); 		function turnMc()   	{   	_this.a_mc.rotation += 20; 		 _this.a_mc.removeEventListener("click", turnMc);   	}	

Eine andere Möglichkeit ist mit evt.currentTarget auf die aufrufende Instanz zuzugreifen:

	 	this.myBut.addEventListener("click", fl_MouseClickHandler);  function fl_MouseClickHandler(evt) { 	alert("Mausklick erfolgt"); 	evt.currentTarget.removeEventListener("click", fl_MouseClickHandler); } 

Text

Seit Animate CC gibt es neue Textmöglichkeiten. Ein statischer Text wird beim Veröffentlichen in eine Grafik umgewandelt.

Ein dynamischer Text lässt sich mit Schriftarten von Adobe Typekit versehen. Dazu muss man sich bei Adobe Typekit anmelden, als Nutzer der Creative Cloud enstehen keine weiteren Kosten. Desweiteren klickt bei Schriftart im Eigenschaftenfenster auf das Globus Symbol und wählt dort eine oder mehere Typekit Schriftarten aus. Anschließend erscheinen die ausgewählten Schriftarten ganz oben in der Schriftenliste der "Familie", wo man sie auswählt.

Unter Einstellungen für Veröffentlichung, gibt man unter "Webschriften" die Domain an, auf der die Seite veröffentlicht wird. Bei meiner Domain www.on-design.de musste ich *.on-design.de einfügen. Dann klappte es.

Flash CC oder Schriftfamilie mit Google Fonts

Folgendermaßen erzeugt man ein Textobjekt im Scriptblock auf der Html Seite. Siehe auch diesen Tipp.

var myText = new createjs.Text('Hallo', 'Bold 25px Arial', "#005FAF");
myText.x = 25;
myText.y = 25;
stage.addChild( myText);

In der Flash IDE kann man ein dynamisches Textfeld mit folgenden Optionen erzeugen. Schriftart, _sans, _serif oder _typewriter, In Flash CS6 die Option "Text als Html wiedergeben" im Eigenschaftenfenster auswählen.

/* js
this.anzeige.text = "Hallo";
*/

Beispiel
Man kann sogar in der Flash IDE Google Fonts benutzen. Es gibt 2 Möglichkeiten die Google Fonts einzubinden:

• Nachdem man es aus Flash heraus für Html5 veröffentlicht hat, kann man in der Html Seite die Import Anweisung nachträglich einfügen, damit das funktioniert. Beispielsweise für die Google Schrift "Dorsa": 
  <link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
• Innerhalb der Flash IDE im Actionscriptfenster kann man die Importanweisung von Google für Javascript einsetzen z.B:
  /* js
WebFontConfig = {
google: { families: [ 'Peralta::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
*/

 

In der Flash IDE weist man die Schriftformatierungen folgendermaßen zu.

/* js
this.anzeige.font = "bold 96px Dorsa";
this.anzeige.text = "Hallo";
*/

Symbol aus der Bibliothek laden

Erstelle ein Symbol (Movieclip, Schaltfläche, Grafik, importiertes Bitmap). Suche das Symbol in der Bibliothek und klicke neben dem Namen doppelt auf das Feld "Verknüpfung". Vergebe dort einen Klassennamen. (Regeln für Namensvergabe beachten). Im folgendem Beispiel ist der Name: "Ball"

Beispiel

balla = new lib.Ball();
balla.x = 500;
balla.y = 50;
this.addChild(balla);

Mehrere Instanzen

Beispiel

var anzahl = 30;
var abstand = 15; 
var ball = new Object();
for(i = 0; i < anzahl; i++)
{
ball[i] = new lib.Ball();
ball[i].x = ball[i-1].x - abstand;
ball[i].y = 50;
ball[i].scaleX = 1 - i / anzahl;
ball[i].scaleY = 1 - i / anzahl;
ball[i].gotoAndPlay(i);
stage.addChild(ball[i]);
}

Animation

Es gibt verschiedene Möglichkeiten eine programmierte Animation zu erzeugen.

• Codefragmente, EventListener
• on Tick
• Tween Js /neue Seite

Codefragemente und EventListener

Wähle einen Movieclip auf der Bühne aus und wähle dann im Codefragmente Fenster unter HTML5 Canvas, Animation, beispielsweise horizontal Animieren. Vergebe einen Instanznamen und schaue dir anschließend das Actionscript an, welches in einem Keyframe auf der Ebene Actions hinterlegt ist. Näheres dazu siehe unter dem Tipp Schlangenbewegung oder in meinen Flashtipps zum Thema programmierte Bewegung.

onTick

Es ist außerdem möglich über ein onTick Ereignis eine Animation zu erstellen oder irgendeine Anweisung in Schleife auszuführen. Siehe dazu folgendes Beispiel. Benötigt wird ein Movieclip auf der Bühne. Wähle diesen aus und vergebe im Eigenschaftenfenster ganz oben einen Instanznamen (Namensreglen beachten: keine Sonderzeichen außer Unterstrich nicht mit einer Zahl beginnen). In diesem Beispiel lautet der Instanzname myMc. Innerhalb der geschweiften Klammer sind weitere Anweisungen möglich, die durch Semikolon und neue Zeilen getrennt werden.

	  this.myMc.on("tick", function(){this.x +=5;}); 	

Object Prototype

Javascript ist eine prototypen basierte Sprache. Im Gegensatz zu Actionscript 3 welches Objektorientiert ist. Javascript gleicht also mehr Actionscript 2 als Actionscript 3. In meinen Actionscript2 Tipps habe ich unter dem Thema OOP ein paar Möglichkeiten aufgezeigt, wie man einem Objekt Eigenschaften und Methoden mittels prototype anhängen kann. Siehe dazu auch meinen Javascript Tipp.

Ich zeige hier Möglichkeiten, wie man einem Movieclip oder DisplayObject eine prototype Funktion hinzufügt, so dass alle Instanzen die Möglichkeit haben diese Methode aufzurufen. Damit schafft man Ordnung wenn die Prgrammierung etwas komplexer wird.

OOP 1

Im folgenden Beispiel befindet sich ein Movieclip in der Bibliothek mit dem Klassennamen Ball. (Vergebe diesen Namen in der Bibliothek unter 

Verknüpfung

, nicht zu verwechseln mit 

Name

.

Erzeuge eine Instanz per Actionscript. (Es wäre auch möglich eine Instanz händisch auf die Bühne zu ziehen, und diese später mit this.Instanzname anzusprechen).

Ein Movieclip ist ein createjs.MovieClip. Diesem Object wird eine prototype Funktion angehängt. Dann kann jede Instanz von DisplayObject diese Methode aufrufen.

Beispiel

	balla = new lib.Ball(); 	this.addChild(balla);  	createjs.MovieClip.prototype.setPosition =  function (x, y){  	 	this.x = x;  			this.y = y;  	}  	balla.setPosition(150, 200);  	

OOP 2

Das nächste Beispiel ist etwas interessanter, denn hier wird eine Animation hinzugefügt.

Beispiel

	balla = new lib.Ball(); 	this.addChild(balla); 	balla.y= 100;  	createjs.MovieClip.prototype.rolle =  function (speed){  	 	this.on("tick", function(){this.x +=speed;});  	}  	balla.rolle(4);  	

OOP 3

Hier wird ein anderer Weg verfolgt. Die Klasse Rollschuh wird als Unterklasse des MovieClips Roller() erzeugt. Dann werden werden weitere Attribute und Methoden im Konstruktor der Rollschuhklasse erstellt. Siehe dazu meinen Flash 2 Tipp OOP oder meinen Javascript Tipp.

In der Bibliothek muss sich ein Movieclip befinden mit dem Verknüpfungsnamen 

Roller

.

Beispiel

	Rollschuh.prototype = new lib.Roller();  function Rollschuh(x, y, speed) { this.x = x; this.y = y; 	 this.on("tick", function(){ 	  if(this.x < 500){ 			this.x += speed; 		}else{ 			this.x = -50; 			} 	  }); }  rolli1 = new Rollschuh(100, 150, 5); this.addChild(rolli1);  rolli2 = new Rollschuh(200, 50, 10); this.addChild(rolli2);  rolli3 = new Rollschuh(40, 200, 2); this.addChild(rolli3);  	

OOP4 call()

Im folgenden Beispiel gibt es einen Movieclip in der Bibliothek mit dem Verknüpfungsnamen

Snowflake

. In dem Movieclip befinden sich mehrere Schlüsselbilder, in den sich verschiedene Grafiken von Schneekristallen befinden.

Dieses Beispiel funktioniert nur mit der call Funktion. Die erbende Klasse ruft mit call() die Konstruktorfunktion der Elternklasse auf. Siehe dazu meinen Javascript Tipp. In AS3 wird das mittels super() gemacht. Man braucht es, wenn man Argumente der Konstruktorfunktion der Elternklasse in der erbenden Klasse benötigt. siehe auch AS3 Tipp.

Das vorige Beispiel funktioniert auch ohne call. Die call Funktion wird vor allen Dingen dann benötigt, wenn man auf spezifischere Eigenschaften des Elternelemets zugreifen will, wie beispielsweise die Anzahl der Frames, die in diesem speziellen Bibliothekssymbol einen bestimmten Wert haben. Beim Initieren wird ein zufälliges Bild dieser Zeitleiste aufgerufen.

Durch die call(this) Funktion zeigt der Konstruktor Pointer auf die "Elternklasse" also Snowflake. Das ist in diesem Falle egal, aber könnte in anderen Fällen zu ungewollten Effekten führen. Es lässt sich folgendermaßen ändern.

Snow.prototype.constructor = Snow;

So wird der Pointer auf das erbende Objekt gesetzt.

Beispiel

	Snow.prototype = new lib.Snowflake();
 	Snow.prototype.constructor = Snow;  function Snow(speed) { 	lib.Snowflake.call(this); 	this.x = Math.random() * 500; 	this.y = Math.random() * 300; 	this.gotoAndStop(Math.floor(Math.random() * this.totalFrames - 1)); 	this.on("tick", function () { 		if (this.y < 400) { 			this.y += speed; 		} else { 			this.y = -50; 			this.x = Math.random() * 500 + 30; 		} 	}); }  for (i = 0; i < 20; i++) { 	var star = new Snow(Math.random() * 5 + 3); 	this.addChild(star); } 	

 

Programmierte Schlangenbewegung

Es gibt einen Movieclip "SnakeHead" und einen "Ball". Letzter ist ein Körperelement mit einer Animation.

Beispiel

var anzahl = 30;
var abstand = 15;
var ball = new Object();
ball[0] = new lib.SnakeHead();
ball[0].x = 500;
ball[0].y = 50;
this.addChild(ball[0]);

for(i = 1; i < anzahl; i++)
{
ball[i] = new lib.Ball();
ball[i].x = ball[i-1].x - abstand;
ball[i].y = 50;
ball[i].scaleX = 1 - i / anzahl;
ball[i].scaleY = 1 - i / anzahl;
ball[i].gotoAndPlay(i);
this.addChild(ball[i]);
}
//die zweite Schleife dient dazu die Stapelreihenfolge umzukehren
for(i = anzahl; i >= 0; i--)
{
this.addChild(ball[i]);
}

this.addEventListener("tick",mover.bind(this));

function mover() 
{
ball[0].x = ball[0].x + (stage.mouseX - ball[0].x) * 0.14;
ball[0].y = ball[0].y + (stage.mouseY - 30 - ball[0].y) * 0.14;

for (i = 1; i < anzahl; i++)
{
//horizontaler Abstand zum vorigen Element,
distX = ball[i - 1].x - ball[i].x;
//vertikaler Abstand zum vorigen Element
distY = ball[i - 1].y - ball[i].y;
//Abstand zum vorigen Element (Satz des Pythagoras a² * b² = c²)
dist = Math.sqrt(distX * distX + distY * distY);
//Verhältnis horizontaler Abstand zum wirklichen Abstand

cx = distX / dist; 
cy = distY / dist;
//der gewünschte Abstand ist "abstand", der momentane Abstand ist "dist"
//Das Verhältnis horizontaler Abstand zu momenten Abstand ist "cx"
//Nun kann man anhand des Verhältnis cx den gewünschten X-Abstand ausrechnen
distX_new = cx * (abstand/(i*0.7)+5);
//auf gleiche Weise wird auch der gewünschte Y-Abstand errechnet
distY_new = cy * (abstand / ( i* 0.7)+5);
//Die neue Position wird gesetzt, der errechnete Abstand wird von der Position
//des vorigen Elementes abgezogen
ball[i].x = ball[i - 1].x - distX_new;
ball[i].y = ball[i - 1].y - distY_new;
} 
}

Programmierte Kreisbewegung

Der Movieclip 

myMc

 vollzieht eine Kreisbewegung. Siehe dazu auch Trigonometrie AS3 Tipp und AS2 Beispiel

Beispiel

var xPos = 200; var yPos = 100; var radius = 50; var i = 0; var p2 = new createjs.Point(0, 0);  this.addEventListener("tick", progRotate.bind(this));  function progRotate() { 	i += 0.09; 	p2.y = Math.cos(i) * radius + yPos; 	p2.x = Math.sin(i) * radius + xPos; 	this.myMc.x = p2.x; 	this.myMc.y = p2.y; }    

Programmierte Maske

myMc.mask = myShape;

Im folgenden Beispiel folgt ein MC Instanzname einem Pfad per Tweening. Der Pfad verläuft entlang einer Swirl Grafik. Währenddessen werden per Programmierung Kreise gezeichnet und auf dem aktuellen Standpunkt des getweenten MCs positioniert.

Beispiel

var i = 1;
//siehe shape und graphics
var s = new createjs.Shape();
//die Methode mask ermöglicht es eine Maske zuzuweisen
this.floral_mc.mask = s;
this.addEventListener("tick", makeMask.bind(this));

function makeMask() {
i++;
//es befinden sich 101 Bilder in der Zeitleiste
if (this.currentFrame < 100) {

var circle_radius = 10;
//circ_mc ein unsichtbarer MovieClip tweent entlang dem Pfad
var xLoc = this.circ_mc.x;
var yLoc = this.circ_mc.y;
//es werden neue kreise gezeichnet mit x-y Position auf circ_mc
s.graphics.beginFill("#ffff00").drawCircle(xLoc, yLoc, 20);
} else {
this.removeEventListener('tick', makeMask.bind(this))
}
}

hitTest()

Mit hitTest() kann man überprüfen, ob ein Display Objekt einen Punkt berührt. Siehe Dokumentation

Beispiel 1

Beispiel

var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawCircle(100, 100, 100));

this.addChild(shape);

this.addEventListener("tick", hitCheck.bind(this));

function hitCheck() {
if (shape.hitTest(stage.mouseX, stage.mouseY)) {
shape.alpha = 1;
} else {
shape.alpha = 0.3;
}
}

Beispiel 2

Im folgendem Beispiel gibt es einen Movieclip auf der Hauptbühne, Instanzname 

holder

. In diesem MC befinden sich lauter gruppierte Kreise. Diese werden mittels getChildAt() in einer For-Schleife angesprochen und auf hitTest Mausposition abgefragt. Damit das funktioniert kommt noch globalToLocalins Spiel. mouseInBounds ermittelt, ob sich die Maus innerhalb des canvas Bereichs befindet.

Das Actionscript befindet sich im Schlüsselbild auf der Hauptbühne.

Beispiel

this.addEventListener("tick", fl_hittest.bind(this));

function fl_hittest() {
this.holder.rotation += 3;
var l = this.holder.getNumChildren();
for (var i = 0; i < l; i++) {
var child = this.holder.getChildAt(i);
child.alpha = 0.1;
var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) {
child.alpha = 1;
}
}
}

Beispiel 3

In diesem Beispiel werden mehrere Instanzen der Klasse 

Elefant

 aus der Bibliothek auf die Bühne gebracht und einem Array zugewiesen. Neben den vorhandenen Eigenschaften x und y Position und Größe, habe ich einige weitere Eigenschaften oder Variablen mit Punktsyntax angehängt. 

speedX

,

speedY

 und eine boolsche Variable namens 

hit

, die anzeigt, ob der Movieclip getroffen ist, oder nicht.

In der Funktion fl_hittest werden alle Elefant Instanzen in einer for Schleife angsprochen. Mittels hitTest wird die Mausposition überprüft. Hier kommt globalToLocal ins Spiel. Die Variable hit wird auf true gesetzt und die Zeitleiste des Elefanten spielt ab.

In einer weiteren if Struktur wird die Variable hit abgefragt und entsprechende Anweisungen gegeben.

 

Beispiel

var ele = new Array(); for (var e = 0; e < 5; e++) { 	ele[e] = new lib.Elefant(); 	ele[e].gotoAndStop(0); 	//grösse und Geschwingkeit und Stapelreihenfolge simulieren Perspektive 	ele[e].speedX = 6 + 2 * e; 	ele[e].size = 1 + (e + 1) / 5; 	ele[e].scaleX = ele[e].scaleY = ele[e].size; 	ele[e].speedY = 1; 	ele[e].hit = false; 	ele[e].x = Math.random() * 1500; 	ele[e].y = Math.random() * 300 + 50;  	this.addChild(ele[e]); }  this.addEventListener("tick", fl_hittest.bind(this)); function fl_hittest() {  	for (var i = 0; i < 5; i++) { 		var child = ele[i]; 		var pt = child.globalToLocal(this.bullet.x, this.bullet.y); 		if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { 			child.play(); 			child.hit = true; 			this.bullet.y = -40; 		} 		if (child.x < 1800 && child.y > -50) { 			child.x += child.speedX; 		} else { 			child.x = Math.random() * -150 - 50; 			child.y = Math.random() * 300 + 50; 			child.gotoAndStop(0); 			child.hit = false; 			child.speedY = 1; 			child.scaleX = child.scaleY = child.size;  		} 		if (child.hit) { 			child.speedY *= 1.2; 			child.y -= 7 + child.speedY; 			child.scaleX = child.scaleY -= 0.02; 		} 	} 	/*bullet Bewegung*/ 	if (this.bullet.y > -30) { 		this.bullet.y -= 30; 	} 	/*insekt Bewegung*/ 	this.insekt.x = this.insekt.x + (stage.mouseX - this.insekt.x) * 0.2; 	abstand = Math.abs(this.stage.mouseX - this.insekt.x); 	if (abstand < 5) { 		this.insekt.stop(); 	} else { 		this.insekt.play(); 	} } //Ende von fl_hittest Funktion //insekt var hit = new createjs.Shape(); hit.graphics.beginFill("#000").drawRect(-400, -350, 800, 500); this.insekt.hitArea = hit; this.insekt.addEventListener("click", trigger.bind(this));  function trigger(evt) { 	this.bullet.x = this.insekt.x; 	this.bullet.y = 640; 	this.insekt.wurfarm.play(); } 	

Beispiel 4

Das folgende Beispiel bietet schon die Grundfunktion für ein kleines Spiel.
Ich habe auch eine einfache Variante erstellt. Beispiel 3a

Es gibt 3 Movieclips:

Elefant

Wie unter Beispiel 3 werden einige Instanzen von Elefant erzeugt und einem Array zugewiesen. Diesen wird eine Bewegung zugewiesen und per hitTest wird abgefragt ob sie die Instanz bullet berühren. Der Elefant hat eine Bewegung in seinen Frames, die abgespielt wird, wenn er getroffen wurde.

spinne

Die Spine nimmt die x Position der Maus ein in einer dynamischen Bewegung. Wenn man auf die Spinne klickt, wird die Kugel auf Position gebraucht. Die Spinne hat außerdem noch ein hitArea. Dadurch vergrößert sich der anklickbare Bereich. Die Spinne hat eine Laufbewegung in ihren Frames. Wenn der Abstand der Spinne zur Maus kleiner ist als 5 Pixel, stoppt die Zeitleiste mit der Laufbewegung.

bullet

Die Kugel wird gestartet sobald man die Spinne anklickt. Sie bekommt eine Startposition anhand der Position der Spinne. Ansonsten fliegt die Kugel nach oben. sofern sie unteren Bereich ist.

In der hitTest Funktion wird die Kugel aus dem Sichtbereich nach oben gesetzt.

Beispiel

var ele = new Array(); for (var e = 0; e < 5; e++) { 	ele[e] = new lib.Elefant(); 	ele[e].gotoAndStop(0); 	ele[e].speedX = Math.random() * 10 + 5; 	ele[e].speedY = 1; 	ele[e].hit = false; 	ele[e].x = Math.random() * 1500; 	ele[e].y = Math.random() * 400 + 50; 	ele[e].scaleX = ele[e].scaleY = 2 - e / 5 	this.addChild(ele[e]); }   this.addEventListener("tick", fl_hittest.bind(this)); function fl_hittest() {  	for (var i = 0; i < 5; i++) { 		var child = ele[i]; 		var pt = child.globalToLocal(this.bullet.x, this.bullet.y); 		if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { 			child.play(); 			child.hit = true; 			child.speedX = Math.random() * 20 - 10; 			this.bullet.y = -40; 		} 		if (child.x < 1800 && child.y > -50) { 			child.x += child.speedX; 		} else { 			child.x = Math.random() * -150 - 50; 			child.y = Math.random() * 400 + 50; 			child.gotoAndStop(0); 			child.speedX = Math.random() * 10 + 5; 			child.hit = false; 			child.speedY = 1; 			child.scaleX = child.scaleY = 2 - Math.random() * 1.2;  		} 		if (child.hit) { 			child.speedY *= 1.2; 			child.y -= 7 + child.speedY; 			child.scaleX = child.scaleY -= 0.02;   		} 	} 	/*bullet Bewegung*/ 	if (this.bullet.y > -30) { 		this.bullet.y -= 30; 	} 	/*spinne Bewegung*/ 	this.spinne.x = this.spinne.x + (stage.mouseX - this.spinne.x) * 0.14; 	abstand = Math.abs(this.stage.mouseX - this.spinne.x); 	if (abstand < 5) { 		this.spinne.stop(); 	} else { 		this.spinne.play(); 	} } //Ende von fl_hittest Funktion //Spinne var hit = new createjs.Shape(); hit.graphics.beginFill("#000").drawRect(-300, -350, 600, 500); this.spinne.hitArea = hit; this.spinne.addEventListener("click", trigger.bind(this));  function trigger(evt) { 	this.bullet.x = this.spinne.x; 	this.bullet.y = 536; 	this.spinne.waffe.gotoAndStop(0); }  this.spinne.addEventListener("mousedown", abzug.bind(this));  function abzug(evt) { 	this.spinne.waffe.gotoAndStop(1); }  

 

Color

CreateJS bietet einige Möglichkeiten, eine Farbe zu definieren.

Hex Code

"#ff00ff"

g1.beginFill("#fa00aa");

rgba()

Hier ist A ein Transparenz- oder Alpahawert von 0-1.

"rgba(250, 0, 200, 0.5)"

g1.beginFill("rgba(100,0,255,1)");

rgb()

"rgb(250, 0, 200)"

g1.beginFill("rgb(100,0,255)");

getRGB(r,g,b,a)

Mit der statischen Methode getRGB() kann man einen RGB Wert zuweisen. Der Alpha Wert ist optional. Beachte, dass es nicht

 getRGBA

 heißt. Die Methode steht nicht in Anführungszeichen.

createjs.Graphics.getRGB(250, 200, 40, 0.5)

g3.beginFill(createjs.Graphics.getRGB(100, 0, 255, 1));

getHSL()

getHSL(Farbton, Sättigung, Helligkeit, alpha) erzeugt einen HSL Farbwert: Farbton 0-360, Sättigung 0-100, Helligkeit 0-100, alpha (optional) 0-1

createjs.Graphics.getHSL(360, 100, 50, 0.8)

g4.beginFill(createjs.Graphics.getHSL(264, 100, 47, 1));

SoundJS

Ein FlashCC HTML5 Canvas Dokument benutzt für die Soundprogrammierung das FrameworkSoundJS.

Die dort aufgeführten Beispiele werden dirket im HTML Dokument erzeugt, nicht in der Flash Arbeitsumgebung. Man kann jedoch in der Zeitleiste von Flash zuvor importierten Sound in Schlüsselbilder einfügen. Erzeuge ein Schlüsselbild in der Zeitleiste mit F6. Wähle es aus und wähle im Eigenschaftenfenster den gewünschten Sound aus. Der Sound muss vorher importiert worden sein und somit in der Bibliothek liegen. Sobald das Schlüsselbild erreicht ist, wird der Sound abgespielt.

Sound per Javascript abspielen

In der Flash Arbeitsumgebung kann man folgendes machen. Wähle den Sound in der Bibliothek aus und vergebe unter Verknüpfung einen ID Namen. (Namensregeln beachten). Mit folgendem Befehl kann man den Sound abspielen, dabei ist "Blub" der ID Name.

createjs.Sound.play("Blub", createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

Im folgenden Beispiel kann man durch Buttonklick jeweils einen anderen Sound abspielen. Selbstverständlich könnte man das auch einfacher machen, indem man den Sound direkt im Bearbeitungsmodus des Buttons im "Gedrückt" Schlüsselbild einfügt.

Die Sounds haben die ID Namen 

Hit

, 

Bell

 und 

Wood

Beispiel

this.blue_btn.addEventListener("click", playHit.bind(this)); this.green_btn.addEventListener("click", playBell.bind(this)); this.orange_btn.addEventListener("click", playWood.bind(this));   function playHit() { createjs.Sound.play("Hit", createjs.Sound.INTERRUPT_EARLY, 0, 0, loop); }  function playBell() { createjs.Sound.play("Bell", createjs.Sound.INTERRUPT_EARLY, 0, 0, loop); }  function playWood() { createjs.Sound.play("Wood", createjs.Sound.INTERRUPT_EARLY, 0, 0, loop); }       

Canvas dynamisch vergrößern

Canvas Größe per CSS

 

canvas{width:100%; height:auto;}

 

Die Größen angabe im Canvas Element entspricht der Einstellung der Bühne in Flash.

 

Canvas Größe per Javascript

Hier ein Link zu einem Tipp, wie man das Canvas Element per Javascript an die Fenstergröße anpasst.

  function onResize() { 	//OPTION 1: 	//Proportionale Vergrößerung 	// browser viewport size 	var w = window.innerWidth; 	var h = window.innerHeight; 	// Dimensionen der stage / canvas 	var ow = 550; // your stage width 	var oh = 400; // your stage height 	// Größenverhältnis beibehalten 	var scale = Math.min(w / ow, h / oh); 	var newHeight = ow * scale; 	var newWidth = oh * scale; 	// 	stage.scaleX = scale; 	stage.scaleY = scale; 	// canvas Größe einstellen 	stage.canvas.width = newHeight; 	stage.canvas.height = newWidth; 	//set width and height variables again 	//var page_canvas = document.getElementsByTagName("canvas")[0]; 	//stageWidth = page_canvas.width; 	//stageHeight = page_canvas.height; 	// 	// update the stage 	stage.update() } // window.onresize = function() {      onResize(); } 

 

---

 

Links zu weiteren Tutorials

 

• Easel JS API
• CreateJS die offizielle Seite
• Creating Retro Game
• Introduction to EaselJS – Lee Brimelow (veraltet siehe Beispiele bei Quickstart)
• JavaScript animation – using EaselJS pt 2 – Highlander
• HTML5 Gaming: animating sprites in Canvas with EaselJS – David Rousset
• ein Spiel mit Flash HTML5 Canvas erstellen
• Canvas mit dynamischer Größe

 

 

=======================

=======================

=======================