Tagged: transition Toggle Comment Threads | Keyboard Shortcuts

  • pit 3:46 pm on May 22, 2008 Permalink | Reply
    Tags: image effect, , sliding, transition   

    J2ME Image effects part 2: sliding transitions 

    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!

    J2ME sliding transition effect screenshot

    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:

     

    • Absar 9:14 am on February 10, 2009 Permalink

      nice

    • rohit 11:32 am on September 23, 2010 Permalink

      really nice article.. good work!!

  • pit 10:26 am on May 20, 2008 Permalink | Reply
    Tags: effect, explode, , , , , transition   

    Let your images explode in J2ME! 

    After a MIDP 1.0 utility to rotate images now time has come for some image fun :)

    J2ME Image explode effect screenshot
    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:

     

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