Comment ça marche

Images actives : un concept ouvert, une application extensible

Images actives a été pensée pour pourvoir être étendue dans l’avenir dans plusieurs directions :

• par l’ajout de nouvelles dispositions textes/images ;
• par l’ajout de nouveaux modes d’interactivité ;
• par l’ajout de nouveaux formats d’export (notamment html5/svg) ;
• par la mise à disposition de nouvelles interfaces de création (par exemple un outil en ligne).

  

Une architecture modulaire

Images actives est bâtie sous forme d’exécutables autonomes :

• le principal est l’interface graphique IMAGES_ACTIVE_GUI : elle permet à l’utilisateur d’éditer son contenu de façon visuelle. Elle génère les fichiers svg, css, wav et xml qui sont ensuite pris en charge par le module d’export ;
• le module d’export flash IMAGES_ACTIVES_EXPORT_FLASH génère à la volée une partie du code ActionsSCript 3 de l’image active et appelle le compilateur Flex open source pour créer le fichier swf en embarquant toutes les ressources nécessaires. Ce module peut être utilisé seul (en ligne de commande) ;
• le module d’auto-update IMAGES_ACTIVES maintient les numéros des versions courantes de tous les packages dans un fichier packages.xml et le compare à chaque lancement aux versions disponibles sur le serveur du CRDP de l’académie de Versailles. Il effectue le cas échéant le téléchargement, la vérification des checksum et la décompression pour chaque package à mettre à jour. Il lance ensuite l’interface graphique.

  

Au cœur d’Images actives : le format svg

Le contenu de l’image active est géré sous forme d’un fichier svg contenant la référence de l’image de fond, les tracés des détails et tous les textes (titre, légendes ou questions/réponses, métadonnées).

Image de fond et description générale

Par exemple, l’image de fond, le titre et la description générale de l’image sont gérés de la façon suivante :

C’est l’id « background » qui entraîne la reconnaissance de l’image en tant qu’image de fond.

Détails et description des détails

Les détails sont des éléments svg portant un id commençant par « detail » suivi d’un numéro.
Lorsqu’un détail est vectoriel, il contient des tracés : ces tracés portent un id commençant par « _detail » avec le numéro du détail auquel le tracé appartient, suivi de « _ » et d’un numéro de tracé.

Les groupes () sont également supportés. Un groupe peut être un détail mais il ne doit contenir que des formes vectorielles (pas d’images dans un groupe).

Pour indiquer que le détail est zoomable, on lui ajoute un attribut : images_actives:zoomable="true" (Si vous n’ajoutez pas l’espace de nommage « images actives » à votre fichier svg, le module d’export flash le fera pour vous).

Les détails puces

Les détails-puces sont des détails qui ne font pas partie de l’image. Ils se comportent différemment des autres détails. Ils ont un rôle de bouton permettant, par exemple, d’activer une question qui ne porte pas sur un détail particulier (question générale).

Pour transformer un détail en puce, créez un détail image et ajoutez cet attribut :

À noter : les détails se superposeront dans l’image active dans l’ordre dans lequel ils se présentent dans le fichier svg (les premiers en dessous).

Créer un fichier SVG hors d’images actives

Un éditeur svg comme Inkscape suffit pour créer ou éditer les fichiers svg utilisés par Images actives.

Sous Inkscape, pour ajouter les informations id, title et description : clic droit : « propriétés de l’objet ».

Attention ! Si vous ne cliquez pas sur « définir », vos modifications ne sont pas prises en compte.

Pour réaliser un lien, respectez la syntaxe : texte de mon lien@http://www.exemple.com.

Si vous réalisez un quiz, mettez votre question comme « title » et la réponse comme « description ».

Pour ajouter une image (le fond ou un détail bitmap), sous Inkscape, Fichier -> importer. Il ne faut pas l’incorporer mais la lier. Le fichier image correspondant doit donc se trouver dans le répertoire des images à côté du fichier svg. En mode « découverte », le titre et le description de l’image de fond (celle qui a pour id « background ») sont le titre et la description générale de l’image.

Évitez de redimensionner l’image dans Inkscape : les attributs « width » et « height » doivent correspondre aux dimensions réelles de l’image. Si vous voulez redimensionner votre image, faites-le au niveau du fichier bitmap avant de commencer à travailler. La résolution perdue limitera vos possibilités de zoom. Un côté du fichier image ne saurait dépasser 2880 pixels.

Attention ! Inskape a tendance à mettre des liens absolus dans l’attribut href. Corrigez les à la main si nécessaire.

Après avoir ajouté votre image de fond, recadrez le document : Fichiers -> propriétés du document -> ajustez la page au dessin ou à la sélection.

Les métadonnées

Pour saisir les métadonnées du document, utilisez de préférence la boîte de dialogue Inkscape. Il est possible d’ajouter des liens selon la syntaxe texte de mon lien@http://www.exemple.com déjà évoquée.

La feuille de styles

Elle utilise des classes css traditionnelles pour formater les différentes zones de texte. Attention ! Il est impossible de mettre du gras : il faut choisir une police grasse et l’embarquer.

Les classes CSS utilisées

