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 (par exemple une belle photo).
- 2 images gif animées.
- le 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.
- un logiciel pour la création de pages web.
PROCEDE
1) Ouvrir Swish et mettre tout de suite dans la partie droite indiqué avec le nom FILM les données suivantes:
Donc dimensions : largeur 800; Hauteur: 600 pixels, qui sont
celles de l'image que nous mettrons.
Si vous voulez créer un contour, sélectionnez une couleur s'arrière-plan de votre choix.
2) Insérer Image: et allez cherche l'image qui servira de fond à votre réalisation.
moi, j'ai choisi une de mes photos du lac de Endine:
.
Elle ira se placer sur l'arrière-plan que vous avez créé avant.
Posizionnez-la comme vous préférez en tenant appuyé la touche gauche de votre souris pour la déplacer. En utilisant les repères blancs qui se trouvent autour de l'image,
il est possible de l'étirer ou de la réduire pour créer autour d'elle une petite bordure.
3) Insérons la première image gif animée: voici la mienne:
Insérer/Image et aller chercher l'image.
On verra alors s'ouvrir une fenêtre de ce type:
Pour que le fichier gif puisse être inséré comme animation, il faut seulement cliquer sur Sélectionner sur toutes les frames et sur le bouton IMPORTER.
Vous verrez alors apparaître votre image gif sur l'image de base, comme ici:
Elle semblera statique, mais en effet elle ne l'est pas: cliquez sur Contrôler/lire film et vous verrez qu'elle est bien animée.
4) Positionons maintenant cette image gif en haut à gauche en la tirant avec la touche gauche de la souris. Si vous voulez, placez-la même un peu
extérieurement à l'image qui servira de background: on aura l'impression
qu'elle vient de l'extérieur.
5) Maintenant on va lui donner un mouvement ultérieur.
En laissant la sélection sur cette image gif, faites Insérer/Effets/Glisser Vers l'intérieur
à partir de la gauche.
Dans la fenêtre qui apparaîtra, mettez 50 dans la durée des frames.
Cliquez sur Ferme.
6) Nous allons maintenant lui donner un autre effet: Insérer/Effets/blur et cette fois aussi
mettez 50 dans durée des frames. Quantité de blur 5; pourcentage de blur: 20. Cliquez sur Ferme
pour appliquer l'effet.
7) Maintenant nous allons utiliser la souris pour modifier la position
de l'image pour chacun des effets.
Cliquons 2 fois sur la barre noire qui se trouve entre les 2 effets
donnés à l'image dans la liste des actions qui se trouve dans la partie
supérieure et ainsi la on va obtenir une barre rouge:
Nous allons simplement revenir sur l'image gif du plan de travail et nous allons
lui donner une direction qui nous semble adaptée.
Vous verrez alors se former une longue série de pointillets indiquant la nouvelle direction
et l'image sera toujours encadrée par une sélection rouge.
Observons ce que cela donne dans Contrôler/Lire film et si cela va on confirme, autrement il y a
toujours la possibilité de revenir à la phase précèdente en cliquant sur
l'icône Annuller (fléche en arrière).
8) Maintenant nous allons donner à l'image le mouvement inverse pour sortir de l'animation:
Insérer/Effets/Glisser vers l'extérieur/vers haut gauche. Et mettre toujours 50 dans la durée des frames.
9-15) Répétez les phases 2-8, mais avec une image gif complémentaire qui aura un mouvement sur la droite.
Voici celle que j'ai choisie:
On clique du gauche sur la case 20 de l'image gif dans la partie haute avant de faire les ajouts d'effets:
cela donnera un décalage entre la première à la deuxième image gif.
Vous pouvez aussi vous amuser à changer quelques directions et effets. Par exemple commencer par l'effet blur,
et donner une direction avec le procédé indiqué au point 7. Puis donner un autre effet blur pour faire
sortir de nouveau l'image gif.
16) On va maintenant ajouter un texte en mouvement dans la partie basse de l'image base :
Insérer/Texte.
Dans la partie indiquée texte à droite, écrivons le texte qui va s'affichier
dans la partie sélectionnée au centre du plan de travail.
On va déplacer la phrase un peu plus vers le bas et on va lui donner des effets:
d'abord effet vague et dans la fenêtre qui apparaîtra mettez 50.
Si vous voulez que la phrase commence quelques instants après le début de l'animation, tirez vers la gauche
dans la partie supérieure le rectangle qui correspond à la phrase et déplacez-le vers la gauche
en correspondance avec 20 de la règle graduée, ou mieux encore, sélectionnez le 20 dans la ligne qui correspond
à la phrase, puis donnez-lui l'effet avec 50 comme nombre de frames.
Sélectionnez la partie finale de la ligne du temps et mettez un autre effet: Insérer/Effets/transformer et en haut dans le
rectangle de la sélection de l'effet, on trouvera un long menu descendu où choisir un autre effet, par exemple Cascade to ends,
toujours avec 50 frames.
17) Insérez un son: se placer sur le point 0 dans la ligne du temps correspond
à la scène et importez un fichier son : Insérer/Action/Lire son. Et dans les options du son, mettez lecture : 10 fois et
cliquez sur lire.
Puis faites la sauvegarde de votre fichier Swi: fichier/enristrer sous et lui donner un nom.
Si vous le voulez comme page html, faire fichier/Exporter/Html.
Outre le fichier html le logiciel formera automatiquement un fichier SWI, qui servira de base
au fichier html
(donc à envoyer par ftp avec le fichier html au moment de l'envoi de la page dans l'espace web de notre site).
Dans votre logiciel de création de site, il vous sera encore possible modifier la page html en question en modifiant par exemple le background
et ajouter un scrollbar.
Ce tutoriel a été créé le 28 octobre 2003 dans le contexte des travaux du groupe franco-flash,
fondé et dirigié 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.
