We had done of Stick man walking in Scratch platform with frame and costumes. You can view the project in our main web page – Learn Code. Well, we want to use this concept to apply to using for our Moile App. How can we do it in App Inventor? Let discuss on the steps.

Animate a Stick Man Walking

WALKING THUMBNAIL
WALKING THUMBNAIL

Since we have done the project in Scratch, I have easier task of downloading my costumes from Scratch. If you have done so, you can either work on your drawing in Scratch or other drawing tools (eg Piskel).

Animate Walk Designer

The following components are needed.

walking animate design
walking animate design
  • Add 1 canvas and 1 Image sprite. Upload the 6 costumes of animate walking images. Walking 3 or more left and right each.
  • Add 1 horizontalArrangement and 2 buttons. The buttons are for left and right button press. Rename buttons – leftbtn and rightbtn.
  • Add 2 clocks and disable the Timer Enabled. Set the clock interval 200 seconds.

Animate Walking Block

  • We will add 1 global variable imagecount. Initialize to 0.
  • Screen initalize set X to 231.
  • When rightbtn touch down, set Clock1 to timer enabled to True, set Clock1 to timer enabled to False.
  • When rightbtn touch up, set Clock1 to timer enabled to False.
  • Copy the rightbtn for leftbtn touch down and touch up. Clock1 timer enabled to False and set Clock2 to timer enabled to True. For touch up, set Clock2 to timer enabled to False.
  • When clock1 Tiner event, check the imagecount if less than 3, then set the photo to prefix walk + imagecount + .png.
  • this will pick up the rotating images and increase imagecount.
  • increase image sprite x to 10 to have it moving forward.
  • if greater than 3, then set imagecount to 0 and first image.
  • When clock2 Tiner event, check the imagecount if less than 6, then set the photo to prefix walk + imagecount + .png.
  • this will pick up the rotating images and increase imagecount.
  • Decrease image sprite x to 10 to have it moving backward.
walker-animate-demo
walker-animate-demo

Finally, let have fun playing our new animation and I will compare with my Scratch walking animation as well.

Take care and good luck.

 This free site is ad-supported. Learn more
​