• .title : le titre général de l’image ;
• .caption_title : le titre des légendes ;
• .caption_text : le texte des légendes ;
• .caption_selector : le sélecteur de légendes (seulement en disposition « top » ou « bottom ») ;
• .description_title : le titre de la description ;
• .description_text : le texte de la description ;
• .infos : les infos en bas de page ;
• .tooltips : les bulles de survol ;
• .answer_button : le bouton réponse (seulement en mode « quiz ») ;
• .password_box_label : l’étiquette texte de la boîte de dialogue mot de passe (seulement en mode « quiz » avec verrou) ;
• .password_box_input : la zone de saisie de la boîte de dialogue mot de passe (seulement en mode « quiz » avec verrou) ;
• .preloader : les textes de l’animation de préchargement (seulement si vous n’embarquez pas les ressources) ;
• .hyperlink : les liens hypertextes : déterminez la couleur, le soulignement ;
• .texte_credits : le texte des crédits.

Précision concernant les noms de polices

Pour le module d’export flash, les propriétés font-family contiennent le nom des fichiers de polices fournis dans le répertoire fonts. Ces fichiers doivent être renommés de façon à ce que leur nom ne contienne ni espace, ni tiret. Dans la feuille de style, le point de l’extension est remplacé par un symbole « _ ». Ainsi, MA SUPER-POLICE.TTF doit être renommé en MASUPERPOLICE.TTF et sera désigné dans la feuille de style par la règle :

font-family:MASUPERPOLICE_TTF ;

Ces opérations sont prises en charge automatiquement par IMAGES_ACTIVES_GUI

Le fichier XML d’options

Le fichier XML d’options contient un ensemble de propriété dont les noms sont généralement explicites. Certaines propriétés sont communes à toutes les dispositions et tous les modes d’interactivité : elles utilisent alors l’espace de nommage d’Images actives. Il est toujours possible d’ajouter des propriétés spécifiques en ajoutant des espaces de nommage. Vous trouvez ce fichier en décompressant un fichier xia ou dans le répertoire temp après une opération d’enregistrement ou d’export. Notez que le fichier d’options ne contient que les options sur lesquelles on a voulu donner la main à l’utilisateur. Le module d’export flash gère un fichier parameters.xml d’options par défaut, non contrôlables par l’utilisateur au travers de l’interface graphique. Vous le trouverez dans le répertoire d’installation sous as3src/xml.

Précision sur les couleurs

Les couleurs sont gérées selon le principe de la charte de couleurs : l’utilisateur choisit un jeu de cinq couleurs (ne comprenant pas les couleurs des textes) qui sera distribué de la façon la plus pertinente possible entre les éléments qui composent l’image active.

• color_0 : couleur de fond de l’animation ;
• color_1 : couleur principale, utilisée notamment pour le fond du cartouche des boutons et le fond du volet des informations de l’image ;
• color_2 : couleur secondaire, utilisée notamment pour le bord du cartouche des boutons et le bord du volet des informations de l’image ;
• color_3 : couleur complémentaire, utilisée dans le volet d’en-tête de l’accordéon, les scrollbars...
• color_4 : couleur de fond des volets en mode accordéon.

Le module d’export Flash

Utilisation

Voici sa syntaxe générale en ligne de commande :

> IMAGES_ACTIVES_EXPORT_FLASH -c pictures/content.svg -o options.xml -s styles.css -n essai.swf -embed

Explication :

IMAGES_ACTIVES_EXPORT_FLASH : nom du programme que vous appelez.

4 paramètres obligatoires :

• -c pictures/content.svg c pour CONTENU : répertoire et nom du fichier svg ;
• -o options.xml o pour OPTIONS : nom du fichier d’options ;
• -s styles.css s pour STYLES : nom de la feuille de style ;
• -n essai.swf n pour NOM : nom du fichier swf que vous allez obtenir.

  des options facultatives

• -embed : si vous l’ajoutez, sons et images seront embarqués. Sinon, le fichier swf devra être accompagné de ses répertoires sound et pictures (ou autre selon le nom que vous avez donné au répertoire des images : éventuellement elles ne sont pas contenus dans un répertoire particulier) ;
• -wrapper : cette option entraîne la création d’une page web index.html contenant un preloader pour envelopper le fichier flash ;
• -launch : si vous l’ajoutez, votre fichier swf sera lancé dans un flash player, ou, si l’option -wrapper est présente, la page index.html sera lancée dans le navigateur ;
• -preload : si l’option wrapper est présente, la page index.html contiendra un mécanisme de préchargement qui sera désactivé au démarrage du swf ;
• -v option « verbose » : le programme dit tout ce qu’il fait !
• -dw : désactiver les avertissements.

Précision sur le préchargement

Lorsque l’option de preload est présente, le fichier swf appelle, lors de son démarrage, la méthode stopPreload() du container web. Il revient donc au développeur web d’implémenter une méthode stopPreload() pour arrêter une éventuelle animation de préchargement qu’il aura insérée dans la page. Si le fichier swf n’est pas destiné à être mis en ligne, il est conseillé de ne pas activer ce mécanisme car, à moins que le fichier swf s’exécute dans la sandbox local-trusted, cela empêchera son démarrage.

Le fichier xia

L’image active est enregistrée au format xia (compression zip) afin de pouvoir être à nouveau éditée par la suite. Une fois décompressée, l’archive présente cette structure :

.