JavaScript Buttons to Control an Animated GIF? 3

[flasher40]

Hi,
I have a sequence of photographs depicting an object making one complete revolution. My plan is to convert it into a .gif animation to show on my website.

One option would be to have the object simply continue to rotate with no user interaction.

But I was wondering: Is it possible to have JavaScript buttons that control the sequence of frames in a .gif animation left and right? In other words, you press the left-hand button to (in my case) rotate the object to the left as long as you want (past 360 degrees if you wish), and you press the right-hand button to go the other direction.

I originally created the effect with Flash, but if possible I'd like to have a non-Flash version too, for those who don't have the Flash plugin. To get a better idea of the effect I'm looking for, you can view the Flash .swf version at:

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

If it is possible to use JavaScript buttons to control a .gif animation, any help with the code and process would be greatly appreciated.

Thanks!
Bill

 

[kaht]

If it is possible to use JavaScript buttons to control a .gif animation

It's not, animated gifs are static objects - they perform like they're programmed to, and that can't be changed.

Now.... you could pull all the frames of the animation in and store them in javascript image objects and use the setInterval or setTimeout functions to control the changes. But, that would require you to take the animated gif into ImageReady or another similar program and save each frame as it's own individual image - javascript won't break it down for you.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[1DMF]

you could use a variable to hold the starting index and then an array holding each frames image name, then onmouse over / onclick you can loop through the array displaying each frame in turn.

You cannot AFAIK control a gif directly.

So for a non-flash version you would need to store each frame/picture individually and use JS to update the src of an image on the page.

not possibly what you wanted, but it would do the job!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[flasher40]

Thanks,

I was afraid it wouldn't be easy. I don't have the JavaScript know-how to do what you suggested, 1DMF. Have you ever seen the code/tutorial for doing that posted anywhere? If not, I'll probably have to settle for having the object revolve, and revolve, and....

Regards,
Bill

 

[kaht]

Well... I'm not 1DMF, but I did whip this up after lunch.

http://www.silkypups.com/examples/clock/clock.html

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[flasher40]

Very cool, Kaht. I copied and pasted your code into my editor. Thanks! I assume all I need to do is substitute my animated gif for your clock gif file.

Is there any way to build on this code so that the user can pause the animation? Based on your comment, "they perform like they're programmed to, and that can't be changed," I assume not.

Bill

 

[flasher40]

kaht,

I tried to adapt your code to my situation but ran into problems because of my limited programming abilities.

So that I can see how the code works, could you tell me what changes would be needed if the animated gif file were named myAnimation, and the number of frames = 34?

Bill

 

[kaht]

Flasher, I didn't use an animated gif in my example. I did what I described above - saved each frame as it's own static image (non-animated). During each iteration determined by the window.setInterval function, the src of the <img> is changed to reflect the next image. Once it hits 12, it goes back to 1. (or if you've go it going backwards it goes to 12 once it hits 1)

So, to answer your question above, yes the animation can be paused, you just have to cancel the setInterval.

I don't know what else to say to help, the example I posted should have been enough to get you on the right track.....

If you're still having problems you can click some of the links in the posters' signatures in this forum to find out how to contact them if you're interested in hiring someone to help. (take note that all contracted help must be dealt with outside the forum)

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[flasher40]

Thanks, kaht. Actually, I have all the original images, so I don't need to use ImageReady, as you had suggested. I just need to learn how the pieces fit together.

I'll work with what you have provided and see how it goes. I'm sure I'll learn a lot in the process.

Regards
Bill

 

[flasher40]

Kaht, Just three other little questions:

What name did you give the gif files? Was it clockImg1,clockImg2, etc.? Or something else. Knowing that will help me figure out the process.

I assume all the images are located in the same folder as the html page, correct?

Finally, could the same process be used with .jpg files?

Bill

 

[kaht]

<img src="./clockImg/12.gif" alt="I'm a clock" id="clock" />

After looking at my source code you should have been able to see this line, that shows you the path and name of the original image. It's pretty easy to figure the rest out from there.

As far as jpg files, I used gifs because jpgs don't support any form of transparency. But yes, you could do the same thing with jpgs.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

 

[flasher40]

Yes, I see now. Thanks for your patience.

Bill

 

[1DMF]

patience of a saint has our kaht

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

meow

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]