Entrega Nº 3

Gracias a todos los que me enviaron comentarios y me avisaron de que reciben bien el curso y para aquellos que hubo que reenviarlo espero que ahora hayan podido recibirlo completo.

En relación al diseño y programación de aplicaciones multimedia, es muy importante la interface de la misma, por su claridad, interactividad e incluso atractivo visual. Depende lógico, a quién va dirigida, es muy distinto si trabajamos con niños muy pequeños, o adolescentes o adultos, nuestra interface debe adaptarse a este tipo de aplicación. Si bien podemos usar los controles de la caja de herramientas de VB, como botones y labels, para hacerla más interesante podemos diseñar nuestros propios botones o textos y desplegarlos en controles Image para que conserven el fondo transparente en el caso de que los hayamos hecho con un editor de imagenes y grabado como gif con fondo transparente. Esto hace que el programa tenga una presentación más profesional. Bueno relacionado con este tema, que da para mucho más, vamos a hacer un ejercicio donde en lugar de un boton de VB usamos un archivo .gif hecho en un programa especial que prepara texto 2D.

Ejercicio1: La idea es cargar este .gif en un control Image y que al pasar por encima el puntero del mouse, cambie la imagen, y al quitarlo vuelva a la inicial, y en caso de hacer click al tener el puntero en mousedown, vuelva a cambiar la imagen, o sea lo que en DHTML es un rollover.

Les dejé visibles las tres imagenes que vamos a usar por si quieren particionar la imagen y recuperar los botones. Cargamos los tres modelos de botón en tres controles Image y los superponemos, ¡Ojo! abajo de todo va la inicial, la que aparecerá al cargar el programa, y está visible, luego la que cambia con el MouseMove (invisible), y por último arriba de todo la que cambia con el MouseDown (invisible), como sabemos para que sea invisible debe tener la propiedad Visible = False. El código es el siguiente:

Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image5.Visible = False
End Sub

Private Sub Image4_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image5.Visible = True
End Sub

Private Sub Image5_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image6.Visible = True
End Sub

Private Sub Image5_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
Image6.Visible = False
End Sub

La imagen con la que arrancamos visible es la Image4, presten atención al procedimiento MouseMove, sin modificar la Image4, hacemos visible la Image5 que está encima de la 4, luego al quitar el puntero de encima de la imagen y colocarlo sobre el Form se hace invisible la Image5 (Procedimiento Form_mousemove) con lo cual se vuelve a ver la Image4, y si hacemos click al bajar el puntero o sea en el MouseDown de la Image5 (ya que al hacer el MouseMove se vuelve visible) hacemos visible la Image6 que está encima de todo y al soltar el puntero con el MouseUp la volvemos invisible. ¡Que mareo!.

Otro tema interesante es el uso del teclado. Veremos dos ejercicios donde se use el teclado: en el primero para que los niños se acostumbren a la identificación de las letras y su ubicación y el segundo para poder mover un objeto en la pantalla con las teclas de flechas en lugar del uso del mouse.

Ejercicio 2: Abrimos un nuevo formulario y dibujamos una label, le modificamos la letra para que su tamaño sea más grande, bien visible. La imagen del programa corriendo sería parecida a esta:

Al oprimir una tecla de acuerdo al carácter correspondiente en el código ASCII nos muestra una letra (en este caso) correspondiente en la propiedad caption de la label. El codigo es:

Private Sub Form_KeyPress(KeyAscii As Integer)

