TUTORIEL BORDS AVEC TRANSPARENCE CENTRALE
LES OISEAUX
Pour la version anglaise du tutoriel, cliquez sur le drapeau :
Si vous voulez visualiser le scrippy modèle, cliquez
ICI.
Voici une deuxième variante, avec l'utilisation de 2 backgrounds identiques superposés avec direction différente : cliquez ICI pour la visualiser.
Je vais indiquer 2 méthodes pour obtenir ce type de scrippy: une première méthode plus élaborée et une deuxième méthode simplifiée aussi efficace que la première, mais qui prévoit la création d'un barre particulière dans Paint Shop Pro.
PREMIERE METHODE
Préparation du matériel
Pour le réaliser, vous aurez besoin de ce layer:
Tous les autres éléments devront au contraire être créés dans Paint Shop Pro:
- une image plutôt haute dont vous ferez un seemless tile Vertical coché dans Paint Shop: elle vous servira au centre de l'effet de gauche.
- une barre verticale de 400 par 2 pixels que vous colorerez d'une couleur plutôt sombre (elle servira de séparation entre les images-scrolls de l'effet de gauche). Moi, j'ai choisi une couleur bleu foncé.
- une tuile de 400 par 400 pixels que vous préparerez ainsi: ouvrez un carré de ces dimensions dans PSP, et avec la pipette, allez sélectionner une des couleurs de votre image et remplissez-en le carré, puis faites simplement une application du filtre texturizer, sandstone, valeur 2.
- une bande verticale de 400 par 10 pixels : ouvrez un rectangle avec ces dimensions. Dans la palette des styles, allez chercher votre image et remplissez-en votre rectangle. Terminez par un Seamless tile de FM tile tools, vertical coché.
Installation du scrippy
1) Ouvrez votre Scrippy et ouvrez un nouveau fichier vierge (cliquez sur l'icône représentant la page blanche ou bien faites CTRL+N ou encore File/new).
2) placez un premier container en faisant Insert/Container/Positioned container avec les valeurs suivantes :
- Horizontal- Position from Center: 0 - Specified size(taille spécifiée): 800.
- Vertical - Position from Center: 0 - Specified size(taille spécifiée): 400.
3) Insérez maintenant un background: cliquez sur Browse et allez chercher votre tuile de 400 par 400 pixels précédemment créée.
4) Insérez un left border scroll : faites Insert/Left Border Scroll. Cliquez sur Browse pour aller chercher la barre bleu foncé de 400 x 2 pixels. Dans Scroll direction, cochez Down. Dans Scroll speed mettez 10 pixels per second et 1 pixels par mouve et cochez Smooth scroll.
5) Insérez un left border scroll : faites Insert/Left Border Scroll. Cliquez sur Browse pour aller chercher la barre bleu foncé de 400 x 10 pixels (créé en partant de l'image de base). Dans Scroll direction, cochez Down. Dans Scroll speed mettez 20 pixels per second et 1 pixels par mouve et cochez Fast scroll.
6) Cliquez sur la première case portant le nom de Left Border Scroll et faites-en une copie (Edit/copy left border scroll). Cliquez avec la souris sur la dernière case de la liste et faites Edit/Paste Left Border Scroll.
7) Cliquez sur la deuxième case avec le nom Left Border Scroll et faites-en une copie que vous collerez comme indiqué précédemment au fond de la liste. Modifiez seulement la direction du scroll: ici il faut sélectionner Up.
8) Faites un copier-coller comme indiqué ci-dessus de la première case appelée Left Border Scroll.
9) Insérez une nouvelle case Left Border Scroll, et cette fois-ci en cliquant sur Browse allez sélectionner l'image de base. Dans Scroll direction, cochez Down. Dans Scroll speed mettez 10 pixels per second et 1 pixels par mouve et cochez Smooth scroll. Dans Advanced Options, cochez Place over background. Et toutes les autres options doivent être sur 0.
10) Insérez un background (Insert/Background). Cliquez sur Browse et allez chercher votre layer flackdense. Dans Scrolling, cochez Down+Left. Cochez Smooth scroll et mettez 10 pixels per second et 1 pixels par mouve. Cochez tile et dans Advanced Options, cochez Place over background. Mettez 50 comme transparency et laissez toutes les autres options sur 0.
11) Insérez ici votre message area (marges: left 100 et le reste sur 30) et colorez le scrollbar en cochant Override default scrollbars color, puis cliquez sur Set Base Color et sur Set Shadow Color pour sélectionnez les couleurs qui s'harmonisent le mieux avec le reste de votre réalisation.
12) Faites simplement un copier-coller successif des 5 premiers Left Border Scroll, selon la méthode indiquée ci-dessus. Invertez seulement la direction du deuxième (sélectionnez Down) et du quatrième (sélectionnez Up).
La direction des scrolls est de toute façon une chose que vous pouvez modifier comme vous voulez.
Il ne reste qu'à ajouter le son (sound), le ticker et le loading message.
DEUXIEME METHODE
Comme indiqué au début du tutoriel, vous pouvez créer un papier pour le fond et l'utiliser deux fois au lieu de la tuile et du layer (donc pour les 2 backgrounds). Il suffira de lui donner une direction différente, comme dans l'exemple de scrippy que vous pouvez voir ICI.
Préparation du matériel
Dans Paint Shop Pro créez ces 3 éléments:
- une image plutôt haute dont vous ferez un seemless tile Vertical coché dans Paint Shop : elle vous servira au centre de l'effet de gauche.
- Avec comme base la première image, réalisez un background personnel plutôt clair (vous pouvez le rendre clair en mettant un deuxième calque bitmap que vous remplissez de blanc et dans la palette des calques mettez 50 dans opacité dans le calque représent le blanc).
- Une barre verticale de 400 par 12 pixels: a) ouvrez d'abord un rectangle fond transparent de 400 par 12 pixels que vous remplissez de noir par exemple ou d'une tuile de votre choix (par exemple une tuile dorée). b) ouvrez un deuxième rectangle fond transparent de 400 par 10 pixels (donc de 2 pixels inférieur à l'autre, mais seulement dans le sens de la largeur) et ans la palette des couleurs, sélectionnez le motif de votre image et l'appliquez-le dans le rectangle avec le pot de peinture. Fusionnez les calques, appliquez un Muraro Pro/seamless ou un seamless de FM tile tools/vertical coché et enregistrez.
Installation du scrippy
1) Ouvrez votre Scrippy et ouvrez un nouveau fichier vierge (cliquez sur l'icône représentant la page blanche ou bien faites CTRL+N ou encore File/new).
2) Insérez maintenant un background: cliquez sur Browse et allez chercher le background que vous avez créé précédemment. Choisissez dans Scrolling la direction Up+ Right. Et laissez toutes les autres options inchangées (normalement elles devraient être préselectionnées sur Smoth scroll/Pixels per second: 10 ; Pixels per mouve: 1; et dans Advanced options ne cochez rien et toutes les valeurs doivent se trouver sur 0).
3) Insérez maintenant un left border scroll : faites Insert/Left Border Scroll. Cliquez sur Browse pour aller chercher la barre verticale de 400 par 12 pixels. Dans Scroll direction, cochez Up. Dans Scroll speed mettez 20 pixels per second et 1 pixels par mouve et cochez Fast scroll.
4) Faites Edit/Copy Left Border Scroll. Cliquez sur le premier left border puis faites Edit/Paste Left Border Scroll. Cliquez sur cette nouvelle case et laissez tout inchangé, sauf la direction du Scrolling que vous mettrez sur Down.
5) Insérez maintenant un troisième left border scroll : faites Insert/Left Border Scroll. Cliquez sur Browser et allez rechercher votre image haute préparée avant.
Dans Scroll direction, cochez Down ou Up. Dans Scroll speed mettez 10 pixels per second et 1 pixels par mouve et cochez Smooth scroll. Dans Advanced Options, cochez Place over background: c'est l'option la plus importante et qui vous permet de créer la transparence avec le background. Toutes les autres options doivent être sur 0.
6) Insérez un deuxième background (Insert/Background). Cliquez sur le petit triangle à droite du rectangle (au-dessus de Browse) pour visualiser le nom des derniers éléments insérés et repérez et sélectionnez le nom du background déjà utilisé au point 2.
Dans Scrolling, cochez Down+right (ou une autre direction qui vous semble plus intéressante, mais elle doit
être différente de celle du premier background). Cochez Smooth scroll et mettez 10 pixels per second et 1 pixels par mouve. Cochez tile et dans Advanced Options, cochez Layer with others objects. Mettez 60 comme transparency et laissez toutes les autres options sur 0.
7) Insérez ici votre message area (marges: left 100 et le reste sur 30) et colorez, si vous voulez le scrollbar en cochant Override default scrollbars color, puis cliquez sur Set Base Color et sur Set Shadow Color pour sélectionnez les couleurs qui s'harmonisent le mieux avec le reste de votre réalisation. En fait il n'est pas nécessaire pour ce scrippy de colorer le scrollbar, car il ne se forme pas un scrollbar avec une couleur différente quand on le met dans la messagerie.
Ecrivez votre texte. Vous pouvez aussi insérer une image, un gif ou mettre un lien en cliquant sur les icônes respectives qui se trouvent en haut à droite.
8) Faites simplement un copier-coller du deuxième Left Border Scroll, selon la méthode indiquée ci-dessus.
10) Faites simplement un copier-coller du premier Left Border Scroll, selon la méthode indiquée ci-dessus.
De cette manière vous avez une alternance dans le mouvement des Left Border Scroll qui entourent l'image centrale (le premier correspond au cinquième et le deuxième correspond au quatrième).
Il faut aussi ajouter que la direction des scrolls est de toute façon une chose que vous pouvez modifier comme vous voulez selon votre goût personnel.
Il ne reste qu'à ajouter le son (sound), le ticker et le loading message.
******************
Ce tutoriel a été créé le 23 novembre 2002 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
.
