Thursday, May 22nd, 2008
After an explosive J2ME class, now it’s the time for sliding transition effects. With the following SlidingImage class you’ll be able to seamlessly add both SlideIn and SlideOut effects to your toooo static apps!

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
- Download and include in your code the SlidingImage.java class
- 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
- 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.
- Now you can paint it simply specifying coordinates and an anchor, as usual:
image.paint(g,
100, 100,
Graphics.HCENTER | Graphics.VCENTER);
- If you remember ExplodingImage class, you can check if effect is ended with the public ended property:
if(image.ended)
{
//effect-end related code
}
- 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:
Tags: image effect, j2me, sliding, transition
Posted in j2me, mobile, tutorial | 1 Comment »
Tuesday, May 20th, 2008
After a MIDP 1.0 utility to rotate images now time has come for some image fun

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:
- Download the ExplodingImage.java source code and put it straight in your project
- 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.
- Start the explode effect with the explode() method, that will accept the effect duration as argument:
- 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();
}
}
}
- To test if the effect has ended, you can simply access your ExplodingImage ended instance variable:
if(image.ended)
{
//effect-end related code
}
- And you’re done! See it in action here: J2ME image explode effect in action
Sample source code is available here:
Tags: effect, explode, fx, Image, j2me, source code, transition
Posted in j2me, mobile, tutorial | 1 Comment »