baptisée « Valspiranthe ». http://perso.orange.fr/orchid.glh

Ce petit tutoriel est destiné à décrire les étapes qui ont conduit à la réalisation de la page Web comportant la petite animation musicale
baptisée « Valspiranthe ». http://perso.orange.fr/orchid.glh/monweblog/valspiranthe
Rappel : L’ animations est obtenue en faisant apparaître à l’ écran une succession d’ images dans un intervalle de temps et d’ espace
suffisamment rapprochés pour donner l’ illusion de mouvement. Les animations des pages Web les plus sophistiquées sont réalisées par
des scripts programmés en langage informatique codé. Celle qui est décrite ici ne nécessite aucune connaissance en programmation, il s’
agit seulement de bricolage.
Première étape : Élaboration des images de l’ animation.
À partir de cette image (format JPG) de Spiranthes spiralis (photo prise par dessus) qui évoquait des danseurs évoluant dans un
mouvement de valse ou un ballet, j’ ai sélectionné le plant de droite dans un carré de 240 x 240 pixels en prenant soin de ne pas le
centrer sur le sujet. On l’ enregistre sous format JPG pour pouvoir la faire tourner à l’ aide du logiciel permettant de manipuler les
images (IrfanView, Photofiltre, ou PhotoShop) sans perte de définition. En faisant un enregistrement de cette image après lui avoir fait
à chaque fois une rotation de 90 degrés on obtient quatre images distinctes qui représentent un tour de rotation du sujet.
Nota : Après rotation, l’ enregistrement doit être effectué en format Gif pour pouvoir les utiliser en gif animé par la suite.
Le fond est de couleur vert uniforme afin que la rotation d’ image donne l’ illusion d’ un fond de fleur fixe (fleur sur fond transparent).
Pour obtenir cela, il faut utiliser Photoshop Element. L’ isolement de la fleur de son fond s’ effectue avec le lasso polygonal du menu.
Il suffit d’ effacer la sélection ainsi délimitée pour ne conserver que le fond d’ image. L’ uniformité du vert s’ obtient à l’ aide du filtre d’
atténuation « flou gaussien ».
Ci après les copies d’ écran correspondantes.
Photo d’ origine :
Sélection effectuée :
Détourage de la fleur :
Après effacement de la sélection :
Après application du flou gaussien :
Après avoir interverti la sélection :
Deuxième étape : Réalisation du Gif animé.
Les images de base étant terminées, l’ animation s’ effectue en utilisant un petit logiciel gratuit de Microsoft (Microsoft Gif Animator).
Son utilisation est assez intuitive, on place les images les unes à la suite des autres sur le fond qui constitue la première image. Ce
fond est un rectangle de 240 x 800 px de même couleur uniforme que celui de la fleur en utilisant la pipette. Ce fond recevra les
images de la fleur. L’ animation sera obtenue en recopiant les images Gif dans l’ ordre en suivant la séquence des rotations
successives. L’ effet de déplacement des danseurs est obtenu en décalant leur position d’ un pas constant (j’ ai pris 30 px).
Les copies d’ écran ci-dessous montrent le contenu du fichier.
Quelques vues de la construction du GIF animé. La première image (240 x 800 px) constitue le fond sur lequel évoluent les
« danseurs ». Le Gif comporte 21 images.
Troisième étape : Réalisation de la page Web.
o Première partie : Élaboration du message (Pour ceux qui n’ ont pas de serveur Web chez leur FAI).
Pour réaliser la page Web qui nécessite l’ écriture d’ une page de code HTML, j’ ai utilisé Outlook Express qui sait très bien le
faire pour nous quand on fabrique un message.
Pour cela, ouvrir OE et cliquer sur « nouveau message ». Dans le menu sélectionner « format » et « texte enrichi (HTML) » de façon à
disposer des trois onglets du bas de la fenêtre « modifier », « source » et « aperçu ».
Le fond coloré et la musique du message sont obtenus en utilisant la fonction du menu Format/Arrière plan.
Pour le fond on sélectionne l’ image 240 x240 px vert uniforme qui ne comporte pas la fleur.
-
Pour la musique, on sélectionne un fichier musical d’ extension MID ou WAV reconnus par OE Adaptés à l’ animation. J’ ai pris un
fichier MIDI d’ une valse.
Si vous le souhaitez, vous insérez le texte de votre choix dans ce message, puis vous insérez votre fichier gif d’ animation en utilisant
la fonction « Insertion/Image » du menu et en le sélectionnant.
La commande « aperçu » de l’ onglet vous permet de juger de l’ effet de votre message.
Attention : Si vous voulez en faire une page Web, il faut s’ arrêter à ce stade pour copier le fichier source que OE vient de fabriquer.
En revanche, il est prêt à être envoyé aux destinataires que vous aurez choisis, si vous préférez le diffuser sous cette forme, c’ est à
dire sous forme d’ un mail. Pour cela, n’ oubliez pas de revenir à l’ onglet « modifier » avant l’ envoi.
o Deuxième partie : Elaboration de la page Web (pour ceux qui ont un serveur chez leur FAI)
Le fichier source qui vient d’ être élaboré par OE peut être récupéré pour fabriquer la page Web.
Pour cela, sélectionner l’ onglet « source », une page de texte apparaît. Elle est écrite en code HTML, code utilisé pour les pages
Web. Sélectionner toute la page par la commande du menu « Edition » « selectionner tout » puis « copier ». Votre page se trouve
alors stockée automatiquement dans le bloc note Windows.
A ce stade, ouvrez votre logiciel de traitement de texte pour créer un nouveau fichier. Dans le menu « Edition » faites « copier », votre
ébauche de page HTML est créée . Les modifications à apporter ensuite seront fonction de l’ organisation des dossiers dans la
structure du site Web. Pour ma part, le dossier qui reçoit la page HTML est séparé des dossiers qui contiennent les images ou les
musiques. Dans mon cas, les modifications à apporter à cette nouvelle page sont indiquées en gras ci- après.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"><BASE
href="http://perso.orange.fr/orchid.glh/monweblog/>
<META content="MSHTML 6.00.5730.11" name=GENERATOR>
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY bgColor=#d0c6c7
background=..\monweblog\images\fond.gif>&nbsp;<BGSOUND balance=0
src="..\monweblog\musiques\valse.mid"
volume=-100>
<TABLE style="FILTER: Alpha(Opacity=75)" cellSpacing=4 borderColorDark=#ffffff
cellPadding=8 width="80%" align=center borderColorLight=#ffffff border=3>
<TBODY>
<TR>
<TD bgColor=#ffffff>
<DIV><FONT face="Comic Sans MS">Bonjour aux amis du forum
Ophrys,</FONT></DIV>
<DIV><FONT face="Comic Sans MS">Pour rester dans la note récréative de fin
octobre et dans l' imaginaire orchidophile en&nbsp;attribuant aux fleurs
d' orchidées des pouvoirs humanoïdes, je vous propose&nbsp;une valse de
Spiranthes spiralis.</FONT></DIV>
<DIV><FONT face="Comic Sans MS">D' autres y verront quelques pas d' une
ballerine inspirée par la musique de Strauss.</FONT></DIV>
<DIV><FONT face="Comic Sans MS">C' est aussi ça la magie de l'
orchidophilie.</FONT></DIV>
<DIV><FONT face="Comic Sans MS">Bonne fin de saison floristique 2007 en
attendant que les nouvelles nous enchantent&nbsp;encore.</FONT></DIV>
<DIV><FONT
face="Comic Sans MS">Geo_LH&nbsp;</FONT></DIV></TD></TR></TBODY></TABLE><DIV align=center><IMG alt="" hspace=0
src="..\monweblog\images\ValSpir_1.gif"
align=baseline border=0></DIV> </BODY></HTML>
Une fois modifiée en fonction de vos paramètres et « enregistrer sous » vous lui donnez le nom que vous voulez en lui attribuant une
extension html.
Dans mon cas, le fichier HTML (valspiranthe.html) est placé dans le dossier « monweblog » de mon site
http://perso.orange.fr/orchid.glh. Le fond Gif et le gif animé, dans un dossier « images », la musique dans un dossier « musiques ».
Le chargement s’ effectue ensuite à l’ aide d’ un logiciel dit « client FTP » , j’ utilise « FileZilla » un logiciel gratuit fait pour transférer
les fichiers sur serveurs.