Tutoriel – App Inventor : dessin

Le design

Étape 1 : Récupérer une image (Media)

Allez dans « media » (en bas à droite) et récupérez l’image (sur pixabay.fr) que vous voulez mettre en arrière-plan (pour nous, ce sera la fleur qui s’appelle img0.jpg).

 

Étape 2 : Paramétrer l’écran (Screen1)

Tout d’abord, occupons-nous des paramètres de l’écran, en allant dans la partie « Properties » tout àdroite.
Changez le titre de l’écran comme sur l’image :

Étape 3 : Ajouter une toile (Canvas)

Depuis la partie gauche « Palette/Drawing and Animation », ajouter une toile « Canvas » à votre
application. Dans la partie « BackgroundImage », ajoutez votre image. Dans la partie   «Properties », changez la taille de cette manière (Fill Parent permet de remplir l’écran jusqu’au bord) :

Étape 4 : Ajouter trois boutons cliquables (Button)

Depuis la partie gauche Palette/ User interface, ajouter trois boutons cliquables (Button). Lorsque l’utilisateur appuiera dessus, il pourra choisir la couleur de son dessin. Appelez les “rouge” “vert” et “bleu” et changez leur couleur (BackgroundColor) en rouge, vert ou bleu.
Le rendu doit correspondre à l’image ci-dessous:

Étape 5 : Ajouter un accéléromètre (AccelerometerSensor)

Depuis la partie gauche Palette, allez dans l’onglet sensors et importez le capteur de secousse
(AccelerometerSensor).
Votre application devrait ressembler à cela :

Les composantes de votre application :

La programmation

Nous allons maintenant programmer le dessin. Rendez-vous dans la partie Blocks. Si vous ne trouvez pas un des blocs utiles, n’hésitez pas à consulter l’annexe.

Étape 1 : Tracer des lignes

Nous allons créer le script qui permet de tracer des lignes, pour cela créez le bloc suivant:

Quand on passe le doigt sur la toile, le programme se souviendra de là d’où l’on est parti (via
(prevX,prevY)) et de là où l’on est arrivé (via (currentX, currentY) ). Ensuite, il suffit de tracer une ligne entre les points (prevX,prevY) et (currentX, currentY).

Étape 2 : Changer la couleur de la ligne tracée

Maintenant que l’on peut s’amuser à dessiner, il est temps de changer les couleurs. Pour cela, il faut créer les trois blocs suivants qui ne diffèrent que par leur couleur.

Quand on clique sur le bouton, la couleur change, rien de plus simple!

 

Étape 3 : Effacer quand on secoue l’appareil

A la manière d’un tableau magique, le contenu de notre toile s’effacera lorsque l’on secoue, faites ainsi :

Encore une fois c’est un jeu d’enfant : quand on secoue l’appareil, on nettoie (clear) l’écran.

Aller plus loin

Voici une liste (non exhaustive bien sûr) des améliorations possibles :

• Améliorer l’interface graphique.
• Pouvoir tracer des points, du texte
• Encore plus de couleurs !
• Tracer des formes géométriques (difficiles)
• Changer l’arrière-plan

Annexe