New animated picture format

If you don't have Firefox 3 or Opera 9.5, some of the pictures here won't be animated.

Firefox has incorporated animated PNG files into it's latest release, which gives you a 24-bit color palette and 256 levels of transparency.

There's a small, but nifty example on the right side of this page:
http://en.wikipedia.org/wiki/Animated_PNG

This is still very bleeding edge stuff. I hope that IE will adopt it, which will open the floodgates for this file format. I would like to see an improvement over the 256-color GIF format we've been limited to all this time.


Here's my latest sig. After my work on the DC logo, I wanted a new sig to go with it. Here it is in GIF format.



Actually, this looks fairly good. My first GIF attempt was beset with dithering issues due to an improper Photoshop 'save to web' setting. If I had fixed the dithering issue first, I wouldn't have done all the PNG stuff. Still, just because this project wasn't the best reason to attempt this, others will benefit from the new format.



The above image will be animated in Firefox 3 or Opera 9.5. It will display as a static picture in all versions of Internet Explorer.

Unlike the GIF, the PNG is exactly as I created it! I could get used to that. Unfortunately, it's also ~3 times the size of the GIF.

One of the first problems I've encountered is a need to find a host for the animated PNGs. Photobucket, my usual host for pics, saves the first frame and discards the rest - I can tell this, because the size of the image there is exactly the size of the first layer, and the all other layers are much smaller in size. I'm pretty disappointed Photobucket alters my pics. If they just left my picture alone, it would work fine. So I've got to figure out how to host them. Anyone have any suggestions? I've relied exclusively on Photobucket for all my picture hosting needs up 'til now.

The other problem is IRfanview, my picture viewing utility. It doesn't display the animation, just a static picture. I figure they'll take care of that soon, now that FF3 handles it, but for now, I have to view them in Firefox 3 if I want to see the animation.

There is a shortage of animated PNG development tools as well. I had to create each layer in Photoshop, then save it and use another utility to assemble them. The utility doesn't have the features of ImageReady, so the assembled size of the animated PNG was the size of every picture I saved(about 1.5 megs). It didn't save just the changed areas of the image, it saved every part of every frame. I went back to Photoshop, saved the first image, and saved successive frames after erasing everything that didn't change from the first pic (the planet, the text, some of the star background). I look forward to a release of ImageReady that supports this format, as it will be easier to manipulate the layers in the PSD file as I create the animation.

That's it for now. Oh wait, here are a couple of animated PSD tools.

http://animatedpng.com/index.php/apngedit/

I used GIF Movie Gear to assemble the picture above. Available here:
http://www.gamani.com/


EDIT:
I found a file host that doesn't alter the images I upload:
http://flickcabin.com/

It doesn't have a nifty photo album like, say, Photobucket. No passwords or accounts, either. Just upload the image, and it gives you a direct link and some BBcode. I will also be using Flickcabin in the future for the AWESOME PICTURES thread, to save on using board resources to store the image.

Lexx's bandwidth isn't going to be a problem here, its my lack of interest for ff 3.

Remember, the only reason I even switched from avant to ff was sarges' post about tab mix plus. When I get used to something, I rarely ever change... guess its my kneejerk disposition 🙂


... and I still see little difference between full blownout pngs vs most gifs. When I save a gif, I use the full pallette and check the compatibly first. The animated gif you showed me earlier was 'awesome', too bad your depriving anyone that prefer's Ex6/7 or FF2 to see them ;p

Doc, that is really cool.

But I have a twist to throw in the mix. I am still on FF2. A few plugins I need for web dev stuff haven't been updated for 3 yet, so I'm holding off. So, I can't see the animated sig. However, I did click on the embedded image and it opened in the standard pop up window, which was animated. The blades spin on the sig, right?

I wonder why that works.

We might look at the roadmap for IE8 to see if it supports animated PNG's. I love PNG's and hope they take off.

lexx wrote:Lexx's bandwidth isn't going to be a problem here, its my lack of interest for ff 3.

Remember, the only reason I even switched from avant to ff was sarges' post about tab mix plus. When I get used to something, I rarely ever change... guess its my kneejerk disposition 🙂


... and I still see little difference between full blownout pngs vs most gifs. When I save a gif, I use the full pallette and check the compatibly first. The animated gif you showed me earlier was 'awesome', too bad your depriving anyone that prefer's Ex6/7 or FF2 to see them ;p

