{"id":342,"date":"2010-04-16T00:32:32","date_gmt":"2010-04-16T05:32:32","guid":{"rendered":"http:\/\/alejandroayala.wordpress.com\/?p=342"},"modified":"2012-04-20T21:54:50","modified_gmt":"2012-04-21T02:54:50","slug":"mi-primera-animacion-con-javafx-composer","status":"publish","type":"post","link":"https:\/\/alejandroayala.solmedia.ec\/?p=342","title":{"rendered":"Mi primera animaci\u00f3n con JavaFX Composer"},"content":{"rendered":"

Recordando como fue que hice mi primera aplicaci\u00f3n en flash, ahora quiero experimentar haciendo un ejemplo similar pero esta vez usando JavaFX Composer.<\/p>\n

Voy a usar Netbeans 6.8 y lo primero que hacemos es instalar el plugin JavaFX Composer:<\/p>\n

Herramientas –> Complementos –> En la pesta\u00f1a Plugins disponibles –> Buscamos JavaFX Composer y lo instalamos, reiniciamos el Ide y ya est\u00e1.<\/p>\n

Proyecto Nuevo –> JavaFX –> JavaFX Desktop Business application –> Nombre del proyecto y Terminar.<\/p>\n

<\/p>\n

\"Interfaz<\/a><\/p>\n

Desde la papeleta arrastramos un bot\u00f3n al \u00e1rea de dise\u00f1o, desde la ventana de propiedades cambiamos el texto que queramos que aparezca en el bot\u00f3n, tambien damos clic en el icono de un \u201clapiz\u201d de la propiedad \u201cAction\u201d y escogemos \u201cGenerate: Go to the next state\u201d, esto nos dirige al editor de c\u00f3digo y cambiamos de:<\/p>\n

currentState.next();<\/em><\/p>\n

por:<\/p>\n

currentState.nextWrapped();<\/em><\/p>\n

Arrastramos una circunferencia al \u00e1rea de dise\u00f1o.<\/p>\n

\"Agregamos<\/a><\/p>\n

En la ventana de estados damos clic en el icono \u201c+\u201d le ponemos un nombre, en este caso \u201cuno\u201d con las opciones que se indican en la figura<\/p>\n

\"Creando<\/a><\/p>\n

Creamos un segundo estado al que llamamos \u201cdos\u201d como se muestra en la siguiente figura:<\/p>\n

\"Creando<\/a><\/p>\n

Con el estado \u201cdos\u201d seleccionado, damos clic en la circunferencia colocada en el \u00e1rea de dise\u00f1o, nos vamos a la papeleta de propiedades y escogemos la opci\u00f3n de \u201cTraslate X\u201d 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.<\/p>\n

Seleccionamos entre el estado \u201cuno\u201d y el estado \u201cdos\u201d, podemos ver como la circunferencia se desplaza en el eje X.<\/p>\n

\"Trasladando<\/a><\/p>\n

Con el estado \u201cdos\u201d seleccionado, en la propiedad que acabamos de cambiar \u201cTraslate X\u201d junto a el hay un boton muy peque\u00f1o, damos clic,\u00a0 luego clic en \u201cSelect All\u201d cambiamos la opci\u00f3n \u201cAnimate\u201d a \u201cLinear\u201d y configuramos el \u201cin\u201d 500, clic en \u201cClose\u201d para terminar.<\/p>\n

\"Configurando<\/a><\/p>\n

Corremos el proyecto y listo!!!<\/p>\n

\"Corriendo<\/a><\/p>\n

Esto fue una primera visi\u00f3n de lo que est\u00e1 por venir, espero les haya gustado. Adjunto el proyecto.<\/a><\/p>\n

Hasta pronto.<\/p>\n\n

Twittear<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

Recordando como fue que hice mi primera aplicaci\u00f3n 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\u00f1a Plugins disponibles –> Buscamos JavaFX Composer y lo instalamos,\u2026 Leer m\u00e1s »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":712,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[4],"tags":[9,29,506,39,40,62,507],"_links":{"self":[{"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/posts\/342"}],"collection":[{"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=342"}],"version-history":[{"count":12,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/posts\/342\/revisions"}],"predecessor-version":[{"id":717,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/posts\/342\/revisions\/717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=\/wp\/v2\/media\/712"}],"wp:attachment":[{"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alejandroayala.solmedia.ec\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}