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 suivants :
1) un papier de base qui servira de background: vous pouvez utiliser une tuile obtenue en partant d'une image de base ou autre ou bien, un papier obtenu en appliquant un effet seamless tile de chaque côté. Si vous êtes sur PSP8, l'effet d'image Mosaïque sans jointure vous permet d'obtenir ce résultat plus rapidement.
2) Choisissez une tuile carrée ayant un motif identique sur les 4 côtés. Voici celle que je me suis créée en utilisant en particulier le filtre Uleod Effect/Art texture:
Rédimensionnez-la éventuellement à 80 par 80 pixels.
Faites Calques/transformez en calque.
3) Appuyez sur l'icône indiquant l'outil Sélection. Dans la fenêtre de la configuration, choisissez Cercle; Progressivité: 1; cochez Anti-alias.
4) Placez-vous avec la souris bien au centre du carré (aidez-vous des chiffres qui défilent en bas à gauche. Pour être au centre vous devez avoir 40 et 40), puis réalisez un cercle qui recouvre presque le carré et tapez sur la touche CANC de votre clavier pour effacer la sélection. Sauvegardez ce fichier dans le format gif optimisé (en mettant une couleur du contour du cercle comme couleur d'arrière-plan) en le nommant par exemple carré-cercle.
5) Retournez en arrière au passage de la création du cercle sélectionné.
Ouvrez un nouveau carré fond transparent de 80 par 80 pixels, et faites un copier/coller du cercle que vous venez de créer vers ce carré. Cliquez de nouveau sur l'icône Sélection et cette fois, choisissez Etoile-1 ; Progressivité : 1; cochez Anti-alias. Positionnez votre souris en bas à droite de votre cercle et formez une étoile. Cliquez sur la touche CANC de votre clavier pour effacer la sélection. Fusionnez les calques visibles et enregistrez le fichier (donc un cercle contenant une étoile transparente) dans le format gif en le nommant par exemple cercle-etoile.
6) Retournez en arrière au passage de la création de l'étoile sélectionnée dans le cercle. Faites Sélections/Intervertir. Puis tapez sur la touche CANC de votre clavier pour éliminer la sélection. Il vous reste donc une étoile fond transparent que vous enregistrez dans le format gif en nommant ce fichier tout simplement Etoile.
PROCEDE DANS SCRIPPY
Cette réalisation ne comprend que 8 cases principales, toutes les unes au-dessus des autres, sans retrait vers la droite, donc toutes bien placées complètement à gauche.
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 le rechercher dans le dossier de votre HD où vous l'avez sauvegardé. Ce sera la papier qui servira de fond à l'ensemble (le premier background construit précédemment).
Dans Scrolling, mettez Down+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Ne changez rien dans les options de Advanced options (tout reste à 0).
2) Insert/Left Border Scroll. Allez chercher votre étoile en gif. Dans Scroll Direction: choisissez Down. Cochez SmoothScroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 20. Space between : 80 ; Starting Position : 0.
3) Insert/Left Border Scroll. Allez chercher cette fois votre cercle avec étoile transparente. Dans Scroll Direction: choisissez Up. Cochez SmoothScroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 20. Space between : 80 ; Starting Position : 0.
4) Insert/Left Border Scroll. Allez chercher cette fois votre carré contenant un cercle transparent. Dans Scroll Direction: choisissez None. Dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 0. Space between : 0 ; Starting Position : 0.
5) Insert/Top Border Scroll. Allez chercher cette fois votre étoile en gif. Dans Scroll Direction: choisissez Lef. Cochez SmoothScroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 20. Space between : 80 ; Starting Position : 0.
6) Insert/Top Border Scroll. Allez chercher cette fois votre cercle avec étoile transparente. Dans Scroll Direction: choisissez Right. Cochez SmoothScroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 20. Space between : 80 ; Starting Position : 0.
7) Insert/Top Border Scroll. Allez chercher cette fois votre cercle avec carré contenant un cercle transparent. Dans Scroll Direction: None. Dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 0. Space between : 0 ; Starting Position : 0.
8) Insert/Message Area: il sera à gauche dans la liste des cases (comme toutes les autres cases d'ailleurs).
Puisque qu'il faut tenir compte de la largeur des borders scrolls, voici les bonnes marges du Message area : From Left : 130 ; From Right : 50 ; From Top : 230 ; From Bottom : 130. De cette manière le message sera bien dans la zone centrale et me permettra aussi de faire voir suffisamment le background.
Mais vous pourrez varier ces marges selon vos propres exigences.
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 22 septembre 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
.
