Forums | MacLife
You are not logged in.
#1 2007-04-24 7:50 pm
- McAddict
- Member
- Registered: 2006-09-08
- Posts: 616
Animated PNGs
I've seen it used before, a large PNG, one image made up of multiple 'frames' and is cropped and timed to look like an animation. Apple uses it with the 'Burn' effect in iLife (the little spinning nuclear circle), and I've seen it used elsewhere.
A Google search didn't help, so does anyone know of where I can find an explanation/code for this effect? 
Offline
#2 2007-04-24 8:01 pm
Re: Animated PNGs
MNG is the standard for Multiple-image PNGs, but it's almost universally unsupported.
If you're looking to do this on a web page, you could probably make something work by programmatically changing the clip property of an image with JavaScript.
Offline
#3 2007-04-24 8:06 pm
- McAddict
- Member
- Registered: 2006-09-08
- Posts: 616
Re: Animated PNGs
I'll take a look at that. The link is what I was talking about, not an actual animated image, but clippings of an image. Thanks.
Offline
#4 2007-04-24 8:07 pm
- registered_user
- bulletproof
- From: padding: zero-pixels;
- Registered: 2000-12-19
- Posts: 16020
- Website
Re: Animated PNGs
javascript can do it. I used to do it on an older site.
I used javascript to insert 5 divs into the DOM. Each div was one frame of the animation. Then I had a function that would make one visible, and the rest hidden. Lastly the function sets a time out and calls itself again after 150ms or so.
You might be able to get away with just changing an img element's src attribute though.
Offline
#6 2007-04-25 1:01 pm
Re: Animated PNGs
I'm gonna wait and see if that last post gets edited or not.
So, just when did this place get Private Messages? YIKES!
Gippy Pages | Fuzzy Coconut XHTML Widget | PuppyCam
Offline
#8 2007-04-25 3:33 pm
Re: Animated PNGs
The vultures circle...
Basseq is me, John Whittet.
(Finishing the remainder of the thought expressed in the post has been left as an exercise for the reader.)
Offline
#9 2007-04-25 5:44 pm
- Light Speed
- Doubter of Einstein
- Registered: 2002-08-17
- Posts: 3693
Re: Animated PNGs
G4z wrote:
don't let javascript do it..
use animated JPEG's like the PNG but JPEG, can be made in imageready very easily.
SWEET 
Offline
#10 2007-04-25 7:06 pm
- registered_user
- bulletproof
- From: padding: zero-pixels;
- Registered: 2000-12-19
- Posts: 16020
- Website
Re: Animated PNGs
I would like a tutorial on animating jpegs. Especially the very easy way in Image Ready.
Last edited by registered_user (2007-04-25 7:06 pm)
Offline
#11 2007-04-25 11:44 pm
- Nicholas D. Wolfwood
- Member
- Registered: 2007-04-20
- Posts: 355
Re: Animated PNGs
this is also relevant to my interests
:: wanking max ::
If you go to the bathroom during Phydeaux's 30,000th post, you'll be sorry.
Offline
#13 2007-04-26 7:32 am
- registered_user
- bulletproof
- From: padding: zero-pixels;
- Registered: 2000-12-19
- Posts: 16020
- Website
Re: Animated PNGs
I am especially intrigued in learning how to animate jpegs from an accessibility expert. If you'd help out with a tutorial, I'd greatly appreciate it.
Offline
#14 2007-04-26 8:35 am
Re: Animated PNGs
:snicker:
So, just when did this place get Private Messages? YIKES!
Gippy Pages | Fuzzy Coconut XHTML Widget | PuppyCam
Offline
#15 2007-04-26 11:46 am
- TonyPrevite
- Slobbering Jester
- Royal Wombat
- From: Glendale, AZ
- Registered: 2002-04-14
- Posts: 3606
- Website
Re: Animated PNGs
G4z wrote:
i'm an accesibilty expert
And an expert in spelling and grammer too! And if you haven't figured it out yet... you can't animate a jpeg natively 
Offline
#16 2007-04-26 11:49 am
Re: Animated PNGs
But you can with JavaScript!
So, just when did this place get Private Messages? YIKES!
Gippy Pages | Fuzzy Coconut XHTML Widget | PuppyCam
Offline
#17 2007-04-26 11:53 am
- TonyPrevite
- Slobbering Jester
- Royal Wombat
- From: Glendale, AZ
- Registered: 2002-04-14
- Posts: 3606
- Website
Re: Animated PNGs
And around and around we go...
Offline
#18 2007-04-26 12:21 pm
Re: Animated PNGs
G4z wrote:
Gipetto wrote:
I'm gonna wait and see if that last post gets edited or not.
you guys love javascript to much, i'm an accesibilty expert, and it's something i use sparingly.
"Sparingly" is also technical speak in crazy-land for "I have never done this at all". I know. I invented the dialect.
Spirit was crushed; now is fading, But I want to help make things right.
Because I can see and I can feel, and you can see and you can feel
So why don't we both either stand up and fight
Or at least together we'll call it a night.
Offline
#19 2007-04-26 2:30 pm
Re: Animated PNGs
Phydeaux wrote:
G4z wrote:
Gipetto wrote:
I'm gonna wait and see if that last post gets edited or not.
you guys love javascript to much, i'm an accesibilty expert, and it's something i use sparingly.
"Sparingly" is also technical speak in crazy-land for "I have never done this at all". I know. I invented the dialect.
I believe that Unobtrusive is the word du jour for Javascript. So long as the site works without it, use it as much as it fits.
So, just when did this place get Private Messages? YIKES!
Gippy Pages | Fuzzy Coconut XHTML Widget | PuppyCam
Offline
#20 2007-04-27 11:45 pm
Re: Animated PNGs
G4z wrote:
Gipetto wrote:
I'm gonna wait and see if that last post gets edited or not.
you guys love javascript to much, i'm an accesibilty expert, and it's something i use sparingly.
Expert, eh? Your title also says you are a web applications developer. Hmmm...
At any rate, since you seem to missing the point, the comments are because your post makes no sense. As said, you cannot animate jpgs natively.
Furthermore, as an accessibility "expert" you undoubtedly know that accessibility is much more than just avoiding js or passing validation. Using js for animated graphics is perfectly acceptable in that context.
Offline
#21 2008-02-21 6:14 am
- Bockit
- Member
- Registered: 2008-02-21
- Posts: 1
Re: Animated PNGs
Hi,
I know I'm bumping a very old thread but I found this in google when I was searching for ways to animate .jpg files.
See, I frequent a site called Zazz, it's an aussie version(read: ripoff, though I can't complain) of www.woot.com and I noticed today they had an animated jpg.
http://www.zazz.com.au/images/products/ … e11705.jpg
I couldn't help but notice the way the other dude was ridiculed for suggesting this was possible, and am I right in saying this isn't using any javascript?
Anyway regardless of if it's native or not, I thought it was pertinent enough to give this a bump, maybe someone can explain it to me.
EDIT: NVM someone finally explained to me that it's actually a gif, renamed as a jpg. Sorry to bother you all!
Last edited by Bockit (2008-02-21 6:48 am)
Offline
#22 2008-02-23 3:41 pm
Offline
#23 2008-02-23 5:54 pm
Offline
