Preserved Topic: JavaScript Animation (Page 1 of 1)

OK, I've been tying to tackle this by myself, but I think it's time to admit defeat.

I'm trying to animate a series of JPGs. I was able to run them through once using setTimeout, but of course I couldn't get them to repeat.

What I need is to be able to set different times for each frame (the slideshow scripts I've found set a single time for all frames) and it would be nice to be able to add a start/stop button in case a user finds it annoying.

Anyone able to help?

why not run a loop? a loop that exits when startButton=1 or stopButton=1 ?

or make them into a function and run THAT in the loop... or whenever you feel like it, really....

-helped?



tskull@techie.com">

one *really* easy way to do it is just to put the setTimeout lines all in a function, and then add the last line to call the function.

Actually, it's not too hard to repeat it using setTimeout(). (You can also try setInterval(), which constantly does the same thing over and over.) BUT... can you give us a link to the page you've done so far? That'll make it easier for us to help.

ya, what he said...



tskull@techie.com">

I, like Slime and the others don't quite know what you mean, but I guess you mean something like this...


var id, index =0;

picNames = new Array ('one.jpg','two.jpg','three.jpg','four.jpg');
displayTime = new Array (200,500,800,300);


function flashPictures()
{
clearTimeout(id);
if (++index >= 4)
index=0;

document.mypic.src = picNames[index];
id = setTimeout("flashPictures()",displayTime[index]);
}

You'll need to define your own times of course!
Then in the HTML section, you simply need a method to start and stop the call to this function:


<IMG src="one.jpg" name="mypic" border=0>
<INPUT name='start' value='Start Animation' type=submit onClick="javascript:flashPictures();">
<INPUT name='stop' value='Stop Animation' type=submit onClick="javascript:clearTimeout(id);">

Be sure to preload the images though!

As Slime said, it's a bit dificult to understand what you mean without an example. But (without intention of offending him), whatever you do don't try Petskull's idea of just using the loop, unless you want the images to change every 1ms or something daft like that!

osh

Ouch! I think I'm insulted.... I assumed he had some sort of timing device built in. He said somethng about setTimeout(). Would it still be a bad idea?

It's no secret I'm a newbie... if it's still a bad idea... why?

oh, yeah, and osh... you're a poopoo head, so there.



tskull@techie.com">

Hey Petskull,

I said that I didn't intend any offence, and I'm sorry if you took any! I know you're a beginner, so I thought that I'd point out your mistake, so that you can learn from it! (That's the whole point of this forum isn't it?!)

setTimeout() works independently of loops. You see, a new loop in JavaScrpt (as with all programing languages of which I am aware), starts executing as soon as the last loop has stopped. And since our loops are going to execute on a computer which can execute several million instructions a second, then the picture which we want to change will also be updated several million times a second, (assuming you can update a picture in a single instruction). This is not what we want!

What setTimeout('funcname', x) does is to schedule the execution of a new function for x milliseconds in the future. If the call to setTimeout() is made within the function 'funcname', then it is in effect being used as a loop.

So while 'setTimeout()' can be put to effect as a loop with an adjustable delay, it is in fact no such thing.

And that is why you should not use a loop in JavaScript to update images!

Hope that makes things clearer!

osh

Oh! And please don't call me a poopoohead! It's what my girlfriend calls me, and it drives me up the wall! :-)

ok, Senor Poopoo Head,

I'm still confused... didn't you use setTimeout() in the little sniblet of code that you said would help?



tskull@techie.com">

Sorry, guys, didn't think an example would be necessary. (Besides, since I couldn't get it to work, there was really no example to show.) What I'm wanting to do is basically a Javascript-controlled animated GIF. (But with JPGs, that's why is has to be JS-controlled.)

Let me play with what you've suggested so far...thanks again!

I've got some scripts I use to do this sort of thing. I never had a need to apply a different delay for each image but I could probably get that working without too much problem.

Check out this page and see if it is what you are talking about. If it is then let me know and maybe I can scoop up the code to make it a little more readable.
http://bugimus.com/art/vertipression/vertipressions.html