Créez une animation sans programmer

Pas la peine de connaître un langage de programmation pour créer une petite animation ou même un petit jeu. Pour cela, utilisez Scratch qui, avec une interface graphique simple, vous aide à créer votre animation sans avoir à taper de lignes de code. En effet, les actions prédéfinies (faire avancer un objet ou émettre un son lorsqu'on clique sur un bouton) sont présentées sous la forme de briques que vous emboîtez ensemble pour former une scène très réaliste. Néanmoins, Scratch permet de réaliser aussi de vrais programmes.

Nous prendrons ici l'exemple d'un fantôme qui rigole et qui poursuit une femme qui crie dès qu'il la touche.

Etape 1 : Téléchargez et installez le logiciel

1 - Téléchargez Scratch, en tapant l'adresse suivante : http://scratch.mit.edu/files/WinScratch.zip dans votre navigateur Internet, et enregistrez le fichier WinScratch.zip sur le bureau de Windows.

2 - Décompressez ensuite le fichier en cliquant avec le bouton droit de la souris sur son nom, puis sur Extraire tout.

Dans la fenêtre affichée, cliquez sur les boutons Suivant et Parcourir. Puis, cliquez sur le dossier Program Files dans C:\ et cliquez successivement sur les boutons OK, Suivant et Terminer.

3 - Ouvrez le dossier Scratch qui s'est créé dans C:\ Program Files. Pour faciliter l'ouverture de Scratch, créez un raccourci sur le bureau en cliquant avec le bouton droit de la souris sur le fichier permettant de lancer Scratch :

Puis, dans le menu contextuel qui se déroule, cliquez sur les options Envoyer vers et Bureau (créer un raccourci).

Maintenant à partir du bureau, double-cliquez sur le raccourci de Scratch pour l'ouvrir :

4 - Modifiez la langue du logiciel, car il ne s'ouvre pas en français. Pour cela, cliquez en haut de la fenêtre sur le bouton Language :

Puis, dans la liste qui se déroule, cliquez sur Français :

Remarque : Scratch n'est pas totalement francisé. Il le sera au cours des prochaines versions.

Etape 2 : Intégrez des objets

La fenêtre principale de Scratch est divisée en plusieurs parties (voir l'iIlustration 1 ci-dessus) :

à gauche vous avez la zone Palette des briques contenant toutes les actions que vous pouvez utiliser pour programmer l'animation :

au centre, la zone Scripts dans laquelle vous allez glisser les briques de façon à créer le programme par rapport à un objet ;

en haut, à droite, la zone Scène vous donne un aperçu de votre animation ;

en bas, à droite, la zone Liste des objets vous permet de gérer les objets insérés dans votre animation et d'atteindre les scripts qui leur sont liés.

Pour commencer, choisissez les objets à animer et un arrière-plan.

Par défaut, Scratch propose déjà un objet dans la zone Liste des objets : un chat

Voici comment ajouter et gérer les objets (suppression, disposition dans la scène, direction, modification de la taille).

Ajoutez un objet

1 - Dans la zone Liste des objets, cliquez sur le bouton Choose new sprite from file :

2 - Dans la fenêtre affichée, le logiciel propose, dans le dossier Costumes, des sous-dossiers contenant différents types d'objets.

Pour ajouter, par exemple une femme, double-cliquez sur le dossier People

puis sur l'objet nommé princess1

Il apparaît dans la zone Liste des objets :

3 Par défaut, le logiciel nomme l'objet Sprite2. Pour le repérer plus rapidement, renommez-le. Pour cela, cliquez dans la zone Scripts sur son nom

puis tapez le nouveau nom, par exemple Femme, et appuyez sur la touche Entrée du clavier :

Le nouveau nom apparaît également dans la zone Liste des objets.

4 - En répétant les points précédents, ajoutez un objet représentant un fantôme qui se trouve dans le sous-dossier Fantasy et intitulé ghost1. Puis renommez l'objet Fantôme.

Dans la zone Liste des objets, vous obtenez ceci :

Remarque : pour retourner au dossier Costumes et afficher le sous-dossier Fantasy, cliquez en haut à gauche de la fenêtre sur le bouton

Déplacez un objet

Lorsque vous insérez des objets, ils sont placés au fur et à mesure au centre de la zone Scène, les uns sur les autres :

Pour modifier leur position, cliquez sur le bouton

Puis placez le pointeur de la souris sur le premier objet, ici Fantôme, et effectuez un cliquer-glisser vers l'endroit souhaité, ici en haut de la scène. Répétez cette manipulation pour déplacer la femme en bas de la scène (voir l'illustration 1).

Supprimez un objet

Si un objet n'est plus utilisé, supprimez-le de la liste, par exemple le chat proposé par défaut par le logiciel. Cliquez du bouton droit de la souris dans la zone Liste des objets, puis cliquez sur l'objet nommé Sprite1 (le chat). Dans le sous-menu qui se déroule, cliquez sur l'option Delete

Attention : si vous aviez un script lié à cet objet, il est également supprimé.

Changez la taille

Si un objet est trop petit ou trop grand par rapport à un autre, modifiez sa taille.

Pour cela, cliquez en haut de la zone Scène sur le bouton Grow sprite pour l'agrandir

ou sur le bouton Shrink sprite pour le diminuer

Selon votre choix, le pointeur prend la forme du signe indiqué sur le bouton. Puis, pour modifier sa taille, placez le pointeur sur l'objet et cliquez dessus dans la zone Scène autant que nécessaire.

Ici, diminuez la taille du fantôme et augmentez un peu celle de la femme.

Ajoutez un décor

Par défaut, les objets sont présentés sur un fond blanc dans la scène. Afin d'égayer l'animation et/ou de la rendre plus réaliste, ajoutez un décor de fond.

1 - Cliquez dans la zone Liste des objets qui se trouve sur Stage

2 - En haut de la zone Scripts, cliquez sur l'onglet Backgrounds

Puis, dans la zone New background, cliquez sur le bouton Import

3 - Les arrière-plans (backgrounds) sont classés par thèmes dans le dossier Backgrounds.

Dans notre exemple, double-cliquez sur le thème général Outdoors, puis sur l'arrière-plan nommé night-city

Le décor apparaît automatiquement dans la zone Scène (voir l'illustration 1).

Etape 3 : Animez un objet

Pour animer un objet, vous devez lier des briques (des actions) les unes dans les autres dans la zone Scripts. Ces briques sont accessibles dans la zone Palette des briques. Pour reconnaître rapidement à quelle catégorie une brique appartient, elle est rangée dans des thèmes colorisés : bleu pour les actions de Mouvement, violet pour les actions modifiant l'Apparence, etc.

Pour animer un objet, cliquez dans la zone Liste des objets sur son nom, ici sur Fantôme, puis, dans la zone Scripts, cliquez sur l'onglet Scripts

Voici comment manipuler les briques en utilisant un exemple simple : faire avancer le fantôme de cinq pas, tout en le faisant rire quand vous appuyez sur le drapeau vert en haut à droite de la zone Scène.

Ajoutez une brique

Cliquez en haut de la zone Palette de briques, et cliquez sur la catégorie Contrôle

Puis, dans la liste des actions qui s'affiche dans cette même zone, faites glisser la brique Quand “ le drapeau vert est ” pressé

dans la zone Scripts.

Liez une brique à une autre

1 - Liez une brique d'action à une autre en cliquant par exemple dans la catégorie Mouvement, puis glissez la brique bouger de sous la première brique que vous avez placée dans la zone Scripts

Les deux éléments s'imbriquent l'un dans l'autre :

Maintenant, indiquez le nombre de pas que le fantôme doit faire pour avancer. Pour cela, double-cliquez sur la valeur 10 dans la brique bouger de et tapez 5, puis appuyez sur la touche Entrée de votre clavier.

Pour vérifier si le mouvement fonctionne, double-cliquez sur la brique : le fantôme avance.

2 - De la même manière que dans le point précédent, ajoutez la brique qui va permettre de faire rire le fantôme. Pour cela, liez la brique jouer son pop qui se trouve dans la catégorie Sons à la brique bouger de 5 pas :

Puis modifiez le son proposé en cliquant sur l'onglet Sounds dans la zone Scripts, puis en cliquant sur Import. Recherchez le son désiré dans l'une des catégories proposées, ici dans Human, et double-cliquez sur celui appelé Laugh-male2.

Cliquez sur l'onglet Script et, dans la brique jouer son, cliquez sur pop, puis sur

Désolidarisez les briques

Si vous voulez séparer des briques liées, par exemple la brique Quand le drapeau vert est pressé d'avec bouger de 5 pas, placez le pointeur sur celle du dessous, ici bouger de 5 pas, et effectuez un cliquer-glisser vers le bas :

Supprimez une brique

Si vous avez placé une brique par erreur dans la zone Scripts, placez le pointeur dessus et effectuez un cliquer-glisser vers la zone Palette des briques.

Vérifiez l'animation

Pour vérifier si toute l'animation fonctionne, cliquez en haut à droite de la zone Scène sur le bouton

Maintenant que vous savez faire des scripts, créez ceux proposés dans les illustrations 2 et 3 de cette page :
pour le fantôme (illustration 2) : il poursuit indéfiniment la femme en disant Bouh! et, dès qu'il la rencontre, il rit.
pour la princesse (illustration 3) : elle marche de long en large indéfiniment, et crie (son Scream-female dans la catégorie Human) dès qu'elle rencontre le fantôme.

Remarque : pour retrouver la catégorie des briques utilisées dans les scripts proposés, référez-vous à leurs couleurs.

Etape 4 : Publiez l'animation sur Internet

Vous pouvez montrer l'animation à vos amis en la publiant sur le site du logiciel.

1 - Sauvegardez l'animation en cliquant en haut de la fenêtre sur le bouton

Dans la fenêtre affichée, Scratch propose de l'enregistrer dans le dossier Projects. Gardez cet emplacement, puis tapez le nom du fichier dans la zone New Filename, ici Rencontre avec un fantôme et cliquez sur OK.

2 - Pour publier cette animation, cliquez sur le bouton Share!

Si vous avez déjà un compte sur le site de Scratch, passez au point 3, sinon inscrivez-vous en cliquant sur le lien Create account

Cliquez en haut de la page Web sur le lien Signup

Remplissez le formulaire proposé avec un pseudo, un mot de passe, etc. (Username, Password…).

Validez le formulaire en cliquant sur le bouton Sign up, puis retournez dans la fenêtre que vous avez ouverte dans le point 2.

Remarque : vous pourrez ainsi, par la suite, ouvrir votre compte sur ce site et gérer toutes vos animations en les rangeant dans des catégories sur le site.

3 - Tapez votre pseudo et votre mot de passe dans les zones Login name et Password, ainsi que le nom de votre projet et un commentaire. Puis cliquez sur OK. Le téléchargement de votre animation vers le site peut prendre quelques minutes. Pour finir, un message vous indique que votre animation est disponible sur le site http://scratch.mit.edu Cliquez sur OK.

Remarque : si, au moment du téléchargement vers le site du logiciel, un message vous indique qu'il vous faut télécharger le composant Java, acceptez, sinon cela ne fonctionnera pas, puis suivez les instructions. L'animation est téléchargée une fois le composant demandé installé.

4 - A partir d'un navigateur, accédez au site du logiciel et, dans la partie New Project, vous pouvez voir votre animation en cliquant dessus (voir l'illustration 4)