BACKGROUNDS MIROIR

Si vous voulez voir un exemple de scrippy créé avec la technique indiquée dans ce tutoriel, cliquez ICI.

PREPARATION DU MATERIEL

Préparez dans Paint Shop Pro, 3 backgrounds en partant d'une même image. L'une servira pour le fond. Appliquez à toutes les trois le filtre Seamless tile de FM tile tools, dans les 2 sens pour éviter les démarcations.
Pour obtenir les 2 autres bandes avec effet miroir, faire un background et le sauvegarder en lui donnant comme nom Image-gauche, par exemple.
Reprendre le même background et faire Image/Retourner et sauvegarder cet autre background en lui donnant par exemple le nom Image-droite.
Dans mon cas, pour les 2 bandes latérales, j'ai ajouté une calque où j'ai mis la couloir noire avec le pot de peinture et j'ai mis une opacité vers 40 %, pour qu'il y ait plus de contraste entre le centre de la composition et les bords latéraux.

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. Pour les autres options, réglez-vous selon la position que vous entendez donner à l'image par rapport au reste. Dans mon cas, j'ai mis 50 dans Horizontal Start.

2) Insert/Positioned container.
Dans Horizontal Layout, cochez Set Position and Width (c'est la première colonne qui sera complétée) : : From left: 0; Specified Size : 100.
Dans Vertical Layout, cochez Set Top and Bottom Edges (deuxième colonne) et mettez from Top : 0, From Bottom : 0.

3) Insert/ background: et on va sélectionner justement le background de gauche créé précédemment.
Scrolling : Right; Cochez Smooth Scroll; Pixels per Second : 10; Pixels per move : 1 et dans Advanced options , cochez Layer with other objects; tout le reste à 0.

4) Insert/Left Border Scroll.
Allez sélectionner un fichier qui crée une bande. Voici celui que je me suis créé:

et que je vous offre ici.

Dans Scroll Direction: choisissez UP. Cochez Smooth Scroll; Pixels per Second : 10; Pixels per move : 1 et dans Advanced options , ne cochez rien et tout le reste à 0.

5) Insert/Right Border Scroll.
Mettez la même configuration que pour le Left Border Scroll, mais cette fois mettez Down comme Scroll Direction.

6-9) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 5 et cliquez sur l'icône Paste. Puis déplacez le container complétement à gauche (bien en correspondance de la case 2).
Modifiez dans Positioned container, seulement Horizontal Layout : mettez From Right.
Dans la case 7, background, cliquez sur Browse pour aller chercher le background de droite (votre troisième background). Dans Scrolling, cette fois il faudra mettre Left. Tout le reste est inchangé, sauf Horizontal start qui devra être sur 100.

10) 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 : 120 ; From Right : 120 ; From Top : 30 ; From Bottom : 30. De cette manière le message sera bien dans le rectangle central 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 12 mars 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 .