He tenido la posibilidad de participar en la programación y estructuración de la navegación de la siguiente lista de juegos, en el blog he publicado algunos trucos y consejos para realizar estos juegos, sin embargo si alguien esta interesado en saber como se hizo alguna funcionalidad, los invito a que posteen sus dudas para compartilas con los demás.
Nota: para probar el juego click en la imagen.
He tratado varias veces de maquillar los componentes predefinidos en flash para utilizar combos de selección, pero por más que le peleo a eso, los resultados optenidos no son los mejores, por tal motivo me di a la tarea de realizar la programación con un diseño personalizado de 3 componentes muy utilizados en el envío de formularios.
A continuación el ejemplo, si alguién tiene alguna duda con mucho gusto.
Para las páginas que necesitan un destacado en el home, acá se ofrece una posibilidad para crear un contenedor administrable y de facil configuración.
Explicación de funcionamiento:
● El componente tiene siempre 3 banners fijos, 2 banners aparecen inicialmente colapsados (“minimizados”), mientras que en el medio aparece un banner central destacado.
● Cuando el usuario mueve el mouse por encima de cada banner, el banner realiza un movimiento de transición y pasa a ser protagonista, trayendo al frente del usuario la información completa que contiene.
● Cada banner es un archivo independiente, con animaciones y eventos propios dentro del contenedor.
Archivos utilizados:
● contenedorv2.fla : Archivo fuente del contenedor.
● banners.xml: Archivo xml, contiene la información de los banners que se van a cargar en el contenedor.
● contenedorv2.swf : Archivo ejecutable el cual se debe incrustar en el diseño del código html de la página que contendra el contenedor.
● Ejemplo.html: Archivo que se utiliza para probar el funcionamiento del componente, es una página web con el código necesario para configurar el componente.
● swfobject.js: Librería javascript necesaria para que se vea correctamente el archivo con extensión .swf.
Instalación del contenedor:
Para realizar la instalación del contenedor, es necesario seguir los siguientes pasos.
● Se deben poner los siguientes archivos en la misma carpeta
● banners.xml
● contenedorv2.swf
● Ejemplo.html
● swfObject.js
● Probar ejecutando el archivo Ejemplo.html, para comprobar que no exitan problemas de rutas de recursos, es decir que alguno de los componentes no se encuentren.
Dentro de este archivo encontramos el siguiente código:
<html>
<head>
<title>:: Ejemplo ::</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#ffffff">
<div id="myflash" align="center">Este site necesita el plugin de Flash Player.</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("contenedorv2.swf","id","909","233","8","#73ba0d");
so.addVariable("datos", "banners.xml");
so.addParam("wmode", "transparent");
so.write("myflash");
// ]]>
</script>
</body>
</html>
La sección que esta subrayada, nos permite indicarle al archivo contenedorv2.swf, cual es la fuente de datos para configurar el contenido.
Estructura del archivo xml de configuración:
<banners>
<banner>
<img>_contenido/img3.png</img>
<swf>_contenido/b3.swf</swf>
</banner>
<banner>
<img>_contenido/img2.png</img>
<swf>_contenido/b2.swf</swf>
</banner>
<banner>
<img>_contenido/img1.png</img>
<swf>_contenido/b1.swf</swf>
</banner>
</banners>
Es importante resaltar, la prioridad que el componente le da a la información que se va a mostrar en el contenedor, es decir, los banners se muestran en el siguiente orden:
El tag, que contiene la ruta donde esta el banner es:
● <swf>_contenido/b1.swf</swf>, es importante definir correctamente la ruta del archivo swf, teniendo encuenta crear una ruta relativa desde donde esta el archivo xml.
● Nota: El tag img, no aplica para este ejemplo, pero es necesario dejarlo para que no se afecte el funcionamiento del contenedor.
Archivos fuentes: Descargar Aquí