Visual basic multimedia

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

P R O G R A M A C I Ó NE X P E R T O S

robablemente, a muchos de ustedes ya se les haya cru-zado la idea de hacer un CD multimedia: el álbum de fo-

tos para la nona, el CD del club de fans de Pocho La Pantera,el CD erótico con las fotos de Panam… En fin, lo que hoy nosinteresa no es el objetivo, sino cómo alcanzarlo... cómo hacerun CD multimedia.

¿Por qué en Visual Basic? Básicamente, porque es la herra-mienta que utilizamos en la editorial para crear los CDs queacompañan la revista, y es una herramienta que, para noso-tros, demostró cumplir. ¿Y qué hay de Director y Flash? Sí, esposible que Macromedia Director y Flash sean herramientasmás adecuadas para hacer aplicaciones multimedia, pero conun poco de ingenio, podremos lograr que Visual Basic cumplanuestras expectativas, incluso aprovechando algunas de lasventajas de Flash.

Crear una aplicación multimediaNuestro objetivo en esta nota va a ser desarrollar una aplica-

ción multimedia, absolutamente gráfica (que no se vea ningúncontrol estándar de Windows), con sonido y algún chiche más.Para crear todos los elementos gráficos, usamos Photoshop 6(pueden sacar la demo de la USERS #117).

P BotonesPor lo general, los botones son la forma más natural de inte-

ractuar con una aplicación. Si bien ya tenemos los famososCommand Buttons, lo que hoy nos importa es hacer botonesgráficos. En la Figura 1, pueden ver el diseño de los botonesque vamos a crear. Éstos tienen dos estados: uno normal y otro“encendido” (Figura 2) para cuando el usuario desliza el mousepor encima (MouseMove). Ahora bien, crear este botón requierede algunos trucos con controles de imagen (ImageControl).

La idea básica es tener un formulario con la imagen de fon-do (como el de la Figura 1), que incluya todos los botonesgráficos en estado apagado. Luego, hay que superponer doscontroles de imágenes por cada botón:

• Uno para recibir los eventos del mouse (lo llamaremos img-Boton). Este control no debe tener imágenes cargadas (es de-cir, la propiedad Picture debe estar vacía), tiene que ubicarseencima de los demás y estar siempre visible.

• Otro control con la imagen del botón activo (imgBotonOver). En principio, debe tener la propiedad Visible en False.

La Figura 3 ilustra este esquema de forma más sencilla. Ten-gan en cuenta que los dos controles deben ubicarse en la mis-

ANIMACIONES Y SONIDOS CON VISUAL BASIC

¿Cómo se hacen LOS CDS DE USERS? Hemos recibidoesta pregunta muchas veces, y como nunca noshabíamos ocupado del tema, les presentamos esta notasobre APLICACIONES MULTIMEDIA. Además, unabreve explicación sobre cómo utilizar ANIMACIONESy recursos de FLASH en nuestros programas.

Mariano [email protected] experto, las siglas VB ya

son sinónimo de Mariano en la editorial.

Aplicaciones multimedia

Figura 3. El esquema de un botóncreado con dos controles de imagen.Figura 1. Los botones en estado

apagado sobre el fondo de nuestraaplicación. Éste será el estado normalde los mismos.

Figura 2. Los botones en estadoencendido, para cuando el puntero delmouse se desliza por encima(MouseMove).

ProgramacionX41.qxd 5/1/01 9:56 PM Page 64

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

ma posición, y que siempre el control vacío (imgBoton, en es-te caso) debe estar ubicado encima de los demás para poderrecibir todos los eventos del mouse. Con esto armado, la ideafunciona de la siguiente manera:

• Si el estado es normal, imgBotonOver está invisible.• Cuando el mouse se desplaza sobre el botón (evento

MouseMove de imgBoton), el control imgBotonOver se “prende” (Visible = True).

• Si más tarde el usuario “sale” del botón desplazándose por elformulario, volvemos a apagar la imagen del botón encendido.

Antes de ir a la práctica, un detalle sencillo. La forma másfácil de obtener los gráficos necesarios es usar el editor grá-fico y preparar dos imágenes completas: una con todos los bo-tones apagados y otra con todos los botones prendidos. Lue-go, tomamos esta última y recortamos los rectángulos quecontengan a cada botón, recordando su posición exacta (enpixeles) para ubicarlos luego en el formulario. La primeraimagen nos servirá de fondo.

Pero basta de cháchara, y vayamos a la práctica. A la izquier-da, están los controles vacíos (imgFutbol, imgBasquet, e

imgVoley) y, junto a ellos, los controles para el estado encen-dido (imgFutbolOver, imgBasquetOver, e imgVoleyOver).Pero, ¿no habíamos quedado en que los controles de cada bo-tón debían estar alineados? Sí, es verdad, pero resulta más fá-cil alinearlos y prepararlos por código mediante algunos pro-cedimientos sencillos (es muy importante que la propiedadScaleMode del formulario esté en “3 - Pixels” para trabajarcómodamente en pixeles).

El Listado 1 presenta el código del formulario que veníamosarmando. Como podemos ver, hemos creado nuestro propioprocedimiento “CargarBoton”, que toma los dos controles ne-cesarios para construir cada botón, y los ubica y ajusta al ta-maño adecuado. Luego, el procedimiento ApagarBotones ha-ce invisible cualquier botón encendido, que puede invocarsecuando sabemos que el cursor no está sobre ningún botón(por ejemplo, si se está moviendo por el formulario).

Para terminar con los botones, si bien el código del programaes bastante simple..., ¿no les parece algo repetitivo? Cierta-mente, es así. Si tuviéramos 79 botones, no sería una muy bue-na idea organizarnos de esta forma, ya que, por ejemplo, en elprocedimiento ApagarBotones tendríamos 79 líneas. En sínte-

Visual Basic también nospermite crear aplicacionesvistosas y coloridasutilizando elementosmultimedia, comosonidos, imágenes y animaciones hechas en Flash.

Figura 4. Nuestro formulario en tiempode diseño. En esta instancia no importaque los controles estén alineadoscorrectamente, ya que luego podremosubicarlos con código más fácilmente.

Figura 5. Un sencillo programa parareproducir un Flash desde Visual Basic.

Figura 6. Nuestra aplicación multimediaterminada, con botones, marco, sonido yFlash.



sis, el esquema que presentamos aquí sirve para pequeños pro-gramas con interfases simples, pero si quieren pensar en gran-de, lo mejor es hacer algún componente o control ActiveX quegestione los botones y guarde sus gráficos, posiciones, estados,tamaños, etc. Con esto, se logra que el hecho de agregar un bo-tón al programa vuelva a ser tan simple como antes.

¡Ese borde no me gusta!Personalmente, no me agradan los términos medios: dulce o

salado, Boca o River (de hecho, Boca), y en lo que hoy noscompete... con gráficos o no. Por eso, nuestra aplicación re-pleta de botones gráficos no quedaría muy bien con un bordetípico de Windows. Basta con ver aplicaciones como Winamppara apreciar esos bordes gráficos con estilo propio.

Hacer esos bordes en Visual Basic no es complicado. Lo prime-ro que tenemos que hacer es armar una imagen con el fondo denuestra aplicación, que también debe incluir el borde gráfico (enla Figura 6, se ve nuestra creación, que no fue complicada dehacer usando Photoshop 6). Es importante dibujarle los boto-nes de cerrar y minimizar en estado apagado (ya que funcionancomo los botones vistos líneas atrás). Después, sólo resta incor-porar un par de trucos con código para que la ventana se com-porte como debería. Veamos cómo hacerlo, paso a paso.

Lo primero es tomar el form en Visual Basic y quitarle el bor-de (propiedad Border a 0), ya que vamos a usar uno propio.Ahora bien, si analizamos un poco lo que tiene una ventanade Windows común, veremos tres elementos básicos que de-bemos recrear: el botón de cerrar, el botón de minimizar y la


LISTADO 1

Sub CargarBoton(imgBoton As Image, imgBotonOver AsImage, Left As Integer, Top As Integer)

‘Ubicar los controles para los dos estados enla posición indicada

imgBoton.Left = LeftimgBoton.Top = TopimgBotonOver.Left = LeftimgBotonOver.Top = Top

‘Hacer ambos botones del mismo tamaño.imgBoton.Width = imgBotonOver.WidthimgBoton.Height = imgBotonOver.Height

‘El botón encendido está inicialmente apagado(Visible = False)

imgBotonOver.Visible = False

‘El control de imagen que recibe los eventosdebe estar

‘siempre visible, y también estar situado enci-ma de los demás

‘(el método ZOrder con valor 0 lo sitúa encima)imgBoton.Visible = TrueimgBoton.ZOrder 0

End Sub

Private Sub Form_Load()‘Cargamos el gráfico de fondo para nuestro for-

mularioMe.Picture = LoadPicture(App.Path & “\Fon-

do.bmp”)

CargarBoton imgFutbol, imgFutbolOver, 16, 31CargarBoton imgBasquet, imgBasquetOver, 16, 84CargarBoton imgVoley, imgVoleyOver, 16, 136

End Sub

Sub ApagarBotones()‘Apaga todos los botones, con lo cual hace in-

visible‘el control que tiene su imagen encendidaimgFutbolOver.Visible = FalseimgBasquetOver.Visible = FalseimgVoleyOver.Visible = False

End Sub

Private Sub Form_MouseMove()‘Como no está sobre ningún botón (ya que ahora‘está sobre el formulario), podemos apagarlos

todosApagarBotones

End SubPrivate Sub imgBasquet_MouseMove()

If Not imgBasquetOver.Visible ThenApagarBotonesimgBasquetOver.Visible = True

End IfEnd Sub

Private Sub imgFutbol_MouseMove()If Not imgFutbolOver.Visible Then

ApagarBotonesimgFutbolOver.Visible = True

End IfEnd Sub

Private Sub imgVoley_MouseMove()If Not imgVoleyOver.Visible Then

ApagarBotonesimgVoleyOver.Visible = True

End IfEnd Sub


LISTADO 2

‘Para el ALT+F4Private KeyAlt As BooleanPrivate Sub Form_Load()

‘La barra de TítulolblCaption = “”lblCaption.BorderStyle = 0lblCaption.Left = 0lblCaption.Width = Me.WidthlblCaption.ZOrder 1

‘Cargamos el gráfico de fondoMe.Picture = LoadPicture(App.Path & “\Fon-

do.bmp”)End Sub

Private Sub Form_KeyDown()Select Case KeyCode

Case 18KeyAlt = True

Case vbKeyF4‘Si tenía presionado ALT y pulsó F4, ter-

minamosIf KeyAlt Then End

End SelectEnd SubPrivate Sub Form_KeyUp()

‘Registramos si soltó la tecla ALTIf KeyCode = 18 Then KeyAlt = False

End Sub

Private Sub imgCerrar_Click()End

End Sub

Private Sub imgMinimizar_Click()ApagarBotonesMe.WindowState = vbMinimized

End Sub

Private Sub lblCaption_MouseDown()‘Llamadas necesarias a las API para simular‘el movimiento de una ventana comúnReleaseCapture

SendMessage hwnd, WM_NCLBUTTONDOWN, HTCAPTION, 0&End Sub

Private Sub lblCaption_MouseMove()‘Si se mueve por la barra de Título (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

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

barra de Título, que permite mover la ventana (en nuestro ca-so, no vamos a usar botón de maximizar). Podemos crear losdos botoncitos con las técnicas que vimos anteriormente.Ahora bien, queda por ver cómo hacer para mover un formu-lario que no tiene borde (ya que no hay barra de Título dedonde agarrarlo). El truco para solucionar este problema essencillo: agregamos una etiqueta (sin texto ni borde) en lazona de la barra y, cuando el usuario pulsa el mouse sobre ella(evento MouseDown), simulamos el movimiento de la venta-na llamando a dos funciones API que harán el trabajo suciopor nosotros: ReleaseCapture y SendMessage (por razonesde espacio, no incluimos sus declaraciones, pero éstas se en-cuentran en un módulo del ejemplo final).

Para ver todo esto en acción, échenle una mirada al Lista-do 2. Allí está el código de la etiqueta que maneja la barra deTítulo, y los botones de cerrar y minimizar. No incluimos la ló-gica del manejo de los botones por ser igual a la anterior.

Pero aún falta un diminuto detalle: todas las ventanas deWindows se cierran con <ALT+F4>. ¿La nuestra no? Evidente-mente no, ya que le hemos extirpado su borde original. Perosimular esto es fácil. Lo primero que hay que hacer es ponerla propiedad KeyPreview del form en True, para que éste re-ciba los eventos del teclado. Luego, hay que ingresar el códi-go que se ve en los eventos KeyDown y KeyUp del Listado 2.El pequeño truco consiste en verificar si la tecla <ALT> (Key-Code = 18) está presionada cuando el usuario pulsa <F4>.

SonidoSi bien ya hemos tratado el tema del sonido en notas ante-

riores, vamos a refrescarlo brevemente en función del uso quele vamos a dar aquí ya que, por ejemplo, podríamos darle vi-da a nuestros botones con un simple “clic” sonoro.

La idea es reproducir algún sonido WAV accesible por la apli-cación. Si bien Visual Basic no trae ninguna función para ello,podemos valernos de una función API muy popular: sndPlay-Sound. Ésta se encarga de reproducir un sonido WAV, con laposibilidad de hacerlo continuamente (loopeado) y, además,de cortar la reproducción en el momento indicado. Su decla-ración es la siguiente:Declare Function sndPlaySound Lib “winmm.dll” Alias

“sndPlaySoundA” (ByVal lpszSoundName As String, ByValuFlags As Long) As Long

El primer parámetro, lpszSoundName, sirve para indicarle a lafunción el nombre del archivo a reproducir (con la ruta comple-ta), y el segundo parámetro sólo lleva Flags que indican las op-ciones de reproducción. Si ambos parámetros son 0, se detienecualquier reproducción en curso. Con todo esto, construimosdos pequeñas 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 SubSub StopSound()

sndPlaySound 0, 0End Sub


Nuestra función recibe como parámetro sólo el nombre delarchivo y una variable booleana que indica si el sonido debeser loopeado, por ejemplo:PlaySound “C:\Windows\Media\chord.wav”, False

PlaySound “MiMusica.wav”, True

Para nuestras aplicaciones multimedia, lo más común seráutilizar sonidos cortos para eventos (“clics” en botones, aler-tas, etc.) y, quizás, un sonido suave de fondo que esté loopea-do para que se repita continuamente (en ese caso, el propiosonido WAV debe estar cortado y preparado para dar la sensa-ción de loop).

A Flashear se ha dichoTal cual lo dijimos al comienzo de la nota, Director y Flash

son alternativas muy adecuadas a la hora de hacer multime-dia. Pero..., ¿por qué no juntar ambas herramientas? ¿Se ima-ginan un formulario de Visual Basic corriendo animaciones he-chas en Flash? Suena tentador, ya que ambas herramientas secomplementan muy bien.

Para aquéllos que no conocen Flash, su gran ventaja es la ca-pacidad de crear animaciones, presentaciones, pequeñas apli-caciones y hasta juegos, construidos vectorialmente para quesean muy livianos y portátiles, y con las ventajas propias de losgráficos vectoriales (pueden ampliarse sin perder calidad, cam-biar de formas, rotar, etc.). Los archivos se guardan en forma-to SWF, que necesitan de un reproductor, previamente bajadode la Web e instalado, para poder ser vistos en un cliente co-mún. Éste se consigue en www.macromedia.com, sección Down-loads. Hay varias versiones, algunas para Netscape y otras pa-ra Explorer, que se autoinstalan directamente desde la Web.

Pero aún falta el secreto de todo esto... ¿Cómo es el repro-ductor? No es ni más ni menos que un control ActiveX común,igual a los que pueden utilizarse en Internet Explorer para laspáginas web, o en Visual Basic… para nuestras aplicaciones.Sólo bastará cargar una instancia en un formulario, y tendre-mos un control con propiedades, métodos y eventos listos pa-ra satisfacer nuestras necesidades. ¿Cómo lo hacemos? Paso apaso, como siempre.

Hay que crear un nuevo proyecto, y luego pulsar <CTRL+T>para agregar controles ActiveX a la caja de herramientas. Si te-nemos el reproductor instalado en nuestra máquina, en la lis-ta veremos un ítem llamado Shockwave Flash (noten que, alseleccionarlo, aparece la ruta completa al archivo OCX en lacarpeta WINDOWS\SYSTEM\MACROMED). Al marcarlo y acep-tar, se suma a nuestro toolbox. A partir de allí, podemos agre-garlo al formulario como con cualquier control común.

En la Tabla 1, pueden ver una lista con las propiedades másimportantes del control. Igualmente, muchas de ellas se pue-den modificar mediante la propiedad general “(Custom)”, lacual nos ofrece una pestaña más amigable y veloz con las fun-ciones más importantes.

A continuación, vamos a ver cómo abrir y reproducir una pe-lícula Flash completa en formato SWF que se encuentre en lacarpeta de nuestra aplicación:

1) Creamos un proyecto nuevo y, mediante <CTRL+T> o[Project/Components], agregamos el control ShockwaveFlash a la caja de herramientas y, luego, creamos una instan-cia en el formulario (lo llamamos directamente Flash, cam-biándole la propiedad Name).

2) Agregamos un botón, llamado cmdPlay, que nos servirápara reproducir la película y otro, llamado cmdStop, por siqueremos detenerla.

