Estoig Digital

Portal orientat a la recopilació de recursos i estrategies per fer a l'aula amb aplicacions portables i gratuites

En un anterior post, ja hem explicat una primera estratègia per incorporar  Splash Screen a una app feta amb AppInventor. En aquest segon post explicarem com poder resoldre la impossibilitat de visualitzar les imatges GIF que tenen els objectes Image de l’AppInventor fent servir un visor web (WebViever)

Visualitació d’imatges GIf amb un visor web ( WebViewer)

a.- Cercarem la imatge GIF animada que volem emprar com Splash Screen, tenim 3 possibilitats de localització d’aquesta imatge que volem mostrar :

  1. Directament a l’url d’Internet a on esta localitzada la imatge (http://www.animated-gifs.eu/phone-240×320-clocks/0003.gif)
  2. Podem descarregar la imatge i pujar-la al nostre servidor web . Hem de tenir present que no la podem penjar a Google Drive, perquè no permet un accés  directe, sense validació. Com a proposta podeu donar-vos d’alta en algun dels hosting gratuïts com Hostinger (http://www.hostinger.es/) o 000Webhost (https://www.000webhost.com/) . En aquest  cas podriem canviar el nom de la imatge (http://cursxml.tk/appinventor/animacio1_4.gif)
  3. També podem descarregar la imatge i incloure-la dins de l’aplicació .

b.- Crearem el disseny de l’app amb appinventor : Accedirem a la nostra compta de la plataforma appinventor i crearem una nova app amb els següents elements :

  1. Afegim una capa horitzontal per ajustar la posició de la imatge. Aquesta capa ocuparà tota l’amplada i tota l’alçada i tindrà centrat horitzontal i vertical
  2. Afegim un objecte Webviewer. Per a una millor posició cal ajustar les mides del WebView a les de la imatge, sinó quedarà espai en blanc al costat i queda poc estètic.
  3. Ajustemn l’amplada delvisor web a 320 i l’alçada a 240 que son les mides de la imatge així la finestra web s’ajusta a la mida de la imatge i no afegeix un fons blanc als costats
  4. A l’espai Media, pugem la  imatge GIF que hem descarregat

c).-Redactarem el codi que ens visualitzi les imatges :

  1. Declarem la variable “url_web” amb l’adreça de la imatge original a internet
  2. Declarem la variable “url_media” amb l’adreça que hem de fer servir si la imatge està en el Media de l’app
  3. Programem l’esdeveniment inicial de la pantalla (Screen1.Initialize)
  4. Assignem l’adreça url al visor web (WebViewer1.GotoUrl)
  5. Podem assignar la url local o la url externa segons haguem decidit.

Podeu descarregar el codi del  fitxer (splash2.aia) clicant aquí

Share Button

Comments are closed.

Translate

Buscar al lloc

L'estoid digital a la xarxa