GUIA RÁPIDA DE VISUAL BASIC 6.

0 MODULO II

2) Diseño de interfaz de mí primer programa.

Ya terminado el proceso anterior de instalación del software, procedemos a dar un doble clic
sobre el icono del programa que se denomina “Microsoft Visual Basic 6.0.exe” y aparecerá la
imagen#8 que se muestra a continuación:

Imagen#8

En la ventana “Nuevo proyecto” que se muestra en la imagen#7 como resultado de la operación

anterior vamos a seleccionar la opción “EXE estándar” y luego presionar el botón “Abrir” este
procedimiento nos dará la imagen#9. Que será nuestra interfaz de programación.

Imagen#9

Ing. Danny Rosas

5
 GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

En la figura#10 se identifican cada unas de las áreas que contiene la interfaz de programación que
serán usadas en el desarrollo de nuestros programas.

Barra de Herramientas Barra de menús

Ventana del proyecto

Ventana del formulario

Ventana de
propiedades

Cuadro de
herramientas

Ventana que contiene el formulario Ventana de posición

Imagen#10 del formulario

Para hacer el diseño de la interfaz de nuestro programa usaremos la ventana del formulario. Como
nos damos cuenta esta ventana se presenta muy pequeña y por lo tanto hay que colocarla más
grande para que sea mucho mejor trabajar en ella. Para hacer dicho procedimiento se coloca el
puntero del mouse en la esquina inferior izquierda del formulario y se hace click y arrastra y luego
suelta para así obtener un tamaño mayor de la ventana. Ver imagen#11.

Ing. Danny Rosas

6
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#11 aumento de tamaño de la ventana formulario.

En la imagen#12 se muestra el resultado del procedimiento anterior.

Imagen#12

Ahora vamos a proceder a colocar nuestro primer botón en nuestro programa. Seleccionamos del
cuadro de herramienta que se encuentra del lado derecho el commandButton y luego situamos el
puntero del ratón sobre el formulario.

Cuando el puntero este sobre el formulario se convertirá en una cruz. Ubique el puntero en una
ubicación del formulario donde quiera insertar el botón a crear. Presione el botón izquierdo del
ratón y manténgalo pulsado mientras lo arrastra hacia la derecha y hacia abajo. Suelte el botón
izquierdo del ratón cuando vea el objeto botón de forma rectangular en la pantalla del tamaño
deseado. Ver las imágenes 13, 14 y 15 respectivamente.

Ing. Danny Rosas

7
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#13

Imagen#14

Imagen#15

Ing. Danny Rosas

8
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Repita el procedimiento anterior para crear un segundo botón. El formulario de nuestro programa
quedara algo parecido a lo mostrado en la imagen#16

Imagen#16

Ya hemos creado dos botones a nuestro diseño del programa. Ahora vamos a crear una etiqueta
donde se mostraran un número. Una etiqueta es un elemento especial de la interfaz de usuario
diseñada para mostrar texto, números o símbolos cuando se ejecuta un programa.

Para añadir una etiqueta a nuestro programa hacemos click en la opción “Label” que se encuentra
en el cuadro de herramienta y se identifica con la letra A y luego sitúe el puntero del ratón sobre
el formulario donde quiera usted que aparezca el número. Pulse y mantenga pulsado el botón
izquierdo del ratón y arrastre hacia la derecha y hacia abajo hasta obtener un cuadrado de tamaño
deseado para mostrar el mensaje (en nuestro programa será un número). Ver la imagen 17 y 18

Imagen#17

Ing. Danny Rosas

9
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#18

Repetir el procedimiento anterior para crear 3 etiquetas más. La interfaz creada hasta el momento
debe ser aproximadamente como la de la imagen#19

Imagen#19

Ahora vamos añadir una imagen a nuestro programa que aparecera cuando ocurra cierto evento.
Pulse el control image contenido en el cuadro de herramienta que se encuentra simbolizado con
la imagen#20

Imagen#20 símbolo del control image.

Ing. Danny Rosas

10
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Construya un cuadro grande en el formulario como se muestra en la imagen#21 y usando el

procedimiento de pulsar y mantener pulsado el botón izquierdo del ratón como se ha hecho con
los otros controles.

Imagen#21

Ya definimos como estarán distribuidos los controles de nuestro programa sobre el formulario
ahora debemos definir sus propiedades. Para esto hacemos click sobre el elemento contenido en
el programa.

Comenzaremos a definir las propiedades del botón de orden Command1 (usted puede comenzar
por cualquiera yo iniciare por el primer botón que cree). Lo primero que hago es hacer click sobre
el botón Command1 y luego realizo un doble click sobre la barra de titulo de la ventana
propiedades (es opcional esté último paso), esto permitirá que la barra de propiedades se mueva
de su lugar. Ver la imagen#22

Imagen#22

Ing. Danny Rosas

11
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

En la barra de propiedades buscamos la opción Caption y hacemos doble click sobre ella para que
se seleccione la propiedad que está en la columna derecha que dice Command1 luego escribimos
la palabra JUGAR y pulsamos la tecla INTRO. Ver las imágenes 23, 24 y 25.

Imagen#23

Imagen#24

Imagen#25

Ing. Danny Rosas

