App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

____________________________

193B.- Poner un GIF animado y hacer Click sobre él. Fondo transparente.

- En la página 293B_extension_gif_animado_click.htm, veremos otra forma de poner gif animados, pero la que veremos en esta página es mejor y la recomendable.

- Vamos a utilizar una extensión para poder poner GIF animados y hacer Click sobre ellos.

- Además cuando hacemos click sobre una imagen se dispara un evento.

- Para insertar una imagen GIF debemos poner componente Imagen.

- La extensión descompondrá el archivo gif en sus frames y los irá mostrando en un componente Imagen.

___________________________
___________________________
______________________________________________________
1.- Ejemplo 1. Descompila un cuadro y lo muestra.

p193A_gif_animado_v2.aia

com.KIO4_AniGif.aix

- Características:

- Necesita un componente Imagen.

- Cargamos el archivo gif mediante LoadGif.

- Los archivos deben estar en el directorio base (Subir archivo...)

- Los archivos se identifican por su nombre.

- Los archivos también pueden estar en la SdCard, en este caso pondríamos su dirección absoluta: /storage/emulated/0/...

- Para la máscara de color transparente debemos probar varios colores, blanco, negro, amarillo,... con alguno obtendremos fondo transparente.

- MoveStart, establece el tiempo entre frames en milisegundos. Inicia el movimiento del gif.

- GetFrameCount, nos indica el número de cuadros que tiene ese gif animado.

- GetCurrentFrameIndex, muestra el número del cuadro actual.

- GetNextDelay, muestra el tiempo del próximo cuadro, en el archivo gif.

- GetFrames, copia los cuadros que componen el gif animado en el directorio ASD/frames_gif/

- Los cuadros se van descompilando y mostrando según se descompila, es decir no se descompilan todos y se muestran (aunque también se puede hacer así).

- Eventos:

- Frames, obtiene el frame actual, en su interior ponemos un bloque de Imagen.Foto = frame.

- imagenDown e ImageUp, al pulsar sobre la imagen se dispara estos eventos.
x e y, indican las coordenadas pulsadas sobre la imagen.
inside es una variable booleana, true o false, según estés pulsando o no.

- También se puede utilizar con un Reloj y NextFrame, lo vamos visualizando cada cuadro en su mediante Imagen.Foto = NextFrame .

____________________
- Diseño.

____________________
- Bloques.

___________________________
___________________________
______________________________________________________
2.- Ejemplo 2. Descompilando todos los cuadros y luegos mostrandolos secuencialmente.

p193A2_gif_animado_v2.aia

- En el ejemplo anterior, los cuadros se van descompilando y mostrando según se descompilan.

- Ahora vamos a realizar la visualización de otra manera, descompilaremos todos los cuadros mediante el bloque GetFrames en el directorio ASD/frames_gif/, y los iremos mostrando uno a uno mediante el Reloj en el componente Imagen.

____________________
- Diseño.

____________________
- Bloques.

- En este caso he puesto 7 como número de cuadros que se van a visualizar.

- Se podría haber conseguido este número mediante el bloque GetFrameCount.

- Observa que ahora el archivo de Imagen.Foto comienza por file://ASD/frames_gif

___________________________
___________________________
______________________________________________________
3.- Ejemplo 3. Sin fondo transparente.

p193A3_gif_animado_v2.aia

- Sin fondo transparente.

- A veces tomamos un gif y no podemos conseguir que tenga fondo totalmente transparente debido a que no tiene colores planos en una determinada área.

- En este caso debemos poner un fondo de color como indico en estas imágenes:

___________________________
- Diseño.

____________________
- Bloques.

------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------

- Bloques en inglés.

- En Kodular también funciona.

___________________________