Imágenes y Sonidos



Hola. Buenas tardes. Hoy introduciremos Imágenes y Sonidos en nuestra App



Video Explicativo

Ver en YouTube

Para ver el video más lento: Configuración - Velocidad - 0,5...



Explicación paso a paso:

APPINVENTOR 103 IMAGENES Y SONIDOS

 

 

Hola. Buenas tardes.

Hoy diseñaremos una App a partir de la App anterior.

En esta ocasión, utilizaremos un objeto "Image" y un objeto "Sound"

Si no tenéis imágenes y sonidos a mano, podéis utilizar estos de aquí...

Vamos de nuevo a: http://appinventor.mit.edu

Abrimos nuestro anterior proyecto:

 

Lo guardamos como copia:

 

También debemos cambiar el nombre de la pantalla:

 

Ahora sacamos el TextBox y modificamos el text de la Label:

Ahora añadimos un Layout Horizontal:

 

...e introducimos los dos botones:

Seleccionamos el Button1 y nos vamos a la propiedad "Image" y presionamos Upload File

                  

A continuación nos dan a elegir una imagen de nuestro Pc:

Recomendamos que sea una imagen grande, cuadrada, de un rostro fotografiado de cerca, o bien recortada...

Ok

 

Vamos a las Propiedades del Button1 y cambiamos todas estas:

Sacamos el texto del Button.

Fijamos la altura del Botón:

Y el ancho:

Hacemos lo mismo con el Button2

Entre ambos añadiremos una label, que hará de separador:

Y le pondremos estas propiedades:

Ahora añadiremos un objeto "Image" debajo del Layout Vertical

 

Y le pondremos como propiedades: ScalePictureToFit y otras:

Ahora vamos a modificar el código:

Dejamos sololos botones:

 

Añadimos:

 

 

Lo copiamos a los dos botones:

 

Ahora ya podemos probar la App en el móvil:

 

Cuando la instalemos tendremos dos pequeñas imágenens que, al ser pulsadas, aparecen en la parte inferior de la pantalla al 100%

Ahora vamos a añadir un sonido. Para ello necesitamos un archivo de audio en mp3, ya sea bajado de internet , o grabado por nosotros.

En mi caso, he grabado a cada uno de mis hijos saludando:

 

Volvemos otra vez al diseñador de nuestra página:

Dentro del grupo de objetos "Media" arrastramos dos "Sound"

 

En sus propiedades hacemos lo mismo que con las imágenes. Seleccionamos "Upload File"

                  

Lo mismo con el otro "Sound"

 

Volvemos al Código:

Y añadimos:

 

Volvemos a compilar:

 

La instalamos en el móvil, y ya está...

 

 

...Y esto es todo por hoy. Espero que os haya gustado.

Un saludo y, hasta la próxima...