×
Namespaces

Variants
Actions
(Difference between revisions)

Adding a sliding effect to Images in Java ME

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Bot fixing redirect link)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix underscores in categories)
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
 
 
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]]
 
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]]
 +
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= [http://www.jappit.com/uploads/src/SlidingImage.java SlidingImage class source code] [http://www.jappit.com/uploads/src/SimpleSlidingCanvas.java sample Canvas using SlidingImage]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20080522
 +
|author= [[User:Jappit]]
 +
}}
 +
 
==Introduction==
 
==Introduction==
The following SlidingImage class can be used to easily add a sliding transition effect to J2ME Images.
+
The following {{Icode|SlidingImage}} class can be used to easily add a sliding transition effect to J2ME Images.
<br/>
+
[[File:J2me_sliding_effect.png]]
[[Image:J2me_sliding_effect.png]]
+
 
<br/>
+
 
To see how this effect works, you can check here: [http://www.jappit.com/blog/j2me-online-emulator?midlet=image_slide J2ME Image sliding effect in action].
 
To see how this effect works, you can check here: [http://www.jappit.com/blog/j2me-online-emulator?midlet=image_slide J2ME Image sliding effect in action].
  
Line 276: Line 298:
  
 
==Download==
 
==Download==
* [[http://www.jappit.com/uploads/src/SlidingImage.java SlidingImage.java]]: SlidingImage class source code
+
* [http://www.jappit.com/uploads/src/SlidingImage.java SlidingImage class source code]
* [[http://www.jappit.com/uploads/src/SimpleSlidingCanvas.java SimpleSlidingCanvas.java]]: sample Canvas using SlidingImage
+
* [http://www.jappit.com/uploads/src/SimpleSlidingCanvas.java sample Canvas using SlidingImage]

Revision as of 09:21, 7 February 2012

Article Metadata
Code ExampleArticle
Created: jappit (22 May 2008)
Last edited: hamishwillee (07 Feb 2012)

Contents

Introduction

The following SlidingImage class can be used to easily add a sliding transition effect to J2ME Images. J2me sliding effect.png

To see how this effect works, you can check here: J2ME Image sliding effect in action.

Source code: SlidingImage class

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
 
public class SlidingImage
{
// constants defining the 2 types of sliding
public static final int SLIDE_IN = 0;
public static final int SLIDE_OUT = 1;
 
// image type of sliding
public int slideType = SLIDE_OUT;
 
// pieces of the sliding image
public int pieces = 4;
 
// direction of sliding (up, right, down or left)
public int direction = Canvas.LEFT;
 
// image object and properties
Image image = null;
int imageWidth = 0;
int imageHeight = 0;
 
// transition time properties
int duration = 0;
long startTime = 0;
 
// transition state
public boolean sliding = false;
public boolean ended = false;
 
/**
* Class constructor
*
* @param image image to be slided
* @param pieces number of pieces of the sliding image
* @param slideType type of slide, can be SLIDE_IN or SLIDE_OUT
*/

public SlidingImage(Image image, int pieces, int slideType)
{
this.image = image;
 
this.imageWidth = image.getWidth();
this.imageHeight = image.getHeight();
 
this.slideType = slideType;
this.pieces = pieces;
}
 
/**
* Resets the image to its starting state
*
*/

public void reset()
{
ended = false;
sliding = false;
}
 
/**
* Resets the image to its starting state, specifying new pieces and slideType values
*
* @param pieces number of pieces of the sliding image
* @param slideType type of slide, can be SLIDE_IN or SLIDE_OUT
*/

public void reset(int pieces, int slideType)
{
reset();
 
this.pieces = pieces;
this.slideType = slideType;
}
/**
* Starts the sliding effect
*
* @param direction direction of sliding (Canvas.UP, RIGHT, DOWN or LEFT)
* @param duration duration of sliding in milliseconds
*/

public void slide(int direction, int duration)
{
this.direction = direction;
 
this.duration = duration;
this.startTime = System.currentTimeMillis();
 
ended = false;
sliding = true;
}
/**
* Draws the sliding image by using the anchor point
*
* @param g Graphics object to paint the image
* @param x the x coordinate of the anchor point
* @param y the y coordinate of the anchor point
* @param anchor the anchor point for positioning the image
*/

public void paint(Graphics g, int x, int y, int anchor)
{
if(!sliding && ((ended && slideType == SLIDE_IN) || (!ended && slideType == SLIDE_OUT)))
{
g.drawImage(image, x, y, anchor);
}
else if(sliding)
{
// we translate accordingly to coordinates and anchor point
int translateX = (anchor & Graphics.RIGHT) > 0 ? x - imageWidth :
((anchor & Graphics.HCENTER) > 0 ? x - imageWidth / 2 :
x);
int translateY = (anchor & Graphics.BOTTOM) > 0 ? y - imageHeight :
((anchor & Graphics.VCENTER) > 0 ? y - imageHeight / 2 :
y);
 
g.translate(translateX, translateY);
 
// now we get current clipping properties
int cx, cy, cw, ch;
 
cx = g.getClipX();
cy = g.getClipY();
cw = g.getClipWidth();
ch = g.getClipHeight();
 
// let's get current duration and check if effect has ended
int timeDiff = (int)(System.currentTimeMillis() - startTime);
 
if(timeDiff > duration)
{
timeDiff = duration;
 
ended = true;
 
sliding = false;
}
// if it's a SLIDE_IN effect, we reverse the current time
if(slideType == SLIDE_IN)
{
timeDiff = duration - timeDiff;
}
 
 
// now, let's pre-calculate some coords/properties
int pieceEnd = 0;
int pieceCoord = 0;
int pieceSize = (direction == Canvas.LEFT || direction == Canvas.RIGHT) ?
imageHeight / pieces : imageWidth / pieces;
 
int singleSlideDuration = (int)duration / pieces;
 
switch(direction)
{
case Canvas.LEFT:
pieceEnd = cx - imageWidth;break;
case Canvas.RIGHT:
pieceEnd = cx + cw;break;
case Canvas.UP:
pieceEnd = cy - imageHeight;break;
case Canvas.DOWN:
pieceEnd = cy + ch;break;
}
 
// finally, we can paint single slide pieces
for(int i = 0; i < pieces; i++)
{
// check if this piece has not to be painted (is out of clipping region)
if(timeDiff > (i + 1) * singleSlideDuration)
{
continue;
}
else
{
pieceCoord = (timeDiff < i * singleSlideDuration) ? 0 :
pieceEnd * (timeDiff - i * singleSlideDuration) / singleSlideDuration;
 
if(direction == Canvas.LEFT || direction == Canvas.RIGHT)
{
g.setClip(pieceCoord, i * pieceSize, imageWidth, pieceSize);
g.drawImage(image, pieceCoord, 0, Graphics.TOP | Graphics.LEFT);
}
else
{
g.setClip(i * pieceSize, pieceCoord, pieceSize, imageHeight);
g.drawImage(image, 0, pieceCoord, Graphics.TOP | Graphics.LEFT);
}
}
}
//restore clipping properties and translate back
g.setClip(cx, cy, cw, ch);
 
g.translate(- translateX, - translateY);
}
}
}

Source code: sample usage

Here is a simple Canvas using a SlidingImage to create a "slide out" effect.
The steps to use a SlidingImage are these:

  • Instantiate a SlidingImage
  • Start the sliding effect via its slide() method
  • Paint it via its paint() method
  • You can always check if transition has ended via the ended instance variable
  • To reset the effect, you can use the reset() methods, one of which allows to redefine the pieces and slideType properties
import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
 
public class SimpleSlidingCanvas extends Canvas implements Runnable
{
SlidingImage image = null;
 
public SimpleSlidingCanvas()
{
try
{
this.image = new SlidingImage(Image.createImage("/image1.png"), 10, SlidingImage.SLIDE_OUT);
 
new Thread(this).start();
 
this.image.slide(Canvas.RIGHT, 3000);
}
catch(Exception e)
{
e.printStackTrace();
}
}
public void run()
{
while(true)
{
repaint();
 
try
{
synchronized(this)
{
wait(50L);
}
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
 
protected void paint(Graphics g)
{
g.setColor(0xffffff);
g.fillRect(0, 0, getWidth(), getHeight());
 
if(image != null)
{
this.image.paint(g, getWidth() / 2, getHeight() / 2, Graphics.HCENTER | Graphics.VCENTER);
}
else
{
g.setColor(0x000000);
g.drawString("No image available", getWidth() / 2, getHeight() / 2, Graphics.HCENTER | Graphics.BASELINE);
}
}
 
}

Download

111 page views in the last 30 days.