Ejercicio Nº 1: Partes de la Computadora.
|
|
|
Abrimos el programa Visual Basic
seleccionamos Nuevo proyecto y comenzamos a trabajar.
|
|
Este ejercicio muestra un truco
muy sencillo pero de gran utilidad. A veces tenemos una imagen total que
queremos particionar, en este caso la computadora, que nos permite
subdividirla en tres partes : monitor, teclado, gabinete. Esto por código
sería muy complejo pero usando el control Label en su modo transparente y con
el Caption vacío, o sea sin etiqueta nos permite subdividir la imagen y que
sus partes respondan a el evento Click por separado, provocando una respuesta
distinta.
En el
formulario podemos ver la Label dibujada sobre el monitor, todavía opaca como
viene por defecto, luego sobre el gabinete está transparente pero con el
Caption , también por defecto en este caso : Label2. Y en el teclado donde
está posicionado el cursor en cambio está transparente. De acuerdo a la parte
que seleccionemos: en una cuarta Label se nos mostrará el texto
correspondiente, en el caso del formulario : "Teclado".
En este
ejercicio tenemos una Image, con su Propiedad Stretch a True, lo que nos
permite agrandar un icono al tamaño deseado. Y cuatro Labels, tres
transparentes para subdividir la Image y una opaca para mostrar la parte
seleccionada, y un Botón de Salida.
El
Código de este ejercicio es el siguiente:
Private
Sub Command1_Click()
End '
Cierre de la aplicación
End Sub
Private
Sub Label2_Click() 'El evento Click modifica el titulo de 'label1
Label1.caption
= "Monitor"
End Sub
Private
Sub Label3_Click()
Label1.caption
= "Gabinete"
End Sub
Private
Sub Label4_Click()
Label1.caption
= "Teclado"
End Sub |
|
Ejercicio Nº 2: Crucigrama.
|
|
|
Comenzamos
un nuevo proyecto.
Con
este ejercicio queremos sugerir una ejemplo de crucigrama que cada uno podrá
adaptar a los contenidos requeridos. También a partir de aquí podríamos
elaborar un Ahorcado. |
El crucigrama está armado con
cuadros de texto o sea controles Text, encerrados dentro de un control frame,
este control tiene la única finalidad de agrupar y contener otros controles,
ordenando la interactividad de una manera visual. Otros dos controles Frame
agrupan las opciones vertical y horizontal. Conteniendo controles CheckBox
que al ser seleccionados hacen la corrección de las letras ingresadas en las
cajas de texto. El ingreso de las mismas se hace en tiempo de ejecución a
través del teclado.
A la
derecha vemos unos controles Picture vacíos que se cargaran con imágenes que
muestren por ejemplo una cara sonriente si la palabra es correcta o seria si
no lo es, o cualquier otro tipo de imagen .Podemos llamar a esta imagen con
la función LoadPicture desde cualquier parte de nuestro disco rígido. Y un
botón con el icono de Hijitus indica la Salida y cierre del programa.
Acá
tendremos que crear por código una estructura condicional que controle si la
entrada de datos es correcta o no.
El
código es el siguiente:
Private
Sub Command1_Click()
End
End Sub
Private
Sub Check1_Click()
If
Text1.Text = "L" And Text2.Text = "O" And Text3.Text=
"R" And Text4.Text ="O" then ' este código debe ir todo
en un mismo reglón y 'chequea si se escribió una de las palabras correctas.
Ciudado con los 'nombres de los Controles porque seguramente Ustedes no
tendrán la 'misma numeración que yo. (Otra aclaración cuando usamos el
carácter ' 'indicamos que todo lo que sigue es un comentario, por lo tanto la
'computadora no lo ejecuta lo saltea, no es código).
Image1.
Picture = LoadPicture(c:\vb\Icons\Misc\Face03.ico) 'carita linda
Else
'Sino
Image1.
Picture = LoadPicture(c:\vb\Icons\Misc\Face01.ico) 'carita fea
End Sub
Private
Sub Check2_Click()
If
Text2.Text = "O" And Text5.Text ="R" And Text9.Text
="O" then
Image2.Picture
= LoadPicture(c:\vb\Icons\Misc\Face03.ico) 'carita linda
Else
'Sino
Image2.
Picture = LoadPicture(c:\vb\Icons\Misc\Face01.ico) 'carita fea
End Sub
Private
Sub Check3_Click()
If
Text7.Text = "R" And Text8.Text ="A" And Text9.Text
="T" And Text4.Text ="O" And Text10.Text ="N"
then
Image3.
Picture = LoadPicture(c:\vb\Icons\Misc\Face03.ico) 'carita linda Else 'Sino
Image3.
Picture = LoadPicture(c:\vb\Icons\Misc\Face01.ico) 'carita fea
End Sub |
|
Ejercicio Nº 3: Animación del Osito.
|
|
|
|
|
|
|
 Para
