Tagged: transitions Toggle Comment Threads | Keyboard Shortcuts

  • pit 12:23 pm on October 13, 2008 Permalink | Reply
    Tags: , , image library, imagefx, , , transitions   

    ImageFx: first commercial application is out! 

    ImageFx is a Java ME library that allows you to easily add animated transitions between different Images.

    And today Systema Mutui, the first commercial applications that makes use of it, has finally been launched :)

    The application itself is a simple animation that promotes bank services and allows users to share the animation itself with a friend. Obviously, ImageFx transitions were used to make the whole animation nicer :)

    To get further details about ImageFx API features, you can access its full JavaDocs here: ImageFx JavaDocs. For any other infos, feel free to contact me!

  • pit 1:39 pm on June 23, 2008 Permalink | Reply
    Tags: , , , sliding animations, transitions   

    How to add sliding transitions between Canvas in J2ME 

    Today we’ll see a simple way to add sliding transition between Canvas in a Java ME application. Just take a look at it in the emulator page to see how it performs: Canvas sliding transitions in action!

    j2me canvas sliding transition screenshot

    The source code


    First of all, we know that Canvas paint() method is protected, so, to access it from the class we’ll build, we must extend its visibility by extending Canvas class itself. We’ll do it by defining our FxBaseClass in this simple way:

    import javax.microedition.lcdui.Canvas;
    import javax.microedition.lcdui.Graphics;
    import javax.microedition.lcdui.Canvas;
    import javax.microedition.lcdui.Graphics;
    public class FxBaseCanvas extends Canvas
    	public void paint(Graphics g)


    Now, we start building our CanvasSlideFx class, that will extend Canvas itself. We start defining some useful properties:

    // time related properties
    long startTime = 0;
    long duration = 0;
    // current state of the transition
    boolean running = false;
    // direction of sliding
    int direction = LEFT;
    // the previous and next Canvas instances
    FxBaseCanvas fromCanvas = null;
    FxBaseCanvas toCanvas = null;
    // the current Display object
    Display display = null;
    // properties used to correctly place the 2 Canvas
    int deltaX = 0;
    int deltaY = 0;

    Now, we define our class constructor, that will initialize coordinate properties according to the specified transition direction. The detailed argument list is:

    • The current Display object, that will be used to retrieve the current displayed Canvas, and to set the next one
    • The destination Canvas, that will extend the previously defined FxBaseCanvas class
    • The transition direction (one of Canvas.UP, RIGHT, DOWN or LEFT)
    • The transition duration, in milliseconds
    public CanvasSlideFx(Display display, FxBaseCanvas toCanvas, int direction, long duration)
    	this.display = display;
    	this.fromCanvas = (FxBaseCanvas)display.getCurrent();
    	this.toCanvas = toCanvas;
    	this.direction = direction;
    	this.duration = duration;
    	case UP:
    		deltaY = - getHeight(); break;
    	case RIGHT:
    		deltaX = getWidth(); break;
    	case DOWN:
    		deltaY = getHeight(); break;
    	case LEFT:
    		deltaX = - getWidth(); break;

    Now, we define a startTransition() method, that will actually start the animation. To implement the animation itself, we let our class implement Runnable.

    void startTransition()
    	this.startTime = System.currentTimeMillis();
    	running = true;
    	new Thread(this).start();

    And here’s the run() method implementation, that we must implement from Runnable interface. As long as the animation is running, we will repaint our animated Canvas, with a given interval of 50 milliseconds (but you can freely change this). When it finishes (so, running is false), we will exit the main loop and set the current Displayable to our toCanvas.

    public void run()
    	catch(Exception e)

    Finally, we have our paint() method, that will actually paint our transition. It will do this by painting both the source and the destination Canvas, translating them according to the transition direction, and to the elapsed time.

    protected void paint(Graphics g)
    	long diff = System.currentTimeMillis() - startTime;
    	if(diff >= duration)
    		running = false;
    		diff = duration;
    	int perc = (int)(100 * diff / duration);
    	int dx = deltaX * perc / 100;
    	int dy = deltaY * perc / 100;
    	g.translate(dx, dy);
    	g.translate(- deltaX, - deltaY);
    	g.translate(deltaX - dx, deltaY - dy);

    How to use it?

    Now we’ll see how to integrate the CanvasSlideFx within an existing code that already uses Canvas.
    So, let’s assume that our application currently has, somewhere in its code, these lines:

    MyCanvas firstCanvas = new MyCanvas();
    //and somewhere else
    MyOtherCanvas secondCanvas = new MyOtherCanvas();

    where MyCanvas and MyOtherCanvas will likely extend Canvas.

    Now here are the required steps to integrate transitions in our code:

    1. First of all, we must make MyCanvas and MyOtherCanvas extend FxBaseCanvas instead of directly Canvas. So, we’ll have:
      public class MyCanvas extend FxBaseCanvas ...
    2. Then, let’s say we want to animate the transition between firstCanvas and secondCanvas, we will remove the code:

      and replace it with:

      CanvasSlideFx fxCanvas = new CanvasSlideFx(
    3. and we’ve done it! :)

    Resources and download

    You can download the code explained in this article with the following links:

  • pit 12:40 pm on June 18, 2008 Permalink | Reply
    Tags: colors, , fading, , , text, transitions   

    How to create a color fading text in J2ME 

    It’s time for new effects! :)

    Today we’ll see how to implement and and use text that changes multiple colors with a fading effect. You can see it in action here: J2ME text color fade effect in action.

    Color Fading Text screenshot

    So, let’s start defining our ColorFadeText class.

    The code

    We start defining the necessary properties:

    //will hold the colors to fade
    int[] colors = null;
    //duration of a single fade
    int fadeDuration = 0;
    //effect start time
    long startTime = 0;
    //property used to check if effect has started
    public boolean started = false;
    //the text to be drawn
    String text = null;

    Now, we define the main constructor, that will accept the following arguments:

    • the text to be drawn
    • an int[] array containing the colors to fade into
    • the duration of a single fade
    public ColorFadeText(String text, int[] colors, int fadeDuration)
    	if(colors.length == 0)
    		throw new IllegalArgumentException("You must define at least 1 color");
    	this.text = text;
    	this.colors = colors;
    	this.fadeDuration = fadeDuration;

    The effect start() method will simply set the startTime value to current time and the started property to true

    public void start()
    	startTime = System.currentTimeMillis();
    	started = true;

    Then, we have the paint() method, that will be used to paint the text on the given Graphics instance:

    public void paint(Graphics g, int x, int y, int anchor)
    		long diff = System.currentTimeMillis() - startTime;
    		int module = (int)(diff % fadeDuration);
    		int colorIndex = (int)(diff / fadeDuration) % colors.length;
    		int midColor = midColor(
    			colors[(colorIndex + 1) % colors.length],
    	g.drawString(text, x, y, anchor);

    The following utility method will be the one actually used to get the current text color:

    static int midColor(int color1, int color2, int prop, int max)
    	int red =
    		(((color1 >> 16) & 0xff) * prop +
    		((color2 >> 16) & 0xff) * (max - prop)) / max;
    	int green =
    		(((color1 >> 8) & 0xff) * prop +
    		((color2 >> 8) & 0xff) * (max - prop)) / max;
    	int blue =
    		(((color1 >> 0) & 0xff) * prop +
    		((color2 >> 0) & 0xff) * (max - prop)) / max;
    	int color = red << 16 | green << 8 | blue;
    	return color;

    How to use it?

    Using the ColorFadeText object is quite simple, since it’ll be very similar to use a common String. Just follow this plain steps.

    1. Create a ColorFadeText instance

    ColorFadeText text = new ColorFadeText(
    	"I'M A FADING TEXT!",
    	new int[]{0xff0000, 0x00ff00, 0x0000ff, 0xff00ff},

    2. Start it…


    3. And then, in your Canvas paint() method, paint it, using the same arguments used by Graphics drawString() method (adding a reference to the Graphics instance of course):

    	getWidth() / 2,
    	Graphics.HCENTER | Graphics.TOP

    Just a side note: since it’s an animated effect, you’ll need to repaint it quite frequently, so, for example, you can use a Thread to periodically call Canvas repaint() method.

    Source code download

    You can download source code of ColorFadeText, and of a sample Canvas that makes use of it:

    This article is also available on Forum Nokia Wiki: How to create a color fading text in Java ME.

  • pit 2:37 pm on June 6, 2008 Permalink | Reply
    Tags: animations, , , j2me api, j2me library, transitions   

    ImageFx: J2ME image effects library 

    After two tutorials on Image animations in J2ME, I’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’d be possible to modify and improve it.

    ImageFx Banner

    Currently supported effects are visible on the emulator page, and are:

    • BlindsFx
    • ExplodeFx
    • PuzzleFx
    • ShakeFx
    • SlideFx
    • SpiralFx
    • WaveFx
    • WipeFx

    How to use it?

    Let’s start from a simple usage example. We start creating an Image, and then using it to create an AnimatedImage instance:

    Image baseImage = Image.createImage("/base.png");
    AnimatedImage animated = new AnimatedImage(baseImage);

    Now, we have created an AnimatedImage, that is the base class that will allow us to apply effects to Images.

    Now, we can create an effect (that will be a subclass of ImageFx) and apply it to our AnimatedImage:

    ImageFx fx = new PuzzleFx(8, 8, ImageFx.TYPE_IN);

    In this example, we have chosen a PuzzleFx effect, that will show (or hide, depending on Fx type) our image piece by piece. As you can check on JavaDocs page for PuzzleFx class, 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.

    Now, our AnimatedImage is ready to be animated. To start the animation, simply call the AnimatedImage start() method, passing as argument the effect duration in milliseconds:


    About painting, you’ll simply have to call the paint() method, in a way that is really similar to Graphics drawImage():

    animated.paint(g, 100, 100, Graphics.TOP | Graphics.LEFT);

    Now, to begin using this library, you don’t really need any more infos. Just to point out some methods you can find useful in your app:

    //stop() method will immediatly stop the FX
    //isRunning() method tells if the FX is running or not
    //isEnded() method tells if the FX animation is ended
    //and, if you want a looping effect, you can use

    Further information

    You can library JAR file here: ImageFx.jar. 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’ve got time :)).

    Full API JavaDocs (still in early phase too :)) are also available here.

    • javad 7:30 pm on February 25, 2010 Permalink

      waht is error in my code?

      Image baseImage = Image.createImage(“/Splash.png”);

      AnimatedImage animated = new AnimatedImage(baseImage);
      ImageFx fx = new PuzzleFx(8, 8, ImageFx.TYPE_IN);


      catch(Exception e)
      System.out.println(“Error in image loading …”);

      Show nothing

    • pit 1:17 pm on February 26, 2010 Permalink

      Hi javad,

      do you get any Exceptions in your code?

    • mohammad 12:11 pm on May 6, 2010 Permalink

      hi Alessandro
      how to use this library?
      i read library doc and i use in my program but show nothing …..
      please create a source code sample to help use.

    • pit 12:13 pm on May 6, 2010 Permalink

      Hi mohammad,

      I’ll share the source code of the sample MIDlet, shown in the emulator page, really soon ;)


    • Mohammad 9:52 am on May 7, 2010 Permalink

      Hi Alessandro,
      I’m still waiting for your promise….
      Thank you for sharing my request

    • Ali 8:01 am on May 8, 2010 Permalink

      hi dear
      i use library in try catch but dont show no thing and no error in catch …..
      plz help me
      what must i do ?

    • pit 5:00 pm on May 9, 2010 Permalink

      @Mohammad: just let me polish the code a bit, and I’ll publish the whole source code

      @Ali: can you share your code (in a comment or by email, as you prefer)?

    • Ali 3:36 pm on May 10, 2010 Permalink

      my code :
      what is error in my code?
      try block run normal and no error in catch ….but show noting

      import javax.microedition.lcdui.Canvas;
      import javax.microedition.lcdui.Graphics;
      import javax.microedition.lcdui.Image;

      • @author Ali

      public class menu extends Canvas {
      Image im1;
      AnimatedImage animatedImage;

      public menu(){
      animatedImage=new AnimatedImage(im1);
      ImageFx fx1=new BlindsFx(10, ImageFx.TYPE_IN, ImageFx.ORIENTATION_VERTICAL);
      catch(Exception e){e.printStackTrace();}

      public void paint(Graphics g){
      animatedImage.paint(g, getWidth()/2, getHeight()/2, Graphics.LEFT|Graphics.TOP);


    • Ali 4:03 pm on May 10, 2010 Permalink

      hi pit
      tanks dear….
      solve my problem …
      i dont use Thread in my program and same is my wrong ….
      very very tanks for your good library ….
      Good Luck..

    • pit 11:42 am on May 11, 2010 Permalink

      Hi Ali,

      I’m happy to know that you solved your problem :) just let me know if any other issues arise.

    • mz 4:02 am on August 15, 2010 Permalink

      Hi Alessandro
      Tx for your good library
      I want to use in cldc 1.0 but it isnt compatible !!!!…
      when is ready version of compatible with cldc 1.0?
      i need it soon…
      Tank you if you help me…

    • MZ 3:27 pm on August 15, 2010 Permalink

      Hi Alessandro
      Tx for your good library
      I want to use in cldc 1.0 but it isnt compatible !!!!…
      when is ready version of compatible with cldc 1.0?
      i need it soon…
      Tank you if you help me…

    • srinivas 1:57 pm on September 23, 2011 Permalink

      i didnt get any animation.why i am using .gif images

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc