Limsee2 est un logiciel permettant de faire des présentations en SMIL par l'intermédiaire d'une interface WYSIWYG. Ce tutotrial est une traduction libre (avec accord des intéressés) du tutorial original en anglais Bien qu'étant un logiciel wysiwyg, l'utilisation de limsee2 nécessite une connaissance préalable du smil. http://wam.inrialpes.fr/software/limsee2/

 

1. Introduction, téléchargement et installation

Le SMIL (Synchronized Multimedia Integration Language) est un langage basé sur l'XML qui se propose de synchroniser sur une ligne temporelle du texte, de l'image, du son et de la vidéo).

Limsee2 est un logiciel d'édition smil possédant une interface graphique qui va permettre de manipuler facilement des éléments multimédias sur une échelle de temps.

Limsee2 est une application Java (ce qui lui assure une certaine portabilité) open-source compatible windows, mac os x et linux.

Télécharger Limsee2

Il est conseillé d'installer la version installanywhere afin de pouvoir visionner tous les types de media (notamment la vidéo). Noter que lors du lancement une seconde fenêtre s'ouvre, elle servira à vous indiquer le problème en cas de crash.

Limsee2 peut éditer des présentations au format smil 1.0 et 2.0.

2. L'interface (GUI)

L'interface se compose de quatre éléments principaux reprenant la structure des fichiers smil

s

Structure view
reflète la structure XML du document smil

Attributes view
indique les attributs de l'élément xml sélectionné

Layout view
Le canevas interactif où la taille des différentes régions peut être manipulée, les media prévisualisés etc.

Timing view
Représentation graphique de la ligne de temps où sont placés les medias

Chacun de ces quatre éléments peut être déplacés dans la fenêtre de travail.

A l'ouverture d'un fichier, limsee2 indique si le document est conforme à la norme xml ou non. Il est alors proposé à l'utilisateur de corriger le code avant d'aller plus loin.



Ainsi limsee2 peut servir de correcteur de document xml et smil.

Toujours à l'ouverture du document, limsee2 tente de déterminer la version de smil (1.0 ou 2.0) utilisée. Il se base sur une analyse des Namespace et DocType. S'il n'y parvient pas, une boîte de dialogue permet à l'utilisateur de confirmer la version.

Enfin une combinaison de ces deux éléments est proposée, c'est-à-dire que limsee2 va indiquer les erreurs du code sur la base du choix (smil 1.0 ou 2.0)

La barre de travail contient un certain nombre de raccourcis vers les fonctions contenues dans la barre de menu. Il est possible de la faire disparaître pour gagner de l'espace vertical en cliquant sur le bouton fix (en haut à droite)



A l'ouverture le nom des documents apparaît sous la barre de travail. Un clic sur le "rond" à gauche du nom du document le fermera. De plus un menu contextuel (bouton de droite) est accessible.



dfs

 

Quatre vues différentes sont possibles


[All views] [Structure view] [Attributes view] [Layout view] [Timing view] [Text preview]

Notons que la vue Text preview donne accès à une interface xml non-editable avec coloration syntaxique et indentation.



Enfin, les versions précédentes de limsee intégraient le player x-smiles.org qui permettait de jouer les présentations avant même de les avoir sauvegardées.

Pour des raisons de compatibilité, ceci n'est plus. Un clic sur le bouton play (smiley jaune) va appeler un player externe (real one par défaut). Si Real one n'est pas installé sur la machine une boîte de dialogue demande à l'utilisateur de choisir un player. Le lancement du player peut être assez long, soyez patient.



3. Travailler avec LimSee2 : un exemple

Ceci étant dit, on y va ;o)

- commencez par créer un dossier quelque part sur votre disque dur. Il sera la racine de votre projet et vous permettra de voir les différents fichiers créés par limsee

- grâce à la barre de menu ou de travail, faites "créer un nouveau document."

- lors du premier lancement, limsee va vous demander de choisir un dossier dans lequel il va placer le cache des médias (par défaut tempory internet files). Un dossier LimSee2_MediaCache y sera créé et par la suite cette question ne vous sera plus posée.

- limsee va ensuite vous demander si vous souhaitez sauvegarder votre document. Répondez "yes" et choisissez le dossier que vous avez précédemment créé. Donner un nom à votre fichier .smil (sans accents ni espaces).

- vous devriez obtenir quelque ressemblant à ceci. La partie sélectionnée se trouve entre les pointillés rouges. Il n'y a pour l'instant aucune region de définie et la time-line est vide.



 

1 créez une region dans le root-layout : appuyez et maintenez la touche [alt] et dessinez un rectangle



Si vous avez relâché la touche [alt] il vous suffit de la maintenir de nouveau enfoncée pour pouvoir modifier la taille ou déplacer le rectangle.

2 ce rectangle n'est pas encore une region. Ce n'est qu'une forme à l'écran que vous pouvez convertir en différents types d'objet. Pour cela faites un clic droit sur la sélection (pointillés rouges) et choisissez "make a region".



3 ce n'est pas obligatoire mais il est recommandé de donner une ID à la region créée (afin qu'elle soit adressée)



évidement, vous pouvez choisir un nom plus explicite que region_1

