Scrippy - Tutoriel Navigation

Tutoriel "Navigation"

Pour voir le résultat de ce Scrippy

Dans ce tutoriel, vous allez vous servir de Container, Scrolling Border, Positioned Object. Vous allez également vous servir des options Coller/Copier.

Bien que je ne préconise pas l'utilisation d'un Background plein écran en glitter, je m'en suis quand même servi. Je n'aime pas utiliser cette méthode, pourquoi? À vrai dire, je dois avouer qu'il faut être logique un peu. Prenons un exemple: Vous commencez un Scrippy et vous mettez un glitter comme premier Background, ensuite vous faites un Container un peu en retrait et vous lui donnez un autre glitter. Vous créez de nouveau un Container et vous mettez une tuile de fond avec un mouvement et ainsi de suite.

Est-ce que vous comprenez que Scrippy doit charger tout cela et inutilement? Vous augmentez la charge de travail de votre ordinateur pour générer un effet qui n'est même pas destiné à être vu. Est-ce que vous comprenez que cela peut être long? Vous avez trois, quatre ou plus de pages complètes en glitter ou en mouvement?.... Pas très bon choix... Qu'est-ce que vous en pensez?

J'espère maintenant que vous comprenez la logique et le pourquoi que je n'aime pas utiliser cette méthode bien qu'elle soit plus facile à réaliser.

Et avez-vous remarqué parfois qu'un Scrippy peut rester figer dans votre courrier? Ou encore, le mouvement que vous lui avez demandé ne fonctionne plus? Les gifs animés ne sont plus animés? Posez-vous la question, est-ce que j'ai trop de mouvement "Scrolling" ou trop de glitter dans mon Scrippy? et surtout plein écran? À vous de répondre et à vous de choisir.

Ceci dit, pour ce Scrippy, malheureusement cette méthode fut utilisée. Je ne voulais quand même pas vous faire faire un Scrippy trop compliqué pour débuter cette nouvelle session.

Pour faire ce tutoriel vous avez besoin de:

Un glitter;
Une tuile de fond;
Quatre images de 37x70, seamless compris soit deux horizontalement et deux verticalement;
Quatre images que vous allez encadrer pour une dimension finale de 37x70.
- Choisir les mêmes que ceux utilisées avant d'appliquer un seamless. Elles serviront pour vos quatre coins des Border Scrolling;
Deux images encadrées de 73x110;
Deux images encadrées de 46x70;
Une image de 450x322 encadrée pour votre image principale;
Une tuile de fond pour votre Message Area ou choisir une couleur.
Si vous voulez connaître la disposition des cases
Si vous voulez posséder le tutoriel en format Word

Case 1 :

Insert/Container/Positioned Container :

Horizontal Layout : Set Left and Right Edges :

Left : 0, Right : 0

Vertical Layout : Set Position and Height :

Center : 0, Size : 800;

Ce Container va servir de support. En fait, il indique la grandeur que prendra votre Scrippy.

Certains vont dire : "Pourquoi ne pas mettre un support de 1024 en largeur? Et je vous réponds comme ceci : "Non, je ne suis pas intéressée".

Voyez-vous, si vous mettez un support de 1024 en largeur, ceux qui ont une résolution de 800 auront au bas de leur écran une barre de défilement et devront déplacer cette barre vers la droite afin de mieux voir le Scrippy ou encore changer carrément leur résolution. Ce qui n'est pas très intéressant.

Même ceux qui possèdent une résolution de 1024 auront quand même cette barre puisque Scrippy calcul le 1024 mais ne tient pas compte de la barre de défilement extérieure, soit celle de Windows. C'est également pour cette raison que l'on ne voit jamais votre bordure ou Frame de droit à votre Scrippy. donc, pour ceux qui veulent vraiment utiliser une largeur de 1024, je leur conseille d'inscrire le nombre 1000 afin que l'on puisse mieux voir votre création. Mais... il ne faut jamais oublier ceux qui ont une résolution de 800. Pensez-y!

Ceci dit, vous ne verrez jamais mes créations avec une telle largeur. Par contre je vais jouer sur la longueur.

Case 2 :

Insert/Background :