esta animación usamos un control especial que no está en la Caja de Controles estándar , para incluirlo
vamos a Proyecto , Componentes y allí seleccionamos Microsoft PictureClip
Control y al aceptar , este se incluirá en la Caja de Controles. Permanecerá
invisible en tiempo de ejecución por lo tanto volcaremos su imagen en un control
Picture común que dibujaremos en el Formulario y dejamos vacío. En el
formulario dibujamos un control Picture vacío sin Picture, con el fondo
blanco y sin borde o sea con la propiedad Borderstyle a None. Luego dibujamos
el PictureClip con las propiedades Col a 1 y Row a 9 , y agregamos un Timer
control fundamental en todo tipo de animación. El Timer es un cronómetro que
repite una acción (hace un Bucle) o sentencia en Visual Basic de manera
automática e infinita, hasta que lo desactivamos o cerramos el programa.
El
control PictureClip es una grilla que despliega los distintos frames de la
animación que podemos ver en la imagen a la izquierda. Pueden grabar esta
imagen y usarla en la propiedad picture para el ejercicio. Estos frames o
cuadros de animación tienen un índice en esta imagen de 0 a 8. |
Aquí
también usamos el Método Move para desplazar la imagen del Oso.
El
código de cada procedimiento es el siguiente:
Option
Explicit
Dim A
As Integer 'declaramos a como variable entera
Private
Sub Form_Load()
A = 9 '
Inicializamos la variable en 9.
End Sub
Private
Sub Timer_Timer()
A = A -
1
If A =
0 then A = 8 'Al llegar al frame 0 vuelve a empezar
Picture1.Picture
= PictureClip1.GraphicCell(A)
Picture1.Move
Picture1.Left + 50, Picture1.Top + 50 'Mueve en diagonal
End Sub
Comenzamos
con una variable = 9 porque los frames del osito deben disminuir y no
aumentar sino dá la impresión de caminar al revés.
Una
propiedad fundamental del PictureClip es la GraphicCell ya que ella
automatiza la división de la grilla(imagen total) en partes(frames).
En este
caso en el Move usamos los dos argumentos el Left y el Top de la imagen
, propiedades que indican la ubicación de ésta en relación al borde izquierdo
(coordenada x) y al borde superior (coordenada y). Lo que permitirá que el
oso se mueva en diagonal.
En la
explicación sólo está detallado el movimiento del oso, en el formulario vemos
agregadas otros controles Line e Image simulando una calle, un semáforo y una
señal de Stop, como para darles una idea de lo que podrían agregar a la
escena. |
|
|
|
|
|
Este ejercicio elige en forma
Aleatoria dos números y los despliega en dos Labels para que el alumno luego,
introduzca el valor correcto de la suma de ambos en un TextBox . Si está bien
le aparecerá la carita sonriente y sino la de disgusto. Luego volverán a
aparecer otros dos números para que siga sumando.
|
|
|
El botón Aplicar permite hacer la
corrección mediante un Condicional. Algunos de estos temas son comunes a
otros ejercicios. Por lo tanto nos centraremos en las funciones nuevas.
|
La
función Rnd nos permite cargar en una variable un número aleatorio que en
este caso definimos como entero Int (de Integer) y de 0 a 10.
Num1 =
int( Rnd * 10)
Repetimos
el procedimiento para Num2, el segundo sumando de nuestra cuenta. Para que
realmente sea aleatorio debemos incorporar la sentencia Randomize en el
Procedimiento Load del Formulario.
Otra
función que utilizamos es Val que transforma una cadena de caracteres, en
este caso el contenido de un Text en un valor numérico.
Resultado
= Val ( Text1.Text)
Y luego
con un condicional y el operador de suma + controlamos si el resultado es
correcto:
If
resultado = Int(num1) + Int(num2) then...
En el
caso de resolver bien la cuenta pasa a cargar otros dos números , iniciando
una nueva cuenta. Pero necesitamos una espera en la aplicación. Esto lo
hacemos por código con un bucle que asociado al reloj del sistema crea una
pausa en la aplicación. Para esto creamos un Procedimiento llamado Pausa.
Posicionados en la ventana de código , vamos a Tools/ Herramientas, Add
Procedure/ Agregar Procedimiento, y en la ventana que se nos abre elegimos un
Name para el mismo en este caso = Pausa y luego con los botones de opción
seleccionamos: Sub y Private. Damos el Aceptar y se cierra la ventana. Ahora
veremos en nuestra ventana de código un nuevo Procedimiento llamado Pausa.
Incluido dentro de los procedimientos del objeto General. Luego lo llamaremos
desde otra parte del programa con la sentencia Call.
Para
mayor claridad vamos al código:
Option
Explicit
Dim
num1, num2, resultado As Integer
Private
Sub pausa() ' este el procedimiento creado por nosotros
Dim
comenzar
Dim
controlar
comenzar
= Timer
Do
Until controlar > = comenzar + 1.5 ' este es el bucle de espera
controlar
= Timer
DoEvents
' esta sentencia evita un bucle egoista
Loop
End Sub
Private
Sub Command1_Click()
num1 =
Int(Rnd * 10) 'elige un número aleatorio
num2 =
Int(Rnd * 10) 'elige un número aleatorio
Text1.Text
= ""
Label1.Caption
= num1
Label2.Caption
= num2
Text1.SetFocus
' ubica el foco del cursor en el control Text1
Command2.Enabled
= False
Image1.Picture
= Nothing 'vacía el contenido de la imagen
End Sub
Private
Sub Command2_Click()
Command2.Enabled
= False
resultado
= Val(Text1.Text)
If
resultado = Int(num1) + Int(num2) Then
Image1.Picture
= Picture1.Picture
Call
pausa ' llama al procedimiento que creamos como Pausa
Call
Command1_Click 'este procedimiento llama a otra suma
Else
Image1.Picture
= Picture2.Picture
End If
End Sub
Private
Sub Command3_Click()
Unload
Me
End Sub
Private
Sub Form_Load()
Randomize
num1 =
Int(Rnd * 10)'al cargarse el programa ya aparece una cuenta
num2 =
Int(Rnd * 10)
Text1.Text
= ""
Label1.Caption
= num1'se vuelcan las variables en las Labels
Label2.Caption
= num2
Command2.Enabled
= False'el botón aplicar está desactivado
End Sub
Private
Sub Text1_Change()
Command2.Enabled
= True'al cambiar el texto se activa Aplicar
End Sub |
|
 Ejercicio Nº 5: Torero.