3) En el botón cmdPlay, ingresamos lo siguiente:Private Sub cmdPlay_Click()

Flash.Quality = 1 ‘Alta calidadFlash.Movie = App.Path & “\cow.swf”Flash.Loop = TrueFlash.Play

End Sub

¡Listo! En la Figura 6, se ve nuestro proyecto terminado, conla animación corriendo (es un Flash llamado COW.SWF, que en-contrarán en el CD junto con el ejemplo). Un detalle a tener encuenta es que, cuando el control tiene el foco, el resto del for-mulario no recibe eventos de teclado (así que, a menos que seaindispensable, eviten darle el foco al control de Flash).

Ahora bien, lo que hicimos fue una especie de reproductorcasero, pero las posibilidades de incorporar Flash en Visual Ba-sic van mucho más allá de eso... Piensen, por ejemplo, en in-corporar Flash a nuestras propias interfases, controlando in-ternamente la reproducción de las animaciones, para hacer to-do lo que se nos dificulta más con Visual Basic.

Juntar todos los elementosSi bien la multimedia va mucho más allá de los temas que vi-

mos aquí, con esto nos alcanza para juntar todo en una solaminiaplicación de ejemplo. En la Figura 6, se ve la aplicaciónterminada, que tiene botones y un marco, gráficos, sonido, yla animación en Flash. El código fuente del programa es bas-tante similar al que ya vimos y, por eso, no lo vamos a trans-cribir, pero sepan que pueden encontrarlo completo, bien co-mentado y listo para usar en el CD.

Y para terminar, si bien aquí no vimos todas las técnicas quese usan en el CD de USERS (los botones y el marco gráfico sonun buen comienzo), recuerden que se pueden hacer muchas máscosas sólo con un poco de imaginación. ¡Hasta la próxima! ✕



❙ Tabla 1: Manejo de FlashLas propiedades iniciales que necesitamos para comenzar areproducir una animación en Flash desde Visual Basic.

Propiedad Descripción.Movie La ruta al archivo SWF, en nuestro

disco rígido o en la Web.BGColor El color de fondo sobre el cual se

reproduce la animación.Quality La calidad de reproducción.

1 es la más alta, 5 la más baja.Loop Controla si la reproducción

es continua.


Visual basic multimedia

Education

Transcript of Visual basic multimedia