Tutoriel " Harmonie "

Pour voir le résultat de ce Scrippy

Ce Scrippy fut réalisé pour une résolution de 1024. J'ai bien essayé de l'adapter pour une résolution de 800 mais l'image centrale devait être d'une dimension trop petite et ceci enlevait la beauté du Scrippy. Donc, je m'excuse auprès de ceux qui utilisent une résolution de 800. Par contre, si vous le voulez, vous pouvez ne pas faire les panneaux. De cette façon, vous allez pouvoir faire " La danse des diagonales " et vous préparer une belle image ou cadre pour la partie centrale.

Dans ce tutoriel, vous allez vous servir de Container, Positioned Image, Options, Copy et Paste afin de vous faciliter la tâche lors de la réalisation de ce Scrippy.

Pour faire ce tutoriel vous aurez besoin de :

• Deux diagonales à fond transparent de 128x128. Celles-ci peuvent être des glitters. Les miennes ne sont que des images ordinaires.
  
  Pour savoir comment construire les diagonales, je vous invite à voir la section Paint Shop Pro;
  
  
• Un glitter de votre choix pour les bordures;
  
  
• Une tuile de fond pour votre Background principal;
  
  
• Deux ou quatre images en forme de losange d'une dimension de 182x192. Naturellement, ces images doivent être des gifs;
  
  
• Une image d'une hauteur de 400 pour les panneaux.
  
  Vous devez avoir un Seemless afin que le défilement soit beau;
  
  
• Une image ou cadre d'une dimension de 350x263 pour votre image centrale;
  
  
• Pour le tutoriel en format Word
  
  
• Pour la disposition des cases et le plan du Scrippy

Section Paint Shop Pro

Comment réaliser votre diagonale :

• Ouvrir une nouvelle image de 200x200 à fond transparent;
• Prendre votre Outil Stylo avec une largeur de 3 ou 4 et tracer une ligne de gauche à droite à une hauteur de 100 afin qu'elle soit bien centrée :
  

• Votre ligne peut être d'une seule couleur ou encore avec le motif de votre glitter.
• Faire Image/Rotation/Rotation libre de 45°, tous les calques non cochés;

• Faire Image/Taille du Support et mettre 128 en largeur et en hauteur;
  • Haut, Bas, Gauche et Droit à -36;

• Votre diagonale est prête.
• Faire Fichier/Exporter en gifs optimisé et nommer DiagoGauche ;
• Retourner votre image (Miroir avec PSP8) et exporter de nouveau votre image et la nommé DiagoDroite

Pour l'image du panneau :

• L'image que j'ai utilisée pour le panneau avait au départ une dimension de 303x385.
• J'ai redimensionné pour avoir une hauteur de 400.
• Ensuite, j'ai utilisé le Filtre VM Toolbox/Seamless Tile avec les configurations suivantes : 16-16-16-255-240.
• J'ai sélectionné le bleu obtenu sur l'image et ensuite j'ai inversé la sélection (Intervertir).
• J'ai recadré sur la Sélection. Donc mon image a maintenant une dimension de 236x400 avec le Seamless.
• J'ai sauvegardé sous le nom de P1 pour mon panneau de gauche ensuite j'ai retourné l'image (Miroir avec PSP8) et sauvegardé sous le nom de P2 pour le panneau de droit.

Vous êtes prêts pour votre Scrippy?

Pendant la préparation de votre ssc, je vous conseille de faire souvent des Preview << afin de mieux comprendre les étapes que vous allez exécuter.

Préparation de votre ssc

Case 1 :

Insert/Background :

• Allez chercher votre tuile de fond;
• No Scrolling pour ne pas avoir trop de mouvement dans votre Scrippy;

Case 2 :

Insert/Container/Positioned Container :

• Ce Container va servir de support à votre Scrippy;
• Horizontal Layout : Set Left and Right Edges :
  • Left : 0, Right : 0;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size 949.
• L'explication de cette hauteur vous sera expliquée à la toute fin de ce tutoriel;

Section " La danse des diagonales "

Elle semble bien difficile mais très simple en soit malgré la longueur pour sa réalisation. En fait, ce ne sont que le mouvement qui créera cet effet qui soit dit en passant, est très plaisant à regarder.

Case 3 :

Insert/Container/Positioned Container :

• Ce Container servira pour positionner les diagonales gauches et droites. Servira également pour le copier/coller afin de faire le côté droit.
• Horizontal Layout : Set Position and Width :
  • Left : 35, Size : 128
    • 128 puisque votre image a une dimension de 128 en largeur;
