Ir al contenido principal

Edge, el nuevo editor de animación HTML5 de Adobe

Recientemente Adobe ha publicado un avance de lo que será su nueva herramienta de diseño web HTML 5, Adobe Edge, la cual permitirá a los diseñadores crear contenidos animados para páginas web, usando estándares web como HTML5, JavaScript y CSS 3, mediante una sencilla interfaz que lo asemeja a un editor de video.

No se trata en este caso de un sustituto de Flash, ya que según la compañía ambas tecnologías, Flash y HTML, pueden coexistir, y en ello podemos estar de acuerdo, ya que según profesionales del diseño, HTML 5 aún no está a la altura.


La compañía ya había incorporado herramientas HTML5 en su Creative Suite 5, y dio a conocer una completa herramienta de conversión de Flash a HTML5 llamada Wallaby.

Con el uso de Edge, podremos importar nuestro sitio actual y agregar animaciones a los documentos HTML y también podremos importar gráficos estándar para la web como SVG, PNG, JPG y GIF, estilos CSS, y aplicar hasta 27 diferentes transformaciones.

También podemos contar con la posibilidad de visualizar la animación creada, un servicio prestado en tiempo real gracias al motor WebKit integrado.

Edge, el nuevo editor de animacion HTML5 de Adobe
Asimismo también tendremos disponibles en el paquete algunas características muy interesantes, prácticas y efectivas, que la convierten en una inmejorable suite de herramientas que nos ayudará a crear animaciones profesionales en poco tiempo.

A continuación, algunas de estas funcionalidades:

Interfaz de usuario intuitiva

La interfaz de usuario se basa en un escenario, timeline, y paneles para los elementos y propiedades. Esta característica está influenciada por After Effects y Flash Professional, pero innova en su facilidad de uso. Las animaciones y el tiempo se pueden controlar en un escenario basado en WebKit, o a través de los ajustes precisos de las propiedades de los elementos, directamente en la línea de tiempo. También se pueden hacer cambios rápidos en los objetos múltiples o individuales.

Animación visualmente controlada por el autor

La aplicación permite crear nuevas composiciones a partir de cero utilizando bloques de construcción básicos de HTML, texto y gráficos importados de la web. Es posible manipular los objetos con una variedad de opciones de estilo de transformación, los cuales Edge aplicará de forma nativa al marco de trabajo de animación basado en jQuery.

Añadir movimiento a contenido HTML existente

Agregar elementos de movimiento a documentos web existentes. Edge almacenará la animación en un archivo JavaScript independiente que distinguirá entre el código HTML original y el código de animación de Edge.

Importación de archivos gráficos Web


Importa gráficos web existentes, tales como SVG, JPG, PNG y GIF.

Salida basada en estándares

Adobe Edge lee y escribe en HTML, CSS y JavaScript de forma nativa. El contenido animado producido por Edge es expresado en JavaScript Notation (JSON), una estructura de datos que conserva el diseño basado en CSS. JSON es un formato de estilo de JavaScript que es de fácil lectura, y permite una mayor flexibilidad para trabajar con el documento y el contenido animado de manera independiente.

Contenido confiable en equipos de escritorio y dispositivos

El contenido de animación creado por Adobe Edge se ha diseñado y probado para funcionar correctamente en IOS y Android, todos los dispositivos habilitados para WebKit, y los navegadores de escritorio más populares como Firefox, Chrome, Safari e Internet Explorer 9.

Si lo deseas, puedes descargar una versión preview de la aplicación desde el siguiente enlace:
http://labs.adobe.com/technologies/edge/

Comentarios

Entradas populares de este blog

Blogger - Marcadores Sociales Flotantes con la opción de cerrar

El truco se ve de la siguiente manera: Puede ver un Demo de este truco en el siguiente  blog de pruebas .

Blogger - Marcadores Sociales flotantes en la parte superior de la pagina

Los marcadores sociales son algo con lo cual todo blog debe contar, y hoy les traigo un excelente truco en el cual los  marcadores sociales  se ubican en la parte superior de la pagina y al bajar la pagina los marcadores bajan con ella. Los botones se verán de la siguiente manera:

Blogger - Como crear un botón Mi Yahoo

Para aquellos que no conocen que es  Mi Yahoo , quería pasar a explicar que es una web del tipo  iGoogle en la cual puedes personalizar todo lo que necesitas para navegar de una formar sencilla por la red. Puedes tener en una sola página noticias de última hora, correo, gadgets personalizados y el buscador de Yahoo (todo junto pero no revuelto).