Animate CC 2015 HTML5 Canvas - Objets interactifs

De EduTech Wiki
Aller à la navigation Aller à la recherche

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.

Tutoriels Flash

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

Matériel (fichiers *.fla à manipuler)

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

Exemple

Dans ce code nous utilisons souvent la méthode on de CreateJS. Elle permet de réduire le code.

Le code suivant: 

this.objet.on ("click", gestionEvenement);
  • associe une fonction (ici gestionEvenement à l'événement "click" d'un objet
  • dans la fonction, la variable "this" représente ce même objet (et non pas la scène / stage). En terme informatiques, on a changé de "scope". Créez donc une variable globale contenant la scene (par ex : var scene = this;) et vous y aurez accès dans les fonction (par ex : scene.gotoAndStart();).

(à 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 ...

Documentation

Les propriétés et méthodes des objets ne sont pas documentés chez Adobe. Il faut aller voir sur le site de createJS. Par exemple:

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Animate_CC_2015_HTML5_Canvas_-_Objets_interactifs&oldid=46823 »