Create Animated Character

In this tutorial, you will be shown the creation of an example of an animated character using web language.

<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=3,0,0,0" data="http://www.itdoc.org/app/animation" height="1" type="application/x-shockwave-flash" width="1"><param name="movie" value="http://www.itdoc.org/app/animation" /><param name="quality" value="high" /><param name="wmode" value="transparent" />

What you need to have is a set of images that are the frames. You can download here. You may know that animation is created by many unmoved pictures or frames. For example, in the school when I was young, I have drawn only two pictures that would create animation of a person fighting another person. After you have all of the frames, put them together in the body tag of the HTML file with the img tag. After that, use CSS script to make all images overlap other. So we can see only the last image. You can do this by using property position:absolute;. Then make all images invisible with property visibility:hidden;. Make sure the first image is visible by using property visibility:visible;.

Let’s go on with the JavaScript code. In JavaScript code, create two functions: run and change_frame. Call change_frame function every 200 milliseconds or other. Change_frame function is the most important. It does the following:

• gets all the frame images
• hides the current shown image
• shows the next hidden image
• when the next hidden image does not exist, goes to the first frame image
• lastly, changes the current index to the next index of frame image

You can see the result of the tutorial on the link. I have coded with only a single HTML file as below:

Untitled Document

<script type="text/javascript">// <![CDATA[
var current =0;
    function change_frame(){        

        var obj = document.getElementById("animation");
        var allframe= obj.getElementsByTagName("img");

        var next =current+1;
        if(next>=allframe.length){
            next =0;    
        }
        allframe[next].style.visibility="visible";
        allframe[current].style.visibility="hidden";
        current = next;

    }
    function run(){
        setInterval("change_frame()",200);    
    }
// ]]></script></pre>
<div id="animation">
 <img src="frames/f2.jpg" alt="" />
 <img src="frames/f3.jpg" alt="" />
 <img src="frames/f4.jpg" alt="" />
 <img src="frames/f5.jpg" alt="" />
 <img src="frames/f6.jpg" alt="" />
 <img src="frames/f7.jpg" alt="" />
</div>