BANDES LATERALES TRIPLES


Pour la version anglaise de ce tutoriel, cliquez sur le drapeau :

Pour le scrippy modèle, cliquez ICI .


PREPARATION DU MATERIEL


Pour cette réalisation, vous aurez besoin de 3 éléments essentiels, 3 backgrounds, que vous préparerez dans Paint Shop Pro:
1) Préparez un fond en partant d'une image de votre choix: il convient de le rendre plutôt clair, en y ajoutant un calque et de la couleur blanche dont vous réduirez l'opacité dans la fenêtre des calques (environ à 60 %). Enregistrez-le dans le format *jpg.
2) Préparez en partant de la même image un papier avec tout simplement une application de Seamless tile de FM tile tools, une fois Vertical coché et une fois vertical non coché. Enregistrez-le dans le format *jpg.
3) Reprenez le background obtenu au point 2 et faites simplement Image/Retourner. Enregistrez-le dans le format *jpg.



PREPARATION DU SCRIPPY

1) Ouvrez un nouveau document dans votre logiciel (cliquez sur l'icône représentant une page blanche) et inséréz votre background : Insert/ Background. Cliquez sur Browse pour aller sélectionner le premier background de fond (le background clair) sur votre HD. Mettez Scrolling :Down+Left; Pixels per second : 10 ; Pixels per move : 1. Cochez Smooth scroll. Dans Advanced options: ne cochez rien et laissez toutes les valeurs à 0.

2) Insert/Positioned container. Mettez : Horizontal Layout/Set Position and Widht (première colonne): From Left : 30 ; Specified size : 100 ; Vertical /set Top and Bottom Edges (deuxième colonne) : From Top : 30 ; From Bottom : 30.

3) Insert Background: recherchez votre deuxième élément construit avant et mettez ces valeurs : Mettez Scrolling : Down+Right; Pixels per second : 10 ; Pixels per move : 1. Cochez Smooth scroll. Dans Advanced options: ne cochez rien et laissez toutes les valeurs à 0, sauf horizontal start où j'ai mis la valeur 100 (cette valeur dépendra des dimensions de votre backgrounds: faites des essais pour bien faire partir ce background en même temps que celui de droite).

4) Insert Frame. Style : Solid; Widht : 1; une couleur de votre choix: associez-la au reste de la réalisation. Moi, j'ai mis cette couleur : #003F7D.

5) Insert Frame. Style : Solid; Widht : 1; une couleur de votre choix: associez-la au reste de la réalisation. Moi, j'ai mis cette couleur : #FFFFB3.

6-9) Cliquez sur la case 2 et faites Edit/Copy Positioned Container. Puis cliquez sur la case 5 et cliquez sur le bouton Paste. Déplacez ce container vers la gauche , en parallèle et bien en correspondance du premier container. Maintenant changez les mesures : dans l'ordre 60/100/60/60.

10-13) Répétez la procédure 6-9 et cette fois-ci mettez les mesures suivantes : 90/100/90/90.
Nous venons de complétez la partie gauche. Passons à la partie droite.

14-17) Répétez la procédure 6-9 et cette fois mettez comme background le troisième que vous avez créé et gardez les mesures 30/100/30/30, mais dans Horizontal il faudra cocher Right.

18-21) Répétez la phase 14-17, toujours Horizontal Right et cette fois les mesures sont: 60/100/60/60.

22-25) Répétez la phase 14-17, toujours Horizontal Right et cette fois les mesures sont: 90/100/90/90.
Si vous cliquez maintenant sur Preview, vous verrez que vous avez obtenu les 3 colonnes latérales de chaque côté. Maintenant construisons l'espace pour le Message area :

26-30) Répétez la phase précédente, et mettons les valeurs suivantes au Positioned Container (deuxième colonne) : 200/200/120/120.
Ajoutons un background : le deuxième ou le troisième et donnez à chacun des 2 backgrounds de ce container une direction différente et une transparence de 50.

31) Insert/Message area, complètement décalé vers la gauche (il ne dépend pas du dernier container) et mettez les marges : Left : 210 ; Right : 210 ; Top : 130; Bottom : 130. Puisque nous avons utilisé des mesures relatives et non fixes, ce Message area doit se retrouver à l'intérieur du container du Message Area (les marges sont donc légèrement plus grandes par rapport aux dimensions indiquées dans le container (case 26).

Colorez aussi votre Scrollbar en cochant Override Scrollbar default colors et sélectionnez des couleurs de votre choix.


Il ne vous reste plus qu'à ajouter un ticker, la musique, un éventuel loading message.

Sauvegardez votre réalisation comme fichier SSC ou bien comme Webpage.


*******************

Ce tutoriel a été créé le 02 février 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