Animate CC Canvas

Flash Basic Actionscript 2 Actionscript 3 Flash Canvas Shortcuts Video

siehe auch: Flash CS6, CreateJS -:|:- TweenJS Tipp -:|: - Graphics Tipp -:|: - easelJS Api -:|:- Adobe Help

Animate CC / Flash CC

Animate CC Help // Canvas Komponenten

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

 

Canvas dynamisch vergrößern

Siehe Adobe Hilfe Canvas veröffentlichen

Mit Animate CC kann man in den Einstellungen für Veröffentlichungen, einige Optionen einstellen, um die Ausrichtung und Größe des Canvas Elements an das Browserfenster anzupassen.

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

Adobe Flash Player herunterladen

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();
}
	

HTML Vorlage für Veröffentlichung

Vorlage

Wenn Sie eine Datei erstellen, deren Größe, Hingergrundfarbe, Bildlaufrate oder auch Ebenen samt Inhalt und Zeitleiste öfter eingesetzt werden sollen. So wählen Sie Datei, als Vorlage speichern und füllen Sie die Felder aus. Diese Vorlage können Sie über Datei , neu, Vorlage laden

HTML Vorlage

Hier geht es darum eine HTML Vorlage zu erstellen, in welche die SWF Datei oder das Canvas Element eingebettet ist. Diese HTML Datei richtet man ein unter Datei, Einstellungen für Veröffentlichung Unter dem Karteireiter Erweitert kann man eine Vorlage erstellen oder laden.

siehe diesesen Video Tipp

Nehmen wir an Sie wollen mehrere Seiten erstellen, welche eine bestimmte Javascriptbibliothek benötigt, die mittels script Tag in HTML eingebunden wird.

Gehen Sie folgendermaßen vor:

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.

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.

Movieclip x y Position

Die x und y Position eines händisch auf die Bühne gezogenen Movieclips ist nicht unbedingt der Regstierpunkt, sondern der weiße Punkt, den man mit dem Frei transformieren- Werkzeug verschieben kann.

Variable

Javascript hat eine lose Typisierung, das heißt der Datentyp einer Variable kann sich ändern und muss beim Deklarieren nicht angegeben werden.

var myVar = 5;

Eine Variable, die in weiteren Frames der Zeitleiste aufgerufen werden soll, sollte man folgendermaßen deklarieren.

this.myVar = 5;

Gültigkeitsbereich / Root

Mit EaselJS hat man die Möglichkeit aus einer Instanz auf die Hauptzeitleiste oder die stage zuzugreifen. siehe dazu diesen Beitrag

Innerhalb eines MC kann man auf Funktionen oder Varialben zugreifen, die in einem Frame der Hauptzeitleiste eingefügt sind. Folgende Zeile in einem Movieclip setzt die Hauptzeitleiste auf Frame 5;

exportRoot.gotoAndStop(5);

Beispiel

Download fla

Im folgenden Beispiel gibt es in der Hauptzeitleiste ein klassisches Tween, bei dem sich ein Dreieckspfeil um den Mittelpunkt der Bühne dreht. Im ersten Bild der Hauptzeitleiste befindet sich folgendes Javascript.

this.stop();
this.a = 0;

Außerdem gibt es einen Movieclip in der Mitte mit einem Formtween. Er hat folgendes Javascript im ersten Frame:

exportRoot.a ++;
exportRoot.gotoAndStop(exportRoot.a);

Dadurch zeigt die Hauptzeitleiste das nächste Bild an und der Pfeil dreht sich ein bisschen nach jeder Runde des Movieclips.

Im letzten Bild der Hauptzeitleiste wird a wieder auf 0 gesetzt, damit der Hauptfilm wieder im ersten Frame landet.
this.a = 0;

Touch Events / cursor

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);

Oder direkt in Flash im Actionscriptfenster:

this.stage.enableMouseOver(10);

Der Wert 10 bezieht sich auf eine Frequenz pro Sekunde, welcher definiert, wie oft eine Mausberührung oder Bewegung abgefragt wird. 50 ist der höchste Wert. Beim niedrigsten Wert 0 wird die Überprüfung aufgehoben.

Cursor

Setze enableMouseOver, wie oben beschrieben und weise einer Instanz die Eigenschaft cursor zu. Die möglichen Werte entsprechen den CSS Werten.

this.stage.enableMouseOver(20);

this.myMc.cursor = "pointer";

Mouse Interaction

siehe dazu EaselJS Beispiele

ACHTUNG !

