Fase de implementación. Parte gráfica.

Antes de meterse a programar las clases, yo prefiero empezar a realizar la parte gráfica. Primero un rápido esbozo de cómo debe estar todo organizado, y seguidamente con ayuda de Adobe Illustrator, realizo lo que será el reproductor: fondo del reproductor, display (artista-cancion), display de tiempo, botones… Todo esto ha de ser posteriormente importado en Flash. La compatibilidad entre ambas aplicaciones es excelente (de Illustrator CS4 a Flash CS4, pero no al revés) y de hecho admite muy bien un simple Copy-Paste.

Como he de hacer uso de bastantes botones siguiendo un mismo estilo gráfico, empiezo en Flash por crear lo que llamo botón base. Esto será un símbolo de botón, con sus respectivos estados, que posteriormente utilizaré en cada uno de los sprites de botón. A continuación una imagen de los diferentes estados del botón base.

Este botón como digo lo almaceno en la biblioteca del archivo FLA como símbolo de botón. No hace falta que lo exporte para Actionscript dado que es usado por sprites de botón (los propios botones de la interfaz de usuario: play, stop, etc) que también tendré en la biblioteca.

Seguidamente creo el resto de elementos gráficos, como se ve a continuación:

El símbolo reproductor contiene a su vez otras instancias de símbolos, que comentaré más adelante, pero antes es necesario mencionar que estos símbolos gráficos que se ven, los he colocado en un fotograma clave del fotograma 2, al que llamo figuradamente inventario, para que el preloader funcione bien (más adelante explicaré el preloader). Además, en el fotograma 1, en el panel Acciones he añadido un simple stop() para que la película no se reproduzca hasta el fotograma 2. La línea de tiempo quedaría de esta manera:

Otro requisito típico en Flash para que el preloader funcione bien es que todos aquellos símbolos de la biblioteca que sean exportados para Actionscript, no sean exportados en el fotograma 1, exceptuando el propio gráfico del preloader. Esto se hace deseleccionando la casilla correspondiente en las propiedades del símbolo.

Dicho esto, sigo con el símbolo reproductor. Este símbolo contiene a su vez una serie instancias de símbolos. Como una instancia del reproductor será colocada con Actionscript en el escenario en tiempo de ejecución, todas las instancias contenidas estarán automáticamente disponibles. Por eso les puedo poner un nombre de instancia a cada una de ellas para identificarlas en Actionscript, como se ve en la imagen de la Fig.4:

En la Fig.5 están a su vez los nombres de instancia de los símbolos contenidos en barraTiempo:

A continuación, un repaso a todos los elementos gráficos de la biblioteca:

Repasemos los símbolos. Los símbolos de color azul, son clips de película que no necesitan ser exportados a Actionscript, porque están contenidos en una instancia de reproductor, y una vez tengamos este en el escenario, estarán ahí disponibles en todo momento, gracias a los nombres de instancia dados. Un ejemplo de estos símbolos, el símbolo botonStop. Una vez esté el reproductor en el escenario, este botón estará ya disponible gracias al nombre de instancia que le hemos dado: botonStop (ver Fig.4)

Los símbolos de color verde son símbolos de clip de película que sí que exporto para Actionscript como clases que heredan de flash.display.Sprite. Mejor que hereden de Sprite que de MovieClip, porque ninguna de ellas necesitará línea de tiempo propia y nos quitamos funcionalidad extra innecesaria proporcionada por la clase MovieClip. A todos estos símbolos se les asocia un nombre de clase para que al crearlos desde Actionscript podamos instanciar a cada uno como una clase más. Por ejemplo, el símbolo botonPlay, lo exportamos a Actionscript porque cuando lo cliquemos, deberá ser sustituído por una instancia de botonPause. Hasta aquí, no haría falta exportar botonPlay para AS, dado que tenemos su nombre de instancia en el reproductor. Pero al clicar en el botón de pausa, deberemos volver a colocar el botón de play que habíamos eliminado. Hay que importarlo en Actionscript desde la biblioteca. De ahí que botonPlay sea exportado a Actionscript. Su nombre de clase es BotonPlay

Botones como play, pause, no repetir, random off, etc, no tienen ninguna clase personalizada porque toda su funcionalidad la obtenemos heredando de Sprite. Sin embargo, otros símbolos como reproductor, preload o barraTiempo tienen cada uno asignado una clase personalizada, que programaremos nosotros. Cada una de estas clases corresponde con las clases de la Vista del modelo MVC, por eso están empaquetadas en el paquete vista, y los nombres de clase son respectivamente Reproductor, Preload, BarraTiempo. Las tres clases tienen como clase base Sprite, o sea, heredan de Sprite.

También se ven dos componentes de Actionscript, List y Slider. List servirá para mostrar la vista de la lista de canciones, y Slider, para el control de volumen. Ambos componentes los he editado para cambiarles el aspecto de color.

Por último, he importado a la biblioteca una fuente, la Century Gothic Regular, que será exportada a Actionscript para usarse como texto de la lista List. Importando esta fuente me aseguro de que en cualquier ordenador se vea la fuente, aunque no la tenga instalada en su sistema. Le doy el nombre de clase CenturyGothicRegular. Heredará como es lógico de flash.text.Font.

Antes de continuar, falta asignar unos valores al componente Slider desde el Inspector de Componentes. Se puede hacer también mediante código, pero como el componente ya lo tenemos editado, podemos hacerlo desde aquí y así nos evitamos código adicional. Veámoslo en la Fig.7:

liveDragging lo cambiamos a true, para que el valor del volumen cambie durante el arrastre y no cuando se finalice. minimum y maximum los establecemos en 0 y 1, de forma que el valor siempre se situará entre estos dos límites, los cuales se corresponden con los valores mínimo y máximo del sonido. snapInterval establece el número de desplazamientos posibles en el Slider. A valor más pequeño, mayor suavidad en el desplazamiento. Si fuera 0.5 con un mínimo de 0 y un máximo de 1, el Slider solo tendría las posiciones inicial, central y final. Un valor como 0.01 nos vale. tickInterval lo dejamos en 0. Esta propiedad permite mostrar una pequeña regla en la barra del Slider. value lo dejamos inicialmente en 1, o sea, el columen estará al 100%.