Welcome to SP!  -   
 
 MbPost.com -- It's SP for Mountain Biking!
Areas & Ranges·Mountains & Rocks·Routes·Images·Articles·Trip Reports·Gear·Other·People·Plans & Partners·What's New·Forum

 Forums Home > Page Help > Thread

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

[ Start New Topic | Reply to This Topic ] All times are GMT  Pages: 1, 2  
 Author Topic: A-N-I-M-A-T-I-O-N
BigLee


Joined: 23 Nov 2005
Posts: 352


[ Profile | PM ]
PostPosted: Sat Feb 03, 2007 7:49 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Sat Feb 03, 2007 8:09 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Sat Feb 03, 2007 8:27 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Sat Feb 10, 2007 12:44 pm GMT  Quote
 
Can anybody recommend a good (cheap) Gif editor?
MoapaPk


Joined: 13 May 2005
Posts: 4221


[ Profile | PM ]
PostPosted: Sat Feb 10, 2007 2:48 pm GMT  Quote
 
BigLee wrote:
Can anybody recommend a good (cheap) Gif editor?


Do you mean "one that will do animated gifs" or "one that will edit gif still images"?

The latter can be done by many many packages, including the lowly windows paint.

Consider animated pngs (Mng extension) instead. A company must pay a royalty to make an application that will produce gifs. The user doesn't need to pay that royalty, but the royalty discourages freeware.
BigLee


Joined: 23 Nov 2005
Posts: 352


[ Profile | PM ]
PostPosted: Sat Feb 10, 2007 2:53 pm GMT  Quote
 
Animated gifs! Thanks
brown town


Joined: 26 May 2006
Posts: 55


[ Profile | PM ]
PostPosted: Sat Feb 10, 2007 7:54 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Sat Feb 10, 2007 8:35 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Tue Feb 13, 2007 4:44 pm GMT  Quote
 
Nice one. Just what I was after.
MountaingirlBC


Joined: 09 Aug 2005
Posts: 929


[ Profile | PM ]
PostPosted: Tue Feb 13, 2007 4:52 pm GMT  Quote
 
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


[ Profile | PM ]
PostPosted: Tue Feb 13, 2007 8:18 pm GMT  Quote
 
MGBC- That is such a COOL pic! I love it.
MountaingirlBC


Joined: 09 Aug 2005
Posts: 929


[ Profile | PM ]
PostPosted: Tue Feb 13, 2007 10:43 pm GMT  Quote
 
Thx.... get someone to take some cool ones of you climbing and I'll make one for you Smile

climb14ers wrote:
MGBC- That is such a COOL pic! I love it.
Scott Wesemann


Joined: 09 Jun 2004
Posts: 529


[ Profile | PM ]
PostPosted: Wed Feb 14, 2007 4:43 pm GMT  Quote
 
MountaingirlBC wrote:
Thx.... get someone to take some cool ones of you climbing and I'll make one for you Smile

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


You're too nice! I may take you up on it. Smile
swm88er


Joined: 19 Sep 2006
Posts: 38


[ Profile | PM ]
PostPosted: Wed Feb 14, 2007 6:57 pm GMT  Quote
 
I started an album of animated photos here on SP please add yours.
BigLee


Joined: 23 Nov 2005
Posts: 352


[ Profile | PM ]
PostPosted: Sun Feb 18, 2007 11:40 am GMT  Quote
 
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
Display posts from previous:   
[ Start New Topic | Reply to This Topic ] Pages: 1, 2  


 
Jump to:  




© 2006 SummitPost.org. All Rights Reserved.