Tema 2

I Have a Dream
Introduccin

Esta aplicacin est pensada para introducir al alumno en el manejo de distintos

tipos de archivos multimedia, en concreto usaremos tres imgenes distintas de
Martin Luther King y Malcom X y dos archivos de sonido distintos en formato MP3,
uno de Martin Luther King con el famoso discurso que pronunci ante ms de
250.000 personas a los pies del monumento a Lincoln en 1963 y otro con un discurso
de Malcolm X. La idea fundamental es que al tocar la imagen de cada uno de ellos,
comience la reproduccin de su discurso pero evitando que uno y otro discurso se
solapen en el tiempo.

La app I Have a Dream

Usaremos el componente Player para reproducir sonidos de larga duracin.

Aprenderemos a cambiar el nombre automtico que asigna App Inventor a los

componentes de nuestra app por otros que sean ms significativos.

Ajustaremos la disposicin de los componentes en la pantalla del dispositivo

usando el componente HorizontalArrangement.

Usaremos el componente Label.

Juan Francisco Fuster

I H a v e a D r e a m

Qu vamos a aprender

Usaremos el bloque de control if-then-else para tomar decisiones durante la

ejecucin de la app.

Primeros pasos
Conctate a la web de App Inventor con tu navegador en
http://ai2.appinventor.mit.edu. Abre un proyecto nuevo y asgnale el nombre
IhaveAdream. Haz clic en Connect y configura tu dispositivo (o emulador) para poder
hacer pruebas en vivo (ya hablamos de cmo hacerlo en el tema cero: Requisitos
Previos).
Una vez conectado, desde la ventana de diseo, en el panel de propiedades, cambia
el ttulo de la Screen1 por I Have a Dream. En pocos segundos podrs ver el cambio en
tu dispositivo o emulador.
Antes de continuar, debes descargar a tu ordenador los archivos multimedia que
vamos a usar en esta app. Todos ellos estn disponibles en la carpeta de Recursos del
tema. Recuerda que son un total de 5 archivos: tres imgenes y dos archivos de
sonido en formato MP3.
Ahora, en la web de App Inventor, utiliza el botn Upload File para subir los archivos a
la web. Recuerda que debers subirlos uno a uno y que al finalizar el proceso, podrs
comprobar que todos se encuentran disponibles en la seccin llamada Media.

Ya hemos subido a la web todos los archivos necesarios

Diseo de componentes

La propiedad Text vamos a dejarla en blanco, as que borra el texto que aparece
all de modo automtico para cada botn.

A la propiedad Image le vamos a asignar una de las imgenes que hemos subido,
concretamente la llamada mlk.jpg y que se corresponde con una fotografa de
Martin Luther King.

Juan Francisco Fuster

I H a v e a D r e a m

En primer lugar, selecciona el componente Button desde la categora de User Interface

y arrstralo hasta la pantalla de la app. Necesitamos cambiar un par de propiedades
del Button1:

Antes de continuar, selecciona el componente Screen1 de nuestra app y cambia su

propiedad AlignHorizontal al valor center, de este modo todos los componentes de la
interfaz aparecern centrados horizontalmente.
Observa las propiedades que hemos modificado para el botn en la imagen
siguiente:

Estableceremos las propiedades adecuadas para el botn

I H a v e a D r e a m

Tambin tenemos que aadir un componente para reproducir el discurso de Luther

King, pero en lugar de utilizar el componente Sound como ya hicimos en el tema
anterior, en este caso tendremos que usar el componente Player puesto que permite
reproducir sonidos mucho ms largos que el anterior. As que, en la lista de
categoras, haz clic en Media, ahora haz clic sobre el componente Player y arrstralo
hasta la pantalla. En este caso, tal y como ya suceda con el componente Sound, el
nuevo componente se situar en la parte inferior de la pantalla. Recuerda que este es
el lugar donde aparecern todos los componentes no visibles que usemos en la app.

Juan Francisco Fuster

Creamos un componente Player para reproducir el discurso

Selecciona el componente Player1 y asigna a su propiedad llamada Source el archivo

King.mp3 que es el que contiene el discurso de Luther King.

