Tagged: image fx Toggle Comment Threads | Keyboard Shortcuts

  • pit 1:04 pm on January 25, 2009 Permalink | Reply
    Tags: , image fx, image reflection, , , ,   

    J2ME Images: how to create a reflection effect 

    It’s surely time for some new J2ME tutorial, so this article will explain how to create a nice reflection effect starting from a simple Image.

    You can see the final effect, as usual, on the emulator page: J2ME Image reflection in action.

    Source code

    1. Method declaration

    Let’s start by our method declaration:

    public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
    {
    }

    We have 3 arguments:

    • the original image that we want to reflect
    • the background color (used for transparent images)
    • the height of the reflection effect

    2. The mutable Image

    Now, let’s create the mutable Image that will hold the resulting effect:

    int w = image.getWidth();
     
    int h = image.getHeight();
     
    Image reflectedImage = Image.createImage(w, h + reflectionHeight);

    We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

    3. Copy the original Image

    Now, first drawing steps are:

    1. Getting the Graphics object of our mutable image
    2. Filling the image with the background color
    3. Drawing the original image on the upper part of the mutable one
    Graphics g = reflectedImage.getGraphics();
     
    g.setColor(bgColor);
     
    g.fillRect(0, 0, w, h + reflectionHeight);
     
    g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

    4. Create the reflection effect

    Now, let’s get to the important part of this tutorial, that is the reflection effect itself:

    • for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
    • get the RGBA data of the corresponding horizontal line of the original image
    • calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
    • draw the RGB data into the reflected image, by using its Graphics object

    And here is the source code:

    int[] rgba = new int[w];
    int currentY = -1;
     
    for(int i = 0; i < reflectionHeight; i++)
    {
    	int y = (h - 1) - (i * h / reflectionHeight);
     
    	if(y != currentY)
    		image.getRGB(rgba, 0, w, 0, y, w, 1);
     
    	int alpha = 0xff - (i * 0xff / reflectionHeight);
     
    	for(int j = 0; j < w; j++)
    	{
    		int origAlpha = (rgba[j] >> 24);
    		int newAlpha = (alpha & origAlpha) * alpha / 0xff;
     
    		rgba[j] = (rgba[j] & 0x00ffffff);
    		rgba[j] = (rgba[j] | (newAlpha << 24));
    	}
     
    	g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
    }

    as you can see, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

    Sample usage

    Using the above method is really simple, since it’s only necessary to:

    1. Create the original Image
    2. Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height
    Image originalImage = Image.createImage("/cap_man1.png");
     
    Image reflectedImage = ReflectedImage.create(originalImage, bgColor, 64);

    Downloads

    You can download the complete source code of this article here:

    Vote this article!

    If you liked this tutorial, feel free to vote it on Forum Nokia Wiki: How to create an image reflection effect in Java ME

     
    • ion 9:51 am on February 5, 2009 Permalink

      hi.. nice code

      could you help me how to draw a “Justified” Paragraf in canvas…. please !!

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

    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);
     
    animated.setFx(fx);

    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:

    animated.start(3000L);

    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
    fx.stop();
     
    //isRunning() method tells if the FX is running or not
    fx.isRunning();
     
    //isEnded() method tells if the FX animation is ended
    fx.isEnded()
     
    //and, if you want a looping effect, you can use
    fx.setLooping(true);

    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

      hi
      waht is error in my code?

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

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

      animated.setFx(fx);
      animated.start(3000L);

      }
      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.
      tanks

    • 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 ;)

      Pit

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

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

    • 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 ?
      mercy

    • 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(){
      try{
      im1=Image.createImage(“1.png”);
      animatedImage=new AnimatedImage(im1);
      ImageFx fx1=new BlindsFx(10, ImageFx.TYPE_IN, ImageFx.ORIENTATION_VERTICAL);
      animatedImage.setFx(fx1);
      animatedImage.start(3000L);
      }
      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

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel