Arte y Logica

Integrando Expression Engine y Slideshow Pro

En nuestro último proyecto www.villasbytekoa.com usamos Expression Engine en conjunto con Slideshow Pro en la mayoría de las páginas.

Para muchos puede ser sencillo el cómo integrarlos, para los que no, aquí hay unos ejemplos del código que estámos utilizando en el sitio.

En la mayoría de los casos cada página o post está relacionado a un slideshow en particular. En nuestro caso son XML generados por SSP Director, aunque igualmente pueden ser XML hechos a mano.

Del lado de Flash solo necesitamos por lo tanto obtener el URL del XML y el formato del XML, en nuestro caso Director.

Esto se logra en ActionScript 3 por medio de la clase loaderInfo. Creamos un Objeto loaderInfo y le pedimos algunas de las variables que queremos para nuestro componente de SSP.

Aquí está el ActionScript (que asume que el componente tiene una instancia llamada my_ssp):

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
if (paramObj.xmlfile) { my_ssp.xmlFilePath = paramObj.xmlfile; }
if (paramObj.xmlfiletype) { my_ssp.xmlFileType = paramObj.xmlfiletype; }

Le pedimos que busque en el object paramObj la variable xmlfile y la variable xmlfiletype. Las obtenemos y se las pasamos al componente my_ssp.

Esas variables se las hacemos llegar al .swf por medio del script que usamos para hacer el embed del flash en el html (Usamos swfobject, que es ya practicamente un método default para hacer embed de flash).

Aquí está el codigo completo que usamos dentro del Expression Engine weblog tag. Mientras EE hace loop por los artículos, genera el código necesario para que cada .swf obtenga su propio xml.

<script type="text/javascript">
 
var flashvars = {
xmlfile:'{xml}',
xmlfiletype:'{xml_type}'
};
var params = {};
var attributes = {};
attributes.id = "individual_flash{entry_id}";
swfobject.embedSWF("http://www.misite.com/my_ssp.swf", "flashssp{entry_id}", "320", "240", "9.0.0", "http://www.misite.com/expressInstall.swf", flashvars, params, attributes);
</script>

 
<div id="individual_flash{entry_id}">
 
<div id="flashssp{entry_id}">
    <img src="http://www.misite.com/img/replaceme.jpg" alt="Alternative Content" />
</div>
 
</div>

Las variables que pasamos por medio de EE son {entry_id}, que le agregamos a los divs que son reemplazados por el flash. Es importante agregar el {entry_id} porque si es un blog y hay más de un post visible, el swfobject necesita un id por cada flash que va a incluir en la página.

Las otras variables que pasamos por medio de EE, son las que inicialmente solicitamos en el ActionScript. El url del XML lo pasamos por medio de la variable {xml} y el tipo de XML por medio de {xml_type}. Estas dos variables con custom fields que agregamos a nuestros EE weblogs.

Una nota más. Hay que recordar en las preferencias del weblog específico, deshabilitar la opción de generar links automáticamente de URLs. Esta opción le agrega un formato de HTML no deseado a el URL de XML y causa problemas al componente en Flash.

Espero que esto le salve unos minutos a alguien en su siguiente proyecto.