Probando el nuevo Adobe Edge Animator


Hace unos pocos días Adobe presento sus nuevas herramientas de desarrollo web con respaldo completo para HTML5 y CSS3 y el día de hoy nos hemos dado a la tarea de comenzar a probarlas.

Antes de comenzar debemos decir que estas herramientas se descargan de forma gratuita del sitio de Adobe con solo crear un Adobe Id.

En esta ocasión nos dimos a la tarea de probar Adobe Edge Animator, la cual es una herramienta de diseño de animaciones empleando HTML5, CSS 3 y javascript, así que como diría un amigo es un Flash para HTML5, y en cierto sentido lo es, así que veamos la interfaz principal de este programa.

El recuadro blanco con las reglas a los lados es nuestra área de trabajo, la cual en nuestro archivo HTML sera una capa creada con la etiqueta < DIV >,  hacia el lado izquierdo podemos observar el panel de propiedades, en el cual podemos modificar los atributos de la capa, cabe señalar que estoy atributos modificaran un estilo CSS3  y es más, en cada opción de todos los paneles de este programa se puede observar el atributo CSS3 o HTML5 que modifica con solo poner el puntero del mouse sobre el.

Por encima del panel de propiedades tenemos las herramientas, el cual cuenta con las herramientas básicas de dibujo de figuras y de texto

De tal forma que solo basta dibujar o colocar el elemento deseado en nuestro escenario (stage), para producir las animaciones tenemos debajo de nuestro panel principal la linea de tiempo (timeline), en donde podemos indicar la duración de las animaciones.

En este panel, lo primero que aprendemos a emplear es la herramienta llamada “pin”, la cual nos permite crear fotogramas para comenzar la animación, así que el procedimiento seria:

  1. Colocar el objeto a animar
  2. clic en la herramienta pin de la linea de tiempo
  3. arrastar el pin en la linea de tiempo hasta el segundo final de la animación
  4. Mover y modificar el objeto
  5. y listo.

Como vemos es la tipica animación por interpolación como la manejaba Flash.

Así que los diseñadores que usan Flash pueden estar tranquilos, es un ambiente completamente familiar. Ahora bien, como no nos queríamos quedar con la duda de como se produce la magia, guardamos el ejemplo básico y esto es lo que nos produjo.

El archivo HTML es nuestra pagina web donde se crea la animación, los archivos .JS producen la animación con código Javascript y en la carpeta edge_includes nos topamos con la sorpresa de que Edge Animator agrega automáticamente JQuery.

Por si se lo preguntaban, el archivo ejemplo.an es solo el archivo de proyecto, por lo que no afecta nuestro resultado si no esta, pero si nos complica el trabajo al momento de reabrir la pagina para modificarla (pero solo un poco).

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en Lenguajes de aplicaciones y etiquetada , , , , , , . Guarda el enlace permanente.

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s