Pour obtenir l'effet que j'ai reproduit ci-dessus, vous aurez besoin de :
- Paint Shop Pro (j'emploie la version 7.2): cliquez ICI pour avoir des informations.
- Animation Shop (que vous trouvez avec Paint Shop Pro)
- un glitter (tuile scintillante) de votre choix que vous trouverezICI, le site des glitters (tuiles scintillantes) ou que vous pourrez créer vous-mêmes.
- une image de votre choix qui vous servira comme fond de l'animation.
- un fichier son, mp3 ou wav (pas trop volumineux).
- le logiciel Flash.
DANS PAINT SHOP PRO ET DANS ANIMATION SHOP
Pour créer un mot animé avec glitter, que vous utiliserez ensuite dans l'animation Flash, je me suis librement inspirée du tutoriel de Benymind que j'ai moi-même traduitICI
avec son autorisation.
Pour obtenir une phrase animée comme celle-ci
suivez la méthode suivante:
1) Ouvrez un glitter (tuile animée) dans Animation Shop. Moi, j'ai choisi celui-ci :
Vous verrez qu'elle est formée de 3 frames, dont le premier est déjà sélectionné:
Faites Edition/Sélectionner tout. Puis Edition/Copier. En gardant AnimnationShop ouvert, allez dans PSP et avec la touche droite de la souris sélectionner Coller l'animation sous forme d'images multiples, comme dans la capture:
ce qui aura pour effet de former trois images séparées du glitter.
2) Toujours dans PSP, mettez les options suivantes:
- comme l'avant-plan, choisissez les motifs et allez chercher la première image glitter que vous avez.
- comme la l'arrière-plan, choisissez une couleur, par exemple j'ai choisi celle-ci: #E8E9AF.
Créez un rectangle fond transparent de 200 par 50 pixels.
Ouvrez l'outil texte, puis retournez sur le rectangle transparent et cliquez une fois dessus.
Ecrivez un mot, après avoir mis la configuration suivante:
Cliquez sur l'outil déplacement pour le déplacer vers le centre. Pour qu'il soit bien au centre, vous pouvez aussi faire comme ceci:
Edition/copier, puis Edition/coller comme nouvelle image. Vous serez ainsi certains d'avoir à la fin 3 images qui se correspondent exactement.
Sauvegardez comme fichier gif optimisé (pour qu'il conserve la transparence autour du mot)
en le nommant par exemple image1.
3) Répétez les opérations pour les images 2 et 3 du glitter, après avoir successivement changé,
l'image dans les motifs d'avant-plan.
Vous obtiendrez ainsi 2 autres mots avec glitter nommés image2 et image3
4) Après avoir obtenu ces 3 images, retournez à Animation Shop et ensuite cliquez sur l'icône qui représente l'Assistant d'animation (elle se trouve exactement en-dessous de Fichier, en haut à gauche de la fenêtre du logiciel).
Vous verrez différents volets qui vous guident dans la création de l'animation :
a) Choisir la taille : mettez Même taille que la première. Cliquez sur Ensuite
b) Choisissez: Transparent et cliquez sur Ensuite
c) Choisissez : Angle supérieur gauche du cadre. Et cochez: Avec la couleur du support. Puis cliquez sur Ensuite
d) Choisissez: Oui, répétez indéfiniment l'animation. Choisissez 10 pour le nombre et cliquez sur Ensuite
e) Vous verrez une fenêtre où vous devrez cliquer sur le bouton Ajouter l'image.
Choisissez alors les images qui composeront l'animation: ce sont celles que vous venez de préparer et d'enregistrer dans le format *gif. Puisqu'elles se trouvent regroupées dans un même dossier, vous pourrez les sélectionner toutes ensemble en sélectionnant d'abord la première, puis en tenant sur votre clavier la touche Shift appuyée et en descendant dans la liste avec la touche avec la flèche de direction indiquant le bas. Quand vous avez sélectionné les 3 images, vous pouvez relacher les 2 touches. Puis confirmez en cliquant sur Ouvrez.
f) Cliquez sur le bouton Avant puis sur FIN.
Animation shop va maintenant construire sous vos yeux votre animation.
Quand il aura fini (2 ou 3 secondes), vous pourrez cliquer sur le bouton "Visualiser l'animation" (le deuxième en haut à droite, à côté du point d'interrogation): vous aurez ainsi une avant-première de votre animation.
Faites Fichier/enregistrer sous.
Il faudra alors vérifier qu'elle soit bien enregistrée dans le format *GIF !!!
Nommez votre animation et cliquez sur Enregistrer.
DANS FLASH
1) Ouvrez votre logiciel et insérez les fichiers qui vont vous servir dans la bibliothèque en faisant Fichier/Importer dans la bibliothèque et faites l'opération
pour tous les fichiers graphiques et sonores dont vous aurez besoin.
Dans notre cas il suffit de récupérer 3 fichiers:
- le fichier gif créé avant avec PSP et AnimationShop.
- une image jpg qui servira comme fond de l'animation.
- un fichier sonore dans le format mp3 ou wav, pas trop volumineux.
2) Redimensionnez la scène en lui donnant les dimensions de votre image: pour le faire
cliquez du droit sur le rectangle blanc qui sert de scène et sélectionnez Propriétés. Ou bien double-cliquez sur CADENCE dans la partie basse de la timeline: comme dans la capture (le petit rectangle indiqué par la flèche en haut),
ce qui ouvre la fenêtre suivante:
Mettez alors les dimensions de votre image et ensuite cliquez sur OK pour confirmer.
3) Quand on ouvre le logiciel il y a déjà un nouveau document qui s'ouvre contenant un calque.
Nous allons le nommer image. Pour ce faire, aller sur le nom calque qui se trouve indiqué à gauche
de la timeline dans le scénario et en double-cliquant dessus on pourra le renommer.
Ouvrez la bibliothèque : Fenêtre/Bibliothèque, sélectionnez l'image qui servira de fond et transférez-la
sur la scène en tenant la touche gauche de la souris appuyée.
Maintenant placez-la bien au-dessus du rectangle blanc pour que les 2 coïncident.
Pour que les opérations de déplacement puissent se faire, la flèche noire dans la barre d'outil doit
être appuyée.
Nous allons donner un certain temps à l'animation et l'image devra toujours être visible:
cliquez sur le point 50 de la timeline et faites Insertion/Image clé.
4) Faites Insertion/Calque : vous le verrez apparaître au-dessus du premier calque (les nouveaux calques
que nous ajouterons se positionneront toujours au-dessus du calque sélectionné).
Nommez-le par exemple gif1.
Placez-vous avec le curseur au point 1 de la timeline du calque gif1 et ouvrez la bibliothèque. Séléctionnez le fichier gif
créé avec le glitter. Attention! le fichier gif sera présent sous diverses formes: les différents fichiers jpg
qui composent le fichier gif et le fichier gif animé qui aura pour nom: Copie de franco-flash (si le nom du fichier
est "franco-flash.gif") CLIP. Donc c'est le fichier clip qui va nous servir, comme gif animé, comme indiqué sur la capture d'écran:
Transférez-le sur la scène au-dessus de l'image dans une position qui vous semble idéale pour le début de l'effet, par exemple le centre ou bien un des 4 angles.
Placez-vous sur le point 15 de la timeline du calque gif1 et faites Insertion/Image clé.
Retournez au point 1 de la même timeline et faites Insertion/Créez une interpolation de mouvement.
Si nous ne bougeons rien l'image restera statique pour du point 1 au point 15.
Pour lui donner un mouvement, nous retournons au point 15 et nous déplaçons le fichier gif sur la scène.
Faites l'essai et ensuite vérifier le mouvement de 2 façons (en plaçant la touche gauche de la souris
sur la trajectoire qui s'est créée sur le timeline ou mieux encore en faisant Contrôle/Tester l'animation.
Procédons de la même façon pour continuer le mouvement du fichier sur la scène pour les autres points de la timeline.
On pourrait par exemple créer successivement 3 autres points clé (ou mieux image-clé): au point 30, au point 40 et au point 50.
Donc au point 30: création de l'image-clé; retour au point 15: créer l'interpolation de mouvement; retour au point 30 et
déplacer l'image sur la scène.
Aller au point 40: création de l'image-clé; retour au point 30: créer l'interpolation de mouvement; retour au point 40 et
déplacer l'image sur la scène.
Répétez la procédure pour continuer le tracet du fichier gif du point 40 ou point 50.
5) Faites Insertion/Calque : nommez ce nouveau calque gif2 et procédez comme avant en récupérant de nouveau le fichier gif depuis la bibliothèque et en positionnant de façon différente (par rapport au premier tracet) ce fichier sur la timeline (la ligne du temps de l'animation).
Faites des essais: par exemple placez des images-clé cette fois aux points 10; 20 ; 35 et 50, comme j'ai fait pour la mienne, en laissant la partie 20-30 statique (c'est-à-dire en mettant une interpolation de mouvement, mais sans déplacer effectivement le fichier gif sur la scène).
Pour vous orienter dans les directions à donner à ce fichier qui est identique au précédent,
je signale que vous reconnaissez sur quel calque vous travaillez, car le fichier gif est encadré de bleu sur la scène.
6) Ajoutons maintenant un autre effet: nous voulons que la vision du fichier gif sur un endroit de l'image ne soit pas continue: insérons un autre calque que nous appellerons gif3. Plaçons-nous au point 15 de la timeline du calque et prenons de nouveau de la bibliothèque le fichier gif.
Vous pourrez observer qu'il ne sera visible qu'à partir du point 15 jusqu'au point 50 et invisible du point 1 au point 15. Mais si vous avez bien compris il est indispensable de l'insérer seulement quand on a crée le point 15, comme image-clé, car autrement il sera statique sur toute la ligne du temps.
Dans mon cas j'ai placé le fichier en question en haut à droite.
Comme vous noterez, je me suis toujours arrangée dans mon animation pour que les 3 fichiers gif ne se touchent jamais durant leur trajet.
Vous pouvez aussi faire la même chose avec des fichiers gif différents et pourquoi pas avec un nombre supérieur de fichiers gif insérés.
Pour chaque fichier gif il faudra mettre un calque.
7) Insérons maintenant le fichier son: Insérez/calque et appelons-le son.
Se placer sur le point 1 de la timeline du calque son et transférez le fichier son depuis la bibliothèque vers la scène, comme
indiqué ci-dessus. Si le fichier son n'est pas très long, ouvrir les options (avec la touche droite de la souris sur timeline du calque son
et sélectionner Propriétés: mettez alors 10 dans boucle, ce qui permettra d'entendre le fichier son en continuation.
A la fin de mon travail, voici la partie relative à la timeline que j'ai obtenue:
8) Faites maintenant la sauvegarde de l'animation obtenue:
- Fichier/exporter l'animation et vous aurez un fichier SWF, commode à envoyer par courrier en fichier attaché ou à insérer dans une page web.
- Fichier/Enregistrer sous et vous obtiendrez un fichier FLA qui pourra s'ouvrir dans Flash.
*****************
Si vous voulez ustiliser un fichier SWF DANS UNE PAGE WEB, je vous donne le code source pour Internet Explorer 4 (et plus) à mettre à l'endroit de la page web où vous voulez faire apparaître l'animation en flash. Téléchargez le code source ICI .
Se rappeller que tous les éléments qui composent l'animation- fichiers graphiques et fichiers sonores-devront être placés dans le même repertoire que la page web où vous avez placé le fichier swf.
Il faudra seulement changer au code que je vous joins le nom animation.swf par le nom de votre fichier swf.
*****************
Bon amusement avec Flash.
Lorenza
Tutoriel écrit le 04/11/03 dans le contexte du groupe franco-flash, fondé et dirigé par Mario Panone.