Siehe auch diesen Forumsbeitrag zum Thema stage.stageX

Es gibt verschiedene Möglichkeiten über das Event Argument auf die Mausposition zuzugreifen. Da es sich hierbei um einen Wert handelt den der Browser liefert, gibt es Probleme, sofern sich die Ansichtsgröße des Browsers oder die Größe und Position des canvas Elements ändert.

Über das Elternelement kann man sich die Größe ausgeben lassen, siehe folgende Beispiele.

Desweiteren gibt es in Google Chrome Probleme wenn man Bitmaps im Canvas Element offline benutzt. Siehe diesen Forumsbeitrag

var p = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);

createjs.Touch.enable(stage);


this.ball_mc.on("pressmove", function (evt) {

var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
});

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

Movieclip bewegt sich mit Mausposition

  
this.ball.addEventListener("tick", mouseMove.bind(this));
  
function mouseMove(evt)
{
var p = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);
evt.currentTarget.x = p.x;
evt.currentTarget.y = p.y;
}
  

Movieclip bewegt sich dynamisch auf Mausposition

  this.ball.addEventListener("tick", mouseMove.bind(this));
function mouseMove(evt)
{
    var p = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);
	
    evt.currentTarget.x += (p.x - evt.currentTarget.x)/10;
    evt.currentTarget.y += (p.y - evt.currentTarget.y)/10;
}
  

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", dragMe.bind(this));
  this.gruen.addEventListener("pressmove", dragMe.bind(this));
  
function dragMe(evt)
{
    var p = this.globalToLocal(evt.stageX, evt.stageY);
    evt.currentTarget.x = p.x;
    evt.currentTarget.y = p.y;
}  
	

 


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

createjs.MovieClip.prototype.dragDrop = function () {
	this.on("pressmove", function (evt) {
 var p = this.parent.globalToLocal(evt.stageX, evt.stageY);
		this.x = p.x;
		this.y = p.y;
	});
	this.on("pressup", function (evt) {
		this.stage.addChild(this);
	});
}


//myMc ist ein händisch auf die Bühne gezogener Movieclip  Instanzname: myMc
this.myMc.dragDrop();

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(){
var p = this.globalToLocal(this.stage.mouseX, this.stage.mouseY);
this.ball_mc.x += (p.x - this.ball_mc.x)/10;
this.ball_mc.y += (p.y - 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.

Jede gruppierte Grafik kann man als target ansprechen.

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. Man kann ihn jedoch innerhalb der Arbeitsumgebung als normales statisches Textfeld nutzen.

Adobe Typekit und Google Fonts

Ein dynamischer Text lässt sich mit Schriftarten von Adobe Typekit oder Googlefonts einbetten.

Dazu muss man sich bei Adobe Typekit anmelden, als Nutzer der Creative Cloud enstehen keine weiteren Kosten.

Desweiteren klickt bei ausgewählten Textfeld unter Schriftart im Eigenschaftenfenster auf das Globus Symbol und wählt dort eine oder mehere Typekit oder Google Schriftarten aus. Anschließend erscheinen die ausgewählten Schriftarten ganz oben in der Schriftenliste der "Familie", wo man sie auswählt.

Bei Typekit gibt man unter Einstellungen für Veröffentlichung unter "Webschriften" die Domain an, auf der die Seite veröffentlicht wird. Sollte eine Subdomain wie beispielsweise www nicht funktionieren, setze stattdessen ein Sternchen
*.on-design.de anstatt www.on-design.de

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

this.balla = new lib.Ball();
this.balla.x = 500;
this.balla.y = 50;
this.addChild(this.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.

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;});
	

requestAnimationFrame

Das Tick Ereignis unterstützt sowohl die Timeout als auch die requestAnimationFrame Methode.

Gerade wenn viele Ereignisse zu leicht unterschiedlichen Zeiten eintreten, kann es zu Verzögerungen kommen. Mittels requestAnimationFrame wird das Intervall, wann die Bühne neu gerdnert wird, vom Browser bestimmt. So hat man eine möglichst effiziente und performante Darstellung.

Mit folgender Zeile wird das tick Ereignis auf requestAnimationFrame gesetzt.

createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.setFPS(60);

Man könnte auch requestAnimationFrame direkt aufrufen, aber das macht nicht wirklich Sinn:

var _this = this;
function moveKreis() {
	_this.kreis_mc.x += 5;
}

function renderScene() {
	requestAnimationFrame(renderScene);
	moveKreis();
}

renderScene();
    
    

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 einer Klasse 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()
{
var p = this.globalToLocal(this.getStage().mouseX, this.getStage().mouseY);
ball[0].x += (p.x - ball[0].x) / 10;
ball[0].y += (p.y - ball[0].y) / 10;

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

Im diesem einfachen Beispiel wird eine programmierte Maske erzeugt. Es ist kein Movieclip, der als Maske dient sondern ein Shape Objekt. Dieses Shape Objekt sollte nicht mit addChild() der Display Liste hinzugefügt werden. Der Movieclip myMc wird unter der Maske sichtbar. siehe Shape und Circle

var s = new createjs.Shape();
s.graphics.beginFill("#ffff00").drawCircle(100, 100, 100); 
this.myMc.mask = s;

 

Wenn diese Maske mit der Maus verschiebbar sein soll, kann man folgenden Code hinzufügen:

var s = new createjs.Shape();
s.graphics.beginFill("#ffff00").drawCircle(0, 0, 100);
this.myMc.mask = s;

this.myMc.addEventListener("pressmove", moveIt.bind(this));
function moveIt(evt) {
	var p = this.globalToLocal(evt.stageX, evt.stageY);
	s.x = p.x;
	s.y = p.y;
}
  
  

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))
}
}

Rectangle getBounds() intersects()

Ein Rectangle Objekt ist ein Rechteck, welches in vielen Situationen gebraucht wird. Man kann abfragen ob sich 2 Rechtecke überschneiden. Mittels getBounds kann man die Grenzen eines Objekts ermitteln. Siehe dazu diesen Beitrag im Netz.
Sowie diese Beispiele von mir:

Rectangle()

Download fla

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 globalToLocal ins 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 Framework SoundJS.

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

siehe Api SoundJS Abstract Soundinstance Class

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 eine Instanz des Sounds auf die Bühne bringen. Hier ist Gitarre der ID Name des Sounds.

var myInstance = createjs.Sound.createInstance("Gitarre");

 

play()

Es gibt verschiedene Möglichkeiten den Sound abzuspielen. Man kann mehrere Eigenschaften einfügen.

leadG.play({interrupt:createjs.Sound.INTERRUPT_ANY, loop:-1, pan:0.5, volume:0.2});

interrupt
createjs.SoundJS.INTERRUPT_ANY Es können nicht beliebig viele Sounds der gleichen Quelle gleichzeitig abgespielt werden. Wenn kein Channel mehr frei ist, wird mit Interrupt definiert, was mit dem Sound passiert der gerade läuft.
  • INTERRUPT_ANY jeder Sound soll abgebrochen werden
  • INTERRUPT_EARLY versuche soviel wie möglich abzuspielen, aber setze keine hohe Priorität
  • INTERRUPT_LATE unterbreche etwas später
  • INTERRUPT_NONE unterbreche nie einen laufenden Sound
delay
Wert in Millisekunden, Verzögerung beim Start
offset
Wert in Millisekunden, die Zeit welche am Anfang des Sounds übersprungen wird
loop
Wiederholung 0 keine Wiederholung, 2 mal wiederholen, -1 ständige Wiederholung
volume
Lautstärke von 0 bis 1
pan
-1 ist links, 1 ist rechts, 0 ist Mitte

PlayPropsConfig

Siehe Api PlayPropsConfig

Man kann die Parameter zum Abspielen eines Sounds auch in einer Instanz der PlayPropsConfig Klasse definieren und diese Instanz dann der play() Methode zuweisen:

var ppc = new createjs.PlayPropsConfig().set({interrupt: createjs.Sound.INTERRUPT_ANY,loop: -1});

Es folgen 2 Möglichkeiten play() aufzurufen. Im ersten Beispiel über eine zuvor erstellte Instanz eines Soundobjekts, siehe oben.

 meineInstanz.play(ppc);

Oder man gibt als ersten Parameter den Verknüpfungsnamen aus der Bibliothek an.

 createjs.Sound.play("idName", ppc);

Abspielen, Stoppen, Pause

Stoppt man den Sound und spielt ihn erneut ab, wird er vom Anfang gestartet. Wenn man stattdessen den Sound pausiert und ihn wieder startet, beginnt er bei der Position, wo er stehengeblieben ist. Es ist nicht nötig, diese Position in einer Variablen zu speichern und beim abspielen zuzuweisen.

Beispiel

var leadG = createjs.Sound.createInstance("Gitarre");
 
