Manuel d’utilisation d’Ella
Les éléments comportant des ***** ne sont pas encore bien intégrés dans l’application.
1 Introduction
1.1 Qu’est-ce qu’Ella
Ella (
Elegant Light Linux Animator) est un logiciel
libre et léger destiné à produire des
animations 2D autonomes aux formats
SWF-Flash et/ou
SVG. Il se veut donc un pendant libre à Adobe® Macromedia Flash, qui n’est pas disponible sous Linux. Ella est destiné avant tout aux
concepteurs de site web et de
Présentations Assistées par Ordinateur. Ainsi, Ella sera complémentaire de
Kompozer (création de sites Web) et de
OpenOffice.org (module Impress). Les animations sont créées en mode graphique et
WYSIWYG , de manière intuitive et conviviale. Pour le moment, Ella ne peut pas encore réaliser tout ce que fait le logiciel d’Adobe ; mais, tout ce qui existe dans Ella est
réellement fonctionnel, et, quasiment chaque jour, une nouvelle version plus complète et stable est mise en ligne.
1.2 Comment fonctionne Ella
2 Présentation de l’écran de travail
2.1 Écran de travail en général
L’interface d’Ella se décompose en 5 grandes parties, qui seront toutes abordées plus en détail dans les prochains chapitres.
Voici la liste des 5 parties:
-
La partie en vert foncé représente la barre des menus. C’est l’endroit où l’on pourra définir les paramètres par défaut de l’application, enregistrer un document et bien d’autres choses encore. Pour y acceder, cliquez ici.
-
La partie en bleu foncé est une barre d’outil qui permet d’effectuer différentes actions comme insérer une image directement sur l’animation ou insérer un texte
-
La partie en jaune est la partie où je pense, vous passerez le plus de temps. Cette zone est la principale zone d’Ella, c’est ici que s’effectue le placement des objets, les rotations...
-
La partie en bleu clair représente les différents onglets permettant de modifier les propriétés (couleur, taille...), ajouter des transitions et afficher la bibliothèque
-
La partie verte clair et aussi une partie très importante, car c’est ici que seront défini les différents calques, les images clé...
2.2 Écran de travail de l’éditeur
Pour commencer, voici comment se présente l’éditeur:
Comme vous pouvez le voir sur cette capture d’écran, l’écran de l’éditeur peut-être divisé en 2 parties.
La partie 1 correspond à la partie en dehors des marges. Cela signifie que vous pouvez placer des objets, textes, symboles ou autre, mais que c’est éléments n’apparaîtrons pas le lecteur et lors de l’export. Les marges sont représentées par des lignes grises.
La partie 2 correspond à la partie visible de l’animation.
2.3 Écran de travail du lecteur
Dans cet onglet vous pouvez visualiser votre animation. Vous avez pour cela le pouton jouer qui permet de lancer l’animation, le bouton pause qui permet d’arrêter l’animation, et le bouton stop qui permet de stopper l’animation. Contrairement au bouton pause, le bouton stop arrête l’animation et renvoie à l’éditeur. Un compteur numérique indiquant le temps de l’animation est aussi présent (en vert).
▲ Notez que pour le moment le lecteur et l’export en Flash utilisant les mêmes ressources, vous obtiendrez le même résultat lors de l’export (en Flash uniquement).
3 Les concepts
3.1 Les images clé
3.2 Les calques
“Les calques sont, en infographie, un ensemble de couches empilées les unes au-dessus des autres, dont chacune contient une partie des éléments constituant l’ensemble, ce dernier étant obtenu par la superposition de tous les calques. Dans ce système, chaque élément peut être placé sur un calque différent, si bien que l’on peut décomposer le travail, ce qui le rend plus simple. [...] Il est possible de modifier l’ordre d’empilement des calques, de copier les calques”
“Une bonne façon de se représenter une animation Ella est de la voir comme une pile de transparents : dans la terminologie d’Ella, ces transparents s’appellent des calques. Il n’y a pas de limite, autre que celle de la capacité en mémoire du système, au nombre de calques possibles. Il n’est pas rare, pour les utilisateurs avancés, de travailler sur des images contenant des douzaines de calques.
L’organisation des calques d’une image est visualisée dans la fenêtre de Dialogue des Calques. Si un calque est actif, il est surligné dans le dialogue des calques et son nom est affiché dans la barre d’état de la fenêtre d’image. Sinon, vous activez le calque en cliquant dessus. Si aucun calque n’est surligné, cela signifie qu’aucun calque est activé.
Dans la barre de menu en haut de la fenêtre d’image, vous trouverez le menu Calque, contenant plusieurs commandes agissant sur les différents calques de l’animations.”
3.3 La bibliothèque
4 Les outils
4.1 L’outil de sélection
4.1.1 Sélectionner
4.1.2 Le déplacement
4.1.2.1 Avec la souris
4.1.2.2 Par l’onglet Propriétés ▷ Sélection de la position et de la taille
4.1.3 Le redimensionnement
4.1.3.1 Avec la souris
4.1.3.2 Par l’onglet Propriétés ▷ Sélection de la position et de la taille
4.1.4 La rotation
4.1.4.1 Avec la souris
4.1.4.2 Par le menu objets ▷ Rotation
4.2 L’outil de sélection de couleur
4.2.1 Arrière plan
4.2.1.1 Changer l’arrière plan par défaut
4.2.1.2 Changer l’arrière plan d’un projet
Par le menu Format ▷ Fond de la scène
Par un clic droit dans l’éditeur ▷ Couleur de la page
4.2.2 Remplissage
4.2.2.1 Par la boîte de dialogue
4.2.2.2 Par l’onglet Propriétés ▷ style de la sélection
4.2.3.1 Par la boîte de dialogue
4.2.3.2 Par l’onglet Propriétés ▷ style de la sélection
4.3 L’outil d’alignement
4.4 L’outil des textes
4.4.0.1 Insérer un texte
4.4.0.2 Modifier un texte
Par un double clic sur le texte
Par l’onglet Propriétés ▷ Texte
4.4.0.3 Changer la couleur d’un texte
Par un clic sur le panneau FC: OC:
Par l’onglet Propriétés ▷ Style de la sélection
Par un clic droit sur le texte ▷ Couleur et opacité
5 Les menus
5.1 Le menu FICHIER
Dans ce chapitre les différents menus accessibles par la barre de menu (

) seront abordés. Lorsqu’il existe un bouton permettant d’effectuer la même action, il sera indiqué entre parenthèses ().
Grâce à ce menu (

) vous pouvez créer un nouveau fichier quand un autre est déjà ouvert. Attention, pensez à sauvegarder votre fichier, comme le demande ce dialogue.
Ce menu (

) sert à ouvrir un fichier déjà existant crée avec
Ella (fichier portant l’extension .ella). En cliquant dessus, vous obtiendrez une fenêtre vous demandant de choisir le fichier à ouvrir (affiche uniquement les dossiers présents ainsi que les fichiers portant la bonne extension).
5.1.3 Fichiers Récents
Grâce à ce menu vous pouvez ouvrir plus rapidement une des 5 dernière animations crée, simplement en cliquant sur son nom.
5.1.4 Enregistrer
Ce menu (

) sert à enregistrer un fichier, aussi bien la première fois que toutes les fois suivantes. Notez que lors du premier enregistrement, une fenêtre s’ouvre afin de demander l’emplacement de l’enregistrement ainsi que le nom du fichier. Cette fenêtre ne s’affiche plus lors des enregistrements suivants.
5.1.5 Enregistrer sous
À la différence du menu Enregistrer, le menu Enregistrer sous permet de sauvegarder le fichier à un autre emplacement ou sous un autre nom que le fichier actuellement ouvert.
5.1.6 Importer dans le bibliothèque
Dans tous les cas présentés, une fenêtre s’ouvrira pour choisir le(s) fichier(s) à importer.
Ce menu permet d’importer des fichier
bitmaps (sauf erreur de ma part, fonctionne avec les formats
JPEG et
PNG) dans la bibliothèque. Un bouton est disponible dans la barre d’outils située à gauche (

) mais insère le fichier directement dans l’éditeur en plus de le placer dans la bibliothèque.
5.1.6.2 Dessin vectoriel
5.1.6.3 Son ou musique
Vous pourrez importer des sons ou des musiques à travers ce menu. Les formats acceptés son les suivants: mp3, wav
5.1.6.4 Importer un symbole
Importez un ou plusieurs symboles à travers ce menu afin de mettre en place une animation contenant un effet de
morphing.
5.1.6.5 *****Movie clip*****
*****Vous pouvez depuis peu importer des fichiers portant l’extension
SWF. Vous pouvez ainsi jouer plusieurs animations dans une animation.*****
5.1.7 Exporter le projet
Une fois le projet terminé, vous pouvez lexporter sous différents formats.
5.1.7.1 Comme animation Flash
Vous pouvez tout d’abord l’exporter au format Flash® (portant une extension en swf). Tout savoir sur le flash
ici.
5.1.7.2 Comme animation SVG
Vous pouvez aussi exporter le fichier au format SVG. Tout savoir sur les
animation SVG (en)
5.1.7.3 *****Comme animation Javascript*****
*****Menu non fonctionnel pour le moment*****
Ce menu permet tout simplement de quitter l’application. Vous pouvez tout aussi bien quitter en appuyant sur la croix de fermeture de fenêtre (

)
▲ Pas de confirmation d’enregistrement avant de quitter, pensez donc à enregistrer!
5.2 Le menu ÉDITION
5.2.1 Copier/Couper/Coller/Supprimer/Annuler
Dans ces différents menus, vous pourrez faire les différentes actions sur les éléments:
*****Le menu supprimer sert à???*****
Le menu
annuler permet, comme son nom l’indique, d’anuler la dernière action effectuée (

).
5.2.2 Préférences
Grâce à cette fenêtre vous pouvez faire des choix par défaut tels que la taille de la scène, la taille des marges ou encore la couleur du fond. Ces choix seront utilisés lors de la création d’un nouveau projet.
vous pouvez modifier le nombre par défaut d’images par seconde, d’********************************************* et du zoom par défaut du presse-papier.
Voici le presse-papier à 100%
Puis à 50%
5.3 Le menu CALQUES
Les calques sont affichés par ordre dans la pile des calques. Ainsi, le calque le plus en bas dans la pile sera celui le “plus proche de l’utilisateur”. Les autres calques seront donc cachés par le calque du dessus. C’est comme avec du papier calque normal.
5.3.0.1 Nouveau calque de dessin
Ce menu vous permet d’ajouter un nouveau calque de dessin (

). Sur les calques de dessin vous pouvez placer des textes, des bitmaps, des clips, des symboles et des dessins vectoriels. Les calques de dessin sont représentés par ce symbole:

