Adobe Edge Animate no solo es una aplicación para crear animaciones en HTML5, sino que nos permite generar acciones, interactividad y controla eventos del usuario.
Siguiendo el ejemplo mostrado en el tutorial anterior en el que animamos el logo de Cristalab generando un giro de 360 grados, procederemos a añadirle un poco de interactividad con Adobe Edge. Concretamente haremos que el logo aparezca fijo y que realice el giro una vez que el usuario pase el cursos sobre él.
Teniendo la animación generada en nuestro timeline el primer paso será hacer que l animación no se reproduzca de entrada. Para ello únicamente aplicaremos una acción de stop(); en el primer fotograma.
Con el cabezal situado en el primer fotograma pulsaremos sobre el icono de acciones situado a la derecha de la capa acciones.
Esto nos abrirá el panel de acciones. Este panel nos permite añadir de manera rápida atajos a los códigos más básicos. En este caso pulsaremos en el botón "Detener" lo que nos añadirá al panel el código necesario para pausar la animación en ese fotograma.
Podemos añadir interactividad a la animación detectando el paso del cursos sobre un objeto. Pulsaremos el botón derecho del mouse sobre la imagen del logo y en el menú desplegable seleccionaremos "Abrir acciones".
Volveremos a tener abierto el panel de acciones, pero esta vez aplicadas al objeto. Por lo que en este caso podremos seleccionar un evento como es el "Mouseover".
Seleccionado el evento asignaremos las acciones arrealizar. Lo que queremos hacer es reproducir la animación.
La última acción a realizar es volver a iniciar la animación una vez finalizada. Para ello moveremos el cabezar al último fotograma y haremos que cuando la animación llegue a ese punto se vuelva al primer fotograma dejando la animación lista para volver a reproducirse.
En el panel de acciones seleccionaremos "Detener en.." y asignaremos el fotograma 1 dentro del código.
En este enlace podemos comprobar el estado actual de la animación.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Martincho7 el 09 de Octubre de 2012
Que bueno ver nuevamente artículos tuyos por aquí
@Otaku RzO: Gracias, jeje Sí hacia muucho tiempo.
Por memofer el 10 de Octubre de 2012
PORQUE entro a la pagina del sitio oficial y me pide que me registre, luego me manda a un sitio llamado http://creative.adobe.com pero de ahi no veo donde descargar el instalador y realmente me interesa tenerlo!!
Agradecere su ayuda.
memofer-blog :
PORQUE entro a la pagina del sitio oficial y me pide que me registre, luego me manda a un sitio llamado http://creative.adobe.com pero de ahi no veo donde descargar el instalador y realmente me interesa tenerlo!!
Agradecere su ayuda.
Tienes que registrarte para conseguir un ID de Adobe y en tu panel tendrás las aplicaciones disponibles de tu cuenta gratuita, o la suscripción que hayas escogido.
Por uri boira el 10 de Octubre de 2012
Por dyhsoluciones el 10 de Octubre de 2012
Por actodefe el 17 de Octubre de 2012
Actualizarse o morir. Habrá que ponerse las pilas con el asunto...
Por luispaisa el 22 de Octubre de 2012
luispaisa :
En el panel de la izquierda, donde pone stage, cambiar px por % y se centra.
Por luispaisa el 23 de Octubre de 2012
Perdón, creo que no me hice entender. Me refiero a como centrarla dentro del html como cuando uno importa una pelicula flash (.swf) dentro de un html y la centra en este caso como hago para centrar la animación que me genera Adobe Edge Animate dentro del archivo html
Por luispaisa el 23 de Octubre de 2012
Por netorcido el 04 de Noviembre de 2012
Por el 14 de Noviembre de 2012
Por Lilita el 12 de Enero de 2013
Por zapiram el 11 de Junio de 2013
Muchas gracias, muy bueno el post