Animation with image1/Fr

From Ella
Jump to: navigation, search

Tuto nº2 : créer une animation avec insertion d'image(s)

(en cours de rédaction et organisation)

Nous allons, au long de ce tuto, vous apprendre à créer une animation comportant une ou plusieurs images avec Ella. Il est conseillé d'avoir préalablement lu le premier tuto de Kevlar présent à cette adresse : http://kevlar.voila.net/temp/tuto1.pdf. Avant tout, vous devez déterminer la taille de votre animation. Personnellement, pour ce tuto, je créerai une animation de 550*250. Démarrez Ella, si ce n'est pas déjà fait, et rendez-vous dans le menu 'Format → taille de la scène'. Un dialogue s'affiche : Saisissez comme valeurs largeur : 550, hauteur : 250 et laissez les marges inchangées. (image 2.1)


Tuto2.1.png


Si vous le désirez, vous pouvez maintenant modifier la couleur de fond de la scène, comme conseillé dans le premier tutoriel par kevlar, je vous conseille de choisir une couleur sombre. Rendez-vous dans le menu 'format>fond de la scène'. Un dialogue apparaît, avec lequel vous pouvez choisir la couleur de votre choix. (image 2.2)


Tuto.2.2.png


Sauvegardez maintenant votre travail : menu 'fichier>enregistrer sous' et choisissez comme nom "tuto2"

Maintenant, il s'agit de choisir la durée de votre animation. Celle-ci dépend du nombre total d'images de votre animation (film), et de la fréquence (images par seconde) de ce film. Exemple : si votre film fait 240 images et la fréquence est, comme au cinéma, de 24 images seconde, alors le clip durera : 240/24 = 10 secondes. Justement, ici, nous allons faire une animation qui va durer 20 secondes. Mais, comme il s'agit d'une animation destinée au Web, nous allons nous contenter d'une fréquence de 12 images/sec . Combien faut-il alors d'images au total ? 12*20 = 240 images. Si voulez une animation moins saccadée, choisissez une fréquence de 18 images seconde, ou si vous voulez vraiment un mouvement très fluide, utilisez 24 images secondes. Sachez seulement que Ella est limité à 1024 images, donc plus vous augmentez le nombre d'image seconde, moins l'animation pourra durer longtemps. Dons ce tutoriel, j'utiliserai une fréquence de 18 images/sec. Avec tout cela, nous allons attaquer les réglages.

Regardez en bas, à droite, sous la table de montage : vous voyez une zone nommée "fréquence". Saisissez alors la valeur 18, puis appuyez sur la touche <entrée>. (image 2.3)


Tuto2.3.png


Maintenant, nous allons agir directement sur la table de montage : regardez la bien, vous verrez qu'elle est graduée en secondes et en images. Vous devez remarquer un curseur vertical rouge : il vous indique votre position actuelle sur la table de montage. Faites défiler la table de montage jusqu'à voir apparaître la graduation 360. Cliquez sur cette graduation : le curseur rouge se déplace maintenant sur l'image 360 (image 2.4).


Tuto2.4.png


Appuyez maintenant sur la touche <f5>, ou effectuez un clic droit → ajouter des images jusqu'au curseur (add frames to the cursor): Ella crée pour vous 240 images, qui se distinguent facilement ; les cases changent de couleur, et prennent un aspect doré (entourées en rouge sur l'image) .(image 2.5)


Tuto2.5.png


Sauvegardez votre travail. Inutile de changer le nom qui est déjà tuto2. Choisissez simplement le menu 'fichier → enregistrer' ou cliquez en même temps sur les touches CTRL et S.

Dans ce tutoriel, j'utiliserai 4 calques différents : un calque pour le fond, un calque pour l'image 1, un calque pour l'image 2 et un calque pour le texte. Voici ce que ça me donne (image 2.6)


Tuto2.6.png


Si la notion de calque vous est inconnue, reportez vous au premier tutoriel de Kevlar. Sauvegardez votre travail. Nous allons maintenant faire un peu de théorie : un logiciel d'animation comme Ella ne fonctionne pas comme un programme de génération de dessins animés : il est inutile de dessiner toutes les images pour calculer une animation. C'est Ella qui s'en charge. Pour cela, elle a besoin de points de repère, que l'on appelle des "images-clés". C'est en arrivant sur ces images-clés qu'Ella va calculer les animations et simuler le mouvement, par exemple. Rendez vous sur le calque nommé "objets" et sur la première image, et faites un clic- souris (clic-gauche) dans la case #1 de la ligne "objets". Votre table de montage doit afficher ceci : (image 2.7)


Tuto2.7.png


Maintenant, nous allons importer des images dans la bibliothèque, afin de pouvoir les utiliser par la suite (dans la version actuelle d'Ella, il n'est pas possible de redimensionner les images. Pensez donc à les redimensionner avec un éditeur comme The Gimp avant de les importer) . Pour cela, allez sur le menu « Fichier → Importer dans la bibliothèque → Image bitmap », et sélectionnez une des image à importer. Le principe est le même si vous voulez importer d'autres images. Les images s'ajoutent automatiquement dans l'onglet médiathèque. Vous devez donc obtenir quelque chose comme ça. (image 2.8)


Tuto2.8.png


Pour les plus observateurs d'entre vous, vous aurez remarqué que ce n'est pas deux fois le même icône. En effet, j'ai importer une image bitmap et un dessin vectoriel. Sauvegardez votre bibliothèque (image 2.9)


Tuto2.9.png


Nous allons commencer à travailler sur l'animation à proprement parler. Tout d'abord, les étapes qui suivent peuvent être effectuées dans l'ordre voulu. Cependant, pour une question de simplicité et de logique, je commence toujours par travailler sur la première image-clé. Je vais donc commencer par créer un texte. Si vous ne savez pas comment faire, allez voir le premier tutoriel de Kevlar. Vous pouvez utiliser les options d'alignement disponibles dans le menu « Objets → Aligner les items » (image 2.10)


Tuto2.10.png


Vous pouvez aussi modifier la couleur du texte en faisant clic droit → Couleur et opacité, ou en sélectionnant le texte par un simple clic, et en cliquant sur l'outil palette de peinture, ou ecnore en modifiant les valeurs dans l'onglet « styles de sélection !Avec les deux premières méthodes, voici la fenêtre que vous obtiendrez. (image 2.11)


Tuto2.11.png


Voici le résultat final après les modifications apportées. (image 2.12)


Tuto2.12.png


Pour ce tutoriel, je ferais faire apparaître le texte au bout de 3 secondes. Si vous ne savez pas comment faire, lisez la fin du premier tutoriel de Kevlar. Nous allons maintenant insérer des images à partir de la 3ème seconde de l'animation. Pour cela, insérez des images-clés sur le ou les calques qui vont contenir les images. Vous pouvez maintenant aller dans l'onglet bibliothèque et déplacer les images que vous voulez sur l'éditeur. Je vous conseille de ne mettre qu'une image par calque. Elles seront transparentes et apparaitrons progressivement jusqu'à la 5ème seconde. Pour faire cet effet, il faut s'y prendre de la même manière que pour les textes.