Control de una galería de SlideShowPro desde JavaScript y jQuery

11 Jul 2011


Ya tenía un par de semanas pendiente para escribir este artículo y fue algo que surgió mientras trabajaba en un proyecto de consultoría, en donde teníamos que tener modificar la paginación que crea por defecto el SlideShowPro y utilizar una que nosotros mismos pudiéramos modificar a disposición. La paginación que tiene SSP por defecto es genial, muy intuitiva, linda, con una imagen de preview fácil de navegar y demás, el hecho es que no tenemos una opción sencilla de poder tener botones diferentes o nuevos con los números de las fotos para poder navegar entre ellas, por lo que revisando el API de SSP descubrimos que teníamos la facilidad de poder manejar y utilizar los datos provenientes de la galería a nuestro antojo. Uno de estos datos son la cantidad de fotos. Además, existe otro método dentro del API de SSP que permite poder cargar una foto específica (especificando el número de foto que queremos cargar), por lo que ya teníamos todo a nuestra mano para poder hacer el trabajo: el número de fotos y como cambiar de una a otra.

Pero yo no se Flash Y bueno, aquí es donde venía el asunto. Yo hace más de 5 años no hago nada en Flash (gracias a Dios). Realmente Flash no me gusta, no me gusta trabajar con él y no divierto siquiera abriendo el Adobe Flash. El ActionScript, realmente no me molesta tanto y luego de varios meses trabajando con Flex me he acostumbrado bastante a él, ya casi me es más indiferente que fastidioso. En Flex los componentes visuales (llámese los botones) los podríamos crear muy fácil, pero estábamos en Flash, además necesitábamos que los botones se pudieran estilar fácilmente sin la necesidad de abrir el .fla en un futuro e importar nuevos botoncitos hechos en imágenes. Lo que me recordó que Flash tiene a su disposición las External Interface que permiten que nuestros componentes de Flash puedan ser manejados de forma externa por por medio de JavaScript y ejecutar a funciones de JavaScript desde el mismo ActionScript. Todo dicho, quedamos con una conclusión: podríamos hacer los botones en HTML, estilizarlos con CSS común y manejar la funcionalidad (cambiar las imágenes) desde JavaScript, que a su vez llamaría a una función o método en ActionScript. Trabajando con el ExternalInterface La idea era la siguiente: cuando los datos del álbum de SSP se cargaban se obtuviera la cantidad de imágenes disponibles, lo que ejecutaría una función de JavaScript que dibujara los botones en donde se lo señaláramos. Esto es muy simple, agregando en nuestro .fla (en Actions) el siguiente código:

Luego, teníamos que hacer otro método que escuchara cada vez que una función de JavaScript se ejecutara, para eso tuvimos que escuchar la función de JavaScript (dentro del ActionScript) y que cada vez que se ejecutara, enviara un evento en el ActionScript, que ejerce un cambio de imagen. Así, nuestro código de ActionScript en el Flash queda de la siguiente manera:

Bienvenido jQuery y trabajando con el JavaScript. Amo jQuery, ¿sabían?. jQuery es una gran librería de JavaScript que permite el manejo del DOM de manera sencilla, nada de Rocket Science, es simple y cumple su cometido de la forma que debería. Aún cuando tenemos la opción de hacer que los botones ejecuten un método en JavaScript (con el onclick) hace años he sentido que no debemos escribir esto de manera obstrusiva. Lo que hicimos fue crear un pequeño plugin en jQuery que pudiera recibir como parámetro la cantidad de fotografías y él solo creara los botones, con su funcionalidad de click, que a su vez ejecutara una función que escucha que botón (o número de foto) estamos tratando de visualizar, lo que a su vez cambia la foto en el SSP directamente (desde JavaScript hasta el ActionScript/Flash). El plugin de jQuery sólo hace esto: obtiene la cantidad de fotos e itera entre esta cantidad para crear un botón por cada foto. Pueden obtener el pequeño plugin por acá. Sin embargo, también necesitamos una función que será nuestro punto de salida, una vez se obtienen la cantidad de fotos o imágenes en la galería. Esta función tiene como función iniciar nuestro plugin que a su vez creará los botones y la funcionalidad relacionada a cada uno de ellos. Esta función debe tener el siguiente código:

Y ya estamos listos, deberíamos poder controlar toda la funcionalidad de SSP desde el JavaScript y estilizar nuestros botones sin la necesidad de tocar nunca más el Flash, todo desde HTML, CSS y JavaScript. Puedes ver un DEMO de la aplicación.


Demóstenes García G.

Ingeniero Electrónico con experiencia en Ingeniería y Desarrollo de Software. Agilista, interesado en Analítica y Ciencia de Datos. Co-fundador en Pixmat, CIO en IFARHU. Twitter.