Allez chercher votre glitter;

J'aimerais vous signaler que tous les glitters auront un Pixels per second de 100 et Pixels per move de 10. Donc, je ne répéterai pas cette information, juste de faire attention;

Imaginez la page complète que Scrippy et l'ordinateur doivent charger!

Case 3 :

Insert/Container/Positioned Container :

Horizontal Layout : Set Left and Right Edges :

Left : 5, Right : 5;

Vertical Layout : Set top and Bottom Edges :

Top : 5, Bottom : 5;

Ce Container étant en retrait de 5, il permettra à votre glitter précédent de servir de cadrage;

Case 4 :

Insert/Background :

Vous allez chercher votre tuile de fond avec un Scrolling : Up;

Case 5 :

Insert/Container/Positioned Container :

Déplacer la case au 1^er palier;

Horizontal Layout : Set Left and Right Edges :

Left : 15, Right : 15;

Vertical Layout : Set Top and Bottom Edges :

Top : 15, Bottom : 15;

Ce Container en retrait de 15 du bord de la fenêtre servira à mettre vos Scrolling Border ainsi que les quatre images à vos quatre coins;

Case 6 :

Insert/Scrolling Border/Top Border Scroll :

Allez chercher l'image choisie pour la bordure du haut;

La direction du Scroll est à Right;

Vous devez mettre la transparence à 50;

Case 7 :

Insert/Scrolling Border/Right Border Scroll :

Allez chercher l'image choisie pour votre bordure de droite;

Scroll Direction : Down;

Transparency à 50;

Case 8 :

Insert/Scrolling Border/Bottom Border Scroll :

L'image pour la bordure du bas;

Scroll Direction : Left;

Transparency : 50;

Case 9 :

Insert/Scrolling Border/Left Border Scroll :

L'image servant à votre bordure de gauche;

Scrolling : Up;

Transparency : 50;

Case 10 :

Insert/Positioned Object/Positioned Image :

Allez chercher votre petite image encadrée pour votre coin supérieur gauche;

Horizontal Position : From : Left;

Vertical Position : From Top;

Case 11 :

Insert/Positioned Object/Positioned Image :

Votre petite image encadrée pour le coin supérieur droit;

Horizontal Position : From Right;

Vertical Position : From Top;

Case 12 :

Insert/Positioned Object/Positioned Image :

Allez chercher votre petite image encadrée pour le coin inférieur droit;

Horizontal Position : From Right;

Vertical Position : From Bottom;

Case 13 :

Insert/Positioned Object/Positioned Image :

La petite image encadrée pour le coin inférieur gauche;

Horizontal Position : From Left;

Vertical Position : From Bottom;

Vous venez de finir la partie extérieure de votre Scrippy.

Maintenant, vous allez créer un Container afin d'y insérer les trois lignes horizontales du haut pour ensuite vous en servir pour faire un Copier/Coller.

Case 14 :

Insert/Container/Positioned Container :

Vous déplacez cette case au 1^er palier soit complètement à gauche;

Horizontal Layout : Set Left and Right Edges :

Left : 52, Right : 52;

Vertical Layout : Set Position and Height :

Top : 40, Size : 62;

Case 15 :

Insert/Container/Positioned Container :

Ce Container servira pour la première ligne du haut;

Horizontal Layout : Set Left and Right Edges :

Left : 0, Right : 0;

Vertical Layout : Set Position and Height :

Top : 0, Size : 4 pour indiquer l'épaisseur de la ligne;

Vous voyez que trois nombres sont à 0, ceci est bien simple puisque le Container fait partie de la case 14 et que vous avez donné le bon endroit, les bonne données donc, pas besoin de distance pour cette première ligne;

Case 16 :

Insert/Background : Votre glitter;

Scrolling : Down+Left;

Case 17 :

Insert/Container/Positioned Container :

Vous devez déplacer cette case au 2^e palier afin qu'elle soit alignée avec la case 15;

Ce Container servira pour votre 2^e ligne du haut;

Horizontal Layout : Set Left and Right Edges :

Left : 48, Right : 48;

Vertical Layout : Set Position and Height :

Top : 10, Size : 3;

