I am so glad that so many were waiting for the next tune of this chain. But I could not post due to various busyness including examination. But I was with you. Anyway, sorry for posting late.
In the last post we started using App Inventor and created a project called Hello Purr. We will now work on that project and create an app that will have a picture of a cat on the screen. When someone clicks on the picture of that cat, it will sound like Miao.
We need two things to make this app. A picture of a cat and a meow sound. Download these from the link below-
Select components to design the app:
Now you see on the left of the Design window, below the Palette, there are all the necessary components for the design of your app. Components are the basic elements to use for your app design. For example: Level component is to show any text on the screen. Button (1) is the component that if you click on an app will do a special job.
More components perform special functions. For example, a component named Canvas (2) can hold images or animations.
Accelerometer (motion) is a sensor that can sense the movement of your phone and send input to the system from it.
If you want to use a component, you need to drag it into the Viewer (1) section (which is located in the middle of the Design window).
See the components that you have taken and are working on the Components (2) Palette on the right.
Look at the far right to see what the output of each component will look like, that is, what it will look like or what its initial value will be. There are Properties (3) Palette. To change the properties of a component, you must first select it from the Components Palette.
Let's select Components and set Properties:
Now we want our HelloPurr app to have a button whose component will be the image that was downloaded a little earlier.
*** Step 1: Drag the Button component from Basic Palette to Screen1 (1). Now click on "none ..." below the Image in the Properties pane and click on "Add ..." (2). Now show the location of the picture of the cat that was downloaded a little earlier (3).
*** Step 2: Delete the text 'Text for Button1' in the Text Property. What does your design look like below-
*** Step 3: Now drag and drop the Level Component from Basic Palette to Viewer (1). Place it at the bottom of the picture. It can be seen as Level1 in your component.
Now go to the Properties Pane and make the text of Level1 'pet the kitty' (2). You see, the text on the designer and on your device (phone or emulator) will change. Make Level1's FontSize 30 (3). Click on the box to change the Level1 BackgroundColor (4). Give it a color you like. Now change the TextColor of your Level1 (5). I made BackgroundColor blue and TextCoror yellow-
*** Step 4: Now open the Media drawer under the Palette and drag the Sound component to Screen1 (1). Whenever you drop it you will see it at the bottom of the Viewer as Non-visible components . Now click on 'Add ...' in the Media pane below the Components pane (2) and download and upload the meow.mp3 file to the project a little earlier (3). From the Properties pane, click on the Source's 'None ...'. Enter the meow.mp3 file as the sound of the Sound1 component (4).
With this, the work of our Design window is over. In the next step, we will do the programming of HelloPurr app with Block Editor. Until then everyone stay well. God bless you.
Post a Comment