elamigoborracho: Botones con Sprites para App Inventor

Seguimos con el App Inventor , vamos a crear un boton con un sprite personalizado. El App Inventor nos deja crear botones pero a la hora de poder situarlos en la pantalla y colocarlo en el lugar que queramos la cosa se pone un poco jodia, podemos utilizar Screen Arrangement pero aún así se van colocando uno al lado de otro.Por ello utilizaremos los sprites. Espero que os guste

Vamos al apppinventor http://beta.appinventor.mit.edu

En el creamos un nuevo proyecto le ponemos el nombre que queramos en mi caso botonSprite,

Empezaremos insertando los elementos que necesitamos

Nos vamos a a Screen Arragement y insertamos un HorizontalArragement (nos servirá para organizar las cosas un poco mejor)

Después en Basic seleccionamos un canvas y lo insertamos en sus propiedades en Width le ponemos Fill parent para que ocupe todo el ancho

Seleccionamos el canvas vamos a ponerle una imagen de fondo para ello nos vamos a su propiedad BackgroundImage

Le damos a Add buscamos la imagen y ya tendríamos nuestro canvas con una imagen

De la paleta animation elegimos ImageSprite (Las ImageSprites tiene que ir siempre dentro de un Canvas)

Insertaremos dos ImageSprite las renombramos a la primera le ponemos boton1 y a la segunda boton2

Vamos a ponerle imágenes a estos botones, para ello nos vamos ala propiedad del boton1 y pulsamos Picture , seleccionamos la imagen de nuestro disco duro , con el botón2 hacemos lo mismo.

Donde pone Media le daremos al botón Add y añadiremos las otras 2 imágenes de los estados de los botones. Las utilizaremos después.

Crearemos debajo de nuestro canvas un nuevo HorizontalArragament y insertaremos en el dos etiquetas. (label)

Modificamos el texto de estas etiquetas en uno le poenemos Opción Seleccionada y en la otra etiqueta …

Ahora vamos al editor de bloques

Pulsamos en el boton nos dira que se va a descargar le decimos que si , una vez que se descarge lo ejecutamos y se nos abrira el Java le decimos que si y cuando carge nos tiene que aparecer algo así.

Nos vamos a My Blocks y pulsamos en Boton1

Vamos a inserta la When Boton1.Touched

En My Blocks pulsamos en el botón 1 y elegimos Set Boton1.Picture to

Nos vamos a Built-in elegimos text y cogemos la primera text cambiamos el nombre por el de la imagen cuando hacemos clic en ella

Juntamos estas piezas

Lo que queremos conseguir es que cuando pulsemos nuestro boton 1 cambie la imagen de ese botón por la imagen presionada.

Con el segundo botón deberemos realizar lo mismo pero cambiándole el nombre por el de su imagen

En el panel tenemos que insertar un elemento de Clock esta en los elementos básicos

Tambien necesitamos un elemento de sonido que están en Media

Seleccionamos nuestro reloj y en el intervalo de tiempo le ponemos 800 mlsec

Vamos a crear una variable global que llamaremos OpcionSelecionada va ser un numero que valdrá 1 si pulsamos el botn1 y valdrá 2 si pulsamos el boton2, para crearla vamos al editor de bloques en Buil-in> Definition >en Def variable as arrastramos, le cambiamos el nombre y ya la tenemos

Ahora le ponemos un valor de 0, vamos otra vez Buil-in>Math>Number

Le ponemos 0 y ya la tenemos

La unimos a la anterior

Ahora en la parte My Blocks > My Definitions nos tiene que aparecer esta variable la arrastramos porque la vamos a utilizar.

Le ponemos un valor valor 1 y la unimos

Hacemos lo mismo pero esta vez con un valor 2

Estas partes irán en los botones

Ahora tenemos que hacer la vibración

Nos vamos a MyBlocks pulsamos en Sound1 y elegimos call sound1.vibrate milisec

Le pondremos que tenga una duración de 200 milisecs , vamos a Built-In > Math > number y le ponemos 200 , luego las unimos

Esta parte también la pondríamos en el botón

Con el botón dos hay que hacer lo mismo

Con esto cuando pulsemos en el botón nos cambia la imagen del botón ha activado el problema que tenemos es que se nos queda esa imagen, crearemos un evento para solucionarlo.

Vamos a My Blocks> pulsamos en Clock1 que es nuestro reloj y elegimos when Clock1.Timer do