Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Da 2
Introducci
on
Hola! Bienvenido al segundo da del taller Programa Tus Ideas :)
El da de hoy comenzaremos a trabajar con el componente Lienzo, que te permite dibujar
lneas y crculos, y mostrar imagenes y animaciones. En el primer tutorial desarrollaras una
aplicacion estilo paint, donde puedes tomar una foto con la camara y luego editarla usando lneas, crculos y distintos colores. Luego, aprenderas a programar animaciones basicas
implementado el juego Atrapa el Topo, inspirado por el juego mecanico donde tienes que
darle martillazos a esos pobres animalitos.
Luego de una breve discusion, el resto de este documento consiste en material de apoyo
sobre los siguientes conceptos fundamentales: el componente Lienzo, como programar usando variables, y el uso de temporizadores. En conjunto, estos componentes de AppInventor te
permitiran programar juegos bastante sofisticados. Las actividades relacionadas con juegos
y animaciones las continuaremos ma
nana, en el Da 3, por lo que es importante que las
domines!
1. tutorial: pintafotos
1.
Tutorial: PintaFotos
En este tutorial presentaremos el componente Lienzo para crear aplicaciones con graficos
1. tutorial: pintafotos
Tocar la pantalla para hacer puntos.
Usar el boton de abajo para limpiar la pantalla.
Agrandar o achicar el tama
no de los puntos con los botones abajo.
Sacar una foto con la camara y luego dibujar encima de esta foto.
Qu
e Aprender
as
Siguiendo este tutorial aprenderas a:
Usar el componente Lienzo para dibujar.
Manejar las funcionalidades touch y arrastrar en la pantalla del equipo.
Configurar la disposicion de los componentes en la pantalla.
Usar los controladores de eventos que reciben argumentos o parametros.
Definir variables para recordar cosas como el tama
no de un punto elegido por el usuario
para dibujar.
Para Empezar
Asegurate que tu computador y telefono estan configurados para usar AppInventor. Crea
un nuevo proyecto y nombralo PintaFotos. Abre el Editor de Bloques y comprueba que
puedes probar tu aplicacion en tu dispositivo mediante la conexion USB. Consulta con tu
tutor ante cualquier problema!
Para empezar, ve al panel de propiedades a la derecha del Dise
nador y cambia el titulo
de la pantalla a PintaFotos. Deberas ver este cambio reflejado en el telefono, con el nuevo
ttulo apareciendo en la barra de ttulos de tu app.
Si estas preocupado por confundir el nombre de tu proyecto con el nombre de la pantalla,
no te preocupes! Hay tres nombres claves en AppInventor:
El nombre que eliges para tu proyecto mientras trabajes en el. Tambien sera el nombre
de la aplicacion cuando la quieras publicar. Nota que puedes hacer click en Archivo
y seleccionar Guardar Como en el Dise
nador para crear una nueva version o cambiar
el nombre de un proyecto.
3
1. tutorial: pintafotos
El nombre de la componente, Screen1, que veras en el panel que contiene el listado
de los componentes de la app. No puedes cambiar este nombre en esta version de
AppInventor.
El ttulo de la pantalla, el que ves en la barra de ttulo del telefono. Empieza siendo
Screen1, que es el ttulo que usaste en HolaGatito. Pero lo puedes cambiar, como
lo hicimos en PintaFotos.
Dise
nando los Componentes
Para crear la app usaras los siguientes componentes:
Tres componentes Bot
on para seleccionar pintura roja, azul o verde y un componente
Disposici
onHorizontal para organizarlos.
Un componente Bot
on para limpiar el dibujo, y otros dos para cambiar el tama
no de
los puntos.
Un componente Lienzo, que es la superficie para dibujar. El Lienzo tiene una propiedad ImagenDeFondo, que configuraremos como gatito.png desde el tutorial Hola
Gatito. Mas adelante, modificaras la app para que la imagen de fondo pueda ser una
foto sacada por el usuario.
Crea los Botones de Colores
Primero, crea los 3 botones de color usando las siguientes instrucciones:
Arrastra un Bot
on al Visor y cambia su Texto a Rojo, y su ColorDeFondo tambien a rojo.
En la lista de Componentes, selecciona el Bot
on1 y presiona Cambiar Nombre para
cambiar su nombre por Bot
onRojo. Observa que no se puede poner espacios en los
nombres de los componentes, entonces es com
un poner en may
uscula la primera letra
de cada palabra en el nombre.
De la misma manera, crea dos botones adicionales para azul y verde, nombrados
Bot
onAzul y Bot
onVerde respectivamente. Ponlos debajo del boton rojo. Chequea
tu trabajo comparandolo con la Figura 1.2.
4
1. tutorial: pintafotos
1. tutorial: pintafotos
1. Desde la categora Disposicion en la Paleta, arrastra un componente Disposici
onHorizontal y ponlo debajo de los botones.
2. En el panel de Propiedades, cambia el Ancho de Disposici
onHorizontal a la opcion
Ajustar al contenedor para llenar todo lo ancho de la pantalla.
3. Mueve los tres botones uno despues del otro al interior de la Disposici
onHorizontal. Truco: Veras una lnea vertical azul que indica donde ira el elemento que estas
arrastrando.
Si miras en la lista de componentes del proyecto, veras tres botones listados bajo el
componente Disposici
onHorizontal, lo que muestra que se trata de sus subcomponentes.
Asmismo, observa que todos los componentes estan listados bajo el componente Screen1.
Prueba tu Aplicaci
on! Deberas ver tus tres botones en una fila horizonal en la pantalla,
a pesar de que puedan verse un poco diferente a como se ven en el Dise
nador. Por ejemplo,
el borde de Disposici
onHorizontal no aparece en el dispositivo.
En general, se usan los componentes de Disposicion como opciones de dise
no para crear
disposiciones simples, verticales, horizontales o en tablas. Tambien puedes crear disposiciones
mas complejas insertando componentes de disposicion unos dentro de otros.
Agregar el Lienzo
El lienzo es el lugar donde el usuario dibuja crculos y lneas. Agregalo, y configura el
archivo gatito.png, usado en Hola Gatito, como su ImagenDeFondo.
Desde la categora Dibujo y Animacion de la Paleta, arrastra un Lienzo hacia el
Visor. Cambia su nombre a LienzoDeDibujo. Configura su Ancho como Ajustar al
Contenedor y su Alto a 300 pixeles.
Recuerda que puedes descargar el archivo gatito.png desde ProgramaTusIdeas/Dia1/
HolaGatito.
Configura la ImagenDeFondo del LienzoDeDibujo con el archivo gatito.png. Si es
necesario, debes subir el archivo.
1. tutorial: pintafotos
Cambia el ColorDePintura en el LienzoDeDibujo al color rojo para que cuando
el usuario inicie la app pero todava no ha presionado ningun boton, sus dibujos sean
rojos. Comprueba si lo que has hecho es parecido a la Figura 1.4.
1. tutorial: pintafotos
5. Desde la seccion Medios de la Paleta, arrastra un componente C
amara hacia el Visor.
Aparecera en la seccion de los componentes no-visibles.
Una vez completados estos pasos, tu aplicacion debera verse como en la Figura 1.5.
1. tutorial: pintafotos
En el Dise
nador, agregaste un componente Lienzo llamado LienzoDeDibujo. Como
todos los componentes de ese tipo, LienzoDeDibujo tiene un evento Tocar y un evento
Arrastrado. Programaras el evento LienzoDibujo.Tocar de tal manera que llame a la funcion LienzoDibujo.DibujarCrculo. Programaras el evento LienzoDibujo.Arrastrado
de tal manera que llame a la funcion LienzoDibujo.DibujarLnea. Programaras luego los
botones para configurar la propiedad ColorDePintura usando el bloque poner LienzoDibujo.ColorPintura, y para limpiar el LienzoDeDibujo; y finalmente, programaras como
cambiar la ImagenDeFondo del lienzo por una foto sacada con la camara del dispositivo.
Agregar el Evento Tocar para Dibujar un Punto
Primero, dispondras los objetos de manera que cuando tocas el LienzoDeDibujo, se
dibujara un punto en el lugar del lienzo que toques:
1. En el Editor de Bloques, selecciona el LienzoDeDibujo, y arrastra el bloque LienzoDeDibujo.Tocado al Visor. El bloque tiene parametros para x e y, y SpriteTocado,
como ilustrado en la Figura 1.6. Estos parametros entregan informacion sobre la ubicacion del evento tocar la pantalla hecho por el usuario.
Figura 1.6: El evento viene con informacion sobre la ubicacion del toque en la pantalla
Nota. Si completaste la aplicacion Hola Gatito, ya estas familiarizado con los eventos
de Bot
on.Click, pero no con los eventos del lienzo. Los eventos Bot
on.Click son
bastante sencillos porque no hay nada mas que saber del evento aparte del hecho que
ocurrio. Algunos controladores de eventos, sin embargo, vienen con informacion sobre
los argumentos para llamar al evento. El evento LienzoDibujo.Tocar te entrega las
coordenadas x e y del toque dentro del LienzoDeDibujo. Tambien te dice si un
objeto dentro del LienzoDeDibujo (lo que se conoce como Sprite) fue tocado, pero
este punto se abordara mas adelante. Las coordenadas x e y son los argumentos que
usaremos para grabar donde el usuario toco la pantalla, de manera de poder dibujar
el punto en este lugar.
9
1. tutorial: pintafotos
2. Arrastra un bloque LienzoDeDibujo.DibujarCrculo desde el bloque y ponlo dentro
del controlador de eventos LienzoDeDibujo.Tocar, como se ilustra en la Figura 1.7.
10
1. tutorial: pintafotos
Figura 1.8: Para acceder al parametro de un evento, arrastra un bloque tomar desde el
bloque LienzoDeDibujo.Tocar
Figura 1.9: La aplicacion sabe donde dibujar (x,y), pero todava necesitamos especificar cuan
grande debera ser el crculo.
4. Ahora necesitas especificar el radio del crculo a dibujar. El radio se mide en pixeles,
que es el punto mas peque
no que puede ser dibujado en la pantalla. Por ahora, ponle
como valor el n
umero 5: haz click en una zona blanca de la pantalla y tipea 5, luego
presiona Enter para crear automaticamente un bloque numerico, y conecta este bloque
en el espacio para el parametro r. Cuando hagas esto, el signo amarillo en la esquina
inferior se pondra en 0 nuevamente, dado que todos los espacios abiertos habran sido
completados. La Figura 1.10 muestra como debiera verse el controlador de eventos
LienzoDeDibujo.Tocar.
11
1. tutorial: pintafotos
Figura 1.10: Cuando el usuario toca el LienzoDeDibujo, un crculo de radio 5 sera dibujado
en las coordenadas (x, y) correspondientes.
12
1. tutorial: pintafotos
peque
nas lneas rectas; cada vez que mueves tu dedo, incluso un poco, extiendes la lnea
desde la u
ltima posicion de tu dedo hacia su nueva posicion.
1. En el Editor de Bloques, desde la seccion del LienzoDeDibujo, arrastra el bloque
LienzoDeDibujo.Arrastrado al espacio de trabajo. Deberas ver el gestionador de
eventos tal como en la Figura 1.11.
Figura 1.11: Un evento de arrastre tiene mas argumentos que un evento de touch.
1. tutorial: pintafotos
LienzoDeDibujo.Arrastrado se activara cada vez que arrastres tu dedo en el Visor,
por lo tanto la aplicacion dibuja una peque
na lnea cada vez que mueves tu dedo, desde
(XPrevio, YPrevio) hacia (XActual, YActual). Agreguemos esto a nuestro bloque
LienzoDeDibujo.DibujarLnea:
3. Arrastra los bloques tomar para los argumentos que vas a necesitar. Los valores
XPrevio e YPrevio deberan ir conectados en los espacios para los argumentos x1
e y1, respectivamente, como se ilustra en la Figura 1.13.
Figura 1.13: Cuando el usuario arrastre el dedo, la aplicacion dibujara una lnea desde el
punto anterior hacia el actual.
Prueba tu Aplicaci
on! Arrastra tu dedo en la pantalla para dibujar lneas y curvas.
Toca la pantalla para dibujar puntos.
Agregar Controladores de Eventos para Botones
La aplicacion que has construido hasta ahora permite al usuario dibujar, pero siempre
estos dibujos usan el color rojo. El proximo paso consiste en agregar controladores de eventos
para los botones de colores, para que el usuario pueda cambiar el color de la pintura, y otro
para el Bot
onLimpiar para que pueda limpiar la pantalla y as volver a empezar a dibujar.
En el Editor de Bloques:
1. Arrastra el bloque Bot
onRojo.Click al espacio de trabajo.
2. Arrastra el bloque poner LienzoDeDibujo.ColorDePintura y conectalo en las acciones del bloque Bot
onRojo.Click.
3. Abre la seccion Colores y arrastra el bloque de color rojo para conectarlo con el
bloque poner LienzoDeDibujo.ColorDePintura.
14
1. tutorial: pintafotos
4. Repite los pasos anteriores para los botones azul y verde.
5. El u
ltimo boton por configurar es el Bot
onLimpiar. Para limpiar el lienzo de dibujo
debes utilizar el bloque LienzoDeDibujo.Limpiar. Confirma que tus bloques se ven
como en la Figura 1.14.
Figura 1.14: Cuando el usuario hace click en los botones de colores cambia el color para
dibujar en el lienzo. Hacer click en Limpiar, borra el contenido del lienzo.
1. tutorial: pintafotos
4. Arrastra el bloque poner LienzoDeDibujo.ImagenDeFondo y ponlo en las acciones
de C
amara1.Despu
esDeTomarFoto.
5. C
amara1.Despu
esDeTomarFoto tiene un argumento llamado imagen, que es la
foto recien sacada. Puedes referirte a ella, con un bloque tomar desde el bloque
C
amara1.Despu
esDeTomarFoto. Conecta la imagen como el argumento para el
bloque poner LienzoDeDibujo.ImagenDeFondo.
Los bloques deberan ser parecidos a la Figura 1.15.
Figura 1.15: CUando se saca la foto, se configura como la imagen de fondo del lienzo.
Prueba tu Aplicaci
on! Haz una prueba al hacer click en Tomar Foto y saca una
foto. El gatito debera cambiar por la foto que acabas de sacar, y luego podras dibujar
encima de la foto que sacaste.
Cambiar el Tama
no del Punto
El tama
no de los puntos dibujados en el LienzoDeDibujo se determina al llamar a
LienzoDeDibujo.DibujarCrculo, donde el argumento de radio esta configurado en 5.
Para cambiar el grueso de la lnea, puedes cambiar el valor de r. Para probar esto, intenta
cambiar el 5 por un 10 y pruebalo en el telefono para ver como aparece.
El u
nico tama
no que el usuario podra usar es el que tu indicas como argumento para
el radio del crculo. Pero que pasa si el usuario quiere cambiar el tama
no de los puntos?
Vamos a modificar el programa de manera que el usuariono solo el programadorpueda
cambiar el tama
no de los puntos. Lo haremos de tal manera que cuando el usuario haga click
en un boton llamado Grandes, el tama
no sera 8, y cuando hara click en un boton llamado
Peque
nos, sera 2.
16
1. tutorial: pintafotos
Para usar distintos valores en el argumento radio, la aplicacion necesita saber cual queremos aplicar. Necesitamos pedirle usar un valor especfico, y tiene que memorizar este valor
de manera a poder seguir usandolo. Cuando tu aplicacion necesita guardar algo en memoria
que no sea una propiedad, puedes definir una variable. Una variable es una celda de memoria.
Es como un balde donde puedes almacenar datos variables, como el tama
no del punto.
Empezamos por definir una variable Tama~
noPunto:
1. En el Editor de Bloques, desde la seccion Variables, arrastra un bloque Inicializar
global nombre. Cambia el texto nombre por Tama
noPunto.
2. Fjate que el bloque Inicializar global Tama
noPunto tiene un espacio abierto.
Ah es donde puede especificar el valor inicial de la variable, o su valor por defecto al
iniciar la aplicacion. Para esta aplicacion, inicializa el Tama~
noPunto en 2 creando un
bloque con el n
umero 2, y conectandolo en Inicializar global Tama
noPunto como
se ilustra en la Figura 1.16.
1. tutorial: pintafotos
1. tutorial: pintafotos
debera cambiar porque programaste Tama~
noPunto solamente para ser usado en el bloque de
DibujarCrculo. En base a esto, podras ahora cambiar tus bloques para que el usuario
tambien pueda cambiar el tama
no de la lnea? (Nota que el lienzo tiene una propiedad
llamada AnchodeLinea)
La App Completa: PintaFotos
La Figura 1.19 ilustra el codigo completo de la aplicacion PintaFotos:
2.
Discusi
on y Ejercicios de Personalizaci
on
Preguntas/Discusi
on
1. En el Lienzo, los controladores de eventos Tocar y Arrastrado, mostrados abajo en
la Figura 2.1, tienen parametros de evento. Nombra cada parametro e indica lo que
representa.
3.
clasicas, en las que unos topos mecanicos saltan fuera de su hueco, y los jugadores ganan
puntos golpeandolos con un mazo. El juego fue creado por Ellen Spertus, un miembro del
equipo de AppInventor en Google, para implementar la funcionalidad Sprite. El termino
Sprite aparecio en la comunidad de informaticos en los a
nos 70, y se refera a imagenes
capaces de moverse en la pantalla de un computador (para videojuegos).
21
Qu
e Construir
as
Para la aplicacion Atrapa el Topo, ilustrada en la Figura 3.1, implementaras las siguientes funcionalidades:
Un topo que salta en cualquier lugar de la pantalla, moviendose cada segundo.
Tocar el topo hace vibrar el telefono, y aumenta el marcador de puntos (un punto por
topo tocado), y el topo se mueve de inmediato a otro lugar.
Tocar la pantalla sin alcanzar tocar el topo provoca que el marcador de toques perdidos
aumenta.
Al presionar el boton Reiniciar se reinicia el contador de golpes logrados y perdidos.
22
Qu
e Aprender
as
Este tutorial cubre los siguientes componentes y conceptos:
El componente SpriteImagen para imagenes movibles con sensibilidad touch.
El componente Lienzo que funciona como una superficie sobre la cual se pone el
SpriteImagen.
El componente Reloj para mover el sprite.
El componente Sonido para producir una vibracion cuando el topo es tocado.
El componente Bot
on para empezar un nuevo juego.
Procedimientos para implementar comportamientos repetitivos, como desplazar el topo.
Generar n
umeros al azar.
Usar los bloques de sumar (+) y restar (-).
Para empezar
Conectate al sitio de AppInventor y crea un nuevo proyecto. Llamalo AtrapaElTopo y
tambien cambia el ttulo de la pantalla como AtrapaElTopo. Abre el Editor de Bloques y
conectate a tu dispositivo Android.
Descarga la imagen ProgramaTusIdeas/Dia2/topo.png. Luego ve a la seccion de Medios
del Dise
nador de Componentes y s
ubela a AppInventor.
Dise
nando los Componentes
Utilizaras los siguientes componentes para construir Atrapa el Topo:
Un Lienzo que sirve de campo de juego.
Un SpriteImagen que representa la foto del topo y que puede moverse y sentir cuando
el topo fue tocado.
Un Sonido que vibra cuando el topo es tocado.
23
24
Figura 3.4: Posiciones del topo en la pantalla, con informacion de ancho, coordenadas y
altura. La informacion de la coordenada x esta en azul, y la de la coordenada y esta en
naranjo.
Para dar una posicion aleatoria al topo, vamos a seleccionar una coordenada X entre
0 y Lienzo1.Ancho Topo.Ancho. Asmismo, la coordenada Y tiene que estar en un
rango de entre 0 y Lienzo1.Alto Topo.Alto. Podemos generar un n
umero aleatorio
con el procedimiento preexistente entero aleatorio entre, que se encuentra en la seccion
Matematicas. Tendras que cambiar los parametros como se muestra en la Figura 3.5.
La figura muestra ademas comentarios descriptivos que puedes opcionalmente agregar a tu
procedimiento.
28
Figura 3.5: El procedimiento MoverTopo, que pone el Topo en una ubicacion aleatoria.
Para crear el procedimiento MoverTopo:
1. Selecciona la seccion Procedimientos del Editor de Bloques.
2. Arrastrar el bloque como procedimiento (no el como procedimiento resultado)
al espacio de trabajo.
3. Presiona el texto procedimiento en este nuevo bloque y reemplazalo por MoverTopo, para configurar el nombre del nuevo procedimiento.
4. Dado que queremos mover el topo, arrastra dentro del procedimiento el bloque llamar Topo.MoverA, a la derecha de ejecutar. Observa que se requiere indicar las
coordenadas x e y donde se movera el topo.
5. Para especificar que la nueva coordenada x para el topo debera ser entre 0 y Lienzo1.Ancho
Topo.Ancho, debes hacer lo siguiente:
Seleccionar la seccion Matematicas.
Arrastra el bloque entero aleatorio entre, conectandolo con el parametro x en
llamar Topo.MoverA.
Cambia el n
umero 1 en el espacio entre por un 0.
Borra el n
umero 100 en el espacio y.
29
Figura 3.7: Procedimiento para llamar a MoverTopo cada 1 segundo, cada vez que se activa
el temporizador.
33
35
4. material de apoyo
4.
Material de Apoyo
El Componente Lienzo
El componente Lienzo es una subseccion dentro de tu aplicacion. El lienzo se usa para
dibujar y hacer animacionestu app puede dibujar objetos, y puedes dar al usuario la
capacidad de dibujar objetos.
Normalmente vas a necesitar que el lienzo llene por completo el ancho de la pantalla
de la app, entonces tendras que ajustar la propiedad Ancho con la opcion Ajustar al
contenedor. Por lo general vas a necesitar tener otros elementos abajo o arriba, por lo que
configuraras el Alto como un n
umero fijo de pixeles.
La ubicacion de un objeto en el lienzo se define con coordenadas X, Y relativas a la
esquina arriba e izquierda del lienzo. X es la ubicacion horizontal del objeto, siendo 0 el
borde izquierdo y X creciendo cuando el objeto se mueve hacia la derecha. Y es la ubicacion
vertical, con 0 siendo el borde superior e Y creciendo cuando el objeto se mueve hacia abajo.
Conceptualmente el lienzo se comporta como una rejilla, tal como se ilustra en la Figura 4.1.
Figura 4.1: Un lienzo con ancho de 19 pixeles y altura de 12 pixeles. Se muestran los puntos
en coordenadas (0,0), (3,3) y (19, 0).
Ejemplo: C
omo dibujar un crculo en (10,10)? El lienzo tiene bloques funcionales
para dibujar un crculo o una lnea. El crculo tiene tres parametros x, y y un radio r. x es
la ubicacion horizontal, y es la ubicacion vertical, y r es el radio del crculo por dibujar. Si
36
4. material de apoyo
x tiene un valor de 10 significa que el crculo sera ubicado 10 pixeles a la derecha del borde
izquierdo del lienzo. Si y tiene un valor de 10 significa que el crculo sera ubicado 10 pixeles
abajo del borde superior del lienzo. La Figura 4.2 muestra como dibujar un crculo en la
coordenada (10,10) y con radio de 5 pixeles.
Figura 4.2: Dibujando un crculo en el lienzo, en la coordenada (10,10) y con radio 5 pixeles.
Ejemplo: C
omo dibujar un crculo en el lugar donde el usuario toca el lienzo?
La funcionalidad touch (tactil) se activa cuando el usuario toca con el dedo en el lienzo.
Tiene parametros x e y que indican la ubicacion del toque. El parametro SpriteTocado especifica si el toque ocurrio o no en un SpriteImagen (esto no influye en su comportamiento).
Para dibujar el crculo donde el usuario toco el lienzo, debes pasar el mouse sobre los
parametros x e y para arrastrar los bloques tomar para cada uno, y luego conectarlos en
los espacios para x e y del bloque DibujarCrculo. No te confundas con lo siguiente: los
parametros del evento Tocar tienen el mismo nombre que los espacios libres para especificar la ubicacion del crculo en DibujarCrculo, pero son valores independientes y con
conceptualizacion diferente. La Figura 4.3 muestra el codigo descrito anteriormente.
37
4. material de apoyo
Ejemplo: C
omo mover una imagen al centro del lienzo? Los bloques de la Figura 4.4 ubican el SpriteImagen1 en el centro del lienzo usando las propiedades Ancho
y Alto. Dichas referencias abstractas significan que el codigo funcionara aunque el lienzo
cambie de tama
no.
Variables
Cu
ando defines una variable? Una aplicacion memoriza cosas, tiene una memoria
escondida. Puedes imaginartelo como una hoja de calculo (o planilla) dentro del cerebro
privado de la aplicacion. T
u, el programador, controlas su memoria. Cuando arrastras un
componente en tu aplicacion (por ejemplo un boton, un cuadro de texto), cada componente
tiene una serie de propiedades. Estas propiedades son celdas de tu hoja de calculo que puedes
modificar.
Tambien puedes definir nuevas celdas en tu planilla, cuando necesitas recordar algo: se
llaman variables. Defines una variable cuando no existe en el componente una propiedad
para almacenar la informacion que necesitas.
38
4. material de apoyo
Ejemplo: C
omo hacer para que cada vez que el usuario hace click se agranda
el crculo? Como se ilustra en la Figura 4.5, cuando se toca el Lienzo1 se llama a Lienzo1.DibujarCrculo para dibujar un crculo donde se hizo el touch, en las coordenadas (x,
y). El radio r no puede ser un n
umero fijo si queremos un tama
no de crculo distinto cada
vez. La variable Tama~
noC
rculo se usa para seguir y recordar el tama
no de los crculos cada
vez que se dibuja uno. Se inicializa Tama~
noC
rculo en 1 para que el primer crculo que se
dibuje sea solo un peque
no punto. Luego, al final del controlador de eventos Lienzo1.Tocar
el tama
no del crculo se duplica. Entonces la segunda vez el crculo tendra un radio 2, luego
4, luego 8, etc. La variable Tama~
noC
rculo se necesita porque no hay ninguna propiedad
del componente que se pueda usar. Por ejemplo, el componente Lienzo tiene una propiedad
AnchoDeLnea, entonces si estuvieses dibujando lneas no necesitaras definir una variable porque podras usar esta propiedad. Pero el lienzo no tiene una propiedad Tama
no de
Crculo, por lo que debes definirla t
u mismo usando una variable.
Figura 4.5: Usando una variable para controlar el radio de los crculos dibujados.
Temporizadores
Actividades Temporizadas
Como programar el tiempo? Como programar una animacion?. En otros lenguajes de
programacion, los conceptos de animacion se ven mucho mas adelante, pero con la metodologa de AppInventor puedes explorar este concepto desde el inicio. El componente Reloj
sirve de alarma, y puedes usar su funcion de temporizador para iniciar una actividad con
tiempos especficos.
Mira los siguientes ejemplos:
39
4. material de apoyo
Ejemplo: C
omo tocar un sonido cada 1 segundo? Como muestra la Figura 4.6 esto
se puede hacer cuando se activa el evento Reloj.Temporizador de manera repetida. Conviene pensar en el temporizador como una alarma, donde la propiedad Reloj.IntervaloDelTemporizador
determina cada cuanto se toca el sonido (por defecto son 1000 milisegundos, o 1 segundo).
Entonces si no lo cambias el sonido se escuchara cada segundo. Puedes configurar esta propiedad en el Dise
nador o dinamicamente usando bloques.
4. material de apoyo
cada evento del temporizador aumente la coordenada X, para que as la nave aparezca un
poco mas a la derecha, como se muestra en la Figura 4.8. Si el IntervaloDelTemporizador tiene su propiedad por defecto en 1000 milisegundos, entonces la nave se movera cada
segundo. Para este tipo de animacion, configuraras el intervalo en 40 milisegundos.
4. material de apoyo
loj.Temporizador se activa y el sonido se escuchara. Cuando el usuario hace click en el
boton Detener, el timer se desactiva y el sonido se detiene. El codigo correspondiente se
muestra en la Figura 4.9
Figura 4.10: Moviendo la nave cuando el usuario habla, y deteniendola cuando se agita el
dispositivo.
El controlador de evento Pantalla.Inicializar se activa cuando se inicia la aplicacion.
El bloque ReconocimientoDeVoz.ObtenerTexto abre el sensor de voz para que espere que el usuario diga algo. Cuando el usuario habla, se activa el controlador de evento
ReconocimientoDeVoz.SensorVoz.Despu
esDeObtenerTexto. En este controlador de
eventos configuraras la propiedad Reloj.TemporizadorHabilitado como verdadera para
que el temporizador se active y as el sprite se empiece a mover. Cuando el usuario sacude el
telefono, se activa el Aceler
ometro, y se desactiva el temporizador para que pare el sprite se
42
4. material de apoyo
detenga, y se vuelva a invocar a ReconocimientoDeVoz.ObtenerTexto, para que espere
la proxima vez que el usuario hable.
43