Animaciones Con Adobe Edge

Animaciones HTML5 con Adobe Edge 2012. FPP. canalTIC.com

Animaciones HTML5 con Adobe Edge
1. ¿Qué es Adobe Edge?
Adobe Edge es una aplicación que te permite crear animaciones para la web. Es una alternativa a Flash para el diseño de materiales que se pretenden utilizar en sistemas y navegadores web que han decidido no incluir Flash Player en su distribución original. Es el caso de losdispositivos de telefonía móvil y tabletas iPad. En este documento se expone un tutorial donde se explica cómo diseñar una animación sencilla utilizando esta aplicación. 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 nopropietario 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 queutilizan tecnología HTML5, CSS3 y Javascript para mostrar contenidos animados. 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. Algunos ejemplos creados con esta herramienta están disponibles en la dirección: http://labs.adobe.com/technologies/edge/resources/

2. Descargar e instalar Adobe Edge
1. Visitala web oficial de Adobe Edge (http://labs.adobe.com/technologies/edge/) para descargar este programa (Download now). Es necesario registrarse como usuario de Adobe para completar el proceso. 2. Como resultado de la descarga se obtiene el archivo edge_p5_install_win_XXXX.zip. Descomprime el ZIP y obtendrás una carpeta con el mismo nombre. 3. Accede al interior de la carpeta y haz doble clic sobreel asistente de instalación Setup.exe para ejecutarlo.

4. Acuerdo de licencia del software de Adobe. Clic en el botón Aceptar.

Animaciones HTML5 con Adobe Edge 2012. FPP. canalTIC.com

5. Opciones de instalación. Se indica el Idioma de instalación (Español) y la carpeta de Ubicación del programa. Conviene aceptar las opciones por defecto. Haz clic en el botón Instalar. 6. Después de unosminutos se completará la instalación del programa. Clic en el botón Cerrar. 7. Para iniciar el programa desde el escritorio de Windows selecciona Inicio> Todos los programas > Adobe Edge Preview. 8. Al entrar por primera vez se mostrará un mensaje de advertencia donde se indica el número de días que durará la versión de prueba instalada. Hasta el momento se contempla la desinstalación de unaversión caducada y la posterior instalación de la siguiente versión descargada de la web.

3. El entorno de Adobe Edge
1. Para abrir Adobe Edge selecciona Inicio > Todos los programas > Adobe Edge Preview. Se puede situar un acceso directo en el escritorio arrastrando este icono hasta el escritorio mientras se mantiene pulsada la tecla Ctrl.

2. En el panel Get Started (Comenzar) haz clic en elbotón Create New (Crear Nuevo) o bien selecciona File > New (Archivo > Nuevo).

3. El interfaz del programa tiene bastante similitud con Adobe Flash. Consta de las siguientes áreas:

Animaciones HTML5 con Adobe Edge 2012. FPP. canalTIC.com

1. Barra de Menús. Ofrece el acceso a todas las opciones del programa en una barra de menús que es típica en programas Windows: File, Edit, View, …(Archivo, Editar, Ver,…) 2. Barra de Herramientas. Dispone de las principales herramientas de trazado y ubicación de elementos sobre el escenario: Selección, Transformación, Recorte, Rectángulo, Rectángulo redondeado, Texto, Color del Fondo, etc. 3. Panel de Propiedades. Permite editar las propiedades del escenario (Stage) o del objeto que esté seleccionado actualmente sobre el escenario. Estas...