EJERCICIO 3 – Darth Vader

EJERCICIO 3 - Darth Vader

Para realizar esta práctica, vas a tener que seguir los pasos que se muestran a continuación

Paso 1: dirígete a la barra de herramientas y en la pestaña Proyectos escoge la opción Comenzar un proyecto nuevo.

Paso 2: aparecerá una pantalla en la que has de introducir el nombre que va a tener la App.

EJERCICIO 3 - Darth Vader EJERCICIO 3 - Darth Vader

 

Vamos a descargar de la carpeta de material la imagen de Darth Vader para nuestra aplicación, será la portada cada vez que abramos nuestro ejercicio se verá así:

EJERCICIO 3 - Darth Vader

Lo primero de todo es colocar dentro de nuestro Screen la imagen en la parte superior. Seleccionamos el elemento imagen y lo arrastramos a la pantalla del móvil aquí representado.

EJERCICIO 3 - Darth VaderEJERCICIO 3 - Darth Vader
Para agregar nuestra imagen a la pantalla deberemos irnos al menú medios y clicar en subir el archivo Fondo.jpg que tenemos en la carpeta de material del curso. Una vez hecho se nos visualizará el Darth Vader. Para que tenga el tamaño correcto le damos estos parámetros:
EJERCICIO 3 - Darth Vader
Seguidamente pondremos los botones de nuestra app debajo de esta dentro de una disposición horizontal, es decir en un contenedor que permita colocar dos botones en paralelo

Para ello desde la pestaña Disposición arrastramos la opción Disposición Horizontal hacía la parte baja de la imagen ya colocada:

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader
EJERCICIO 3 - Darth Vader
Arrastramos desde la pestaña Interfaz de usuario el elemento Botón dentro de nuestra disposición horizontal y seguidamente otro botón que vaya justo al lado.

A la hora de colocar ambos botones tenemos que posicionarnos con el ratón encima del contenedor y esperar a que aparezca una arista azul en vertical la cual nos indica donde queremos que estén nuestros dos botones

Estos son los parámetros de los botones:

 

 

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader

El cual será DarthVaderefectovoz.mp3 que estará dentro de la carpeta material del curso.

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth Vader

EJERCICIO 3 - Darth VaderPor ultimo, en la vista diseno haremos que el screen tenga estos parametros para que el diseno sea el mas acorde a la naturaleza de Darth Vader

 

 

 

 

 

 

 

Una vez diseñada la parte visual vamos a trabajar la programación de nuestra app para ello nos vamos a la opción bloques y desde ahí vamos a trabajar el comportamiento de los botones Respira y Salir

EJERCICIO 3 - Darth Vader

Clicamos encima del botón respira y añadimos el primer condicional que vemos Cuando Respira Clic>Ejecutar>Llamar VozDarthVader

Es decir, cuando cliquemos encima del botón Respira haremos que llame a la variable voz o sonido que ya tenemos implementado en el visor Diseño.

EJERCICIO 3 - Darth Vader

La primera línea de código o bloque viene a decir que cuando clicamos en el botón respira ejecuta la acción de reproducir el sonido que tenemos en nuestra app.

EJERCICIO 3 - Darth Vader
Para que no esté reproduciendo en bucle, vamos a escribir esta línea de código la cual nos permitirá que cuando cliquemos en el botón salir o Finalizar parara nuestra grabación:
EJERCICIO 3 - Darth Vader

Para añadir el componente cerrar aplicación, debemos irnos a los componentes genéricos>Control>Cerrar aplicación
EJERCICIO 3 - Darth Vader
Finalizamos guardando el proyecto en nuestra carpeta de proyectos. De esta manera lo tendremos ya acabado y podremos volver a él siempre que queramos si hay que modificar cualquier elemento.