Pour voir l'exemple de page web obtenue avec la méthode indiquée dans ce tutoriel, cliquez ICI.
Pour réaliser ce tutoriel, vous aurez besoin de :
- une image- background (réalisée dans Paint Shop Pro par exemple).
- du logiciel Swish 2 : téléchargez la version française de ce logiciel ICI . Si vous avez besoin d'explications pour l'installation, écrivez-moi.
- d'un logiciel pour la création de pages web.
PROCEDE
1) Créez dans Paint Shop Pro un background en partant d'une image de votre choix. Moi, j'ai réalisé un background de 800 par 500 pixels, que voici:
Ici, je l'ai réduite à 400 par 250, pour ne pas encombrer inutilement la page.
Naturellement vous pourrez lui donner d'autres dimensions: 1024 par 300 par exemple.
2) Ouvrez votre logiciel Swish 2 et faites Insérez/Image et allez chercher votre image-background. Cliquez sur Ouvrir.
Voici une capture qui vous montre ce que l'on voit à la fin du travail : elle va vous aider pour comprendre différents moments essentiels du procédé:
Sur la droite de votre espace de travail, vous aurez différents volets: un volet forme qui prévisualise votre image; cliquez sur Propriétés : vous devriez avoir les dimensions de votre image : 800 par 500 dans mon cas:
Cliquez sur Film: et là il est important de mettre exactement les dimensions de l'image : largeur 800 et hauteur : 500 (cf. capture 1). Pour les autres règlages, faites des essais.
Dans Actions, ne touchez à rien, car le background en question restera figé, car nous allons y mettre une phrase avec effet. Si vous voulez ajouter un effet, faire Insérer/effets et choisir un des effets.
3) Faites Insérer/texte et vous verrez qu'à gauche de votre espace de travail, comme montré dans la capture 1, le texte se trouve avant l'indication Image et pourtant il a été placé après celui-ci.
Dans la partie au-dessus de l'espace de travail, vous verrez une règle graduée indiquant les 2 éléments que nous avons déjà insérés.
Dans le centre, bien au-dessus de l'image (toujours visualisée), nous voyons maintenant une sélection (avec des petits carrés blancs tout autour du mot texte. A droite, comme dans la capture:
on peut noter des éléments qui vont servir pour définir la police, la taille, etc..... et surtout nous avons un espace blanc où le mot texte se trouve écrit: c'est justement ici que nous allons écrire la phrase. Effacons le mot texte et écrivons donc la phrase de notre choix et nous verrons que dans la sélection sur l'image la phrase va être reproduite.
Ajoutons maintenant les effets. Moi, j'ai choisi 3 effets successifs sur la même phrase : 1) glisser dans à partir de gauche (10); 2) vague (30); 3) exploser (30). Comme on peut le voir dans la première capture, je les ai mis en succession en leur donnant les temps qui figurent entre parenthèses.
Comment obtenir ces effets :
a) Insérer/effets/ Glisser vers l'intérieur/A partir de la gauche. Une fenêtre s'ouvre où on peut décider en particulier combien de frames devront être utilisés pour cet effet: moi, j'ai choisi 10. Cliquez en haut à droite sur Fermepour confirmer le règlage.
b) Insérer/effets/vague et dans ce cas-ci j'ai choisi 30 frames.
c) Insérer/effet/exploser et cette fois-encore, j'ai choisi 30 frames.
Cliquez pour prévisualiser votre film: Contrôler/lire film. Pour interrompre: Contrôler/stopper. Ou bien, cliquer sur l'icône correspondante dans la barre des outils (il y en a 4 qui concernent la prévisualisation).
Donc, ici nous avons une phrase qui est bien centrale et qui a 3 mouvements successifs. Or, nous voudrions lui donner un mouvement ultérieur avec les effets qu'elles possède déjà. Comment faire? Cliquez d'abord sur l'icône Prévisualisez frame, en plaçant sur la règle draduée un signe sur la partie à traiter et en sélectionnant l'effet qui devra être traité. Retournez sur le rectangle de travail (la scène) et vous verrez que la sélection du texte maintenant est en rouge. Tirez avec la souris ou vers le haut ou vers le bas pour donner une direction à l'effet. Je viens de le refaire successivement pour les effets 2 et 3 de la phrase (vague et explosion) et voici ce que je peux voir sur la scène:
Faites des essais pour arriver à trouver des variations intéressantes, car en fait de cette manière nous avons un double mouvement: celui de l'effet et la direction que nous lui donnant sur l'image-background.
Une autre méthode pour obtenir des variations de direction, c'est de sélectionner l'effet sur la règle graduée, et avec la touche droite de la souris sélectionner Propriétés, puis cliquer sur le volet Mouvement en variant les valeurs. Amusez-vous à faire des essais avec cette autre possibilité.
4) Vérifions tout d'abord si le fichier est correct en cliquant sur la prévisualisation dans le navigateur: Fichier/tester/Dans le navigateur. Puis faisons la sauvegardes dans le même repertoire du site où nous voudrons l'utiliser: fichier/exporter /HTML: automaquement le logiciel va créer aussi bien le fichier HTML que le fichier SWF (il faudra se rappeler de les envoyer tous les deux sur le site, autrement l'animation ne fonctionnera pas).
Si la page ne doit contenir que cet effet, elle est déjà prête. Si au contraire elle ne doit être qu'une partie de la page, comme dans la page de mon site que j'ai donnée en exemple (voir lien en haut de ce tutoriel), il faudra suivre la procédure suivante: ouvrez votre page html réalisée avec Swish et isolez la partie de votre page qui se trouve entre les éléments suivants : et Faites un copier-coller et allez l'insérer dans la partie de la page HTML de votre page où vous voulez que cette animation soit visible. Dans mon cas la page avait déjà le background en question. Donc en fait j'ai une page avec 2 fois le même background : le background de base de ma page et l'image-background que j'ai mise dans la partie haute de la page: de cette manière on donne l'illusion de l'existence d'un seul background sur toute la page du site.
Je remercie tout particulièrement Mario Panone qui m'a fourni les détails concernant l'enregistrement de la réalisation dans la page HTM.
Le tutoriel a été écrit le 09 février 2003 dans le contexte des travaux du groupe franco-html fondé et dirigé par Mario Panone.
Si vous voulez vous inscrire sur ce groupe, cliquez ICI .
Si vous voulez m'écrire pour avoir des infos, cliquez ICI .
Pour retourner à ma section sur mes créations, cliquez ICI.
Pour retourner à la page d'acceuil, cliquez ICI.
