Adobe Edge: HTML5 a la Flash

Screenshot Adobe Edge

Por: Francisco Tirado

Acaba de salir el primer preview de Edge por Adobe, inmediatamente baje la versión de Mac y me puse a trabajar!

¿Por qué la pompiadera?
Para quienes no comparten mi ánimo inmediato o no están al tanto de las recientes batallas entre el Flash plugin y HTML5 (ya no tan reciente desde que HTML5 ganó), Edge es la respuesta de Adobe a los ataques de Steve Jobs por incosistencias en el player en Mac, la inabilidad de tener una version no-limitada en los aparatos móviles y en fin haber perdido la batalla contra estándares.

¿Que es?
Lo que idealmente Edge nos traerá es un IDE (Entorno de desarrollo integrado) que haga mas fácil la creación de animaciones, aplicaciones y juegos sin necesariamente saber HTML/CSS/Javascript. En mi opinión la meta no es tanto la herramienta para quienes no saben tales lenguajes, si no una manera de estructurar el código en un ambiente visual mas fácil de apreciar y entender por varios programadores.

El GUI
Habiendo sido un fiel usuario de Flash por años, me resultó bien facil de usar, se siente como la versión futurística de la version del 1994 de Flash; explico…
Aunque el GUI (Interfaz gráfico de usuario) está a la par con los programas populares de Adobe inclusive mas ‘sleek’ que CS5; siendo el primer preview falta la mayoría de todo. Tanto asi que las herramientas con que uno cuenta son sólo tres: el pointer, un rectángulo y rectángulo con esquinas curvas. Por el momento no hay círculos, ‘paths’ y mucho menos movieclips.

¿Donde está el MovieClip?
Para todos aquellos que vienen del mundo de Flash conocen lo importante y poderoso que es un movieclip. Es tan importante que paré todo un momento y me pregunte cómo no había algo parecido… Mientras lo extrañaba me puse a pensar en el enfoque de diseño que le está dando Adobe a este proyecto. Realmente no hay necesidad para un movieclip, tus objectos son tan sofisticados como quieras determinar por Javascript. Por ejemplo, una vez termine mi animación en Edge quería que hiciera un loop y al no encontrar como hacerlo en el programa, escribi lo siguiente en el ready function:

 

El Código
Con esta realización me puse a verificar el código que genera Edge y es lo mas limpio que he visto ser generado por un programa. Se acabó el tiempo pre-web2.0 de los plugins con valores duplicados para ’embed’ y ‘object’, ahora parece que esto lo hizo la misma w3c. Todo está super organizado al abrir el bonete y obviamente el motor es jQuery. El css viene generado con fallbacks e interpretaciones específicas para cada browser. Todo lo que es Javascript está en un file aparte. Estoy seguro que en un futuro se podrán usar los CDN de Google y quizas comprimir los ‘.js’.

No todo es fiesta sin embargo, mayormente porque no se puede hacer casi nada con la aplicación, pero es el inicio. Edge puede ser el jQuery de javascript, y un punto de entrada para animadores y diseñadores a HTML/CSS/Javascript.

Aquí una animacioncita que hice.

3 thoughts on “Adobe Edge: HTML5 a la Flash”

    1. Lo primero que debo decirte que si quieres hacer un “flash intro” te detengas y pienses por un rato en esto. ¿Cual fue la ultima vez que viste un site con un intro y no buscaste el boton de “skip intro”? Si la respuesta es que siempre te gusta ver el intro y nunca le das skip te quiero decir que estás en el 0.01% de las personas que ven los intros en un website. Mi recomendación en pocas palabras es nunca poner un intro en un website.

      Dicho esto, creo que una herramienta como Animoto (http://animoto.com/) te puede ser muy útil, partiendo de la premisa de que no tienes conocimiento en programación.

      Espero que esto te ayude y recuerda si sientes la necesidad de poner un intro,  para y no lo hagas  :D

Leave a Reply