• Vertical Layout : Set Position and Height :
  • Top : 200, Size : 470
    • 470 parce que vous allez superposer 6 fois la diagonale avec un espace de 20 entre chacun des containers qui eux auront une hauteur de 190.
      
      Donc, le premier container début à 200, ensuite vous aurez un autre à 220, 240, 260, 280 et vous ajouter la hauteur du container de 190 donc.. 280+190=470;
      
      Vous allez mieux comprendre en le réalisant et surtout faites des Preview;

Case 4 :

Insert/Container/Positioned Container :

• Bien que ce container ne soit pas vraiment indispensable, j'ai préféré le faire afin d'utiliser un copier/coller pour positionner les DiagoGauche puisque ce container servira seulement pour les DiagoDroite.
• Horizontal Layout : Set Position and Width :
  • Left : 0, Size 128 toujours parce que vos diagonales ont une largeur de 128;
• Vertical Layout : Set Position and Height :
  • Top : 0; Size : 470;

Case 5 :

Insert/Container/Positioned Container :

• Pour votre première diagonale;
• Horizontal Layout : Set Position and Width :
  • Left 0, Size 128;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 190 - C'est la hauteur que prendra la diagonale pour son Scrolling, son mouvement;

Case 6 :

Insert/Background :

• DiagoDroite;
• Scrolling Left :
• Pixels per second : 100
• Pixels per move : 10

Cases 7 et 8 :

Vous aller faire un copier/coller des cases 5 et 6;

• Vous allez sur la case 5 et faites Edit/Copy Positioned Container;
• Rendez-vous sur la dernière case, soit la case 6 - le Background et faites Edit/Paste Positioned Container;
• Déplacer la case au 3e palier afin qu'elle soit alignée avec la case 5;
• Changer le Top : 0 pour Top : 20;

Vous venez de faire la 2e diagonale avec une distance de vingt par rapport à la précédente;

Cases 9 et 10 :

• Allez sur la dernière case, soit le Background et Faites Edit/Paste…;
• Déplacez la case au 3e palier;
• Changez le Top 20 à 40;

Votre 3e diagonale est maintenant placée;

Cases 11 et 12 :

Encore un copier/coller;

• Vous allez sur la dernière case soit le Background;
• Faites Edit/Paste…;
• Déplacez la case au 3e palier;
• Changez le Top 40 à 60;

Votre 4e diagonale est placée;

Cases 13 et 14 :

Votre dernier collage pour la DiagoDroite;

• Allez sur la dernière case, le Background; - Faites Edit/Paste…;
• Déplacez la case au 3e palier;
• Changez le top à 80;

Votre dernière DiagoDroite est placée;

Maintenant, vous devez placer vos DiagoGauche et pour ce faire, vous allez utiliser l'option du copier/coller;

Cases 15 à 25 :

• Vous allez copier la case 4 donc se positionner sur cette case et faites Edit/Copy…;
• Vous devez vous positionner sur la dernière case, soit la case 10 - le Background;
• Faites maintenant Edit/Paste…;
• Déplacez la case au 2e palier afin qu'elle soit alignée avec la case 4;
• Vous êtes placés sur la case 11 mais vous devez maintenant faire quelques petits changements dans les autres cases;
  • Case 16 : Changez Left pour Right;
  • Case 17 : Aller chercher votre DiagoGauche;
    • Scrolling : Right;
  • Case 18 : Left pour right;
  • Case 19 : DiagoGauche et Scrolling : Right;
  • Case 20 : Left pour Right;
  • Case 21 : DiagoGauche et Scrolling right;
  • Case 22 : Left pour Right;
  • Case 23 : DiagoGauche et Scrolling : Right;
  • Case 24 : Left pour Right;
  • Case 25 : DiagoGauche et Scrolling : right;

Vous avez terminé " La danse des diagonales " de gauche.

Est-ce que vous faites des Preview << souvent pour voir votre progression?

Maintenant, vous allez copier le tout afin de faire " La danse des diagonales " à droite de votre écran.

Cases 26 à 48 :

• Vous devez vous rendre sur la case 3, le Positioned Container.
  
  Est-ce que vous comprenez pourquoi vous devez vous rendre sur cette case? Je suis certaine que oui, sinon relire la case 3 et regarder l'image de toutes les cases;
