ProInf.net

Menú web con Flash y XML

Francisco 23-06-08
Menús con tubos

Es un menú en Flash que lee la información a mostrar de un archivo XML. El fichero XML estará organizado en menús y opciones. Los enlaces pueden ser a otras películas de Flash, a fotos o a páginas web. Está programado mediante clases con ActionScript 2. El código fuente está disponible.

El menú XML a pantalla completa…

Ejemplos

Datos

Los datos del menú se almacenan en el archivo menu.xml que se puede pasar por un parámetro URL. El parámetro se llama xml

Ejemplo de una archivo XML:

<menuxml>

<menu id="index" title="Indice" >
<option title="Animales" menu="ani" />
<option title="Vegetales" menu="veg" />
<separator title="Contacto" />
<option title="ProInf.net" url="http://www.proinf.net/" />
</menu>

<menu id="ani" title="Animales" base="/Animales/" width="600" height="450" >
<option title="Tigre" link="tigre.jpg" color="#660000" />
<option title="Tiburón" link="tiburon.jpg" color="#0000AA" />
</menu>

<menu id="veg" title="Vegetales" base="/Vegetales/" >
<option title="Manzana" link="manzana.jpg" color="#008800" width="500" height="400" />
<option title="Berenjenas" link="berenjenas.jpg" width="600" height="450" color="#FFFFFF" />
</menu>

</menuxml>

Características del XML:

  • Etiquetas:
    • La etiqueta menuxml es la raíz
      • Atributos: background, animated
    • La etiqueta menu sirve para definir un menú.
      • Atributos: id, title, base
    • La etiqueta option es una opción del menú
      • Atributos: title, menu, link, width, height, color, loader, scale
    • La etiqueta separator separa las opciones del menú
      • Atributos: title
  • Atributos:
    • El menú debe tener un id que lo identifique
    • El menú con identificador index es el menú de inicio
    • Para realizar un enlace a un menú se usa el atributo menu donde se indica el id del menú
    • Para hacer un enlace se usa el atributo link.
    • Los atributos width, height y color definen la anchura, altura y color de fondo de los contenidos enlazados. Si se indican estos atributos en la etiqueta menu afecta a todas las opciones que incluye. Cada opción puede definer estos atributos de modo particular. El tamaño por omisión es 550×400 píxeles.
    • El atributo base del menú se utiliza como prefijo para los enlaces relativos.
    • El atributo title se puede usar en las etiqueta menu, option y separator.
    • Con el atributo background podemos indicar un color de fondo o una imagen de fondo para la película.
    • Con el atributo animated podemos desactivar las animaciones del menú. Puede ser "on" o "off".
    • Con el atributo loader podemos desactivar el cargador si la película a cargar ya incluye un cargador propio. Puede ser "on" o "off".
    • Con el atributo scale podemos desactivar el escalado automático por si trabajamos con fotos. Puede ser "on" o "off".
  • Codificación
    • El archivo XML se ha de escribir con codificación UTF-8 para que admita acentos y caracteres especiales. El editor Notepad++ (software libre) tiene en su menú la opción Formato y Codificar en UTF-8.

Diseño

La apariencia del menú y del contenedor se puede personalizar editando el archivo pelicula.fla.

Clip brick:

Este clip de película define el aspecto visual del menú. Cada fotograma define una pieza distinta para montar el menú. Las etiquetas de fotograma son las siguientes:

  • title - El título del menú.
  • option - Una una opción no visisitada; en la que aún no se ha hecho clic.
  • option_visited - Una opción que ya ha sido visitada.
  • separator - El separador de opciones.
  • option_selected - Una opción cuando tiene al ratón encima.
  • option_active - Una opción cuando se le está haciendo clic.
  • bottom - La parte inferior del menú.

El clip brick incluye una instancia del clip current para indicar la opción actualmente seleccionada. Este clip tiene dos fotogramas etiquetados como no y yes.

Clip container:

Define el lugar dónde se visualizarán las películas cargadas mediante el menú. Contiene distintos clips con nombre de instancia:

  • mc_container - El nombre del clip dentro de la escena
  • mc_target - Donde se carga y visualiza la película o foto seleccionados
  • mc_mask - Crea una máscara para que mc_target no se puede visualizar más alla de su tamaño definido.
  • mc_background - Sirve para modificar el color de fondo.
  • mc_limits - Indica los límites máximos que se pueden alcanzar en modo no maximizado.
  • mc_nortwest, mc_north, mc_northeast, mc_west, mc_east, mc_southwest, mc_south, mc_southeast - Se encargan de mostrar un borde por todo el contorno exterior.
  • mc_percent - Indica el progreso de carga mediante una animación de cien fotogramas y una etiqueta de texto dinámico.
  • mc_buttons - Contiene los botones de maximizar, restaurar y minimizar.