this.play_btn.addEventListener("click", playG.bind(this));
this.stop_btn.addEventListener("click", stopG.bind(this));
this.pause_btn.addEventListener("click", pauseG.bind(this));

function playG()
{
 leadG.play({interrupt:createjs.Sound.INTERRUPT_ANY, loop:-1, pan:0.5, volume:0.2});
}

function stopG()
{
	leadG.stop();
}

function pauseG()
{
leadG.paused = true;
}
  

Lautstärke & Balance

Die Lautstärke bestimmt man über die Eigenschaft volume mit einem Wert von 0 bis 1. Die Balance wird durch pan bestimmt mit einem Wert von -1 bis 1.

Lautstärke erhöhen.

mySound.volume += 0.05;

Mehrere Sounds starten und stoppen

Beispiel

var mySound = createjs.Sound.createInstance("Gitarre");

var ppc = new createjs.PlayPropsConfig().set({
	interrupt: createjs.Sound.INTERRUPT_ANY,
	loop: -1,
	volume: 0.5
});


this.play1_btn.addEventListener("click", play1.bind(this));
this.play2_btn.addEventListener("click", play2.bind(this));
this.stop_btn.addEventListener("click", stopG.bind(this));

this.plus_btn.addEventListener("click", volPlus.bind(this));
this.minus_btn.addEventListener("click", volMinus.bind(this));

function play1() {
	mySound.stop();
	mySound = createjs.Sound.createInstance("Gitarre");
	mySound.play(ppc);
}
function play2() {
	mySound.stop();
	mySound = createjs.Sound.createInstance("Organ");
	mySound.play(ppc);
}

function stopG() {
	mySound.stop();
}

function volPlus() {
	mySound.volume += 0.05;
}

function volMinus() {
	mySound.volume -= 0.05;
}

CSS Komponente

Mit der CSS Komponente hat man die Möglichkeit andere Komponenten mittels CSS zu formatieren. Ziehe eine CSS Komponente auf die Bühne vergebe einen Instanznamen. Erzeuge eine CSS Datei und speichere diese ab. Klicke auf die CSS Komponente und weise im Eigenschaftenfenster unter Quelle den Pfad zur CSS-Datei ein (Bleistift-Symbol).

Erzeuge eine Komponente vergebe einen Instanznamen. Dieser Instanzname kann in der CSS Datei mit dem ID-Selektor angesprochen und formatiert werden. Beachte, dass nicht alle CSS Eigenschaften möglich sind. Einige Komponenten habe im Eigenschaftenfenster einen Klassennamen. Hierauf kann man über den Klassenselektor in CSS zugreifen.

Image Komponente

Vergebe der Image Komponente einen Instanznamen und verweise im Eigenschaftenfenster unter Quelle auf ein Bild. Das Bild wird beim Veröffentlichen sowieso in einen Unterordner "images" verschoben. So dass man auch alle weiteren Bilder, die per Javascript in der Image Komponente angezeigt werden in diesen Ordner kopieren sollte.

Verweise mit folgendem Javascript auf ein Bild namens auto_2.jpg auf eine Image Komponente namen myImages.

$("#myImage").attr("src","images/auto_2.jpg");

Label Komponente

Vergebe der label Komponente einen Instanznamen und vergebe einen Text im Eigenschaftenfenster. Mit folgendem Javascript kann man den Text "Hallo Welt" der Label Komponente mit Instanznamen myLabel zuweisen.

$("#myLabel").text("Hallo Welt");

Video

siehe Beispiel

Siehe Video steuern mit Javascript

Siehe Video Tutorial

Man kann in EaselJS bzw. AnimateCC 2017 eine Video Komponente nutzen, um Sie mit HTML5 Canvas zu veröffentlichen. Siehe dazu auch mein VideoTutorial bei Youtube. In diese Videokomponente kann man über das Eigenschaftsfenster ein Pfad zu einem mp4-Video angeben, um sie innerhalb des Canvas Elements anzuzeige.

Man kann dieses Video mit einer integrierten Steurungsleiste steuern, oder auch mit eigenen Buttons oder MovieClips pausieren und starten. In den Codefragmenten von Animate CC 2017 finden sich einige wichtige Befehle.

Ein Video mit dem Instanznamen myVideo kann man folgendermaßen abspielen und stoppen.

$("#myVideo")[0].play();
$("#myVideo")[0].pause();

Über die Eigenschaft

 

--> currentTime kann man die Abspielzeit in Sekunden abfragen und die Eigenschaft duration liefert die Gesamtzeit des Videos.