• Donc, sur cette case 3 vous faites Edit/Copy Positioned Container.
• Vous devez maintenant vous rendre à la dernière case soit la case 25, le Background et faites Edit/Paste…;
• Déplacez la case au 1er palier afin qu'elle soit alignée avec la case 3;
• Il ne vous reste qu'à changer Left pour Right sur cette case, soit la case 26.

Vous avez terminé " La danse des diagonales ". Faites un Preview pour voir votre succès.

Vous allez maintenant positionner vos cadres losanges.

Pour ce faire, vous devez vous rendre à la dernière case, soit la case 48, le Background;

Case 49 :

Insert/Positioned Object/Positioned Image;

• Déplacez la case au 1er palier;
• Vous allez chercher votre image pour le haut à gauche;
• From Left : 8; From Top : 71;

Case 50 :

Insert/Positioned Object/Positioned Image;

• Vous allez chercher votre image pour le haut à droite;
• From Right : 8; From Top : 71;

Case 51 :

Insert/Positioned Object/Positioned Image;

• Vous allez chercher votre image pour le bas à gauche;
• From Left : 8; From Top : 400;

Case 52 :

Insert/Positioned Object/Positioned Image;

• Vous allez chercher votre image pour le bas à droite;
• From Right : 8; From Top : 400;

Passons maintenant à la Section des panneaux;

Ceux-ci auront une dimension de 52x400 dans votre Scrippy. Votre image prendra place dans un Container de 44x400 et si vous ajoutez une bordure de 4 de chaque côté, vous aurez bien 52=4+44+4

Donc, l'image utilisée doit avoir une hauteur de 400 et une largeur de plus de 203.

Dans cette partie, vous allez donc construire un Container assez grand pour insérer les deux panneaux de gauche. Dans celui-ci, vous allez construire un Container pour le panneau extérieur seulement qui dans celui-ci.. aura plusieurs Container pour le glitter et l'image.

Dans cette section, vous ne pouvez utiliser un Positioned Image car vous avez besoin d'un Scrolling, un mouvement. Ensuite, vous allez copier le Container du panneau extérieur pour construire le panneau intérieur. Quand tout ceci sera terminé, vous allez tout copier pour faire vos panneaux de droite. Ne vous inquiétez pas, tout va bien se passer.

Case 53 :

Insert/Container/Positioned Container :

• Ceci est votre grand Container pour vos deux panneaux de gauche.
• Horizontal Layout : Set Position and Width :
  • Left : 199, Size 82
• Vertical Layout : Set Position and Height :
  • Top : 107, size : 433;
  • voir les explications sur Capture.jpg;

Case 54 :

Insert/Container/Positioned Container :

• Pour votre panneau extérieur;
• Horizontal Layout : Set Position and Width :
  • Left : 0, Size : 52;
• Vertical Layout : Set-Position and Height :
  • Top : 0, Size : 408;

Est-ce que vous comprenez les dimensions de ce Container? Sinon, regardez bien Capture.jpg et étudiez le plan.

Case 55 :

Insert/Container/Positioned Container :

• Pour la bordure du haut;
• Horizontal Layout : Set Position and Width :
  • Left : 0, Size : 52; Pourquoi 52?
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 4 parce que la bordure a une épaisseur de 4;

Case 56 :

Insert/Background : Votre glitter;

• Scrolling : Right;

Case 57 :

Insert/Container/Positioned Container :

• Déplacez cette case au 3e palier afin qu'elle soit en ligne avec la case 55;
• Pour la bordure de droite;
• Horizontal Layout : Set Position and Width :
  • Right : 0, Size : 4;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 408
    • 408 parce que vous avez 4 de bordure + 400 pour l'image + 4 de bordure;

Case 58 :

Insert/Background : Votre glitter;

• Scrolling : Down;

Case 59 :

Insert/Container/Positioned Container :

• Déplacer au 3e palier; pour la bordure du bas;
• Horizontal Layout : Set Position and Width :
  • Left : 0, Size : 52;
• Vertical Layout : Set Position and Height :
  • Bottom : 0, Size : 4;

Case 60 :

Insert/Background : Votre glitter;

• Scrolling : Left;

Case 61 :

Insert/Container/Positioned Container :

• Déplacer au 3e palier :
• Pour la bordure gauche;
• Horizontal Layout : Set Position and Width;
  • Left : 0, Size : 4;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 408;

Case 62 :

Insert/Background : Votre glitter;

• Scrolling : Up;

Case 63 :

Insert/Container/Positioned Container :

