13 Replies - 1079 Views - Last Post: 28 January 2010 - 02:26 AM

#1 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Animation

Post icon  Posted 05 January 2010 - 10:34 AM

I'm trying to make a Javascript application that animates a ball bouncing up and down. I have five image files (ball1.jpg, ball2.jpg, etc located in the same folder as my html file. Here is my code:
<html>
	 <head>
		  <title>Homework25.7</title>
		  <script janguage="javascript">
				frame = 0;
				function prepareAnimation(n) {
					 totalFrames = n;
					 myImageArray = new Array(n);
					 imagenames = new Array("ball1", "ball2", "ball3", "ball4", "ball5");
					 for (i = 0; i < n; i++) {
						  myImageArray[i] = new Image();
						  myImageArray[i].src = imagenames[i] + ".jpg";
					 }
				 }
				 function animate() {
					 for (i = 1; i < totalFrames; i++) {
						  document.getElementById(frame).style.visibility = "hidden";
					 }
					 frame = (frame + 1) % totalFrames;
					 document.getElementById(frame).style.visibility = "visible";
					 timeoutID = setTimeout("animate()", 500);
				}
		   </script>
	  </head>
	  <body>
			<h2 align="center">Homework 25.7</h2>
			<div id="0" class="page" style="position:absolute; left:20px; top:50px; width:105px; height:185px; visibility:visible;">
				  <img src="ball1.jpg" />
			</div>
<div id="1" class="page" style="position:absolute; left:20px; top:50px; width:105px; height:185px; visibility:hidden;">
				  <img src="ball2.jpg" />
			</div>
<div id="2" class="page" style="position:absolute; left:20px; top:50px; width:105px; height:185px; visibility:hidden;">
				  <img src="ball3.jpg" />
			</div>
<div id="3" class="page" style="position:absolute; left:20px; top:50px; width:105px; height:185px; visibility:hidden;">
				  <img src="ball4.jpg" />
			</div>
<div id="4" class="page" style="position:absolute; left:20px; top:50px; width:105px; height:185px; visibility:hidden;">
				  <img src="ball5.jpg" />
			</div>
<div id="button" class="page" style="position:absolute; left:20px; top:190px; width:105px; height:20px; visibility:visible;">
				  <form>
					   <input type="button" value="Start Animation" onclick="prepareAnimation(5);animate();" />
				  </form>
			</div>
	 </body>
</html>



My code also has all of the text which makes it xhtml in the beginning which I didn't type out. When I open the html file in Chrome, I see the first picture and the Start Animation button but when I click the button nothing happens. Any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: Animation

#2 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Animation

Posted 05 January 2010 - 11:29 AM

Just out of curiosity, do you have to do it using 5 images and all that stuff? Why not just use one image and change the position of it?
Was This Post Helpful? 0
  • +
  • -

#3 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 05 January 2010 - 04:54 PM

I guess having one image and changing the position of it would work. The reason I did it this way is because that's how an example in the book I'm learning out of did it.

This post has been edited by 333OnlyHalfEvil: 05 January 2010 - 04:54 PM

Was This Post Helpful? 0
  • +
  • -

#4 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Animation

Posted 05 January 2010 - 06:00 PM

Ah I see. It is a different way of doing it, but I personally would just use one image. Code would be easier and it would look a lot more fluid. :)
Was This Post Helpful? 0
  • +
  • -

#5 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Animation

Posted 05 January 2010 - 07:27 PM

In the function animate, I don't think the variable totalFrames is defined.
Was This Post Helpful? 0
  • +
  • -

#6 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Animation

Posted 05 January 2010 - 09:59 PM

Also if you put an alert after:

frame = (frame + 1) % totalFrames;
[icode]alert(frame);[/icode]



You can check the values to make sure everything is correct, I ran it earlier like this and one of the value returned NaN, although I'm not sure if I had modified the code before I did that.
Was This Post Helpful? 0
  • +
  • -

#7 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 06 January 2010 - 05:21 PM

View Postforest51690, on 5 Jan, 2010 - 06:27 PM, said:

In the function animate, I don't think the variable totalFrames is defined.


Ya, i thought that part was kind of weird too. That same thing was done in an example in the book, the author says that declaring that variable there makes it a global variable that the other method (animate()) can use. I tried taking this out and replacing totalFrames with a 5 and it still didn't work.

View PostMoshambi, on 5 Jan, 2010 - 08:59 PM, said:

Also if you put an alert after:

frame = (frame + 1) % totalFrames;
[icode]alert(frame);[/icode]



You can check the values to make sure everything is correct, I ran it earlier like this and one of the value returned NaN, although I'm not sure if I had modified the code before I did that.


