Week 3 - More Javascript + Animation

This week, we continued on javascript.  In the last part of the lecture animation from javascript have been introduced.  Animation is used to create effects and enhance the content of the web site using Dynamic HTML (DHTML).  This leads us to the next task which was given to work on it for the next two weeks.

The task consists of implementing the animation of a man running using the 6 images, which are found in our coursework material.  Additional features include:

• Allow the user to speed up / slow down the animation
• Allow the user to ‘throw’ an obstacle at the runner

So first I started to crop the whole image into 6 separate images, so that the running man animation can be implemented.  I inserted the code found in our material to view the animation on the web browser.  At first nothing happened, this is because there are some missing semi-colons, the ending script tag had a missing forward slash and had html comments “<!-- -->” inside the javascript code.

After making it work, I took a look at the code to understand the code step by step, since it’s the first time I will be using javascript to create animation.

An array has been created, so that it can hold more than one image at a time.  An Array object called runner is used, having a size of 6.  Javascript arrays start at 0.

A second alternative on how to create an array is by using a Condensed Array

A third alternative is by using a Literal Array

A fourth alternative, which I will be using is creating a for loop where "runner" is concatenated with the variable i and with ".jpg". The advantage of this code is that the image source is not written for six times. 

The function marathon is used to loop from runner0 to runner5, when the run button is clicked, and repeats itself until the stop button is clicked.

When the run button is clicked, the setInterval() method is used, which has the following syntax:

setInterval (code, millisecond, lang)

The 'code' parameter is required and is a reference to the function to be executed.  In our case it is the marathon() function.  The 'millisecond' parameter is also required and specifies the intervals.  In the example, the millisecond was written as 100, but I created a text field where the user can control the speed of the running man animation, by inputting the number in milliseconds. Therefore 'document.animateform.speed.value' was written instead of '100'.

That's all for this week, next week I will continue on the running man animation.