COLONNES ANIMEES


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 les 3 éléments suivants :
1) une image de votre choix que vous traiterez dans votre Paint Shop pro pour éliminer toute démarcation sur les quatre côtés: avec le filtre seamless tile de FM tile tools ou bien avec le filtre Mosaïque sans jointure dans PSP 8
2) la même image précédemment obtenue mais renversée et enregistrée avec un autre nom
3) une tuile scintillante (glitter) de votre choix. Voici celui que j'ai utilisé pour ma réalisation:





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 choisissez la couleur noire.

2) Insert/Positioned container et complétez dans la deuxième colonne: From Left: 0 ; From Right: 0; From Top : 0; From Bottom : 0.
C'est un positioned à 0, bien commode pour faire des regroupements de positioned containers qui eux seront placés à des endroits précis de la réalisation, comme vous pouvez voir dans la capture ci-dessous qui représente la première partie des cases de cette réalisation:



3) Insert/Positioned container (il restera décalé vers la droite par rapport au précédent) Dans Horizontal Layout, cochez Set Position and Widht (c'est la première colonne qui sera complétée) : : From left: 50; Specified size : 10.
Dans Vertical Layout, Set Position and Height: from Top : 50 ; specified size : 60.

4) Insert/ background: et on va sélectionner comme background la tuile scintillante (glitter)
Dans Scrolling, mettez Down. Cochez Smooth Scroll. Pixels per second: 10; Pixel per move: 1.
Ne changez rien dans les options de Advanced options (tout reste à 0).

5) Insert/frame. J'ai choisi : Style : groove; widht : 1; couleur : de votre choix (une couleur qui se détache de celle du glitter et du fond noir (dans mon cas, j'ai choisi celle-ci: #0000FF). A vous de choisir les valeurs qui vous semblent les mieux adaptées à votre projet global.

6-8) On va commencer à faire du copier-coller.
Cliquez sur la case 3, et faites Edit/Copy positioned container. Cliquez sur la case 5 et cliquez sur l'icône Paste. Avec la souris appuyée sur la touche 6, déplacez-la vers la gauche en correspondance de la case 3.
Dans la case 6, modifiez seulement Right (au lieu de Left) donc vous aurez Right et Top.

9-11) Répétez la phase précédente, et maintenant cochez Bottom........donc vous avez Left et Bottom.

12-14) Répétez la phase précédente, et maintenant cochez Right et Bottom.

Ce premier regroupement permet d'avoir un petit rectangle avec glitter animé qui se répète dans les 4 angles de la composition. Cliquez sur Preview pour les voir.

15-27) Faisons maintenant un copier-coller de la case 2. Mettons-la bien en-dessous de la numéro 2.
Modifiez dans les 4 positioned containers internes les mesures. Mettez les suivantes: 150/10/100/110.

28-40) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 28 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 200/10/150/60.

41-53 ) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 41 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes : 60/40/50/10.

54-66) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 54 complètement à gauche dans le système des cases. .
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 60/40/100/10.

67-79) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 67 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 110/40/100/10.

89-101) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 89 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les positioned containers internes: 110/40/150/10.

102-114) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 102 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 160/40/150/10.

115-127) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 115 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers: 160/40/200/10.

128-140) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 128 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre: 120/10/30/60 dans les 4 positioned containers internes.

141-153) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 141 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 40/80/30/10.

154-166) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 154 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 130/40/80/10.

167-179) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 167 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 170/10/80/60.

180-192) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 180 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 30/10/30/100.

193-205) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 193 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 40/40/120/10.

206-218) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 206 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 80/10/120/60.

219-231) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 219 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 90/40/170/10.

232-244) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 232 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 130/10/170/60.

245-257) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 245 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 140/80/220/10.

258-270) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 258 complètement à gauche dans le système des cases. br> Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 220/10/130/100.

271-283) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 271 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 180/40/130/10.

284-296) Faisons de nouveau un copier-coller de la case 2. Traînons, avec la souris, la case 284 complètement à gauche dans le système des cases.
Voici maintenant les valeurs à mettre dans les 4 positioned containers internes: 140/80/220/10.

Les 4 angles sont complétés. On passe maintenant à construire les barres verticales de chaque côté qui vont servir à relier au niveau vertical les angles 2 à 2, comme visualisé dans la capture ci-dessous qui représente la partie finale des cases de cette composition:



297) Insert Positioned container: complétez la première colonne : from Right : 130; specified size: 100; deuxième colonne: from Top: 240; from Bottom : 240.

298) Insert/frame: comme dans la case 5.

299) Insert/Background: comme pour la case 4. 300) Insert/Positioned container: remplir la deuxième colonne: from Left : 10; from Right : 10; from Top: 10; From Bottom : 10.

301) Insert/Background et sélectionnez la couleur de la case du frame.

302) Insert/ Positioned container : remplir la deuxième colonne: from Left : 1; from Right : 1; from Top: 1; From Bottom : 1.

303) Insert/Background: cliquez sur Browse et allez chercher l'image créée avant dans PSP qui regarde vers la gauche. Mettez ensuite ces valeurs: Scrolling: Left; cochez Fast Scroll. Pixels per second: 100; pixels per move: 10. Dans horizontal start mettre : -220 (moins 220).

304-310) Faites un copier-coller de la case 297. Placez la case 304 ensuite bien en-dessous de cette case 297.
Modifiez seulement dans la case 304: cochez Left. Et dans la case 310, sélectionnez l'autre image et mettez Scrolling Right et dans Horizontal start: -100 (moins 100).

311) 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 : 240 ; From Right : 240 ; From Top : 280 ; From Bottom : 280.
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 15 octobre 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 .



Va à la Home Page du site Va au document précédent Va à la section principale Va au document successif