$("#myVideo")[0].currentTime;

In dem obigen Beispiel wird das Video an festgelegten Zeitpunkten gestoppt und ausgeblendet. Gleichzeitig wird der Vorhang animiert und der Playbutton eingeblendet.

Radio Button Komponente

Siehe Beispiel

Ziehe 2 Radiobutton Komponenten auf die Bühne, vergebe beiden einen Instanznamen oben im Eigenschaftenfenster. z.B.: r1 und r2. Geben unten im Eigenschaftenfenster

  1. Bezeichnung (die sichtbare Beschriftung)
  2. Wert ( 1 oder 0)
  3. Name (beide Buttons bekommen den gleichen Gruppennamen)
  4. Deaktiviert (nicht aktivieren)

Klicke den ersten Button an und wähle auf dem "Codefragementen" Komponenten, Benutzeroberfläche, Ereignis für Klick auf Kontrollkästchen. Mache das gleiche nochmal nachdem du den zweiten Button ausgewählt hast.

Erzeuge ein dynamisches Textfeld mit Instanznamen info.

Füge im Actionscriptfenster nach //Beginn des benutzerdefinierten Codes folgende Zeile ein:

this.info.text = "Bla bla";

Füge auch im Javascriptblock für den zweiten Button einen ähnlichen Text an gleicher Stelle ein.

this.info.text = "Blu Blub";

Actions / Javascript

  if(!this.r1_change_cbk) {
	function r1_change(evt) {
		// Beginn des benutzerdefinierten Codes
		console.log(evt.target.checked);	
		this.info.text = "Bla bla";
		// Ende des benutzerdefinierten Codes
	}
	$("#dom_overlay_container").on("change", "#r1", r1_change.bind(this));
	this.r1_change_cbk = true;	
}


if(!this.r2_change_cbk) {
	function r2_change(evt) {
		// Beginn des benutzerdefinierten Codes
		console.log(evt.target.checked);	
		this.info.text = "Blu Blub";
		// Ende des benutzerdefinierten Codes
	}
	$("#dom_overlay_container").on("change", "#r2", r2_change.bind(this));
	this.r2_change_cbk = true;
	
}
  

DomElement

Man kann jedes beliebige HTML Element in der Display List aufführen. Dazu stellt EaselJs ein DomElement Objekt zur Verfügung.
siehe Referenzen

Siehe auch folgendes Beispiel und downloade das Beispiel
Die Positionierung ist ein bisschen tricki. Um das Element über dem Canvas anzeigen zu lassen, habe ich einen negativen y Wert eingesetzt. Das Checkbox Element liegt unter dem canvas Element.


Erzeuge ein beliebiges HTML Element, z. B. ein Formular mit einer Id.

<form action="#" method="post" id="myForm" name="myForm">
  <label for="myCheckbox">My Checkbox</label>
  <input name="myCheckbox" type="checkbox" id="myCheckbox">
  </form>

Nun kann man im Script Block folgendmaßen darauf zugreifen und das Formular erscheint im Canvas Bereich. Mit DisplayObject Methoden und Eigenschaften kann man das Objekt verändern.

 var htmlElement = document.getElementById("myForm");
	var domElement = new createjs.DOMElement(htmlElement);
	stage.addChild(domElement);
	stage.update();
  

In diesem Tipp zeige ich wie man mit Javascript auf Formularelemente zugreift.


JQuery

Da innerhalb eines Canvas Dokumentes Javascript die Programmiersprache ist kann man selbstverständlich auch Jquery nutzen, wenn man die Bibliothek einbindet.

Unter https://code.jquery.com/ kann man sich den Einbindgscode kopieren, um ihn in den Head Bereich der HTML Seite einzufügen.

In der AnimateCC 2017 Version sind einige JQuery Komponenten in den Codefragmenten enthalten und auch einige Befehle, um Videos mit der Videokomponente zu steuern.

Aber auch mit der älteren Version kann man JQuery Effekte nutzen, wie in diesem Beispiel, wo das Canvas Element nach Abspielen einer Tweening Animation sich selbst ausblendet und ein anderes Div der Html Seite einblendet.

Achtung
Achtet in AnimateCC 2017 auf den Einbettungscode des Canvas Elementes in der Html Seite. Hier muss auch der div-animation-container ausgeblendet werden.

$( "#div-animation-container" ).slideUp( 1200 );
$( "#canvas" ).slideUp( 1200 );

Siehe Beispiel

 

 

 

 

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


 

Hompage: http://www.pastorpixel.de