It's only a problem for you guys. It looks great to me 😉

And yes, as it turns out, this picture wasn't the best candidate for this. I tweaked the GIF file afterwards and it looks pretty good. Look at the embedded image above, and the text between the two images where I discuss that. There WILL BE, eventually, good reasons to use this format. I didn't mess with, nor did I discuss the 256 levels of transparency, but that will eventually be a bigger reason to use this format than the 24-bit color.

Someone's got to push the boundaries. . .I look at as a bit of FF3 advertising, and besides, you still get to look at a cool still image. 👍

Atomm wrote:Doc, that is really cool.

But I have a twist to throw in the mix. I am still on FF2. A few plugins I need for web dev stuff haven't been updated for 3 yet, so I'm holding off. So, I can't see the animated sig. However, I did click on the embedded image and it opened in the standard pop up window, which was animated. The blades spin on the sig, right?

I wonder why that works.

We might look at the roadmap for IE8 to see if it supports animated PNG's. I love PNG's and hope they take off.

Yeah, I know some folks are holding out for needed plugins, and others like Lexx, are holding out for ridiculous "I can't believe anyone thought that would be useful" plugins 😛 Hopefully they'll update the plugins soon. Everyone's known FF3 was coming for months, and had info and beta versions to work with, so you gotta figure it won't be too long.

The reason why the embedded image worked for you can be found in the line above the picture, :"Here it is in GIF format." 😀

It's a long, boring post, I know. I never really expect most ppl to read all of my long-winded posts, but they are there if someone's interested 😉 Besides, when starting a thread about a new file format, I didn't just want to say, "So how about that new file format?" Someone's gotta do the dirty work so we can move on to the fun stuff and pretty pictures.

Man, I'm tired.... Time to stop posting....

Here's a twist. You can create PNG's with PHP on the fly. If animation becomes a standard, how with that mess with Flash?

Atomm wrote:Man, I'm tired.... Time to stop posting....

Here's a twist. You can create PNG's with PHP on the fly. If animation becomes a standard, how with that mess with Flash?

I'd say that I was also tired, and that it was time for me to stop posting as well, but no amount of sleep will help me with this one.

I actually have a real use for this picture.


Why would you make pictures with code? Is that what they use to make those damned bot-checkers that I can't read and pass?

How would it mess with Flash? Do you mean, "How would the future of Flash be affected?" I would expect that, if PNG pics could be made with the same quality or better as a Flash movie, and be the same size or smaller than a Flash movie, Flash movies might disappear. . .but Flash has more uses than just non-interactive movies.

I suspect your lack of sleep and my utter cluelessness WRT any post-1995 programming language might be an obstacle to this conversation. Tomorrow, I won't be any smarter, but at least you'll be awake. 😄

DocJon wrote:Why would you make pictures with code? Is that what they use to make those damned bot-checkers that I can't read and pass?

The reasons for creating images with code are mainly for things like dynamic graphs and such. And while I have not looked into the engineering of the random char images for posts, yeah, it would make since that they are done this way.

lexx wrote:Lexx's bandwidth isn't going to be a problem here, its my lack of interest for ff 3.

Remember, the only reason I even switched from avant to ff was sarges' post about tab mix plus. When I get used to something, I rarely ever change... guess its my kneejerk disposition 🙂


... and I still see little difference between full blownout pngs vs most gifs. When I save a gif, I use the full pallette and check the compatibly first. The animated gif you showed me earlier was 'awesome', too bad your depriving anyone that prefer's Ex6/7 or FF2 to see them ;p

The Tab Mix Plus Forums:
http://tmp.garyr.net/forum/viewtopic.php?t...asc&start=0

Click on the blue link at the top, or the bottom, of the first msg to get the latest version of Tab Mix Plus for Firefox 3. . .or post back here grumbling about why this is inadequate to meet your needs. Whichever you prefer 😛

ephil wrote:The reasons for creating images with code are mainly for things like dynamic graphs and such. And while I have not looked into the engineering of the random char images for posts, yeah, it would make since that they are done this way.

Gotcha, ephil. I hadn't thought about it in those terms. I'm afraid I was thinking in terms of forum software, which is where I frequently hear about PHP. I'm SO not up on programming, and I've never been up on programming for the web. Wanna talk about database programming on a system/34? Hope not, 'cuz I've forgotten all about that too 🙂

So anyway, care to tackle Atomm's question? 😀