hmm, I think you're on to something. I tried putting alert(frame) functions at various points in the code and none of them run! So I guess the problem is lying with the actual functions? The eventhandler onclick seems to be set up correctly, I can't figure out what's wrong. How did you modify the code so you got it to display NaN?

This post has been edited by 333OnlyHalfEvil: 06 January 2010 - 05:22 PM

Was This Post Helpful? 0
  • +
  • -

#8 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Animation

Posted 07 January 2010 - 08:18 AM

Quote

How did you modify the code so you got it to display NaN?


Did none of yours come up as NaN?

I cannot remember what I did but it may be because I was skipping the first function and just running animate(); .... ? I'll have to look and see if I still have the modified code here somewhere.
Was This Post Helpful? 0
  • +
  • -

#9 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 07 January 2010 - 01:38 PM

The alert function isn't even running to display anything, let alone NaN. I can't figure out what the problem is.
Was This Post Helpful? 0
  • +
  • -

#10 Moshambi  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Animation

Posted 07 January 2010 - 04:38 PM

Are you using FF by chance, and do you have the web developer toolbar. Basically I am wondering if there is an error console you can look at and show me the error, that way I might be able to figure something more out for you.
Was This Post Helpful? 1
  • +
  • -

#11 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 26 January 2010 - 01:25 AM

What's FF? I'm using Dreamweaver.....

I have to say that I think something is wrong with the onclick event handler. When I change onclick="prepareAnimation(5);animate();" to onclick="alert("hi")", the alert box never pops up.

This post has been edited by 333OnlyHalfEvil: 26 January 2010 - 01:33 AM

Was This Post Helpful? 0
  • +
  • -

#12 John S  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 27-January 10

Re: Animation

Posted 27 January 2010 - 06:35 AM

Language is spelled wrong in the line
		  <script janguage="javascript">

Don't know if that will make a difference.
Was This Post Helpful? 0
  • +
  • -

#13 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 27 January 2010 - 05:21 PM

View PostJohn S, on 27 Jan, 2010 - 05:35 AM, said:

Language is spelled wrong in the line
		  <script janguage="javascript">

Don't know if that will make a difference.


Good eye. But no, that isn't the problem. It's spelled right in my code file. I made this post from my phone while on a car ride so I couldn't copy/paste the code :/
Was This Post Helpful? 0
  • +
  • -

#14 333OnlyHalfEvil  Icon User is offline

  • D.I.C Addict

Reputation: 24
  • View blog
  • Posts: 664
  • Joined: 20-March 09

Re: Animation

Posted 28 January 2010 - 02:26 AM

Well, I ended up downloading the source code for the example problem in the book that I was trying to mimic and changed that around a little so it animated a bouncing ball rather than random images. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Homework 25.7</title>
		<script language="javascript">
			frame=0;
			timeoutID = null;
			function prepareAnimation(n) {  //build array of Image objects
				totalFrames = n; //to make n available globally 
				myImageArray=new Array(n);
				imagenames=new Array("ball1",  "ball2", "ball3", "ball4");
				for (i=0;i<n;i++){
					myImageArray[i]=new Image();
					myImageArray[i].src = imagenames[i] + ".jpg";
				}//for loop
			}
			function animate() {
				for (i=1;i<totalFrames;i++){
					document.getElementById(frame).style.visibility = "hidden";
				}
				frame =(frame+1)%totalFrames;
				document.getElementById(frame).style.visibility = "visible";
				timeoutID = setTimeout("animate()", 500);
			}
		</script>
	</head>
	<body>
		<h2 align="center">Homework 25.7</h2>
		<div id="0" class="page" style="position:absolute; left:20px; top:50px;  width:50; height:50; visibility:visible;">
			<img src="ball1.jpg">
		</div>
		<div id="form" class="page" style="position:absolute; left:20px; top:150px; visibility:visible;">
			<form>
				<input type="button" value="Start Animation" onclick="if(timeoutID==null){prepareAnimation(4);animate()}"/><br />
				<input type="button" value="Stop Animation" onclick="if(timeoutID)clearTimeout(timeoutID);timeoutID=null" />
			</form>
		</div>
		<div id="1" class="page" style="position:absolute; left:20px; top:50px;  width:50; height:50; visibility:hidden;">
			<img src="ball2.jpg">
		</div>
		<div id="2" class="page" style="position:absolute; left:20px; top:50px;  width:50; height:50; visibility:hidden;">
			<img src="ball3.jpg">
		</div>
		<div id="3" class="page" style="position:absolute; left:20px; top:50px;  width:50; height:50; visibility:hidden;">
			<img src="ball4.jpg">
		</div>
	</body>
</html>


If anyone can figure out why this code works and my other one didn't, I'll be appreciative.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1