HTML 5 simple animation

So as it turns out my html /javascript animation is quite different from flash animation. For Practical reasons a client may need or want an HTML 5 animation project done so I am now including a simple animation with HTML 5.

With this example you have to first make a canvas tag. Think of the Canvas tag as the part of screen our animations will show. This is where we will do most of our work . Once we defined a canvas tag in HTML. Make sure that the browser loads all of objects by listening to the load event. you can do this in a number of ways I like the addEventListener method as its close to what I do in Actionscript.

window.addEventListener('load', eventWindowLoaded,false);

Instead of going through the drawing code step by step, I will talk about the reasoning and the design. the Canvas object works in what is called immediate mode. What this boils down to is you have to update the scene every iteration of your game loop, like a flip book. This also means before you draw on the canvas(using the drawing API) you must erase it first or the previous drawn artifact will be there. So in stead of drawing a circle moving you get a snake growing. Here is how I do this

function drawScreen(){

context.clearRect(0, 0, canvas.width, canvas.height);

x+=speed;

context.fillStyle = "#000000";

context.beginPath();

context.arc(x,y,15,0,Math.PI*2,true);

context.closePath();

context.fill();

.

}

note this: call clear rect before you actually draw on the canvas(context.fill).

Here is my simple example the canvas on the bottom is not clearing on each iteration.

example

There are some really cool animations that can be done with the drawing API, but next time I will show you guys animations with actual pictures.

First Look at Javascript animation

Javascript and AS3 are based off of similar coding principles in that they are based on ECMAscript 5. But trying to do a simple animation in Javascript is alot different.for instance If I wanted to move a block across the screen in flash I would follow these steps.

1. take the blocks x corrdinate and call and onEnterEvent add 1 to the value blocks x position.

this would look something like this (if I was writting a timeline script).

addEventListener(Event.ENTER_FRAME, doMove);

doMove(event:Event){

block.x += 1;

}

In javascript it is a little different this is because the position of an element in the DOM is apart of the elements style property. First you have to make sure that the element is positioned absolutely. So what I did was make a div called box.

than in the css file I gave the box some style

#box{

width:50px;

height:50px;

background-color:#003366;

position:absolute;

left:1px; <--- this is important

}

Now the interesting thing to note is that even though you could physically see the box on the screen. if you did not explicitly set the left attribute, you could not access it. This must have something to do with the browsers ability to read and write CSS rules( not sure).

For instance in AS3 you can access an objects x field with out having to first initialize it because it is a member of the object when it is made. That being said:

//I make a box object called box1 it is global only for this example

var box1 = null;

// I then give a default value for the left position

box1.style.left = '1px';

//than I make a function that will update the left value every iteration of a loop

function doMove()

{

box1.style.left = parseInt(box1.style.left)+1+'px';

setTimeOut(doMove,20);

}

//start the function when the you click the screen

window.onmousedown= doMove;

Here is a link to the box moving in javascript.

I am Back

After a very long break.I have returned to continue my quest. I now have a few series I will be writing about. These are:

1. low level programming to understand API's like molehill and WebGL
2. JavaScript animation and development with html(not html 5)
3. and of course HTML 5 animation and development

I had promised back in may to make a flash based study tool to help on our quest so I will renew that course of action. Of course all of this will take time. I will probably just bust it out over a weekend.

My goal is to build a foundation of knowledge to start really doing some impressive stuff with these technologies.