Capitulo 8.

Grficos y Animacin
En Microsoft Visual Basic .NET crear efectos especiales de animacin es una tarea
sencilla. En este capitulo se aprender a crear efectos de animacin sencillos utilizando
los controles PictureBox, Timer1, Imae!ist " a expandir o contraer los controles
utilizando las propiedades #ei$t " %idt$ " mo&er los controles en forma $orizontal o
&ertical utilizando las propiedades !eft " Top.
Grficos utilizando el espacio de nombres System.Drawing
El espacio de nom'res ("stem.)ra*in contiene numerosas clases con las +ue se
podrn crear di'u,os en un prorama. Espec-ficamente con la clase
("stem.)ra*in..rap$ics tiene m/todos " propiedades para di'u,ar fiuras en un
formulario. El punto de partida del sistema de coordenadas de un formulario es la
es+uina superior iz+uierda con coordenada 01,12. El sistema de coordenadas esta
compuesto por filas " columnas +ue representan los puntos de una imaen llamados
p-xeles. !as fiuras se pueden crear &ac-as o con relleno de color, estos m/todos lle&an
el prefi,o fill.
Para utilizar un m/todo rafico es necesario crear un o',eto ("stem.)ra*in..rap$ics "
un o',eto Pen 0se utiliza como arumento cuando no se rellena con nin3n color2 o
Brus$ 0se utiliza cuando se +uiere tener un color de relleno2.En la siuiente se muestran
alunas de las fiuras eom/tricas de Visual Basic .NET4
Tabla 8.. !iguras geom"tricas de .#$T
5iura M/todo )escripcin
Punto 0estructura2 Point 6epresenta un par ordenado de
coordenadas x e " de enteros +ue
define un punto en un plano
'idimensional.
6ectanulo
0estructura2
6ectanle 7lmacena un con,unto de cuatro
enteros +ue representan la posicin "
tama8o de un rectnulo.
6ecta )ra*!ine )i'u,a una l-nea +ue conecta los dos
puntos especificados por los pares de
coordenadas
6ectanulo )ra*6ectanle,
5ill6ectanle
)i'u,a un rectnulo especificado por
un par de coordenadas, un &alor de
anc$o " un &alor de alto.
9irculo : Elipse )ra*Ellipse,
5illEllipse
)i'u,a una elipse definida por un
rectnulo delimitador especificado por
un par de coordenadas, un &alor de alto
" un &alor de anc$o.
9ur&a )ra*9ur&e )i'u,a una cur&a a tra&/s de una matriz
especificada por la estructura Point.
7rco )ra*7rc )i'u,a un arco especificado por un par
1
de coordenadas, un &alor de anc$o " un
&alor de alto.
Poliono )ra*Pol"on,
5illPol"on
)i'u,a un pol-ono definido por una
matriz especificada por la estructura
Point.
Pie )ra*Pie, 5illPie )i'u,a una forma circular definida por
una elipse determinada por un par de
coordenadas, unos &alores de anc$o "
alto " dos l-neas radiales.

