CALENDRIER DE L'AVENT




Annie Things Possible


Mon calendrier de l'Avent est ICI. Le calendrier pour 2024 est ICI.

Ce tutoriel est © Micki de Heaven Dreams - no longer online.
Je remercie Micki de m'avoir donné la permission de traduire son tutoriel. Cette traduction est une adaptation de son tuto et non pas une traduction fidèle.
Thank you very much Micki.

deutsche Originalfassung - Version originale en Allemand - tutoriel ist © Micki von Heaven Dreams - no longer available.

English translation here - Version en anglais ici : Advent Calendar translated by Ann of Faerydust Express - no longer available. I have a copy here.

Les calendriers de l'Avent des membres de PSP 4 ALL sont ici - Envoyez-moi une vignette de taille 320x200 max et un lien à votre page.
Advent Calendars created by PSP 4 ALL members are here - Please send a thumbnail of your calendar, no bigger than 300x200 max and a link to your calendar.


J'ai rajouté ce petit ange pour vous aider. Vous pouvez le cliquer et le déplacer
 pour vous repérer dans le tutoriel.
Martine




 
 Le Matériel

Ce tutoriel va vous expliquer comment créer un calendrier de l'Avent. Nous utiliserons l'outil Image Cliquable de Paint Shop Pro et aussi un script Javascript donc quelques connaissances en HTML seront utiles. Le script vient de ce site : ROFL qui a d'autres scripts intéressants!
Le script veille à ce que les fenêtres du calendrier ne puissent pas être ouvertes avant le jour J. Si on essaye, une fenêtre pop-up s'ouvre pour prévenir que ce n'est pas le jour.

Télécharger le fichier zippé et le dézipper dans un dossier. Le mien s'appelle: MF_AdventCal2009. Je rajoute l'année à mon dossier parce que je fais un calendrier tous les ans.
Dans le fichier, vous y trouverez toutes les pages dont vous avez besoin pour réaliser ce calendrier :
  1. Il y a 26 pages de 0 à 25 - une page pour chaque jour. Je mets un cadeau le 25 alors j'ai rajouté la page. Le calendrier de Micki s'arrête le 24.
  2. Il y a une page avec le nom "pasdechance" - c'est celle qui s'ouvre quand on est curieux et que c'est pas la bonne date!
  3. Il y a la page où vous aurez votre calendrier : CalendrierAvent.html
  4. Et les images - les deux fonds : bg et bg1 et la bande : stripe. Vous pouvez les remplacer avec vos propres images.
  5. Il y a aussi un autre fichier zippé avec les pinceaux (HD_brushes) si vous souhaitez faire des étoiles comme ci-dessous - c'est utile et ça permet de faire des étoiles de tailles différentes. Les dézipper et les mettre où il faut dans PSP :



     J'ai utilisé mes propres étoiles.

Télécharger le matériel:


Le Calendrier et les Etoiles

Faire l'image pour le calendrier. Vous choisissez la taille que vous voulez. Le mien est 1024x689.
Ajouter vos éléments sur des calques différents et puis enregistrez.
Fusionner visible.

Ajouter un calque.
Puis la première étoile avec un chiffre au milieu.
Nouveau calque et un autre chiffre.
Continuer à rajouter les étoiles sur un nouveau calque à chaque fois et dans chaque étoile, un chiffre. En tout 24 étoiles ou 25 si comme moi vous avez un cadeau pour le 25.
Placer les étoiles sur des calques différents vous permettra quand vous aurez fini de repositionner les étoiles si nécessaire.
Vérifier que les étoiles sont où il faut et enregistrer.

Fusionner visible.

L'Image Cliquable

Fichier > Exporter > Image Cliquable (Image Mapper).

L'Image cliquable permet de créér des zones réactives. Il s'agit d'ajouter des informations à notre image dans un fichier HTML dans le but de générer des liens qui seront cliquables.



Vous verrez ce panneau :



En haut, dans la petite fenêtre, on a l'espace de travail qui affiche l'image sur laquelle on va délimiter les zones actives qui sont ici les étoiles.

