<?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>Jappit.com &#187; animations</title>
	<atom:link href="http://www.jappit.com/blog/tag/animations/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jappit.com/blog</link>
	<description>Mobile blog by Alessandro La Rosa</description>
	<lastBuildDate>Wed, 23 Nov 2011 10:38:23 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>ImageFx: J2ME image effects library</title>
		<link>http://www.jappit.com/blog/2008/06/06/imagefx-j2me-image-effects-library/</link>
		<comments>http://www.jappit.com/blog/2008/06/06/imagefx-j2me-image-effects-library/#comments</comments>
		<pubDate>Fri, 06 Jun 2008 13:37:57 +0000</pubDate>
		<dc:creator>pit</dc:creator>
				<category><![CDATA[j2me]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[animations]]></category>
		<category><![CDATA[effects]]></category>
		<category><![CDATA[image fx]]></category>
		<category><![CDATA[j2me api]]></category>
		<category><![CDATA[j2me library]]></category>
		<category><![CDATA[transitions]]></category>

		<guid isPermaLink="false">http://www.jappit.com/blog/?p=46</guid>
		<description><![CDATA[After two tutorials on Image animations in J2ME, I&#8217;ve finally decided to put together a library to easily integrate Image effects in a Java ME application. This first release is very very early, and is intended to be tested and to allow developers to give their feedbacks about it, so It&#8217;d be possible to modify [...]]]></description>
			<content:encoded><![CDATA[<p>After <a title="J2ME image sliding transitions" href="http://www.jappit.com/blog/2008/05/22/j2me-image-effects-part-2-sliding-transitions/">two</a> <a title="J2ME image explosion effect" href="http://www.jappit.com/blog/2008/05/20/let-your-images-explode-in-j2me/">tutorials</a> on Image animations in J2ME, I&#8217;ve finally decided to put together a <strong>library to easily integrate Image effects in a Java ME application</strong>. This first release is very very early, and is intended to be tested and to allow developers to give their feedbacks about it, so It&#8217;d be possible to modify and improve it.</p>
<p><img src="http://www.jappit.com/images/blog/uploads/imagefx_banner.gif" alt="ImageFx Banner" width="400" height="149" /></p>
<p>Currently supported effects are visible on the <a title="ImageFx in action" href="http://www.jappit.com/index.php?page=emulator&amp;midlet=image_fx">emulator page</a>, and are:</p>
<ul>
<li><strong>BlindsFx</strong></li>
<li><strong>ExplodeFx</strong></li>
<li><strong>PuzzleFx</strong></li>
<li><strong>ShakeFx</strong></li>
<li><strong>SlideFx</strong></li>
<li><strong>SpiralFx</strong></li>
<li><strong>WaveFx</strong></li>
<li><strong>WipeFx</strong></li>
</ul>
<h3>How to use it?</h3>
<p>Let&#8217;s start from a simple usage example. We start creating an Image, and then using it to create an AnimatedImage instance:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #003399;">Image</span> baseImage <span style="color: #339933;">=</span> <span style="color: #003399;">Image</span>.<span style="color: #006633;">createImage</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/base.png&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
AnimatedImage animated <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> AnimatedImage<span style="color: #009900;">&#40;</span>baseImage<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Now, we have created an <strong>AnimatedImage</strong>, that is the base class that will allow us to apply effects to <strong>Image</strong>s.</p>
<p>Now, we can create an effect (that will be a subclass of <strong>ImageFx</strong>) and apply it to our AnimatedImage:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">ImageFx fx <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> PuzzleFx<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">8</span>, <span style="color: #cc66cc;">8</span>, ImageFx.<span style="color: #006633;">TYPE_IN</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
animated.<span style="color: #006633;">setFx</span><span style="color: #009900;">&#40;</span>fx<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>In this example, we have chosen a <strong>PuzzleFx </strong>effect, that will show (or hide, depending on Fx type) our image piece by piece. As you can check on <a title="PuzzleFx JavaDocs" href="http://www.jappit.com/j2me/imagefx/doc/com/jappit/imagefx/fxs/PuzzleFx.html" target="_blank">JavaDocs page for PuzzleFx class</a>, first 2 arguments represent the horizontal and vertical pieces to split the Image into, while the last one is the type of the Fx itself.</p>
<p>Now, our AnimatedImage is ready to be animated. To start the animation, simply call the AnimatedImage <strong>start()</strong> method, passing as argument the <strong>effect duration in milliseconds</strong>:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">animated.<span style="color: #006633;">start</span><span style="color: #009900;">&#40;</span>3000L<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>About painting, you&#8217;ll simply have to call the <strong>paint()</strong> method, in a way that is really similar to Graphics drawImage():</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;">animated.<span style="color: #006633;">paint</span><span style="color: #009900;">&#40;</span>g, <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span>, <span style="color: #003399;">Graphics</span>.<span style="color: #006633;">TOP</span> <span style="color: #339933;">|</span> <span style="color: #003399;">Graphics</span>.<span style="color: #006633;">LEFT</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Now, to begin using this library, you don&#8217;t really need any more infos. Just to point out some methods you can find useful in your app:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//stop() method will immediatly stop the FX</span>
fx.<span style="color: #006633;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//isRunning() method tells if the FX is running or not</span>
fx.<span style="color: #006633;">isRunning</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//isEnded() method tells if the FX animation is ended</span>
fx.<span style="color: #006633;">isEnded</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//and, if you want a looping effect, you can use</span>
fx.<span style="color: #006633;">setLooping</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h3>Further information</h3>
<p>You can library JAR file here: <a title="ImageFx J2ME image effects library" href="http://www.jappit.com/uploads/j2me/ImageFx.jar">ImageFx.jar</a>. Current version requires MIDP 2.0 and CLDC 1.1 to be used (a version compatible with CLDC 1.0 will be released as soon as I&#8217;ve got time <img src='http://www.jappit.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ).</p>
<p>Full API JavaDocs (still in early phase too <img src='http://www.jappit.com/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ) are also available <a title="ImageFx API JavaDocs" href="http://www.jappit.com/j2me/imagefx/doc/" target="_blank">here</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.jappit.com/blog/2008/06/06/imagefx-j2me-image-effects-library/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>