• Déplacer au 3e palier;
• Pour l'emplacement de votre image;
• Horizontal Layout : Set Position and Width :
  • Left : 4, Size : 44;
• Vertical Layout : Set Position and Height :
  • Top : 4, Size : 400;

Case 64 :

Insert Background :

• Votre image pour le panneau de gauche;
• Scrolling : Left;

Vous venez de terminer votre panneau extérieur. Maintenant vous allez le copier pour faire votre panneau intérieur.

Cases 65 à 75 :

• Vous devez vous positionner sur la case 54 et faites Edit/Copy…;
• Placez-vous sur la dernière case soit la case 64, le Background et faites Edit/Paste…;
• Déplacez la case au 2e palier afin qu'elle soit en ligne avec la case 54;
• Puisque ce panneau doit être plus vers la droite et un peu plus bas, vous devez changer Left à 30 et Top à 25;
• Faites un Preview - Vous voyez comment c'est facile?

Maintenant que vos deux panneaux de gauche sont terminés, vous allez les copier pour construire ceux de droite.

Cases 76 à 98 :

• Placez-vous sur la case 53, Positioned Container, soit le grand Container pour vos panneaux de gauche;
• Faites Edit/Copy.. ;
• Placez-vous à la dernière case soit la case 75 - Le Background;
• Faites Edit/Paste…;
• Déplacez la case complètement à gauche, soit au 1er palier;
• Changez Left pour Right;
• Faites un Preview<<;
• Vous allez voir vos panneaux de droite mais aucun des Scrollings - mouvement - est bon donc, vous allez corriger le tout.
  • Case 79 : Scrolling : Left;
  • Case 81 : Scrolling : Up;
  • Case 83 : Scrolling : Right;
  • Case 85 : Scrolling : Down;
  • Case 87 : Scrolling : Right;
    • Dans Advanced Options :
    • Horizontal start : 44 parce qu'elle doit être synchronisée avec le panneau de gauche puisque l'image est inversée.
  • Case 90 : Scrolling : Left;
  • Case 92 : Scrolling : Up;
  • Case 94 : Scrolling : Right;
  • Case 96 : Scrolling : Down;
  • Case 98 : Scrolling : Right;
    • Dans Advanced Options :
    • Horizontal Start : 44 pour les mêmes raisons que la case 87;

Voyez comme c'est beau!

Vous êtes maintenant rendus à la Partie Centrale soit faire un Container pour y insérer les glitter et votre image ou cadre de 350x263;

Case 99 :

Insert/Container/Positioned Container :

• Déplacez cette case complètement à gauche soit au 1er palier;
• Horizontal Layout : Set Position and Width :
  • Center : 0 parce que votre image doit être bien centrée dans votre fenêtre.
  • Size : 360 - est le nombre obtenu avec une bordure de 5 + l'image de 350 + une autre bordure de 5;
• Vertical Layout : Set Position and Height :
  • Top : 190 - Voir l'image Capture.jpg,
  • Size : 273 - puisque vous avez 2 bordures de 5 + l'image de 263 donc, 273;

Case 100 :

Insert/Container/Positioned Container :

• C'est pour la bordure du haut;
• Horizontal Layout : Set Position and Width : Que vous prenez Center ou Left n'a aucune importance puisque vous utilisez la largeur au complet.
  • Donc, Center : 0, Size : 360;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 5;

Case 101 :

Insert/Background : Votre glitter;

• Scrolling : Right;

Case 102 :

Insert/Container/Positioned Container :

• Déplacez la case au 2e palier;
• Pour votre bordure droite;
• Horizontal Layout : Set Position and Width;
  • Right : 0, Size : 5, l'épaisseur de la bordure;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 273, la hauteur de la bordure;

Case 103 :

Insert/Background : Votre glitter;

• Scrolling : Down;

Case 104 :

Insert/Container/Positioned Container :

• Déplacez la case au 2e palier;
• Pour votre bordure du bas;
• Horizontal Layout : Set Position and Width;
  • Center : 0, Size : 360;
• Vertical Layout : Set Position and Height :
  • Bottom : 0, Size : 5;

Case : 105 :

Insert/Background : Votre glitter;

• Scrolling : Left;

Case 106 :

Insert/Container/Positioned Container :

• Déplacez la case au 2e palier;
• Pour votre bordure gauche;
• Horizontal Layout : Set Position and Width;
  • Left : 0; Size : 5;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 273;

Case 107 :

