Tema 2.- I Have a Dream(2)

Tema 2 I Have a Dream Introducción

Esta aplicación está pensada para introducir al alumno en el manejo de distintos tipos de archivos multimedia, en concreto usaremos tres imágenes 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 más 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 reproducción de su discurso pero evitando que uno y otro discurso se solapen en el tiempo.

La app I Have a Dream

Qué vamos a aprender •

•

•

•

Usaremos el componente Player para reproducir sonidos de larga duración. Aprenderemos a cambiar el nombre automático que asigna App Inventor a los componentes de nuestra app por otros que sean más significativos. Ajustaremos la disposición de los componentes en la pantalla del dispositivo usando el componente HorizontalArrangement HorizontalArrangement .. Usaremos el componente Label.

Juan Francisco Fuster

m a e r D a e v a H I

1

•

Usaremos el bloque de control if-then-else para tomar decisiones durante la ejecución de la app.

Primeros pasos

Conéctate a la web de App Inventor con tu navegador en http://ai2.appinventor.mit.edu. Abre un proyecto nuevo y asígnale el nombre IhaveAdream. Haz clic en Connect y configura tu dispositivo (o emulador) para poder hacer pruebas en vivo (ya hablamos de cómo hacerlo en el tema cero: Requisitos Previos). Una vez conectado, desde la ventana de diseño, en el panel de propiedades, cambia el título de la Screen1 por I Have a Dream. En pocos segundos podrás 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 están disponibles en la carpeta de Recursos del tema. Recuerda que son un total de 5 archivos: tres imágenes y dos archivos de sonido en formato MP3. Ahora, en la web de App Inventor, utiliza el botón Upload File para subir los archivos a la web. Recuerda que deberás subirlos uno a uno y que al finalizar el proceso, podrás comprobar que todos se encuentran disponibles en la sección llamada Media.

Ya hemos subido a la web todos los archivos necesarios

Diseño de componentes

En primer lugar, selecciona el componente Button desde la categoría de User Interface y arrástralo hasta la pantalla de la app. Necesitamos cambiar un par de propiedades del Button1: •

•

La propiedad Text vamos a dejarla en blanco, así que borra el texto que aparece allí de modo automático para cada botón. A la propiedad Image le vamos a asignar una de las imágenes que hemos subido, concretamente la llamada mlk.jpg y que se corresponde con una fotografía de Martin Luther King.



2

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 aparecerán centrados horizontalmente. Observa las propiedades que hemos modificado para el botón en la imagen siguiente:

Estableceremos las propiedades adecuadas para el botón

También tenemos que añadir 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 más largos que el anterior. Así que, en la lista de categorías, haz clic en Media, ahora haz clic sobre el componente Player y arrástralo hasta la pantalla. En este caso, tal y como ya sucedía con el componente Sound , el nuevo componente se situará en la parte inferior de la pantalla. Recuerda que este es el lugar donde aparecerán todos los componentes no visibles que usemos en la app.



3

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 móvil o tableta Android.

1. En tu dispositivo, ejecuta la app MIT Ai2 Companion que ya deberías tener descargada e instalada. Si aún no lo has hecho, revisa nuevamente el tema 0 para obtener todos los detalles de cómo hacerlo. 2. En la web de App Inventor, haz clic en Connect y después en AI Companion. 3. Escanea el código que verás en pantalla desde tu dispositivo, o bien, introduce manualmente el código que verás al lado del código QR bajo el epígrafe Your code is en la casilla SixDigitCode. Si todo ha ido como es debido, al cabo de unos segundos podrás ver la app en tu dispositivo. Sin embargo, ten presente que aunque toques el botón con la imagen de Luther King todavía no escucharás nada… Aún tenemos que definir el código necesario para que esto suceda.

Nota

Como ya explicamos en el tema 0, este procedimiento sólo es válido si tu ordenador y tu dispositivo Android están 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.



4

Reproducir el discurso de Martin Luther King

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

