| Artículos | 01 JUL 2001

Cómo crear máscaras para Windows Media Player

Tags: Histórico
José M. Alarcón.
El reproductor multimedia de Microsoft (WMP), en su versión 7 o superior, ofrece la posibilidad de adaptar su aspecto a las formas y diseños que deseemos. En este artículo práctico veremos cómo se pueden crear las máscaras o skins para ponerlo a nuestro gusto. Además, regalamos a nuestros lectores una máscara especial de PC World.

Las máscaras o skins no son ninguna novedad en el mundo de la informática, ni tampoco en el de Windows. Algunos programas conocidos, como el reproductor de MP3 Winamp (tal vez el pionero), ofrecen la posibilidad de modificar su aspecto y la distribución de sus controles de forma dinámica, para adaptarlos fácilmente a nuestro gusto o estado de ánimo. Uno de los programas más utilizados hoy en día para reproducir archivos multimedia es Windows Media Player (WMP) de Microsoft, que incorpora esta característica.
Aparte de utilizar las máscaras para adecuarlas a nuestros gustos o hacer más fácil el uso de los programas, una de sus aplicaciones más importantes es la promoción de una empresa, producto o servicio. Muchas emisoras de radio en Internet emplean sus propios skins para WMP, de forma que cuando estamos conectados a ellas su aspecto cambia, e incluso se nos ofrecen servicios adicionales y publicidad mientras escuchamos la emisión.
A continuación explicamos los pasos básicos a seguir para crear una máscara propia para Windows Media Player. Con ellos podremos crear una máscara muy sencilla, ya que las funciones más complejas requieren ciertos conocimientos de programación, aunque no son excesivamente difíciles de desarrollar, sobre todo basándose en otras preexistentes.
Es por ello que, como complemento al artículo, hemos desarrollado la máscara de PC World, que posee muchas más funcionalidades que las básicas mostradas en este artículo (por ejemplo, un panel desplegable, ecualizador, lista de reproducción, etc.). Puede encontrarla en el CD “Especial Imagen Digital” que acompaña a esta revista, o descargarla desde nuestra web (www.idg.es/pcworld). Si analiza el código de definición de esta máscara, averiguará cómo se consiguen algunos de los efectos. Si está muy interesado en este asunto le recomendamos que se descargue el Kit de Desarrollo de Skins de Windows Media Player, disponible en www.microsoft.com/windows/windowsmedia/.

1- Crear la imagen principal de la ventana
Lo primero que debemos hacer es crear el gráfico que actuará como fondo de la ventana del reproductor multimedia, y que será lo primero que se vea al ejecutarlo. Este gráfico puede ser cualquiera y tener cualquier forma caprichosa, y albergará algunos controles y zonas especiales que hay que tener en cuenta a la hora de diseñarlo para dejar los huecos correspondientes.
En el ejemplo de la figura, nuestro reproductor de PC World, hemos dejado huecos para las zonas más importantes, a saber:
• Efectos gráficos y vídeo: es en esta zona donde se mostrarán los efectos del reproductor, así como las imágenes de vídeo en caso de haberlas. En este caso hemos optado por que ambos compartan la misma área de la máscara pero, como enseguida veremos, no tiene por qué ser así. Esta opción es la más habitual, ya que en general no es importante ver los efectos gráficos cuando estamos reproduciendo un vídeo.
• Guías deslizantes: como mínimo debemos dejar hueco para dos guías deslizantes que nos permitirán controlar el volumen del sonido y la posición de la película o archivo multimedia. En la figura se han colocado en la parte inferior.
• Botones de control: colocaremos estos botones bajo la zona de visualización. Por este motivo se ha dejado un hueco tan grande entre las dos zonas comentadas anteriormente.
• Informaciones varias: normalmente se dejan como mínimo dos zonas que mostrarán el tiempo transcurrido en la reproducción y el título y autor del archivo multimedia que se está reproduciendo. En este caso, el pequeño rectángulo situado inmediatamente debajo de la guía más baja es el que mostrará la duración. El título y autor se mostrarán debajo del logotipo de PC World, pero la zona no se ha resaltado en esta máscara de base.
Aparte de estos elementos pueden existir otros, como paneles desplegables, y varios tipos de botones con distintos propósitos. En esta máscara de base debemos usar un color de fondo que no se vaya a utilizar en ninguna otra parte del gráfico. Este color posteriormente será eliminado para hacer las zonas de recorte del skin. Existe otro color especial, que será el que se utilice como zona transparente de cada una de las capas que constituyen el skin. En nuestro ejemplo, el color rojo que vemos como fondo será la parte de la ventana que desaparecerá. El color morado de la zona de visualización se considerará transparente a efectos de los elementos contenidos en la máscara, de modo que cualquier otro gráfico que se coloque debajo sea visible.

2- Dibujar una botonera
Uno de los elementos más importantes son los botones que nos permiten controlar la reproducción. En la figura se muestra la botonera que hemos diseñado. Los botones, de izquierda a derecha y de arriba abajo, son: reproducción/pausa, archivo anterior, archivo siguiente, stop, minimizar ventana, cerrar aplicación y volver a modo completo, para poder escoger otra máscara diferente.
Se deben crear tres versiones de la botonera, aparte de la que se muestra habitualmente. Una de ellas sirve para definir el aspecto de cada uno de los botones cuando el cursor del ratón pase por encima, resaltándolo (imagen Hover). La otra imagen define el aspecto de cada botón cuando se hace clic en él (imagen Clic).

3- Definir un mapa de colores
Para indicar al reproductor qué función tiene cada botón de los que define el gráfico anterior se puede utilizar programación. Sin embargo, es mucho más sencillo utilizar un mapa de colores como el que muestra la figura. Creamos varias formas de colores distintos adaptándolas al contorno de cada uno de los botones. Este archivo servirá para indicar al reproductor la función de cada botón. Como se deduce fácilmente en base a esta figura y la anterior, el color azul definirá el botón de reproducción, el color rojo el de pasar a la canción anterior, etc. Es recomendable guardar este gráfico, al igual que todos los anteriores, en el formato BMP, para que no existan las pérdidas de resolución y colores propias de otros formatos como JPEG.

4- Construir el archivo de definición
El archivo de definición es un simple archivo de texto (XML) con extensión .WMS que indica al reproductor cómo debe usar cada uno de los elementos que hemos creado anteriormente. El contenido de este archivo siempre debe ir entre una pareja de etiquetas <theme> </theme>. Consulte el archivo de ejemplo disponible en el CD y la web de PC World para entender mejor lo que se explica a continuación.
La información básica que hay que utilizar es la siguiente:
• La vista principal: indica cuál es el gráfico de fondo de la ventana, sus dimensiones y los colores de recorte y transparencia entre otras informaciones. Su contenido en nuestro caso básico es:
<view width=”400” height=”365”
backgroundImage=

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información