TechnoApps

Module 6
Adding Animation to Image
Sprites
Grade 10

DISCLAIMER
The images and works found on this material may include content(s) that is/are copied or sourced from third parties. All intellectual property rights, including copyrights, trademarks, and other
proprietary rights, in such content remain the property of their respective owners.

We do not claim ownership of or responsibility for any copyrighted material that is not our own. The inclusion of such content is intended for informational or illustrative purposes only and does not imply
endorsement or affiliation with the original creators or copyright holders.

© 2024. TechnoKids Philippines.

TechnoApps / Module 6
Adding Animation to Image Sprites

Overview

Target Skills
By the end of this module, you should be able to:
1. Add a Clock component and a Timer event handler.
2. Apply the MoveTo block.
3. Apply the CollidedWith block.
4. Apply Logic blocks.

Materials Needed
For this module, you will need the following:
● computer unit or mobile device with internet connection
● browser
● App Inventor 2

TechnoKids Philippines | 2
TechnoApps / Module 6
Adding Animation to Image Sprites

Lecture
Applying movement to a sprite can be done using a Clock component and some blocks. Knowing this
skill is essential especially if you are planning to build a game application.

Adding a Clock Component

The Clock component is a non-visible component that provides various methods in manipulating
and expressing time. You can set its interval using the TimerInterval property, which denotes a
duration in milliseconds.

Another significant use of the Clock component is that it can serve as a

timer. It is very useful in making an object move. It has one event handler
called Timer, which is signaled when the timer triggers.

You can add a Clock component to your app

through the App Inventor Designer page
under the Sensors palette.

When you drag it to the screen,

the component will appear under
the Non-visible components section.

TechnoKids Philippines | 3
TechnoApps / Module 6
Adding Animation to Image Sprites

Timer Event Handler

You can get the Timer event handler through the App Inventor Blocks Editor, under Blocks section
► <name of clock component> ► Timer event handler.

Applying the MoveTo Block

The block in purple is the MoveTo method. All sprites have a MoveTo block. Using the image sprite’s
MoveTo method allows the sprite to change position using input values x and y.

Applying the CollidedWith Block

The CollidedWith block runs commands when two animated components hit each other. The
keyword other represents the other image sprites involved in the collision.

TechnoKids Philippines | 4
TechnoApps / Module 6
Adding Animation to Image Sprites

Applying Logic Blocks

Logic blocks are blocks that check whether a logic is true or false, and works with Control blocks to
identify which control flow should be executed next.

There are seven Logic blocks that can affect the outcome of your program:

● The true and false blocks represent constant values of true or false. These can be used to set
a Boolean property of a value such as [Link] = true, or can be used as a condition such
as if [Link] = false.
● The and and or blocks test whether the set of logical conditions are true. For example, given
|x|+1 number of conditions, the and block returns true if all conditions are true; should any 1
condition be false, the and block returns false. The or block returns false if and only if all
conditions are false; should there be at least 1 condition that is true, the or block returns
true. Refer to the table below:

● The equal and not equal blocks test whether arguments are equal or not to each other. The
equal block returns true if the arguments are equal to one another such as 3 = 3. The not
equal block returns true if the arguments are not equal to one another such as 3 = 5.
● The not block negates the returned input of the other Logic blocks. For example, should an
and block return true, attaching the not block to the and block will make the returned input
false before passing it to the next sequence.

TechnoKids Philippines | 5
TechnoApps / Module 6
Adding Animation to Image Sprites

Activity
Set Up the Challenge
Before starting the activity, make sure to download the resources needed for this activity:
● [Link]

1. Go to Projects ► My projects and open your DeliciousProposal project.

2. Save your project in App Inventor 2 as another project. Go to Projects ► Save project as…
and name the project “TheChallenge”.

3. Drag five additional ImageSprites to your canvas and place them on the bottom.

TechnoKids Philippines | 6
TechnoApps / Module 6
Adding Animation to Image Sprites

4. Rename your additional image sprites to “BugImgSpr1” to “BugImgSpr5”.

5. Upload [Link] to the Media section.

6. Change the picture of your image sprites to [Link] and change the headings and Xs of
each bug to the following:
● Bug1:
○ Heading: 330; X: 5
● Bug2:
○ Heading: 345; X: 70
● Bug3:
○ Heading: 0; X: 145
● Bug4:
○ Heading: 15; X: 225
● Bug5:
○ Heading: 25; X: 290

7. Drag a Clock component from the User Interface palette and rename it to “AppClock”.
Change the TimeInterval to 500.

TechnoKids Philippines | 7
TechnoApps / Module 6
Adding Animation to Image Sprites

8. Drag five more Clocks components and rename them to “BugClock1” to “BugClock5”.

9. Switch to the Blocks Editor. Click on CakeImgSpr in the Blocks palette and drag when
[Link] other do to the empty space on the right. Then, click on the
BugClock1 palette and drag set [Link] inside the CakeImgSpr Control
block.

10. Click on Logic. Drag a false Logic block and place it after the setter block of AppClock. Then,
repeat steps 9 and 10 for the rest of the Clock components.

11. Click on the BugClock1 palette. Drag the Control block when [Link] do and place
it on the space to the right. Then, click on the BugImgSpr1 palette and place the call
[Link] block inside the BugClock1 Control block.

TechnoKids Philippines | 8
TechnoApps / Module 6
Adding Animation to Image Sprites

12. Click on Math. Drag an addition block and place it to the right of x, then drag a basic
number block and put it on the second block space. Change the basic number block’s value
to 3. Then, click on Math again. Drag a subtraction block and place it on the right of y. Drag
a basic number block and put it on the second block space. Change the second basic
number block’s value to 5.

13. Click on BugImgSpr1. Drag BugImgSpr1.X and place it on the first block space of the
addition block. Then, drag BugImgSpr1.Y and place it on the first block space of the
subtraction block.

14. Repeat steps 12 to 13 for the remaining Clock components and their corresponding sprites.
Use the following screenshots to help you create your program.

TechnoKids Philippines | 9
TechnoApps / Module 6
Adding Animation to Image Sprites

15. Change the screen title to “Save the Cake”.

16. Run your application.

Review
Modified True or False: Write “True” on the space provided if the statement is true; otherwise,
identify the word/s to replace the underlined word/s and make the statement true. Write your
answer on the blank provided.

__________ 1. The Clock component can serve as a timer.

__________ 2. The event handler CollidedWith has the keyword other, which represents
the image sprite involved in the collision.

__________ 3. The Clock component is found under the Sensors palette.

__________ 4. The and Logic block checks if any sets of logical conditions are true.

__________ 5. The TimerInterval property contains a timer interval in seconds.

TechnoKids Philippines | 10