Animer un personnage consiste à le montrer en action : courir, bouger, etc.

Le principe utilisé est le même que pour une vidéo ou un film au cinéma. Il s'agit d'utiliser une succession rapide d'images qui vont donner l'illusion que le personnage est vivant.

Cette fiche va te monter comment animer un personnage qui lance une flèche en utilisant deux images.

Je me connecte au site AppInventor avec le compte de mon équipe.

Je personnalise le site :

• Le site AppInventor a une interface en anglais.
• tu peux avoir une interface en français en sélectionnant cette langue dans la barre de menu.

• Je clique sur le bouton Commencer un nouveau projet
• Je donne un nom au projet et clique sur le bouton OK

Voici les deux images que je vais utiliser :

• Annie va lancer une flèche (fichier archer.png)

• Annie après avoir lancé une flèche (fichier archer_2.png)

Je vais déposer ces deux images dans la partie média de mon projet :

• A droite, dans la partie Média, je clique sur le bouton Charger fichier … pour charger un par un les deux fichiers d'Annie ;

• après avoir charger les deux fichiers, ils sont disponibles dans le dossier Média :

Je dessine l'écran de mon App en ajoutant dans l'interface:

• un cadre appelé Cadre1 dans lequel va se trouver Annie ;
• un lutin appelé ImageLutin1 qui représente Annie ;

Je modifie les propriétés du Lutin pour donner à Annie l'image archer.png j'ai téléchargée dans la partie Média :

Je dois obtenir :

Maintenant je veux qu'Annie lance la flèche.

Je choisie pour cela les actions suivantes :

• je touche l'image d'Annie ;
• et dès que je ne la touche plus, elle lance la flèche.

Pour cela je vais utiliser les fonctions de création de blocs d'action.

• Dans la barre de menu du projet je clique sur le bouton Blocs :

• Je sélectionne à gauche, dans la partie blocs le composant Annie :

Dans l'interface apparaît une liste de ce que je peux demander à l'App de faire.

• Je choisis l'action quand Annie.Retiré que je dépose dans la zone de création des actions :

• Je sélectionne à nouveau à gauche, dans la partie blocs le composant Annie;
• J'ajoute l'action mettre Annie.Image à pour obtenir :

Et maintenant je teste … avec l'émulateur Android