Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Java / Transición de imágenes al estilo PowerPoint

Transición de imágenes al estilo PowerPoint

Autor jc mouse jueves, julio 9, 2015

¿Qué es una transición?

Una transición es un efecto de movimiento que se da entre una imagen y la siguiente en una presentación.

ppt slide

Transición en java

Para aplicar efectos entre imágenes en aplicaciones java, se debe hacer uso de java2d para manipular los archivos de imagen (color, tamaño, posición,etc) y pintarlos en los contenedores, para repintar la interfaz cada cierto tiempo y crear el efecto de movimiento, se emplea un Timer, un timer permite repetir una tarea cada X tiempo.

Creamos un JPanel en el cual aparte de mostrar las imágenes, implementamos los métodos de animación y el timer.

package com.bolivia.app;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.imageio.ImageIO;
import javax.swing.JPanel;
import javax.swing.Timer;
/**
 * @web https://www.jc-mouse.net/
 * @author Mouse
 */
public class JPanelPPT extends JPanel{

    public enum CTRL{
        NEXT,
        PREVIOUS
    }
    private CTRL option;    
    private Dimension SIZE_PANEL            =       new Dimension(500,500);
    private List<BufferedImage> imagenList  =       new ArrayList<BufferedImage>();    
    private int index                       =       0;//imagen actual
    private Timer timer;
    private int speed                       =       10;//en milisegundos
    private int x                           =       0;
    private int y                           =       0;
    private int size_cut                    = -10;
    private boolean inTransition            =       false;

    /** Constructor de clase */
    public JPanelPPT()
    {
        super();        
        setSize(SIZE_PANEL);
        setVisible(true); 

        //se carga imagenes en memoria
        try {
            imagenList.add(0, ImageIO.read(this.getClass().getResource("/com/bolivia/app/images/photo1.jpg")));
            imagenList.add(1, ImageIO.read(this.getClass().getResource("/com/bolivia/app/images/photo2.jpg")));
            imagenList.add(2, ImageIO.read(this.getClass().getResource("/com/bolivia/app/images/photo3.jpg")));
            imagenList.add(3, ImageIO.read(this.getClass().getResource("/com/bolivia/app/images/photo4.jpg")));            
        } catch (IOException ex) {
            System.err.println( ex.getMessage() );
        }
    }

    @Override
    public void paintComponent(Graphics g){
        Graphics2D g2 =(Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);                    
        drawTransition(g2);
    }

    /**
 * pinta el efecto de transicion
 */
    public void drawTransition(Graphics2D g2)
    {
        //imagen actual
        g2.drawImage(imagenList.get(index), x, y, getWidth(), getHeight(), null);        
        size_cut +=10;//incrementa
        if( size_cut>0 )
        {        
            //obtiene coordenadas de recorte
            int px = getWidth()/2-size_cut/2;
            int py = getHeight()/2-size_cut/2;
            if( px >= 0 )
            {                
                int sindex=0;
                if(option == CTRL.NEXT)                                    
                    sindex = ((index+1) < imagenList.size())?index+1:0;                    
                else if(option == CTRL.PREVIOUS)
                    sindex = ((index-1) >= 0)?index-1:imagenList.size()-1;                                    
                //extrae recorte de imagen siguiente/anterior y dibuja
                BufferedImage recorte = imagenList.get(sindex).getSubimage(px,py,size_cut,size_cut);                        
                g2.drawImage(recorte, px, py, recorte.getWidth(), recorte.getHeight(), null);                       
                g2.dispose();
            }else{
                timer.stop();
                inTransition=false;
                g2.dispose();
                if(option == CTRL.NEXT)
                {
                   index+=1;
                   if(index>=imagenList.size()) index=0;                    
                }                
                if(option == CTRL.PREVIOUS)
                {
                    index-=1;
                    if(index<0) index=imagenList.size()-1;
                }
                repaint();
                size_cut=-10;//reinicia 
            }
        }
    }

    /**
 * @param CTRL option
 */
    public void play(CTRL option)
    {   
        this.option = option;    
        inTransition = !inTransition;
        ActionListener animation = new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent ae) {
                repaint();//refresca panel
            }
        };        

        if(inTransition)
        {
            if(timer!=null)timer.stop();
            timer = new Timer(speed,animation);
            timer.start();       
        }
        //else timer.stop();

    }
}//JPanelPPT:end

Esta clase que tiene un tamaño fijo de 500×500 pixeles se añade a la interfaz de la siguiente manera:

//nueva instancia
JPanelPPT ppt= new JPanelPPT();
//se añade a la interfaz
add(ppt);
//para avanzar
ppt.play(JPanelPPT.CTRL.NEXT);
//para retroceder
ppt.play(JPanelPPT.CTRL.PREVIOUS);

El efecto que logramos con este código es el de RECUADRO SALIENTE en Power Point

Descargar ejemplo en este enlace pobre

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Reproducir video con JavaFX y HTML5

Reproducir video con JavaFX y HTML5

JavaFX implementa el control webview que nos permite agregar contenido HTML cargado mediante la clase WebEngine. El comp...

JSON Web Token para Java y Android

JSON Web Token para Java y Android

Un JSON Web Token es un estandar abierto para la creación de Token de Acceso el cual permite firmar digitalmente informa...

HSQLDB: Gestor de bases de datos libre en java

HSQLDB: Gestor de bases de datos libre en java

HyperSQL DataBase (HSQLDB) es un moderno administrador de bases de datos relacionales, es portátil e implementado en jav...

Cliente Retrofit – Web Service

Cliente Retrofit – Web Service

Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí...

Introducción a Scene Builder y MVC (Parte I)

Introducción a Scene Builder y MVC (Parte I)

En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también v...

MariaDB: Tablas Virtuales (Vistas – View)

MariaDB: Tablas Virtuales (Vistas – View)

¿Qué es una vista? Una vista (View) o Tabla Virtual, es una forma lógica de ver los datos ubicados en varias tablas, es...

2 comentarios en “Transición de imágenes al estilo PowerPoint”

  1. samuel dice:

    gracias por el aporte me sirvió de mucho

  2. Marcelo dice:

    Excelente… a mi personalmente me complica trabajar con gráficos.. pero nada imposible

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

Los archivos digitales (txt, docx, xlsx, odt, odp, pdf, etc) nos permiten almacenar información el cual en ocasiones, de...

En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario.  Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

Herramientas

Generador de Enlaces a Whatsapp