Animaciones HTML5 con Adobe Edge

Adobe Edge es una aplicación que te permite crear animaciones para la web. Es una alternativa a la tecnología Flash para el diseño de materiales cuando se pretenden utilizar en dispositivos de telefonía móvil y tabletas tipo iPad que no disponen de Flash Player. En este artículo de canaltic.com se ofrece un tutorial donde se explica paso a paso cómo diseñar una animación sencilla utilizando esta aplicación.

HTML5 + CSS3 + JavaScript

Actualmente Adobe Edge es una herramienta en versión beta y no dispone de la infinidad de prestaciones multimedia y de programación de Flash. Sin embargo es un buen comienzo para afrontar el diseño de animaciones en código abierto no propietario y destinado a todo tipo de navegadores y dispositivos. Este editor proporciona un interfaz amigable donde partiendo de textos e imágenes, se facilita su distribución espacial sobre el escenario y su distribución temporal a lo largo de una línea de tiempo. También admite el diseño de botones para controlar la reproducción de la animación. El resultado final es un conjunto de archivos que utilizan tecnología HTML5, CSS3 y Javascript para mostrar contenidos animados.

Requisitos de Adobe Edge

Adobe Edge preview 5 funciona en sistemas Windows 7+ y Mac OS X v10.6+. No es compatible con sistemas operativos anteriores: Vista, XP, etc.

Tutorial de iniciación

Ejemplos

Animación del automóvil:

[Descargar ZIP con ejemplo]

Presentación de fotos:

[Descargar ZIP con ejemplo]

Enlaces de interés:

 

 

También te podría gustar...

4 Respuestas

  1. Muy buenos tutoriales sobre Edge. ¿Tendrás algún otro? Saludos desde Venezuela!

  2. Anna dice:

    Estimado Fernando, te doy las gracias por esta aportación para Adobe Edge, extremadamente útil para los que somos un tanto torpes con el código.

    Tengo un problema con el que te agradecería me ayudases: he creado un banner para mi sitio, y pretendo que éste enlace (al hacer clic el usuario) con otro documento de la página. ¿Podrías indicarme cómo hacerlo?

    Muchas gracias, recibe un cordial saludo,
    Anna

    • Fernando dice:

      Hola Anna,
      Te adjunto el ejemplo ya hecho: banner.zip.
      Los pasos para diseñarlo:
      1) Abres un nuevo documento.
      2) En el panel de Propiedades defines el tamaño del banner. Los valores estándar son: 728×90, 468×60, 392×72, 234×60, etc.
      3) Eliges Archivo > Importar para importar la imagen al escenario.
      4) Clic derecho sobre la imagen y eliges la opción “Abrir acciones para …”
      5) Eliges el evento “click”
      6) Luego la acción “Abrir URL”.
      7) En el código generado modificar la dirección de http://www.adobe.com por la URL que deseas introducir.
      8) Selecciona la imagen y en el panel de Propiedades elige como Cursor el icono de Pointer (mano).
      9) Elige Archivo > Guardar como … para guardar el diseño en una carpeta.
      10) Copia y pega el código HTML de la página HTML generada en el lugar de la página donde deseas colocar ese banner.
      11) Recuerda que tienes que copiar las carpetas y archivos de javascript *.JS generados para que funcione en la página destino.

      Un saludo

      • Anna dice:

        Hola Fernando!!! Muchísimas gracias por tu tiempo y detallada respuesta. Finalmente encontré cómo hacerlo, pero obvié guardar todos los documentos que me genera el propio programa, con lo cual una vez colocado en la página, el banner no se veía correctamente… ahora entiendo por qué, jajaja!!!

        Un millón de gracias y feliz fin de semana!!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *