APPARITION ET DISPARITION PROGRESSIVES

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

PROCEDE

1) Ouvrez dans le logiciel un nouveau document: File/New ou bien cliquez sur l'icône correspondante. 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. Moi, je n'ai pas mis de mouvement puisqu'il j'ai choisi un gif animé pour l'effet principal, mais vous pouvez en décider différemment.

2) Insert/container avec les dimensions en largeur (horizontal) et en hauteur (vertical) du fichier que nous mettrons. Voici le fichier que j'ai choisi :

qui a donc une largeur de 89 et une hauteur de 141 (mesures visualisées dans "Scrippy). Nous mettrons la position par rapport à gauche qui ici sera 0. Donc nous avons (c'est la première colonne qui sera complété) : Horizontal : From left: 0; size : 73 ; Vertical : from Top :0, Size : 141.

3) Insert/ background: et on va sélectionner justement le fichier de notre choix (dans mon cas le fichier gif animé indiqué ci-dessus). Scrolling: Right; Pixels per Second : 10; Pixels per move : 1 et dans Advanced options , tout reste à 0. 4-5) Placez-vous sur la case 2 et copiez-la : Edit/Positioned container. Placez-vous sur la case 3 et cliquez sur l'icône Paste. Puis déplacez le container bien à gauche.
Modifiez dans Positioned container, seulement From Left: mettez maintenant 89. Dans la background de la case 5 mettez comme transparency : 12. (on commence à varier la transparence de l'image).

6-7) Répétez l'opération 4-5 et cette fois, mettre From Left : 178 et transparency : 24.

8-9) Répétez l'opération 4-5 et cette fois, mettre From Left : 267 et transparency : 36.

10-11) Répétez l'opération 4-5 et cette fois, mettre From Left : 356 et transparency : 46.

12-13) Répétez l'opération 4-5 et cette fois, mettre From Left : 445 et transparency : 60.

14-15) Répétez l'opération 4-5 et cette fois, mettre From Left : 534 et transparency : 72.

16-17) Répétez l'opération 4-5 et cette fois, mettre From Left : 623 et transparency : 84.

18-19) Répétez l'opération 4-5 et cette fois, mettre From Left : 712 et transparency : 96.

Comme vous voyez, j'ai augmenté dans chaque container la distance par rapport à la gauche: en ajoutant toujours la largeur 89 à l'indication du container précédent et j'ai augmenté progressivement la transparence dans chaque container (j'ai ajouté 12 chaque fois)

Construisons maintenant le container du Message Area :

20) Insert/Positioned container: maintenant je vais compléter dans la colonne de droite : From Left : 120 ; From Right : 120 ; From Top : 160 ; From Bottom: 160.
Les valeurs par rapport à Top et à Bottom tiennent compte de la hauteur de l'image gif utilisée (141) et je dois laisser une marge entre la rangée de gifs et le container, donc je fait 141 + une petite marge, ce qui me donne 160.

21) Insert/background: je reprends mon tout premier background, mais cette fois je lui donne un mouvement : Down+Left.
22-24) Toujours dépendant du Positioned Container du point 20, j'ajoute 3 fois un frame , mais en variant en faisant une alternance de couleurs associées avec le reste. Dans les 3 frames j'ai mis style : double et 2 comme valeur dans Widht.

25-41) Répétez exactement les phases 4-19, mais en mettant dans Positioned container Vertical, From Bottom : 0 (et non from Top) , en changeant la direction du mouvement de background : Left et enfin en inversant la définition de la transparence : 0 pour le container le plus à droite et 96 pour le container le plus à gauche.

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 20 (From Left : 120 ; From Right : 120 ; From Top : 160 ; From Bottom) nous allons donc mettre les marges suivantes: From Left : 130 ; From Right : 130 ; From Top : 170 ; From Bottom: 170) pour que le message soit bien dans le rectangle avec une petite marge de chaque côté.
N'oublions pas de mettre des couleurs au Scrollobar en cochant Overrid Scrollbar color et en choisissant les 2 couleurs en harmonie avec les autres couleurs de la réalisation.

Vous pouvez complétez 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 16 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 .