Pour créer un media-skin, vous devez disposer ou créer les éléments suivants :

• une séquence à habiller, ici la bande annonce
• un habillage, image qui habillera la séquence, nous la créerons avec Photoshop
• le masque de l'habillage, masque noir et blanc de l'image d'habillage
• le masque de glissement, comme le masque précédent mais sans la zone ou apparaitra la vidéo et sans les zones interactives
• un fichier XML pour rassembler ces éléments, édité simplement avec SimpleText

Vous le créerez sur la séquence finale, dejà compressé au format de diffusion car il est impossible d'exporter un mediaskin dans un autre format sans effacer l'habillage.

Tout d'abord il convient de déterminer les dimensions originales de notre séquence vidéo.

• Ouvrir la séquence avec QuickTime
• POMME+I pour obtenir les informations

Ici notre séquence fait 320x136 pixels.

Avec un logiciel de création d'image ou de retouche (ici Photoshop),

• Déterminer les dimensions de votre habillage et créer une image vide de cette taille.
• Créer dans cette image sur un calque à part, une zone qui recevra ultérieurement votre séquence vidéo, au dimension relevé (320x136)
• Appliquer à cette zone une couleur bien net qui ne se trouvera pas dans votre habillage, ici un beau orange bien pétant. Relever les couleurs exactes de cette couleur, en modèle TSL de préférence (ou RVB),
  ici : TSL = 24%,100%,100%

Réaliser votre habillage à l'aide de calques en utlisant les possibilités de votre logiciel de retouche.

Dans notre cas pour corser un peu les choses nous disposons certaines parties de notre habillage par dessus la zone vidéo (le bras de Jango Fett et l'épaule d'Amidala).

De plus on notera que notre habillage est ici rectangulaire mais que quelques éléments dépassent, comme le pistolet de Jango à droite et l'épaule d'Amidala à gauche, cela rendra encore mieux au final...

Pour cette étape, pas de règles. Laissez courir votre créativité.

Sauvegarder cette image dans un format lisible par QuickTime (PICT, TIFF, PhotoShop...) : "montage.psd" par exemple.

Créer un masque noir et blanc de cet habillage, en omettant la zone de la vidéo ainsi que des éventuelles réserves pour des boutons interactifs.

Ici pas de boutons interactifs pour diriger le film, car pour gérer ceux-ci ensuite il faut créer des sprites et utiliser les logiciels commerciaux plutôt couteux.

Ce masque servira à QuickTime Player pour connaitre les zones ou l'utilisateur pourra cliquer pour déplacer la fenêtre de la séquence.

Attention le masque doit être réellement noir et blanc, pas de niveau de gris.

Enregistrez cette image comme "dragmask.pct" par exemple.

A partir de ce masque, remplissez les zones vidéos et interactives, pour obtenir le masque de l'habillage.

Encore une fois ce masque doit être exclusivement noir et blanc.

Tout point noir de ce masque sera affiché, les autres ne feront pas partie de la fenêtre de la séquence.

Enregistrez cette image comme "winmask.pct" par exemple.

on distingue ici plus clairement les élements graphiques qui dépasseront de notre fenêtre.

Nous disposons désormais de presque tout les éléments pour créer notre habillage.

L'intégration de ces éléments multimédias se passe en 2 parties :

• intégration de la séquence vidéo dans l'habillage
• création du media-skin à partir des masques.

Commençons par intégrer notre vidéo dans l'habillage.

Avec QuickTime Player Pro :

• Ouvrez la séquence vidéo originale
• Ouvrez l'image de l'habillage (montage.psd)
• Copiez l'habillage (POMME+C)
• Placez vous bien au début de la séquence vidéo et ajouter l'habillage à l'echelle (ALT+SHIFT+POMME+C)

L'habillage cache alors votre vidéo, rien de bien grave...

Ici, nous avons plusieurs techniques pour finir l'intégration :

Nous pouvons changer les plans et refaire passer notre vidéo au premier plan (comme dans l'exercice Recadrage LetterBox), mais alors notre vidéo cachera le bras de Jango à droite... Il faudra donc en plus créer une masque du bras et l'appliquer sur la vidéo. Cela sera un peu fastidieux.

Ici, nous allons plutot changer le mode d'affichage de l'image fixe d'habillage en rendant transparent la zone orange crée précédemment (c'est pas beau la vie)... Pour cela :

