{"id":183,"date":"2014-10-21T14:00:22","date_gmt":"2014-10-21T21:00:22","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=183"},"modified":"2014-10-21T14:00:22","modified_gmt":"2014-10-21T21:00:22","slug":"controlling-the-sprite-animation-with-your-finger-on-the-screen","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/10\/21\/controlling-the-sprite-animation-with-your-finger-on-the-screen\/","title":{"rendered":"Controlling the sprite animation with your finger on the screen"},"content":{"rendered":"

In the prior tutorial<\/a>, we created a sprite-based bouncing animation – which is surprisingly easy to do in App Inventor.<\/p>\n

But how might we make the animation interactive? Such as touching the bouncing object with a finger and flinging it (throwing it) off in another direction? In other words, as the object travels around the screen, we would like to touch it with our finger and then “drag” the object off in a new direction.<\/p>\n

To implement this, just handle the\u00a0Image Sprite’s “Flung” event, like this:<\/p>\n

\"ImageSprite-Flung\"<\/a><\/p>\n

 <\/p>\n

App Inventor (and the Android OS) handle the details of sensing our finger on the screen and translating that into some values we can use in our app.<\/p>\n

When the “Flung<\/em>” event occurs, App Inventor passes along several values – including the (x,y<\/em>) coordinate values at the time we touch the object, the speed<\/em> and heading<\/em> in which we’ve dragged the object with our finger, and the x and y velocity. \u00a0When this event is detected, our program sets the sprite’s current heading and speed to the values determined by our finger drag across the screen.<\/p>\n

Click on the “speed<\/em>” and “heading<\/em>” parameters in the Flung<\/em> event to find the “get heading” and “get speed” values.<\/p>\n

I multiplied the\u00a0speed parameter by 3 as the values returned by Flung<\/em> were small and resulted in slow movement of the sprite. You can set this value to a smaller or larger value based on your preference.<\/p>\n

Here’s the app screen, when in use:<\/p>\n

\"Screenshot_2014-10-20-15-53-14\"<\/a><\/p>\n

 <\/p>\n

As the sprite moves across the screen, touch it with your finger and “fling” it off in a new direction. (You may have to experiment for a bit in terms of how you do your “flings”).<\/p>\n

Stopping the Sprite When Touched<\/strong><\/p>\n

If the sprite is moving quickly, it moves out from under your finger before you can take action. To fix this, we sense the finger touching the sprite and stop the sprite while it is being touched.<\/p>\n

We implement the “TouchDown<\/em>” event for ImageSprite1<\/em>. The moment our finger touches the sprite, the\u00a0sprite is\u00a0stopped by setting its Speed<\/em> property to zero. Now we can casually “fling” the sprite in a new direction. \u00a0When we stop touching the sprite, the “TouchUp<\/em>” event occurs – here we restore the original speed so that the sprite resumes moving. Of course, the “Flung<\/em>” event occurs next and sets a new speed for the sprite based on our finger movement.<\/p>\n

Update<\/strong>: Delete – do not use – the .Touchup<\/em> block, shown below. It is not needed. Instead, when you lift your finger up as part of a “flung” operation, the flung event handler will set the sprite’s speed proportional to your finger movement. Thus, it is not necessary to restore the saved speed value.<\/p>\n

\"ImageSprite-Touch\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

In the prior tutorial, we created a sprite-based bouncing animation – which is surprisingly easy to do in App Inventor. But how might we make the animation interactive? Such as touching the bouncing object with a finger and flinging it (throwing it) off in another direction? In other words, as the object travels around the … Continue reading Controlling the sprite animation with your finger on the screen<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-183","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}