====== 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 [[http://ai2.appinventor.mit.edu/|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.
{{  :icn:appinventor_04.png |}}
===== 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**
{{  :icn:ficheanimation_00.png  |}}
===== Je choisis les différentes images =====
 Voici les deux images que je vais utiliser : 
  * Annie va lancer une flèche (fichier **archer.png**) {{ :icn:archer.png  |}}
<WRAP center round tip >
**Clique-droit** sur l'image et **enregistre-là** sur ton ordinateur pour t'en servir ensuite.
</WRAP>

  * Annie après avoir lancé une flèche (fichier **archer_2.png**) {{ :icn:archer_2.png |}}
<WRAP center round tip >
**Clique-droit** sur l'image et **enregistre-là** sur ton ordinateur pour t'en servir ensuite.
</WRAP>
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 ;
{{ :icn:ficheanimation_01.png |}}
  * après avoir charger les deux fichiers, ils sont disponibles dans le dossier **Média** :
{{ :icn:ficheanimation_02.png |}}


===== 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 ! ====

<WRAP center round info >
Je ne sais comment faire ! Regarde ce document [[icn:app_taupe_aide|Comment créer l'écran du jeu]]
</WRAP>


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 :
{{ :icn:ficheanimation_03.png |}}

Je dois obtenir : 
{{ :icn:ficheanimation_04.png |}}

===== 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 :
{{ :icn:appinventormenu_01.png |}}
  * Je sélectionne à gauche, dans la partie blocs le **composant Annie** :
{{ :icn:ficheanimation_05.png |}}

 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 :
{{ :icn:ficheanimation_06.png |}}


  * Je sélectionne à nouveau à gauche, dans la partie blocs le **composant Annie**;
  * J'ajoute l'action **mettre Annie.Image à** pour obtenir :
{{ :icn:ficheanimation_08.png |}}

===== Je teste =====
Et maintenant je teste ... avec l'émulateur Android
{{ :icn:aistarter_07.png |}}




==== Les fiches Appinventor ... ====
<WRAP center round info >
[[icn:app2fiches|Je reviens à la liste des Fiches Appinventor.]] 
</WRAP>