Insert/Backgroud : Votre glitter;

• Scrolling : Up;

Case 108 :

Insert/Positioned Object/Positioned Image :

• Déplacez cette case au 2e palier afin qu'elle soit incluse dans le premier Container de la partie centrale;
• Vous allez chercher votre image ou cadre pour cette partie;
• Horizontal Position : Center, Distance : 0;
• Vertical Position : Center, Distance : 0 ;

Parce qu'elle doit être bien centrer en hauteur et en largeur dans le container;

Est-ce que vous faites souvent des Preview? Vous avez terminé la partie centrale.

Maintenant, vous allez faire la partie pour le rectangle d'écriture.

Naturellement vous allez construire un premier Container assez grand pour inclure les glitters et le rectangle de couleur pour l'écriture.

Case 109 :

Insert/Container/Positioned Container;

• Déplacez cette case au 1er palier;
• Horizontal Layout : Set Position and Width :
  • Center : 0 parce qu'elle doit être bien centrée,
  • Size : 600 pour la largeur de votre rectangle;
• Vertical Layout : Set Position and Height :
  • Top 653
    • Pourquoi 653? Vos images en losanges finissent à une hauteur de 582. Vous ajoutez un espace de 71 tout comme le haut de votre Scrippy donc 582+71=653;
  • Size : 225 - pour la hauteur

Case 110 :

Insert/Container/Positioned Container :

• Pour la bordure du haut; Horizontal Layout :
• Set Position and Width :
  • Center : 0, Size : 600;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 5;

Case 111 :

Insert/Background : Votre glitter;

• Scrolling : Right;

Case 112 :

Insert/Container/Positioned Container :

• Déplacez au 2e palier;
• Pour la bordure de droite;
• Horizontal Layout : Set Position and Width :
  • Right : 0, Size : 5;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 255;

Case 113 :

Insert/Background : Votre glitter;

• Scrolling : Down;

Case 114 :

Insert/Container/Positioned Container :

• Déplacez au 2e palier;
• Pour la bordure du bas;
• Horizontal Layout : Set Position and Width :
  • Center : 0, Size : 600;
• Vertical Layout : Set Position and Height :
  • Bottom : 0, Size : 5;

Case 115 :

Insert/Background : Votre glitter;

• Scrolling : Left;

Case 116 :

Insert/Container/Positioned Container :

• Déplacez au 2e palier;
• Pour la bordure de gauche ;
• Horizontal Layout : Set Position and Width :
  • Left : 0, Size : 5;
• Vertical Layout : Set Position and Height :
  • Top : 0, Size : 225;

Case 117 :

Insert/Background : Votre glitter;

• Scrolling : Up;

Case 118 :

Insert/Container/Positioned Container :

• Déplacez au 2e palier;
• Pour votre rectangle de couleur;
• Horizontal Layout : Set Left and Right Edges :
  • Left : 5, Right : 5 puisqu'il sera en retrait de 5;
• Vertical Layout : Set top and Bottom Edges :
  • Top : 5, Bottom : 5 pour les mêmes raisons;

Case 119 :

Insert/Background : choisir une couleur ou une tuile;

Case 120 :

Insert/Message Area :

• Vous écrivez votre message; Ne pas oublier de coloriser la barre de défilement;

Case 121 :

Insert/Message Area :

• Déplacez cette case complètement à gauche soit au 1er palier;
• Simplement pour coloriser votre barre de défilement;

Case 122 :

Insert/Loading Message : Selon votre goût;

Case 123 :

Insert/Sound : Selon votre choix;

Case 124 :

Insert/Ticker : Vous savez quoi faire;

Case 125 :

Insert/Options : Prendre la même couleur que votre Loading Message afin que ce soit plus joli;

Maintenant pour vérifier si vous avez donné la bonne hauteur à votre Container support à la 2e case vous devez calculer un peu.

Vous savez que votre Container pour le Message Area débute à une hauteur de 653 et que celui-ci a une hauteur de 225 donc, vous êtes rendus à 653+225=878.

Si vous ajoutez de nouveau un espace de 71 tout comme le haut du Scrippy, vous avez 878+71=949.

Donc, à la case 2, la hauteur raisonnable est bien de 949 mais c'est toujours selon votre choix, votre goût.

Voici! C'était l'explication pour le calcul de votre support.

Vous avez terminé votre Scrippy, est-ce que vous en êtes fière?

Bonne Création!

©Création LaMartine

Le 19 décembre 2004