Animate CC 2015 HTML5 Canvas - Objets interactifs

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

Objectifs d'apprentissage Le but de ce tutoriel est aller un peu au-delà du traitement de clics de souris, de boutons et de composants de bouton. Vous allez par exemple apprendre à modifier les propriétés d'objets (comme la position, la taille et la visibilité):

• Constructions ECMAScript (langage de programmation à la base de ActionScript et JavaScript)
• Savoir manipuler quelques propriétés d'objets
• Connaître plus d'évènements
• Apprendre à programmer la manipulation directe d'objets sur la scène

Prérequis

• Flash CC 2014 Canvas - Symboles et clips

Matériel (fichiers *.fla à manipuler)

• http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/

Qualité et niveau

Le niveau de ce tutoriel est un peu haut pour les novices, mais il peut servir de fiche pratique dans un atelier.

Ce texte vise des Flash designers, et non pas des programmeurs débutants ActionScript 3. Ceci dit, les programmeurs peuvent lire ce texte pour obtenir un "feeling" concernant les propriétés d'objets avant d'aller creuser dans une vraie documentation. On vous conseille aussi de regarder l'hiérarchie des classes pour les objets "Display" à la fin

Prochaines étapes

• ....

Autres versions

• Flash AS3 - Objets interactifs (CS3/4/5/6/CC pour ActionScript)

Exemple

• http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/cc-2014-canevas-interactive-objects.html
• http://tecfa.unige.ch/guides/flash/cc-html5/interactivity/cc-2014-canevas-interactive-objects.fla

(à commenter un jour ...)

/* ----- Change cursor form
//add a hand to cursor to each cat
//This way a user understands that he/she can do something with the object.

black_cat.buttonMode = true;
blue_cat.buttonMode = true;
red_cat.buttonMode = true;
brown_dog.buttonMode = true;
white_cat.buttonMode = true;
empty_cat.buttonMode = true;
grey_mouse.buttonMode = true; 

/* ---- moving ---- */

this.black_cat.on ("click", moveCat);
// cat can be in original position or not (true,false)
this.black_cat.ori_pos = true;

function moveCat() {
	if (this.ori_pos == true)
	{
		this.x += 200;
		this.y += 200;
		this.ori_pos = false;
	}
	else
	{
		this.x -= 200;
		this.y -= 200;
		this.ori_pos = true;
	}
}


/* ---- resizing ---- */

// height and width do not exist in createJS, therefore we use scaleX and scaleY

this.blue_cat.addEventListener("mousedown", resizeCat.bind(this));
// a cat_size property will keep track of its size.
this.blue_cat.cat_size = 1;

function resizeCat() {
	console.log ("this=" + this + ", this.blue_cat=" + this.blue_cat + ", this.blue_cat.scaleX=" + this.blue_cat.scaleX);
	this.blue_cat.scaleX =  this.blue_cat.scaleX * 2;
	this.blue_cat.scaleY =  this.blue_cat.scaleY * 2;
	this.blue_cat.cat_size = 2;
}

// This is crucial: We must tell createJS to enable mouseout.
stage.enableMouseOver(30);
this.blue_cat.mouseChildren=false;

// We have to test both mouse up and mouse out since user can
// press mouse and move out. Cat in this case would stay big.
// Also we have to test if cat is already big when user moves in.
this.blue_cat.on("mouseup", resizeCat2);
this.blue_cat.on("mouseout", resizeCat2);

function resizeCat2(ev) {
	console.log ("Type=" + ev.type + ", target=" + ev.target);
	if (this.cat_size > 1)
	{
		this.scaleX  =  this.scaleX  / 2;
		this.scaleY =  this.scaleY / 2;
		cat_size = 1;
	}
}

/* ---- dragging ---- */
this.red_cat.on("pressmove", startDragging);
this.red_cat.on("pressup", stopDragging);

function startDragging(evt) {
	this.x = evt.stageX;
    this.y = evt.stageY;
}

function stopDragging(evt){
	// nothing to do 
}

/* ---- Hiding ---- */
// can't see the dog for starters
this.brown_dog.visible=false;

this.brown_dog.addEventListener("click", hideShow.bind(this));
this.white_cat.addEventListener("click", hideShow.bind(this));

function hideShow(ev){
	// instead of white_cat.visible = false; we just switch it to the opposite
	this.white_cat.visible = !this.white_cat.visible;
	this.brown_dog.visible = !this.brown_dog.visible;
}


/* ---- permanent size change with mouse wheel ---- */
// later ...