Sonntag, 14. Februar 2016

AppInventor 2: Animation Tutorial - Animated Images


Why should I integrate animated images in my apps?


Of course, it depends from the kind of your app, if you will use animated images or not. Mainly in apps for children you should use animated images. They will bring your app to life. For e.g. in one of our apps we used an animated sun. It looks really nice and is a good eye-catcher. The users will remember your app.

But not only children's apps are more lively. Also, if you for e.g. will develop a tai chi, kung fu or karate tutorial app it is good, if you show the movements of the artist in animated images. It is a lot of work, because every images needs to be animated with a special program code. But it has a big effect and impresses the users.

Another kind of app, where you can use animated images are DIY tutorials or every app, which is connected with movement. In a memorial or religious app you can integrate an animated candle.

Where can I find images, which I can use for an animated app image?


The best way is, to create your own images in Gimp or Photoshop (TM). You will need a minimum of four splitted images. Name them A1.jpg, A2.jpg, A3.jpg, A4.jpg and so on. Then you have not to change the code, which is shown in the tutorial.

If you want to have images from the internet, you have to take care that they are not copyright protected. You really need free images. And on some websites you have make a commercial subscription for to receive the gif images. So please take care, where you download your gif images.

Preparation of the images for the animation:


First download the gif from a website with free gifs or create a minimum of four images. This can be png and jpg images. I tried it with gif images, but it failed, so you have to save these images as png or jpg. With png you can have an transparent alpha channel. If you have jpg images you need to customize the image background at the background of your app.

If you download a gif image from a website with free gif images, you need to split these images with an image splitter. The amount of images you will get, depends on the kind of animation, For e.g. for a bat are four to five images enough. For our animated catfish we used about 40 single images for the animation.

Let's watch the tutorial video!




Keine Kommentare:

Kommentar veröffentlichen

Thank you very much for your comment. After moderation your comment will appear on this blog.

Vielen Dank für Ihren Kommentar. Nachdem der Kommentar überprüft wurde, wird er auf dem Blog erscheinen.