• Ouvrez les propriétés de la séquence (POMME+J)
• Sélectionnez la piste vidéo 2 (la dernière ajoutée, donc notre habillage)
• Sélectionnez dans le deuxième menu : "Mode graphique"
• Sélectionnez le mode "Transparence", cliquez sur le bouton "Couleur" pour choisir la couleur qui deviendra transparente. Dans notre cas nous choisissons le modèle de couleur TSL et saississons TSL=24%,100%,100% comme nous l'avions noté précédemment.

Mais il ne se passe pas grand chose me direz vous.
Et bien c'est que notre séquence vidéo se trouve sous l'habillage mais pas "en face" du trou que nous venons de faire. Il faut maintenant positionner la séquence vidéo bien en face ce trou, c'est-à-dire :

Dans la fenêtre propriété toujours,

• Sélectionnez la piste vidéo 1 (notre vidéo)
• Sélection dans le menu "Dimensions"
• Cliquez sur le bouton "Ajustez"
• Déplacez la zone de la vidéo pour l'ajustez avec le "trou" de l'habillage.
  Pour cela vous pouvez affiner le déplacement avec les flèches du clavier
• Une fois terminé, cliquez sur "OK" pour valider la position.

Plus de détails sur l'option "Dimensions" dans l'exercice "recadrage LetterBox", paragraphe "positionner la vidéo".

Et voilà la film est bien positionné et est maqué par le bras de Jango et l'épaule de Amidal. Jouez le film pour admirer le résultat.

Enregistrez la séquence ainsi monté sous un nouveau nom et en autonome, par exemple "framed.mov".

Il se peux qu'apparaisse des artefacts "orange" sur les bords de l'image qui passe "dessus" la vidéo, il s'agit de points parasites qui ne sont pas orange "pur". Il vous faut alors reprendre l'image originale d'habillage et la retoucher dans cette zone afin que tout éléments graphiques qui débordent sur la zone orange est une coupure franche et net qui ne se mélange pas avec le orange de fond.

Pour finaliser notre media-skin, récapitulons les élements dont nous disposons :

le film original dont nous n'avons plus besoin maintenant	le film habillé et autonome qui va nous servir de base	un fichier bitmap (noir et blanc) de masque pour l'habillage	un fichier bitmap (noir et blanc) de masque pour la zone glissable

Pour assembler ces éléments, nous devons créer un petit fichier texte au format XML. Ce fichier XML va décrire les élements ci-dessus qui compose le media-skin.

Avec SimpleText saisissez ceci :

<?xml version="1.0"?>
<?quicktime type="application/x-qtskin"?>
<skin>
<movie src="framed.mov"/>
<contentregion src="winmask.pct"/>
<dragregion src="dragmask.pct"/>
</skin>

Le langage XML ressemble au HTML. Respectez bien la syntaxe et remplacer le noms de fichier par les votres si vous n'avez pas utilisez les mêmes.

Sauvegardez ce fichier, avec le nom "skin-xml.txt" par exemple.

Attention, tout ces fichiers doivent ce trouvez dans le même dossier, cad :

• framed.mov
• winmask.pct
• dragmask.pct
• skin-xml.txt

Depuis le Finder, renommez le fichier "skin-xml.txt" en "skin-xml.mov", son icône devient alors celui de QuickTime. Si vous devez l'éditez de nouveau pour changer quelque chose, renommez le ".txt" avant.

Double cliquez sur ce fichier et admirez le résultat dans QuickTime Player.

Voici ce que QuickTime vous montrera désormais au lieu de son interface classique.
On notera que certains éléments dépassent de la fenêtre tout en faisant partie, l'utilisateur peut déplacer cette fenêtre n'importe ou sur l'écran.
Evidemment il n'y a plus de bouton pour démarrer le film, l'utilisateur doit donc utiliser le menu "séquence" pour le racourci "barre espace"...

Pour terminer votre chef d'œuvre, enregistrez le en séquence QuickTime autonome, ainsi tout les fichiers intermédiaires ne seront plus nécessaires et vous pourrez le jouer n'importe ou.

Si vous étudiez les propriétés de cette séquence, vous noterez la présence d'une piste "skin".

Pour ajouter de l'interactivité à votre film (bouton de lecture/stop), il convient d'utiliser des logiciels comme Flash, GoLive ou LiveStagePro. Le site StreamingMedia propose un tutoriel avec Flash pour ajouter un bouton de lecture (nécessite de s'inscrire pour lire les tutoriels).

Les images qui servent d'illustration à cette page sont la propriété de

• "Star Wars Episode II: Attack of the clones", film de Georges Lucas - © 2002 - Lucasfilm, Ltd.