<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>TheHippo &#187; animated</title>
	<atom:link href="http://blog.thehippo.de/tag/animated/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.thehippo.de</link>
	<description>if (i=1) throw null;</description>
	<lastBuildDate>Wed, 02 Mar 2011 18:06:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to convert a animated gif into a flash movie</title>
		<link>http://blog.thehippo.de/2009/09/tools-and-software/how-to-convert-a-animated-gif-into-a-flash-movie/</link>
		<comments>http://blog.thehippo.de/2009/09/tools-and-software/how-to-convert-a-animated-gif-into-a-flash-movie/#comments</comments>
		<pubDate>Mon, 14 Sep 2009 14:20:26 +0000</pubDate>
		<dc:creator>Hippo</dc:creator>
				<category><![CDATA[Tools and Software]]></category>
		<category><![CDATA[animated]]></category>
		<category><![CDATA[Flash Player]]></category>
		<category><![CDATA[gif]]></category>
		<category><![CDATA[ImageMagick]]></category>
		<category><![CDATA[swf]]></category>
		<category><![CDATA[swfmill]]></category>

		<guid isPermaLink="false">http://blog.thehippo.de/?p=97</guid>
		<description><![CDATA[Today I tried to load a animated loading animation as a gif image into the Flash Player and discovered that he is not able to play them. It only shows the first frame.
My loading.gif:
  
So how to convert this gif animation into a swf file, which the Flash Player could play? (And of ...]]></description>
			<content:encoded><![CDATA[<p>Today I tried to load a animated loading animation as a gif image into the Flash Player and discovered that he is not able to play them. It only shows the first frame.<br />
My<em> loading.gif</em>:</p>
<div class="mceTemp mceIEcenter">
<dl id="attachment_98" class="wp-caption aligncenter" style="width: 42px;">
<dt class="wp-caption-dt"><img class="size-full wp-image-98" title="loading.gif" src="http://blog.thehippo.de/wp-content/uploads/2009/09/loading.gif" alt="loading.gif" width="32" height="32" /></dt>
</dl>
</div>
<p>So how to convert this gif animation into a swf file, which the Flash Player could play? (And of course I only want to use open source tools.) It was very easy:<span id="more-97"></span></p>
<ul>
<li>Make sure you have <a title="ImageMagick" href="http://www.imagemagick.org" target="_blank">ImageMagick</a> installed.</li>
<li>Open a console and go to the directory where the gif file is located:
<pre>convert +adjoin -coalesce loading.gif frame%02d.png</pre>
</li>
<li>Now we have a png for every frame of the gif animation. Why png? Because swfmill does not support gif as file format and png it the only available format with support for transparency.</li>
<li>Create a XML file that look similar to this one:
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1"><span class="sc3"><span class="re1">&lt;?xml</span> <span class="re0">version</span>=<span class="st0">&quot;1.0&quot;</span> <span class="re0">encoding</span>=<span class="st0">&quot;utf-8&quot;</span> <span class="re2">?&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="sc3"><span class="re1">&lt;movie</span> <span class="re0">width</span>=<span class="st0">&quot;32&quot;</span> <span class="re0">height</span>=<span class="st0">&quot;32&quot;</span> <span class="re0">framerate</span>=<span class="st0">&quot;25&quot;</span><span class="re2">&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;background</span> <span class="re0">color</span>=<span class="st0">&quot;#ffffff&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;clip</span> <span class="re0">id</span>=<span class="st0">&quot;frame00&quot;</span> <span class="re0">import</span>=<span class="st0">&quot;frame00.png&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;place</span> <span class="re0">id</span>=<span class="st0">&quot;frame00&quot;</span> <span class="re0">depth</span>=<span class="st0">&quot;1&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;clip</span> <span class="re0">id</span>=<span class="st0">&quot;frame01&quot;</span> <span class="re0">import</span>=<span class="st0">&quot;frame01.png&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;place</span> <span class="re0">id</span>=<span class="st0">&quot;frame01&quot;</span> <span class="re0">depth</span>=<span class="st0">&quot;1&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;clip</span> <span class="re0">id</span>=<span class="st0">&quot;frame02&quot;</span> <span class="re0">import</span>=<span class="st0">&quot;frame02.png&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/library<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;place</span> <span class="re0">id</span>=<span class="st0">&quot;frame02&quot;</span> <span class="re0">depth</span>=<span class="st0">&quot;1&quot;</span><span class="re2">/&gt;</span></span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="sc3"><span class="re1">&lt;/frame<span class="re2">&gt;</span></span></span></div>
</li>
<li class="li1">
<div class="de1">&#8230;.</div>
</li>
<li class="li1">
<div class="de1"><span class="sc3"><span class="re1">&lt;/movie<span class="re2">&gt;</span></span></span></div>
</li>
</ol>
</div>
</li>
<li>Finally merge the single frame images together with <a href="http://swfmill.org/" target="_blank" title="swfmill">swfmill</a>:
<pre>swfmill simple input.xml output.swf</pre>
</li>
<li>That&#8217;s all.</li>
</ul>
<p class="wp-flattr-button"></p>]]></content:encoded>
			<wfw:commentRss>http://blog.thehippo.de/2009/09/tools-and-software/how-to-convert-a-animated-gif-into-a-flash-movie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.231 seconds -->