Left et Right sont à 48 car vous partez du Container de la case 14;

Case 18 :

Insert Background : Votre glitter;

Scrolling : Down+Left;

Case 19 :

Insert/Container/Positioned Container :

Naturellement, celui-ci est pour la 3^e ligne;

Horizontal Layout : Set Left and Right Edges :

Left : 98, Right : 98;

Vertical Layout : Set Position and Height :

Top : 20, Size : 2;

Case 20 :

Insert/Background : Votre glitter;

Scrolling : Down+Left;

Maintenant, vous allez faire la partie du bas en utilisant le Copier/Coller.

Cases 21 à 27 :

Allez vous positionner sur la case 14, soit le Positioned Container au 1^er palier et faites Edit/Copy Positioned Container;

Vous vous positionnez sur la dernière case, soit la case 20, le Background et faites Edit/Paste Positioned Container;

Déplacez cette case complètement à gauche afin qu'elle soit au 1^er palier;

Dans Vertical Layout, changez Top pour Bottom;

Faites un Preview et vous allez voir que les lignes sont bien dans le bas mais pas dans le bon ordre. Vous allez y remédier;

Allez sur la case 22 et changez Top pour Bottom;

Même chose pour les cases 24 et 26;

Refaites un Preview et admirez vos lignes;

Vous êtes rendus à positionner les quatre cadres intérieurs d'une dimension de 73x110 et 46x70;

Case 28 :

Insert/Container/Positioned Container :

Ce Container servira au cadre en haut à gauche;

Déplacez cette case au 1^er palier;

Horizontal Layout : Set Position and Width :

Left : 70, Size : 79;

79 parce qu'il doit être un peu plus large que votre image. L'image a 73 de largeur et vous ajoutez 6 donc, un résultat de 79;

Vertical Layout : Set Position and Height :

Top : 100, Size : 116 puisque votre image a une hauteur de 100 et vous ajoutez 6 donc un résultat de 116;

Case 29 :

Insert Background : Votre glitter

Scrolling: Up+Right;

Case 30 :

Insert/Positioned Object/Positioned Image :

Allez chercher votre image de 73x110;

Horizontal et Vertical Layout à Center parce que celle-ci doit être positionnée bien au centre du Container;

Cases 31 à 33 :

Vous allez copier le Container pour votre image en bas à droite;

Vous positionnez sur la case 28, soit le Positioned Container et faites Edit/Copy Positioned Container;

Allez sur la case 30, soit le Positioned Image et faites Edit/Paste Positioned Container;

Déplacez cette case complètement à gauche afin qu'elle soit au 1^er palier;

Dans Horizontal Layout vous changez Left pour Right;

Dans Vertical Layout, vous changez Top pour Bottom;

Dans la case 32, le Background, vous changez le Scrolling à Down+Left;

À la case 33, vous allez chercher l'image que vous avez choisie pour mettre en bas à droite.

Cases 34 à 36 :

Comme vous êtes déjà sur la dernière case soit le Positioned Image, faites Edit/Paste Positioned Container;

Déplacez la case au 1^er palier;

Dans Horizontal Layout vous devez changer les valeurs :

Left à 83, Size à 52;

Dans Vertical Layout :

Bottom : 116, Size 76;

À la case 35, juste vérifier que le Background a un Scrolling : Up+Right;

À la case 36, soit le Positioned Image, vous allez chercher l'image choisie pour le bas à gauche;

Cases 37 à 39 :

Allez sur la case 34 et faites Edit/Copy Positioned Container;

Allez sur votre dernière case et faites Edit/Paste Positioned Container;

Déplacez la case au 1^er palier;

Dans Horizontal Layout, changez Left pour Right;

À Vertical Layout : changez Bottom pour Top;

À la case 38, le Background, changez le Scrolling à Down+Left;

À la case 39, Positioned Image, vous allez chercher l'image choisie pour la droite en haut;

Cases 40 à 42 :

Puisque vous êtes sur la dernière case, faites Edit/Paste Positioned Container et déplacez la case au 1^er palier;

Vous allez changer les valeurs pour votre cadre principal;

Horizontal Layout :

