Animated GIFs - displaying frames and adding horizontal motion

[Scott Ferguson]

Although static gif images can be displayed in App Inventor, gif animations are not yet supported.

In order to display a gif animation, you can use an image editor and take each of the frames/layers from the gif file and save them as separate images.

These can then be imported into App Inventor's Media folder and displayed one at a time with a Clock Timer block and an Image Sprite on a Canvas.

Each time the Clock Timer fires, the Image Sprite Picture can be changed to the next picture in the animation sequence.

This can be done either by putting the names of the picture files in a list then using an index and select list item to view them or by embedding the index in the file names themselves and using the join Text block to build the file name with every firing of the Timer.

In addition, to make the animation move left or right on the Canvas, you can add or subtract pixels from the Image Sprite X Property.

That is how this example project works.

The top slider adds a variable number of pixels to the X value and the bottom slider changes the Timer Interval.

When the movement of the Baby is most realistic, the value for top slider should be noted.

Also note that once the top value is picked, changing the bottom slider speeds up or slows down the Baby's crawl but the Baby does not slip or slide.

Trying this with other gif animations will likely have different values for the number of pixels to add which I believe is dependent on the stride of the character in the image.

The original GIF animation with 19 layers/frames:

Blocks to simulate the GIF animation and move the baby forward:

YouTube video: http://youtu.be/AWjzKKa8iZs

---

END

[Taifun]

alternatively you can use the webviewer to display animated gifs,

see here http://puravidaapps.com/snippets.php#ani

or access it directly, see here http://puravidaapps.com/snippets.php#zoom

During development, you have to use the development path to the image.

file:///mnt/sdcard/AppInventor/assets/whalestail.gif

Before packaging the app, use the production path.

file:///android_asset/whalestail.gif

Taifun

[Scott Ferguson]

Thank you for that suggestion. Much simpler solution for simple animated gif support :)

---

Scott