Gif animated Extension. Clickable. Transparent Background

[Juan_Antonio]

(This topic was edited on 2022/06/21)
Hello friends,

this extension is about inserting animated gifs in our applications.

• It needs an Image component.
• The image can be clickable and transparent background.

Blocks:

• LoadGif, needs a Image component. Image file can be in asset, it is only necessary to write its file name.
  [It could also be in the SdCard, in this case we would write the absolute address /mnt/sdcard/directorio/file.gif]
  We can set a color mask for the transparent background, ¡try several!, white, black, yellow ...

• GetFrameCount, number of frames gif file.

• GetCurrentFrameIndex, number of actual frame showed.

• GetNextDelay, delay of next frame, gets of file gif.

• Clock1.Timer
  Image1.Photo = NextFrame (gets frame, inserts in Image)

• GetFrames, decoder each frame and save them in ASD/frames_gif.

• Events.
  ImageDown and ImageUp, x,y positions of touch in image. inside is a boolean.
  Frames, get frame. Insert in Image.Photo = frame

oooooooooooooooooooooooooooooOOOooooooooooooooooooooooooo

• You can create the animated gif in two ways:
  a) Using LoadGif and NextImage (each image is decoded and displayed.)
  b) Using CopyFrames, (all images are decoded and displayed one by one.)

• Let's see several examples:

1.- Each image is decoded and presented.

• Four gif images.
  
  

p193A_gif_animado_v2.aia (866.8 KB)

• Touch Image1

2.- All images are decoded, copied in directory ASD/frames_gif and displayed one by one. CopyFrames.

p193A2_gif_animado_v2i.aia (1.1 MB)

3.- If the transparent background doesn't work for us, we can put a flat colored background.

• Look make color (0,0,0,0)
  
  
  
  
  

p193A3_gif_animado_v2.aia (1.8 MB)

oooooooooooooooooooooooooooooOOOooooooooooooooooooooooooo

• This extension is based in GifDecoder.java but with many changes.

• You can get com.KIO4_AniGif.aix file from:

Create Build Crear App Inventor Extensiones Extensions. GIF animado, Animated GIF Android Click over touch.

More extensions:
http://kio4.com/appinventor/index.htm#extensiones

Juan Antonio Villalpando.

[Anke]

p193A_gif_animado.aia (873.2 KB)

I opened this (Companion) on a Galaxy Note 3 (Android 5) & a Galaxy Note 8 (Android 9) and get this:

It’s already late … just a short feedback, I haven’t tested anything else …

Greetings, Anke

[Juan_Antonio]

Thank you Anke, now fixed.

[TIMAI2]

@Juan_Antonio

Are able to develop your extension to “make a gif”, to combine a set of images to one gif file ?
Don’t know if there is a GifEncoder.java ?

[Juan_Antonio]

This is interesting, I will try.

[SoccerDotGaming]

Hi @Juan_Antonio i’m new i was wondering if you could download app inventor on apple?

[Juan_Antonio]

Apple? iOS? read this categorie, please:
https://community.appinventor.mit.edu/c/appinventor-ios/19

[Italo]

Please do not hijack threads! You already started a thread about this here:

Can you have app inventor on apple

Hi I use apple but not android is there a way to get app inventor on apple?

[Carlos_Romero]

FOR TRANSPARENT BACKGROUND

try to use this color as number: 4294967295

note: use this as number (the blue box) not as text (the red one)

[Juan_Antonio]

4294967295 is white.

Color number in Make color and Split color

Yellow color is: R = 255 G = 255 B = 0 opacity = 255 What color number is yellow using the make color block? N = B + (G + (R + (256 x opacity)) x 256 ) x 256 N = 0 + (255 + (255 + (256 x 255)) x 256 ) x 256 = 4294967040 With split color what list do we get with yellow color? [255, 255, 0, 255] What number is the yellow color? 4294967040 - 4294967296 = -256 [colores_RVA] colores_RVA.aia (2.6 KB) Here tutorials in Spanish: http://kio4.com/appinventor/20D_separar_rva.htm http://…

[mis_salwa]

Extension cannot work .
Did it work with any one

[Juan_Antonio]

It may not work on Android 10+ as it needs to read and write files on the SdCard.

[Taifun]

@mis_salwa

Extension cannot work .

please elaborate

How to ask a question (open new topic)

Before you ask a question / open a new topic please take care of the following points: The forum was previously searched for similar topics / issues. Give a precise (detailed) description of the issue / bug, the goal. Show the (relevant) blocks (images, screenshots of blocks in high quality) Debug your blocks (connect to Companion and right mouse click: → Do it). to 3: get an image of your blocks (→ right mouse click in Blocks area) [grafik] or use the Sniping Tool from Windows etc.: [g…

Taifun

[TheRepman]

Good Evening,
I like this extension very much and it is doing a good job on an Android 8.0.
But under Android 10 it does not collaborate with me:
I got the following error in companion:

/mnt/sdcard/AppInventor/assets/Triwizardcup.gif: open failed: ENOENT (No such file or directory

I dont have a sdcard in this mobile.

Here is the relevant block:

Even if I add an explicit path to internal memory space (like /storage/emulated/0/Pictures/), where a copy of the desired file resides, the extension will not load the gif.

Any Ideas how I can display the gifs even on the Android 10 Mobile? Is it a matter of permissions and how can I set these?
A helpfull information would be appreciated!
Regards
Stefan

[Juan_Antonio]

@TheRepman

In this web page I have put the version com.KIO4_AniGif10.aix, destined for Android> = 10, Can you test if it works for you?

Files are saved in ...
/storage/emulated/0/Android/data/edu.mit.appinventor.aicompanion3/files/ ... in emulation with Companion.

And...
/storage/emulated/0/Android/data/'namepackage'>/files/... when Built.

http://kio4.com/appinventor/293A_extension_gif_animado_click.htm

[TheRepman]

This was really a fast reply! Thanks for your help. I will tryout this... and come back here!

[TheRepman]

Very good Juan_Antonio!
It works now with my android 10 mobile.
With old one (Android 8) it does not anymore out of the box. I have to change the path to the gif images to
/storage/emulated/0/AppInventor/assets/
Seems that my AppInventor 2 resides in the first plane of internal memory, not in the Android directory.
I will test how it works if the APP is compiled...
Thanks again for your help!
Regards

[Taifun]

@TheRepman

With old one (Android 8) it does not anymore out of the box. I have to change the path to the gif images to
/storage/emulated/0/AppInventor/assets/

that path to the assets will work only in the companion app
Taifun

[TheRepman]

@Taifun

that path to the assets will work only in the companion app

Sure! The build-version is different. I will check that later...

[TheRepman]

So, it seems that I got it (nearly..).
To take the right path for the gif assets is a challenge. Especially because they are not the same in companion und build version. I copied my assets in different places and not all of them are obviously readable from my app, even though the files are there (and readable from within the file explorer). Dont know why this...

One question stays:
The path for the build (apk-) Version under Android 10 is:

/storage/emulated/0/Android/data/'namepackage'>/files/

If I install my App under Android 8, this path does not exist. Where resides the App under Android 8? Can somebody give me a sign, even if this thread is not directly related to that issue.

One suggestion for an improvement in newer versions of the gif extension:
Try to catch the division by zero error, if the wrong path is provided. The timer event with the next-frame method fires otherwise very fast errors and the original wrong path from the Loadgif method can not be seen.
Again Thanks for your help. I really appreciated it.
Regards Stefan