Small codes

HTML5, Javascript and AS3

Jouer avec les éléments du DOM dans CreateJS: animez vos formulaires !

| 7 Commentaires

DOMElement tutorial title image

Dans les articles précédents sur CreateJS, on a pu voir que cette librairie javascript avait de nombreuses qualités, mais tout ce que nous avons fait se limitait au canvas. Mais il existe un objet dans la librairie EaselJS qui nous permet de nous libérer des limites du canvas, tout en restant dans la liste d’affichage. Il s’agit de l’objet DOMElement.

Qu’est ce que l’objet DOMElement ?

L’objet DOMElement fait donc partie de la librairie EaselJS. Son but est de permettre l’ajout à la liste d’affichage, d’élements HTML situés à l’exterieur du canvas. Cela peut être un div, un span, une image, ou pourquoi pas, un formulaire.

Ces éléments pourront être déplacés, rendus transparents, et ils hériteront aussi de certaines propriétés de leur conteneur parent dans la liste d’affichage. On va voir aussi qu’ils ne disposent pas de toutes les capacités d’un véritable DisplayObject dans EaselJS.

De plus, il ne faut pas perdre de vue que l’objet DOMElement est encore expérimental, et que des bugs peuvent survenir, surtout en cas de manipulations complexes. N’hésitez pas faire remonter ces bugs sur le site de CreateJS en suivant ce lien.

Structure de la page HTML et du CSS

Nous allons créer une page HTML basique, qui va contenir deux éléments principaux : un formulaire, et un canvas. Au chargement de la page, nous allons démarrer le moteur de EaselJS en créant un Stage à partir du canvas. Si vous n’avez pas suivis mes premiers posts sur EaselJS, et que vous ne voyez pas de quoi je peux bien parler, je vous conseille d’aller voir par ici

Voici le code HTML :

 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOMElement Tutorial</title>

	        <script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
		
		<script>
		var canvas, stage, exportRoot;
		window.onload = init;
		
		function init(){
			canvas = document.getElementById("canvas");

			stage = new Stage(canvas);
			
			Ticker.setFPS(32);
			Ticker.addListener(stage);
		}
		</script>
	</head>

	<body>
		<div id="main">
			<H1>DOMElements example</H1>
			<form id="myform" >
				<label for="firstName">Enter your firstName:</label>
				<input type="text" id="fistName/><br>
				<label for="lastName">Enter your lastName:</label>
				<input type="text"  id="lastName"/><br>
				<br>
				<input type="checkbox" id="case" /> 
				<label for="case">Alpha 50%</label><br>
				<p id="submit" >
					<input type="submit" value="Submit"/>
				</p>
			</form>
			<canvas id="canvas" width="800" height="600" style="background-color:#000000">
				<p>Your browser is sooooo old ! Download a modern one now !</p>
			</canvas>
		</div>
	</body>
</html>

Nous allons rajouter une feuille CSS basique, afin d’avoir un formulaire de type « block » :

 
body{
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
	min-width :800px;
}
#canvas{
	margin: auto;
	border-style:solid;
	border-color:#ffffff;
}
#main{
	width : 800px;
	padding-bottom: 20px;
	margin: auto;
}

form{
	font-size: 0.8em;
	width: 300px;
	background-color: #0066DD; 
	margin: auto;
	padding: 10px;
	border-style: solid;
	border-width: 2px;
	border-color: #0099FF;
	text-align: left;
	color: #ffffff;
	opacity:0;
}
#submit{
	text-align: right;
}

Nous avons ainsi notre base de travail, qui doit ressembler à ceci :

Animation du formulaire

Nous creons d’abord de manière très simple notre objet DomElement(), en lui passant en paramètre l’élément HTML de notre formulaire :

 
function init() {
	canvas = document.getElementById("canvas");
	//DOMElement creation
	form = document.getElementById("myform");
	formDOMElement = new DOMElement(form);

Le centre de rotation étant par défaut aux coordonnées (0,0); nous devons le déplacer au centre du formulaire. On utilise les propriétés regX et regY de l’objet DOMElement.

Ensuite, on déplace le formulaire au dessus de l’écran, en lui donnant une coordonnée Y négative. On en profite pour le centrer sur X.

 
	//move it's rotation center at the center of the form
	formDOMElement.regX = form.offsetWidth*0.5;
	formDOMElement.regY = form.offsetHeight*0.5;
	//move the form above the screen
	formDOMElement.x = canvas.width * 0.5;
	formDOMElement.y =  - 200;

On ajoute alors l’objet DOMElement() à la liste d’affichage, avec la méthode addChild() de l’objet Stage().

 
	//add the formDOMElement to the display list
	stage.addChild(formDOMElement);

Il ne nous reste plus qu’a créer un Tween, grace à la librairie TweenJS.

 
	Ticker.setFPS(32);
	Ticker.addListener(stage);
	
	//Apply a tween to the form
	Tween.get(formDOMElement).to({alpha:1, y:canvas.height * 0.5, rotation:720},2000,Ease.cubicOut);

Nous avons alors notre formulaire qui arrive du haut de l’écran. Pour moi, les meilleurs résultats sont obtenus avec Chrome. Il est possible que le rendu puisse varier d’un navigateur à l’autre, mais il reste un véritable soucis avec IE, où le formulaire n’est pas remplissable : il perd son focus de manière répétée.

Pour corriger ce problème, nous rajoutons une fonction de callback à notre tween. Dans cette fonction, nous retirons le formulaire de la liste d’affichage :

	[...]
	Tween.get(formDOMElement).to({alpha:1, y:canvas.height * 0.5, rotation:720},2000,Ease.cubicOut).call(tweenComplete);;
}
function tweenComplete(){
	stage.removeChild(formDOMElement);
}		

