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 fonctions (par ex : scene.gotoAndStart();).

Le début du code permet simplement de dire à Javascript d'afficher un curseur en forme de main sur chaque élément, afin que l'utilisateur sache qu'il peut faire quelque chose. Pour cela, on active le buttonMode pour chacun des éléments. 

/* ----- 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;

La partie suivante concerne le déplacement d'un élément lorsque l'on clique dessus.

  • On commence par mettre un gestionnaire d'évènement de type "click" sur le chat.
  • On créé ensuite une propriété pour ce chat, que l'on nomme ori_pos, et on fixe sa valeur de base à "true". Cette propriété aura pour valeur "true" si le chat est dans sa position d'origine, "false" sinon.
  • Enfin, on implémente la fonction moveCat qui permet de déplacer le chat. Celle-ci a deux conditions : soit le chat est dans sa position originale, auquel cas on modifie ses coordonnées et on met la propriété ori_pos en false, soit il n'est pas dans sa position originale, auquel cas on l'y remet et on change la propriété en conséquence.
/* ---- 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;
	}
}

La partie suivante montre comment faire en sorte que la taille d'un élément soit modifiée lorsque l'on clique sur un élément, puis qu'il revienne à sa taille initiale si on relâche le bouton de la souris ou que l'on éloigne le curseur de celle-ci.

  • Pour cela, on commence par installer un gestionnaire d'évènement "mousedown" à l'élément souhaité.
  • Ensuite, on créé une propriété qui contiendra la taille du chat, et on fixe sa valeur originale à 1.
  • On définit ensuite la fonction resizeCat qui modifie l'échelle de l'élément en la multipliant par deux, et qui fixe une nouvelle valeur à la propriété cat_size.
  • Avant d'installer les gestionnaires d'évènements suivants (mouseup et mouseout), il est nécessaire d'indiquer à createJS d'activer ces fonctionnalités (voir la procédure dans le code). On peut alors installer les gestionnaires.
  • Enfin, on créé la fonction resizeCat2 qui va modifier l'échelle de l'élément en la divisant par deux, si et seulement si elle n'est pas à sa taille d'origine.
/* ---- 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;
	}
}

Dans cet exemple, on apprend à faire du drag and drop.

  • On commence par installer les gestionnaires d'évènement "pressmove" et "pressup".
  • On indique ensuite à la fonction startDragging de faire en sorte que l'élément sur lequel on clique suive le déplacement de la souris.
  • On créé aussi une fonction stopDragging qui ne fait rien mais qui permet d'interrompre la fonction startDragging.
/* ---- 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 
}

Dans ce dernier exemple, on modifie la visibilité de deux éléments.

  • On commence par mettre la propriété de visibilité de l'un des deux éléments en false, ce qui le rend invisible.
  • On installe ensuite les gestionnaires d'évènement de type "click".
  • Enfin, on créé la fonction hideShow qui permet d'inverser simultanément la visibilité des deux éléments, celui qui était visible devenant invisible et inversement, quelque soit celui sur lequel on a cliqué.
/* ---- 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;
}

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=58483 »