Dia2

Tutorial Diario
D´ıa 2

Introducci´
on
Hola! Bienvenido al segundo d´ıa del taller Programa Tus Ideas :)
El d´ıa de hoy comenzaremos a trabajar con el componente Lienzo, que te permite dibujar
l´ıneas y c´ırculos, y mostrar im´agenes y animaciones. En el primer tutorial desarrollar´as una
aplicaci´on estilo “paint”, donde puedes tomar una foto con la c´amara y luego editarla usando l´ıneas,c´ırculos y distintos colores. Luego, aprender´as a programar animaciones b´asicas
implementado el juego Atrapa el Topo, inspirado por el juego mec´anico donde tienes que
darle martillazos a esos pobres animalitos.
Luego de una breve discusi´on, el resto de este documento consiste en material de apoyo
sobre los siguientes conceptos fundamentales: el componente Lienzo, c´omo programar usando variables, yel uso de temporizadores. En conjunto, estos componentes de AppInventor te
permitir´an programar juegos bastante sofisticados. Las actividades relacionadas con juegos
y animaciones las continuaremos ma˜
nana, en el D´ıa 3, por lo que es importante que las
domines!

1

1. tutorial: pintafotos

1.

Tutorial: PintaFotos
En este tutorial presentaremos el componente Lienzo para crear aplicaciones congr´aficos

y animaciones simples en 2 dimensiones (2D). Construir´as la aplicaci´on PintaFotos que
permite al usuario dibujar en la pantalla usando distintos colores, usando una imagen de
fondo y dibujando sobre ella.
Un dato hist´orico: PintaFotos fue uno de los primeros programas desarrollados para
demostrar el potencial de los computadores, en la decada de 1970. En aquel entonces, hacer
algotan simple como esta aplicaci´on de dibujo era algo muy complejo, y los resultados
no eran perfectos. Pero ahora, con AppInventor, cualquiera puede r´apidamente armar una
aplicaci´on de dibujo bastante buena, lo que sirve de excelente punto de partida para luego
hacer juegos 2D.
La interfaz de usuario de PintaFotos se muestra en la Figura 1.1.

Figura 1.1: Interfaz de usuario aplicaci´onPintaFotos
En esta aplicaci´on podr´as:
Ba˜
nar tu dedo en un tarro de pintura virtual para dibujar en este color.
Arrastrar tu dedo en la pantalla para dibujar una l´ınea.

2

1. tutorial: pintafotos
Tocar la pantalla para hacer puntos.
Usar el bot´on de abajo para limpiar la pantalla.
Agrandar o achicar el tama˜
no de los puntos con los botones abajo.
Sacar una foto con la c´amara y luego dibujar encimade esta foto.

Qu´
e Aprender´
as
Siguiendo este tutorial aprender´as a:
Usar el componente Lienzo para dibujar.
Manejar las funcionalidades “touch” y “arrastrar” en la pantalla del equipo.
Configurar la disposici´on de los componentes en la pantalla.
Usar los controladores de eventos que reciben argumentos o par´ametros.
Definir variables para recordar cosas como el tama˜
no de un punto elegidopor el usuario
para dibujar.

Para Empezar
Asegur´ate que tu computador y tel´efono est´an configurados para usar AppInventor. Crea
un nuevo proyecto y nombr´alo PintaFotos. Abre el Editor de Bloques y comprueba que
puedes probar tu aplicaci´on en tu dispositivo mediante la conexi´on 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”. Deber´ıas ver este cambio reflejado en el tel´efono, con el nuevo
t´ıtulo apareciendo en la barra de t´ıtulos de tu app.
Si est´as 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. Tambi´enser´a el nombre
de la aplicaci´on cuando la quieras publicar. Nota que puedes hacer click en “Archivo”
y seleccionar “Guardar Como” en el Dise˜
nador para crear una nueva versi´on o cambiar
el nombre de un proyecto.
3

1. tutorial: pintafotos
El nombre de la componente, Screen1, que ver´as en el panel que contiene el listado
de los componentes de la app. No puedes cambiar este nombre en esta...