. Ils ont un fond de couleur doré.
5.3.0.2 Nouveau calque sonore
Vous pouvez à travers ce menu ajouter des calques audio à travers ce menu. Ils permettent de mettre une piste sonore en fond, ou d’ajouter des bruitages. Ils sont representés par

. Ils ont un fond de couleur vert.
5.3.0.3 *****Nouveau calque de guide*****
5.3.0.4 Dupliquer le calque
En cliquant sur ce menu vous pouvez dupliquer un calque, c’est à dire le reproduire à l’identique. Pour cela, il faut tout d’abord sélectionner le calque à dupliquer en cliquant dessus, puis cliquer sur le menu
dupliquer le calque ou sur ce bouton

.
▲ Ce n’est possible qu’avec des calques de dessin.
5.3.0.5 Renommer le calque
Vous pouvez modifier le nom des calques en choisant ce menu, ou en effectuant un double-clic sur le nom par défaut (noname #1...).
5.3.0.6 Monter le calque dans la pile
Grace à ce menu, vous pouvez modifier l’ordre des calques. Sélectionnez le calque désiré, puis cliquez sur ce menu. Un raccourci existe:
5.3.0.7 Descendre le calque dans la pile
Grace à ce menu, vous pouvez modifier l’ordre des calques. Sélectionnez le calque désiré, puis cliquez sur ce menu. Un raccourci existe:

.
5.3.0.8 Supprimer le calque
À travers ce menu vous pouvez supprimer un calque. Il faut pour cela le sélectionner, puis cliquer sur ce menu. Un raccourci existe:

.
5.4 Le menu OBJETS
Dans ce menu vous pouvez effectuer différentes actions sur les objets.
Vous pouvez à travers ce menu dupliquer un objet. C’est un équivalent au copier/coller.
Dans ce menu, vous pouvez monter un objet. C’est à dire que si il est caché par un autre objet (du même calque), vous le sélectionnez, appuyez sur monter, et l’objet passera devant.
Ce menu fonctionne comme le menu Monter mais dans l’autre sens.
5.4.0.4 *****Modifier*****
De menu permet d’effectuer une rotation à un objet quelconque sélectionné.
5.4.0.6 Aligner objets
À travers ce menu, une fenêtre de dialogue s’ouvre afin de choisir l’alignement. Vous pouvez choisir un alignement relatif à la séléction en cours ou un alignement relatif à la scène.
5.4.0.7 Tout sélectionner
Vous pouvez à travers ce menu sélectionner tout ce qui se trouve sur la scène.
5.4.0.8 Tout désélectionner
Au contraire du menu précédent, ce menu permet de désélectionner tout ce qui se trouve sur la scène.
Ce menu permet de supprimer un objet préalablement sélectionné.
5.5 Le menu FORMAT
5.5.0.1 Taille de la scène
Ce menu permet de modifier les différents paramètres de la scène tels que la hauteur, la largeur *****ou les marges (qui n’existeront plus d’ici peu)*****
5.5.0.2 Fond de la scène
Vous pouvez à travers ce menu modifer les différents paramètres en rapport avec la couleur. Vous pouvez ainsi faire varier les valeurs pour les couleurs
RVB, modifier la teinte et la saturation, ou encore choisir la couleur avec un code
couleur HTML. POur connaître le code d’une couleur, vous pouvez choisir votre couleur
ici.
5.5.0.3 Métrage du film
5.6 Le menu IMAGES
5.6.0.1 Ajouter jusqu’à la position actuelle
À travers ce menu vous allez ajouter des images jusqu’à la position où se trouve votre curseur. Pour cela, cliquez sur l’image à la position jusqu’à laquelle vous voulez ajouter des images. Rendez-vous ensuite dans ce menu et cliquez sur Ajouter jusqu’à la position actuelle. Vous pouvez parvenir à ce même résultat en vous positionnant due l’image jusqu’à laquelle vous voulez ajouter des images et appuyer sur la touche f5 du clavier ou en effectuant un clic droit sur la timeline et cliquez sur Ajouter jusqu’à la position actuelle.
5.6.0.2 Ajouter à partir de la sélection actuelle
Ce menu vous permet d’ajouter un nombre voulu d’images. Pour cela, placez vous sur la dernière image de la timeline et allez dans ce menu. Une boîte de dialogue s’ouvre et vous demande combien d’images vous voulez ajouter.
▲ Vous ne pouvez ajouter des images qu’à partir de la dernière image. Si vous n’êtes pas dessus, ce menu n’aura aucun effet.
5.6.0.3 Supprimer jusqu’à la position actuelle
Ce menu vous permet d’effacer toutes les images présentes avant la position du curseur. Comme des images sont plus parlantes, en voici: nous allons supposer que notre animation fait 100 images, et que nous voulons supprimer les 75 premières:.
Nous avons donc deux zones: la zone verte qui est la zone à supprimer et la zone rouge qui est la zone à conserver. aa
Nous nous plaçons sur l’image numéro 75, et utilisons ce menu (Supprimer jusqu’à la position actuelle). Nous obtenons donc ceci:
Nous avons donc uniquement les 25 dernières images qui sont restées.
5.6.0.4 Supprimer après la position actuelle
5.6.0.5 Supprimer les images sélectionnées
5.6.0.6 Insérer une image-clé
5.6.0.7 Insérer une image-clé vide
5.6.0.8 Créer une interpolation
5.6.0.9 Supprimer une image-clé
5.6.0.10 Vider l’image-clé
5.6.0.11 Supprimer l’interpolation
5.7 Le menu VISUALISATION
Ce menu permet de passer directement dans l’onglet lecteur et de commencer la lecture, et ce sans passer par l’onglet lecteur, puis appuyer sur Jouer.
5.7.0.2 Augmenter l’agrandissement du presse-papier
Vous pouvez à travers ce menu augmenter l’agrandissement du presse-papier.
5.7.0.3 Réduire l’agrandissement du presse-papier
À travers ce menu, au contraire, vous pouvez le réduire.
Pour modifier la valeur du presse-papier par défaut rendez vous
ici.
6 Tutoriel: Créer une animation complexe
7 Annexe
7.1 Raccourcis clavier