CERCLES DOUBLES EN FOLIE

Pour la version anglaise de ce tutoriel, cliquez sur le drapeau :

Si vous voulez voir un exemple de scrippy créé avec la technique indiquée dans ce tutoriel, c'est-à-dire avec 2 cercles, cliquez ICI.
Si vous voulez voir le même scrippy mais avec un seul cercle, cliquez ICI.

PREPARATION DU MATERIEL

Préparez dans Paint Shop Pro, les 2 éléments gifs de base en suivant la méthode suivante :
1) Ouvrez dans PSP un nouveau fichier de 300 par 300 pixels, fond transparent.
2) Cliquez sur l'outil sélection, positionné sur cercle et allez chercher le centre (150; 150: vous verrez défiler les chiffres en bas à gauche de votre logiciel. Dessinez un cercle qui recouvre presque tout le carré.
3) Ouvrez une tuile de votre choix. Moi, j'ai choisi une de mes tuiles dorées :

Copiez-la dans la sélection.
4) Sélection/modifier/contracter et mettez 6. 5) Cliquez sur la touche CANC.
6) Sélection/déselectionner.
7) Dupliquer l'image obtenue et avec cette nouvelle image, faites Image/redimensionner et mettez 250 en largeur et en hauteur.
8) Copiez cette nouvelle image et copiez-la comme nouveau calque dans le carré de 300 par 300.
9) Fusionnez les calques visibles; sélectionnez avec la pipette une couleur du contour que vous mettrez comme couleur d'arrière-plan et faites la sauvegarde comme fichier gif optimisé. Vous avez ainsi obtenu votre fichier de 300 par 300 pixels fond transparent avec 2 cercles dorés l'un dans l'autre.
10) Faites simplement Image/redimensionner et mettez 100 en hauteur et en largeur et faites édition/copier, puis édition/coller comme nouvelle image. Faites la sauvegarde en fichier gif optimisé: vous aurez ainsi un fichier gif fond transparent avec 2 cercles dorés, mais de 100 par 100 pixels.

Au lieu d'utiliser une tuile pour remplir les cercles, vous pouvez, si vous préférez, utiliser une couleur ou bien un dégradé.

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 : Insert/background et sélectionnez une couleur de votre choix (cochez Use the selected color ) qui s'harmonise avec le reste et qui servira de fond à l'ensemble
Dans mon cas, j'ai choisi la couleur suivante: #000000 (le noir) pour que les cercles soient mieux mis en évidence.

2) Insert/Positioned container. C'est le container qui contiendra le motif le plus important et le fichier gif central. Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Center : 0; Specified size : 300 (c'est la largeur du premier fichier gif construit avant dans Paint Shop Pro).
Dans Vertical layout, mettez From Top : 50 et dans Specified Size : la hauteur de votre image gif (dans mon cas, 300).
Les cases 3 - 7 dépendront toutes de ce positioned container et devront être une sur l'autre bien en parallèle.

3) Insert/Positioned Image et allez chercher votre fichier gif animé: Dans mon cas, j'ai choisi celui-ci :

Cochez les cases Centre en horizontal et en vertical: dans les 2 cas on doit avoir 0 comme valeur.

4) Insert/background : cliquez sur Browse pour aller chercher votre fichier gif avec les 2 cercles de 300 par 300 pixels.
Mettez Scrolling : Down ; Pixels per Second : 40 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects (de cette manière le fichier gif animé sera englobé par cet élément).

5) Faites un copier-coller de la case 4 et dans scrolling, choisissez Up.

6) Faites de nouveau un copier-coller de la case 4 et dans scrolling choisissez Left. Décochez dans Advanced options Layer with other objects (de cette manière l'élément sera derrière le fichier fig animé).

7) Faites de nouveau un copier-coller de la case 4 et dans scrolling choisissez Right. Décochez dans Advanced options Layer with other objects (de cette manière l'élément sera derrière le fichier fig animé)

Le motif principal est terminé. Cliquez sur Preview pour le visualiser. Comme vous pouvez noter, 2 éléments passent derrière le fichier gif animé et 2 éléments passent devant.
Passons maintenant à construire les autres motifs sur les bords.

8) Insert/Positioned container. C'est le container qui contiendra le motif en haut à gauche. Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Left: 20; Specified size : 100 (c'est la largeur du deuxième fichier gif construit avant dans Paint Shop Pro).
Dans Vertical layout, mettez From Top : 20 et dans Specified Size : la hauteur de votre image gif (dans mon cas, 100).
Les cases 9 - 12 dépendront toutes de ce positioned container et devront être une sur l'autre bien en parallèle.

9) Insert/background : cliquez sur Browse pour aller chercher votre fichier gif avec les 2 cercles de 100 par 100 pixels.
Mettez Scrolling : Down ; Pixels per Second : 40 ; Pixels per move : 1. Fast Scroll: coché.
Ne touchez rien dans Advanced options.

10) Faites un copier-coller de la case 9 et dans scrolling, choisissez Up.

11) Faites de nouveau un copier-coller de la case 9 et dans scrolling choisissez Left.

12) Faites de nouveau un copier-coller de la case 9 et dans scrolling choisissez Right.

Le premier petit carré avec effet en haut à gauche est complété. Cliquez sur Preview pour le voir.
Passons rapidement à construire les 5 autres petits carrés avec effet.

13 - 17 ) cliquez sur la case 8 et faites Edit/copy positioned container. Placez-vous ensuite sur la dernière case de la liste et cliquez sur l'icône Paste. Puis déplacez la case 13 bien vers la gauche.
Dans la case 13, changez seulement une chose: cochez Right dans Horizontal Layout.

18 -22) Répétez l'opération précédente, et maintenant dans la case 18, cochez Right et Bottom.

23 - 27) Répétez l'opération précédente, et maintenant dans la case 23, vous devrez mettre from Right: 20 et dans Vertical layout: from Center: 0.

28 - 32) Répétez l'opération précédente, et maintenant dans la case 28, vous devrez mettre from Left: 20 et dans Vertical layout: from Center: 0.

33 - 37) Répétez l'opération précédente, et maintenant dans la case 23, vous devrez mettre from Left: 20 et dans Vertical layout: from Bottom: 20.

38) Insert/Message Area et mettez cette case complétement à gauche.
Nous allons calculer les distances pour bien mettre le message entre les différents effets et de telle sorte que le scrippy s'adapte en fonction de la longueur du message écrit. Voici les bonnes mesures des marges en fonction des mesures des autres éléments: Left : 130; Right : 130 ; Top : 400 (hauteur du motif principal et un peu de marge au dessus et en-dessous); Bottom : 130.
Cochez Override Scrollbar color et choisissez les 2 couleurs en harmonie avec les autres couleurs de la réalisation. Moi, j'y ai mis une couleur du fichier gif animé que j'ai récupérée avec la pipette dans Paint Shop Pro.

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 27 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, cliquez ICI.

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 .