Este documento describe cómo crear una aplicación multimedia en Visual Basic con botones gráficos, sonido y animaciones de Flash. Explica cómo usar controles de imagen para crear botones con diferentes estados y cómo reproducir sonidos WAV. También cubre cómo agregar un borde gráfico personalizado a la ventana y simular funciones como cerrar con ALT+F4. El objetivo final es desarrollar una interfaz completamente gráfica sin usar controles estándar de Windows.
Planificacion Anual 4to Grado Educacion Primaria 2024 Ccesa007.pdf
Creando aplicaciones multimedia con Visual Basic: animaciones y sonidos
1. ProgramacionX41.qxd 5/1/01 9:56 PM Page 64
EXPERTOS PROGRAMACIÓN
ANIMACIONES Y SONIDOS CON VISUAL BASIC
Aplicaciones multimedia
¿Cómo se hacen LOS CDS DE USERS? Hemos recibido
esta pregunta muchas veces, y como nunca nos
habíamos ocupado del tema, les presentamos esta nota
Mariano BIRNIOS sobre APLICACIONES MULTIMEDIA. Además, una
mariano@tectimes.com
Programador experto, las siglas VB ya
breve explicación sobre cómo utilizar ANIMACIONES
son sinónimo de Mariano en la editorial. y recursos de FLASH en nuestros programas.
P robablemente, a muchos de ustedes ya se les haya cru-
zado la idea de hacer un CD multimedia: el álbum de fo-
Botones
Por lo general, los botones son la forma más natural de inte-
tos para la nona, el CD del club de fans de Pocho La Pantera, ractuar con una aplicación. Si bien ya tenemos los famosos
el CD erótico con las fotos de Panam… En fin, lo que hoy nos Command Buttons, lo que hoy nos importa es hacer botones
interesa no es el objetivo, sino cómo alcanzarlo... cómo hacer gráficos. En la Figura 1, pueden ver el diseño de los botones
un CD multimedia. que vamos a crear. Éstos tienen dos estados: uno normal y otro
¿Por qué en Visual Basic? Básicamente, porque es la herra- “encendido” (Figura 2) para cuando el usuario desliza el mouse
mienta que utilizamos en la editorial para crear los CDs que por encima (MouseMove). Ahora bien, crear este botón requiere
acompañan la revista, y es una herramienta que, para noso- de algunos trucos con controles de imagen (ImageControl).
tros, demostró cumplir. ¿Y qué hay de Director y Flash? Sí, es La idea básica es tener un formulario con la imagen de fon-
posible que Macromedia Director y Flash sean herramientas do (como el de la Figura 1), que incluya todos los botones
más adecuadas para hacer aplicaciones multimedia, pero con gráficos en estado apagado. Luego, hay que superponer dos
un poco de ingenio, podremos lograr que Visual Basic cumpla controles de imágenes por cada botón:
nuestras expectativas, incluso aprovechando algunas de las • Uno para recibir los eventos del mouse (lo llamaremos img-
ventajas de Flash. Boton). Este control no debe tener imágenes cargadas (es de-
cir, la propiedad Picture debe estar vacía), tiene que ubicarse
Crear una aplicación multimedia encima de los demás y estar siempre visible.
Nuestro objetivo en esta nota va a ser desarrollar una aplica- • Otro control con la imagen del botón activo (imgBoton
ción multimedia, absolutamente gráfica (que no se vea ningún Over). En principio, debe tener la propiedad Visible en False.
control estándar de Windows), con sonido y algún chiche más.
Para crear todos los elementos gráficos, usamos Photoshop 6 La Figura 3 ilustra este esquema de forma más sencilla. Ten-
(pueden sacar la demo de la USERS #117). gan en cuenta que los dos controles deben ubicarse en la mis-
Figura 3. El esquema de un botón
Figura 1. Los botones en estado Figura 2. Los botones en estado creado con dos controles de imagen.
apagado sobre el fondo de nuestra encendido, para cuando el puntero del
aplicación. Éste será el estado normal mouse se desliza por encima
de los mismos. (MouseMove).
64 u s e r s . t e c t i m e s . c o m
2. ProgramacionX41.qxd 5/1/01 9:56 PM Page 65
Visual Basic también nos
permite crear aplicaciones
vistosas y coloridas
utilizando elementos
multimedia, como
sonidos, imágenes
y animaciones hechas
en Flash.
ma posición, y que siempre el control vacío (imgBoton, en es- imgVoley) y, junto a ellos, los controles para el estado encen-
te caso) debe estar ubicado encima de los demás para poder dido (imgFutbolOver, imgBasquetOver, e imgVoleyOver).
recibir todos los eventos del mouse. Con esto armado, la idea Pero, ¿no habíamos quedado en que los controles de cada bo-
funciona de la siguiente manera: tón debían estar alineados? Sí, es verdad, pero resulta más fá-
• Si el estado es normal, imgBotonOver está invisible. cil alinearlos y prepararlos por código mediante algunos pro-
• Cuando el mouse se desplaza sobre el botón (evento cedimientos sencillos (es muy importante que la propiedad
MouseMove de imgBoton), el control imgBotonOver se ScaleMode del formulario esté en “3 - Pixels” para trabajar
“prende” (Visible = True). cómodamente en pixeles).
• Si más tarde el usuario “sale” del botón desplazándose por el El Listado 1 presenta el código del formulario que veníamos
formulario, volvemos a apagar la imagen del botón encendido. armando. Como podemos ver, hemos creado nuestro propio
procedimiento “CargarBoton”, que toma los dos controles ne-
Antes de ir a la práctica, un detalle sencillo. La forma más cesarios para construir cada botón, y los ubica y ajusta al ta-
fácil de obtener los gráficos necesarios es usar el editor grá- maño adecuado. Luego, el procedimiento ApagarBotones ha-
fico y preparar dos imágenes completas: una con todos los bo- ce invisible cualquier botón encendido, que puede invocarse
tones apagados y otra con todos los botones prendidos. Lue- cuando sabemos que el cursor no está sobre ningún botón
go, tomamos esta última y recortamos los rectángulos que (por ejemplo, si se está moviendo por el formulario).
contengan a cada botón, recordando su posición exacta (en Para terminar con los botones, si bien el código del programa
pixeles) para ubicarlos luego en el formulario. La primera es bastante simple..., ¿no les parece algo repetitivo? Cierta-
imagen nos servirá de fondo. mente, es así. Si tuviéramos 79 botones, no sería una muy bue-
Pero basta de cháchara, y vayamos a la práctica. A la izquier- na idea organizarnos de esta forma, ya que, por ejemplo, en el
da, están los controles vacíos (imgFutbol, imgBasquet, e procedimiento ApagarBotones tendríamos 79 líneas. En sínte-
Figura 4. Nuestro formulario en tiempo Figura 6. Nuestra aplicación multimedia
de diseño. En esta instancia no importa terminada, con botones, marco, sonido y
que los controles estén alineados Figura 5. Un sencillo programa para Flash.
correctamente, ya que luego podremos reproducir un Flash desde Visual Basic.
ubicarlos con código más fácilmente.
u s e r s . t e c t i m e s . c o m 65
3. ProgramacionX41.qxd 5/1/01 9:57 PM Page 66
EXPERTOS PROGRAMACIÓN
sis, el esquema que presentamos aquí sirve para pequeños pro- Hacer esos bordes en Visual Basic no es complicado. Lo prime-
gramas con interfases simples, pero si quieren pensar en gran- ro que tenemos que hacer es armar una imagen con el fondo de
de, lo mejor es hacer algún componente o control ActiveX que nuestra aplicación, que también debe incluir el borde gráfico (en
gestione los botones y guarde sus gráficos, posiciones, estados, la Figura 6, se ve nuestra creación, que no fue complicada de
tamaños, etc. Con esto, se logra que el hecho de agregar un bo- hacer usando Photoshop 6). Es importante dibujarle los boto-
tón al programa vuelva a ser tan simple como antes. nes de cerrar y minimizar en estado apagado (ya que funcionan
como los botones vistos líneas atrás). Después, sólo resta incor-
¡Ese borde no me gusta! porar un par de trucos con código para que la ventana se com-
Personalmente, no me agradan los términos medios: dulce o porte como debería. Veamos cómo hacerlo, paso a paso.
salado, Boca o River (de hecho, Boca), y en lo que hoy nos Lo primero es tomar el form en Visual Basic y quitarle el bor-
compete... con gráficos o no. Por eso, nuestra aplicación re- de (propiedad Border a 0), ya que vamos a usar uno propio.
pleta de botones gráficos no quedaría muy bien con un borde Ahora bien, si analizamos un poco lo que tiene una ventana
típico de Windows. Basta con ver aplicaciones como Winamp de Windows común, veremos tres elementos básicos que de-
para apreciar esos bordes gráficos con estilo propio. bemos recrear: el botón de cerrar, el botón de minimizar y la
LISTADO 1
Sub CargarBoton(imgBoton As Image, imgBotonOver As Sub ApagarBotones()
Image, Left As Integer, Top As Integer) ‘Apaga todos los botones, con lo cual hace in-
‘Ubicar los controles para los dos estados en visible
la posición indicada ‘el control que tiene su imagen encendida
imgBoton.Left = Left imgFutbolOver.Visible = False
imgBoton.Top = Top imgBasquetOver.Visible = False
imgBotonOver.Left = Left imgVoleyOver.Visible = False
imgBotonOver.Top = Top End Sub
‘Hacer ambos botones del mismo tamaño. Private Sub Form_MouseMove()
imgBoton.Width = imgBotonOver.Width ‘Como no está sobre ningún botón (ya que ahora
imgBoton.Height = imgBotonOver.Height ‘está sobre el formulario), podemos apagarlos
todos
‘El botón encendido está inicialmente apagado ApagarBotones
(Visible = False) End Sub
imgBotonOver.Visible = False Private Sub imgBasquet_MouseMove()
If Not imgBasquetOver.Visible Then
‘El control de imagen que recibe los eventos ApagarBotones
debe estar imgBasquetOver.Visible = True
‘siempre visible, y también estar situado enci- End If
ma de los demás End Sub
‘(el método ZOrder con valor 0 lo sitúa encima)
imgBoton.Visible = True Private Sub imgFutbol_MouseMove()
imgBoton.ZOrder 0 If Not imgFutbolOver.Visible Then
End Sub ApagarBotones
imgFutbolOver.Visible = True
Private Sub Form_Load() End If
‘Cargamos el gráfico de fondo para nuestro for- End Sub
mulario
Me.Picture = LoadPicture(App.Path & “Fon- Private Sub imgVoley_MouseMove()
do.bmp”) If Not imgVoleyOver.Visible Then
ApagarBotones
CargarBoton imgFutbol, imgFutbolOver, 16, 31 imgVoleyOver.Visible = True
CargarBoton imgBasquet, imgBasquetOver, 16, 84 End If
CargarBoton imgVoley, imgVoleyOver, 16, 136 End Sub
End Sub
66 u s e r s . t e c t i m e s . c o m
4. ProgramacionX41.qxd 5/1/01 9:58 PM Page 67
barra de Título, que permite mover la ventana (en nuestro ca-
LISTADO 2
so, no vamos a usar botón de maximizar). Podemos crear los
dos botoncitos con las técnicas que vimos anteriormente.
‘Para el ALT+F4
Ahora bien, queda por ver cómo hacer para mover un formu-
Private KeyAlt As Boolean
lario que no tiene borde (ya que no hay barra de Título de
Private Sub Form_Load()
donde agarrarlo). El truco para solucionar este problema es
‘La barra de Título
sencillo: agregamos una etiqueta (sin texto ni borde) en la
lblCaption = “”
zona de la barra y, cuando el usuario pulsa el mouse sobre ella
lblCaption.BorderStyle = 0
(evento MouseDown), simulamos el movimiento de la venta-
lblCaption.Left = 0
na llamando a dos funciones API que harán el trabajo sucio
lblCaption.Width = Me.Width
por nosotros: ReleaseCapture y SendMessage (por razones
lblCaption.ZOrder 1
de espacio, no incluimos sus declaraciones, pero éstas se en-
cuentran en un módulo del ejemplo final).
‘Cargamos el gráfico de fondo
Para ver todo esto en acción, échenle una mirada al Lista-
Me.Picture = LoadPicture(App.Path & “Fon-
do 2. Allí está el código de la etiqueta que maneja la barra de
do.bmp”)
Título, y los botones de cerrar y minimizar. No incluimos la ló-
End Sub
gica del manejo de los botones por ser igual a la anterior.
Pero aún falta un diminuto detalle: todas las ventanas de
Private Sub Form_KeyDown()
Windows se cierran con <ALT+F4>. ¿La nuestra no? Evidente-
Select Case KeyCode
mente no, ya que le hemos extirpado su borde original. Pero
Case 18
simular esto es fácil. Lo primero que hay que hacer es poner
KeyAlt = True
la propiedad KeyPreview del form en True, para que éste re-
Case vbKeyF4
ciba los eventos del teclado. Luego, hay que ingresar el códi-
‘Si tenía presionado ALT y pulsó F4, ter-
go que se ve en los eventos KeyDown y KeyUp del Listado 2.
minamos
El pequeño truco consiste en verificar si la tecla <ALT> (Key-
If KeyAlt Then End
Code = 18) está presionada cuando el usuario pulsa <F4>.
End Select
End Sub
Sonido
Private Sub Form_KeyUp()
Si bien ya hemos tratado el tema del sonido en notas ante-
‘Registramos si soltó la tecla ALT
riores, vamos a refrescarlo brevemente en función del uso que
If KeyCode = 18 Then KeyAlt = False
le vamos a dar aquí ya que, por ejemplo, podríamos darle vi-
End Sub
da a nuestros botones con un simple “clic” sonoro.
La idea es reproducir algún sonido WAV accesible por la apli-
Private Sub imgCerrar_Click()
cación. Si bien Visual Basic no trae ninguna función para ello,
End
podemos valernos de una función API muy popular: sndPlay-
End Sub
Sound. Ésta se encarga de reproducir un sonido WAV, con la
posibilidad de hacerlo continuamente (loopeado) y, además,
Private Sub imgMinimizar_Click()
de cortar la reproducción en el momento indicado. Su decla-
ApagarBotones
ración es la siguiente:
Me.WindowState = vbMinimized
Declare Function sndPlaySound Lib “winmm.dll” Alias
End Sub
“sndPlaySoundA” (ByVal lpszSoundName As String, ByVal
uFlags As Long) As Long
Private Sub lblCaption_MouseDown()
‘Llamadas necesarias a las API para simular
El primer parámetro, lpszSoundName, sirve para indicarle a la
‘el movimiento de una ventana común
función el nombre del archivo a reproducir (con la ruta comple-
ReleaseCapture
ta), y el segundo parámetro sólo lleva Flags que indican las op-
SendMessage hwnd, WM_NCLBUTTONDOWN, HTCAPTION, 0&
ciones de reproducción. Si ambos parámetros son 0, se detiene
End Sub
cualquier reproducción en curso. Con todo esto, construimos
dos pequeñas funciones para ocultar la complejidad de la API:
Private Sub lblCaption_MouseMove()
Sub PlaySound(Archivo As String, sndLoop As Boolean)
‘Si se mueve por la barra de Título (Caption),
sndPlaySound Archivo, SND_ASYNC + SND_NODEFAULT
‘es lo mismo que si se moviera por el resto del
+ (SND_LOOP * Abs(sndLoop))
‘formulario (para apagar todos los botones)
End Sub
Form_MouseMove 0, 0, 0, 0
Sub StopSound()
End Sub
sndPlaySound 0, 0
End Sub
u s e r s . t e c t i m e s . c o m 67
5. ProgramacionX41.qxd 5/1/01 9:58 PM Page 68
EXPERTOS PROGRAMACIÓN
Nuestra función recibe como parámetro sólo el nombre del 1) Creamos un proyecto nuevo y, mediante <CTRL+T> o
archivo y una variable booleana que indica si el sonido debe [Project/Components], agregamos el control Shockwave
ser loopeado, por ejemplo: Flash a la caja de herramientas y, luego, creamos una instan-
PlaySound “C:WindowsMediachord.wav”, False cia en el formulario (lo llamamos directamente Flash, cam-
biándole la propiedad Name).
PlaySound “MiMusica.wav”, True 2) Agregamos un botón, llamado cmdPlay, que nos servirá
para reproducir la película y otro, llamado cmdStop, por si
Para nuestras aplicaciones multimedia, lo más común será queremos detenerla.
utilizar sonidos cortos para eventos (“clics” en botones, aler- 3) En el botón cmdPlay, ingresamos lo siguiente:
tas, etc.) y, quizás, un sonido suave de fondo que esté loopea- Private Sub cmdPlay_Click()
do para que se repita continuamente (en ese caso, el propio Flash.Quality = 1 ‘Alta calidad
sonido WAV debe estar cortado y preparado para dar la sensa- Flash.Movie = App.Path & “cow.swf”
ción de loop). Flash.Loop = True
Flash.Play
A Flashear se ha dicho End Sub
Tal cual lo dijimos al comienzo de la nota, Director y Flash
son alternativas muy adecuadas a la hora de hacer multime- ¡Listo! En la Figura 6, se ve nuestro proyecto terminado, con
dia. Pero..., ¿por qué no juntar ambas herramientas? ¿Se ima- la animación corriendo (es un Flash llamado COW.SWF, que en-
ginan un formulario de Visual Basic corriendo animaciones he- contrarán en el CD junto con el ejemplo). Un detalle a tener en
chas en Flash? Suena tentador, ya que ambas herramientas se cuenta es que, cuando el control tiene el foco, el resto del for-
complementan muy bien. mulario no recibe eventos de teclado (así que, a menos que sea
Para aquéllos que no conocen Flash, su gran ventaja es la ca- indispensable, eviten darle el foco al control de Flash).
pacidad de crear animaciones, presentaciones, pequeñas apli- Ahora bien, lo que hicimos fue una especie de reproductor
caciones y hasta juegos, construidos vectorialmente para que casero, pero las posibilidades de incorporar Flash en Visual Ba-
sean muy livianos y portátiles, y con las ventajas propias de los sic van mucho más allá de eso... Piensen, por ejemplo, en in-
gráficos vectoriales (pueden ampliarse sin perder calidad, cam- corporar Flash a nuestras propias interfases, controlando in-
biar de formas, rotar, etc.). Los archivos se guardan en forma- ternamente la reproducción de las animaciones, para hacer to-
to SWF, que necesitan de un reproductor, previamente bajado do lo que se nos dificulta más con Visual Basic.
de la Web e instalado, para poder ser vistos en un cliente co-
mún. Éste se consigue en www.macromedia.com, sección Down- Juntar todos los elementos
loads. Hay varias versiones, algunas para Netscape y otras pa- Si bien la multimedia va mucho más allá de los temas que vi-
ra Explorer, que se autoinstalan directamente desde la Web. mos aquí, con esto nos alcanza para juntar todo en una sola
Pero aún falta el secreto de todo esto... ¿Cómo es el repro- miniaplicación de ejemplo. En la Figura 6, se ve la aplicación
ductor? No es ni más ni menos que un control ActiveX común, terminada, que tiene botones y un marco, gráficos, sonido, y
igual a los que pueden utilizarse en Internet Explorer para las la animación en Flash. El código fuente del programa es bas-
páginas web, o en Visual Basic… para nuestras aplicaciones. tante similar al que ya vimos y, por eso, no lo vamos a trans-
Sólo bastará cargar una instancia en un formulario, y tendre- cribir, pero sepan que pueden encontrarlo completo, bien co-
mos un control con propiedades, métodos y eventos listos pa- mentado y listo para usar en el CD.
ra satisfacer nuestras necesidades. ¿Cómo lo hacemos? Paso a Y para terminar, si bien aquí no vimos todas las técnicas que
paso, como siempre. se usan en el CD de USERS (los botones y el marco gráfico son
Hay que crear un nuevo proyecto, y luego pulsar <CTRL+T> un buen comienzo), recuerden que se pueden hacer muchas más
para agregar controles ActiveX a la caja de herramientas. Si te- cosas sólo con un poco de imaginación. ¡Hasta la próxima! ✕
nemos el reproductor instalado en nuestra máquina, en la lis-
ta veremos un ítem llamado Shockwave Flash (noten que, al
Tabla 1: Manejo de Flash
❙
seleccionarlo, aparece la ruta completa al archivo OCX en la
carpeta WINDOWSSYSTEMMACROMED). Al marcarlo y acep- Las propiedades iniciales que necesitamos para comenzar a
tar, se suma a nuestro toolbox. A partir de allí, podemos agre- reproducir una animación en Flash desde Visual Basic.
garlo al formulario como con cualquier control común.
Propiedad Descripción.
En la Tabla 1, pueden ver una lista con las propiedades más Movie La ruta al archivo SWF, en nuestro
importantes del control. Igualmente, muchas de ellas se pue- disco rígido o en la Web.
den modificar mediante la propiedad general “(Custom)”, la BGColor El color de fondo sobre el cual se
cual nos ofrece una pestaña más amigable y veloz con las fun- reproduce la animación.
Quality La calidad de reproducción.
ciones más importantes.
1 es la más alta, 5 la más baja.
A continuación, vamos a ver cómo abrir y reproducir una pe- Loop Controla si la reproducción
lícula Flash completa en formato SWF que se encuentre en la es continua.
carpeta de nuestra aplicación:
68 u s e r s . t e c t i m e s . c o m