What should I use to animate images on a website?

Community Forums/General Help/What should I use to animate images on a website?

WERDNA

(Posted 2011) [#1]

Due to the fact that the days of Flash are numbered, what should I be using
to animate images on a website? Simple .Gifs, or something a little more
advanced?

Also what should I use to move the images around? I'm doing one for a client
right now where I have to move a cartoon train around the border of the
webpage and I'm guessing that's going to be a bit tricky to achieve while
still making it look decent and fit on different resolutions :)

Cheers,

Jose Ruiz

therevills

(Posted 2011) [#2]

Javascript?

Grey Alien

(Posted 2011) [#3]

How about nothing because it's 2011 and we don't do animated GIFs any more on web pages ;-p

Foppy

(Posted 2011) [#4]

I have to agree with Grey Alien that adding animated images to a website just because it looks nice is a bit 1998. Like those "under construction" images, and the "blink" tag.

But if you still want to add animations, then animated gif seems like a good choice. I think that Flash is far from dead, but I wouldn't use it on a website just for an animated image.

I have this on my website, an animated gif made out of images from one of my games:

:)

Last edited 2011

Warpy

(Posted 2011) [#5]

teehee! Floppy dog!

therevills

(Posted 2011) [#6]

When I said Javascript I was answering moving the image around the screen ;) :

http://www.therevillsgames.com/javascript/dog/index.html

(Hope you don't mind Foppy that I have used Noah)

<html>
	<head>
		<title>Test</title>

		<script language="javascript">
			var x = 5;
			var y = 5; 
			var index = 0;
			var maxIndex = 3;
			var dest_x=new Array(0,400,400,0);
			var dest_y=new Array(0,0,400,400);
			var step = 10; 

			function moveImage() {
				if(x<dest_x[index]) x = x + step; 
				if(x>dest_x[index]) x = x - step; 
				
				if(y<dest_y[index]) y = y + step; 
				if(y>dest_y[index]) y = y - step; 
				
				document.getElementById("noah").style.top  = y+'px';
				document.getElementById("noah").style.left = x+'px';

				if (!overLap(x, y, x+step, y+step, dest_x[index], dest_y[index], dest_x[index]+50, dest_y[index]+50)) {
					window.setTimeout('moveImage()',50);
				} else {
					index = index + 1;
					if (index > maxIndex) index = 0;
					window.setTimeout('moveImage()',50);
				}
			}

			function overLap (x0, y0, x1, y1, x2, y2, x3, y3) {
				if (x0 > x3 || x1 < x2) return false;
				if (y0 > y3 || y1 < y2) return false;
				return true;
			}


		</script>

	</head>
	<body onload="moveImage()">
		<h1>TEST</h1>

		<div id="noah" style="position:absolute;" >
			<img src="noah.gif" />
		</div>

	</body>
</html>

Foppy

(Posted 2011) [#7]

Not at all, I will try that code myself when I get home! Maybe a nice addition to my homepage. :)

The real Noah approves:

Last edited 2011

Canardian

(Posted 2011) [#8]

Since IE9 does not support WebGL, you can use HTML5 canvas only, then something like this works in every browser, and it's only a few lines of code using three.js engine:
http://mrdoob.github.com/three.js/

Then you can also add a physics engine to three.js (to get automatic animations) and can choose if you want to render it with IE9, or WebGL browsers:
http://brokstuk.com/jiglibjs2/

Tried it with a Web Browser (NineSky) on my Android phone too, and the HTML5 canvas works with amazing speed, even with shadows.

Last edited 2011

Kryzon

(Posted 2011) [#9]

Three.JS, most impressive. I can imagine a 3D navigation for a website, kinda like the one the old Metroid website had.

Now it's back to 2D, but it's still an awesome and smooth interface as well: http://www.metroid.com

Paul "Taiphoz"

(Posted 2011) [#10]

Yeah I think you could come up with some really amazing stuff now with html 5 , will just boild down to support, but as it becomes standard and well established I expect big things from it.

DrDeath

(Posted 2011) [#11]

Yeah, animated gifs. They never get old...

D4NM4N

(Posted 2011) [#12]

Html5 be your best avenue for a variety of reasons. But i agree with above DONT ANIMATE! its annoying

WERDNA

(Posted 2011) [#13]

Three.Js sounds intriguing, along with Html5age.

I know that animated images can be annoying, and especially flashing ones, but
that's what the client asked for.

I'll see if I can come up with an alternative, but just in case, I at least want
to know how to manage this.

Cheers,

Jose Ruiz

Captain Wicker (crazy hillbilly)

(Posted 2011) [#14]

Werdna,
Are you actually coding a site yourself? You may consider a site builder instead of coding in html, etc..

Check my response in your previous post to find a good solution to your questions. :) Webs.com offer security services that may block certain IP addresses from your site for you. Hope this helps out. :)

Adam Novagen

(Posted 2011) [#15]

... the days of Flash are numbered, what should I be using
to animate images on a website? Simple .Gifs...

Sorry mate, but I couldn't help having a bit of a well-meant laugh at this, considering that .GIFs predate Flash by about seven years.

That being said, my two cents is pretty much in with the majority of other voices here, with the added codicil that GIF animations are fine and dandy for animated imagery as an art, even if they are a ridiculously archaic standard. Other than that, Flash certainly isn't on borrowed time yet, HTML5 is definitely the way to go if you're looking for forward compatibility, and why on earth do you want to annoy everybody with animated imagery on your website anyway. XD

I honestly have nothing against the odd subtle, well-placed animation, but I neither think them beneficial nor necessary, much like the text "smilies" that I used to use constantly in my posts, and now try to keep to a minimum.

xlsior

(Posted 2011) [#16]

Other than that, Flash certainly isn't on borrowed time yet

Actually, that is exactly what it is: a week or two ago Adobe announced that they will not create any Flash runtimes for Android after the 4.0 Icecream Sandwich release:
http://www.wired.com/gadgetlab/2011/11/adobe-kills-mobile-flash/

Given the importance of mobile devices on the web these days (tablet and smartphone sales are rapidly increasing, at the cost of PC sales), dropping Flash support on the android platform combined with it already not existing on the iPad platform, it's pretty much a deathblow to flash as a technology. "living on borrowed time" is pretty much the definition of Adobe flash at this point.

On top of that, they will also abandon Flash for embedded browsers: http://mashable.com/2011/11/10/adobe-abandon-flash-tvs/

In place of Flash, Adobe will be jumping on the HTML5 bandwagon now.

DrDeath

(Posted 2011) [#17]

Actually, that is exactly what it is: a week or two ago Adobe announced that they will not create any Flash runtimes for Android after the 4.0 Icecream Sandwich release: ...

You got that slightly wrong. Adobe will kill the Flash plugin for mobile devices, but continues to back Flash as technology itself. Keep in mind that they still strongly promote (and announced to continue to do so) Adobe AIR - also on mobile platforms! - , which is (somewhat simplified) basically a standalone Flash wrapper. Flash keeps being a tool to built AIR applications.

Secondly, Adobe has already released tools for the conversion of Flash to HTML5, so they are (at least) trying to establish Flash as means to create HTML5 content.

Winni

(Posted 2011) [#18]

On the Mac, Tumult Hype is a nice editor for HTML5 animations - it looks and works a lot like Flash, but creates HTML5 code instead.

You can also try the Adobe Edge public beta, which should be available for Windows as well.

GIFs are a total no-go in this time and age. They're limited to 256 colors and a relict of the old Compuserve days when there was no public Internet...

Of course, nobody is keeping you from creating the entire website with everything on and in it in.... monkey! :-)

Last edited 2011

simonh

(Posted 2011) [#19]

Werdna, for the 10,000th time, please post these sort of topics in General Help.

WERDNA

(Posted 2011) [#20]

lol, I'm sorry simon. I know I should, but I always get so many more responses
when I post in General Discussion.

I'll really try to post in General Help from now on.

Captain Wicker (crazy hillbilly)

(Posted 2011) [#21]

but I always get so many more responses
when I post in General Discussion.

I feel your pain WERDNA. :( Don't feel bad Werdna I've posted in there when I shouldn't had too! Maybe not 10,000+ times but I have made mistakes. :)