Tema 1
ACTIVIDAD 4 (GUIADA) - APP PARA DIBUJAR
Vamos a diseñar una app con APP INVENTOR que permita dibujar sobre la pantalla con el dedo.
En esta actividad vamos a crear un programa con una pantalla donde podemos dibujar libremente, eligiendo el color y el grosor de la línea. También pondremos un botón para borrar toda la pantalla.
Para ello, tienes que conocer estos elementos que vamos a usar:
LIENZO: Es un panel rectangular sensible al tacto donde se puede dibujar y también mover Sprites (imágenes, como los personajes en Scratch). En los bloques hay eventos que permiten saber cuándo y dónde se ha tocado un Lienzo, o hacia dónde se ha arrastrado un Sprite (Imagen o Pelota). Existen métodos para dibujar puntos, líneas y círculos. Lo encontramos en la columna Paleta - Dibujo y animación.
DESLIZADOR: Es una barra con un marcador que puede desplazarse. Al arrastrar el marcador a la izquierda o a la derecha, cambia de posición y activará el evento PosiciónCambiada (en bloques) indicando cuál es la nueva posición. Se puede utilizar para cambiar variables o características de algún componente. En esta actividad utilizaremos el componente Deslizador para seleccionar el grosor de la línea para dibujar. Lo encontramos en la columna Paleta - Interfaz de usuario.
Parte de Diseño:
PASO 1:
Entra en App Inventor y lógate con tu cuenta del Instituto.
Crea un nuevo proyecto y llámalo “Dibujar_tu_nombre_y_apellido", sin tildes (debes poner tu nombre para identificar el archivo)
Descarga en tu carpeta del ordenador las imágenes que usaremos para el botón "limpiar" y para el icono de la App, los puedes encontrar pinchando aquí:
PASO 2: Modifica las siguientes propiedades para Screen1:
DispHorizontal: Centro
Orientación de la Pantalla: Vertical
Color de Fondo: Negro
Título: Dibujando
Icono: “paletapintura.png”
PASO 3: Añade los componentes que aparecen en la tabla de la derecha, con las propiedades que se indican.
Los componentes te deben quedar como en la imagen de abajo:
Parte de Bloques:
PASO 4: Para dibujar líneas arrastrando el dedo y dibujar puntos tocando la pantalla ponemos estos bloques:
Clicamos Lienzo1 para ver sus bloques. El bloque “cuando Lienzo1.Arrastrado” nos permitirá dibujar libremente en el lienzo. Dentro de él ponemos el procedimiento “llamar Lienzo1.DibujarLínea”, que traza una línea que une los puntos de coordenadas (x1,y1) y (x2,y2). Ponemos XPrevio en x1 e YPrevio en y1. Igualmente, fijamos XActual e YActual para x2 e y2. Estos valores se cogen poniendo el puntero del ratón sobre ellos en el bloque marrón y arrastrándolos a donde queremos cuando se despliegan.
Con el bloque "cuando Lienzo1.Tocar" y el procedimiento "llamar Lienzo1.DibujarPunto", dibujaremos puntos al tocar la pantalla. Cogemos los valores x e y del bloque marrón y los arrastramos a x e y del bloque morado.
PASO 5: Bloques para programar los botones de colores y de limpiar.
Cuando toquemos un botón de un color, se deberá cambiar el color para dibujar. Haciendo clic en un botón vemos los bloques que podemos usar. Escogeremos el bloque "cuando boton.clic" (poniendo cada botón, el rojo, el verde o el azul), y cogeremos el bloque para cambiar el color de la pintura en Lienzo1: "poner Lienzo1.ColorDePintura como". Las etiquetas de colores se cogen en el apartado Integrados - Colores.
Cuando toquemos el botón de limpiar, todo lo que haya dibujado se deberá borrar, el lienzo se tiene que limpiar entero. Esto lo hacemos con el bloque "cuando boton_limpiar.clic", y el procedimiento "llamar.Lienzo1 limpiar". Están en los bloques de ese botón y del lienzo.
PASO 6: Bloques para programar el deslizador
Con el deslizador en la app cambiaremos el grosor de la línea que dibujemos, y se usa cambiando la posición de su marcador (Pulgar) arrastrándolo con el dedo a lo largo de la barra. Entonces para programarlo escogemos el bloque
"cuando Deslizador1.PosicionCambiada", dentro de Deslizador1.
Dentro pondremos el bloque "poner Lienzo1.AnchoDeLinea", y arrastramos "tomar posición del pulgar" para engancharlo a este.
Probar el funcionamiento y entregar la tarea:
PASO 7:
Prueba en tu móvil que funciona antes de entregarlo con AI Companion.
Genera el archivo .apk y súbelo a la tarea de classroom "Actividad 4: App para dibujar".
Exporta a tu ordenador el proyecto (.aia) y súbelo a Classroom. Para exportar el archivo .aia debes buscar en el menú Proyectos - Exportar a mi ordenador el proyecto (.aia) seleccionado
Descarga el fichero .apk en tu móvil e instálalo.
Pregunta sobre el programa realizado:
Esta pregunta debes contestarla en los comentarios privados de la tarea donde has entregado el proyecto. Cambia tu programa para ver el efecto.
¿Qué ocurre en la App si en el paso 4 cambiamos los valores de x1 e y1 por XInicial e YInicial?