ETOILES


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

PREPARATION DES ETOILES

1) Ouvrez dans votre logiciel Paint Shop Pro, un premier carré fond noir de 150 par 150 pixels. Transformez-le en calque.
2) Avec l'outil sélection placé sur une forme d'étoile (cherchez-la dans le menu déroulant de la fenêtre de la Configuration-sélection) faites une forme d'étoile sur votre carré.
3) Faites un copier/coller d'une tuile dorée de votre choix dans la sélection.
Voici celle que je me suis créée et que je vous offre :



4) Fusionnez les calques visibles.
5) Faites alors Sélections/Modifier/Contracter et mettez la valeur 3.
6) Fusionnez les calques.
7) Transformez en calque (Calques/transformez en calque).
8) Tapez sur la touche Canc de votre clavier et faites la sauvegarde dans le format GIF en sélectionnant avec la pipette la couleur de votre tuile dorée à mettre comme arrière-plan.


Répétez cette opération pour un carré de 100 par 100 pixels et un autre de 80 par 80 pixels.
Vous avez ainsi créé les 3 fichiers fondamentaux qui vont servir pour cette réalisation.
DANS SCRIPPY

1) Ouvrez dans le logiciel un nouveau document: File/New ou bien cliquez sur l'icône correspondante. Insérez un background ( Insert/background) et mettez simplement de la couleur noire.
Maintenant nous allons placer plusieurs fois les images gif avec chacune une étoile de telle sorte que nous puissions obtenir un ciel étoilé.
Les positions que je vais indiquer ici ne sont pas obligatoires. A vous de décider où placer vos étoiles. Ce qui est important c'est que les carrés ne se touchent pas. Pour obtenir cela, il faut vérifier la position en cliquant sur Preview (utilisez souvent les deux types de Preview pour être certains que les carrés contenant les étoiles ne se superposent pas.


2) Insert/positioned container avec les dimensions en largeur (horizontal) et en hauteur (vertical) du fichier que nous mettrons (dans la première colonne): Horizontal : from left : 10; Size : 80. Vertical : From Top 50; Size 80. 3) Insert/background et nous allons y mettre une tuile passera derrière l'étoile transparente en créant l'effet. Voici celle que je me suis créée et que je vous offre:

Il vous sera naturellement possible d'en créer une vous même qui soit adaptée à ce scrippy.

Scrolling: Up + Right; Pixels per Second : 100; Pixels per move : 10. Fast Scroll coché et dans Advanced options , tout reste à 0. Cochez Layer with other objects.

4) Insert/positioned image et cliquez sur Browse pour aller rechercher votre fichier gif étoile de 80 par 80 pixels. Dans Vertical et dans Horizontal, cocher Centre et laissez 0 comme valeur.

5-7) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 4 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Center : 0 ; Size : 150. Vertical : From Top 0; Size 150. Dans Positioned Image, mettre le fichier gif de 150 par 150 pixels.

8-10) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 7 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Right : 0; Size : 80. Vertical : From Top 60; Size 80. Dans Positioned Image, mettre le fichier gif de 80 par 80 pixels.

11-13) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 10 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Right : 80 ; Size : 80. Vertical : From Top 10; Size 80. Dans Positioned Image, mettre le fichier gif de 80 par 80 pixels.

14-16) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 13 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Left : 100 ; Size : 80. Vertical : From Top 10; Size 80. Dans Positioned Image, mettre le fichier gif de 80 par 80 pixels.

17-19) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 16 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Left : 100 ; Size : 100. Vertical : From Top 100; Size 100. Dans Positioned Image, mettre le fichier gif de 100 par 100 pixels.

20-22) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 19 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Right : 150 ; Size : 100. Vertical : From Top 100; Size 100. Dans Positioned Image, mettre le fichier gif de 100 par 100 pixels. 23-25) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 22 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Right : 0 ; Size : 150. Vertical : From Top 200; Size 150. Dans Positioned Image, mettre le fichier gif de 150 par 150 pixels. 26-28) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 25 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Left : 0 ; Size : 150. Vertical : From Top 230; Size 150. Dans Positioned Image, mettre le fichier gif de 150 par 150 pixels. 29-31) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 28 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Center : 0 ; Size : 150. Vertical : From Top 250 ; Size 150. Dans Positioned Image, mettre le fichier gif de 150 par 150 pixels. 32-34) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 31 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Center : 30 ; Size : 80. Vertical : From Top 200; Size 80. Dans Positioned Image, mettre le fichier gif de 80 par 80 pixels.

35-37) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 34 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Mettez dans Positioned container : Horizontal : Center: - 50 (moins cinquante) ; Size : 80. Vertical : From Top 160; Size 80. Dans Positioned Image, mettre le fichier gif de 80 par 80 pixels.

Construisons maintenant le container du Message Area :

38) Insert/Positioned container: maintenant je vais compléter dans la colonne de droite : From Left : 70 ; From Right : 70 ; From Top : 420 (cette valeur tient compte de la hauteur des carrés avec les étoiles dans la partie haute du scrippy) ; From Bottom: 70.


39) Insert/background: je choisis une tuile dorée déjà utilisée pour créer le bord doré de l'étoile dans PSP. J'ai choisi le mouvement : Down+Left et la même configuration qu'au point 3.
40) Toujours dépendant du Positioned Container du point38, j'ajoute un Positioned Container et dans la colonne de droite on tapera 2 dans chacune des sélections suivantes : Left, Right, Top, Bottom.
41) Insert/Background et on mettre le même background qu'au point 3, avec exactement les mêmes configurations.
42) Insert /Positioned Container: exactement comme au point 40 mais cette fois-ci la valeur à taper est 10 dans toutes les cases.
43) Insert/Background et au mettra la tuile dorée avec les mêmes configurations qu'au point 39.
44) Insert/Positioned Container : exactement comme au point 40 mais cette fois-ci la valeur à taper est 2 dans toutes les cases.
45) Insert/Background : couleur noire.
Puisque les cases 38-45 font partie d'un même ensemble, chacune sera un peu décalée vers la droite par rapport à la précédente.
42) Insert/Message Area: mettez-le bien à gauche dans la liste des cases. Puisque mon container pour le message area était positionné comme indiqué au point 38 ( From Left : 70 ; From Right : 70 ; From Top : 420 ; From Bottom: 70) nous allons donc mettre les marges suivantes: From Left : 90 ; From Right : 90 ; From Top : 440 ; From Bottom: 90) pour que le message soit bien dans le rectangle avec une petite marge de chaque côté: j'ai ajouté 20 de chaque côté, car je dois aussi tenir compte des bords.
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 26 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