Recently, I wanted to make a simple animation to put on a webpage. I have a background image and a rendered 3D animation which should be on top of that.<\/p>\n
When it comes to lossless image compression, PNG<\/a> is my all-time favorite. It has layer support, full transparency, lossless non-patented compression, open format, … So the PNG-derived MNG <\/a>would be a logical choice for animation, right? Wrong! \ud83d\ude42 Almost none of the current browsers support it out of the box! Mozilla supported it for some time, but gave up due to bloated implementation. Konqueror is the only one<\/span> supporting MNG! Can you believe that? \ud83d\ude15 Maybe you can, if you see the popularity of Flash. But what if you just want a simple animation? Is the loading of a full flash player justified for a simple animation? And why prefer a closed proprietary format if there are open ones? So I went on a quest for better formats. \ud83d\ude42<\/p>\n The only as good alternative I could think of is SVG<\/a>. I remember PNG taking some time before it was accepted. MNG has taken its time but still doesn’t seem accepted. I think SVG has a better chance to get accepted, but is still just a little bit too new. I had a look at animated SVG but my first impression was that it wasn’t that well suited for my purpose of handling prerendered images, but rather for real vector graphics.<\/p>\n So there I was, back at GIF. I contemplated that GIF, after all, wasn’t patented anymore (I know, not GIF itself, but the compression algo in it), so I could forgive myself using it. \ud83d\ude09 So how to encode a bunch of frames into an animated gif? Simple. Just open your favorite shell with ImageMagick<\/a> support and type something like:<\/p>\n convert *.png test.gif<\/p><\/blockquote>\n You can define a transparent color, but if your input is already PNG, there’s no need to specify that of course. I tried several commands from premerging the background to scaling to translating until I got stuck at the latter. Somehow the translation didn’t work… I decided it was getting too clumpsy anyway, so I burned my foreground into the background in the Blender<\/a> phase, since this was the first thing I did anyhow before merging into GIF. Btw, I found out, Blender has about 4 ways to achieve this same result<\/a>. \ud83d\ude42<\/p>\n But… when I finally got the result, I regretted my choice for GIF a bit.. Thinking of a small band user like my brother, ~280KB for a simple 30 frames animation is a bit too much.. \ud83d\ude09 I knew the GIF format would be inefficient, but still hoped for a good result. It’s obvious that the background storage is inefficient (unless someone can tell my that GIF has layer support?).<\/p>\n So, just to know the difference with flash \ud83d\ude09 I searched the net for a way to generate a flash movie with open source tools only. The solution came in the form of swftools<\/a>. Swftools provides a (questionable?) script language to script your animation. I have no idea if it is a known scripting language as I don’t know anything about flash. \ud83d\ude09 Anyhow, I have rendered files like 0001.png, 0002.png, etc so it would need some rather repetitive work to create that script (I didn’t find any way to define loops in the script language). For some reason I judged it was overkill to write a program in C, java or C# just for generating a script, so I deemed a scripting language much more adequate for the job. Let’s see, which scripting language then.. \ud83d\ude42 Windows shell script? not familiar enough with. I did some Perl a while ago, but found out I didn’t install it yet on this PC. Mmm, what’s installed.. Python?! But without IDE. Oh well, everyone says it’s so easy, right? \ud83d\ude09 After some fumbling around to get the formatted strings working in file output, I finally came up with a script that does the job. \ud83d\ude42<\/p>\n I’ll post it here in case some Python guru feels the need to educate a noob (meaning, comments welcome ;)):<\/p>\n Does anyone know a great Python reference? Like CHM style, with index, full text search and stuff..<\/p>\n Okay, so having a swftools script, I finally get a flash version of my animation. From 270 to 69KB, not bad… I’m still interested in alternatives for web animation formats.. And does anyone know how SWFTools perform in comparison with the commercial Adobe\/Macromedia tools?<\/p>\n","protected":false},"excerpt":{"rendered":" Recently, I wanted to make a simple animation to put on a webpage. I have a background image and a rendered 3D animation which should be on top of that. When it comes to lossless image compression, PNG is my all-time favorite. It has layer support, full transparency, lossless non-patented compression, open format, … So … Continue reading What’s wrong with MNG?<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5,2],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-3d","category-programming","category-web"],"_links":{"self":[{"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":0,"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"wp:attachment":[{"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mattiesworld.gotdns.org\/weblog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
outputfile=open('makesc.out', 'w')\r\nfor i in range(1,30):\r\nnum = str(i);\r\noutputfile.write(\".frame \"+num+'n');\r\noutputfile.write('t.png frame'+num+' \"'+num.zfill(4)+'.png\"n');\r\noutputfile.write('t.put frame'+num+' x=65 y=10n');\r\noutputfile.close();<\/pre>\n<\/blockquote>\n
\nI’ll guess I have to accept the fact that Flash is everywhere and browser are optimized for it anyhow (tell me that’s true ;)).<\/p>\n