Creamos el bloque que gestionará lo que debe hacer la app cuando se toca el botón

1. En primer lugar, cambia a la ventana de edición de bloques haciendo clic sobre el botón Blocks. 2. Selecciona el Button1 de la lista de bloques del panel izquierdo. 3. Busca ahora el evento when Button1.Click , selecciónalo y arrástralo a un lugar en blanco del área de trabajo.

El método call Player1.Start hace que comience la reproducción del discurso

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



5

Prueba tu app

¿Tienes tu dispositivo conectado todavía? Ha llegado el momento de comprobar si tu app reproduce el discurso. Toca sobre la imagen de Luther King y compruébalo.

Añadir la imagen de Malcolm X

Vamos a modificar la app para que también pueda reproducir el discurso de Malcom X y para conseguirlo, tendremos que modificar la interfaz de nuestra app desde la vista de diseño. También tendremos que introducir nuevos bloques de código desde la vista de edición de bloques, pero además, tendremos que tener mucho cuidado para que el discurso de uno y otro líder no se solapen en el tiempo. En primer lugar, para poder colocar el botón 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 categoría Layout : 1. Vuelve a la vista de diseño haciendo clic en el botón Designer . 2. Haz clic sobre la categoría Layout. 3. Selecciona el componente HorizontalArrangement y arrástralo hasta la pantalla. 4. Haz clic sobre el Button1 (la imagen de Luther King) y arrástrala hasta dejarla dentro del HorizontalArrangement . Ahora ya podemos añadir un botón nuevo. Desde la categoría de User Interface haz clic sobre Button y arrástralo dentro del HorizontalArrangement justo a la derecha del botón de Luther King.

Añadimos un segundo botón para Malcolm X

Después, siguiendo el mismo método que ya habíamos aplicado al primer botón, selecciona Button2, elimina el texto que aparecerá en su propiedad Text y asigna a su propiedad Image el archivo Malcolm.jpg.



6

Para mejorar un poco la interfaz de nuestra app, introduciremos una imagen más que en esta ocasión situaremos por encima del HorizontalArrangement y, por tanto, aparecerá por encima de los botones existentes.

Añadimos una imagen a la app

Esta nueva imagen no se corresponderá con ningún botón, así pues, en la categoría User Interface haremos clic sobre el componente Image y lo arrastraremos hasta la pantalla. Además, tendremos que cambiar su propiedad Picture y asignarle el archivo llamado MLK_malcolmX.jpg.



7

Añadir el discurso de Malcolm X

Siguiendo en la vista de diseño:

Añadimos un segundo Player para el discurso de Malcolm X

1. Abre la categoría Media de la Paleta. Haz clic sobre un nuevo componente de tipo Player y arrástralo 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 botón Rename cambia el nombre de los componentes para que tengan nombres más apropiados: a.

Selecciona el componente Player1 y renómbralo a MLKPlayer .

b. Selecciona el componente Button1 y renómbralo a MLKButton. c.

Selecciona el componente Player2 y renómbralo a MalcolmPlayer .

d. Selecciona el componente Button2 y renómbralo a MalcolmButton.

Para terminar con el diseño de la interfaz, selecciona el componente Screen1, cambia su propiedad BackgroundColor (color de fondo) a negro. Cambia también la propiedad Title (título) al texto I Have a Dream, para que dicha frase aparezca como título de la app. Añade un componente Label por encima de la primera imagen. Cambia su propiedad Text a la frase “Martin Luther King y Malcolm X”. Cambia también su propiedad TextColor a blanco (White). Aumenta el tamaño del texto a 16 puntos usando la propiedad FontSize y por último activa la negrita desde la casilla FontBold . Añade una etiqueta más 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 también su propiedad TextColor a blanco.