|
|
Este
ejercicio muestra una sucesión de Imágenes al estilo un show de diapositivas .Las
imágenes las cargamos en controles Image a la izquierda del formulario
invisibles, para luego convocarlas por código y desplegarlas en la Image
central, ésta si con su propiedad visible = True. |
|
La sucesión de imágenes la realiza
un control Timer asociado a un contador , cada imagen se relaciona con un
texto que desplegamos en una Label colocada debajo de la imagen central. Al
llegar el contador a 12 se detiene la sucesión y se muestra una Label con los
nombres de los creadores de la aplicación.
|
La Label
= Reiniciar nos posibilita volver a comenzar sin salir de la aplicación, para
esto inicializa la variable A = 0 y pone el Timer nuevamente en
funcionamiento.
El
código de los principales procedimientos es el siguiente:
Option
explicit
Dim A
as Integer
Private
Sub Label3_Click() ' esta es la label de reiniciar
Timer1.enabled
= True
A = 0
Label2.caption
= "Lo primero es la coleta..."
Label4.visible
= False ' oculta a los Autores
End Sub
Private
Sub Timer1_Timer()
A = A +
1
If A =
3 then
Image13.Picture=
Image1.Picture
Label2.caption
= "Y los tirantes después..."
ElseIf
A = 4 then
Image13.Picture
= Image5.Picture
Label2.caption
= "enseguida la corbata..."
Elseif
A = 5 Then ' Y así las distintas opciones de Imágenes y de Texto.
Label4.Visible
= True ' muestra los Autores
Timer1.enabled
= False ' desactiva el Timer
End If
End Sub
Controlen
el orden de las Imágenes de acuerdo a su propia aplicación, y los textos
siguientes son:
"Y
una faja de chipé..."
"El
chaleco hay que ensancharlo ..."
"la
chaquetilla está bien..."
"Una
cinta desatada..."
"Un
beso ardiente ...dos...tres..."
"Mezcla
de llanto y de juego y un rezo de ella por él..."
"Dios
mío que vuelva zano! ¡Si muere, muero también!
La
sintaxis de los textos se mantiene como en las fotos originales. |
|
Ejercicio Nº 6: Sistema Solar.
|
|
|
Este ejercicio es similar al de
las partes de la computadora. Una Imagen grande es particionada a través de
Labels transparentes que nos permiten en este caso identificar cada planeta
por separado.
|
Al pasar
el puntero del mouse sobre el planeta este cambia por una manito lo que nos
indica que es posible una interacción. Y al clickear sobre el mismo despliega
en la Label inferior el nombre del planeta.
Vamos a
centrarnos en las novedades que aporta este ejercicio en relación al Nº1.
Primero : podemos cambiar el puntero del mouse: Para esto en la propiedad
MousePointer y MouseIcon de cada Label transparente haremos cierta
modificaciones.
MousePointer
= 99 (Custome) ' O sea la opción personalizada.
MouseIcon
= Seleccionamos de la carpeta Icons o de otra en especial el Icono que
queremos mostrar.
Segundo
: Vemos en la Imagen Inferior que muestra la Aplicación en ejecución, dos
botones : uno de Imprimir y otro de Salir, que en realidad no son Botones
porque su forma es ovalada. Estos son Controles Shape de forma ovalada . Como
el Control Shape es puramente decorativo y no responde a ningún Evento ,
entonces aquí también con un pequeño truco , le colocamos una Label
transparente sobre la Shape con la propiedad Caption = Imprimir o Salir y
ahora sí la Label responde al Evento Click.
Tercero:
En la Shape Imprimir , al clickear sobre ella imprimimos el Formulario en
tiempo de ejecución. El código es:
Private
Sub Label13_Click()
Form1.PrintForm
End Sub |
|
Ejercicio Nº 7: Cubos.
|
|
|
Este ejercicio y los tres
siguientes usan en sus procedimientos el Drageo o Drag and Drop , que
significa arrastrar y soltar y nos va a permitir mover un objeto en tiempo de
ejecución de un lugar a otro del formulario. Este tipo de ejercicios es muy
útil para los docentes que trabajan con los más pequeños.
|
Usamos
tres controles Picture cargando en cada uno de ellos un icono que les guste.
Y en la propiedad Dragmode de cada picture elegimos la opción Automatic , la
numero 1. Esto permitirá mover los controles. Pero para que realmente se
desplacen debemos agregar al procedimiento Form_DragDrop el siguiente código:
Private
Sub DragDrop ( Source as control, X as Single, Y as Single)
Source.Move
x, y
End Sub
Dentro
de los argumentos entre paréntesis vemos Source que quiere decir origen, o
sea el control de origen y esto es muy importante porque quiere decir que no
hace falta que especifiquemos que picture estamos moviendo o arrastrando y
soltando , el procedimiento lo registra de por sí, y lo que debemos
actualizarle son las nuevas coordenadas que leerá el procedimiento a través
de x, y. Aquí usamos un método ya conocido el Move. Al correr el programa
podemos clickear sobre una de las figuras y manteniendo el botón izquierdo
del mouse apretado arrastrarla a la nueva posición que deseamos y luego
soltarla. |
|
Ejercicio Nº 8: Día Feliz.
|
|
|
Este ejercicio de drageo utiliza
también imágenes que pueden desplegarse en controles picture o image . En
este caso son Images con su propiedad stretch a true lo que permite usar
iconos y poder agrandarlos.
|
La
Image1 la carita fea tiene la propiedad DragMode en 1 : Automática. Y en la
propiedad DragIcon tiene cargado el mismo icono para que cuando la
arrastremos no se vea una ventana vacía. Pero ahora el procedimiento usado es
el DragOver que detecta cuando pasamos por encima de un control determinado.
En este caso es el cesto o la Image2 . Y el objetivo es que al arrastrar la
carita fea sobre el cesto esta desaparezca, simulando que la estamos tirando
dentro del cesto. Entonces el código indicado será:
Private
Sub Image2_DragOver (...)
Image1.visible
= False
End Sub
|
|
Esto hace que al pasar la Image1
sobre la Image2 la primera se vuelva invisible lo que simula que la hemos
tirado dentro del cesto. En tiempo de ejecución se verá de la siguiente
manera :
|
|
Ejercicio Nº 9: Compra de Productos.
|
|
|
En este ejercicio arrastramos las
imágenes del teléfono, reloj y filmadora, como si hiciéramos una compra
virtual sobre la calculadora y el valor del total, se va incrementando
haciendo la cuenta de lo que gastamos.
|
Los
controles son cuatro Image , el botón que borra el total a pagar. Una caja de
texto que muestra el total y las demás son Labels indicativas.
Cuando
arrastramos la imagen vamos a observar que no drageamos un rectángulo o
ventana vacía sino iconos que coinciden con la imagen elegida, para eso a
cada imagen le cargamos su icono correspondiente en la propiedad DragIcon. No
olvidarse poner la propiedad DragMode en 1. El código es el siguiente:
Dim
total as integer ' Declaramos en la parte General la variable.
Private
Sub Command1_Click()
Text1.text
= "" ' vaciámos la caja de texto.
Total =
0 ' reiniciamos la variable a 0.
End Sub
Private
Sub Image4_dragDrop (...) ' En imagen de la calculadora.
If
Source = Image1 then ' Aquí testeamos la imagen de origen.
Total =
total + 260
Elseif
Source = Image2 then
Total =
total + 300
Elseif
Source = Image3 then
Total =
total + 1400
End if
Text1.text
= total
End Sub
Acá
vemos la importancia del argumento Source como control de origen, porque nos
permite testear en el condicional a que imagen nos estamos refiriendo. |
|
Ejercicio Nº 10: Ordenar de Menor a Mayor.
|
|
|
Este ejercicio usa el Drageo para
que los alumnos ordenen los números de Menor a Mayor.
|
|
Tenemos
3 Labels que muestran los números a ordenar y otras 3 Labels que recibirán
los números drageados de las Labels anteriores. Y dos Botones El de Números
que a través del procedimiento Azar elige tres números aleatorios para cada
label con la función Randomize y el Botón Corregir que chequea que estén
ordenados realmente de menor a mayor. La Label7 muestra un "Bien" o
un "Mal", de acuerdo a si el orden es correcto o no. El código es
el siguiente:
Dim N1,
N2, N3 as Integer ' declaramos las variables en General.
Private
Sub Command1_Click() ' Este es el botón Números
Label4.caption
= ""
Label5.caption
= ""
Label6.caption
= "" ' vaciamos los números ordenados
Label1.visible
= True
Label2.visible
= True
Label3.visible
= True ' volvemos visibles las Label que drageamos.
Call
Azar ' Convocamos al procedimiento creado en General.
End Sub
Private
Sub Azar() ' creamos un procedimiento llamado Azar
N1=
int(Rnd * 10) + 1 ' elige un número aleatorio de 1 a 10
N2=
int(Rnd * 10) +1
N3=
int(Rnd * 10) +1
If N1
<> N2 And N2 <> N3 And N1 <> N3 then 'controla que no haya
2 números iguales. Usamos los operadores <> y And.
Label1.caption
= N1 ' volcamos los valores de las variables en las labels.
Label2.caption
= N2
Label3.caption
= N3
Else
Exit
Sub ' Si uno de los números se repite sale de la Rutina y vuelve a llamarse
al procedimiento Azar desde el Botón 1.
End If
End Sub
Private
Command2_Click () ' Este es el Botón Corregir.
If
Val(Label4.Caption) < Val(Label5.Caption) And Val(Label5.Caption) <
Val(Label6.caption) Then ' Este condicional que controla el orden de los
números debe ir en una sola línea.
Label7.Caption
= "Bien"
Else
Label7.caption=
"Mal"
End If
End Sub
Private
Sub Form_Load()
Randomize
' Reinicia la funcion Rnd
Call
Azar ' llama al procedimiento Azar.
Private
Sub Label4_DragDrop(..)
Label4.Caption
= Source ' La label que recibe el control de Origen toma el caption de este
Origen.
Source.visible
= False ' oculta el control de origen una vez drageado.
End Sub
Este
código de la Label4_DragDrop lo repetimos para la Label5 y la Label6 y
recordemos modificar su Dragmode a 1. |
|
En tiempo de ejecución luego de
arrastrar las Labels 1 2 y 3 sobre las 4 5 y 6 y clickear en Corregir veremos
una pantalla similar a la siguiente:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
