Finger Paint App

This app should be the 2nd or 3rd app you should attempt to create in App Inventor.  The focus of this app is to create a simple graphics app that will allow the user to draw an image using a range of colours and brush sizes on a specific area of a mobile devices screen.  Apps which are similar can be found in the links below;

* Example 1

* Example 2

* Example 3

The app you will create will a basic looking graphic app however it will require you to learn about collision detection and handling.  The focus here is to detect where a user touches a specific part of a touch screen and how the app  produces an appropriate outcome based upon X and Y coordinates.  The app will look similar to the following;

fingerpaint interface

The app will require you to make use of the following components and techniques;

* Canvas – A component which allows the user to interact with and based upon these interactions can perform actions such as drawing a circle or line

* Button- A component which is visible to the user and can be clicked to provoke an action to occur such as clearing the canvas of any drawing

 

STUDENT RESOURCES

Resource Name Description Resource Link
 Session 4 Evidence Sheet Pupil evidence sheet which focuses on developing the interface for the FingerPaint app which will include a range of buttons and a canvas component. word
 Session 5 Evidence Sheet Pupil evidence sheet which focuses on applying the blocks applied to the FingerPaint app and capturing the evidence of what each specific group of blocks will perform within the app.  word
Session 6 Evidence Sheet Pupil evidence sheet which focuses on testing the app within the emulator to ensure the interface and blocks have allowed an app to be developed that looks and functions as expected.  In addition there is also a section to expand the app and add additional functionality such as using a camera or saving the graphic to the device. word
Clear Button Image An image to be used to indicate to a user to clear the canvas of any drawing  image
Big Brush Button Image An image to be used to indicate to the user to increase the brush size  image
Little Brush Button Image An image to be used to indicate to the user to decrease the brush size image
Camera Button Image An image to be used to allow a user to take a picture in the app using the camera image
Save Button Image An image to be used to allow the user of the app to save the drawing to the mobile device image
FingerPaint App Interface Video Tutorial This video tutorial will talk you through the process of developing the FingerPaint app.  You will learn how to build the interface for a graphics app and focus on the components required  video
FingerPaint App Blocks Video Tutorial This video tutorial will talk you through adding blocks of instructions into your graphics app that will making it functional.  You will be shown how to allow the user to trigger a range of events and then perform actions based upon these events such as drawing lines, circles, clearing the canvas etc. video
FingerPaint App Testing Video Tutorial This video tutorial will talk through using the emulator to test the interface and blocks developed in your app to ensure it works as you intended. video