8

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 botón Blocks. Comprobarás que los bloques que ya teníamos han cambiado de nombre debido a las modificación es que antes hemos hecho en la vista de diseño. Así, el bloque que antes se llamaba when Button1.Clic ahora se llamará when MLKButton.Click, y lo mismo sucederá con los demás. Primero, empezaremos por el botón de Luther King. Nuestro objetivo es que la primera vez que se toca el botón comience la reproducción del discurso, la siguiente vez que se pulse el botón la reproducción se pondrá en pausa, y la siguiente vez, continuará desde el punto en el que se había detenido, y así sucesivamente. Para poder programar este comportamiento necesitaremos usar un bloque de tipo if-else puesto que nos permitirá comprobar si la reproducción ya está en marcha o aún no. Este bloque permite la definición de ramas u opciones. En nuestro caso solamente tendremos dos opciones distintas: el discurso ya ha comenzado a reproducirse o aún no. En resumen, desde la ventana de edición de bloques, haz clic sobre la categoría Control, selecciona el bloque if-then y arrástralo hasta un espacio en blanco del área de trabajo. Una vez allí, haz clic sobre un pequeño botón azul que hay en su esquina izquierda, haz clic en la rama (u opción) else y sitúala dentro del bloque if . Al final deberías poder ver lo mismo que aparece en la imagen siguiente:



9

Creamos el bloque if-then-else

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

Reproducción o pausa del discurso

Vamos por partes: 1. Haz clic en el bloque call MLKPlayer.Start y sácalo fuera del bloque when. 2. Haz clic en el bloque if-then-else y sitúalo dentro del bloque when. 3. Vuelve a hacer clic sobre el bloque call MLKPlayer.Start y encájalo dentro de la parte else del bloque if-then-else. 4. Haz clic en componente MLKPlayer , busca en la lista el método Pause, haz clic sobre él y arrástralo hasta encajarlo en la parte del then. 5. Haz clic otra vez en el componente MLKPlayer y busca una propiedad llamada IsPlaying, selecciónala y sitúala 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).



10

En resumen, si se está reproduciendo el sonido entonces (opción then) la reproducción se pausará. En otro caso (opción else) la reproducción comenzará o se reanudará.

Prueba tu app

Es el momento más 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 tendríamos que hacer exactamente lo mismo en el caso del botón 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 código. En la ventana de edición de bloques, haz clic con el botón derecho sobre el bloque when MLKButton.Click y después selecciona la opción Duplicate. Después, selecciona la copia del bloque original y desplázala a otro lugar del área de trabajo para mayor claridad.

Duplicar un bloque completo de código

Ahora sólo tendremos que sustituir el nombre de los distintos componentes, y podremos hacerlo fácilmente usando la pequeña flecha que aparece a la derecha de cada uno de los nombres y seleccionando el valor adecuado en cada caso. Al final, debería quedarte así:



11

Ajustes en el bloque duplicado para la reproducción / pausa del discurso de Malcolm X

Prueba tu app

Si realizas una prueba más en tu dispositivo, comprobarás 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 comprobación que te proponíamos 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 automática quién, cuando el usuario inicia la reproducción de un discurso pause de inmediato la reproducción del otro y justo después inicie la reproducción del discurso seleccionado. Así, haremos que el funcionamiento de la app sea mucho más sencillo e intuitivo para cualquier usuario. Aquí tienes una gran pista para conseguirlo, ¡inténtalo!

Reproducción / pausa del discurso automática

Resumen

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


12

•

•

•

El componente Player permite reproducir archivos multimedia cuya duración 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 automáticos que asigna App Inventor, lo cierto es que en la ventana de edición de bloques el trabajo se hace más sencillo si cada componente tiene un nombre adecuado. Una estructura básica en programación es el bloque if-then. En su versión más sencilla, si se cumple una condición (if ) se ejecutarán los bloques incluidos en el grupo entonces (then). En su versión completa (if -then-else) existen dos opciones, si la condición es cierta se realizarán los bloques del grupo entonces ( then) y de lo contrario se ejecutarán los bloques del grupo si no ( else).



13

Tema 2.- I Have a Dream(2)

Recommend Documents