Select Case KeyAscii
Case 97: Label1.Caption = "a"
Case 98: Label1.Caption = "b"
Case 65: Label1.Caption = "A"
Case 66: Label1.Caption = "B"
Case 32: Label1.Caption = "espacio"
Case 13: Label1.Caption = "Enter"
Case 67: Label1.Caption = "C"
Case 68: Label1.Caption = "D"
Case 69: Label1.Caption = "E"
Case 70: Label1.Caption = "F"
Case 71: Label1.Caption = "G"
Case 72: Label1.Caption = "H"
Case 73: Label1.Caption = "I"
Case 74: Label1.Caption = "J"
Case 75: Label1.Caption = "K"
Case 76: Label1.Caption = "L"
Case 77: Label1.Caption = "M"
Case 78: Label1.Caption = "N"
Case 79: Label1.Caption = "O"
Case 80: Label1.Caption = "P"
Case 81: Label1.Caption = "Q"
Case 82: Label1.Caption = "R"
Case 83: Label1.Caption = "S"
Case 84: Label1.Caption = "T"
Case 85: Label1.Caption = "U"
Case 86: Label1.Caption = "V"
Case 87: Label1.Caption = "W"
Case 88: Label1.Caption = "X"
Case 89: Label1.Caption = "Y"
Case 90: Label1.Caption = "Z"
Case 99: Label1.Caption = "c"
Case 100: Label1.Caption = "d"
Case 101: Label1.Caption = "e"
Case 102: Label1.Caption = "f"
Case 103: Label1.Caption = "g"
Case 104: Label1.Caption = "h"
Case 105: Label1.Caption = "i"
Case 106: Label1.Caption = "j"
Case 107: Label1.Caption = "k"
Case 108: Label1.Caption = "l"
Case 109: Label1.Caption = "m"
Case 110: Label1.Caption = "n"
Case 111: Label1.Caption = "o"
Case 112: Label1.Caption = "p"
Case 113: Label1.Caption = "q"
Case 114: Label1.Caption = "r"
Case 115: Label1.Caption = "s"
Case 116: Label1.Caption = "t"
Case 117: Label1.Caption = "u"
Case 118: Label1.Caption = "v"
Case 119: Label1.Caption = "w"
Case 120: Label1.Caption = "x"
Case 121: Label1.Caption = "y"
Case 122: Label1.Caption = "z"
End Select
End Sub

Private Sub Form_Load()
KeyPreview = True
End Sub

Private Sub Picture1_Click()
End
End Sub

Para el conjunto de caracteres, les aconsejo consultar la ayuda de VB5, ahí estan los signos y también las teclas de Funciones. Lo importante es que en la ventana propiedades o en el evento Load, como en este ejercicio, debemos tener la propiedad Keypreview a True , esto le dará prioridad al teclado, lo que no quiere decir que no pueda haber otro control con un procedimiento de mouse, en este caso es una Label que cierra el programa. O sea que se habilitan ambos teclado y mouse, pero primero escucha al teclado.

En el tercer ejercicio vamos a mover un icono es este caso el planeta tierra cargado en una Image, con las teclas de flechas que tiene el teclado. La imagen del formulario se ve así:

Desplazamos la imagen hasta llegar al borde del formulario y ahí se detiene. El código es el siguiente:

En Declaraciones generales dimensionamos las siguientes constantes, que podemos traer del Visor de las APIs directamente o copiarlas a mano:

Const KEY_LEFT = &H25 'Habilita la flecha izquierda
Const KEY_UP = &H26 ' habilita la flecha hacia arriba
Const KEY_RIGHT = &H27 ' habilita la flecha derecha
Const KEY_DOWN = &H28 'habilita la tecla hacia abajo

Dim incrementx As Integer ' incrementa la coord X
Dim incrementy As Integer ' incrementa la coord Y

Private Sub Form_KeyDown(KeyCode As Integer>, Shift As Integer) ' este evento de 'oprimir la tecla es el fundamental.
Select Case KeyCode ' hago una selecicion entre los valores del argumento KeyCode 'que ya tengo definido como integer, en el procedimiento entre parentesis, marcado 'en rojo.
Case KEY_LEFT:
If Image1.Left > 0 Then Image1.Left = Image1.Left - incrementx
Case KEY_RIGHT:
If Image1.Left < (Form1.ScaleWidth - Image1.Width) Then
Image1.Left = Image1.Left + incrementx
End If
Case KEY_UP:
If Image1.Top > 0 Then Image1.Top = Image1.Top - incrementy
Case KEY_DOWN:
If Image1.Top < (Form1.ScaleHeight - Image1.Height) Then
Image1.Top = Image1.Top + incrementy
End If
End Select

' en el select case previo incremento la variable X o Y depende la tecla siempre y 'cuando no me salga 'del formulario.

End Sub

Private Sub Form_Load() ' esto le da prioridad al teclado.
Form1.KeyPreview = True

incrementx = Screen.TwipsPerPixelX ' el incremento sera en Pixels y no en twips.
incrementy = Screen.TwipsPerPixelY
End Sub

Con este código adaptado podrán aplicarlo a distintas aplicaciones que usen el teclado.

