Need Help with JS Animation

BSquared40 · #1 05-08-2007, 09:02 AM

Hello,

Chip Chapin has a JavaScript "Eiffel Tower" animation example at:

http://www.chipchapin.com/WebTools/J...xampleA01.html

I know just enough about JavaScript to get myself into trouble. I wanted to create an animation similar to the Eiffel Tower one at his website. So, I copied and pasted the code from the Eiffel Tower page into my editor and deleted all the non-relevant text, etc. Then, I took five .jpg images to test the process, renamed them anim0.jpg, anim1.jpg, etc., created the image exampleA01-anim0.jpg, and placed the images in the same folder as the .html page. Then, I changed all references from .gif to .jpg in the code.

I’ve created a web page using the code:

http://bmbweb.home.comcast.net/animation_example.html

(Aside: If you try viewing the source code on that web page and see code beginning with ” function SymError(),” that means your Norton Security program has inserted crippling code.)
When I click on the START button in my editor, I get the error message:

Line 21, Char 9
'anims[...].src' is null or not an object

Someone at another forum mentioned that my problem is that I'm not ever calling the function imageLoad to load my images into the array anim. Could someone explain how I go about calling the function? Don't feel like you'll be talking down to me, because you won't!
Thanks!
Bill

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
JavaScript Example A-1 -- Image Animation w/Speed Control
</title>

<script type="text/javascript" language="JavaScript1.2">
anims = new Array(5);
var frame = 0;
var timeout_state = null;

function imageLoad() {
for(var i = 0; i<5; i++) {
anims[i] = new Image();
anims[i].src = "exampleA01-anim" + i + ".jpg";
}
}

function animator() {
document.animImage.src = anims[frame].src;
frame = (frame + 1);
if(frame >= 5) {
frame = 0;
}
timeout_state = setTimeout("animator()", document.animForm.animPace.value);
}

function buttonCheck() {
if(document.animForm.animButton.value == "Start") {
document.animForm.animButton.value = "Stop";
animator();
} else {
document.animForm.animButton.value = "Start";
clearTimeout(timeout_state);
timeout_state = null;
}
}

</script>
</head>
<body>
<p>
<img src="exampleA01-anim0.jpg" name="animImage"
</p>
<form name="animForm">
<input type="button" value="Start" name="animButton"
onclick="buttonCheck()"><input type="text" value="250"
name="animPace">milliseconds
</form>
<br>
<br>
</body>
</html>

BSquared40 · #2 05-08-2007, 09:56 AM

Update:

After reviewing Chip Chapin’s (see start of my opening post) explanation, I made the following changes to my code:

1. From: <body>
To: <body onLoad="imageLoad()">

2. (2 lines below <body …>)
From: <img src="exampleA01-anim0.jpg" name="animImage"
To: <img src="anim0.jpg" name="animImage">

In short, the final section of code is now:

<body onLoad="imageLoad()">
<p>
<img src="anim0.jpg" name="animImage">
<form name="animForm">
<input type="button" value="Start" name="animButton"
onclick="buttonCheck()"><input type="text" value="250"
name="animPace">  milliseconds
</form>
<br>
<br>
</body>
</html>

Now, the initial image keeps flashing on and off, but no animation occurs.

Bill

gainover · #3 05-08-2007, 01:30 PM

I have read source code of your webpage and I found an error

error in this function

function imageLoad() {
for(var i = 0; i<5; i++) {
anims[i] = new Image();
anims[i].src = "exampleA01-anim" + i + ".jpg";
}
}

change anims[i].src = "exampleA01-anim" + i + ".jpg";

to anims[i].src = "anim" + i + ".jpg";

then the script will be run success I reckon

BSquared40 · #4 05-08-2007, 03:11 PM

Gainover,

Well, I reckon you're right! Thanks! Now it works great.

Bill

gainover · #5 05-08-2007, 03:38 PM

Aha

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)