App Inventor Chapter 17 Creating Animated Apps Chapter
![App Inventor Chapter 17 – Creating Animated Apps App Inventor Chapter 17 – Creating Animated Apps](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-1.jpg)
![Chapter 17 – Creating Animated Apps • From introduction: • This chapter discusses methods Chapter 17 – Creating Animated Apps • From introduction: • This chapter discusses methods](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-2.jpg)
![The illusion of animation • On all display devices animation is achieved by providing The illusion of animation • On all display devices animation is achieved by providing](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-3.jpg)
![App Inventor tools for animation • In App Inventor you will place ‘Ball’ and App Inventor tools for animation • In App Inventor you will place ‘Ball’ and](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-4.jpg)
![The Canvas coordinate system The Canvas coordinate system](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-5.jpg)
![Paint on Canvas with Draw. Line & Draw. Circle • Start with Canvas. Paint. Paint on Canvas with Draw. Line & Draw. Circle • Start with Canvas. Paint.](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-6.jpg)
![Ball and Image. Sprite components • Besides painting pixels you can define and use Ball and Image. Sprite components • Besides painting pixels you can define and use](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-7.jpg)
![Using Timers to animate components • This is a common way to do animation. Using Timers to animate components • This is a common way to do animation.](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-8.jpg)
![Creating Movement • Example (moves ball horizontally across screen): • Does the ball move Creating Movement • Example (moves ball horizontally across screen): • Does the ball move](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-9.jpg)
![What’s the difference? • Suppose we set a Timer. Interval of 1000 and a What’s the difference? • Suppose we set a Timer. Interval of 1000 and a](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-10.jpg)
![What does this block do? What does this block do?](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-11.jpg)
![Collision detection and Edge. Reached • App Inventor uses high-level ‘algorithms’ to figure out Collision detection and Edge. Reached • App Inventor uses high-level ‘algorithms’ to figure out](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-12.jpg)
![What do these blocks of code do? This change made to correct an error What do these blocks of code do? This change made to correct an error](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-13.jpg)
![Particular edges • In the example, if the ball encountered any edge, the code Particular edges • In the example, if the ball encountered any edge, the code](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-14.jpg)
![Collided. With and. . . Collided. With and. . .](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-15.jpg)
![. . . No. Longer. Colliding. With . . . No. Longer. Colliding. With](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-16.jpg)
![There may be a particular ‘Other’. . . This is a block that refers There may be a particular ‘Other’. . . This is a block that refers](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-17.jpg)
![Interactive Animation • One technique: use a button-click to switch Timer. Enabled ‘On’ and Interactive Animation • One technique: use a button-click to switch Timer. Enabled ‘On’ and](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-18.jpg)
![More sophisticated button behavior. . . More sophisticated button behavior. . .](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-19.jpg)
![Sprite animation without a clock timer (. Heading and. Speed) • Take a look Sprite animation without a clock timer (. Heading and. Speed) • Take a look](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-20.jpg)
![This code will control. Heading (How? ? ) This code will control. Heading (How? ? )](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-21.jpg)
- Slides: 21
![App Inventor Chapter 17 Creating Animated Apps App Inventor Chapter 17 – Creating Animated Apps](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-1.jpg)
App Inventor Chapter 17 – Creating Animated Apps
![Chapter 17 Creating Animated Apps From introduction This chapter discusses methods Chapter 17 – Creating Animated Apps • From introduction: • This chapter discusses methods](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-2.jpg)
Chapter 17 – Creating Animated Apps • From introduction: • This chapter discusses methods for creating apps with simple animations - objects that move. You’ll learn the basics of creating two -dimensional games with App Inventor and become comfortable with image sprites and handling events like two objects colliding.
![The illusion of animation On all display devices animation is achieved by providing The illusion of animation • On all display devices animation is achieved by providing](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-3.jpg)
The illusion of animation • On all display devices animation is achieved by providing a succession of still images or ‘frames’ with the ‘moving’ object(s) appearing in each frame slightly displaced from the previous frame. ‘Flipping’ through the images at a rate of about 12 fps or higher gives the illusion of the objects being animated. • Most current display devices present frames at 30 fps in the US (25 fps in Europe). Interesting factoid: your local movie theater goes at only 24 fps!
![App Inventor tools for animation In App Inventor you will place Ball and App Inventor tools for animation • In App Inventor you will place ‘Ball’ and](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-4.jpg)
App Inventor tools for animation • In App Inventor you will place ‘Ball’ and ‘Image. Sprite’ components in a ‘Canvas’ to achieve 2 -D animation • Start by adding a Canvas component to the Component Designer. Set its ‘Width’ to ‘Fill Parent’. Set ‘Height’ to something reasonable (leaving room at the bottom for other components) – say 300 pixels.
![The Canvas coordinate system The Canvas coordinate system](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-5.jpg)
The Canvas coordinate system
![Paint on Canvas with Draw Line Draw Circle Start with Canvas Paint Paint on Canvas with Draw. Line & Draw. Circle • Start with Canvas. Paint.](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-6.jpg)
Paint on Canvas with Draw. Line & Draw. Circle • Start with Canvas. Paint. Color to choose a color. Example: This colors a single pixel blue. Where on the screen does it do this? What controls the fact that is only one pixel?
![Ball and Image Sprite components Besides painting pixels you can define and use Ball and Image. Sprite components • Besides painting pixels you can define and use](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-7.jpg)
Ball and Image. Sprite components • Besides painting pixels you can define and use Ball and Image. Sprite components • Ball and Image. Sprite components can only ‘live’ somewhere on a Canvas component. • A ‘Ball’ is one particular kind of Image. Sprite. It is always round and you can only vary its size and color. Image. Sprites are based on actual JPGs or PNGs or GIFs.
![Using Timers to animate components This is a common way to do animation Using Timers to animate components • This is a common way to do animation.](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-8.jpg)
Using Timers to animate components • This is a common way to do animation. Later, we’ll see how you can use a component’s. Speed and. Heading methods to control animation. • In Component Designer, drag out a Clock component and set its Timer. Interval property. A Timer. Interval set to 1000 = 1 second; 500 = ½ a second, 100 = 1/10 th of a second, 10 = 1/100 th of a second, 1 = 1/1000 th of a second, or one millisecond. • Drag out a Clock. Timer event in the Blocks editor. Whatever actions specify inside the Clock. Time will be performed at whatever Timer. Interval you have set.
![Creating Movement Example moves ball horizontally across screen Does the ball move Creating Movement • Example (moves ball horizontally across screen): • Does the ball move](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-9.jpg)
Creating Movement • Example (moves ball horizontally across screen): • Does the ball move to the left or to the right? What two settings control how fast the ball moves? What if you wanted to move the ball vertically instead of horizontally?
![Whats the difference Suppose we set a Timer Interval of 1000 and a What’s the difference? • Suppose we set a Timer. Interval of 1000 and a](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-10.jpg)
What’s the difference? • Suppose we set a Timer. Interval of 1000 and a Move. To command of X+200 • Then we set a Timer. Interval of 100 and a Move. To command of X+20 • Which moves faster or slower? Which moves more smoothly?
![What does this block do What does this block do?](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-11.jpg)
What does this block do?
![Collision detection and Edge Reached App Inventor uses highlevel algorithms to figure out Collision detection and Edge. Reached • App Inventor uses high-level ‘algorithms’ to figure out](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-12.jpg)
Collision detection and Edge. Reached • App Inventor uses high-level ‘algorithms’ to figure out when two Image. Sprites might have collided with one another or when an Image. Sprite encounters the edge of the screen. • Good thing; otherwise you would have to come up with that logic yourself which ain’t easy to do!
![What do these blocks of code do This change made to correct an error What do these blocks of code do? This change made to correct an error](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-13.jpg)
What do these blocks of code do? This change made to correct an error in the book
![Particular edges In the example if the ball encountered any edge the code Particular edges • In the example, if the ball encountered any edge, the code](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-14.jpg)
Particular edges • In the example, if the ball encountered any edge, the code sends it back to (1, 1). There is a parameter that can distinguish among the edges – it takes the following values: • • North = 1 Northeast = 2 East = 3 Southeast = 4 South = -1 Southwest = -2 West = -3 Northwest = -4
![Collided With and Collided. With and. . .](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-15.jpg)
Collided. With and. . .
![No Longer Colliding With . . . No. Longer. Colliding. With](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-16.jpg)
. . . No. Longer. Colliding. With
![There may be a particular Other This is a block that refers There may be a particular ‘Other’. . . This is a block that refers](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-17.jpg)
There may be a particular ‘Other’. . . This is a block that refers to a particular component as a whole, rather than specific properties of a component
![Interactive Animation One technique use a buttonclick to switch Timer Enabled On and Interactive Animation • One technique: use a button-click to switch Timer. Enabled ‘On’ and](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-18.jpg)
Interactive Animation • One technique: use a button-click to switch Timer. Enabled ‘On’ and ‘Off’ • But this is just a ‘one-way’ switch. We need more sophisticated behavior. Take a look at this next slide. .
![More sophisticated button behavior More sophisticated button behavior. . .](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-19.jpg)
More sophisticated button behavior. . .
![Sprite animation without a clock timer Heading and Speed Take a look Sprite animation without a clock timer (. Heading and. Speed) • Take a look](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-20.jpg)
Sprite animation without a clock timer (. Heading and. Speed) • Take a look at this:
![This code will control Heading How This code will control. Heading (How? ? )](https://slidetodoc.com/presentation_image_h2/570b22a14236a5f22691d23ac67d9d49/image-21.jpg)
This code will control. Heading (How? ? )
Consumer apps vs enterprise apps
App inventor location sensor not working
App inventor gps
App inventor java bridge
Tim bernerslee
Appinventorr
No texting while driving app inventor
Mit app inventor push notifications
Nn basketball
App inventor lego mindstorm ev3
Air.app inventor
App inventor android studio
Mit app inventor windows
App inventor ai
App inventor location sensor
App inventor ocr
Accelerometer sensor mit app inventor
Mit app inventor while loop
Mit app inventor to android studio
Inventor
Mit app inventor run in background
Mit app inventor lesson plans