3 - Le modèle graphique avec un fichier XML et un script

La préparation du modèle graphique se réalise en deux étapes : l’élaboration du fichier Illustrator (mais sans définir les variables) et la mise au point des données du modèle dans une application de type tableur (NeoOffice ou Microsoft Excel).

La préparation de l’illustration

La mise en place des éléments

Le document de notre exemple comporte des éléments variables : des textes (titre, nom de rubrique, numéro, commentaires), une image (fichier lié), un graphe et deux icônes (dont seulement une des deux sera affichée dans le document final) ; et des éléments fixes : un fond coloré à l’arrière-plan, un titre du graphe et de la rubrique.

Par le panneau Aspect, on a attribué à certains éléments variables des effets tels que l’encadrement pour le titre, le fond pour le commentaire, l’ombre portée pour l’image ou d’autres options telles que le dimensionnement automatique pour le texte captif des commentaires (menu Texte/Options de texte captif). Ces mises en forme s’adapteront à chaque contenu dans le document final.

Les calques

Par cette méthode, vous n’avez pas à définir les variables ; en revanche, pour que le script puisse opérer correctement et détecter ce qui sera (ou ne sera pas) variable, il est impératif de renommer correctement les objets dans le panneau Calques et d’en regrouper certains dans des calques (éventuellement verrouillés pour les élements fixes). Les noms des objets devront respecter la syntaxe XML : sans espace (remplacé par underscore), ni signes accentués et spéciaux.

La préparation de la bibliothèque de variables dans un tableur

La bibliothèque de variables est en XML, ici elle sera obtenue à partir d’un fichier texte (format .txt, texte délimité par des tabulations) converti en XML par le script. Ce fichier texte s’élabore dans un tableur (vous pouvez utiliser Excel, NeoOffice, OpenOffice ou tout logiciel capable d’enregistrer en fichier .txt). Dans ce tableur, vous devez créer (ou récupérer) un tableau de données qui sera enregistré au format texte.

La syntaxe dans le tableau de données

Chaque colonne du tableau de données correspond à une variable du modèle graphique dont le nom sera l’intitulé de la colonne. Il doit donc être exactement le même que le nom de l’objet dans le panneau Calques d’Illustrator. Certaines variables ont une syntaxe particulière :

Variable de type Fichier lié : le nom de la colonne doit débuter par le signe @ (dans notre exemple, @Image) ;

Variable de type Graphe : le nom de la colonne doit débuter par le signe % (dans notre exemple, %Graphe)  ;

Variable de type Visibilité : le nom de la colonne doit débuter par le signe # (dans notre exemple, il y a deux variables : #Type_E et #Type_A).

Les valeurs des variables dans le tableau

Les variables de texte

Le contenu des cellules d’une colonne correspondant à une variable de texte est une saise classique de chaîne de caractères. Pour insérer un retour paragraphe, tapez cmd [Ctrl] Entrée ou alt [Alt] Entrée selon le logiciel.

Les valeurs des variables Fichier lié

Pour la colonne de fichiers liés, il faut le nom du fichier (avec son extension et une syntaxe XML). En effet, une option du script permettra d’obtenir l’adresse complète du fichier en pointant le dossier des images.

Pour remplir la colonne avec l’ensemble des noms de fichiers, effectuez les manipulations suivantes :

1.Sur le bureau affichez le dossier des images (avec une présentation par liste triée de manière alphabétique pour correspondre au tri des lignes du tableur) ;

2.Sélectionnez la liste des noms, copiez-la dans le presse-papiers (cmd C [Ctrl C]) ;

3.Dans le tableur, cliquez sur la cellule de la deuxième ligne sous l’intitulé @Image, et collez (cmd V [Ctrl V]).

Les valeurs des variables Graphe

Dans Illustrator, le graphe comporte trois barres avec chacune un intitulé (Classique, Jazz et Rock-Pop). Cela correspond à un ensemble de données de trois lignes que l’on peut regrouper dans un fichier texte (au format .txt, texte délimité par des tabulations).

Il faut donc autant de fichiers .txt que de cellules dans la colonne %Graphe. Chacun d’eux constituant les données qui seront importées (avec la variable) pour constituer le graphe. Ces fichiers peuvent s’obtenir à partir d’un tableur et, comme les fichers image, doivent être placés dans un dossier correctement nommé (syntaxe XML) et triés selon l’ordre des colonnes du tableau.

Pour remplir la colonne %Graphe, avec l’ensemble des noms de fichiers texte (avec leur extension .txt), effectuez les manipulations suivantes :

