Click here to Skip to main content
12,884,509 members (31,306 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 27 Nov 2012

Create animated character

, 27 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
In this tutorial you will be shown the creation of an example of an animated character using web language.

In this tutorial you will be shown the creation of an example of an animated character using web language.<OBJECT type="application/x-shockwave-flash" codebase=",0,0,0" WIDTH="1" HEIGHT="1" data=""><PARAM NAME="movie" VALUE=""><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 picture or frame. For example in the school when I was young I have drawn only two picture that would create animation of a person fight another person. After you have all of the frame 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:

  • get all the frame images
  • hide the current showed image
  • show the next hidden image
  • when the next hidden image does not exist go to the first frame image
  • lastly change 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;
            next =0;    
        current = next;

    function run(){
// ]]></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="" />


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Member 8292021
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

SuggestionToo many DOM access Pin
daniele.arrighi28-Nov-12 22:16
memberdaniele.arrighi28-Nov-12 22:16 
Thanks for the example this is very useful, but in your code, imho, you are accessing the DOM too many times.
Every time you use getElementById and getElementsByTagName javascrpt will iterate trought all the DOM objects in search of the object you are looking for. If you have, like, 300 objects in your page, javascript have to parse all the 300 objects avery 200ms and this is a bad behaviour, as it is very costly.

To avoid this, simply set the obj and allframe variabiles as globals and put all your script at the end to the page, after the actual html, this to avoid getElementByID not finding the element as it's still being parsed by the browser (or you should create ad-hoc $(document).ready() jQuery-like function in pure JS).
GeneralRe: Too many DOM access Pin
Member 829202129-Nov-12 17:49
memberMember 829202129-Nov-12 17:49 
GeneralRe: Too many DOM access Pin
jsc423-Dec-12 8:29
memberjsc423-Dec-12 8:29 
GeneralRe: Too many DOM access Pin
Member 82920214-Dec-12 18:38
memberMember 82920214-Dec-12 18:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170422.1 | Last Updated 27 Nov 2012
Article Copyright 2012 by Member 8292021
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid