×
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 (Hamishwillee - Update ArticleMetaData)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix underscores in categories)
Line 1: Line 1:
 
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]]
 
[[Category:Java ME]][[Category:Code Examples]][[Category:UI]]
{{ArticleMetaData
+
{{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]
+
|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]]) -->
 
|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'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
Line 7: Line 7:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|translated-by= <!-- [[User:XXXX]] -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
+
|translated-from-title= <!-- Title only -->
|update-by=<!-- After significant update: [[User:username]]-->
+
|translated-from-id= <!-- Id of translated revision -->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
+
|review-by= <!-- After re-review: [[User:username]] -->
|creationdate=20080522
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|author=[[User:Jappit]]
+
|update-by= <!-- After significant update: [[User:username]]-->
}} {{ReviewerApproved|timestamp=20090926}}
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20080522
 +
|author= [[User:Jappit]]
 +
}}  
  
 
==Introduction==
 
==Introduction==

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

112 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×