CERCLES ARTISTIQUES
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) Partez d'une image de votre choix. Pour l'effet particulier que nous voulons obtenir ici, il serait important de trouver des images ayant un motif avec au moins une balle, une bulle ou une boule. Moi, je suis partie de l'image suivante
:
http://www.colourkitchen.tk/
Constuisez un cercle, puis redimensionnez-le aux dimensions suivantes: 300 par 300 et faites la sauvegarde dans le format gif optimisé.
Voici en détail comment faire le cercle : appuyez sur l'icône indiquant l'outil Sélection. Dans la fenêtre de la configuration, choisissez Cercle; Progressivité: 1; cochez Anti-alias.
- Placez-vous avec la souris bien au centre de la partie de l'image qui a une forme ronde (bulles, balles, boules) et tracez votre cercle (aidez-vous des chiffres qui défilent en bas à gauche. Pour être au centre vous devez avoir 50 et 50), faites un copier-collez comme nouvelle image.
2) Reprenez le cercle à peine obtenu et donnez-lui maintenant les dimensions de 80 par 80 pixels (celles du carré qui le contient) et faites la sauvegarde du fichier gif.
3) Reprenez l'image de départ et recadrez-la pour qu'elle soit assez haute et étroite, puis collez-la dans un rectangle de 3 par 100 pixels sélectionné. Eliminez les démarcation en vertical. Si vous êtes sur PSP8, l'effet d'image Mosaïque sans jointure vous permet d'obtenir ce résultat plus rapidement. Enregistrez-le comme fichier jpg.
4) Reprenez encore l'image de et recadrez-la pour qu'elle soit assez large et étroite en hauteur, puis collez-la dans un rectangle de 100 par 3 pixels sélectionné. Eliminez les démarcation en horizontal. Si vous êtes sur PSP8, l'effet d'image Mosaïque sans jointure vous permet d'obtenir ce résultat plus rapidement. Enregistrez-le comme fichier jpg.
PROCEDE DANS SCRIPPY
Cette réalisation ne comprend que 4 containers de base dont peuvent dépendent (donc placés vers la droite) d'autres éléments. Le premier sert pour la bordure de gauche, le deuxième pour la bordure de droite, le troisième pour le motif central supérieur et le quatrième pour le message area.
1) Ouvrez dans le logiciel Scrippy un nouveau document: File/New ou bien cliquez sur l'icône correspondante.
Insert/background et mettez la couleur noire.
2) Insert Positioned Container (de ce container dépondront 6 éléments) :
Horizontal Layout (première colonne) : From Left: 1 0; Specified size : 86 ; Vertical Layout (deuxième colonne) : From Top : 0; From Bottom : 0.
3) Insert/Left Border Scroll. Allez chercher votre barre verticiale. Dans Scroll Direction: choisissez Up. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options , ne changez rien.
4) Insert/Right Border Scroll. Allez chercher votre barre verticiale. Dans Scroll Direction: choisissez Down. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options , ne changez rien.
5) Insert/background et cliquez sur Browse pour aller le rechercher votre cercle de 80 par 80 pixels.
Dans Scrolling, mettez Up+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Horizontal Spacing: 80; Transparency: 30; Vertical Spacing: 80.
6) Faites un copier-coller de la case 6 et mettez dans Scrolling : Up+Right.
7) Faites un copier-coller de la case 6 et mettez dans Scrolling : Down+Left.
8) Faites un copier-coller de la case 6 et mettez dans Scrolling : Down+Right.
Si vous ne savez pas faire un copier-coller, répétez simplement la case 6 et ensuite faites le changement dans Scrolling.
La bordure gauche est complétée.
9-15) Faites un copier-coller de la case 2, puis placez la case 9 complètement vers la gauche.
Dans la case 9, dans Horizontal Layout, cochez Right.
La bordure droite est ainsi complétée.
On passe maintenant à construire le motif central supérieur.
16) Insert/Positioned Container et complétez dans la colonne de gauche: Horizontal Layout: Centre: 0; Specified size: 300; Vertical layout: Top: 100; specified size: 300.
17) Insert/Positioned Image: cliquez sur Browse pour aller chercher une image de votre choix: gif animé par exemple comme dans mon cas. Cochez Centre : 0 dans les 2 sens.
18) Insert/Background: cliquez sur Browse pour aller le rechercher votre cercle de 300 par 300 pixels.
Dans Scrolling, mettez Up+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Horizontal Spacing: 300; Transparency: 40; Vertical Spacing: 300.
19) Faites un copier-coller de la case 18 et dans Scrolling, mettez Up+Right.
20) Faites un copier-coller de la case 18 et dans Scrolling, mettez Down+Left.
21) Faites un copier-coller de la case 18 et dans Scrolling, mettez Down+Right.
Le motif central supérieur est terminé. Nous allons passez à constuire le rectangle pour le message area.
22) Insert/Positioned Container et dans la deuxième colonne, mettez : Left: 150; Right : 150; Top: 500; Bottom : 150.
23) Insert/left Border Scroll. Allez chercher de nouveau votre barre verticale. Dans Scroll Direction: choisissez Down. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options , ne changez rien.
24) Insert/Right Border Scroll. Allez chercher de nouveau votre barre verticale. Dans Scroll Direction: choisissez Up. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options , ne changez rien.
25) Insert/Top Border Scroll. Allez chercher votre barre horizontale. Dans Scroll Direction: choisissez Left. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options ne changez rien.
26) Insert/Bottom Border Scroll. Allez chercher votre barre horizontale. Dans Scroll Direction: choisissez Right. Cochez Smooth Scroll; Pixels per Second : 10 ; Pixels per move : 1 et dans Advanced options ne changez rien.
23) Insert/Message Area et mettez-le complètement vers la gauche (on va mettre des marges qui tiendront compte du container dans lequel on va mettre le texte du message pour qu'il aille se mettre à l'intérieur): Left: 180: Right : 180; Top : 530; Bottom : 130.
De cette manière le container s'adaptera à la longueur du texte écrit. Faites un essai pour vérifier.
N'oubliez 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, un ticker et options.
Sauvegardez votre réalisation comme fichier SSC ou comme fichier HTML.
******************
Ce tutoriel a été créé le 26 décembre 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 .
Pour la section Scrippy, cliquez ICI.
Pour la page d'accueil du site, cliquez ICI.