![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/01\/snake20game206.png\")
<\/figure>\n\n\n\nNeed a custom MIT App Inventor app?<\/strong> https:\/\/www.fiverr.com\/s\/0byd1gE<\/a><\/p>\n\n\n\n We can show animated gifs by using Webviewer as I showed in my Voice Assistant ChatGPT tutorial but how to show frame-by-frame animation in which we have different frames or costumes of the same image and using the frames, we want to show an animated sprite. I am using the word costumes as many of you must have done MIT Scratch before moving on to MIT App Inventor.<\/p>\n\n\n\n Let’s begin by first downloading the different costumes of a zombie for walking animation. <\/p>\n\n\n\n https:\/\/opengameart.org\/content\/mini-zombie<\/a><\/p>\n\n\n\n Download the zombie zip file. Open it up using any unzipping software. You will find the walk folder inside it. Rename all images in the correct order from 1-8. The first frame will be 1.png and so on.<\/p>\n\n\n\n Create a new project in MIT App Inventor. Call it AnimatedSprite.<\/p>\n\n\n\n Upload media i.e. the 8 png files. You can optionally upload a scary background.<\/p>\n\n\n\n Drag and drop a canvas onto screen1. Choose the background if you uploaded one as the canvas\u2019s background. Make height 80% and width fill parent. Drag and drop an image sprite from Drawing and Animation<\/strong> to the canvas. Make height 144 pixels and width 166 pixels. Choose 1.png as the picture. Also very important, uncheck rotates.<\/p>\n\n\n\n Drag and drop a horizontal layout. Make height 15% and width fill parent.<\/p>\n\n\n\n Drag a button onto the layout from User Interface<\/strong>. Rename to leftBtn. Make font bold and font size 20. Make background color black. Change text to “Left” and text color to white. Select the leftBtn and duplicate. You can duplicate components in the designer view of MIT App Inventor by pressing Command + C and Command V for MacOS or Ctrl + C and Ctrl + V for Windows. Rename duplicated button to rightBtn. Change the text to “Right”.<\/p>\n\n\n\n Drag and drop a clock from the Sensors<\/strong>. Uncheck timer always fires and timer enabled. And make the timer interval 41 milliseconds. I will explain why I have made this 41 later.<\/p>\n\n\n\n Go to the blocks section. Make a global variable for the frames count as we need to keep a count of how many frames we have shown. Use a maths block to make it 1 because we are always showing the 1.png<\/p>\n\n\n\n Next, make a procedure for starting the animation. <\/p>\n\n\n\n First, we make sure that our frame count is always reset to 1 at the beginning of the animation.<\/p>\n\n\n\n And our picture is also 1.png<\/p>\n\n\n\n Then, we set the speed to 2 pixels and interval to 41. This means that our sprite will move 2 pixels every 41 milliseconds.<\/p>\n\n\n\n Secondly, we enable the image sprite as this tells the image sprite to start using its speed and other properties to become animated. Now, what about our different costumes of zombie? We will enable our timer. And remember that it will run every 41 milliseconds as this is the timer interval that we set for our clock. The industry standard for animated films is 24 frames per second (fps).<\/p>\n\n\n\n 24 fps means 1 frame in 1\/24 seconds which if converted into milliseconds is 1 frame in 41 ms.<\/strong><\/p>\n\n\n\n So, we will change the frame of our image sprite every 41 ms. At the same time, it will move 2 pixels. So, we are achieving two things in those 41 ms: a change in costume and a movement of 2 pixels and this is how our zombie will be doing his clumsy walk.<\/p>\n\n\n\n In our timer event, we will check if we have shown all frames or not. We will update the frame counter and show the next frame by doing a join with frame count to make the image file name for the next frame to be shown.<\/p>\n\n\n\n If the frame count is not less than 8 i.e. it must be now 8. This means that we have shown all 8 frames and we should stop changing costumes and also stop our animation. So, disable the zombie image and disable the timer too.<\/p>\n\n\n\n Now, our right and left buttons will determine the direction of movement<\/p>\n\n\n\n So when the right button is clicked, we choose the heading as 0 and call our startAnimation procedure.<\/p>\n\n\n\n Duplicate, change to left btn click event. And change the heading to 180<\/strong>.<\/p>\n\n\n\n So we are done. I hope you have fun animating your sprites this way. This is very much needed while making games with a better user experience as game players would be more fascinated by a zombie actually doing that clumsy zombie walk instead of just sliding left and right. You just need different frames or costumes for your image and a clock sensor to shift between the different costumes.<\/p>\n\n\n\n Need help with your own project or want to customise this app further?<\/strong>
If you would rather focus on your idea than the implementation, I also offer professional MIT App Inventor development and consulting on Fiverr. Feel free to check out my gig.<\/p>\n\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/01\/image-45.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/01\/image-47.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/01\/image-48-1024x415.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/01\/image-46.png\")
<\/figure>\n\n\n\n
Whether you need a completely custom MIT App Inventor app, additional features, Firebase integration, APIs, AI, bug fixes, or one-to-one guidance, I would be happy to help. Check out my Fiverr gig<\/a> <\/strong>to discuss your project.<\/p>\n\n\n
![\"Fiverr](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2026\/07\/Business-1024x615.png\")
<\/a><\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2024\/12\/donate-button-1.png\")
<\/a><\/figure>\n<\/div>\n\n\n