A-N-I-M-A-T-I-O-N

BigLee · Joined: 23 Nov 2005 Posts: 352

I think I'm slowly turning in to a HTML geek...

I have a sequence of photos of a big avalanche. Rather than line them up side by side (rather boring) I wanted to make the four images to appear in sequence in a slideshow format with a couple of seconds between each photo.

Is this possible and how?

Parisa · Joined: 30 Jan 2007 Posts: 10

There are many ways to do this, most involving some type of client side scripting language. Don't know what that is or don't care to? No problem!

A simple example using javascript to maybe try out is here:
http://slayeroffice.com/code/imageCrossFade/xfade2.html

If you like the way that animation looks, do the following to edit it with your own images:

1. Go to View->Page Source in your browser and save the xfade2.html file somewhere so you can edit it.

2. In that file (xfade2.html), you will see the following line: <div id="imageContainer"... After that (and before the closing div tag) is where you can put links to all of the images you want to cycle through.

3. Everwhere you see "<img src="http://slayeroffice.com/code/imageCrossFade/ ... ", change the src file to point to a link to your own image(s). Also, get rid of any extra HTML from that source file that you don't want (ie. the text at the bottom, everything in <title> and <head>, etc.) and add your own stuff.

4. Upload the file you have been editing (xfade2.html) along with the other two files from that original link (xfade2_o.css and xfade2.js) to where you normally have your webpage. Everything should work from there.

If you have any problems, feel free to PM me. Hope that helps!

Parisa · Joined: 30 Jan 2007 Posts: 10

And if you want the image rotation to go slower or faster, find the setTimeout( ... ) functions inside of the xfade2.js file and increase (to make slower) or decrease (faster) the number (its set to 1000 if unchanged), which measures the time in milliseconds to wait between image flips.

BigLee · Joined: 23 Nov 2005 Posts: 352

Can anybody recommend a good (cheap) Gif editor?

MoapaPk · Joined: 13 May 2005 Posts: 4221

BigLee · Joined: 23 Nov 2005 Posts: 352

Animated gifs! Thanks

brown town · Joined: 26 May 2006 Posts: 55

If you're really going to get into website design and general image manipulation, you should definitely think about buying adobe photoshop. If you're a student you can find some awesome deals. Hands down the best program. Otherwise there are a bunch of options on this page: http://www.freedownloadscenter.com/Multimedia_and_Graphics/Animated_GIF_Editors/

Jeff Moore · Joined: 30 Mar 2003 Posts: 211

i have used this small free program a few times in the past and like it. you give it a series of stills and can choose a variety of output formats including animated gif. you also specify the frame rate. pretty simple interface. Magic Pic2Ani:
http://www.5cup.com/shareware/Multimedia___Design-Video-Magic_Pic2Ani-1.1.html

an example with about 15 pics:

an example with over 1000 pics:
http://youtube.com/watch?v=2HCHLBRhEhg

BigLee · Joined: 23 Nov 2005 Posts: 352

Nice one. Just what I was after.

MountaingirlBC · Joined: 09 Aug 2005 Posts: 929

I can help you with it if you like. Do you have Photoshop/Image Ready? That's what I used to do this:

Scott Wesemann · Joined: 09 Jun 2004 Posts: 529

MGBC- That is such a COOL pic! I love it.

MountaingirlBC · Joined: 09 Aug 2005 Posts: 929

Thx.... get someone to take some cool ones of you climbing and I'll make one for you Smile

Scott Wesemann · Joined: 09 Jun 2004 Posts: 529

swm88er · Joined: 19 Sep 2006 Posts: 38

I started an album of animated photos here on SP please add yours.

BigLee · Joined: 23 Nov 2005 Posts: 352

Ok, I've been a plonker! I own Photoshop but never knew I could make animated gifs with it. I should learn how to use the software I own!

http://www.summitpost.org/view_object.php?object_id=270740&confirm_post=7