Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 82 - CodePilot V5.0 C6
P. 82

    BRIDGE BACK                                                                                                               CANVAS RESPONSIVENESS WITH UI COMPONENTS

                       1.  Have you seen someone touch their phone screen to open a game, take a photo or play music?                           In MIT App Inventor, the Canvas can work with buttons, labels and text boxes to create interactive
                          What do you think happens when they touch the screen?                                                                 apps that respond to user actions in real time.
                       2.  Identify the mobile apps shown below:                                                                                Examples:

                                                                                                                                                     Buttons: Change something on the Canvas, like colour or position, when clicked.
                          (a)                      (b)                    (c)                     (d)
                                                                                                                                                     Labels: Display messages based on Canvas events, like a touch in a specific area.
                                                                                                                                                     Text Boxes: Enables inserting text typed by the user.

                      MIT App Inventor is a free online tool that lets you create your own mobile apps for Android                                RAPID RECALL                            Tick ( ) if you know this.
                      devices. Instead of writing long codes, you use colourful blocks that fit together like a puzzle. It’s
                      fun, easy to use and helps you turn your ideas into real working apps.                                                         1.  The Click event is triggered when the user taps on an element.

                             TOUCH EVENTS                                                                                                            2.  Buttons are used to change something on the Canvas.

                      Touch  events let  apps  respond  to  screen  interactions  like  taps, swipes  or touches,  enabling
                      interactive elements such as buttons, drawings and gestures, making apps engaging and fun.

                      TYPES OF TOUCH EVENTS                                                                                                            CREATING AN APP USING TOUCH EVENTS

                      Some of the touch events that help apps respond to how users interact with the screen are:
                                                                                                                                                The Magic_Pad app lets you draw with your finger, change colours and reset the screen like a
                          Touch Down: This event happens when the user first touches the screen or an element, starting                         digital drawing book. It helps young learners practice drawing, handwriting and creativity while
                         an action like drawing or detecting the touch.                                                                         improving hand control in a safe, educational way.
                          Touch Up: This event occurs when the user lifts their finger, ending or stopping the action.
                                                                                                                                                To create the Magic_Pad app, follow these steps:
                          Click: This event is triggered when the user taps on an element, performing actions like opening

                         a screen or changing elements.                                                                                          Step  1    Create new project in the MIT App Inventor.
                          Touch Move: This event occurs when the user moves their finger on the screen, used to track                            Step  2      Change  the  name  of the  screen to  Magic_Pad in the  Title textbox,  adjust
                         actions like dragging or drawing.                                                                                                  AlignHorizontal to Center:3 and AlignVertical to Top:1 in the Properties pane.

                                                                                                                                                 Step  3    Click on the Layout component.
                             DRAWING AND ANIMATION                                                                                               Step  4     Drag and drop HorizontalArrangement into the phone screen.

                      Drawing and Animation tools let you create apps for drawing and moving objects on the screen.

                      Some of the main tools that you will use are:
                          Canvas: It is like a blank paper in your app where you can draw with fingers or code and
                         detect touch events like tap, drag and swipe for interactive visuals.

                          Ball: This is a round object that you can add to the Canvas. You can make it move, bounce or
                         roll across the screen. It’s great for games like bouncing balls or ping pong.
                          ImageSprite: This lets you use pictures, like a cartoon character or a car and make them move
                         around the Canvas. You can make them go left, right, jump or even spin.

                       80
                            CodePilot (V5.0)-VI

| 77 78 79 80 81 82 83 84 85 86 87 |