Create a sitemap icon using reusable rich symbols

La création d’un prototype de site paraît simple, mais se plier aux moindres désirs d’un client indécis peut se transformer en un interminable casse-tête. Il se peut que vous ayez l’impression d’adapter sans cesse le prototype du site conformément aux exigences de votre client, et ce pour des choses aussi basiques que le plan du site (par exemple, votre client peut vous demander d’ajouter des pages sous la rubrique Produits en fonction des nouveaux produits développés).

Ajoutez des symboles enrichis ! Les symboles enrichis (symboles graphiques avec propriétés modifiables) sont très utiles pour créer un prototype de site. Si vous utilisez un élément de création de manière répétée, comme une icône de plan de site, mais que vous pensez devoir le modifier fréquemment (couleur, texte, forme, visibilité, etc.), les symboles enrichis sont faits pour vous.

Ce didacticiel vous explique comment créer un symbole enrichi dans Adobe® Fireworks® CS3. Je vais vous montrer comment utiliser la commande personnalisée Créer le script du symbole pour générer le code JavaScript requis afin de créer un symbole avec des propriétés modifiables.

Prérequis

Pour suivre les instructions de ce didacticiel, vous devez installer les logiciels et fichiers ci-après :

Adobe Fireworks CS3

Fichiers d’exemple :

sitemap_sample.zip (fichier ZIP, 55 Ko)

Connaissances prérequises :

Aucune

Organisation d’objets pour créer un symbole avec des propriétés

Commençons.

Ouvrez le fichier d’exemple intitulé sitemap_sample.png.
Choisissez la commande Fenêtre > Pages pour ouvrir le panneau Pages. Cliquez sur la page de création d’icône (voir la figure 1).

(+) agrandir
Figure 1 : cliquez sur l’option de création d’icône dans le panneau Pages pour ouvrir la page de création d’icône.
Cliquez deux fois sur chaque symbole, puis indiquez les champs de texte au sein de chaque nom unique à l’aide de l’inspecteur de propriétés. Assurez-vous qu’il n’y ait aucun espace blanc entre les mots que vous saisissez, comme indiqué dans les fichiers source de ce didacticiel.

Remarque : cette étape est très importante, car les noms que vous indiquez seront référencés dans le JavaScript qui contrôle les propriétés de symbole. Ainsi, lorsque vous créez un champ de texte pour un objet texte dans mon exemple, le nom indiqué par défaut est {}, car il correspond à ce que vous avez saisi pour l’objet texte. Vous avez donné à l’objet texte le nom descriptif docType.
Choisissez la commande Sélection > Sélectionner tout, puis la commande Modifier > Symbole > Convertir en symbole. Sélectionnez l’option Enregistrer dans la bibliothèque commune dans la boîte de dialogue Convertir en symbole, puis cliquez sur le bouton OK (voir la figure 2). Dans la boîte de dialogue Enregistrer sous, remontez d’un niveau vers le dossier Bibliothèque commune, puis créez un dossier intitulé monplandesite. Enregistrez le symbole dans ce dossier et nommez-le icône de page.

Figure 2 : sélectionnez l’option Enregistrer dans la bibliothèque commune dans la boîte de dialogue Convertir en symbole.

Vous remarquerez que le symbole ne se trouve plus dans votre document. N’ayez pas peur ! Il a simplement été déplacé vers la bibliothèque commune que nous explorerons au cours de la prochaine section. De cette manière, vous pouvez accéder à ce symbole à partir de plusieurs documents.

Création du script

Nous allons maintenant créer le script :

Choisissez la commande Commandes > Créer le script du symbole.
Dans la boîte de dialogue Créer le script du symbole, cliquez sur le bouton ... situé en haut à droite, recherchez le symbole que vous avez enregistré dans le dossier Bibliothèque commune/monplandesite, puis cliquez sur le bouton OK.

Remarque : sous Windows XP, la bibliothèque commune se trouve sous Documents and Settings/<compte utilisateur>/Application Data/Adobe/Fireworks CS3. Sous Windows Vista, la bibliothèque commune se trouve sous Utilisateurs/<compte utilisateur>/AppData/Roaming/Adobe/Fireworks. Sous Mac OS, la bibliothèque commune se trouve sous Utilisateurs/<compte utilisateur>/Bibliothèque/Application Support/Adobe/Fireworks CS3.
Cliquez sur le bouton [+] trois fois de suite pour ajouter trois propriétés (voir la figure 3).

(+) agrandir
Figure 3 : cliquez sur le bouton [+] trois fois de suite pour ajouter trois propriétés.
Sélectionnez la première propriété et conférez-lui les attributs suivants :
- Pour Nom de l’élément, choisissez docType.
- Pour Attribut, choisissez textChars.
- Pour Nom de propriété, saisissez Doc Type Label.
- Pour Valeur, saisissez {}, identificateur générique de code.
Remarque : pour le champ Valeur, nous devons ajouter une valeur par défaut pour que quelque chose s’affiche lorsque vous faites glisser un symbole vers la zone de travail.
Sélectionnez la deuxième propriété et conférez-lui les attributs suivants :
- Pour Nom de l’élément, choisissez docTitle.
- Pour Attribut, choisissez textChars.
- Pour Nom de propriété, saisissez Doc Title Label.
- Pour Valeur, saisissez doc-title.
Sélectionnez la troisième propriété et conférez-lui les attributs suivants :
- Pour Nom de l’élément, choisissez docBg.
- Pour Attribut, choisissez fillColor.
- Pour Nom de propriété, saisissez Color.
- Pour Valeur, saisissez #999999 qui correspondant à un gris moyen.
Lorsque vous avez fini, la boîte de dialogue Créer le script du symbole doit ressembler à cela (voir la figure 4) :

(+) agrandir
Figure 4 : boîte de dialogue Créer le script du symbole indiquant les valeurs de chacune des trois propriétés.
Cliquez sur le bouton Enregistrer, puis sur le bouton OK. Fireworks génère automatique le code JavaScript.

Utilisation d’un nouveau symbole enrichi de page

A présent, nous sommes prêts à utiliser ce symbole enrichi :

Dans le panneau Pages, cliquez sur la page du plan de site.
Choisissez la commande Fenêtre > Bibliothèque commune et ouvrez le dossier monplandesite.

Figure 5 : ouverture du dossier monplandesite dans la bibliothèque commune.
Faites glisser le symbole d’icône de page de la bibliothèque commune vers la zone de travail. Pour le placer correctement, référencez la mise en page du plan de site dans le fichier source fourni avec ce didacticiel.

Que faire maintenant

Après avoir créé votre symbole enrichi avec des propriétés, vous pouvez le mettre à jour à tout moment, dès que votre client ou vous le souhaitez ! Il vous suffit de sélectionner le symbole et de choisir la commande Fenêtre > Propriétés du symbole pour ouvrir le panneau Propriétés du symbole.

Pour en savoir plus sur l’utilisation des symboles enrichis dans Fireworks, consultez les ressources suivantes :