TUTORIEL "SIRENES"




Si vous voulez visualiser le scrippy modèle, cliquez ICI.



PREPARATION DU MATERIEL

Pour réaliser ce scrippy vous aurez besoin de :
- 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.
- un fichier gif animé. Moi, j'ai choisi celui-ci:



- 4 fichiers gif ayant chacun les mêmes couleurs, mais réglées avec une alternance diverse, comme celles que je me suis créées:

J'ai utilisé les couleurs bleu, blanc, rouge (à noter que dans le montage du fichier gif dans AnimationShop le bleu est devenu noir).
Pour le premier, j'ai mis la succession bleu-blanc-rouge.
Pour le deuxième, j'ai mis la succession blanc-bleu- rouge.
Pour le troisième, j'ai mis la succession rouge-bleu-blanc.
Pour le quatrième, j'ai mis la succession rouge-blanc-bleu.
Vous pouvez créer des fichiers gifs tricolores avec des couleurs différentes ou bien avec des tuiles différentes. J'ai préféré les couleurs, car avec le fond blanc, j'obtiens un effet qu'il est difficile d'obtenir en utilisant des tuiles colorées.


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.

La numération que vous verrez ci-dessous correspond à la succession des cases dans Scrippy. Vous noterez que j'ai utilisé le système des positioned containers pour faire des regroupements bien commodes pour pouvoir répéter rapidement l'effet à partir du centre vers les 4 angles du scrippy.

1) Insert/Container/Positioned Container. Il suffira de mettre 0 dans les cases de la colonne de droite pour Left, Right, Top et Bottom.

2) Faites Insert/Background. Cliquez sur Browse pour aller rechercher votre background. Scrolling: down+left. Smooth Scroll: coché; Pixels per second: 10; Pixels per move: 1. Et ne changez aucune autre option (aucun mot coché dans Advanced options et tout doit rester à 0).
Si vous voyez que l'effet central ne s'active pas, vous pouvez aussi choisir No scrolling pour ce background.

3) Insert/Container/Positioned Container. Il suffira de taper 5 dans les cases de la colonne de droite pour Left, Right, Top et Bottom.

4) Faites Insert/Background. Mettre la couleur blanche.

5) Faites Insert/Container/ Positioned Container et laissez-le dans la position où il se trouve et vous complèterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Centre: 0 ; Specified Size: 200
- Vertical Layout: Set Position and Height: Position from Center: 0 ; Specified Size: 200

6) Faites Insert/Container/ Positioned Container et laissez-le dans la position où il se trouve et vous complèterez la partie à gauche en mettant les valeurs suivantes:
- Horizontal Layout: Set Position and Width: Position from Centre: 0 ; Specified Size: 200
- Vertical Layout: Set Position and Height: Position from Center: 0 ; Specified Size: 200
Donc vous avez obtenu exactement la même case que la case 5, mais elle sera décalée vers la droite dans la liste des cases.

7) Faites de nouveau Insert/Container/ Positioned Container et laissez-le dans la position où il se trouve 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: 0 ; Specified Size: 50

8) Insert/background et mettez le premier fichier gif tricolore. Scrolling: No scrolling. Et ne changez aucune autre option (aucun mot coché dans Advanced options et tout doit rester à 0).

9-10) Faites un copier/coller du positioned container de la case 7 (Edit/Copy Positioned Container, puis se placer sur la dernière case de la liste des cases et cliquez sur l'icône Paste) et placez le nouveau container en correspondance de cette case 8. Modifiez seulement 3 données: Horizontal Layout: from Left: 50; Vertical Layout: from Left: 50.
Et comme background mettez le deuxième fichier gif tricolore. 11-12) Faites de nouveau un copier/coller du positioned container de la case 7 (Edit/Copy Positioned Container, puis se placer sur la dernière case de la liste des cases et cliquez sur l'icône Paste) et placez le nouveau container en correspondance de cette case 7. Modifiez seulement 3 données: Horizontal Layout: from Left: 100; Vertical Layout: from Left: 100.
Et comme background mettez le deuxième fichier gif tricolore.

13-14) Faites un copier/coller du positioned container de la case 7 (Edit/Copy Positioned Container, puis se placer sur la dernière case de la liste des cases et cliquez sur l'icône Paste) et placez le nouveau container en correspondance de cette case 7. Modifiez seulement 3 données: Horizontal Layout: from Left: 150; Vertical Layout: from Left: 150.
Et comme background mettez de nouveau le premier fichier gif tricolore.

15-23) Faites un copier/coller du positioned container de la case 6, et mettez-le au fond de la série des cases, bien en correspondance avec la case 6. Puis faites les changements suivants:
- case 16: cochez Horizontal Position from Right.
- case 17: mettez comme background le troisième fichier gif tricolore.
- case 18: cochez Horizontal Position from Right.
- case 19: mettez comme background le quatrième fichier gif tricolore.
- case 20: cochez Horizontal Position from Right.
- case 21: mettez comme background le quatrième fichier gif tricolore.
- case 22: cochez Horizontal Position from Right.
- case 23: mettez comme background le troisième fichier gif tricolore.
Vérifiez en cliquant sur Preview: vous avez obtenu l'effet principal au centre du scrippy. Maintenant il va être très simple de compléter le scrippy.
24-42) Faites un copiez-coller du container de la case 5, puis mettez-le au fond de la série des cases en le tirant vers la gauche, bien en correspondance avec la case 5. Seules modifications: dans la case 24, dans Horizontal Layout, cochez from Left: 0; dans Vertical Layout, cochez from Top: 0. Vous avez ainsi obtenu l'effet en haut à gauche.

