As usual, take a look at how this would appear in a real phone, and then proceed with the simple these 1,2,3 steps

1. Download and include in your code the SlidingImage.java class
2. Instantiate a new SlidingImage:

   SlidingImage image = new SlidingImage(
   	Image.createImage("/image1.png"),
   	10,
   	SlidingImage.SLIDE_OUT);

   These are the constructor arguments:

   • An Image object to be slided
   • The number of pieces of the sliding image
   • The type of slide, can be SlidingImage.SLIDE_IN or SlidingImage.SLIDE_OUT
3. Start the sliding effect, specifying its direction and duration (in milliseconds):

   image.slide(Canvas.RIGHT, 3000);

   Direction can be one of Canvas properties UP, RIGHT, DOWN and LEFT.

4. Now you can paint it simply specifying coordinates and an anchor, as usual:

   image.paint(g,
   	100, 100,
   	Graphics.HCENTER | Graphics.VCENTER);

5. If you remember ExplodingImage class, you can check if effect is ended with the public ended property:

   if(image.ended)
   {
   //effect-end related code
   }

6. If you want to reset the effect, also changing the sliding image pieces and effect type (slide in or out), you can use the reset() method:

   //to reset changing also slides and type properties
   image.reset(12, SlidingImage.SLIDE_IN);
   //otherwise, to simply reset:
   image.reset();

You can download source code here:

• SlidingImage.java: main class source code
• SimpleSlidingCanvas.java: example of Canvas using SlidingImage

When writing mobile applications, it’s always cool to add some effects or transitions. But, while for example FlashLite has a nice builtin support for them, with J2ME you have to hand-code even the simplest movement (and this is the main reason why most J2ME apps are all but attractive).

So, here’s a first class that you can use to add an “explode” effect to images in a straightforward way. How to do it? Here we come:

1. Download the ExplodingImage.java source code and put it straight in your project
2. Instantiate an ExplodingImage this way:

   //get your Image
   Image sourceImage = Image.createImage("/image.png");
   //and then use it in ExplodingImage constructor
   ExplodingImage image = new ExplodingImage(sourceImage , 5, 8, 8);

   The ExplodingImage constructor accepts the following arguments:

   • An Image instance
   • An int representing the “level” for the exploding effect, that is the strength of the effect itself (higher the level, stronger the effect).
   • The last 2 int arguments represent the horizontal and vertical pieces of the exploded image.
3. Start the explode effect with the explode() method, that will accept the effect duration as argument:

   image.explode(2000L);

4. To paint it, simply use its paint() method, very similary to the Graphics drawImage() one. For example, in a Canvas paint() method, you can do something like this:

   protected void paint(Graphics g)
   {
   	g.setColor(0xffffff);
   	g.fillRect(0, 0, width, height);
   	image.paint(g, getWidth() / 2, getHeight() / 2, Graphics.HCENTER | Graphics.VCENTER);
   }

   To give the effect a “smooth” animation, you should paint it quite frequently (let’s say, not once per second ). So, always using Canvas, a sample code could be like this:

   public void run()
   {
   	while(true)
   	{
   		repaint();
    
   		try
   		{
   			synchronized(this)
   			{
   				wait(50L);
   			}
   		}
   		catch(Exception e)
   		{
   			e.printStackTrace();
   		}
   	}
   }

5. To test if the effect has ended, you can simply access your ExplodingImage ended instance variable:

   if(image.ended)
   {
   	//effect-end related code
   }

6. And you’re done! See it in action here: J2ME image explode effect in action

Sample source code is available here:

• ExplodingImage.java: main class
• ExplodingImageCanvas.java: sample usage of ExplodingImage within a Canvas