Prueba tu app
Antes de continuar, recuerda los pasos que debes seguir para poder probar la app en la que
estamos trabajando en tu propio mvil o tableta Android.

1. En tu dispositivo, ejecuta la app MIT Ai2 Companion que ya deberas tener

descargada e instalada. Si an no lo has hecho, revisa nuevamente el tema 0 para
obtener todos los detalles de cmo hacerlo.
2. En la web de App Inventor, haz clic en Connect y despus en AI Companion.
3. Escanea el cdigo que vers en pantalla desde tu dispositivo, o bien, introduce
manualmente el cdigo que vers al lado del cdigo QR bajo el epgrafe Your
code is en la casilla SixDigitCode.
Si todo ha ido como es debido, al cabo de unos segundos podrs ver la app en tu
dispositivo. Sin embargo, ten presente que aunque toques el botn con la imagen de
Luther King todava no escuchars nada An tenemos que definir el cdigo
necesario para que esto suceda.

Como ya explicamos en el tema 0, este procedimiento slo es vlido si tu ordenador y tu

dispositivo Android estn conectados a la misma red Wi-Fi. Si este no es el caso, por favor,
revisa nuevamente el tema 0 para conocer otras formas de poder probar la app en tu
dispositivo.

Juan Francisco Fuster

I H a v e a D r e a m

Nota

Reproducir el discurso de Martin Luther King

Para que el discurso de Luther King comience a reproducirse cuando el usuario toca
la fotografa tendremos que definir algunos bloques:

Creamos el bloque que gestionar lo que debe hacer la app cuando se toca el botn

1. En primer lugar, cambia a la ventana de edicin de bloques haciendo clic sobre el

botn Blocks.
2. Selecciona el Button1 de la lista de bloques del panel izquierdo.
3. Busca ahora el evento when Button1.Click, seleccinalo y arrstralo a un lugar en
blanco del rea de trabajo.

4. Selecciona el bloque Player1, busca el mtodo call Player1.Start en la lista, haz clic
sobre l y arrstralo hasta el rea de trabajo hasta hacerlo encajar dentro del
bloque anterior (when Button1.Click).

Juan Francisco Fuster

I H a v e a D r e a m

El mtodo call Player1.Start hace que comience la reproduccin del discurso

Prueba tu app
Tienes tu dispositivo conectado todava? Ha llegado el momento de comprobar si tu app
reproduce el discurso. Toca sobre la imagen de Luther King y comprubalo.

Aadir la imagen de Malcolm X

Vamos a modificar la app para que tambin pueda reproducir el discurso de Malcom
X y para conseguirlo, tendremos que modificar la interfaz de nuestra app desde la
vista de diseo. Tambin tendremos que introducir nuevos bloques de cdigo desde
la vista de edicin de bloques, pero adems, tendremos que tener mucho cuidado
para que el discurso de uno y otro lder no se solapen en el tiempo.
En primer lugar, para poder colocar el botn nuevo para Malcolm X justo a la derecha
del anterior tendremos que organizar el espacio horizontal usando un componente
especial que se encuentra en la categora Layout:
1. Vuelve a la vista de diseo haciendo clic en el botn Designer.
2. Haz clic sobre la categora Layout.
3. Selecciona el componente HorizontalArrangement y arrstralo hasta la pantalla.
4. Haz clic sobre el Button1 (la imagen de Luther King) y arrstrala hasta dejarla
dentro del HorizontalArrangement.
Ahora ya podemos aadir un botn nuevo. Desde la categora de User Interface haz
clic sobre Button y arrstralo dentro del HorizontalArrangement justo a la derecha del
botn de Luther King.

Despus, siguiendo el mismo mtodo que ya habamos aplicado al primer botn,

selecciona Button2, elimina el texto que aparecer en su propiedad Text y asigna a su
propiedad Image el archivo Malcolm.jpg.

Juan Francisco Fuster

I H a v e a D r e a m

Aadimos un segundo botn para Malcolm X

Para mejorar un poco la interfaz de nuestra app, introduciremos una imagen ms

que en esta ocasin situaremos por encima del HorizontalArrangement y, por tanto,
aparecer por encima de los botones existentes.