1.Sur le bureau affichez le dossier des fichiers de données du graphe (vérifiez que leurs noms respectent la syntaxe XML et corrigez-les éventuellement) ;

2.Sélectionnez la liste des noms, copiez-la dans le presse-papiers (cmd C [Ctrl C]) ;

3.Dans le tableur, cliquez sur la cellule de la deuxième ligne sous l’intitulé %Graphe, et collez (cmd V [Ctrl V]).

Les valeurs des variables de Visibilité

Pour les colonnes des visibilités (#Type_E et #Type_A), il n’y a que deux valeurs possibles : TRUE et FALSE. Saisissez (ou collez) les différentes valeurs voulues dans les cases des deux colonnes correspondantes (voir ci-après).

L’enregistrement du fichier texte pour le script

L’ensemble du tableau de données est terminé. Gardez une version de ce tableau au format natif du tableur (pour pouvoir le rééditer plus facilement) et procédez à son enregistrement au format texte délimité par des tabulations. Le tableau a l’aspect ci-dessous.

Le script et son paramétrage

Le téléchargement et la mise en place du script

Le script (JavaScript) s’appelle VariableImporter.jsx, il s’agit de la version 8 qui a été écrite par Vasily Hall (vasily.hall@gmail.com). Pour télécharger le script et le rendre utilisable dans Illustrator, effectuez les opérations suivantes :

1.Dans un navigateur, rendez-vous à l’adresse suivante : https://github.com/Silly-V/Adobe-Illustrator/blob/master/Variable%20Importer/VariableImporter.jsx (ou, plus simplement, tapez VariableImporter.jsx dans Google pour aboutir à cette adresse en cliquant sur le premier lien, github.com, des résultats de la recherche).

2.Dans la page affichée, cliquez sur le bouton RAW pour vous diriger sur la page du code du script. Effectuez un clic droit sur ce code et pour lancer la commande Enregistrer sous. Enregistrez sur votre bureau au format .jsx.

3.Copiez le fichier .jsx du bureau dans le dossier des scripts d’Illustrator (Adobe Illustrator CC 2015/Presets/fr_FR/Scripts). Redémarrez Illustrator : le script est opérationnel.

Le paramètrage de la fenêtre du script

Le script est en place ; le fichier texte des données du modèle graphique est prêt, vous pouvez lancer son processus de conversion en fichier XML et l’importation des variables. Pour cela, enregistrez une copie du fichier Illustrator et lancez le script Variable-Importer.jsx par le sous-menu Scripts du menu Fichier. Une fenêtre de paramétrage (en anglais) apparaît. Avant d’en faire la mise au point, vous devez spécifier le fichier texte à utiliser par clic sur le bouton Choose Data File (choisir le fichier de données).

La fenêtre se remplit d’une liste de variables dont le nom et le type correspondent aux intitulés de colonnes (Headers) saisis dans le tableur. Leur nombre est égal à celui du nombre de colonnes créées dans le tableur ; s’il en manque, c’est qu’un nom ne respectait pas la syntaxe XML.

Le paramétrage du script peut commencer, il comporte quelques étapes dont chacune correspond à une rubrique de la fenêtre (activée par un bouton radio) :

1.Régler les options (Options) ;

2.Définir le chemin d’accès aux fichiers (File Paths) ;

3.Définir des paramètres prédéfinis (Presets) ;

4.Tester ou vérifier le paramétrage (Test) ;

5.En dernier lieu, on peut lancer l’importation des variables par clic sur le bouton Import Variables.

Options : le réglage des options

Cette rubrique permet de spécifier le nom des ensembles de données (Dataset Names) et la création ou non d’un fichier XML qui constituera une bibliothèque de variables.

La rubrique Options propose trois zones : Dataset Names, XML Options et Auto Binding.

Dataset Names : en cliquant sur le bouton Assign de cette zone, le script affiche un panneau pour définir le nom des ensembles de variables (par défaut Record + + INC) qui, par la suite, apparaîtront dans le panneau Variables d’Illustrator. Ils doivent obligatoirement être incrémentés en fin de nom avec l’option INC (dans notre exemple, de 1 à 20), mais vous disposez de plusieurs cases pour personnaliser ce nom.

XML Options : l’option Keep XML permet de créer (conserver) le fichier XML issu de la conversion du fichier .txt en données XML. Pour le renommer et choisir sa position sur le disque, cliquez sur le bouton XML File.

Auto Binding : la zone indique la méthode choisie pour définir la liaison entre variable et objet. Avec notre saisie dans le tableur, l’option par défaut (par nom) convient.

File Paths : les chemins des dossiers de fichiers liés et de fichiers de données du graphe

Cette rubrique permettra à Illustrator de trouver l’accés aux fichiers liés et aux fichiers de données du graphe.

La rubrique File Paths propose deux zones : Prepend Image Path et Prepend Graph Path.

Prepend Image Path : en cochant l’option Choose Folder (choisir dossier), vous pouvez parcourir le disque pour choisir le dossier contenant les fichiers image. Si vous cliquez sur le bouton Show Log, le script affichera la liste des fichiers trouvés (et manquants).

Prepend Graph Path : comme précédemment, en cochant l’option Choose Folder, vous pouvez choisir le dossier contenant les fichiers de données du graphe. Si vous cliquez sur le bouton Show Log, le script affichera la liste des fichiers trouvés (et manquants).

Presets : les paramètres prédéfinis

La rubrique est facultative. Si vous la renseignez, il sera plus facile (rapide) de relancer le script s’il doit l’être : le nom des ensembles, la conservation du fichier XML et les chemins de fichiers seront conservés. Pour cela, cliquez sur Add (ajouter), renommez, puis sélectionnez le paramètre prédéfini (ou presets) qui s’affiche alors dans la liste et cliquez sur Activate (pour qu’il devienne le paramètre courant à la place de Default) et sur Save Presets (pour le mémoriser).

Test : le test de la conversion (importation)

La rubrique Test propose quatre onglets : Dataset Names, Image Files, Graph Files et Art Binding. Par clic sur chacun d’eux vous pouvez vérifier que le script a respectivement : identifié correctement les variables, trouvé les fichiers image, trouvé les fichiers de données du graphe et créé les bonnes liaisons entre variable et objet (Art) de l’illustration.

L’importation des variables

Pour que le script procède à la conversion du fichier .txt en fichier .xml et importe les variables dans le document Illustrator après avoir, éventuellement, cliqué sur le bouton Variable Display, cliquez sur le bouton Import Variables situé en bas de la fenêtre du script.

À l’issue de l’importation, une fenêtre apparaît, elle indique combien de variables ont été importées (c’est le nombre de colonnes créées dans le tableur), ainsi que le nombre d’ensembles de données ou records générés (c’est le nombre de lignes créées dans le tableur moins celle des intitulés utilisée pour nommer les variables). Le bouton Cycle Update All Datasets permet une visualisation rapide des différents ensembles.

Quand vous avez terminé cette première visualisation, cliquez sur Ok : Illustrator affiche le premier ensemble de données (il porte le nom spécifié dans le script avec le numéro 1). Le panneau Variables affiche les variables importées et son menu local liste les ensembles de données (ici de 1 à 20).

À l’aide des triangles du panneau Variables, vous pouvez passer en revue tous les ensembles de données et vérifier l’exactitude de ce qui est affiché.

Si vous constatez des erreurs (mauvaises correspondances des images ou des textes, valeurs de graphe et visibilité incorrectes), vous avez deux possibilités pour les corriger :

Vous pouvez agir directement sur l’illustration, par exemple, changer la visibilité d’un objet, les données du graphe ou les saisies de textes.

Vous pouvez reprendre le fichier du tableur, revenir à la version précédente du document Illustrator et relancer le script. Si vous avez mémorisé les paramètres prédéfinis (presets), il n’y aura qu’à désigner le fichier .txt rectifié.

La gestion du contenu des variables

Le modèle graphique peut être géré de deux méthodes : par le fichier .txt issu du tableur et désigné lors du paramétrage du script (Import Variable.jsx) ou à partir du fichier .xml de la bibliothèque de variables.

Avec le fichier .txt : la gestion s’effectue dans le tableur. Après chaque intervention sur le tableau de données, le fichier .txt devra être mis à jour et le script devra être relancé (les variables d’Illustrator et leurs valeurs seront remplacées, un message le signalera).

Avec le fichier .xml : la bibliothèque de variables est un fichier XML qui peut être généré par le script (en cochant Keep XML de la rubrique Options du script) ou par Illustrator avec la commande Enregistrer la bibliothèque de variables du menu du panneau Bibliothèque.

Ces modifications sont plus délicates que celles dans le tableur (elles ont été indiquées précédemment). Une fois faites, il faudra charger la bibliothèque modifiée par la commande du menu du panneau Variables.

Fin de l'étape 3/4