Universal AJAX Live Search

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

Adobe Edge Animate no se limita solo al diseño de animaciones para web; podemos crear aplicaciones y cargar contenido externo como archivos JSON o lograr la integración de  API´s (Application programming interfaces) de los servicios más populares como Facebook, Twitter, Youtube, etc.

Si bien uno de los objetivos de Edge es sacar el mayor provecho de la aplicación sin la necesidad de saber Javascript (u otro lenguaje de programación), hay momentos en los que será necesario el uso de código, sobre todo cuando queramos llevar nuestros proyectos a un nuevo nivel y aprovechar toda la capacidad del programa. Aunque no nos vamos a meter de lleno a la programación en Javascript o jQuery en este curso, vamos a hacer un ejercicio, que integre Edge Animate con Google Maps con sólo un par de líneas de código.

1.- Creamos un nuevo archivo en Edge y dejamos los valores que nos da por default el programa.

2.- Con la herramienta Rectangle Tool hacemos un rectángulo de 500px x 350px y lo centramos en nuestro Stage.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

Lo seleccionamos y lo convertimos a Symbol con el nombre de miMapa.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

3.- Damos doble click sobre el rectángulo para entrar al símbolo. Sabremos que estamos dentro del símbolo una vez que todo nuestro Stage se oscurece y únicamente resalta nuestro (o nuestros objetos) que estén dentro de él. También en el panel Properties deberás ver el nombre de tu símbolo.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

Asegúrate de no tener seleccionado el rectángulo y vamos a abrir el panel de Acciones desde las { } que están en el panel Properties.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

Selecciona creationComplete.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

creationComplete se ejecuta inmediatamente después de que un símbolo es creado e inicializado, pero antes de que ocurra la acción autoPlay. En otras palabras, gana un poco de tiempo para cargar el mapa antes de cargar el demás contenido.

4.- Dentro del panel de edición de código tecleamos lo siguiente:

var container = sym.$("Rectangle");

Lo que estamos haciendo es darle el nombre de variable Rectangle a nuestro objeto que tenemos en el Stage.

Ponemos “Rectangle” ya que no hemos modificado el nombre de nuestro elemento desde que lo creamos, en caso de que lo hayas renombrado deberás poner el nombre que tiene tu rectángulo (el que vemos en la línea de tiempo).

5.- Damos enter para pasar al siguiente renglón de nuestro editor de código y escribimos:

var map = ' ';

Con ello estamos creando una variable llamada “map” que contendrá el código que traeremos desde Google Maps.

Integración de contenido externo (Youtube, Google Maps, etc) en Edge Animate

6.- Vamos a http://maps.google.com y tecleamos alguna dirección o nuestra ubicación o el mapa específico al que queramos hacer referencia. En este caso hemos seleccionado el AT&T Stadium, en Texas. Vamos a la opción de Share & Embed Map y en la ventana que se abre seleccionamos la opción Embed map, que básicamente lo que hace es darnos un iframe conteniendo la información del mapa.



Copiamos el código y regresamos a Edge Animate.

Tutorial Edge Animate

7.- En el código que pusimos, en la variable map, entre los ' ' pegamos el iframe que acabamos de copiar de la página de Google Maps.

Buscamos en el código que acabamos de pegar los atributos de ancho y alto (width="600" height="450") y vamos a cambiarlos, ya que no queremos que el mapa tenga estas dimensiones, si no que se ajuste al tamaño de nuestro rectángulo.

Edge Animate

En el valor de width, entre las “ ” ponemos el siguiente código:

'+container.width ()+'

En el valor de height, entre las “ ” vamos a poner el siguiente código:

'+container.height ()+'

De manera que tu código quede de la siguiente forma:

width=" '+container.width ()+' " height=" '+container.height()+' "



8.- En la siguiente línea vamos a escribir:

container.html(map);

Lo que estamos haciendo aquí es agregar el iFrame (que integramos en nuestra variable map) a nuestro container que en este caso es Rectangle.

Edge Animate

Cerramos nuestro panel de código, regresamos a nuestra línea de tiempo principal y probamos nuestro proyecto en un explorador web (cmd+Return).

Si todo sale bien deberás ver el mapa en tu explorador.

Edge Animate

Puedes probar haciendo el mismo ejercicio pero ahora embebiendo un video de youtube, el procedimiento es exactamente el mismo y únicamente tendrás que copiar el código (iframe) de youtube. Asegúrate también de que la proporción del video que estás embebiendo sea la misma que tiene tu rectángulo, esto solo para que no se deforme la imagen del video.

Déjanos tus dudas o comentarios, o si quieres puedes DESCARGAR EL CURSO COMPLETO PARA iPad o en su versión para Kindle para conocer la interfaz, hacer animaciones que sigan trayectorias de un path, utilizar google web fonts, integrar contenido externo (como youtube o google maps, etc), así como añadir elementos interactivos mediante triggers y acciones para dar una mejor experiencia al usuario.

Creación de un banner animado en HTML5, con Adobe Edge Animate