Aadimos una imagen a la app

I H a v e a D r e a m

Esta nueva imagen no se corresponder con ningn botn, as pues, en la categora

User Interface haremos clic sobre el componente Image y lo arrastraremos hasta la
pantalla. Adems, tendremos que cambiar su propiedad Picture y asignarle el archivo
llamado MLK_malcolmX.jpg.

Juan Francisco Fuster

Aadir el discurso de Malcolm X

Siguiendo en la vista de diseo:

Aadimos un segundo Player para el discurso de Malcolm X

1. Abre la categora Media de la Paleta. Haz clic sobre un nuevo componente de tipo
Player y arrstralo hasta la pantalla. Igual que sucedi antes, tendremos un nuevo
componente llamado Player2 en el rea reservada a los componentes no visibles.
2. Cambia la propiedad Source del Player 2 al archivo malcolmx.mp3.
3. Para terminar, usando el botn Rename cambia el nombre de los componentes
para que tengan nombres ms apropiados:
a. Selecciona el componente Player1 y renmbralo a MLKPlayer.
b. Selecciona el componente Button1 y renmbralo a MLKButton.
c. Selecciona el componente Player2 y renmbralo a MalcolmPlayer.
d. Selecciona el componente Button2 y renmbralo a MalcolmButton.

Aade un componente Label por encima de la primera imagen. Cambia su propiedad

Text a la frase Martin Luther King y Malcolm X. Cambia tambin su propiedad
TextColor a blanco (White). Aumenta el tamao del texto a 16 puntos usando la
propiedad FontSize y por ltimo activa la negrita desde la casilla FontBold.
Aade una etiqueta ms por debajo de la primera imagen que pueda ayudar al
usuario a reconocer las funciones de la app. Cambia su propiedad Text a Pulsa sobre
la foto para escuchar el discurso, cambia tambin su propiedad TextColor a blanco.

Juan Francisco Fuster

I H a v e a D r e a m

Para terminar con el diseo de la interfaz, selecciona el componente Screen1, cambia

su propiedad BackgroundColor (color de fondo) a negro. Cambia tambin la
propiedad Title (ttulo) al texto I Have a Dream, para que dicha frase aparezca como
ttulo de la app.

Ajustamos algunas propiedades de Screen1

Pausar / reproducir el discurso de M. Luther King

Para continuar, debemos volver al editor de bloques haciendo clic en el botn Blocks.
Comprobars que los bloques que ya tenamos han cambiado de nombre debido a
las modificacin es que antes hemos hecho en la vista de diseo. As, el bloque que
antes se llamaba when Button1.Clic ahora se llamar when MLKButton.Click, y lo
mismo suceder con los dems.
Primero, empezaremos por el botn de Luther King. Nuestro objetivo es que la
primera vez que se toca el botn comience la reproduccin del discurso, la siguiente
vez que se pulse el botn la reproduccin se pondr en pausa, y la siguiente vez,
continuar desde el punto en el que se haba detenido, y as sucesivamente. Para
poder programar este comportamiento necesitaremos usar un bloque de tipo if-else
puesto que nos permitir comprobar si la reproduccin ya est en marcha o an no.
Este bloque permite la definicin de ramas u opciones. En nuestro caso solamente
tendremos dos opciones distintas: el discurso ya ha comenzado a reproducirse o an
no.

I H a v e a D r e a m

En resumen, desde la ventana de edicin de bloques, haz clic sobre la categora

Control, selecciona el bloque if-then y arrstralo hasta un espacio en blanco del rea
de trabajo. Una vez all, haz clic sobre un pequeo botn azul que hay en su esquina
izquierda, haz clic en la rama (u opcin) else y sitala dentro del bloque if. Al final
deberas poder ver lo mismo que aparece en la imagen siguiente:

Juan Francisco Fuster

Creamos el bloque if-then-else

Tendremos que modificar el bloque when MLKButton.Click para que quede como el
que puedes ver a continuacin:

Reproduccin o pausa del discurso

Vamos por partes:

