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 cliquez ICI.
PREPARATION DU MATERIEL
Préparez dans Paint Shop Pro, les 4 éléments de base en suivant la méthode suivante :
1) Ouvrez dans PSP un nouveau fichier de 200 par 200 pixels, fond noir.
2) Sélectionnez une couleur différente (par exemple le rouge) pour l'avant-plan et pour l'arrière-plan.
3) Cliquez sur le centre du carré à peine créé pour le sélectionner, puis cliquez sur l'outil Texte et choisissez une lettre d'une police qui permet d'avoir un motif identique sur les 4 côtés. Par exemple la lettre E (minuscule) de la police Fleurons que vous pouvez télécharger ICI.
Mettez la taille 200 (à écrire directement dans la champ de la taille) et cliquez sur Ok.
4) Avec l'outil déplacement, déplacez la lettre (qui en fait a une forme de fleur) vers le centre.
5) Faites Edition/copier, puis collez-la comme nouvelle image sur votre plan de travail.
6) Reprenez la nouvelle copie de la fleur (rouge) et placez-la comme nouveau calque sur le carré noir (où vous aurez au préalable éliminé la fleur sélectionnée). De cette manière la fleur sera exactement au centre du carré noir.
Fusionnez tous les calques.
7) Double-cliquez avec la pipette sur la fleur pour la sélectionner. Si la sélection ne recouvre pas toute la fleur, faites Sélection/Modifier/Sélectionnez zones similaires. Ou bien vous pouvez faire une petite sélection avec l'outil lasso, puis faire Sélection/Modifier/Sélectionnez zones similaires.
8) Calques/transformez en calque.
9) Tapez sur la touche CANC de votre clavier pour éliminer la sélection.
10) Sélection/Modifier/Contracter. Et écrivez 5.
11) Calque/Ajoutez un calque bitmap et remplissez-le avec du noir en utilisant le pot de peinture.
12) Fusionnez les calques visibles et sauvegardez dans le format GIF optimisé.
Le carré noir de 200 par 200 pixels avec fleur transparente est terminé.
13) Reprenez le même carré à peine sauvegardé et faites Image/Redimensionner et mettez 50 par 50 pixels et sauvegardez-le avec un autre nom, toujours dans le format gif optimisé.
14) Choisissez une tuile très colorée (plus de couleurs vous aurez plus la réalisation sera suggestive. Donc amusez-vous à chercher des couleurs qui vous plaisent) de 200 par 200 pixels ayant un effet qui se répète sur les 4 côtés. Il est possible d'en créer avec le filtre Ulead/Art texture. Voici celle que je me suis créée et que j'ai utilisée dans ma réalisation:
15) Reprenez la tuile de votre choix et faites-en une copie avec des dimensions de 50 par 50 pixels et sauvegardez-la dans le format jpg en lui donnant un nom différent par rapport à la première tuile.
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 la tuile colorée de 200 par 200 pixels. No scrolling.
2) Insert/Positioned container. C'est le container qui permettra de donner la taille au background. On va donc mettre 1 dans tous les cases de la colonne de droite: ce qui donner un léger bord.
3) Insert/Background et sélectionnez la couleur noire. Elle servira de fond à tous les carrés que nous allons construire.
4) Insert/Positioned Container (celui du grand carré central) et laissez-le dans cette position.
Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Center: 0; Specified size : 400 (c'est le double d'un des côtés du grand carré noir avec fleur transparente construit avant dans Paint Shop Pro).
Dans Vertical layout, mettez From Top : 120 et dans Specified Size : 400.
5) Insert/Positioned Container et laissez-le dans cette position.
Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From left: 0; Specified size : 200
Dans Vertical layout, mettez From Top : 0 et dans Specified Size : 200.
Les 2 backgrounds qui suivent dépendent directement de ce container.
6) Insert/ background : cliquez sur Browse pour aller chercher votre tuile colorée de 200 par 200 pixels.
Mettez Scrolling : Up+Left ; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects
7) Insert/ background : cliquez sur Browse pour aller chercher votre fichier gif fond noir avec fleur transparente de 200 par 200 pixels.
Mettez Scrolling : Down+Right; Pixels per Second : 10 ; Pixels per move : 1. Fast Scroll: coché.
Dans Advanced options cochez Layer with other objects
8 - 10) Cliquez sur la case 5 et faites Edit/Positioned Container. Placez-vous sur la case 7, puis cliquez sur Paste. Puis déplacez la case du container vers la gauche bien en-dessous de la case 5 (tenez la touche gauche de la souris appuyée pour le faire). Changez dans la case 8 : cochez Right. Dans la case 9, Scrolling: Up+Right. Dans la case 10, Scrolling: Down+Left.
11- 13) Répétez l'opération précédente et maintenant mettez les valeurs suivantes. Case 11 : cochez Bottom. Case 12 : Scrolling: Down+Left. Case 13 : Scrolling: Up+Right.
14 - 16) Répétez l'opération précédente et maintenant mettez les valeurs suivantes. Case 14 : cochez Right et Bottom. Case 13 : Scrolling: Down+Right. Case 16 : Scrolling: Up+Left.
Le carré central est terminé. Cliquez sur Preview pour le visualiser. Comme vous pouvez noter, il y a des variations chromatiques bien harmonieuses sur les 4 parties du carré et le mouvement part de l'extérieur pour arriver vers le centre du grand carré.
Passons maintenant à construire les autres motifs sur les bords.
17) 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: 10; Specified size : 100 (c'est la largeur du double du deuxième fichier gif construit avant dans Paint Shop Pro).
Dans Vertical layout, mettez From Top : 10 et dans Specified Size : 100.
18) Insert/Positioned Container.
Dans la première colonne de la fenêtre qui s'ouvre : dans Horizontal Layout : Set Position and Widht, From Left:0; Specified size : 50 (c'est la largeur du deuxième fichier gif construit avant dans Paint Shop Pro).
Dans Vertical layout, mettez From Top : 0 et dans Specified Size : 50.
Les cases 19 - 20 dépendront toutes de ce positioned container et devront être une sur l'autre bien en parallèle.
19) Insert/background : cliquez sur Browse pour aller chercher votre tuile colorée de 50 par 50 pixels.
Mettez Scrolling : Down+Right ; Pixels per Second : 100 ; Pixels per move : 1. Fast Scroll: coché. Dans Advanced options cochez Layer with others objects.
20) Insert/background : cliquez sur Browse pour aller chercher votre fichier gif avec la fleur transparente de 50 par 50 pixels.
Mettez Scrolling : Up+Left ; Pixels per Second : 10 ; Pixels per move : 1. Fast Scroll: coché. Dans Advanced options cochez Layer with others objects.
21 - 23) Copiez/collez le container de la case 18 et après avoir cliqué sur la case 20, cliquez sur Paste et ensuite tirez la ta touche gauche, en correspondance de la case 18 (tenez la touche gauche de la souris appuyée pour le faire).
Faites maintenant les modifications: case 21 : cochez Right.
case 22 : Scrolling : Down+Left. Case 23 : Scrolling: Up+Right.
24 - 26) Répétez l'opération précédente et cette-fois, mettez Case 24 : Left et Bottom. Case 25 : Scrolling : Up+Right. Case 26 : Scrolling : Down+Left.
27 - 29 ) Répétez l'opération précédente et cette-fois, mettez Case 27 : Right et Bottom. Case 28 : Scrolling : Up+Left. Case 29 : Scrolling : Down+Right.
Le premier petit carré est terminé: il se trouve en haut à gauche. Cliquez sur Preview pour le visualiser et vous verrez que le mouvement des fleurs va de l'intérieur vers l'extérieur du petit carré.
Passons à créer les 3 autres petits carrés.
30 - 42) Cliquez sur la case 17 et faites Copy/Positioned Container. Cliquez sur la case 29, puis sur la touche Paste. Puis déplacez vers la gauche en tenant appuyée la touche gauche de la souris en correspondance de la case 17.
Dans la case 30, cochez Right. Le carré va se placer en haut à droite.
43 - 55) Répétez l'opération précédente, mais cette fois vous devez cocher Left et Bottom pour avoir un troisième petit carré en bas à gauche.
56 - 68) Répétez l'opération précédente, mais cette fois vous devez cocher Right et Bottom pour avoir un quatrième petit carré en bas à droite.
69) 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 : 30; Right : 30 ; Top : 600 (hauteur du motif principal et un peu de marge au dessus et en-dessous); Bottom : 120.
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 des couleurs de la tuile 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 02 mai 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
.
