Archivo de la etiqueta: JavaFX

Mi primera animación con JavaFX Composer

Recordando como fue que hice mi primera aplicación en flash, ahora quiero experimentar haciendo un ejemplo similar pero esta vez usando JavaFX Composer.

Voy a usar Netbeans 6.8 y lo primero que hacemos es instalar el plugin JavaFX Composer:

Herramientas –> Complementos –> En la pestaña Plugins disponibles –> Buscamos JavaFX Composer y lo instalamos, reiniciamos el Ide y ya está.

Proyecto Nuevo –> JavaFX –> JavaFX Desktop Business application –> Nombre del proyecto y Terminar.

Interfaz despues de crear nuestro proyecto

Desde la papeleta arrastramos un botón al área de diseño, desde la ventana de propiedades cambiamos el texto que queramos que aparezca en el botón, tambien damos clic en el icono de un “lapiz” de la propiedad “Action” y escogemos “Generate: Go to the next state”, esto nos dirige al editor de código y cambiamos de:

currentState.next();

por:

currentState.nextWrapped();

Arrastramos una circunferencia al área de diseño.

Agregamos un botón y una circunferencia

En la ventana de estados damos clic en el icono “+” le ponemos un nombre, en este caso “uno” con las opciones que se indican en la figura

Creando un "estado"

Creamos un segundo estado al que llamamos “dos” como se muestra en la siguiente figura:

Creando un segundo estado

Con el estado “dos” seleccionado, damos clic en la circunferencia colocada en el área de diseño, nos vamos a la papeleta de propiedades y escogemos la opción de “Traslate X” y cambiamos el valor a 300, damos enter y vemos como se desplaza la circunferencia en X, prueben y establezcan el valor que mas les convengan.

Seleccionamos entre el estado “uno” y el estado “dos”, podemos ver como la circunferencia se desplaza en el eje X.

Trasladando la circunferencia

Con el estado “dos” seleccionado, en la propiedad que acabamos de cambiar “Traslate X” junto a el hay un boton muy pequeño, damos clic,  luego clic en “Select All” cambiamos la opción “Animate” a “Linear” y configuramos el “in” 500, clic en “Close” para terminar.

Configurando la animación

Corremos el proyecto y listo!!!

Corriendo el programa

Esto fue una primera visión de lo que está por venir, espero le s haya gustado. Adjunto el proyecto. Está con extensión pdf, lo renombran cambiando la extensión por ZIP y luego lo descomprimen.

Hasta pronto.

Anuncios