Fiche Appinventor : comment animer un personnage ?

Principe

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

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 commence un nouveau projet

Je clique sur le bouton Commencer un nouveau projet

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

Je choisis les différentes images

Voici les deux images que je vais utiliser :

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

Clique-droit sur l'image et enregistre-là sur ton ordinateur pour t'en servir ensuite.

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

Clique-droit sur l'image et enregistre-là sur ton ordinateur pour t'en servir ensuite.
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 crée la scène du tir à l'arc

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 ne sais comment faire !

Je ne sais comment faire ! Regarde ce document Comment créer l'écran du jeu
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 :

J'anime Annie

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 :

Je teste

Et maintenant je teste ... avec l'émulateur Android

Les fiches Appinventor ...

Je reviens à la liste des Fiches Appinventor.