LES BALLES


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 4 éléments suivants :

1) un papier de base qui servira de background: vous pouvez en faire un en partant d'une image de votre choix et en appliquant un effet seamless tile de chaque côté . Si vous êtes sur PSP8, l'effet d'image Mosaïque sans jointure vous permet d'obtenir ce résultat plus rapidement. Ajoutez éventuellement une application avec d'autres filtres de votre choix.
Pour l'effet particulier que nous voulons obtenir ici, il serait important de trouver des images ayant un motif avec au moins une balle, une bulle ou une boule. Voici celle que j'ai utilisée: elle appartient à l'artiste Joséphine Wall:


dont vous pouvez admirer la galerie ICI.

Pour le besoin de ce scrippy, j'ai ajouté un calque pour rendre le papier plus foncé.

2) un deuxième papier de base, identique au précédent, mais plus clair.

3) Un cadre avec la même image ayant obligatoirement comme dimensions des multiples de 50 pixels, donc par exemple 400 par 300 ou bien 550 par 350 pixels, etc. Cela permettra aux fichiers gif avec la forme circulaire de se rencontrer de façon correcte aux angles du rectangle principal que nous contruirons dans le scrippy.
Dans ma réalisation le cadre a des dimensions de 400 par 300 pixels.

4) Un fichier gif avec forme circulaire, ayant les dimensions de 50 par 50 pixels: l'idéal serait de la reprendre directement de l'image qui sert pour les backgrounds. Voici la procédure pour le créer:
- Appuyez sur l'icône indiquant l'outil Sélection. Dans la fenêtre de la configuration, choisissez Cercle; Progressivité: 1; cochez Anti-alias.
- Placez-vous avec la souris bien au centre de la partie de l'image qui a une forme ronde (bulles, balles, bulles) et tracez votre cercle (aidez-vous des chiffres qui défilent en bas à gauche. Pour être au centre vous devez avoir 50 et 50), faites un copier-collez comme nouvelle image. Sauvegardez ce fichier dans le format gif optimisé (en mettant une couleur du contour du cercle comme couleur d'arrière-plan) en le nommant par exemple carré-cercle.
Si l'image présente des cercles plus grands, vous pouvez récupérer quand même un de ces cercles pour la sélection et quand vous avez fait votre copier-coller comme nouvelle image, redimensionnez-la avant la sauvegarde.



PROCEDE DANS SCRIPPY

Cette réalisation ne comprend que 3 containers de base dont peuvent dépendent (donc placés vers la droite) d'autres containers. Le premier sert pour les contours et le fond de la réalisation; le deuxième pour le motif central; le troisième pour le message area.

1) Ouvrez dans le logiciel Scrippy un nouveau document: File/New ou bien cliquez sur l'icône correspondante. Insert Positioned Container: Horizontal Layout (deuxième colonne) : Left: 0; Right: 0 ; Vertical Layout (première colonne) : Center: 0; Specified size: 800. De cette manière la composition s'adaptera en largeur à toutes les messageries et elle aura toujours une hauteur de 800: le message sera plus ou moins long, mais inséré dans un espace bref pour créer le déroulement avec un scroll.

2) 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 avec des couleurs plus foncées).
Dans Scrolling, mettez Down+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Ne changez rien dans les options de Advanced options (tout reste à 0).

3) Insert/positioned container (case décalée vers la droite, car elle dépend du premier positioned container): tout à 10 dans la deuxième colonne, car on va mettre un deuxième background qui sera décalé du premier de 10 pixels.

4) 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é. C'est le deuxième background construit précédemment, le papier avec des couleurs plus claires.
Dans Scrolling, mettez Down+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Ne changez rien dans les options de Advanced options (tout reste à 0).

5) Insert/positioned container (case décalée vers la droite par rapport au précédent positioned container): tout à 10 dans la deuxième colonne, car on va mettre de nouveau le premier background qui sera décalé du précédent de 10 pixels.

6) Insert/background et cliquez sur Browse et sélectionnez le premier background construit précédemment, le papier avec des couleurs plus foncées.
Dans Scrolling, mettez Down+Left. Pixels per second: 10; Pixels per move: 1; cochez Smooth Scroll. Ne changez rien dans les options de Advanced options (tout reste à 0).

7) Insert/positioned container: cliquez sur la case et déplacez-la complètement vers la gauche dans la liste des cases. De cette case vont dépendre en tout 12 cases, comme visualisé dans cette capture qui reprend la partie finale des cases, à partir de la case 7:



Donc remettez les mêmes choix dans la colonne de gauche: Horizontal Layout: Centre: 0; Specified size: 500; Vertical layout: Top: 100; specified size: 400.

8) Insert/frame de 1 pixel, style Groove, avec la couleur de votre choix qui s'harmonise avec le reste de la composition.

Pour cette série des border scroll que nous allons construire, si vous êtez habiles avec l'option copier-coller, vous reprenez le premier des borders et vous changez la direction dans Scroll Direction. Donc vous pourriez faire 4 copier-coller. Si vous vous avez peur de vous tromper, suivez simplement les indications suivantes.

10) Insert/Left Border Scroll. Allez chercher votre balle en fichier gif. Dans Scroll Direction: choisissez Up. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 20. Space between : 50 ; Starting Position : 0.

11) Insert/Left Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Down. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

12) Insert/Right Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Up. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

13) Insert/Right Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Down. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

14) Insert/Top Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Right. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

15) Insert/Top Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Left. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

16) Insert/Bottom Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Right. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

17) Insert/Bottom Border Scroll. Allez chercher de nouveau votre balle. Dans Scroll Direction: choisissez Left. Cochez Fast Scroll; Pixels per Second : 100 ; Pixels per move : 10 et dans Advanced options , cochez Overlap with next object; cochez Place over background. Transparency: 40. Space between : 50 ; Starting Position : 0.

18) Insert/Positioned container: il reste bien en-dessous de la case précédente. Première colonne à remplir: Horizontal: center: 0; cochez Same as largest contained image (la même largeur que celle de l'image). Vertical: center: 0; cochez Same as largest contained image (la même hauteur que celle de l'image).

19) Insert/Positioned Image (décalée vers la droite: elle dépend du container précédent): en horizontal et en horizontal, mettez 0 et sélectionnez votre cadre.

20) Insert/frame: identique au précédent frame pour la configuration.

Maintenant on va constuire le dernier container pour le message area.

21) Insert Positioned Container: Horizontal Layout (première colonne) : Left: 0; Specified size : 500 ; Vertical Layout (toujours la première colonne) : Bottom: 100; Specified size: 100. De cette manière nous aurons un petit rectangle fixe dans lequel s'activera un scroll pour visualiser le message que nous mettrons.

22) Insert/frame : comme les précédents frames.

23) Insert/Message Area: marges toutes de 20 pixels et n'oubliez 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.

24) Insérez maintenant un nouveau message area qui servira pour colorez le scrollbar de la messagerie ou de la page web: Insert/Message Area: marges toutes de 20 pixels et n'oubliez pas de mettre des couleurs au Scrollbar en cochant Overrid Scrollbar color et en choisissant les mêmes couleurs que vous avez utilisées pour le scrollbar de l'autre Message Area.

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 04 octobre 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 .


Pour la section Scrippy, cliquez ICI.

Pour la page d'accueil du site, cliquez ICI.