Tutoriel Bordures et cadre animé 2
(effet kaléidoscope)
Voici une autre variante dans l'effet sur les bordures.
J'ai ajouté 2 cases Background dans chaque Positioned Container et à chaque Background j'ai donné une direction différente; UP/DOWN/LEFT/RIGHT; ce qui donne un espèce de kaléidoscope qui se répète sur toute la bordure.
Téléchargez ICI un fichier ZIP contenant tous les fichiers graphiques de cette réalisation et le tutoriel dans le format WORD(modification de celui qui se trouve dans le scrippy "Tut Bordures et cadre animé")
PREPARATION MATERIEL
1) un fichier gif avec une forme de votre choix, obtenue en partant d'une police; fichier gif que vous pouvez créer dans PSP: ouvrez un carré de 60 par 60 fond tranparent. Activez l'outil texte et créez un motif avec une lettre avec motif de votre choix. Utilisez par exemple le font Quilter's Delight que vous trouverez dans le fichier ZIP. Peu importe les couleurs que vous mettrez. Appliquez ensuite un des motifs du filtre Uload Art texture et sauvegardez dans le format gif optimisé.
1) un fichier gif avec une forme de votre choix, obtenue en partant d'une police; fichier gif que vous pouvez créer dans PSP: ouvrez un carré de 60 par 60 fond tranparent. Activez l'outil texte et créez un motif avec une lettre avec motif de votre choix. Utilisez par exemple le font Quilter's Delight que vous trouverez dans le fichier ZIP. Peu importe les couleurs que vous mettrez. Appliquez ensuite un des motifs du filtre Uload Art texture et sauvegardez dans le format gif optimisé.
2) un fichier doré horizontal de 40 par 1 pixels.
3) un fichier doré vertical de 1 par 40 pixels.
4) une image de votre choix ayant de chaque côté des dimensions qui soit multiples de 60 pixels. Dans mon cas, j'ai opté pour les mesures suivantes: 300 par 360 pixels.
INSTALLATION DANS SCRIPPY
1) File/New.
Insert/Background. Use de selected color doit être coché. Cliquez sur Set Color pour sélectionner la couleur: choisissez le noir.
2) Insert positioned container:
Horizontal Layout: from left : 20; Specified size: 61 (largeur de mon fichier gif : 59, à la quelle j'ajoute 2 pixels pour les 2 bordures).
Vertical layout (deuxième colonne: From top : 0; From Bottom: 0)
3) Insert Left Border Scroll: browse pour aller chercher la barre verticale dorée. Scroll direction: UP; Scroll direction: 100/10/Fast Scroll.
Transparency: 0.
4) Insert Positioned container (il restera décalé sur la droite, dépendant du précédent).
Remplir la deuxième colonne: Left : 1; Right: 1; Top: 0; Bottom: 0.
De ce positioned container dépendront les 5 cases suivantes, bien placées l'une sur les autres (4 backgrounds et un Right Border Scroll).
5) Insert Background. Cliquez sur Browse et allez cherchez votre fichier gif. Scrolling: UP; 100/10/fast scroll.
Cochez: Layer with others objects.
Transparency: 50. Horizontal Spacing: 60.
3) un fichier doré vertical de 1 par 40 pixels.
4) une image de votre choix ayant de chaque côté des dimensions qui soit multiples de 60 pixels. Dans mon cas, j'ai opté pour les mesures suivantes: 300 par 360 pixels.
INSTALLATION DANS SCRIPPY
1) File/New.
Insert/Background. Use de selected color doit être coché. Cliquez sur Set Color pour sélectionner la couleur: choisissez le noir.
2) Insert positioned container:
Horizontal Layout: from left : 20; Specified size: 61 (largeur de mon fichier gif : 59, à la quelle j'ajoute 2 pixels pour les 2 bordures).
Vertical layout (deuxième colonne: From top : 0; From Bottom: 0)
3) Insert Left Border Scroll: browse pour aller chercher la barre verticale dorée. Scroll direction: UP; Scroll direction: 100/10/Fast Scroll.
Transparency: 0.
4) Insert Positioned container (il restera décalé sur la droite, dépendant du précédent).
Remplir la deuxième colonne: Left : 1; Right: 1; Top: 0; Bottom: 0.
De ce positioned container dépendront les 5 cases suivantes, bien placées l'une sur les autres (4 backgrounds et un Right Border Scroll).
5) Insert Background. Cliquez sur Browse et allez cherchez votre fichier gif. Scrolling: UP; 100/10/fast scroll.
Cochez: Layer with others objects.
Transparency: 50. Horizontal Spacing: 60.
Vertical Spacing: 60.
6) Insert Background. Comme pour la case 5, mais cette fois mettez la direction DOWN.
7) Insert Background. Comme pour la case 5, mais cette fois mettez la direction LEFT.
8) Insert Background. Comme pour la case 5, mais cette fois mettez la direction RIGHT.
9) Insert Right Border Scroll:
browse pour aller cherche la barre verticale dorée. Même configuration qu'au point 3.
10-19) Placez-vous avec la souris sur la case 2. Faites Edit Copy Positioned Container. Placez-vous ensuite sur la case 9 et cliquez sur l'icône PASTE: vous verrez s'afficher les cases 2-9, mais décalées vers la droite. Tirez la case 10 complètement vers la gauche, (en correspondance la case 2) et effectuez un seul changement: case 10: sélectionnez RIGHT (dans Horizontal layout: donc de left on passe à right).
20) Insert Positioned Container: Horizontal Layout (première colonne) Center: 0;
Specified size: 422 (largeur du cadre central à laquelle on ajoute 2 fois la largeur du fichier gif + 2 pixels pour les borders scrolls).
Vertical layaut: From TOP: 50.
Specified size: 482 (la hauteur du cadre à laquelle on ajoute 2 fois la largeur, et non la hauteur, du losange: ce qui nous donne un cadre avec un contour régulier).
21) Insert Left border Scroll: exactement comme pour la case 3 (vous pouvez faire un copier-coller si vous voulez).
22) Insert Right Border Scroll: comme la case 9.
23) Insert Top Border Scroll. Cliquez sur browse et allez chercher votre barre horizontale dorée. Même configuration que pour les left et right border scroll.
24) Insert Bottom Border Scroll: comme pour la case 23.
25) Insert/Background: faites un copier-coller de la case 5.
26) Insert/Background: faites un copier-coller de la case 6.
9) Insert Right Border Scroll:
browse pour aller cherche la barre verticale dorée. Même configuration qu'au point 3.
10-19) Placez-vous avec la souris sur la case 2. Faites Edit Copy Positioned Container. Placez-vous ensuite sur la case 9 et cliquez sur l'icône PASTE: vous verrez s'afficher les cases 2-9, mais décalées vers la droite. Tirez la case 10 complètement vers la gauche, (en correspondance la case 2) et effectuez un seul changement: case 10: sélectionnez RIGHT (dans Horizontal layout: donc de left on passe à right).
20) Insert Positioned Container: Horizontal Layout (première colonne) Center: 0;
Specified size: 422 (largeur du cadre central à laquelle on ajoute 2 fois la largeur du fichier gif + 2 pixels pour les borders scrolls).
Vertical layaut: From TOP: 50.
Specified size: 482 (la hauteur du cadre à laquelle on ajoute 2 fois la largeur, et non la hauteur, du losange: ce qui nous donne un cadre avec un contour régulier).
21) Insert Left border Scroll: exactement comme pour la case 3 (vous pouvez faire un copier-coller si vous voulez).
22) Insert Right Border Scroll: comme la case 9.
23) Insert Top Border Scroll. Cliquez sur browse et allez chercher votre barre horizontale dorée. Même configuration que pour les left et right border scroll.
24) Insert Bottom Border Scroll: comme pour la case 23.
25) Insert/Background: faites un copier-coller de la case 5.
26) Insert/Background: faites un copier-coller de la case 6.
27)
Insert/Background: faites un copier-coller de la case 7.
28)
Insert/Background: faites un copier-coller de la case 8.
29) Insert Positioned Image: browse pour aller chercher votre cadre et mettez Center 0 dans Horizontal et Vertical.
22) Insert Message area: mettez les bonnes marges: dans mon cas: Left: 200; Top: 582; Right : 200; Bottom : 50.
Cochez Override default scrollbar colors et choisissez dans Set Base Color et Set Shadow Color des couleurs qui s'harmonisent avec le reste de la réalisation.
Complétez avec Loading Message, Ticker et Sound.
Sauvegardez votre réalisation dans le format SSC ou dans le format HTML.
Tutoriel écrit le 16 octobre 2003 dans le cadre du groupe franco-scrippy.
Pour m'écrire, cliquez ICI.
Pour retourner à ma section sur Scrippy, cliquez ICI.
Musique du groupe Rondò Veneziano.
22) Insert Message area: mettez les bonnes marges: dans mon cas: Left: 200; Top: 582; Right : 200; Bottom : 50.
Cochez Override default scrollbar colors et choisissez dans Set Base Color et Set Shadow Color des couleurs qui s'harmonisent avec le reste de la réalisation.
Complétez avec Loading Message, Ticker et Sound.
Sauvegardez votre réalisation dans le format SSC ou dans le format HTML.
Tutoriel écrit le 16 octobre 2003 dans le cadre du groupe franco-scrippy.
Pour m'écrire, cliquez ICI.
Pour retourner à ma section sur Scrippy, cliquez ICI.
Musique du groupe Rondò Veneziano.
Ciao
Lorenza
***Tutoriel "Bordures et cadre animé - 2"......................Lorenza, 16/10/03 ***