1. Haz clic en el bloque call MLKPlayer.Start y scalo fuera del bloque when.
2. Haz clic en el bloque if-then-else y sitalo dentro del bloque when.
3. Vuelve a hacer clic sobre el bloque call MLKPlayer.Start y encjalo dentro de la
parte else del bloque if-then-else.

5. Haz clic otra vez en el componente MLKPlayer y busca una propiedad llamada
IsPlaying, seleccinala y sitala en la ranura correspondiente al if. Esta propiedad
devolver el valor true (verdadero) si el sonido se est reproduciendo, en otro
caso, devolver el valor false (falso).

Juan Francisco Fuster

I H a v e a D r e a m

4. Haz clic en componente MLKPlayer, busca en la lista el mtodo Pause, haz clic
sobre l y arrstralo hasta encajarlo en la parte del then.

10

En resumen, si se est reproduciendo el sonido entonces (opcin then) la

reproduccin se pausar. En otro caso (opcin else) la reproduccin comenzar o se
reanudar.

Prueba tu app
Es el momento ms adecuado para comprobar si los cambios introducidos en la app
funcionan como es debido en tu dispositivo. Haz la prueba!

Pausar / reproducir el sonido de Malcolm X

A estas alturas seguro que has advertido que tendramos que hacer exactamente lo
mismo en el caso del botn del MalcolmX y del sonido con su discurso, pero, en lugar
de hacerlo todo de nuevo otra vez te vamos a proponer otra forma de hacerlo: copiar
y pegar bloques completos de cdigo.
En la ventana de edicin de bloques, haz clic con el botn derecho sobre el bloque
when MLKButton.Click y despus selecciona la opcin Duplicate. Despus, selecciona
la copia del bloque original y desplzala a otro lugar del rea de trabajo para mayor
claridad.

Duplicar un bloque completo de cdigo

I H a v e a D r e a m

Ahora slo tendremos que sustituir el nombre de los distintos componentes, y

podremos hacerlo fcilmente usando la pequea flecha que aparece a la derecha de
cada uno de los nombres y seleccionando el valor adecuado en cada caso. Al final,
debera quedarte as:

Juan Francisco Fuster

11

Ajustes en el bloque duplicado para la reproduccin / pausa del discurso de Malcolm X

Prueba tu app
Si realizas una prueba ms en tu dispositivo, comprobars que puedes pausar y reanudar
uno y otro discurso sin dificultad. Pero, has comprobado qu sucede si olvidas pausar un
discurso antes de reanudar el otro? Se produce solapamiento entre ellos?

Mejorar la app
Si has hecho la comprobacin que te proponamos justo antes de este apartado
seguro que ya sabes que, en el supuesto mencionado anteriormente, los sonidos de
uno y otro discurso se solapan.
Para mejorar la app te proponemos que sea la propia app, de forma automtica
quin, cuando el usuario inicia la reproduccin de un discurso pause de inmediato la
reproduccin del otro y justo despus inicie la reproduccin del discurso
seleccionado. As, haremos que el funcionamiento de la app sea mucho ms sencillo
e intuitivo para cualquier usuario.
Aqu tienes una gran pista para conseguirlo, intntalo!

Resumen
Algunos de los puntos tratados en este tema son:
Juan Francisco Fuster

I H a v e a D r e a m

Reproduccin / pausa del discurso automtica

12

El componente Player permite reproducir archivos multimedia cuya duracin sea

mayor de unos pocos segundos (para ese caso tenemos el componente Sound).

El aconsejable usar nombres significativos para los distintos componentes de

nuestra app. Aunque se pueden usar los nombres automticos que asigna App
Inventor, lo cierto es que en la ventana de edicin de bloques el trabajo se hace
ms sencillo si cada componente tiene un nombre adecuado.

Una estructura bsica en programacin es el bloque if-then. En su versin ms

sencilla, si se cumple una condicin (if) se ejecutarn los bloques incluidos en el
grupo entonces (then). En su versin completa (if-then-else) existen dos opciones,
si la condicin es cierta se realizarn los bloques del grupo entonces (then) y de lo
contrario se ejecutarn los bloques del grupo si no (else).

I H a v e a D r e a m

Juan Francisco Fuster

13