Clip container

Imagen de fondo:

  • Carga como imagen de fondo el archivo fondo.jpg. Debe estar en la misma carpeta que la película del menú. La imagen tiene un tamaño de 1300×900 píxeles, mayor que el de la película que tiene 900×700 píxeles. El tamaño superior se usa para no ver los desbordamientos.

Programación

El proyecto de Flash se abre a través del archivo proyecto.flp. Está programado con ActionScript 2.0

Clases:

  • Animatron - Centraliza todas las animaciones realizadas por Brick, Multibricks y Container. Usa la clase Tween para realizar las animaciones. Contiene únicamente métodos estáticos.
  • Brick - Puede ser una opción, un título o un separador del menú. Hereda de Family. Un menú incluye varias instancias de Brick.
  • Clip - Encapsula la gestion de un MovieClip. Es la clase base para Family. Gestiona los enlaces del tipo origen y destino.
  • Console - Contiene métodos estáticos para mostrar mensajes de ayuda a la depuración. Corresponde con un texto dinámico de la película principal.
  • Container - Esta una clase singleton. Corresponde con la instancia container de la película. Se encarga de mostrar los distintos contenidos que se llaman desde el menú.
  • Data - Carga los datos del archivo XML e inicializa el primer menú.
  • Family - Clase base de Brick y Multibricks. Hereda de Clip. Gestiona dependencias de tipo padre e hijos entre los objetos como la que se da entre las clases Multibricks y Brick.
  • History - Se encarga de llevar la cuenta de los enlaces y menús que han sido visitados.
  • Initiable - Interfaz que contiene un método init. Usado por Data para iniciar el primer menú. Multibricks implementa este interfaz.
  • Link - Gestiona los enlaces que se han de abrir. Usado por las clase Brick. Esta clase utiliza Reloader para abrir un enlace.
  • Main - Inicio de la aplicación.
  • Menus - Clase singleton para gestionar todos los menús como conjunto.
  • Movierecord - Contenedor de datos para que la clase Container sepa como mostrar un enlace.
  • Multibricks - Clase para encapsular un menú. Hereda de Family e implementa Initiable. Aquí se analiza el archivo XML para crear el menú y sus opciones.
  • Profile - Clase que contiene la configuraciones general de la película. Implementa Initiable ya que lee los datos del archivo XML.
  • Reloader - Gestiona el proceso de carga de las películas. Es una clase singleton. Usa Container para mostrar el resultado.
  • Utils - Métodos estáticos de utilidad general.
  • pelicula.fla - Película con los clips brick y container utilizados en las clases.

Relaciones entre las clases principales:

Mejoras pendientes:

  • Se podría incluir una etiqueta description en las opciones para mostrar mensajes más largos asociados con las opciones del menú.
  • Cuando falla la carga de la película o foto debería mostrar un mensaje de error.
  • Incluir la imagen de fondo background y color de fondo de la película color como atributos de la etiqueta menuxml del archivo XML
  • Reposicionar el menú con el ratón cogiéndolo de su borde.
  • Se debería incluir un atributo scale para indicar como escalar cada película: "noscale" conservar el tamaño original, "scale" ocupar el máximo espacio disponible (que es la opción actual) o "expand" ajustar al espacio disponible tanto en anchura como altura.
  • Las opciones ya visitadas se marcan como tal. Faltaría mostrar como visitados los enlaces a menús que han sido visitados en su totalidad.
  • Estaría bien poder desactivar las animaciones tanto del menú como del contenedor. Quizás un atributo en el XML podría servir para tal fin animated="false". Se podría crear una clase Profile para gestionar todas estas opciones
  • Se podría desactivar el cargador de algunas películas que ya integrasen dentro suyo un cargador loader="off"
  • Crear un programa en Java que lea carpetas, subcarpetas y el formato SWF para crear el archivo XML automáticamente


Código fuente

CC-GNU GPL Este software está sujeto a la CC-GNU GPL…
Compartir

 
Ir arriba