Thursday, August 25, 2011

Adding a animated GIF image for loading screen in Blackberry Application



Need to add a animated GIF image in Blackberry application or need to create a loading screen in your blackberry application ? Your search ends here..




First choose your GIF image and rename it as .abc ("gifimage.abc"). Then add this class to your project.

CODE



import net.rim.device.api.system.GIFEncodedImage;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.UiApplication;
import net.rim.device.api.ui.component.BitmapField;


public class AnimatedGifClass extends BitmapField
{
private GIFEncodedImage _image; //The image to draw.
private int _currentFrame; //The current frame in the animation sequence.
private int _width; //The width of the image (background frame).
private int _height; //The height of the image (background frame).
private AnimatorThread _animatorThread;

public AnimatedGifClass(GIFEncodedImage image)
{
this(image, 0);
}

public AnimatedGifClass(GIFEncodedImage image, long style)
{
//Call super to setup the field with the specified style.
//The image is passed in as well for the field to configure its required size.
super(image.getBitmap(), style);

//Store the image and it's dimensions.
_image = image;
_width = image.getWidth();
_height = image.getHeight();

//Start the animation thread.
_animatorThread = new AnimatorThread(this);
_animatorThread.start();
}

protected void paint(Graphics graphics)
{
//Call super.paint. This will draw the first background frame and handle any required focus drawing.
super.paint(graphics);

//Don't redraw the background if this is the first frame.
if (_currentFrame != 0)
{
//Draw the animation frame.
graphics.drawImage(_image.getFrameLeft(_currentFrame), _image.getFrameTop(_currentFrame),
_image.getFrameWidth(_currentFrame), _image.getFrameHeight(_currentFrame), _image, _currentFrame, 0, 0);
}
}

//Stop the animation thread when the screen the field is on is
//popped off of the display stack.
protected void onUndisplay()
{
_animatorThread.stop();
super.onUndisplay();
}


//A thread to handle the animation.
private class AnimatorThread extends Thread
{
private AnimatedGifClass _theField;
private boolean _keepGoing = true;
private int _totalFrames; //The total number of frames in the image.
private int _loopCount; //The number of times the animation has looped (completed).
private int _totalLoops; //The number of times the animation should loop (set in the image).

public AnimatorThread(AnimatedGifClass theField)
{
_theField = theField;
_totalFrames = _image.getFrameCount();
_totalLoops = _image.getIterations();

}

public synchronized void stop()
{
_keepGoing = false;
}

public void run()
{
while(_keepGoing)
{
//Invalidate the field so that it is redrawn.
UiApplication.getUiApplication().invokeAndWait(new Runnable()
{
public void run()
{
_theField.invalidate();
}
});

try
{
//Sleep for the current frame delay before the next frame is drawn.
sleep(_image.getFrameDelay(_currentFrame) * 10);
}
catch (InterruptedException iex)
{} //Couldn't sleep.

//Increment the frame.
++_currentFrame;

if (_currentFrame == _totalFrames)
{
//Reset back to frame 0 if we have reached the end.
_currentFrame = 0;

++_loopCount;

//Check if the animation should continue.
if (_loopCount == _totalLoops)
{
_keepGoing = false;
}
}
}
}
}
}


Then implement this code in the screen where you want to display the animated GIF image.


GIFEncodedImage image;
EncodedImage encodedImage = EncodedImage.getEncodedImageResource("loading.abc");
byte data[] = new byte[4000];
data = encodedImage.getData();
image =(GIFEncodedImage) EncodedImage.createEncodedImage(data,0,data.length);
AnimatedGifClass animatedGIF = new AnimatedGifClass(image,Field.FIELD_HCENTER);
screen.add(animatedGIF);


That's it. Your animation is ready. You can download the sample project below.

Download Full Project
Arun Kumar Munusamy Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

14 comments:

  1. Good to start with! Thanks Arun! :-)

    ReplyDelete
  2. Hi
    image =(GIFEncodedImage) EncodedImage.createEncodedImage(data,0,data.length);
    This line throws classcastexception...
    Plzz help!!

    ReplyDelete
  3. Have you tried the sample project given at the above link ?

    ReplyDelete
  4. Yess..i tried the sample project above
    i even tried two solutions provided on other forums for this exception but it doesnt work :(
    still throwing same exception!!

    ReplyDelete
  5. I think you dint include the class file or the image

    ReplyDelete
  6. Great information,thanks a lot for sharing it.
    Domain Registration

    ReplyDelete
  7. That will be a wonderful prank.This is awesome innovative idea and I appreciate you for sharing this information with me. for technical updates visit my blog @ http://ecommerce-website-development1.blogspot.in/

    ReplyDelete
  8. Hey buddy this very nice. u explained the features thru pgm.

    ReplyDelete
  9. Well this is what i was looking for thanks for the info, i appreciate that Arun. Well i found so much of difference in simple application development and mobile application development. I guess i need to work hard hehe.

    ReplyDelete
  10. Amazing, the up to date information has enhanced my knowledge allot. Keep posting such useful posts so that I can reap maximum benefits from them. Thank you Quit Smoking Tips.

    ReplyDelete
  11. Normally I don't read post on blogs, however I wish to say that this write-up very forced me to take a look at and do so! Your writing style has been surprised me. Thank you, quite great article. Quit Smoking Tips.

    ReplyDelete
  12. Very good, it actually solved the problem I've been having from other solutions. Except the HCENTER style is not working.... please help to solve thi, thanks

    ReplyDelete