ProgramacionX41.qxd            5/1/01         9:56 PM         Page 64                   EXPERTOS                          ...
ProgramacionX41.qxd       5/1/01     9:56 PM       Page 65                                                                ...
ProgramacionX41.qxd      5/1/01      9:57 PM      Page 66                 EXPERTOS                            PROGRAMACIÓN...
ProgramacionX41.qxd    5/1/01   9:58 PM      Page 67                                                                  barr...
ProgramacionX41.qxd       5/1/01     9:58 PM       Page 68                EXPERTOS                             PROGRAMACIÓ...
Upcoming SlideShare
Loading in …5
×

Visual basic multimedia

1,674 views

Published on

Visual basic multimedia

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,674
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Visual basic multimedia

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

×