Transitions
Hi,
I am thinking about doing a slide show application involving transitions between one image and the next.
I haven抰 really looked into it much, so I抦 just looking for pointers in the right direction.
What would be ideal is some code I can get teeth into.
I抳e been looking into transitions, but the only downloads I can contain the .class files. Does anyone know where I can find some source downloads?
Thanks
Luke
[458 byte] By [
dfgstga] at [2007-11-26 22:37:06]

# 1
This is a tip for horizontal transition
Draw every keynote in an image, one-to-one. Also create a master-image, and when you want to make the transition, call:
public void makeTransition(Keynote k1, Keynote k2){
long transition_time=<choose the speed>
long time_base_start_time=System.getCurrentTime();
long elapsed_time=System.getCurrentTime()-time_base_start_time
while( (elapsed_time)<transition_time )
{
Graphics2D g2=(Graphics2D)master_image.getGraphics();
Dimension d =master_image.getSize();
//moving to left
g2.translate(-d.gethWidth()*elapsed/time/transition_time,0);t
g2.drawImage(k1.getImage());
//moving to right
g2.translate(d.getWidth(),0 );
g2.drawImage(k2.getImage());
repaint()//your component must draw master_image
}
}
>
# 2
That抯 cool. I抳e managed to do a class now that takes two images (front and back) and uses a clipping rectangle that slowly gets bigger over time:
(Were gg is the Graphic2D of the buffer or master image)
public void actionPerformed(ActionEvent e)
{
/*
* Draw the back
*/
gg.drawImage(back,0,0,null);
/*
* Make the clip
*/
// TODO: Look at getPathIterator(AffineTransform at)
// TODO: Try translating and scaling
// Width
int w=((buff.getWidth()/dur))*tick;
// Height
int h=((buff.getHeight()/dur))*tick;
// Get the drawX
int x=(buff.getWidth()/2)-(w/2);
// Draw y
int y=(buff.getHeight()/2)-(h/2);
// Redraw the shape
Rectangle2D clip= new Rectangle2D.Double(x,y,w,h);;
// Set clip
gg.setClip(clip);
// Draw the front
gg.drawImage(front,0,0,null);
}
I抳e also been experimenting with shapes, it would be nice to use any shape, a star for instance, but for that I whould have to scale the shape, I can抰 make it a new each time like I did for a rectangle because I don抰 know what the shape is.
I抳e made a tester app playing with shape scaling and I抳e got code to scale a shape:
tempBut=new JButton("Make bigger");
tempBut.addActionListener(new AbstractAction () {
public void actionPerformed(ActionEvent e)
{
AffineTransform af = new AffineTransform();
af.scale(1.1,1.1);
GeneralPath tmp = new GeneralPath();
tmp.append(s.getPathIterator(af),false);
s=tmp;
sur.repaint();
}
});
But what I really want is to scale around the centre point, does anyone know how this can be done?
Thanks
Luke
# 3
The idea of Shapes is cool!I've just designed a bean that can make zoom and rotate an image with the mouse. Now I want to add your idea :D.Bye
# 4
For Scale around center:
Graphics2D gg=(Graphics2D) your_component.getGrahics();
gg.translate( your_component.Width(), your_component_Height() );//You move to the center
gg.translate( -image.getW()*zoom, -image.getH()*zoom )//Look at the minus!
gg.scale(zoom, zoom);//Preparing for zooming
gg.draw(image);
If you want to draw a non-rectangular shape, use the dimensions of the bounding rectangle
# 5
Sorry!!!!!!!!
In the first translation:
gg.translate( your_component.Width(), your_component_Height() );//You move to the center
change for
gg.translate( your_component.Width()/2, your_component_Height() /2 );//You move to the center
Now you are in the center ;)
# 6
I抦 glad you like me code :) I抳e came up with a class to help me manipulate shapes easier:
public abstract class ShapeMan
{
public static Shape normalise(Shape s)
{
double x=s.getBounds().getX();
double y=s.getBounds().getY();
AffineTransform af = new AffineTransform();
af.translate(-x,-y);
GeneralPath tmp = new GeneralPath();
tmp.append(s.getPathIterator(af),false);
return tmp;
}
public static Shape translate(Shape s,Point2D p)
{
AffineTransform af = new AffineTransform();
af.translate(p.getX(),p.getY());
GeneralPath tmp = new GeneralPath();
tmp.append(s.getPathIterator(af),false);
return tmp;
}
public static Shape moveTo(Shape s,Point2D p)
{
s=normalise(s);
AffineTransform af = new AffineTransform();
af.translate(p.getX(),p.getY());
GeneralPath tmp = new GeneralPath();
tmp.append(s.getPathIterator(af),false);
return tmp;
}
}
I haven抰 commented it (woops), but I think some of it look similar to your code.
One thing that would be good is to resize a shape instead of scaling it.
I did think of a method that would go round scaling the X and Y by a small amount until the bounding rectangle抯 width and height matched the desired width and height, by I haven抰 tried that yet and if you scale too much, the loop may go on forever.
Does anyone know how to resize a shape?
Luke
# 7
Shapes... well:
AfineTransform my_scaltion_transform=(z,0,0,0,1,...);//you know what to put here
Shape scaled_shape= my_scaltion_transform.getTransfromedShape(your_original_shape);
For images, just draw the original image in a new image of the desired size and apply the desired transformation.
ByE!
# 8
I抳e updated my ShapeMan class now with a method to resize a shape:
public static Shape resize(Shape s,Dimension2D d)
{
// A temp shape
GeneralPath tmp = new GeneralPath();
// The affine transform
AffineTransform af = new AffineTransform();
// The bounds of s
Rectangle2D bounds=s.getBounds2D();
// How much to scale the X
double scaleX=d.getWidth()/bounds.getWidth();
// How much to scale the Y
double scaleY=d.getHeight()/bounds.getHeight();
// Scale
af.scale(scaleX,scaleY);
tmp.append(s.getPathIterator(af),false);
// Return the resized shape
return tmp;
}
So using that I抳e updated the actionPerformed method in my Transition class:
int w=((buff.getWidth()/dur))*tick;
// Height
int h=((buff.getHeight()/dur))*tick;
// Get the drawX
int x=(buff.getWidth()/2)-(w/2);
// Draw y
int y=(buff.getHeight()/2)-(h/2);
// Resize the shape
clip=ShapeMan.resize(clip,new Dimension(w,h));
// Move it
clip=ShapeMan.moveTo(clip,new Point2D.Double(x,y));
Now, as I said, this transition makes the clipping shape slowly grow to cover the screen, the next step, I think, would be to start with the shape the same size as the screen and then slowly shrink it. This can抰 be that hard to do.
Any thoughts?
Luke
