Si vous voulez voir un exemple de scrippy créé avec la technique indiquée dans ce tutoriel, cliquez ICI.
PREPARATION DU MATERIEL
Préparez dans Paint Shop Pro, les éléments suivants :
1) un papier de base qui servira de background (fond) : partez d'une image de votre choix avec un paysage avec différents que vous voudrez animer:
a) Donnez-lui des dimensions assez grandes (400 de largeur environ) et appliquez le filtre Semless tile de FM tile tools, Vertical coché, puis Vertical pas coché pour ne pas avoir de démarcation autour du papier.
b) Pour le rendre plus clair, ajoutez un calque normal et ajoutez du blanc avec le pot de peinture et dans la fenêtre des calques bassez l'opacité selon votre préférence, pour rejoindre la juste lumière.
2) Un cadre, en partant de la même image, de 400 par 314 pixels (ce sont les dimensions du mien; vous pourrez lui donner d'autres dimensions).
3) Faites une copie du cadre précédent et transformez-le en calque. Utilisez la méthode que vous maîtrisez le mieux pour éliminer les parties où vous voudrez voir un mouvement à la fin du procédé. Les techniques les plus efficaces pour ce genre de travail consistent ou à utiliser la gomme ou l'outil lasso. Moi, personnellement je préfère celle-ci: je sélectionne une petite partie avec le lasso et je tape sur la touche CAC de mon clavier. Puis sans désélectionner, je fais une autre petite partie (qui peut même passer sur la précédente) et je tape sur Canc et ainsi de suite jusqu'à éliminer ce que je veux. A ce moment-là avec la pipette, je sélectionne une couleur du contour éliminé que je mets en arrière-plan, puis j'enregistre comme fichier gif optimisé (procédé que vous retrouverez dans d'autres de mes tuts).
4) Créez une tuile qui servira en trasparence pour l'eau. Voici celle que je me suis créée :
je l'ai créée en partant d'une image avec de l'eau dont j'ai sélectionné une partie, puis là aussi j'ai appliqué Semless tile 2 fois comme indiqué plus haut.
5) Créez une tuile qui servira pour les contours du scrippy et du cadre centra. Voici une de celles que je me suis créées:
et que je vous offre bien volontiers.
PROCEDE DANS SCRIPPY
1) Ouvrez dans le logiciel Scrippy un nouveau document: File/New ou bien cliquez sur l'icône correspondante. Insérez un background de votre choix: Insert/background et cliquez sur Browse pour aller rechercher dans le dossier de votre HD la tuile qui vous servira pour les contours (l'élément 5 créé dans Paint Shop Pro)
Dans Scrolling, mettez No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0).
2) Insert/Positioned container. Dans la partie droite de la fenêtre qui s'ouvre mettez 8 dans toutes les cases (Dans Horizontal Layout, cochez Set Left and Right Edges :
: From left: 8; From Right : 8.
Set Top and Bottom Edges : from Top : 8 ; from Bottom : 8).
De cette manière on aura une bordure d'une largeur de 8 pixels.
3) Insert/background (il sera décalé par rapport à la case Positioned Container dont il dépendra) et cliquez sur Browse pour aller rechercher dans le dossier de votre HD le papier qui servira pour le fond (l'élément 1 créé dans Paint Shop Pro).
Dans Scrolling, mettez No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0)
4) Insert/frame (bien en-dessous du background précédent). J'ai choisi : Style : groove; widht : 1; couleur : noir. A vous de choisir les valeurs qui vous semblent les mieux adaptées à votre projet global.
5) Insert/Positioned container (et placez cette case bien à gauche en la traînant avec la souris)
Cette fois-ci c'est dans la partie gauche de la fenêtre qu'il faudra compléter.
Dans Horizontal Layout, cochez Set Position and Height
: From Centre: 0; Specified Size : 420.
Dans Vertical Layout, cochez Set Position and Width
(toujours la première colonne qui sera complétée) :
: From Top : 150; Specified Size : 334.
Comment obtenir ces mesures? c'est simple. En Horizontal on a 420 et en Vertical 334 (donc 20 pixels en plus par rapport aux dimensions du cadre, justement pour créer la bordure dorée).
6) Insert/background (il sera décalé par rapport à la case Positioned Container dont il dépendra) et cliquez sur Browse pour aller rechercher dans le dossier de votre HD la tuile dorée (déjà utilisée pour la bordure extérieure du scrippy)
Dans Scrolling, mettez No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0)
7) Insert/frame (bien en-dessous du background précédent). Faites comme avant (dans mon cas : Style : groove; widht : 1; couleur : noir.
8) Insert/Positioned container (cette case doit rester bien en-dessous des 2 cases précédentes, donc on a 3 cases qui dépendent directement du Positioned container de la case 5.
C'est dans la partie gauche de la fenêtre qu'il faudra compléter.
Dans Horizontal Layout, cochez Set Position and Height
: From Centre: 0; Specified Size : 400.
Dans Vertical Layout, cochez Set Position and Width
(toujours la première colonne qui sera complétée) :
: From Center : 0; Specified Size : 314.
Comment obtenir ces mesures? c'est simple. En Horizontal on a 400 et en Vertical 314, donc exactement les mesures du cadre central).
9) Insert/background (il sera décalé vers la droite par rapport à la case Positioned Container dont il dépendra) et cliquez sur Browse pour aller rechercher dans le dossier de votre HD le papier qui servira pour donner de l'effet à l'eau (l'élément 4 créé dans Paint Shop Pro).
Dans Scrolling, mettez Down+Left. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options , cochez Overlap with next object; Transparency (transparence) : 20 et tout le reste devra rester sur 0.
10) Insert/Positioned container (toujours décalé vers la droite) dépendant du Positioned container précédent.
C'est dans la colonne de gauche de la fenêtre qu'il faudra compléter.
Dans Horizontal Layout, cochez Set Position and Height
: From Centre: 0; Specified Size : 100.
Dans Vertical Layout, cochez Set Position and Width
(toujours dans la première colonne) :
: From Top : 0; Specified Size : 100.
Comment obtenir ces mesures? En Horizontal j'ai mis 100 et en Vertical 100 car je veux placer la tuile qui servira pour le soleil.
11) Insert/Positioned Scroll: Layout: Vertical; Scroll : Up ou Down (juste pour faire noter un peu cette zone). Pixels per Second : 100 ; Pixels per move : 10. Fast Scroll: coché.
Position : Distance Center : 220 (c'est la juste position dans mon cas pour mettre la tuile dans la zone où il y a le soleil).
12) Insert/Positioned container (avec la souris, déplacez-le vers la gauche, en correspondance de la case 8).
C'est dans la colonne de gauche de la fenêtre qu'il faudra compléter.
Dans Horizontal Layout, cochez Set Position and Height
: From Centre: 0; Specified Size : 400.
Dans Vertical Layout, cochez Set Position and Width
(toujours dans la première colonne) :
: From Center : 0; Specified Size : 314.
Comment obtenir ces mesures? En Horizontal j'ai mis 400 et en Vertical 314, car maintenant on va placer les 2 cadres superposés qui donc recouvrent les autres éléments du cadre global .
13) Insert/background (il sera décalé par rapport à la case Positioned Container dont il dépendra) et cliquez sur Browse pour aller rechercher dans le cadre base (donc le cadre sans parties éliminées (l'élément 2 créé dans Paint Shop Pro).
Dans Scrolling, mettez No Scrolling. Cochez Layer with other objects (ce qui associera ce background à celui qui sera placé tout de suite après). Dans Advanced options, mettez la transparence à 30 (tout le reste doit être sur 0)
14) Insert/background (il sera bien en-dessous du background précédent) et cliquez sur Browse pour aller rechercher dans le cadre dans le format gif (donc le cadre avec les parties éliminées (l'élément 3 créé dans Paint Shop Pro).
Dans Scrolling, mettez No Scrolling. Ne cochez pas Layer with other objects Dans Advanced options, laissez tout à 0, y compris la transparence.
15) Insert/Positioned Image (toujours bien en-dessous des 2 backgrounds précédents): je vais ajouter un fichier gif avec des oiseaux que je positionnerai en haut du cadre. Donc je mets From Center: 0; From Top : O. Transparence à 0.
16) Insert/Message Area: mettez-le bien à gauche dans la liste des cases. Associé avec de justes mesures, cela nous permettra d'avoir un espace de message de scrippy toujours bien à l'intérieur de la bordure extérieure et en-dessous du cadre et qui s'adaptera à la longueur du message.
Donc dans notre cas, nous allons mettre :
From Left : 30 ; From Right : 30 ; From Top : 530 (qui tient compte de la hauteur du cadre et des marges au-dessus et en-dessous du cadre, avant le message) ; From Bottom : 30.
N'oublions pas de mettre des couleurs au Scrollbar en cochant Overrid Scrollbar color et en choisissant les 2 couleurs en harmonie avec les autres couleurs de la réalisation.
Vous pouvez compléter en ajoutant un sound (musique), un loading message et un ticker.
Sauvegardez votre réalisation comme fichier SSC ou comme fichier HTML.
******************
Ce tutoriel a été créé le 15 avril 2003 dans le contexte des travaux du groupe Franco-scrippy,
fondé par Mario Panone.
Si vous voulez des informations ultérieures sur ce groupe cliquez sur le logo:
Si vous voulez vous inscrire à ce groupe, cliquezICI.
Bon amusementl!
Lorenza p. s: si vous voulez m'écrire pour avoir des informations supplémentaires ou pour me suggérer des conseils, cliquez ICI
.
