VLC - Comment créer son propre skin/template ?
vendredi 6 juin 2008, 19:37 - Autre
J'utilise comme lecteur principal VLC depuis pas mal de temps. Musique, vidéo, sous-titres, pas de codecs à installer... VLC est vraiment un logiciel pratique. Le seul inconvénient pour moi est l'apparence qui est vraiment basique. J'ai essayé de trouver mon bonheur dans les skins proposés sur le site officiel, mais il n'y a rien qui me plaise vraiment et il y a souvent des fonctionnalités manquantes. Comme je suis infographiste et que la création d'un skin me semblait intéressante, j'ai donc décider de me lancer. Voici les étapes que j'ai suivi pour arriver au résultat final, en espérant que d'autres personnes trouveront de l'aide ici - En effet, les ressources sont en anglais et même si la création du XML reste simple pour un informaticien, cela peut rebuter plus d'un designer.
1ère étape : Créer le player
Le graphisme
Mon but était de faire un skin qui sort un peu de l'ordinaire, basé sur des formes arrondies et agressive, et sur un rendu mi organique/mi futuriste influencé par certains skins winamp. Je souhaitais sortir des formes rectangulaires et faire quelque chose de plus dynamique.
Par soucis de compatibilité avec les anciennes versions de VLC, il est préférable d'utiliser le format .png pour enregistrer vos images qui permet en outre d'utiliser la transparence. La transparence est binaire : soit c'est transparent / soit c'est opaque, ce qui limite quelque peu l'intérêt. Par exemple dans mon graphisme qui comporte pas mal de formes arrondies et complexes, je me retrouve avec des bords crènelés ce qui est un peu dommage.
Les différents états
Il vous faut préparer 3 états différents pour les boutons : "up", "over" et "down"... Respectivement le bouton normal, le bouton au survol du pointeur et le bouton cliqué.
Il y a plusieurs méthodes pour parvenir au même résultat :
- soit 1 fichier image pour le fond et des fichiers pour les boutons "up", "over" et "down".
- soit 3 fichiers de fond comprenant les boutons ("up", "over" et "down").
Personnellement j'ai trouvé la méthode 2 plus simple à intégrer, car on peut avoir 1 seul fichier natif (Photoshop en l'occurrence) et en masquant/affichant des groupes de calques on peut exporter les différents états. Ce qui évite de jongler entre 3 images, et de répercuter les modifications à chaque fois.
UP
OVER
DOWN
SLIDER DU VOLUME
SLIDER DU TEMPS
Une fois les images préparées, il faut faire un "maillage" - grâce à la balise SubBitmap - et donner une "id" à chaque portion afin d'utiliser ces différentes parties d'images. Je vous conseille d'utiliser VLC media player Skin Editor qui est très pratique pour cela puisque tout est faisable graphiquement - voir plus loin.
Comment celà fonctionne ?
En fait les skins VLC sont composés de :
- 1 fichier .xml qui répertorie tout les fichiers utilisés et leur fonction.
- Des fichiers images : fonds, boutons, sliders...
- Un fichier police (facultatif).
- Un fichier de licence/read me.
L'intégration
Le .xml peut se découper en 2 grosses parties : la déclaration de tous les fichiers images ainsi que leur "maillage", puis leur utilisation dans le skin.
Les balises les plus courantes
- Bitmap : Permet de déclarer une image. Peut contenir des balises SubBitmap.
- SubBitmap : Sélectionne des parties d'une image pour les réutiliser. C'est ainsi que l'on déclare l'apparence des boutons.
- Window : Permet de créer une fenêtre. Le player, la playlist sont deux fenêtres différentes.
- Layout : Permet d'assigner une apparence à une fenêtre. Il peut exister plusieurs apparences pour une même fenêtre. Exemple : un layout pour la musique/un pour la vidéo.
- Image : Permet d'afficher une image de fond : L'apparence du player.
- Text : Permet d'insérer du texte. Grâce à des variables le contenu est interactif. Exemple : le temps écoulé depuis le début de la chanson.
- Button : Un bouton n'ayant qu'une fonction. Exemple : Le bouton stop.
- Checkbox : Un bouton avec 2 fonctions. Exemple : Le bouton lecture qui devient un bouton pause lorsque le lecteur fonctionne.
- Slider : Un slider est une série d'image qui peut avoir plusieurs utilisation : le volume, l'avancement de la chanson... Le fonctionnement est simple : seule une portion de l'image est visible et selon certains paramètres le slider montrera une partie différente de l'image, ce qui aura pour effet de donner l'illusion d'une animation. Notez qu'il n'est pas nécessaire de faire un "maillage" des sliders, mais que le logiciel découpera l'image en bandes égales selon le nombre de sections paramétrées.
Si vous codez du HTML vous pouvez vous risquer à écrire le fichier XML directement. Même si je préfère coder le plus possible à la main, la communauté VLC nous a concocté un outil bien pratique pour accélérer et faciliter la création de skin : VLC media player Skin Editor il serait dommage de s'en priver. Je vous conseille néanmoins de toujours garder un il sur le code pour aller plus vite sur certaines actions/comprendre les erreurs.
VLC media player Skin Editor
VLC media player Skin Editor est très pratique pour certaines actions, comme la découpe des boutons et le placement des éléments... En effet ont peu avoir un aperçu graphique en temps réel des paramètres. Malgré quelques absurdités (pas de copier/coller pour la création de boutons, une gestion des fenêtres merdique sous Windows style The Gimp...) l'outil reste très utile. On peut pas trop lui en vouloir puisque encore en développement. Le must étant la possibilité de tester dans VLC un skin en cours de réalisation... Magique !
Attention cependant j'ai déjà eu des "bugs" sur les fichiers XML générés : des espaces en doubles qui rende le fichier inutilisable par la suite dans le logiciel (Au passage les fenêtres d'erreurs ne sont pas très explicites). Donc si ça "bug" essayez de remplacer tous les espaces doubles du .xml par des espaces simple... ça m'avait réglé le problème...
He is ALIVE !
Donc normalement vous avez réussis à tout paramétrer ! Votre skin fonctionne sur VLC, il ne reste plus qu'a l'exporter en .vlt et à le placer dans le dossier "skins" de votre installation VLC. Vous y aurez alors accès via le clic droit sur l'application puis le menu "Skins".
Bon quand on en arrive là, ça fait déjà plaisir ^^ ! Il y a quelques soirées de boulot quand même, mais pouvoir balader sa création d'un coin à l'autre de l'écran c'est franchement le kiff, et en plus ça fait de la musique :D.
Le prochain article vous détaillera la création de la playlist. Mais il faut d'abord que je réfléchisse à son apparence ^^.
Les fichiers de mon skin
Vous pouvez télécharger le skin SombrErrancE pour VLC. Il sera disponible en plusieurs coloris une fois terminé. Seul le player fonctionne pour le moment, mais n'hésitez pas à me donner votre avis. Au niveau de la licence, ce skin est distribué sous licence CC-BY-NC-SA et contient les fichiers natifs en .psd. La police utilisée est Zrnic, du site larabiefonts.com et elle est présente dans l'archive.
Petite précision : pour fermer VLC, il suffit de double-cliquer sur le skin à un endroit où il n'y a pas de bouton.
Ressources plus complètes (en anglais)
- How to create your own skin : explications sur le XML, les balises et les fonctions avancées.
- La section du forum VLC pour présenter vos skins/chercher de l'aide