4 votre écran devrait alors ressembler à cela.



Une asterics (*) à gauche du nom de la présentation dans la barre de tabulation indique que le fichier a été modifié. La nouvelle region est sélectionnée et en bas à gauche se trouve ses attributs. Les attributs indiqués en vert sont vides tandis que ceux en bleu sont définis.

Vous pouvez passer d'une vue à une autre.

Layout view: permet de redéfinir les dimensions et de déplacer la region. Vous verrez les attributs changer en temps réel.

En gardant la touche [shift] enfoncée vous aurez accès à plus d'information sur les coordonnées.

 

Attributes view: permet de changer la couleur de fond "backgroundColor" de la region (blanc par défaut). Un double clic sur le mot "white" vous donne accès à un menu déroulant pour éditer la couleur



 

Structure view: un clic droit sur le noeud "layout" de l'arbre donne accès à un menu tel qu'indiqué.



Certains éléments du menu sont grisés, ce qui indique que certains éléments ne peuvent être entrés.

5 en maintenant la touche [ctrl] cliquez dans le layout plusieurs fois. Ceci a pour effet de sélectionner alternativement la nouvelle region et le layout.

Sélectionnez la nouvelle region et faites clic droit/"add media"



Copier/coller le lien suivant

[http://www.mx5passion.com/mdm/mdm200310G.jpg] dans la boîte de dialogue:



Confirmer avec le bouton "Yes"



Ceci va lancer la copie à distance (http) de l'image dans le dossier media de votre présentation. (regarder dans le dossier que vous avez créé au départ)

Entrer un nom (ID) pour cette image (ex: img_1). Notez qu'à présent la boîte de dialogue indique la region précédemment créée (region_1)



La dernière boîte de dialogue vous indique que l'élément (l'image) est maintenant disponible pour être inséré où vous le désirez dans la structure temporelle.



10 Utilisez la Structure view pour sélectionner le noeud "body", faite un clic droit sur ce noeud et jetez un oeil "view clipboard"





Un élément xml correspond au media créé, le code "src" spécifie l'adresse du fichier dans le dossier media comme prévu. Il ne nous reste qu'a coller cet élément dans la structure temporelle en tant que "child" of the body ("as child")



11 Votre présentation devrait alors ressembler à cela.



L'élément media est à présent visible dans la barre de temps et dans le Layout view.

Vous pouvez jouer avec les différentes vues :

Layout view: redimensionner et bouger la region qui contient l'image. Un clic pour sélectionner la region, un double clic pour sélectionner le media qu'elle contient.

Attributes view: changer l'attribut "fit" et manipuler la region

Timing view: utilisez la barre verticale pour changer le facteur de zoom. Grab and move the elements in the graphical timeline, this will change the timing values accordingly.

L'appui sur le bouton play permet de jouer la présentation en boucle.



12 Nous allons ajouter une nouvelle region, cette fois-ci à l'intérieur de la première region. Nous sélectionnons ce nouveau rectangle et nous en faisons une région.



Noter que nous aurions pu faire une anchor de notre sélection. Cela est possible car une anchor est possible seulement sur un élément de media et maintenant nous en avons un.

 

13 Donnons l'ID region_2 à cette nouvelle region et convertissons ses coordonnées en pourcentages. Ainsi si nous redimensionnons la region parente (celle qui contient l'image de la voiture dans notre exemple) elle sera automatiquement redimensionnée avec. Utilisons le choix "relativize" dans le menu



 

La conversion en pourcentage étant effective, redimensionnez la region parent (region_1) pour observer le comportement



 

14 nous allons maintenant ajouter un peu de texte dans cette dernière region





Laissez "RealText" et cliquez sur Ok, nommez en "texte_1". Une fenêtre d'édition de texte/html apparaît, changez le texte par le votre. Le résultat s'affiche à droite en temps réel.



Une fois que le texte vous convient cliquez sur Yes. Il faut encore coller (manuellement) ce nouveau media dans la structure temporelle. Collez-le devant l'image de la voiture.



Nous avons maintenant du texte encapsulé dans l'image!



 

15. Maintenant c'est à vous de jouer.

Essayez d'ajouter une image qui se trouve sur votre disque dur et observez comment limsee2 importe l'url relative de l'image (comme pour l'url http de l'image de notre exemple)

Essayez de changer la disposition de limsee2 : changez l'ID d'une region à partir de ses attributs et observez comment automatiquement les attributs de toutes les regions dépendantes sont modifiés.

Essayez la fonction make a link (de faire un lien) in the "media preview" et observez comment limsee2 prend soin d'insérer l'élément "a"pour vous.

Essayez d'importer une présentation power point

   4.  Conclusion

Le smil est un langage novateur et audacieux et le logiciel limsee2 en supporte les conséquences.

le smil veut

 

 

Vos avis et remarques sur cette rubrique

 

---

1. Les logiciels
2. Le tutorial basé sur quatre exemples (applications) commentés
   1. le texte
   2. l'image
   3. le son
   4. la video
3. LimSee2 le smil en wysiwyg
4. L'interview Daniel Weck (projet LimSee2)
5. L'ancien tutorial
6. Tous les tutoriaux français et anglais