Vous choisissez Center : 0 et Size : 456;

Vertical Layout :

Choisissez Top à 125 et Size à 328;

Dans le Background, changez le Scrolling à Down+Right;

À Positioned Image, vous allez chercher votre cadre principal;

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

Vous allez maintenant faire un Container afin de mettre vos lignes verticales.

Case 43 :

Insert/Container/Positioned Container :

Déplacez cette case au 1^er palier;

Horizontal Layout : Set Position and Width :

Left : 73, Size : 81;

Vertical Layout : Set Position and Height :

Top : 225, Size : 374;

Case 44 :

Insert/Container/Positioned Container :

Pour votre première ligne;

Horizontal Layout : Set Position and Width :

Left : 0, Size : 5;

Vertical Layout :

Top : 0, Size : 374;

Case 45 :

Insert/Background : Le glitter

Scrolling à Up+ Right;

Cases 46 et 47 :

Allez sur la case 44 et faite Edit/Copy….;

Sur la case 45, faites Edit/Paste….. ;

Déplacez la case au 2^e palier afin qu'elle soit alignée avec la case 44;

Vous devez changer les valeurs suivantes :

Left : 20, Size : 4;

Top : 25 et Size à 324;

Allez sur la dernière case;

Cases 48 et 49 :

Faites Edit/Paste…;

Déplacer la case au 2^e palier;

Changez les valeurs suivantes :

Left : 40, Size : 3;

Top : 50 et Size : 274;

Allez sur la case 49;

Cases 50 et 51 :

Faites Edit/Paste…;

Déplacer au 2^e palier;

Changer les valeurs suivantes :

Left : 60, Size : 2;

Top : 75 et Size à 224;

Allez sur la dernière case;

Cases 52 et 52 :

Faites Edit/Paste…;

Déplacer au 2^e palier;

Changer les valeurs suivantes :

Left : 80, Size : 1;

Top : 100 et Size 174;

Vous venez de finir les lignes de gauche. Maintenant, vous allez copier le Container afin de faire celle de droite.

Cases 54 à 64 :

Vous devez vous positionner sur la case 43, soit le Positioned Container et faites Edit/Copy….;

Allez sur la dernière case, soit le dernier Background et faites Edit/Paste….;

Déplacez la case au 1^er palier;

Vous êtes sur la case 54 et vous devez changer Left pour Right;

Dans Vertical Layout mettre Top à 200;

Dans les cases 55, 57, 59, 61 et 63, vous devez changer Left pour Right;

Vous avez terminé toutes vos lignes verticales. C'est pratique n'est-ce pas le copier/coller? hi! hi!

Maintenant, c'est la partie pour votre Message Area. Allez sur la dernière case doit la case 64, le Background;

Case 65 :

Insert/Container/Positioned Container;

Déplacez la case au 1^er palier;

Horizontal Layout : Set Left and Right Edges :

Left : 200, Right : 200;

Vertical Layout : Set Top and Bottom Edges :

Top : 500 et Bottom : 95;

Case 66 :

Insert/Background : Le glitter

Scrolling à Up+Right;

Case 67 :

Insert/Container/Positioned Container :

Horizontal Layout : Set Left and Right Edges :

Left : 3, Right : 3;

Vertical Layout : Set Top and Bottom Edges :

Top : 3 et Bottom : 3;

Case 68 :

Insert/Background :

Soit vous choisissez une couleur ou encore prendre votre tuile pour votre rectangle d'écriture.

Case 69 :

Insert/Message Area :

Vous écrivez votre message mais n'oubliez pas de coloriser votre barre de défilement;

Case 70 :

Insert/Message Area :

Vous devez déplacer cette case au 1^er palier et colorisez la barre de défilement.

Case 71 :

Insert/Loading Message : Selon votre goût;

Case 72 :

Insert/Options :

Mettre la même couleur que votre Loading Message;

Case 73 :

Insert/Ticker : Vous savez quoi faire.. hi! hi!

Case 74 :

Insert/Sound : La musique de votre choix.

Vous avez terminé votre Scrippy!

C'est super n'est-ce pas?

Bonne Création!

Retour

Le 15 décembre 2004