Y por último un ejercicio donde volvemos a usar una función ya conocida: la RND combinada con Randomize, que hace que busque un numero aleatorio. Aplicado a una tirada de dados. El programa se ve así:

Los dados los pueden buscar de alguna librería de iconos o hacerlos en el Microangelo 98, una aplicación facil de usar y shareware que nos permite dibujar iconos personalizados o retocar, otros ya existentes.

Tenemos botones para los eventos click, y Pictures para mostar los dados tres visibles y tres invisibles con las imagenes cargadas, que luego de elegir los numeros al azar se muestran en los dados visbles, tambien usamos la sentencia Print para darle salida por formulario a los valores elegidos al azar y chequear si el programa funciona bien.

Option Explicit
Dim dado As Integer 'definimos una variable para cada dado
Dim dado1 As Integer
Dim dado2 As Integer


Private Sub mostrar2() ' creamos un procedimiento para cada dado.
Select Case dado2 ' selecciona ente las caras del dado
Case 1
Picture9.Picture = Picture2.Picture 'cargamos la imagenes de acuerdo al numero
Case 2
Picture9.Picture = Picture3.Picture
Case 3
Picture9.Picture = Picture4.Picture
Case 4
Picture9.Picture = Picture5.Picture
Case 5
Picture9.Picture = Picture6.Picture
Case 6
Picture9.Picture = Picture7.Picture
End Select
End Sub


Private Sub mostrar1()
Select Case dado1
Case 1
Picture8.Picture = Picture2.Picture
Case 2
Picture8.Picture = Picture3.Picture
Case 3
Picture8.Picture = Picture4.Picture
Case 4
Picture8.Picture = Picture5.Picture
Case 5
Picture8.Picture = Picture6.Picture
Case 6
Picture8.Picture = Picture7.Picture
End Select
End Sub


Private Sub mostrar()

Select Case dado
Case 1
Picture1.Picture = Picture2.Picture
Case 2
Picture1.Picture = Picture3.Picture
Case 3
Picture1.Picture = Picture4.Picture
Case 4
Picture1.Picture = Picture5.Picture
Case 5
Picture1.Picture = Picture6.Picture
Case 6
Picture1.Picture = Picture7.Picture
End Select
End Sub


Private Sub azar() 'cargamos e las varialbles los valores aleatorios con RND
dado = Int(Rnd * 6) + 1 ' selecciona al azar un número entre 1 y 6
dado1 = Int(Rnd * 6) + 1
dado2 = Int(Rnd * 6) + 1
End Sub


Private Sub Command1_Click()
Picture1.Picture = Nothing ' vacía las imagenes de los dados
Picture8.Picture = Nothing
Picture9.Picture = Nothing
Call azar ' llama al procedimiento azar, elige un Numero
Print dado ' le da salida por formulario
Call mostrar ' lo carga en el control Picture
End Sub


Private Sub Command2_Click()
Picture1.Picture = Nothing
Picture8.Picture = Nothing
Picture9.Picture = Nothing
Call azar
Print dado; dado1
Call mostrar
Call mostrar1
End Sub


Private Sub Command3_Click()
Picture1.Picture = Nothing
Picture8.Picture = Nothing
Picture9.Picture = Nothing
Call azar
Print dado; dado1; dado2
Call mostrar
Call mostrar1
Call mostrar2
End Sub


Private Sub Command4_Click()
Cls
Picture1.Picture = Nothing
Picture8.Picture = Nothing
Picture9.Picture = Nothing
End Sub


Private Sub Command5_Click()
End
End Sub


Private Sub Form_Load()
Randomize
End Sub

Creamos un procedimiento azar para que elija tres numeros al azar entre 1 y 6. Luego le damos salida por el formulario y luego con tres procedimientos uno por cada dado, volcamos las Pictures invisibles en los tres dados (Picture) visibles. Cada vez que volvemos a hacer click para desencadenar estos procedimientos antes, vaciamos las Picture que muestran los dados.

Espero les sirvan para armar algún juego o para hacer alguna selección más vistosa.

 

Hasta la próxima Mirta.

 

Entrega 1 - Entrega 2 - Entrega 3 - Entrega 4 - Entrega 5 - Entrega 6 - Entrega 7 - Entrega 8