Pour la version anglaise de ce tutoriel cliquez sur le drapeau :
Si vous voulez visualiser le scrippy modèle, cliquez ICI.
PREPARATION DU MATERIEL
Pour réaliser ce scrippy vous n'aurez besoin que d'un glitter, comme celui-ci:
Vous pouvez en trouver d'autres ICI, le site des glitters, tuiles scintillantes.
Si vous voulez vous pourrez en créez vous-mêmes en suivant les procédés indiqués ICI.
Vous aurez également besoin d'un background que vous pourrez réaliser de façon libre avec votre logiciel Paint Shop Pro en partant d'une des images de votre choix. Pour mon background, je suis partie d'une image que j'ai redimensionnée et à laquelle j'ai ajouté un nouveau calque où j'ai versé de la couleur blanche avec l'outil pot de peinture et j'ai mis environ 50 % d'opacité dans la fenêtre des calques, puis après avoir fusionné les calques, j'ai appliqué 2 fois le filtre seamless tile de FM tile Tools (une fois Vertical coché et une fois Vertical non coché). Pour terminer, j'ai appliqué le filtre Canvas de Texturizer, Scaling : 100%, Relief : valeur 2 et direction : Top Right. Enfin j'ai sauvegardé dans le format *jpg.
Mais naturellement ce n'est qu'un exemple de fond que l'on peut créer.
INSTALLATION DU SCRIPPY
Ouvrez votre logiciel Scrippy et cliquez sur l'icône représentant une page blanche. Dans la fenêtre qui s'ouvrira, cliquez sur Ok.
1) Faites Insert/Background. Cliquez sur Browse pour aller rechercher votre background. Scrolling: No scrolling. Et ne changez aucune autre option (aucun mot coché dans Advanced options et tout doit rester à 0).
2) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 20 ; Specified Size: 10
- Vertical Layout: Set Position and Height: Position from Top: 0 ; Specified Size: 20
3) Faites Insert/Background. Cliquez sur Browse pour aller rechercher votre glitter. Scrolling: Down. Pixels per second : 10 ; pixels per move : 1: Smoll scroll : coché.
Et ne changez aucune autre option (aucun mot coché dans Advanced options et tout doit rester à 0).
4) Faites Insert/frame et donnez lui les valeurs suivantes : Style : groove; with : 1; couleur: noir .
5) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 50 ; Specified Size: 10
- Vertical Layout: Set Position and Height: Position from Top: 0 ; Specified Size: 50
6) Faites Insert/Background. Dans la case Browser, cliquez sur le petit triangle de droite de la case de la recherche et sélectionnez votre glitter (il n'est pas nécessaire d'aller le rechercher dans le dossier, il est déjà inséré dans ce menu déroulant). Gardez les mêmes valeurs que dans le point précédent : Scrolling: Down, Pixels per second : 10 ; pixels per move : 1: Smoll scroll : coché.
Et ne changez aucune autre option (aucun mot coché dans Advanced options et tout doit rester à 0).
7) Faites Insert/frame et donnez lui les valeurs suivantes : Style : groove; with : 1; couleur: noir .
Si vous préférez, utilisez cet autre procédé : placez-vous sur le premier frame, et faites Edit/copy frame. Puis placez-vous sur la dernière des cases et faites Edit/paste frame.
8) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 80 ; Specified Size: 10
- Vertical Layout: Set Position and Height: Position from Top: 0 ; Specified Size: 20
9) Faites Insert/Background. Faites exactement comme au point 7.
10) Faites Insert/frame, exactement comme au point 8.
11) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 0 ; Specified Size: 50
- Vertical Layout: Set Position and Height: Position from Top: 20 ; Specified Size: 10
12) Faites Insert/Background. Faites exactement comme au point 7, mais dans Scrolling, choisissez Right.
13) Faites Insert/frame, exactement comme au point 8.
14) Faites Insert/Container/ Positioned Container :
- Horizontal Layout: Set Left and Right Egdes (deuxième colonne) : from Left: 60 ; From Right: 0
- Vertical Layout: Set Position and Height (première colonne) : Position from Top: 20 ; Specified Size: 10
15) Faites Insert/Background. Faites exactement comme au point 7, mais dans Scrolling, choisissez Right.
16) Faites Insert/frame, exactement comme au point 8.
17) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 20 ; Specified Size: 10
- Vertical Layout: Set Position and Height: Position from Top: 30 ; Specified Size: 50
18) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Down.
19) Faites Insert/frame, exactement comme au point 8.
20) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 80 ; Specified Size: 10
- Vertical Layout: Set Position and Height: Position from Top: 30 ; Specified Size: 50
21) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Down.
22) Faites Insert/frame, exactement comme au point 8.
23) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 0 ; Specified Size: 20
- Vertical Layout: Set Position and Height: Position from Top: 50 ; Specified Size: 10
24) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Right.
25) Faites Insert/frame, exactement comme au point 8.
26) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Left: 30 ; Specified Size: 50
- Vertical Layout: Set Position and Height: Position from Top: 50 ; Specified Size: 10
27) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Right.
28) Faites Insert/frame, exactement comme au point 8.
29) Faites Insert/Container/ Positioned Container :
- Horizontal Layout: Set Left and Right Edges (deuxième colonne) Position from Left: 90 ; From Right : 0
- Vertical Layout: Set Position and Height (première colonne) : Position from Top: 50 ; Specified Size: 10
30) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Right.
31) Faites Insert/frame, exactement comme au point 8.
32) Faites Insert/Container/ Positioned Container et vous compléterez la partie à gauche en mettant les valeurs suivantes:
- HorizontalLayout: Set Position and Width: Position from Left: 0 ; Specified Size: 50
- Vertical Layout: Set Position and Height: Position from Top: 80 ; Specified Size: 10
33) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Right.
34) Faites Insert/frame, exactement comme au point 8.
35) Faites Insert/Container/ Positioned Container:
- Horizontal Layout: Set Position and Width (première colonne) : Position from Left: 50 ; Specified Size: 10
-Vertical Layout: Set Top and Bottom Edges (deuxième colonne) : Position from Top: 60 ; From Bottom: 0
36) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Down.
37) Faites Insert/frame, exactement comme au point 8.
38) Faites Insert/Container/ Positioned Container:
- Horizontal Layout: Set Left and Right Edges (deuxième colonne) : From Left: 60 ; From Right : 0
- Vertical Layout: Set Position and Height (première colonne) : Position from Top: 80 ; Specified Size: 10
39) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Right.
40) Faites Insert/frame, exactement comme au point 8.
41) Faites Insert/Container/ Positioned Container :
- Horizontal Layout: Set Position and Width (première colonne) : Position from Left: 20 ; Specified Size: 10
-Vertical Layout: Set Top and Bottom Edges (deuxième colonne) : From Top: 90 ; From Bottom : 0
42) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Down.
43) Faites Insert/frame, exactement comme au point 8.
44) Faites Insert/Container/ Positioned Container :
- Horizontal Layout: Set Position and Width (première colonne): Position from Left: 80 ; Specified Size: 10
- Vertical Layout: Set Top et Bottom Edges (deuxième colonne) : From Top: 90 ; From Bottom : 0
45) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez Down.
46) Faites Insert/frame, exactement comme au point 8.
On a ainsi fini de faire la tresse avec les 3 espèces de barres sur le haut et sur la gauche. Passons maintenant à construire l'espace pour le message:
47) Faites Insert/Container/ Positioned Container et vous compléterez la partie à droit en mettant les valeurs suivantes: From Left : 250; From Right : 50 ; From Top : 350 ; From Bottom : 50 .
48) Faites Insert/Background. Faites exactement comme au point 7. Dans Scrolling, choisissez No scrolling.
49) Faites Insert/frame, exactement comme au point 8.
50) Faites Insert/Container/ Positioned Container (la case devra bien être décalée vers la droite car elle est interne au Container précédent : regardez la deuxième capture ci-dessous) et vous compléterez la partie à droite en mettant les valeurs suivantes:
-Cochez Set Left and Right Edges et mettez :
From Left : 8
From Right : 8
Cochez Set top and Bottom Edges et mettez :
From top : 8
From Bottom : 8
51) Faites Insert/Background. Sélectionnez votre background et mettez les valeurs suivantes: dans Scrolling, choisissez Down+ Left: Smooth scroll coché; Pixels per second : 100; pixels per move : 10 ; Cochez la case Layer with others objects et mettez 10 dans Transparency. Les autres cases restent à 0.
52) Faites Insert/frame, exactement comme au point 8.
53) Insert Message Area et placez-le complétement à gauche dans la listes des cases. Mettez les marges qui tiennent comptent des positions du positionned container qui lui est destiné, donc celles de la case 47. Voici les marges justes pour les dimensions données au positioned container de la case 47. Left: 270; Top: 370; Right : 70; Bottom : 70. De cette manière le container et son espace destiné au message area s'adaptera à la longueur du message.
Il ne vous reste qu'à compléter en mettant un loading message, un tiker et de la musique (sound).
Au total, donc, dans mon scrippy il y a exactement 57 cases.
.
************
Pour vous aider à bien placer les containers, voici les captures
d'images
de 2 parties des cases du scrippy :
première partie des cases
partie finale des cases
Les cases intermédiaires ont la même disposition que celles de la première partie.
En somme tous les containers sur parallèles les uns par rapport aux autres et tous les uns au-dessous des autres, sauf celui du container interne du container du Message area: il doit donc être décalé vers la droite pour qu'il soit interne.
******************
Ce tutoriel a été créé le 07 décembre 2002 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
.
