Estoig Digital

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

Els Splash Screen son animacions per a les pantalles de mòbils, que s’utilitzen en iniciar una aplicació per fer-la més atractiva.  Una manera senzilla de crear aquestes animacions és la d’inserir una imatge GIF animada.  Però resulta que l’objecte IMAGE de l’AppInventor no és capaç de reproduir les imatges GIF animades.  Per resoldre aquest inconvenient si volem inserir una imatge GIF animada en fer una app amb la plataforma AppInventor,  tenim dues alternatives:

  1. Extraure les imatges de l’interior del GIF animat i visualitzar-les de manera consecutiva, afegint una petita interrupció de temps entre cadascuna, per generar l’animació. (Explicarem ara)
  2. Obrir el GIF animat amb l’objecte WebVIewer,  que si que permet la reproducció dels fitxers GIF animats . (Explicarem en un altre post)

Pel primer cas .-

a.- Cercarem la imatge GIF animada que volem emprar com Splash Screen, per exemple : (Podem emprar el cercador de Google i afegint a la cerca ” GIF animated” )

b.- Utilitzarem alguna eina que ens realitzi una extracció de les imatges del GIF, el que s’anomena operació SPLIT. Per exemple podem emprar la web EzGIF.COM per fer un “SLIPT” de la imatge ( ens separarà una a una les imatges de l’animació). Una vegada a la pagina pujarem la imatge escollida o indicarem la url de la mateixa :


  1. Escollim l’opció SPLIT del portal. Per extraure cada imatge del fitxer GIF, en un arxiu separat
  2. Cliquem el botó “Navega” i escollim la imatge GIF que volem extraure .
  3. Una vegada escollida la imatge ens indica el nom de la mateixa
  4. Podem optar per accedir des de la url de la imatge penjada a Internet
  5. Cliquem el Botó “Upload”  per procedir a separar els arxius

En el següent pas:

  1. Opcions que podem aplicar a la imatge que hem pujat al portal. En el nostre cas no l’aplicarem cap.
  2. Imatge que hem seleccionat
  3. Dades de la imatge, especialment important el nombre de frames ( fitxers) que conté en aquest cas 8.
  4. Opcions que podem aplicar en el moment de fer l’extracció: Deixem l’opció per defecte
  5. Botó per procedir a extraure els 8 frames de l’animació. Clicarem aquest botó per continuar

c.- Extraurem els frames de la imatge i els gravarem al nostre disc:

  1. Visualitzaciño de les 8 imatges que conté l’animació
  2. Botó per editar les imatges
  3. Botó per descarregar les 8 imatges en format ZIP comprimit . Nombrarem les imatges de manera correlativa per facilitar la programació

Una vegada descarregat el fitxer ZIP al nostre ordinador descomprimirem les imatges i les nombrarem consecutivament.

d.- 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
  2. Afegim un objecte Image que visualitzarà les imatges
  3. Afegim un rellotge(Timer) a 500 milisegons
  4. A l’espai Media, pugem les 8 imatges que hem extret de dins el GIF animat.

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

  1. Declarem la variable “num_imatge” per anar comptant les imatges.Inicialitzem a 0
  2. Declarem la variable “total_imatges” per poder controlar quan acabem les imatges i així poder tornar a començar per la primera
  3. Controlem el rellotge (Clock Timer) , que el tenim declarat a 500 mil·lisegons . Cada vegada que s’activi passats els 500 mil·lisegons  :
  4. Amb un if comprovarà si estem a la ultima imatge
  5. Comparant la imatge actual amb el nombre total de imatges
  6. Si les dues variables son iguals, vol dir que estem a la ultima imatge  i no podem passar-nos sinó que tornem al “0”
  7. Incrementem el comptador, afegim “1” a la variable “num_imatge” que ens controla el numero de la imatge que es visualitzarà
  8. Assignem la imatge que s’ha de visualitzar a l’objecte IMAGE
  9. Per indicar el nom de la imatge ho fem amb 3 parts (el nom fixe que tenen totes les imatges: “rellotge” , la variable que te el numero de fitxer i finalment el “.gif”  de l’extensió )

f.- Una vegada acabada l’app , la compilarem i obtindrem el fitxer APK per visualitzar l’efecte SPLASH creat:

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

Share Button

Una resposta so far.

  1. […] un anterior post, ja hem explicat una primera estratègia per incorporar  Splash Screen a una app feta amb […]

Translate

Buscar al lloc

L'estoid digital a la xarxa