Le formulaire ne fait plus partie du Stage de EaselJS, mais reste en place. Si on veut lui appliquer un nouveau Tween, il faudra l’ajouter à nouveau à la liste d’affichage avant.

Appliquer une effet de transparence au formulaire

Pour finir, on va rajouter un effet lumière éteinte/allumée sur le formulaire. On va écouter l’évènement « onchange » sur notre case à cocher :

<input type="checkbox" name="case" id="case" onchange="onCheckClick(this)"/> 

Dans le callback de l’évènement, nous récupérons l’état de la checkbox, et assignons en fonction de cet état une valeur cible à la transparence de notre formulaire. Nous prenons soin de détruire tout tween qui serait encore en cours sur l’objet DOMElement, et nous l’ajoutons à notre liste d’affichage, avant d’exécuter le Tween.

Nous pointons le callback de l’évènement « oncomplete » du Tween vers notre fonction tweenComplete(), qui retirera à nouveau le formulaire de la liste d’affichage, afin qu’il reste fonctionnel dans IE.

//Checkbox change 
function onCheckClick(e){
	//get the checkbox element
	var myCheck = e;
	//create a property to stock the alpha target value for the tween
	var alphaTarget;
	//add the form to the display list (IE)
	stage.addChild(formDOMElement);
	//If the checkbox's state is checked, turn off the lights, else turn them on.
	myCheck.checked == false?alphaTarget=1:alphaTarget=.2;
	//remove all tweens on the DOMElement object (in case of unfinished tweens when user click on the checkbox)
	Tween.removeTweens(formDOMElement);
	//use the callback tweenComplete to remove the form 
	//from the display list (IE) when the tween is complete.
	Tween.get(formDOMElement).to({alpha:alphaTarget},1000,Ease.bounceIn).call(tweenComplete);
}

Cliquez ici pour voir le résultat.

Ce que nous ne pouvons pas faire dans EaselJS avec les DOMElements

L’object DOMElement peut être ajouté à la liste d’affichage, mais il n’hérite que partiellement de la classe DisplayObject(), car il n’est jamais physiquement ajouté au canvas sous forme Bitmap. Toutes les manipulations sont réalisées sur le CSS de l’élément.

De ce fait, de nombreuses méthodes de DisplayObject ne peuvent s’appliquer à un DOMElement() : les globalToLocal(), hitTest(), les filtres, et tout ce que le CSS ne peut pas reproduire. Par contre, on peut jouer avec le skew et tordre un peu nos DOMElements.

Pour conclure…

Le principal défaut d’une animation Flash était la difficulté de rendre le contenu lisible par les robots des moteurs de recherche. Ce défaut est aussi présent dans le canvas. L’objet DOMElement va nous permettre de passer outre, en intégrant directement nos textes, nos titres, nos images, et pourquoi pas nos vidéos, au sein de nos animations canvas, tout en les gardant lisibles pour le SEO.

De plus, pour certains types de jeux et pour certains navigateurs, garder des éléments à l’extérieur du canvas sous forme de tag HTML peut faire gagner de précieux FPS, puisque que ces éléments de sont pas dessinés sur le canvas.

7 Commentaires

  1. Thanks.

    Good tutorial for html5 users.

  2. Thank you very much for the tutorial (: It’ll help me a lot.

  3. Thanks i love that tutorial. keep it up

  4. Nice help for createjs thanks. is there any possibility to use this with jquery :)

  5. Thanks for Web developers!

  6. Hi, thanks a lot for wonderful tutorial. this was exactly what I was looking for!

  7. the bug fix for the IE bug came really handy, thanks!

Laisser un commentaire

Champs Requis *.


Social Widgets powered by AB-WebLog.com.