ProgramacionX41.

qxd

5/1/01

9:56 PM

Page 64

EXPERTOS

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.
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-

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).

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).
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.

64

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 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 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.

Figura 5. Un sencillo programa para reproducir un Flash desde Visual Basic.

Figura 6. Nuestra aplicacin multimedia terminada, con botones, marco, sonido y Flash.

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

65

ProgramacionX41.qxd

5/1/01

9:57 PM

Page 66

EXPERTOS

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 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

66

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

ProgramacionX41.qxd

5/1/01

9:58 PM

Page 68

EXPERTOS

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).

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:

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:

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!

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 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.

68

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