OUVERTURES


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, les éléments suivants :
1) Choisissez une image et faites-en une copie sur laquelle vous travaillez.
Donnez-lui des dimensions d'environ 200 par 500 pixels. Les données qui seront données dans Scrippy se baseront sur les dimensions de cette image de base.
Appliquez le filtre Semless tile de FM tile tools, Vertical pas coché pour qu'il n'y ait pas de démarcation dans le sens de la hauteur et enregistrez ce fichier comme image-1.

2) Partez de votre image sauvegardée au point 2 et faites Image/Retourner et enregistrez ce nouveau fichier comme image-2.

3) Une tuile avec une couleur de votre choix qui s'associe bien aux couleurs de votre réalisation globale, mais avec un bord doré sur les côtés latéraux.
Comment la réaliser? tout d'abord elle devra avoir pour ce scrippy le double de la largeur de votre image de base. Donc si par exemple votre image fait 250 par 500 pixels, faites un premier rectangle de 500 par 500 pixels et remplissez avec une tuile dorée. Puis ouvrez un rectangle fond transparent de 496 par 500 pixels que vous remplirez avec une des couleurs de votre choix. Copiez ce rectangle comme calque sur le rectangle doré. Fusionnez les calques et sauvegardez.

4) Une barre verticale dorée qui servira pour les scrolls des bords des différentes parties du scrippy.
Voici celle que je me suis construite et que je vous offre:




5) Une barre horizontale dorée qui servira pour les scrolls des bords des différentes parties du scrippy.
Voici celle que je me suis construite et que je vous offre:




6) Un fichier gif animé de votre choix que vous transformerez dans AnimationShop pour lui donner la direction inversé.
Comment faire? Ouvrez le fichier gif de votre choix dans Animation Shop et sélectionnnez-le : Edition/Sélectionnez tout. Puis faites Animation/Retourner et faites la sauvegarde de ce nouveau fichier animé en lui donnant le même nom que l'autre avec par exemple en plus "droite" ou bien "2". En somme, ne l'enregistrez pas avec le nom du premier, autrement vour perdrez le premier; et il vous serviront tous les deux. 7) Réalisez une phrase de votre choix dans un rectangle de 350 par 50 pixels, fond transparent, en utilisant des tuiles pour l'avant-plan et l'arrière plan. Cliquez sur l'icône Texte et choisissez une police de votre choix, mettez la couleur du contour (trouvée avec la pipette) en arrière plan avant de passez à l'enregistrer comme fichier gif optimisé.

8) Réalisez une autre phrase de votre choix en suivant la méthode indiquée au point 7.

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 : Insert/background et sélectionnez une couleur de votre choix (cochez Use the selected color ) qui s'harmonise avec le reste et qui servira de fond à l'ensemble
Dans mon cas, j'ai choisi la couleur suivante: #0000A0 que j'ai récupée dans Paint Shop Pro avec la pipette en cliquant sur une des couleurs de mon image de base et je l'ai transférée avec la touche droite de la souris dans la case Set Color.

2) Insert/frame (bien en-dessous du background précédent). J'ai choisi : Style : transparent; widht : 10 et cochez Place over background. De cette manière on va créer un frame (bord transparent de 10 pixels tout autour).

3) Insert/Right Border Scrooll et dans Browse allez cherchez votre barre verticale dorée. Scroll Direction: Down . Pixels per Second : 10 ; Pixels per move : 1. Smooth Scroll: coché. Ne changez rien au reste.

4) Insert/Bottom Border Scrooll et dans Browse allez cherchez votre barre horizontale dorée. Scroll Direction: Left . Pixels per Second : 10 ; Pixels per move : 1. Smooth Scroll: coché. Ne changez rien au reste.

5) Insert/Left Border Scrooll et dans Browse allez cherchez votre barre verticale dorée. Scroll Direction: Up . Pixels per Second : 10 ; Pixels per move : 1. Smooth Scroll: coché. Ne changez rien au reste.

6) Insert/Top et dans Browse allez cherchez votre barre horizontale dorée. Scroll Direction: Right . Pixels per Second : 10 ; Pixels per move : 1. Smooth Scroll: coché. Ne changez rien au reste.

7) Insert/Positioned container. Dans la première colonne de la fenêtre qui s'ouvre, dans Horizontal Layout, cochez Set Position and Widht) : : From left: 33; Specified Size : la largeur de votre image (dans mon cas c'est 278.
Dans Vertical layout, mettez From Top : 33 et dans Specified Size : la hauteur de votre image (dans mon cas, 510).
Les cases 8 - 15 dépendront toutes de ce positioned container et devront être une sur l'autre bien en parallèle.

8) Insert/background : comme pour la case 1, mais cette-fois-ci mettez une couleur différente qui servira de fond au fichier gif animé. Moi, j'ai choisi la couleur : #000055.

9) Insert/Positioned Image et allez chercher votre premier fichier gif animé. Cochez les cases Centre en horizontal et en vertical.

10) Insert/Positioned Scroll et allez chercher votre image image-1. Layout: Horizontal; Scroll : Left. Pixels per Second : 100 ; Pixels per move : 10. Fast Scroll: coché.
Position : Distance Center : 0.
Dans Advanced Options, mettez Space between: le double de la largeur de votre image (dans mon cas, 556): ce qui permettra de la laisser voir pendant quelques secondes, avant la fermeture de la porte. Dans Transparency, mettez: 50 et dans Start Position: 0.

11) Insert/Positioned Scroll et allez chercher votre image-2 (selon l'effet que vous voulez obtenir vous pouvez inverser les images). Layout: Horizontal; Scroll : Right. Pixels per Second : 100 ; Pixels per move : 10. Fast Scroll: coché.

Position : Distance Center : 0.
Dans Advanced Options, mettez Space between: le double de la largeur de votre image (dans mon cas, 556): ce qui permettra de la laisser voir pendant quelques secondes, avant la fermeture de la porte. Dans Transparency, mettez: 50 et dans Start Position: 0.

Si vous allez maintenant voir dans Preview, vous verrez un premier cadre se former en haut à gauche avec ouverture et fermeture des images sur un fond contenant le fichier gif animé.

12-15) répétez les phases 3-6 pour qu'il y ait un mouvement continu autour de la fenêtre de ce container.

16-24) Cliquez sur la case du premier positioned container et faites Edit/Copy positioned container. Cliquez sur la dernière case de la série (la 15, le dernier des scroll borders) et cliquez tout simplement sur l'icône Paste. Placez-vous sur la case 16 (le deuxième positioned container) et traînez-la bien vers la gauche.
Nous allons faire seulement deux changements par rapport au premier positioned container : dans Positioned container (case 16), cochez Right et dans Positioned Image (case 18), allez sélectionnez le deuxième fichier gif animé. Cliquez sur Preview: vous devriez avoir une deuxième fenêtre, bien placée en haut à droite et vous verrez les fichiers gifs qui se regardent d'une fenêtre à l'autre.

Maintenant nous allons construire un troisième container qui servira pour la fenêtre du message area.

25) Insert/Positioned Container et tirez la case complètement vers la gauche.
Dans Horizontal Layout, cochez Set Position and Height (première colonne) : From Center: 0; Specified Size : 556 (donc le double de la largeur de l'image utilisée pour l'effet en haut.
Dans Vertical Layout, cochez Set Top and Bottom Edges (dans la deuxième colonne) : : From Top : 580 (obtenu en sommant la hauteur de l'image utilisée en haut et des marges); From Bottom : 33 (la même distance utilisée pour les containers en haut)
8 cases (les cases 26-35) bien placées les unes sur les autres dépendront directement de ce positioned container.

26) Insert/background: faites un copier/coller du tout premier background, selon la technique indiquée avant.

27) Insert/top border scroll. Cliquez sur Browse pour aller chercher votre première phrase créée avant dans le format gif. Scroll direction: Right; Pixels per Second : 100 ; Pixels per move : 10. Smooth Scroll: coché. Overlap with next objects: coché. Place over background: coché.

28) Insert/top border scroll. Cliquez sur Browse pour aller chercher votre deuxième phrase créée avant dans le format gif. Scroll direction: Right; Pixels per Second : 100 ; Pixels per move : 10. Smooth Scroll: coché. Overlap with next objects: coché. Place over background: coché.

29) Insert/Message Area. Donc dans notre cas, nous allons mettre : From Left : 30 ; From Right : 30 ; From Top : 530 (qui tient compte de la hauteur du cadre et des marges au-dessus et en-dessous du cadre, avant le message) ; From Bottom : 30.
Faites en sorte que le texte ne soit pas plus long que la hauteur de la fenêtre puisque ce Message Area est constuit directement dans le container. Autrement il se formera un scroll latéral qui dans le cas de cette fenêtre serait bien inesthétique.

30) Insert/Positioned Scroll. Cliquez sur Browse pour aller chercher votre rectangle colorié avec bandes latérales dorées.
Layout: horizontal. Scroll direction: Left. Pixels per Second : 100 ; Pixels per move : 10. Fast Scroll: coché. Postion : Centre : 0.
Dans Advanced options, space between: 1012 (le double de la largeur du rectangle, qui dans mon cas est de 556 pixels). Le reste à 0.

31) Insert/Positioned Scroll. Cliquez sur Browse pour aller chercher votre rectangle colorié avec bandes latérales dorées.
Layout: horizontal. Scroll direction: Right. Pixels per Second : 100 ; Pixels per move : 10. Fast Scroll: coché. Postion : Centre : 0.
Dans Advanced options, space between: 1012 (le double de la largeur du rectangle, qui dans mon cas est de 556 pixels). Le reste à 0.
(Vous pouvez faire un copier/coller de la case 30 et changez seulement la direction du scroll)

32) Insert/Right border scroll. Exactement comme la case 3.

33) Insert/Bottom Border scroll. Exactement comme la case 4.

34) Insert/Left border scroll. Exactement comme la case 5.

35) Insert/Top border scroll. Exactement comme la case 6.

On a ainsi construit un bord en mouvement tout autour de la fenêtre du Message area.

Je vais faire en sorte qu'il se crée une autre file dorée un peu décalée par rapport à la première :

36) Insert/frame (complétement à gauche) : exactement comme pour le premier frame (case 2).

37-40) Répétez les passages 3-6 pour le scroll, mais inversez la direction du scroll de chaque élément.


41) Insert/Message. Cette case servira seulement pour colorier le Scrollbar qui apparaîtra à la droite de l'ensemble de votre réalisation dans votre messagerie. Cochez Override Scrollbar color et choisissez les 2 couleurs en harmonie avec les autres couleurs de la réalisation. Moi, j'y ai mis la couleur du premier background.

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 18 avril 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