Les boutons de l'Image Cliquable :

  • Bouton 1 = la flèche
  • Bouton 2 = le bouton Déplacement pour repositionner, pour faire glisser les points mal placés jusqu'à leur emplacement définitif
  • Bouton 3 = le polygone permet la création d'une zone réactive à plusieurs côtés
  • Bouton 4 = le rectangle permet la création d'une zone réactive de forme rectangulaire
  • Bouton 5 = le cercle permet la création d'une zone réactive de forme circulaire
    On choisit le bouton 3, 4 ou 5 selon la forme du dessin à entourer.
  • Bouton 6 = la gomme
  • Bouton 7 = la main pour déplacer votre image dans la fenêtre
  • Bouton 8 = l'adresse de destination du lien dans la case URL
  • Bouton 9 = le commentaire du lien dans le champ Texte à afficher
  • Bouton 10 = la cible - la fenêtre dans laquelle la page de destination va s'ouvrir. Si rien n'est précisé, le lien s'ouvre dans la page du navigateur par défaut.
Création du lien

Utiliser la main pour positionner l'image dans l'espace de travail.
Choisir un des boutons: le polygone ou le rectangle et tracer autour de la première étoile comme ceci.
Avec le bouton polygone, tracer la zone réactive en cliquant dans l'image pour chaque angle du polygone.
Double-cliquer sur le premier point que vous avez créé pour fermer votre polygone et la zone cliquable.

Avec le bouton polygone (3) Avec le bouton rectangle(4)

Utiliser le bouton déplacement (bouton2) pour modifier et repositionner les points.

Une fois que le tracé pour rendre l'étoile active est correct, c'est à dire que la zone cliquable est prête, il nous faut renseigner les champs 8 et 9. Voir l'image cliquable plus haut.

Dans la zone 8 : URL, vous allez mettre l'adresse pour le fichier html qui s'ouvrira quand on clique sur cette étoile. Mais comme nous travaillons avec un script Javascript, à la place de l'adresse http:// , nous allons mettre ceci :
javascript:RO(1)
C'est 1 parce que c'est le 1 pour premier. Et cette étoile ouvrira la page 1.html, page sur laquelle vous mettrez votre cadeau pour le 1 décembre.
Quand vous ferez l'étoile 23, vous mettrez :
javascript:RO(23) - 23 pour le 23 décembre.

Et dans la zone 9 : Texte à afficher, vous mettez la date : 1 décembre
Et pour l'étoile 23, vous mettrez 23 décembre.
Vous ferez la même chose pour toutes les étoiles. Le chiffre dans l'étoile c'est le jour où l'on pourra cliquer sur l'étoile. Utiliser la main pour déplacer l'image dans l'espace de travail en haut.

Une fois que vous avez fini de créer les zones actives autour de chaque étoile, passons à l'étape suivante.

Enregistrement

Cliquer sur Format et sélectionner le format dans lequel vous souhaitez enregistrer votre image.



 Cliquer sur le bouton Optimiser pour ouvrir la boite de dialogue.
Puis cliquer sur Enregistrer sous :
il va vous falloir enregister une page HTM qui contient tous les paramètres - positionnement et propriétés
et un fichier image au format séléctionné à mettre dans le même dossier.
Bien enregistrer dans le dossier où vous avez dézipper tous les fichiers.

Enregistrement

Naviguer jusqu'à votre dossier et ouvrir le fichier htm qui vient d'être créé dans votre éditeur web ou Notepad.

Vous devriez voir ceci ou quelque chose qui ressemble même si les jours ne sont pas dans le même ordre.


Rechercher cette section délimitée en rouge et qui est sur fond bleu ici, dans votre fichier htm et copier et coller cette section sur le fichier CalendrierAvent.html entre
 <!--le code Image Cliquable ici-->
et
 <!--Fin de l'Image Cliquable-->

Il ne vous reste plus qu'à faire tous les petits cadeaux que vous allez donner pendant cette période de l'Avent.

 Martine
 19 novembre 2009
 
 Si vous avez des questions, n'hésitez pas à me contacter.
 
 

Tutoriel © Micki de Heaven Dreams - Traduction par Martine pour PSP 4 ALL - Annie Lang Images included with permission: www.anniethingspossible.com