Si vous voulez voir un exemple de scrippy créé avec la technique indiquée dans ce tutoriel, cliquez ICI.
Cliquez au contraire ICI
pour voir un scrippy avec 2 cadres animés, dont un pour le Message area, comprenant aussi les explications pour l'obtenir.
PREPARATION DU MATERIEL
Préparez dans Paint Shop Pro, les 3 éléments suivants :
1) un papier de base qui servira de background: vous pouvez utiliser comme moi, une tuile obtenue en partant d'une image de base ou autre.
2) Un cadre, en partant de la même image, de 250 par 250 pixels. Il devra avoir exactement ces dimensions pour que l'effet fonctionne parfaitement aux 4 angles, autrement il faudra prévoir des dimensions de par exemple 400 par 400. ou si on le veut plus petit, de 300 par 300. Mais il devra toujours être carré.
3) une tuile avec un autre motif. Moi, je me suis créé celle-ci en partant d'un motif doré, retravaillé:
En fait, selon le motif de base, il convient de créer une tuile de petites dimensions qui s'harmonise bien, par association de couleurs ou par contraste.
4) un petit carré de 50 par 50 pixels, encore du même motif de la tuile précédente. Voici le mien :
C'est le petit carré qui sera utilisé pour le cadre animé. Donc il est important qu'il ait des bords qui se correspondent pour la phase où les carrés se touchent dans l'animation. Donc un conseil est d'utiliser les filtre Simple, top left mirror ou quick tile, à la fin de la réalisation du fichier.
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 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 No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0).
2) Insert/frame. J'ai choisi : Style : groove; widht : 2; couleur : noir. A vous de choisir les valeurs qui vous semblent les mieux adaptées à votre projet global.
3) Insert/Positioned container (la première case visible dans la capture ci-dessous
Dans Horizontal Layout, cochez Set Left and Right Edges
(c'est la deuxième colonne qui sera complétée) :
: From left: 20; From Right : 20.
Set Top and Bottom Edges : from Top : 20 ; from Bottom : 20.
4) Insert/ background: et on va sélectionner comme background la tuile réalisée avant (dans mon cas la tuile dorée)
Dans Scrolling, mettez No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0).
5 ) Cliquez sur le premier frame pour le sélectionnez et faites Edit/Copy frame. Placez-vous ensuite sur la case 4 et cliquez simplement sur l'icône Paste (de cette manière vous avez collé la case frame en-dessous de la case 4, le background du positioned container).
6) Insert/Positioned container. Il sera en décalé vers la droite par rapport au premier Positioned container (la quatrième case que vous voyez dans la capture d'écran).
Dans Horizontal Layout, cochez Set Left and Right Edges
(c'est la deuxième colonne qui sera complétée) :
: From left: 30; From Right : 30.
Dans Set Top and Bottom Edges : from Top : 30 ; from Bottom : 30.
7) Insert/ background: et on va sélectionner le tout premier background, celui de la case 1.
Dans Scrolling, mettez No Scrolling. Ne changez rien dans les options de Advanced options (tout reste à 0).
8 ) Cliquez sur le premier frame pour le sélectionnez et faites Edit/Copy frame. Cliquez sur la case 7 pour la sélectionner et cliquez simplement sur l'icône Paste (de cette manière vous avez collé la case frame en-dessous de la case 4 (le background du positioned container).
9) Insert/Positioned container. Avec votre souris, déplacez-le complétement vers la gauche (il sera ainsi exactement en correspondance du Positioned container de la case 3)
Dans Horizontal Layout, cochez Set Position and Height
(c'est toujours dans la première colonne qui sera complétée) :
: From Centre: 0; Specified Size : 350.
Dans Vertical Layout, cochez Set Position and Width
(c'est toujours la première colonne qui sera complétée) :
: From Top : 100; Specified Size : 350.
10-11) Pour ces cases, faites un copier/coller des cases 1 et 2, donc du premier background et du premier frame.
12) Insert/Positioned Image et allez cherchez votre cadre de 250 par 250 pixels. Horizontal et Vertical Position: Centre : 0 dans les 2 cas. Et transparency reste à 0.
Maintenant que nous avons placé le cadre central, nous allons réaliser le cadre animé avec les cases 13-20, toutes bien alignées en-dessous de Positioned Image, comme voyez dans la capture ci-dessus.
13) Insert/Top Border Scroll.
Allez sélectionner un fichier carré de 50 par 50 pixels créé précédemment.
Dans Scroll Direction: choisissez Right. Cochez Fast Scroll; Pixels per Second : 10 ; Pixels per move : 2 et dans Advanced options , cochez Overlap with next object; Space between : 50 ; Starting Position : 0.
14) Faites un copier/coller du Top Border Scroll de la case 13 et changez seulement dans Scroll direction: sélectionnez Left.
15) Insert/Right Border Scroll. Allez sélectionner de nouveau le fichier carré de 50 par 50 pixels créé précédemment.
Dans Scroll Direction: choisissez Up. Cochez Fast Scroll; Pixels per Second : 10 ; Pixels per move : 2 et dans Advanced options , cochez Overlap with next object; Space between : 50 ; Starting Position : 0.
16) Faites un copier/coller du Right Border Scroll de la case 15 et changez seulement dans Scroll direction: sélectionnez Down.
17) Insert/Bottom Border Scroll. Allez sélectionner de nouveau le fichier carré de 50 par 50 pixels créé précédemment.
Dans Scroll Direction: choisissez Right. Cochez Fast Scroll; Pixels per Second : 10 ; Pixels per move : 2 et dans Advanced options , cochez Overlap with next object; Space between : 50 ; Starting Position : 0.
18) Faites un copier/coller du Bottom Border Scroll de la case 17 et changez seulement dans Scroll direction: sélectionnez Left.
19) Insert/Left Border Scroll. Allez sélectionner de nouveau le fichier carré de 50 par 50 pixels créé précédemment.
Dans Scroll Direction: choisissez Up. Cochez Fast Scroll; Pixels per Second : 10 ; Pixels per move : 2 et dans Advanced options , cochez Overlap with next object; Space between : 50 ; Starting Position : 0.
20) Faites un copier/coller du Left Border Scroll de la case 19 et changez seulement dans Scroll direction: sélectionnez Down.
21) Insert/Message Area: mettez-le bien à gauche dans la liste des cases.
Puisque qu'il faut tenir compte de la largeur des containers des bandes latérales, voici les bonnes marges du Message area : From Left : 80 ; From Right : 80 ; From Top : 550 ; From Bottom : 80. De cette manière le message sera bien dans le rectangle central, et en-dessous du cadre animé, avec une petite marge de chaque côté.
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 04 avril 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
.