43-61) Faites un copiez-coller du container de la case 5, puis mettez-le au fond de la série des cases en le tirant vers la gauche, bien en correspondance avec la case 5. Seules modifications: dans la case 43, dans Horizontal Layout, cochez from Right: 0; dans Vertical Layout, cochez from Top: 0. Vous avez ainsi obtenu l'effet en haut à droite.

62-80) Faites un copiez-coller du container de la case 5, puis mettez-le au fond de la série des cases en le tirant vers la gauche, bien en correspondance avec la case 5. Seules modifications: dans la case 62, dans Horizontal Layout, cochez from Left: 0; dans Vertical Layout, cochez from Bottom: 0. Vous avez ainsi obtenu l'effet en bas à gauche.

81-99) Faites un copiez-coller du container de la case 5, puis mettez-le au fond de la série des cases en le tirant vers la gauche, bien en correspondance avec la case 5. Seules modifications: dans la case 81, dans Horizontal Layout, cochez from Right: 0; dans Vertical Layout, cochez from Bottom: 0. Vous avez ainsi obtenu l'effet en bas à droite.

Nous allons maintenant construire les 2 petits rectangles pour y mettre un message.

100) Insert/Container/Positioned container et mettez-le bien à gauche dans la liste des cases et complétez dans la colonne de droite: From Left: 220; From Right: 220; From Top : 50; From Bottom: 350.

101) Insert/background et choisissez un des fichiers gif tricolore. No scrolling.

102) Insert/Container/Positioned container et laissez-le dans la position où il se trouve. Cochez la deuxième colonne et tapez 3 dans chacune des cases: from Left, from right; from top et from bottom. On a ainsi obtenu le contour avec un background tricolore.

103) Insert/background et mettez la tuile que vous avez utilisé au point 2 avec les mêmes configurations.

104) Insert/message area. Comme margez, j'ai mis 10 de chaque côté.
Ecrivez votre texte et si vous voulez mettez un fichier gif animé en cliquant sur l'icône représentant les images, puis si vous la voulez bien à gauche avec le texte à droite, dans la fenêtre de dialogue, cochez Flow paste right side. Vous pouvez aussi ajouter une marge autour du fichier gif. Ecrivez le texte du message. N'oubliez pas de cocher Override default scrollbar colors, pour choisir des couleurs pour le scrollbar qui s'harmonisent avec l'ensemble de la réalisation.

105-110) Faites un copier-coller du container de la case 100 et mettez-le bien à gauche dans la liste des cases. Seule modification importante: dans la case 105, mettez From Top: 350; From Bottom: 50. Ecrivez le texte du message.

111) Insert/Message area et mettez-le bien à gauche. Il servira pour donner une couleur au scrollbar de l'ensemble du scrippy. N'écrivez rien ici. Cochez Override default scrollbar colors, pour choisir des couleurs pour le scrollbar qui s'harmonisent avec l'ensemble de la réalisation: en fait, si vous voulez, remettez les mêmes couleurs utilisées pour la case 104.

102) Insert/Positioned Image: plaçons centralement notre fichier gif animé. From Centre: 0 en horizontal et en vertical.

Il ne vous reste qu'à compléter en mettant un loading message, un ticker et de la musique (sound).
Au total, donc, dans mon scrippy il y a exactement 105 cases. .




Ce tutoriel a été créé le 28 août 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 .


Si vous voulez retourner à ma section sur Scrippy, cliquez ICI.