Home » Adobe »Básico »Edge »HTML5 »Javascript »Tutoriales » Currently Reading:

Adobe Edge, el reemplazo HTML5 de Flash: Cómo programar interactividad

octubre 9, 2012 Adobe, Básico, Edge, HTML5, Javascript, Tutoriales No Comments
Adobe Edge, el reemplazo HTML5 de Flash: Cómo programar interactividad

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. 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.

Compártelo:

Adobe Edge, el reemplazo HTML5 de Flash: Cómo programar interactividad
Visto 3.325 veces

Comment on this Article:








AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com