$%emplo prctico de grficos con System.Drawing.Grap&ics
En el siuiente e,ercicio se realizara una aplicacin +ue permita a un usuario por medio
de 'otones raficar4 una l-nea, un rectnulo sin relleno, un rectnulo con relleno, una
cur&a, una elipse sin relleno, una elipse con relleno, un arco , un pol-ono " una rafica
de torta.
'niciar un nue(o proyecto )isual *asic .#$T
. En el men3 Arc&i(o, seleccione #ue(o ", a continuacin, $aa clic en
+royecto.
,. En el cuadro #ombre, escri'a Dibu%osen!ormularios
-. #aa clic en $.aminar, 'us+ue la carpeta donde +uiera crear el nue&o
pro"ecto, " a continuacin $aa clic en Abrir/ lueo $aa clic en Aceptar.
Crear la interfaz de usuario.
;tilizando el cuadro de $erramientas $aa clic en el control Button " adicione nue&e
Button al formulario. !a fiura muestra la interfaz de usuario4
!igura 8.. 'nterfaz de usuario
<
$stablecer las propiedades de los ob%etos de la interfaz de usuario.
)espu/s de colocar los controles u o',etos en el formulario, esta'lezca las siuientes
propiedades a los controles4
Tabla 8.,. +ropiedades de los controles de la aplicacin Dibu%osen!ormularios
Control +ropiedad )alor
Button1
Name l-nea
Text l-nea
Button< Name cur&a
Text 9ur&a
Button= Name rectanulosr
Text 6ectanulo sin 6elleno
Button> Name rectanulocr
Text 6ectanulo con 6elleno
Button? Name elipsesr
Text Elipse sin 6elleno
Button@ Name elipsecr
Text Elipse con 6elleno
ButtonA Name arco
Text 7rco
ButtonB Name pol-ono
Text Polion
ButtonC Name pie
Text Torta
5orm1 Name 5ormulario
Text .rficos Visual Basic .NET
$scribir cdigo
(eleccione el o',eto lnea, de do'le clic para a'rir el editor del procedimiento
linea_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.Red)
graficar = e.CreateGraphics
graficar.Draw!ine(color" #$" %$" &$" '$)
En el anterior cdio se define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o en
la l-nea. El m/todo DrawLine permite di'u,ar una l-nea, dic$o m/todo contiene cinco
parmetros4 el primero es el color de la l-nea, el seundo es la coordenada x inicial, el
tercero es la coordenada y inicial, el cuarto es la coordenada x final " el +uinto es la
coordenada y final.
(eleccione el o',eto curva, de do'le clic para a'rir el editor del procedimiento
=
curva_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.(l)e)
graficar = e.CreateGraphics
Dim p)nto# As New Point('$" %$)
Dim p)nto% As New Point(#$$" *$)
Dim p)nto* As New Point(##$" +$)
Dim p)nto+ As New Point(,$" -$)
Dim c)r.a As Point() = /p)nto#" p)nto%" p)nto*" p)nto+0
graficar.DrawC)r.e(color" c)r.a)
En el anterior cdio se define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o en
la cur&a. (e definen por medio de la estructura Point, oc$o puntos los cuales son
almacenados es una &aria'le curva de tipo Point. El m/todo DrawCurve permite
di'u,ar una cur&a, dic$o m/todo contiene dos parmetros4 el primero es el color de la
cur&a " el seundo es el arrelo de puntos.
(eleccione el o',eto rectasr, de do'le clic para a'rir el editor del procedimiento
rectasr_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.1ellow)
graficar = e.CreateGraphics
graficar.DrawRectangle(color" #-$" #$" %$$" #$$)

En el anterior cdio define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o en
el rectnulo. El m/todo DrawRectangle permite di'u,ar un rectnulo sin relleno,
dic$o m/todo contiene cinco parmetros4 el primero es el color del rectnulo, el
seundo es la coordenada x, el tercero es la coordenada y, el cuarto es el anc$o " el
+uinto es el alto.

(eleccione el o',eto arco, de do'le clic para a'rir el editor del procedimiento
arco_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.(lac2)
graficar = e.CreateGraphics
graficar.DrawArc(color" #+$" #%$" %$$" #$$" #$$" 3#'$)
En el anterior cdio define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o en
el arco. El m/todo Drawrc permite di'u,ar arco, dic$o m/todo contiene siete
parmetros4 el primero es el color del arco, el seundo es la coordenada x, el tercero es
la coordenada y, el cuarto es el anc$o, el +uinto es el alto, el sexto es el 7nulo inicial "
el s/ptimo es el 7nulo final.

(eleccione el o',eto elipsesr, de do'le clic para a'rir el editor del procedimiento
>
elipsesr_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.Green)
graficar = e.CreateGraphics
graficar.Draw4llipse(color" #$" #+$" #$$" &$)
En el anterior cdio define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o en
la elipse. El m/todo Draw!llipse permite di'u,ar una elipse sin relleno, dic$o m/todo
contiene cinco parmetros4 el primero es el color de la elipse, el seundo es la
coordenada x, el tercero es la coordenada y, el cuarto es el anc$o " el +uinto es el alto.
(eleccione el o',eto rectacr, de do'le clic para a'rir el editor del procedimiento
rectacr_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim relleno As New Solid(r)sh(Color.Salmon)
graficar = e.CreateGraphics
graficar.5illRectangle(relleno" +$$" #$" +*$" #$$)
En el anterior cdio define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto relleno de tipo Soli"#rush para seleccionar el color de relleno del
rectnulo. El m/todo $illRectangle permite di'u,ar un rectnulo con color de relleno,
dic$o m/todo contiene cinco parmetros4 el primero es el color de relleno, el seundo es
la coordenada x, el tercero es la coordenada y, el cuarto es el anc$o " el +uinto es el alto.
(eleccione el o',eto elipsecr, de do'le clic para a'rir el editor del procedimiento
elipsecr_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim relleno As New Solid(r)sh(Color.Gray)
graficar = e.CreateGraphics
graficar.5ill4llipse(relleno" #+$" #%$" '$" '$)
En el anterior cdio define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto relleno de tipo Soli"%rush para seleccionar el color de relleno del di'u,o.
El m/todo $ill!llipse permite di'u,ar una elipse con relleno, dic$o m/todo contiene
cinco parmetros4 el primero es el color de relleno de la elipse, el seundo es la
coordenada x, el tercero es la coordenada y, el cuarto es el anc$o " el +uinto es el alto.
(eleccione el o',eto polgono, de do'le clic para a'rir el editor del procedimiento
poligono_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim relleno As New Solid(r)sh(Color.Chocolate)
graficar = e.CreateGraphics
Dim p)nto# As New Point(-$$" #+$)
Dim p)nto% As New Point(+&$" #'$)
Dim p)nto* As New Point(+&$" %%$)
Dim p)nto+ As New Point(-$$" %&$)
Dim p)nto- As New Point(-+$" %&$)
Dim p)nto& As New Point(-'$" %%$)
?
Dim p)nto, As New Point(-'$" #'$)
Dim p)nto' As New Point(-+$" #+$)
Dim c)r.a As Point() = /p)nto#" p)nto%" p)nto*" p)nto+"
p)nto-" p)nto&" p)nto," p)nto'0
graficar.5illPolygon(relleno" c)r.a" Drawing%D.5illode.6inding)
En el anterior cdio se define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto relleno de tipo Soli"#rush para seleccionar el color de relleno. (e definen
por medio de la estructura Point, oc$o puntos los cuales son almacenados es una
&aria'le curva de tipo Point. El m/todo $illPolygon permite di'u,ar un pol-ono, dic$o
m/todo contiene tres parmetros4 el primero es el color de relleno, el seundo es el
arrelo de puntos " el tercero es el tipo de relleno.
(eleccione el o',eto pie, de do'le clic para a'rir el editor del procedimiento
pie_Clicked " escri'a el siuiente cdio4
Dim graficar As System.Drawing.Graphics
Dim color As New System.Drawing.Pen(System.Drawing.Color.Red)
graficar = e.CreateGraphics
graficar.DrawPie(color" New Rectangle(New Point(*'$" %+$)"
New Si7e(#-$" '-))" $" %,$)
En el anterior cdio se define una &aria'le graficar de tipo System.Drawing.Graphics
para enerar instancias de la &aria'le mediante el m/todo CreateGraphics , tam'i/n se
crea un o',eto color de tipo System.Drawing.Pen para seleccionar el color del di'u,o.
(e definen por medio de la estructura Rectangle, dos puntos los cuales son almacenados
es una &aria'le curva de tipo Point. El m/todo $"rawpie permite di'u,ar una torta,
dic$o m/todo contiene tres parmetros4 el primero es una estructura Rectangle donde se
definen dos puntos, el seundo es el anc$o " alto definido por la estructura Si&e, el
tercero es el 7nulo inicial " el cuarto es el 7nulo final.
$%ecutar el proyecto
Para e,ecutar el pro"ecto en el entorno de desarrollo de &isual Basic.NET, se de'e
realizar lo siuiente4
#aa clic en el 'otn Iniciar de la 'arra de $erramientas estndar. Tam'i/n
puede presionar 5? para e,ecutar el pro"ecto. (i la aplicacin se e,ecuta sin
errores, aparecer una &ersin e,ecuta'le del formulario, &isualizndose la
siuiente fiura4
@
!igura 8.-. $%ecucin aplicacin Dibu%osen!ormularios
7l pulsar cada uno de los 'otones de o'tendr la siuiente fiura4
!igura 8.0. !ormulario con figuras geom"tricas
1o(imiento de un control
Para +ue un control se mue&a en forma $orizontal, &ertical o diaonal es necesario
modificar las propiedades del control Top " !eft. !a propiedad !eft permite mo&er un
A
control de iz+uierda a derec$a " &ice&ersa. !a propiedad Top permite mo&er un o',eto
de arri'a a'a,o " &ice&ersa. Existen dos formas de realizar esta operacin4 manualmente
" automticamente. )e la forma manual se puede realizar $aciendo un clic so're un
'otn cada &ez +ue el usuario desea mo&er la fiura. )ic$o control contendr un cdio
+ue permitir realizar un mo&imiento espec-fico. D de forma automtica se realiza por
medio de un control Timer +ue permite mane,ar inter&alos de tiempo " el cual se puede
proramar para +ue realice unas tareas especificas en un determinado inter&alo de
tiempo.
$%emplo prctico de 1o(imiento de un control
En el siuiente e,ercicio se realizara una aplicacin +ue permita a un usuario por medio
de controles mo&er una imaen en forma $orizontal " &ertical en forma manual "
automtica.
'niciar un nue(o proyecto )isual *asic .#$T
. En el men3 Arc&i(o, seleccione #ue(o ", a continuacin, $aa clic en
+royecto.
,. En el cuadro #ombre, escri'a 1o(imiento'magen
-. #aa clic en $.aminar, 'us+ue la carpeta donde +uiera crear el nue&o
pro"ecto, " a continuacin $aa clic en Abrir/ lueo $aa clic en Aceptar.
Crear la interfaz de usuario.
;tilizando el cuadro de $erramientas $aa clic en los controles PictureBox " Timer "
adicinelos al formulario. Tam'i/n seleccione el control Button " adicione cuatro
Button al formulario. !a fiura muestra la interfaz de usuario4
!igura 8.2. 'nterfaz de usuario
$stablecer las propiedades de los
ob%etos de la interfaz de usuario.
)espu/s de colocar los controles u o',etos en el formulario, esta'lezca las siuientes
propiedades a los controles4
B
Tabla 8.-. +ropiedades de los controles de la aplicacin 1o(imiento'magen
Control +ropiedad )alor
PictureBox1
Name imaen
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada
Button1
Name 7'a,o
Text Mo&er a 7'a,o
Button< Name )erec$o
Text Mo&er a la )erec$a
Button= Name 7uto7'a,o
Text Mo&er
7utomticamente a
7'a,o
Button> Name 7utoderec$o
Text Mo&er
7utomticamente a la
)erec$a
5orm1 Name 5ormulario
Text Mo&imiento de una
Imaen
Timer1 Name relo,
Inter&al ?11
$scribir cdigo
(eleccione el o',eto a%a'o, de do'le clic para a'rir el editor del procedimiento
a%a'o_Clicked " escri'a el siuiente cdio4
imagen.top = imagen.top 8 #$
En este cdio se modifica el &alor de la propiedad Top en 11 p-xeles, lo +ue $ace +ue
cuando el usuario de clic so're el 'otn la imaen se desplazara 11 p-xeles $acia a'a,o.
(i se desea +ue el control Imaen se de&uel&a los mismos 11 p-xeles $acia arri'a
modifi+ue la propiedad Top en E11.
(eleccione el o',eto "erecha, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
imagen.left = imagen.left 8 #$
En este cdio se modifica el &alor de la propiedad !eft en 11 p-xeles, lo +ue $ace +ue
cuando el usuario de clic so're el 'otn la imaen se desplazara $acia la derec$a 11
p-xeles. (i se desea +ue el control Imaen se de&uel&a los mismos 11 p-xeles $acia la
iz+uierda modifi+ue la propiedad !eft en E11.
C
(eleccione el o',eto autoa%a'o, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
Relo9.ena:led=tr)e
En este cdio se modifica el &alor de la propiedad Ena'led del control Timer para +ue
se acti&e el relo, en el inter&alo especificado. 7dems de realizar esta operacin tam'i/n
se de'e seleccionar el Timer " escri'ir el siuiente cdio4
imagen.top = imagen.top 8 #$
Esto permitir +ue cuando se $aa clic so're el 'otn FMo&er automticamente a
a'a,oG, la imaen se desplazara 11 p-xeles indefinidamente $acia a'a,o. (i lo +ue se
desea es $acer clic so're el 'otn FMo&er automticamente a la derec$aG, en el
procedimiento del o',eto 7utoderec$o escri'a el siuiente cdio4
Relo9.ena:led=tr)e
D en el procedimiento del Timer escri'a el cdio4
imagen.!eft = imagen.!eft 8 #$
7$ora si se +uiere +ue la imaen se desplace diaonalmente $acia la derec$a, escri'a el
siuiente cdio en el Timer4
imagen.top = imagen.top 8 #$
imagen.!eft= imagen.!eft 8 #$
(i lo +ue se desea es un desplazamiento diaonalmente $acia la iz+uierda, a las
propiedades Top " !eft r/stele 11 p-xeles. tam'i/n se podr-a arear otro 'otn +ue le
permitiera parar el relo,, escri'i/ndole el siuiente cdio4
Relo9.ena:led=false
$%ecutar el proyecto
Para e,ecutar el pro"ecto en el entorno de desarrollo de &isual Basic.NET, se de'e
realizar lo siuiente4
#aa clic en el 'otn Iniciar de la 'arra de $erramientas estndar. Tam'i/n
puede presionar 5? para e,ecutar el pro"ecto. (i la aplicacin se e,ecuta sin
errores, aparecer una &ersin e,ecuta'le del formulario, &isualizndose la
siuiente fiura4
!igura 8.3. $%ecucin aplicacin 1o(imiento'magen
11
7$ora $aa clic so're el 'otn deseado " &isualice el mo&imiento de la imaen.
$.pandir y contraer un control
Para +ue un control se pueda expandir o contraer es necesario modificar las propiedades
del control %idt$ " #ei$t. !a propiedad %idt$ permite modificar el anc$o del control
" la propiedad #ei$t permite modificar la altura de un o',eto. Tam'i/n se puede
realizar esta operacin en forma manual " automtica.
$%emplo prctico para e.pandir y contraer un control
En el siuiente e,ercicio se realizara una aplicacin +ue permita a un usuario por medio
de controles expandir " contraer una imaen en forma manual " automtica.
'niciar un nue(o proyecto )isual *asic .#$T
. En el men3 Arc&i(o, seleccione #ue(o ", a continuacin, $aa clic en
+royecto.
,. En el cuadro #ombre, escri'a $.pandirContraer'magen
-. #aa clic en $.aminar, 'us+ue la carpeta donde +uiera crear el nue&o
pro"ecto, " a continuacin $aa clic en Abrir/ lueo $aa clic en Aceptar.
Crear la interfaz de usuario.
;tilizando el cuadro de $erramientas $aa clic en el control PictureBox " adicinelos al
formulario. Tam'i/n seleccione los controles Button " Timer " adicione cuatro Button "
dos Timer al formulario. !a fiura muestra la interfaz de usuario4
11
!igura 8.4. 'nterfaz de usuario
$stablecer las propiedades de los ob%etos de la interfaz de usuario.
)espu/s de colocar los controles u o',etos en el formulario, esta'lezca las siuientes
propiedades a los controles4
Tabla 8.0. +ropiedades de los controles de la aplicacin 1o(imiento'magen
Control +ropiedad )alor
PictureBox1
Name imaen
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada
Button1
Name expandir
Text Expandir Imaen
Manualmente
Button< Name 9ontraer
Text contraer Imaen
Manualmente
Button= Name expandir7uto
Text Expandir Imaen
1<
7utomticamente
Button> Name 9ontraer7uto
Text contraer Imaen
7utomticamente
5orm1 Name 5ormulario
Text Expandir " contraer
una imaen
Timer1 Name 6elo,1
Inter&al ?11
Timer< Name 6elo,<
Inter&al ?11
$scribir cdigo
(eleccione el o',eto expan"ir, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
;magen.<eight = ;magen.<eight 8 #$
;magen.6idth = ;magen.6idth 8 #$
En este cdio se modifica el &alor de las propiedades %idt$ " #ei$t en 11 p-xeles, lo
+ue $ace +ue cuando el usuario de clic so're el 'otn la imaen se &uel&a 11 p-xeles
mas anc$a " alta.
(eleccione el o',eto contraer, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
;magen.<eight = ;magen.<eight 3 #$
;magen.6idth = ;magen.6idth 3 #$
En este cdio se modifica el &alor de las propiedades %idt$ " #ei$t en E11 p-xeles, lo
+ue $ace +ue cuando el usuario de clic so're el 'otn la imaen se &uel&a menos 11
p-xeles menos anc$a " alta.
(eleccione el o',eto expan"iruto, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
relo9#.4na:led = =r)e
relo9%.4na:led = 5alse
En este cdio se modifica el &alor de la propiedad Ena'led de los controles Timer, lo
+ue permite +ue el usuario cuando $aa clic so're el 'otn se acti&e el control relo,1 "
se desacti&e el control rerlo,<.
(eleccione el o',eto relo'(, de do'le clic para a'rir el editor del procedimiento " escri'a
el siuiente cdio4
;magen.<eight = ;magen.<eight 3 #$
;magen.6idth = ;magen.6idth 3 #$
En este cdio se modifica el &alor de las propiedades %idt$ " #ei$t en E11 p-xeles, lo
+ue $ace +ue cuando el usuario de clic so're el 'otn la imaen se &uel&a menos 11
1=
p-xeles menos anc$a " alta en forma automtica.
(eleccione el o',eto relo'), de do'le clic para a'rir el editor del procedimiento " escri'a
el siuiente cdio4
;magen.<eight = ;magen.<eight 8 #$
;magen.6idth = ;magen.6idth 8 #$
En este cdio se modifica el &alor de las propiedades %idt$ " #ei$t en 11 p-xeles, lo
+ue $ace +ue cuando el usuario de clic so're el 'otn la imaen se &uel&a 11 p-xeles
mas anc$a " alta en forma automtica.
(eleccione el o',eto contraeruto, de do'le clic para a'rir el editor del procedimiento "
escri'a el siuiente cdio4
relo9#.4na:led = 5alse
relo9%.4na:led = =r)e
En este cdio se modifica el &alor de la propiedad Ena'led de los controles Timer, lo
+ue permite +ue el usuario cuando $aa clic so're el 'otn se acti&e el control relo,< "
se desacti&e el control rerlo,1.
$%ecutar el proyecto
Para e,ecutar el pro"ecto en el entorno de desarrollo de &isual Basic.NET, se de'e
realizar lo siuiente4
#aa clic en el 'otn Iniciar de la 'arra de $erramientas estndar. Tam'i/n
puede presionar 5? para e,ecutar el pro"ecto. (i la aplicacin se e,ecuta sin
errores, aparecer una &ersin e,ecuta'le del formulario, &isualizndose la
siuiente fiura4
!igura 8.8. $%ecucin aplicacin 1o(imiento'magen
7$ora $aa clic so're el 'otn deseado " &isualice la expansin o contraccin de la
1>
imaen.
$%emplo prctico de animacin 5caritas6
En el siuiente e,ercicio se realizara una aplicacin +ue permita a un usuario realizar
efectos de animacin de di&ersas caras.
'niciar un nue(o proyecto )isual *asic .#$T
. En el men3 Arc&i(o, seleccione #ue(o ", a continuacin, $aa clic en
+royecto.
,. En el cuadro #ombre, escri'a Caritas
-. #aa clic en $.aminar, 'us+ue la carpeta donde +uiera crear el nue&o
pro"ecto, " a continuacin $aa clic en Abrir/ lueo $aa clic en Aceptar.
Crear la interfaz de usuario.
;tilizando el cuadro de $erramientas $aa clic en el control PictureBox " adicione seis
controles " tam'i/n un control Timer al formulario. adems seleccione el control Button
" adicione dos Button al formulario. !a fiura muestra la interfaz de usuario4
!igura 8.7. 'nterfaz de usuario
$stablecer las propiedades de los ob%etos de la interfaz de usuario.
1?
)espu/s de colocar los controles u o',etos en el formulario, esta'lezca las siuientes
propiedades a los controles4
Tabla 8.2. +ropiedades de los controles de la aplicacin 1o(imiento'magen
Control +ropiedad )alor
PictureBox1
Name carita1
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0face11.ico2
Visi'le 5alse
PictureBox<
Name carita<
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0face1<.ico2
Visi'le 5alse
PictureBox=
Name 9arita=
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0face1=.ico2
Visi'le 5alse
PictureBox>
Name 9arita>
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0face1>.ico2
Visi'le 5alse
PictureBox?
Name 9arita?
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0face1?.ico2
Visi'le 5alse
PictureBox@
Name animacion
(izeMode (tretc$Imae
Visi'le True
Button1
Name inicia
Text Iniciar
Button< Name Para
Text Parar
5orm1 Name 5ormulario
Text Efectos de 7nimacin
Timer1 Name relo,
Inter&al ?11
El formulario se &isualizar-a como lo muestra la siuiente fiura4
1@
!igura 8.8. !ormulario con controles
$scribir cdigo
9ree una &aria'le lo'al llamada mo&er. )ic$a &aria'le se crea pulsando do'le clic
so're el formulario " en el inicio del editor 'uscar la clase 5ormulario4
P):lic Class 5orm)lario
;nherits System.6indows.5orms.5orm
Dim mo.er As ;nteger
(eleccione el o',eto formulario, de do'le clic para a'rir el editor del procedimiento
5orm)lario>!oad " escri'a el siuiente cdio4
mo&erH1
(eleccione el o',eto inicia, de do'le clic para a'rir el editor del procedimiento
inicia_Clicked " escri'a el siuiente cdio4
relo9.4na:led = =r)e
En este cdio se modifica el &alor lico de la propiedad !na%le" del control relo' para
acti&ar el control *imer.
(eleccione el o',eto para, de do'le clic para a'rir el editor del procedimiento
1A
para_Clicked " escri'a el siuiente cdio4
relo9.4na:led = 5alse
En este cdio se modifica el &alor lico de la propiedad !na%le" del control relo' para
desacti&ar el control *imer.
(eleccione el o',eto relo', de do'le clic para a'rir el editor del procedimiento " escri'a
el siuiente cdio4
;f mo.er ? - =hen
mo.er = $
4nd ;f
Select Case mo.er
Case $
animacion.;mage = carita#.;mage
Case #
animacion.;mage = carita%.;mage
Case %
animacion.;mage = carita*.;mage
Case *
animacion.;mage = carita+.;mage
Case +
animacion.;mage = carita-.;mage
4nd Select
mo.er = mo.er 8 #
En este cdio se e&al3a el &alor de la &aria'le mover. (i el &alor es ma"or de cinco, la
&aria'le se inicializa en cero. Tam'i/n se e&al3a dic$o &alor para asinarle al control
animaci+n la imaen correspondiente " por ultimo se &a incrementando el &alor de la
&aria'le.
$%ecutar el proyecto
Para e,ecutar el pro"ecto en el entorno de desarrollo de &isual Basic.NET, se de'e
realizar lo siuiente4
#aa clic en el 'otn Iniciar de la 'arra de $erramientas estndar. Tam'i/n
puede presionar 5? para e,ecutar el pro"ecto. (i la aplicacin se e,ecuta sin
errores, aparecer una &ersin e,ecuta'le del formulario, &isualizndose la
siuiente fiura4
1B
!igura 8.. $%ecucin aplicacin caritas
7l $acer clic so're el 'otn FIniciarG se inicia el efecto de animacin. (i se desea
detener el efecto de animacin se de'e pulsar el 'otn FPararG.
$%emplo prctico de animacin 5semforo6
En el siuiente e,ercicio se realizara una aplicacin +ue permita la simulaci1on de un
semforo.
'niciar un nue(o proyecto )isual *asic .#$T
. En el men3 Arc&i(o, seleccione #ue(o ", a continuacin, $aa clic en
+royecto.
,. En el cuadro #ombre, escri'a semforo
-. #aa clic en $.aminar, 'us+ue la carpeta donde +uiera crear el nue&o
pro"ecto, " a continuacin $aa clic en Abrir/ lueo $aa clic en Aceptar.
Crear la interfaz de usuario.
;tilizando el cuadro de $erramientas $aa clic en el control PictureBox " adicione seis
controles " tam'i/n dos controles Timer al formulario. 7dems seleccione un control
Button " adicinelo al formulario. !a fiura muestra la interfaz de usuario4
1C
!igura 8.,. 'nterfaz de usuario
$stablecer las propiedades de los ob%etos de la interfaz de usuario.
)espu/s de colocar los controles u o',etos en el formulario, esta'lezca las siuientes
propiedades a los controles4
Tabla 8.3. +ropiedades de los controles de la aplicacin 1o(imiento'magen
Control +ropiedad )alor
PictureBox1
Name (emaforo1
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0trffc117.ico2
Visi'le 5alse
PictureBox<
Name semaforo<
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0trffc11B.ico2
Visi'le 5alse
PictureBox=
Name (emaforo=
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0trffc119.ico2
<1
Visi'le 5alse
PictureBox>
Name (emafor>
(izeMode (tretc$Imae
Imae (eleccione la imaen
deseada 0trffc11B.ico2
Visi'le 5alse
PictureBox?
Name 7nimacin
(izeMode (tretc$Imae
Visi'le True
PictureBox@
Name 9arro
(izeMode (tretc$Imae
Visi'le True
Button1
Name 'otn
Text Iniciar
5orm1 Name 5ormulario
Text (imulacin (emforo
Timer1 Name 6elo,1
Inter&al ?11
Timer< Name 6elo,<
Inter&al ?11
El formulario se &isualizar-a como lo muestra la siuiente fiura4
!igura 8.-. !ormulario con controles
<1
$scribir cdigo
9ree una &aria'le lo'al llamada mo&er. )ic$a &aria'le se crea pulsando do'le clic
so're el formulario " en el inicio del editor 'uscar la clase 5ormulario4
P):lic Class 5orm)lario
;nherits System.6indows.5orms.5orm
Dim mo.er As ;nteger
(eleccione el o',eto formulario, de do'le clic para a'rir el editor del procedimiento
5orm)lario>!oad " escri'a el siuiente cdio4
o.er=$
(eleccione el o',eto %ot+n, de do'le clic para a'rir el editor del procedimiento
inicia_Clicked " escri'a el siuiente cdio4
Relo9#.4na:led = =r)e
En este cdio se modifica el &alor lico de la propiedad !na%le" del control relo' para
acti&ar el control *imer.

(eleccione el o',eto relo', de do'le clic para a'rir el editor del procedimiento " escri'a
el siuiente cdio4
;f mo.er = + =hen
mo.er = #
4lse
mo.er = mo.er 8 #
4nd ;f
Select Case mo.er
Case #
relo9#.;nter.al = '$$
relo9%.4na:led = =r)e
animacion.;mage = semaforo#.;mage
Case %
relo9#.;nter.al = '$$
relo9%.4na:led = 5alse
animacion.;mage = semaforo%.;mage
Case *
relo9#.;nter.al = %$$$
relo9%.4na:led = 5alse
animacion.;mage = semaforo*.;mage
Case +
relo9#.;nter.al = '$$
relo9%.4na:led = 5alse
animacion.;mage = semaforo+.;mage
4nd Select
En este cdio se e&al3a el &alor de la &aria'le mover. (i el &alor es iual a cuatro, la
&aria'le se inicializa en uno. Tam'i/n se e&al3a dic$o &alor para asinarle al control
animaci+n la imaen correspondiente " modificar las propiedades ,nterval " !na%le" de
los controles relo') " relo'( respecti&amente.
<<
$%ecutar el proyecto
Para e,ecutar el pro"ecto en el entorno de desarrollo de &isual Basic.NET, se de'e
realizar lo siuiente4
#aa clic en el 'otn Iniciar de la 'arra de $erramientas estndar. Tam'i/n
puede presionar 5? para e,ecutar el pro"ecto. (i la aplicacin se e,ecuta sin
errores, aparecer una &ersin e,ecuta'le del formulario, &isualizndose la
siuiente fiura4
!igura 8.0. $%ecucin aplicacin semforo
7l $acer clic so're el 'otn FIniciarG se inicia el efecto de animacin.
<=
<>