Des animations avec LibreOffice Draw

Un schéma qui se construit peu à peu

Vous devez disposer d'un lecteur Flash pour voir cette animation

Vous devez disposer d'un lecteur Flash pour voir cette animation
Un premier exemple d'animation très simple pourrait être la construction, élément par élément, d'un dessin plus ou moins complexe. Nous allons reprendre la ligne du temps élaborée dans une précédente leçon.

Clique sur l'illustration ci-contre pour voir l'animation à obtenir.

Si tu disposes de la ligne du temps construite dans la leçon précédente, ouvre ce document. Sinon, tu peux télécharger une version type en cliquant sur ce lien (clic du bouton droit / Enregistrer la cible du lien sous...).

Ligne du tempsLa ligne du temps se présente sous la forme d'un dessin unique. Nous allons faire apparaître les différentes périodes et les légendes correspondantes petit à petit.

La première image de l'animation ne contiendra que la structure générale du dessin:

  • le titre principal
  • la flèche du temps
  • les graduations sous la flèche
  • l'échelle
Ligne du temps

La dernière image contiendra la ligne du temps comme elle est illustrée ci-dessus à droite.

Pfffttt... Si je comprends bien, vous voudriez que je recommence le travail de zéro pour construire la première image. Faire et refaire, c'est toujours travailler; mais ce n'est pas très intéressant.

Effectivement. Aussi vais-je vous proposer de ne pas recommencer le travail, mais de le "déconstruire".

  • Dupliquer la pageVérifie que tu disposes bien du document final complet.
  • Enregistre ce travail sous un autre nom: ligneAnimee.odg.
  • Dans le menu Insertion, sélectionne la commande Dupliquer la page.

Tu disposes maintenant d'une deuxième page contenant une image identique à la première.
Nous avons toutefois besoin d'au moins 9 pages sur le même modèle.

  • Duplique encore plusieurs fois la page, de manière à en obtenir 9 exemplaires.
  • Enregistre ton travail.

La dernière page est l'image finale. Il ne nous reste plus qu'à remonter dans le temps en supprimant les éléments qui apparaissent à chaque période.

  • Sur la huitième page, supprime le rectangle correspondant à l'Époque Contemporaine et la légende correspondante.
  • Sur la septième page, supprime la date de début de l'Époque contemporaine (1789).
  • Sur la sixième page, supprime le rectangle correspondant aux Temps Modernes et la légende correspondante.
  • Sur la cinquième page, supprime la date de début des Temps Modernes (1492).
  • Poursuis ansi jusqu'à la première page où il ne restera plus que les éléments indiqués plus haut.
  • Enregistre ton travail.

L'animation est terminée, il suffit de l'enregistrer.

Mais vous venez de me dire d'enregistrer. La fatigue ne vous gagnerait pas, vous?

Effectivement, l'ensemble a été enregistrée au format .odg de LibreOffice. Mais ce n'est pas encore une animation, juste une série d'images.

  • Format Macromedia .swfDans le menu Fichier de LibreOffice, sélectionne la commande Exporter.
  • Dans la boîte de dialogue d'enregistrement, ouvre la liste Format de fichier (par défaut, elle montre généralement la mention "Tous les formats").
  • Sélectionne l'option Macromedia Flash.
  • Choisis un nom pour le fichier au format Flash. Il est fortement conseillé de choisir un nom sans caractères accentués; sinon, des problèmes pourraient survenir un peu plus loin lors de la visualisation de ton travail.
  • Clique sur le bouton Enregistrer.

L'enregistrement au format SWF démarre. Le processus peut éventuellement être assez long en fonction de la puissance de l'ordinateur utilisé.

Il ne reste plus qu'à voir le travail réalisé. Nous allons simplement l'intégrer dans une page web afin de voir l'animation dans un navigateur web (Firefox, Opera, Internet Explorer,...) capable de visionner les animations Flash.

Création de la page HTML

Une page visible dans un navigateur web est écrite dans un langage un peu particulier que les navigateurs sont capables de comprendre. Il s'agit du langage HTML ("HyperText Markup Language"). Pour écrire le code HTML, il nous suffit d'un petit éditeur de textes. Sous Windows, on peut utiliser Notepad ou (mieux), NotePad++. Sous Linux Ubuntu, Geany ou Gedit sont de bons éditeurs de textes. Gedit est également disponible pour Mac.

Attention, il ne faut, en aucun cas, utiliser un logiciel de traitement de textes (LibreOffice, OpenOffice, Word,...)!!

Dans une nouvelle page de l'éditeur de texte choisi, frappe le code suivant. Attention, la moindre faute de frappe pourrait empêcher le navigateur de comprendre le code.

<!DOCTYPE html>
<html><
<head>>
<title> Animation</title>
</head>
<body>
<h1> Mon animation</h1>
<embed src="monAnimation.swf" width="1000" height="750">
</body>
</html>
  1. Dans ce texte, remplace monAnimation.swf par le nom du fichier choisi pour ton animation.
  2. Tu peux également changer le titre de la page (entre <title> et </title>) et le titre principal dans le document (entre <h1> et </h1>).
  3. Enregistre ce document dans le même dossier que ton animation avec le nom que tu souhaites et l'extension .html (Exemple: animation.html).

Voir l'animation dans la page HTML

  • Ouvrir un fichierOuvre maintenant ton navigateur web (Firefox, Chrome, Safari, Internet Explorer,...)
  • Dans le menu Fichier de ton navigateur, sélectionne la commande Ouvrir un fichier...
  • Recherche le fichier animation.html (ou le fichier du nom choisi) que tu viens d'enregistrer.
  • Clique sur le bouton Ouvrir.

L'animation apparaît dans le navigateur.

Quand ton animation est au point, passe à la page suivante.  Vers la page suivante Page suivante


Dernière modification 18/08/2016 Test dans /info ...