=================================
=================================
=================================
출처: 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
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.
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
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.
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.
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.
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.
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"
balla = new lib.Ball();
balla.x = 500;
balla.y = 50;
this.addChild(balla);
Mehrere Instanzen
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.
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.
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
.
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.
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.
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
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.
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
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.
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.
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.
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
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
=================================
=================================
=================================
댓글 영역