DocJon wrote:So anyway, care to tackle Atomm's question? 😀

I really don't think it will effect flash too much... Flash has one really big thing on its side. It is really easy to create flash applications and make them interactive within the tools for making Flash.

Flash is a lot more then just animated pictures, and while you can make dynamic graphics on the fly with php, you can [and have been for a while now] do the same thing with php and flash.

Another BIG thing about Flash is the fact that you can embed Flash into your windows applications [I am sure you can do it with other OS's, just I have not had the experience in doing so].

One of my first real windows applications was a network shares resources tool. A good friend of mine showed me how to use Flash as my UI... So no boring square box... It was a really cool was of creating a UI.

Flash has been a great tool for the web and beyond... I am 100% sure that it will be replaced soon, but it wont be by this.

And there you have it... My opinion... 🙂

I didn't realize you could use PHP with Flash. That's kind of cool.

Atomm wrote:I didn't realize you could use PHP with Flash. That's kind of cool.

Yupper, and here is the info on it if you ever really want to get into it ;p

http://us2.php.net/manual/en/book.swf.php

ephil wrote:And there you have it... My opinion... 🙂

Thank you sir! That irons a few things out.

DocJon wrote:Click on the blue link at the top, or the bottom, of the first msg to get the latest version of Tab Mix Plus for Firefox 3. . .or post back here grumbling about why this is inadequate to meet your needs. Whichever you prefer 😛

Ah, thata boy. I figured you'd keep a close eye out for this. It installed perfectly on my vista laptop and my usenet server, but on my main system, 2.0024 refuses to uninstall correctly. I've rebooted it 3x's straight, control panel removed it, and still it sez firefox needs to reboot to install updates.

Exasperating. No wonder paladin gets pissed from work ;p

Anyways... I can see your png on the notebook now Doc :thumbsup:


ps, still doesn't look any diff from the anim gif I seen earlier. Probably because I only have 3 screen rez's on this machine.

Good Jorb in finding my plugin 🙂

lexx wrote:Ah, thata boy. I figured you'd keep a close eye out for this. It installed perfectly on my vista laptop and my usenet server, but on my main system, 2.0024 refuses to uninstall correctly. I've rebooted it 3x's straight, control panel removed it, and still it sez firefox needs to reboot to install updates.

Exasperating. No wonder paladin gets pissed from work ;p

Anyways... I can see your png on the notebook now Doc :thumbsup:


ps, still doesn't look any diff from the anim gif I seen earlier. Probably because I only have 3 screen rez's on this machine.

Good Jorb in finding my plugin 🙂

I'm sorry to hear you're having such a problem with FF3 on your main system. Is that the same one that you had problems with when you tried FF3 earlier? If so, I'm thinking something is FUBAR, probably in your registry. Might have to clean it out.

Your horror story caused me to make an ERUNT backup of my registry before installing it. . . but I didn't have any problems.

Yeah, as I've said, I had a setting in Photoshop's "save for web" section that was giving me a HORRID dither problem with the GIF version of this. Once I figured that out (AFTER I had made the animated PNG), the GIF version (I posted in this thread above) looked much better. I probably wouldn't have made the animated PNG had the dither setting been right the first time I saved it. The PNG still looks better, but the GIF would've been acceptable.

Still, I learned a little something, and we got a little sneak peak at a new file format that might get more use in the future. I'm gonna keep the PNG version for my sig because I like my Sig to look like I made it, but also because I think it's a good incentive for ppl to try Firefox 3. It would irritate ME to find out my browser didn't display some gfx properly. 🙂

Hope your crazy weird world-turned-upside-down tab extension continues to work OK 👍

DocJon wrote:Hope your crazy weird world-turned-upside-down tab extension continues to work OK 👍

I finally went to system restore and went back to the day I installed ff3. It took a very long time to restore tho. Then when I got back my computer ff2 was there instead?? So I used revo uninstaller to kill it since the control panel version wasn't working.

Even after doing the full scan/removal, I had to reinstall ff2 then upgrade to ff3. It finally works again, but I lost everything like bookmarks, passwords, accts, etc. That sucked.

However installing addons later I discovered the foxmarks plugin. I installed it on all three of my computers and was able to restore most of my personal bookmarks/passwords from the server.

Tabs plus is working fine. It even installed itself on the bottom by default. Tis' fixed, now I can go to bed knowing its taken care of.

lexx wrote:I finally went to system restore and went back to the day I installed ff3. It took a very long time to restore tho. Then when I got back my computer ff2 was there instead?? So I used revo uninstaller to kill it since the control panel version wasn't working.

Even after doing the full scan/removal, I had to reinstall ff2 then upgrade to ff3. It finally works again, but I lost everything like bookmarks, passwords, accts, etc. That sucked.

However installing addons later I discovered the foxmarks plugin. I installed it on all three of my computers and was able to restore most of my personal bookmarks/passwords from the server.

Tabs plus is working fine. It even installed itself on the bottom by default. Tis' fixed, now I can go to bed knowing its taken care of.

I've been using FEBE to backup my bookmarks, extensions, etc. It's great, but they haven't released a version for FF3 yet - there's a beta, but I'll wait awhile. I still have all my bookmarks, etc saved from FF2, and I'm sure I'll be able to do something with those files if I need to.

Foxmarks looks cool, but I don't have multiple computers.

Doc, I have a lot of luck saving the PSD in photoshop and doing the compression/exporting via Image Ready. Have you tried that?

Atomm wrote:Doc, I have a lot of luck saving the PSD in photoshop and doing the compression/exporting via Image Ready. Have you tried that?

In retrospect, I misspoke. You have to save in Imageready to get an animated GIF, as far as I know, so had to have used Imageready. Saving a GIF in Photoshop gets you a static GIF.

(Opens photoshop)

Huh. How about that! PS sees the data from Imageready, and when I went to save the GIF in 'save for web', it made it animated. Cool, I can call it a day now. I learned something! 🙂

Lexx, foxmarks will back your bookmarks up. It is the easiest way to do it and it keeps them all synced if you have more than one system. I liked Google Sync (used both) but they no longer support it in FF3. I like making a bookmark at work and coming home and having it appear on my one laptop. Then on my other 3 computers and other laptop.. To many damn computers... 🙂

Sorry you had so much problem installing it. I come across this kind of thing all the time and it really stresses me out anymore. I am really beat down with IT and dealing with this type of thing times a hundred machines.. Some days I want to scream.. I cannot even complain, I just have to try to fix it or the user gets mad at me like it is MY fault it does this or that. 🙁

We had a power outage the other week and my virus server went down. Inaccessible boot drive.. However it boots to the screen asking which OS to load. I tried a repair, nothing. I tried scandisk and everything else, nothing. Then I tried recovering from a back up GHOST image. Same thing.. HUH, it is a ghost image and should work fine... So I changed the IDE controller, same thing.. WTF.... It just refuses to load now.... I need to get it fixed but all advice just points to a bad disk etc.. which was all eliminated by a ghost image on a different HD.... Weird stuff..... it is driving me crazy. I hate my life..check please 🙁

Lexx you have your tabs on the bottom?? That is just weird 🙂
FF is useful for more than just that man, tons of cool plug-ins..

Paladin wrote:Lexx, foxmarks will back your bookmarks up. It is the easiest way to do it and it keeps them all synced if you have more than one system. I liked Google Sync (used both) but they no longer support it in FF3. I like making a bookmark at work and coming home and having it appear on my one laptop. Then on my other 3 computers and other laptop.. To many damn computers... 🙂


Lexx you have your tabs on the bottom?? That is just weird 🙂
FF is useful for more than just that man, tons of cool plug-ins..

Yeah, I love foxmarks. I stumbled upon it a couple of weeks ago since I've had the laptop. Now I can access it from anywhere which is pretty decent.

I just got very used to tabs at the bottom from using Avant browser for sooo long. I can be very rigid or anal about somethings 🙂 Thank Goodness the one Doc found for me works fine. While its beta, it does what I want.

IT can be a pain. For ex, I decided to cut my cable totally off. To do this I needed a new multimedia center with a ATSC tuner and some other new accessories. Its been headbanging all week with this sob. I had it setup just perfect with a USB dongle tv tuner, then I ordered a cheap Pinnicle remote that I discovered needed Windows Media center.

I tried every tweak known to google, but couldn't get it. Decided to get and install media center. Now the tuner won't work 🙁

I have another tuner on order. Of course I also have two screwed up installs of XP now, tried dualbooting and the one that works is 'D' which will totally screw anyone else.

I feel for ya on days like that, but work is work and I can cite as many days going wrong with basic things. Friday the 13th will go down as infamous for me this year. ;p