Small codes

HTML5, Javascript and AS3

Playing with DOM element in CreateJS: animate your forms !

| 7 Comments

DOMElement tutorial title image

In my previous posts about CreateJS, we could see that this Javascript library has many positive attributes, but all the things we did with it were confined in the HTML5 canvas. But there’s an object in the EaselJS library that allow to break through the canvas, while remaining in the display list. This is the DomElement object.

What’s the DOMElement object ?

The DOMelement object is, as I said, part of the EaselJS library. Its purpose is to allow adding to the display list (which start with the Stage), some HTML elements layering outside the Canvas. It can be a div, a span, an image, or even a form.

These elements may be moved, made transparent, and they will inherit some properties from to their parent container in the display list. We’ll se that DOMElements objects don’t have as much methods and properties as a display object in EaselJS, even if they inherits from it.

Moreover, it’s important to keep in mind that the DOMElement object is still experimental and bugs will happen, mainly on complex manipulations. Don’t hesitate to report these bugs on the createJS website, following this link.

Building HTML page and CSS rules

We are going to create a basic HTML page, that will contain two main elements : a form, and a canvas. On page load, we will start the EaselJS engine by creating a stage from the canvas and assign a Ticker object to it. If you didn’t follow my firsts posts about EaselJS, and if you don’t know what I am talking about, you may read this post.

Here’s the HTML code :

 
<!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>

Then we will add a basic CSS sheet, Nous allons rajouter une feuille CSS basique, in order to have a nice looking “block” form:

 
body{
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
	width: 100%;
	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;
}

So we have our working base, that should looks like this :

Animating the form

We start by creating our DOMElement() object, with the HTML element as a parameter :

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

As the rotation center is at the coordiantes (0,0) by default, we have to move it at the center of the form. To do this, we use the regX and regY properties of the DOMElement() object.

Then, we move the form above the screen, by giving it a negative Y coordinate. We also center it on the X coordinate.

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

Next, we add the DOMElement() object to the display list, with the addChild() method of the Stage() object.

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

All we have to do now is to create a Tween(), thank’s to the TweenJS library.

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

We can now see our form falling from the top of the screen. For me, best results comes with Chrome, it may vary from one browser to another. On Internet Explorer there is an issue. the form lose the focus again and again and is not usable.

To fix this, we add a callback to our tween. In this callback function, we remove the form from the display list :

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

The form is no longer in the EaselJS’s stage display list, but it stays in place. If we want to apply a new Tween to it, we’ll have to add the form to the display list again.

Apply a transparency effect to the form

To conclude, we will add a “turn light on/off” effect to the form. Let’s listen to the “onchange” event of the checkbox, like this :

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

In the event callback, we get back the checkbox’s state. In relation to this state, we assign a target value to the alpha property of our form. We have to destroy any tween that would be still running on the formDomElement. Then we add it to the display list and execute the Tween.

We assign the “oncomplete” event’s callback of our tween to our tweenComplete function, which will remove the form from the display list again, fixing the Internet Explorer issue.

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

Click here to see the result.

What we can’t do in EaselJS with DOMElements

the DOMElement object can be added to the display list, but it inherit only partly from the DisplayObject() class, cause it is never physically added to the canvas in a bitmap form. All transformations are made in the CSS properties of the HTML element.

So, many DisplayObjects methods can’t apply to a DOMElement(): globalToLocal(), hitTest(), filters, and all things that CSS can’t do. On the other side, we can play with skew, for example, and bend a little our DOMElement.

To conclude…

The main flaw of Flash animations is the difficulty to make text contents readable by search engines robots. This flaw still remain in the HTML5 canvas. The DOMElement() object will fix this, by including directly our texts, titles, images, and why not our videos and forms in canvas animations, while keeping them reachable for SEO.

More, for some games, and on some browers, keeping some elements outside of the canvas, in a HTML tag, can make us gain some precious FPS, as these elements are not drawn on the canvas.

7 Comments

  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!

Leave a Reply

Required fields are marked *.


Social Widgets powered by AB-WebLog.com.