12
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Observe como en el procedimiento anterior se cambio la palabra que identificaba el botón. Del
mismo modo podemos hacer con el segundo botón y colocarle la palabra FIN. Podemos
seleccionar también los otros elementos de nuestro formulario haciendo click en el cuadro de lista
desplegable que se encuentra en la parte superior de la ventana de Propiedades.

Aparecerá una lista que enumera los objetos de la interfaz contenida en nuestro programa, como
se puede ver en la imagen#26

Imagen#26

En la imagen#27 se observa como se seleccionó la propiedad Caption del segundo botón y

cambiamos su valor por la palabra FIN

Imagen#27

Ahora cambiaremos algunas propiedades de la primera etiqueta. Seleccionaremos del cuadro de

lista desplegable de la ventana Propiedades el elemento Lable1 y pulsaremos sobre la propiedad
Alignment (alineación) y posteriormente pulsamos sobre la flecha del cuadro de lista desplegable
que aparece a la derecha, aquí aparecerán unas opciones de alineación nosotros tomaremos la
opción 2-Center. Ver imagen 28, 29 y 30.

Ing. Danny Rosas

13
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#28

Imagen#29

Imagen#30

Una segunda propiedad a cambiar en la etiqueta será la BorderStyle. Pulsemos sobre esta
propiedad y luego sobre la flecha del cuadro de lista desplegable que aparece a su derecha. Aquí

Ing. Danny Rosas

14
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

seleccione el valor 1-Fioxed Single. Esté valor agrega un borde fino alrededor de la etiqueta. Ver la
imagen#31

Imagen#31

La tercera propiedad que cambiaremos en la etiqueta será el tipo de fuente de letras que
queremos que tengan nuestro mensaje. Seleccionemos la propiedad Font y demos doble click en
ella para que nos aparezca la ventana de fuente. Ver imagen 32 y 33.

Imagen#32

Imagen#33

Ing. Danny Rosas

15
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

En la imagen 33 se observa que se selecciónó la fuente Time New Roman con un estilo de fuente
Negrita y tamaño 24. Usted pudo elegir cualquiera, pero esta se ven bien. Bueno estos cambios
sobre las propiedades de la primera etiqueta también los hice sobre las etiquetas Label2 y Label3.
El resultado de estos procedimientos se puede ver en la imagen#34

Imagen#34

Un último cambio en las etiquetas es quitar la palabra Label1, Label2 y Label3. Para esto
seleccionamos la propiedad Caption en cada una de las etiquetas y borramos las palabras
correspondientes. Ver imagen 35 y 36

Imagen#35

Ing. Danny Rosas

16
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#36

Ahora nos toca cambiar las propiedades de la etiqueta Label4. Cambiaremos el valor de la
propiedad Caption por un mensaje que va hacer como el título de nuestro programa. Coloque la
frase “JUEGO DE LA SUERTE” ustedes pueden colocar cualquier otro. Ver la imagen#37.

Imagen#37

Cambiaremos la propiedad Font y elegiremos Arial en Negrita tamaño 16. Ver imagen 38 y 39.

Ing. Danny Rosas

17
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#38

Imagen#39

También vamos cambiar el color de las letras. Para hacer esto seleccionamos la propiedad
ForeColor con un doble click. Aparecerá un cuadro de lista de contenido con dos pestañas Paleta y
Sistema.

La pestaña Sistema muestra los colores que se están usando en ese momento para representar los
elementos de la interfaz de su sistema. La pestaña Paleta mostrará todos los colores disponibles
en su sistema.

Haga click en la pestaña Paleta y seleccione un color, en mi caso escogí el amarillo oscuro. Ver
imagen 40, 41 y 42.

Ing. Danny Rosas

18
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#40

Imagen#41

Ing. Danny Rosas

19
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#42

Pulsar en la flecha de la lista desplegable para ocultar el cuadro de colores. Ver resultado en la
imagen#43

Imagen#43

Llego el momento por configurar las propiedades del elemento Image. Seleccionemos del cuadro
de lista desplegable de la ventana propiedades el objeto Image1. Busquemos la propiedad Stretch
y pulse sobre la flecha situada al lado derecho para elegir el valor de True. Esto permite que la
imagen se adapte al tamaño del cuadro de imagen creado en el formulario. Se recomienda ajustar
primero esta propiedad que la de Picture. Ver imagen#44

Ing. Danny Rosas

20
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#44

La otra propiedad a modificar en el objeto del cuadro imagen es la de Picture. Haga doble click en
está propiedad y aparecerá una ventana llamada Cargar imagen. Está ventana le permitirá buscar
una imagen en su computadora la selecciona y le da al botón abrir. Ver las imágenes 45, 46 y 47 de
este procedimiento.

Imagen#45

Ing. Danny Rosas

21
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#46

Imagen#47

La propiedad Visible la seleccionamos y le damos el valor de False, para que la imagen no aparezca
cuando inicie el programa. Ver imagen 48 y 49.

Ing. Danny Rosas

22
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#48

Imagen#49

En hora buena ya terminamos con el diseño de nuestra interfaz si queremos ver como se verá
nuestro programa. Le damos click al botón de la barra de herramienta Iniciar que se representa
por una flecha o también simplemente presionamos la tecla F5 y veremos la interfaz de nuestro
programa. Ver la imagen#50 el resultado de lo hasta ahora elaborado.

Ing. Danny Rosas

23
GUIA RÁPIDA DE VISUAL BASIC 6.0 MODULO II

Imagen#50

Ing. Danny Rosas

24