Création de skin - a completer
Un article de XMIX.
| Version du 7 mars 2008 à 22:55 Loic (Discuter | contribs) ← Différence précédente |
Version actuelle Loic (Discuter | contribs) (→TEST) |
||
| Ligne 9: | Ligne 9: | ||
| *Ajuster la positions des composants | *Ajuster la positions des composants | ||
| *Finitions esthétiques | *Finitions esthétiques | ||
| - | |||
| ''Remarque: il peut être pratique de partir d'un skin existant qui ressemble à notre futur skin'' | ''Remarque: il peut être pratique de partir d'un skin existant qui ressemble à notre futur skin'' | ||
| Ligne 38: | Ligne 37: | ||
| | Cela donne || [[Image:11_skin_editor_skinmodif01-posecran.PNG|center]] | | Cela donne || [[Image:11_skin_editor_skinmodif01-posecran.PNG|center]] | ||
| |} | |} | ||
| + | |||
| + | |||
| + | == TEST == | ||
| + | |||
| + | === Etape 1, décharger le skin actif === | ||
| + | Nous allons créer un skin à part entière. Par défaut XMIX charge le skin standard. Nous allons modifier la configuration pour ne charger aucun skin. Pour cela, aller dans les options (Control+C), panneau "Apparence" et choisissez : | ||
| + | *disposition "< Aucun >" | ||
| + | *skin par défaut "< Aucun >" | ||
| + | |||
| + | [[Image:01_Config_NoSkin.png|200px]] | ||
| + | |||
| + | Puis cliquer sur Ok et relancer le player (il est nécessaire de redémarrer le player pour décharger le skin courant). | ||
| + | |||
| + | |||
| + | ===Etape 2, lancer l'éditeur=== | ||
| + | |||
| + | Nous voila mainteant avec un player sans skin. Plutot sobre non ? | ||
| + | |||
| + | [[Image:02_Player_NoSkin01.png|200px|légende]] | ||
| + | |||
| + | Lançons maintenant l'éditeur de skin (Control+E) | ||
| + | |||
| + | <br> | ||
| + | |||
| + | ===Etape 3, découverte de l'éditeur de skin=== | ||
| + | |||
| + | L'éditeur est composé : | ||
| + | * d'une série d'onglets (en haut) qui représentent chacun une fenêtre. | ||
| + | * d'une liste (à gauche) qui présente les composants visuels de la fenetre selectionnée. | ||
| + | |||
| + | La première colonne ce la liste indique le nom du composant et la deuxième son type. La croix rouge à coté du composant indique qu'il n'y a pas de définition graphique pour ce composant. La définition graphique d'un composant s'apelle une ''SkinBox'' et correspond aux paramètres de tracé d'un composant. Un skin est donc en fait un ensemble de SkinBox. | ||
| + | |||
| + | [[Image:03_SkinEditor_NoSkin02.png|thumb|200px||Légende]] | ||
| + | |||
| + | Revenons à notre liste. La premiere ligne de celle-ci correspond à la SkinBox de la fenêtre elle-même (le composant porte d'ailleur le même nom que la fenêtre, "Player"). C'est ce composant que nous allons éditer, pour cela double-cliquer dessus. Une nouvelle fenêtre s'ouvre : l'éditeur de SkinBox. | ||
Version actuelle
Le Player est composé de plusieurs fenêtres. Chaque fenêtre posséde différents composants visuels (boutons, sslide-bar, ...) dont la représentation graphique peut être redéfinie.
Il s'agit avant tout d'imaginer l'interface que vous souhaitez réaliser, au moins dans ses grandes lignes (forme, zones transparentes, bordure).
Une fois que nous savons dans les grandes lignes ce que nous voulons faire, il va s'agir de:
- Créer le fond de chaque fenêtre.
- Deux possibilités, soit utiliser une couleur unie ou un dégradé, soit utiliser une image. Créer une image pour le fond et les boutons (grâce à une recherche sur le web, une capture écran des logiciels qui ont un bon look ou bien grâce à des logiciels
- Associer des images aux composants (boutons, slidebar et autres) des fenetres
- Ajuster la positions des composants
- Finitions esthétiques
Remarque: il peut être pratique de partir d'un skin existant qui ressemble à notre futur skin
| Actions | Aperçu |
|---|---|
| Nous allons partir du skin "SmallShip" |  |
| Lancer l'éditeur (Control+E) |  |
| Choisir une fenêtre redimenssionable |  |
| Définir un gradient |  |
| Ajouter un cadre |  |
| Cela donne |  |
| Changeons la taille de la fenetre |  |
| Ajoutons l'écran |  |
| Positionnons l'écran |  |
| Cela donne |  |
Sommaire |
TEST
Etape 1, décharger le skin actif
Nous allons créer un skin à part entière. Par défaut XMIX charge le skin standard. Nous allons modifier la configuration pour ne charger aucun skin. Pour cela, aller dans les options (Control+C), panneau "Apparence" et choisissez :
- disposition "< Aucun >"
- skin par défaut "< Aucun >"
Puis cliquer sur Ok et relancer le player (il est nécessaire de redémarrer le player pour décharger le skin courant).
Etape 2, lancer l'éditeur
Nous voila mainteant avec un player sans skin. Plutot sobre non ?
Lançons maintenant l'éditeur de skin (Control+E)
Etape 3, découverte de l'éditeur de skin
L'éditeur est composé :
- d'une série d'onglets (en haut) qui représentent chacun une fenêtre.
- d'une liste (à gauche) qui présente les composants visuels de la fenetre selectionnée.
La première colonne ce la liste indique le nom du composant et la deuxième son type. La croix rouge à coté du composant indique qu'il n'y a pas de définition graphique pour ce composant. La définition graphique d'un composant s'apelle une SkinBox et correspond aux paramètres de tracé d'un composant. Un skin est donc en fait un ensemble de SkinBox.
Revenons à notre liste. La premiere ligne de celle-ci correspond à la SkinBox de la fenêtre elle-même (le composant porte d'ailleur le même nom que la fenêtre, "Player"). C'est ce composant que nous allons éditer, pour cela double-cliquer dessus. Une nouvelle fenêtre s'ouvre : l'éditeur de SkinBox.
