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

Curso 3D básico para arquitectos (GRATIS) - parte 2

PAGINA ANTERIOR IMPORTAR POLÍGONOS DESDE 3DSMAX     Hasta ahora nos hemos centrado únicamente en la modelación de la casa en cadkey, una vez terminada ésta y creado el archivo de polígonos en formato dwg vamos a importar desde  3dsmax  el archivo casa-ejemplo.dwg que tenemos guardado en nuestro escritorio. Para ello abrimos el programa 3dsmax10 y en la pestaña archivo seleccionamos importar-dwg,  en la opción Files of type elegimos   Legacy AutoCAD y seguidamente en el escritorio ( desktop ) seleccionamos el archivo que habíamos creado.

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: