ProgramacionX41.

qxd

5/1/01

9:56 PM

EXPERTOS

Page 64

PROGRAMACIN

ANIMACIONES Y SONIDOS CON VISUAL BASIC

Aplicaciones multimedia
Mariano BIRNIOS
mariano@tectimes.com
Programador experto, las siglas VB ya
son sinnimo de Mariano en la editorial.

Cmo se hacen LOS CDS DE USERS? Hemos recibido

esta pregunta muchas veces, y como nunca nos
habamos ocupado del tema, les presentamos esta nota
sobre APLICACIONES MULTIMEDIA. Adems, una
breve explicacin sobre cmo utilizar ANIMACIONES
y recursos de FLASH en nuestros programas.

robablemente, a muchos de ustedes ya se les haya cruzado la idea de hacer un CD multimedia: el lbum de fotos para la nona, el CD del club de fans de Pocho La Pantera,
el CD ertico con las fotos de Panam En fin, lo que hoy nos
interesa no es el objetivo, sino cmo alcanzarlo... cmo hacer
un CD multimedia.
Por qu en Visual Basic? Bsicamente, porque es la herramienta que utilizamos en la editorial para crear los CDs que
acompaan la revista, y es una herramienta que, para nosotros, demostr cumplir. Y qu hay de Director y Flash? S, es
posible que Macromedia Director y Flash sean herramientas
ms adecuadas para hacer aplicaciones multimedia, pero con
un poco de ingenio, podremos lograr que Visual Basic cumpla
nuestras expectativas, incluso aprovechando algunas de las
ventajas de Flash.

Crear una aplicacin multimedia

Nuestro objetivo en esta nota va a ser desarrollar una aplicacin multimedia, absolutamente grfica (que no se vea ningn
control estndar de Windows), con sonido y algn chiche ms.
Para crear todos los elementos grficos, usamos Photoshop 6
(pueden sacar la demo de la USERS #117).

Botones
Por lo general, los botones son la forma ms natural de interactuar con una aplicacin. Si bien ya tenemos los famosos
Command Buttons, lo que hoy nos importa es hacer botones
grficos. En la Figura 1, pueden ver el diseo de los botones
que vamos a crear. stos tienen dos estados: uno normal y otro
encendido (Figura 2) para cuando el usuario desliza el mouse
por encima (MouseMove). Ahora bien, crear este botn requiere
de algunos trucos con controles de imagen (ImageControl).
La idea bsica es tener un formulario con la imagen de fondo (como el de la Figura 1), que incluya todos los botones
grficos en estado apagado. Luego, hay que superponer dos
controles de imgenes por cada botn:
Uno para recibir los eventos del mouse (lo llamaremos imgBoton). Este control no debe tener imgenes cargadas (es decir, la propiedad Picture debe estar vaca), tiene que ubicarse
encima de los dems y estar siempre visible.
Otro control con la imagen del botn activo (imgBoton
Over). En principio, debe tener la propiedad Visible en False.
La Figura 3 ilustra este esquema de forma ms sencilla. Tengan en cuenta que los dos controles deben ubicarse en la mis-

Figura 1. Los botones en estado

apagado sobre el fondo de nuestra
aplicacin. ste ser el estado normal
de los mismos.

Figura 2. Los botones en estado

encendido, para cuando el puntero del
mouse se desliza por encima
(MouseMove).

64

u s e r s . t e c t i m e s . c o m

Figura 3. El esquema de un botn

creado con dos controles de imagen.

ProgramacionX41.qxd

5/1/01

9:56 PM

Page 65

Visual Basic tambin nos

permite crear aplicaciones
vistosas y coloridas
utilizando elementos
multimedia, como
sonidos, imgenes
y animaciones hechas
en Flash.
ma posicin, y que siempre el control vaco (imgBoton, en este caso) debe estar ubicado encima de los dems para poder
recibir todos los eventos del mouse. Con esto armado, la idea
funciona de la siguiente manera:
Si el estado es normal, imgBotonOver est invisible.
Cuando el mouse se desplaza sobre el botn (evento
MouseMove de imgBoton), el control imgBotonOver se
prende (Visible = True).
Si ms tarde el usuario sale del botn desplazndose por el
formulario, volvemos a apagar la imagen del botn encendido.
Antes de ir a la prctica, un detalle sencillo. La forma ms
fcil de obtener los grficos necesarios es usar el editor grfico y preparar dos imgenes completas: una con todos los botones apagados y otra con todos los botones prendidos. Luego, tomamos esta ltima y recortamos los rectngulos que
contengan a cada botn, recordando su posicin exacta (en
pixeles) para ubicarlos luego en el formulario. La primera
imagen nos servir de fondo.
Pero basta de chchara, y vayamos a la prctica. A la izquierda, estn los controles vacos (imgFutbol, imgBasquet, e

Figura 4. Nuestro formulario en tiempo

de diseo. En esta instancia no importa
que los controles estn alineados
correctamente, ya que luego podremos
ubicarlos con cdigo ms fcilmente.

imgVoley) y, junto a ellos, los controles para el estado encendido (imgFutbolOver, imgBasquetOver, e imgVoleyOver).
Pero, no habamos quedado en que los controles de cada botn deban estar alineados? S, es verdad, pero resulta ms fcil alinearlos y prepararlos por cdigo mediante algunos procedimientos sencillos (es muy importante que la propiedad
ScaleMode del formulario est en 3 - Pixels para trabajar
cmodamente en pixeles).
El Listado 1 presenta el cdigo del formulario que venamos
armando. Como podemos ver, hemos creado nuestro propio
procedimiento CargarBoton, que toma los dos controles necesarios para construir cada botn, y los ubica y ajusta al tamao adecuado. Luego, el procedimiento ApagarBotones hace invisible cualquier botn encendido, que puede invocarse
cuando sabemos que el cursor no est sobre ningn botn
(por ejemplo, si se est moviendo por el formulario).
Para terminar con los botones, si bien el cdigo del programa
es bastante simple..., no les parece algo repetitivo? Ciertamente, es as. Si tuviramos 79 botones, no sera una muy buena idea organizarnos de esta forma, ya que, por ejemplo, en el
procedimiento ApagarBotones tendramos 79 lneas. En snte-

Figura 5. Un sencillo programa para

reproducir un Flash desde Visual Basic.

u s e r s . t e c t i m e s . c o m

Figura 6. Nuestra aplicacin multimedia

terminada, con botones, marco, sonido y
Flash.

65

ProgramacionX41.qxd

5/1/01

9:57 PM

EXPERTOS

Page 66

PROGRAMACIN

sis, el esquema que presentamos aqu sirve para pequeos programas con interfases simples, pero si quieren pensar en grande, lo mejor es hacer algn componente o control ActiveX que
gestione los botones y guarde sus grficos, posiciones, estados,
tamaos, etc. Con esto, se logra que el hecho de agregar un botn al programa vuelva a ser tan simple como antes.

Ese borde no me gusta!

Personalmente, no me agradan los trminos medios: dulce o
salado, Boca o River (de hecho, Boca), y en lo que hoy nos
compete... con grficos o no. Por eso, nuestra aplicacin repleta de botones grficos no quedara muy bien con un borde
tpico de Windows. Basta con ver aplicaciones como Winamp
para apreciar esos bordes grficos con estilo propio.

Hacer esos bordes en Visual Basic no es complicado. Lo primero que tenemos que hacer es armar una imagen con el fondo de
nuestra aplicacin, que tambin debe incluir el borde grfico (en
la Figura 6, se ve nuestra creacin, que no fue complicada de
hacer usando Photoshop 6). Es importante dibujarle los botones de cerrar y minimizar en estado apagado (ya que funcionan
como los botones vistos lneas atrs). Despus, slo resta incorporar un par de trucos con cdigo para que la ventana se comporte como debera. Veamos cmo hacerlo, paso a paso.
Lo primero es tomar el form en Visual Basic y quitarle el borde (propiedad Border a 0), ya que vamos a usar uno propio.
Ahora bien, si analizamos un poco lo que tiene una ventana
de Windows comn, veremos tres elementos bsicos que debemos recrear: el botn de cerrar, el botn de minimizar y la

LISTADO 1
Sub CargarBoton(imgBoton As Image, imgBotonOver As
Image, Left As Integer, Top As Integer)
Ubicar los controles para los dos estados en
la posicin indicada
imgBoton.Left = Left
imgBoton.Top = Top
imgBotonOver.Left = Left
imgBotonOver.Top = Top
Hacer ambos botones del mismo tamao.
imgBoton.Width = imgBotonOver.Width
imgBoton.Height = imgBotonOver.Height
El botn encendido est inicialmente apagado
(Visible = False)
imgBotonOver.Visible = False
El control de imagen que recibe los eventos
debe estar
siempre visible, y tambin estar situado encima de los dems
(el mtodo ZOrder con valor 0 lo sita encima)
imgBoton.Visible = True
imgBoton.ZOrder 0
End Sub
Private Sub Form_Load()
Cargamos el grfico de fondo para nuestro formulario
Me.Picture = LoadPicture(App.Path & \Fondo.bmp)
CargarBoton imgFutbol, imgFutbolOver, 16, 31
CargarBoton imgBasquet, imgBasquetOver, 16, 84
CargarBoton imgVoley, imgVoleyOver, 16, 136
End Sub

66

Sub ApagarBotones()
Apaga todos los botones, con lo cual hace invisible
el control que tiene su imagen encendida
imgFutbolOver.Visible = False
imgBasquetOver.Visible = False
imgVoleyOver.Visible = False
End Sub
Private Sub Form_MouseMove()
Como no est sobre ningn botn (ya que ahora
est sobre el formulario), podemos apagarlos
todos
ApagarBotones
End Sub
Private Sub imgBasquet_MouseMove()
If Not imgBasquetOver.Visible Then
ApagarBotones
imgBasquetOver.Visible = True
End If
End Sub
Private Sub imgFutbol_MouseMove()
If Not imgFutbolOver.Visible Then
ApagarBotones
imgFutbolOver.Visible = True
End If
End Sub
Private Sub imgVoley_MouseMove()
If Not imgVoleyOver.Visible Then
ApagarBotones
imgVoleyOver.Visible = True
End If
End Sub

u s e r s . t e c t i m e s . c o m

ProgramacionX41.qxd

5/1/01

9:58 PM

Page 67

LISTADO 2
Para el ALT+F4
Private KeyAlt As Boolean
Private Sub Form_Load()
La barra de Ttulo
lblCaption =
lblCaption.BorderStyle = 0
lblCaption.Left = 0
lblCaption.Width = Me.Width
lblCaption.ZOrder 1
Cargamos el grfico de fondo
Me.Picture = LoadPicture(App.Path & \Fondo.bmp)
End Sub
Private Sub Form_KeyDown()
Select Case KeyCode
Case 18
KeyAlt = True
Case vbKeyF4
Si tena presionado ALT y puls F4, terminamos
If KeyAlt Then End
End Select
End Sub
Private Sub Form_KeyUp()
Registramos si solt la tecla ALT
If KeyCode = 18 Then KeyAlt = False
End Sub
Private Sub imgCerrar_Click()
End
End Sub
Private Sub imgMinimizar_Click()
ApagarBotones
Me.WindowState = vbMinimized
End Sub
Private Sub lblCaption_MouseDown()
Llamadas necesarias a las API para simular
el movimiento de una ventana comn
ReleaseCapture
SendMessage hwnd, WM_NCLBUTTONDOWN, HTCAPTION, 0&
End Sub
Private Sub lblCaption_MouseMove()
Si se mueve por la barra de Ttulo (Caption),
es lo mismo que si se moviera por el resto del
formulario (para apagar todos los botones)
Form_MouseMove 0, 0, 0, 0
End Sub

barra de Ttulo, que permite mover la ventana (en nuestro caso, no vamos a usar botn de maximizar). Podemos crear los
dos botoncitos con las tcnicas que vimos anteriormente.
Ahora bien, queda por ver cmo hacer para mover un formulario que no tiene borde (ya que no hay barra de Ttulo de
donde agarrarlo). El truco para solucionar este problema es
sencillo: agregamos una etiqueta (sin texto ni borde) en la
zona de la barra y, cuando el usuario pulsa el mouse sobre ella
(evento MouseDown), simulamos el movimiento de la ventana llamando a dos funciones API que harn el trabajo sucio
por nosotros: ReleaseCapture y SendMessage (por razones
de espacio, no incluimos sus declaraciones, pero stas se encuentran en un mdulo del ejemplo final).
Para ver todo esto en accin, chenle una mirada al Listado 2. All est el cdigo de la etiqueta que maneja la barra de
Ttulo, y los botones de cerrar y minimizar. No incluimos la lgica del manejo de los botones por ser igual a la anterior.
Pero an falta un diminuto detalle: todas las ventanas de
Windows se cierran con <ALT+F4>. La nuestra no? Evidentemente no, ya que le hemos extirpado su borde original. Pero
simular esto es fcil. Lo primero que hay que hacer es poner
la propiedad KeyPreview del form en True, para que ste reciba los eventos del teclado. Luego, hay que ingresar el cdigo que se ve en los eventos KeyDown y KeyUp del Listado 2.
El pequeo truco consiste en verificar si la tecla <ALT> (KeyCode = 18) est presionada cuando el usuario pulsa <F4>.

Sonido
Si bien ya hemos tratado el tema del sonido en notas anteriores, vamos a refrescarlo brevemente en funcin del uso que
le vamos a dar aqu ya que, por ejemplo, podramos darle vida a nuestros botones con un simple clic sonoro.
La idea es reproducir algn sonido WAV accesible por la aplicacin. Si bien Visual Basic no trae ninguna funcin para ello,
podemos valernos de una funcin API muy popular: sndPlaySound. sta se encarga de reproducir un sonido WAV, con la
posibilidad de hacerlo continuamente (loopeado) y, adems,
de cortar la reproduccin en el momento indicado. Su declaracin es la siguiente:

Declare Function sndPlaySound Lib winmm.dll Alias

sndPlaySoundA (ByVal lpszSoundName As String, ByVal
uFlags As Long) As Long
El primer parmetro, lpszSoundName, sirve para indicarle a la
funcin el nombre del archivo a reproducir (con la ruta completa), y el segundo parmetro slo lleva Flags que indican las opciones de reproduccin. Si ambos parmetros son 0, se detiene
cualquier reproduccin en curso. Con todo esto, construimos
dos pequeas funciones para ocultar la complejidad de la API:

Sub PlaySound(Archivo As String, sndLoop As Boolean)

sndPlaySound Archivo, SND_ASYNC + SND_NODEFAULT
+ (SND_LOOP * Abs(sndLoop))
End Sub
Sub StopSound()
sndPlaySound 0, 0
End Sub

u s e r s . t e c t i m e s . c o m

67

5/1/01

9:58 PM

EXPERTOS

Page 68

PROGRAMACIN

Nuestra funcin recibe como parmetro slo el nombre del

archivo y una variable booleana que indica si el sonido debe
ser loopeado, por ejemplo:

PlaySound C:\Windows\Media\chord.wav, False

PlaySound MiMusica.wav, True
Para nuestras aplicaciones multimedia, lo ms comn ser
utilizar sonidos cortos para eventos (clics en botones, alertas, etc.) y, quizs, un sonido suave de fondo que est loopeado para que se repita continuamente (en ese caso, el propio
sonido WAV debe estar cortado y preparado para dar la sensacin de loop).

A Flashear se ha dicho
Tal cual lo dijimos al comienzo de la nota, Director y Flash
son alternativas muy adecuadas a la hora de hacer multimedia. Pero..., por qu no juntar ambas herramientas? Se imaginan un formulario de Visual Basic corriendo animaciones hechas en Flash? Suena tentador, ya que ambas herramientas se
complementan muy bien.
Para aqullos que no conocen Flash, su gran ventaja es la capacidad de crear animaciones, presentaciones, pequeas aplicaciones y hasta juegos, construidos vectorialmente para que
sean muy livianos y porttiles, y con las ventajas propias de los
grficos vectoriales (pueden ampliarse sin perder calidad, cambiar de formas, rotar, etc.). Los archivos se guardan en formato SWF, que necesitan de un reproductor, previamente bajado
de la Web e instalado, para poder ser vistos en un cliente comn. ste se consigue en www.macromedia.com, seccin Downloads. Hay varias versiones, algunas para Netscape y otras para Explorer, que se autoinstalan directamente desde la Web.
Pero an falta el secreto de todo esto... Cmo es el reproductor? No es ni ms ni menos que un control ActiveX comn,
igual a los que pueden utilizarse en Internet Explorer para las
pginas web, o en Visual Basic para nuestras aplicaciones.
Slo bastar cargar una instancia en un formulario, y tendremos un control con propiedades, mtodos y eventos listos para satisfacer nuestras necesidades. Cmo lo hacemos? Paso a
paso, como siempre.
Hay que crear un nuevo proyecto, y luego pulsar <CTRL+T>
para agregar controles ActiveX a la caja de herramientas. Si tenemos el reproductor instalado en nuestra mquina, en la lista veremos un tem llamado Shockwave Flash (noten que, al
seleccionarlo, aparece la ruta completa al archivo OCX en la
carpeta WINDOWS\SYSTEM\MACROMED). Al marcarlo y aceptar, se suma a nuestro toolbox. A partir de all, podemos agregarlo al formulario como con cualquier control comn.
En la Tabla 1, pueden ver una lista con las propiedades ms
importantes del control. Igualmente, muchas de ellas se pueden modificar mediante la propiedad general (Custom), la
cual nos ofrece una pestaa ms amigable y veloz con las funciones ms importantes.
A continuacin, vamos a ver cmo abrir y reproducir una pelcula Flash completa en formato SWF que se encuentre en la
carpeta de nuestra aplicacin:

68

1) Creamos un proyecto nuevo y, mediante <CTRL+T> o

[Project/Components], agregamos el control Shockwave
Flash a la caja de herramientas y, luego, creamos una instancia en el formulario (lo llamamos directamente Flash, cambindole la propiedad Name).
2) Agregamos un botn, llamado cmdPlay, que nos servir
para reproducir la pelcula y otro, llamado cmdStop, por si
queremos detenerla.
3) En el botn cmdPlay, ingresamos lo siguiente:

Private Sub cmdPlay_Click()

Flash.Quality = 1
Alta calidad
Flash.Movie = App.Path & \cow.swf
Flash.Loop = True
Flash.Play
End Sub
Listo! En la Figura 6, se ve nuestro proyecto terminado, con
la animacin corriendo (es un Flash llamado COW.SWF, que encontrarn en el CD junto con el ejemplo). Un detalle a tener en
cuenta es que, cuando el control tiene el foco, el resto del formulario no recibe eventos de teclado (as que, a menos que sea
indispensable, eviten darle el foco al control de Flash).
Ahora bien, lo que hicimos fue una especie de reproductor
casero, pero las posibilidades de incorporar Flash en Visual Basic van mucho ms all de eso... Piensen, por ejemplo, en incorporar Flash a nuestras propias interfases, controlando internamente la reproduccin de las animaciones, para hacer todo lo que se nos dificulta ms con Visual Basic.

Juntar todos los elementos

Si bien la multimedia va mucho ms all de los temas que vimos aqu, con esto nos alcanza para juntar todo en una sola
miniaplicacin de ejemplo. En la Figura 6, se ve la aplicacin
terminada, que tiene botones y un marco, grficos, sonido, y
la animacin en Flash. El cdigo fuente del programa es bastante similar al que ya vimos y, por eso, no lo vamos a transcribir, pero sepan que pueden encontrarlo completo, bien comentado y listo para usar en el CD.
Y para terminar, si bien aqu no vimos todas las tcnicas que
se usan en el CD de USERS (los botones y el marco grfico son
un buen comienzo), recuerden que se pueden hacer muchas ms
cosas slo con un poco de imaginacin. Hasta la prxima!

ProgramacionX41.qxd

Tabla 1: Manejo de Flash

Las propiedades iniciales que necesitamos para comenzar a

reproducir una animacin en Flash desde Visual Basic.
Propiedad
Movie
BGColor
Quality
Loop

u s e r s . t e c t i m e s . c o m

Descripcin.
La ruta al archivo SWF, en nuestro
disco rgido o en la Web.
El color de fondo sobre el cual se
reproduce la animacin.
La calidad de reproduccin.
1 es la ms alta, 5 la ms baja.
Controla si la reproduccin
es continua.