Creating Custom Video Skins for the Flash Video Extension for Dreamweaver MX 2004

Création d'un contrôleur personnalisé

La création d'enveloppes est un processus très simple mais qui peut néanmoins prendre du temps. Avant d'assembler tous les actifs, il est important de bien organiser et de placer les graphiques et symboles dans le panneau Bibliothèque. La création d'un contrôleur personnalisé s'effectue en deux étapes. La première étape implique l'ouverture de Flash MX 2004 et le transfert de plusieurs symboles de clips de la bibliothèque vers la scène, puis l'affectation de noms d'occurrences. La seconde étape est la rédaction d'une fonction ActionScript définissant la position des actifs dans l'enveloppe personnalisée.

Ouvrez le fichier farmSkin_large.fla, qui se trouve dans le dossier farmsite/skins. Le document Flash comprend deux calques : actions et default. Le calque actions est verrouillé et est celui dans lequel vous ajouterez le code ActionScript.
Choisissez Fenêtre > Bibliothèque pour ouvrir le panneau Bibliothèque. Ce document contient des graphiques que vous allez utiliser pour créer votre enveloppe personnalisée. Vous pouvez utiliser les graphiques fournis, les modifier ou les remplacer par vos propres graphiques. Pour changer l'apparence des symboles, double-cliquez dessus dans le panneau Bibliothèque et remplacez ou modifiez les symboles de votre choix.
Double-cliquez sur le dossier Frame du panneau Bibliothèque pour l'ouvrir. Le dossier contient huit symboles de clips (qui servent à l'arrière-plan).
Sélectionnez le calque default dans le scénario et déposez une occurrence des huit symboles sur la scène. Organisez les symboles sur la scène (voir Figure 5).

Affectez ensuite les noms suivants aux occurrences :
- Le symbole en haut à gauche doit être appelé nw_mc
- Le symbole en haut au centre doit être appelé n_mc
- Le symbole en haut à droite doit être appelé ne_mc
- Le symbole du côté gauche doit être appelé w_mc
- Le symbole du côté droit doit être appelé e_mc
- Le symbole en bas à gauche doit être appelé sw_mc
- Le symbole en bas au centre doit être appelé s_mc
- Le symbole en bas à droite doit être appelé se_mc
Votre scène devrait maintenant ressembler à celle illustrée en Figure 1.

Figure 1 : Affectation des noms d'occurrences.
Sélectionnez les huit occurrences à l'aide de l'outil Sélection et appuyez sur la touche F8 pour les imbriquer dans un clip. Saisissez le nom de symbole frame-set dans le champ Nom et assurez-vous que le comportement du symbole est bien Movie Clip. Cliquez sur OK pour convertir les occurrences en clip. Sélectionnez le nouveau clip, et saisissez le nom d'occurrence cover_mc dans l'inspecteur des propriétés.
Faites glisser une copie du symbole de clip d'animation de mise en tampon de la bibliothèque vers la scène. Sélectionnez l'occurrence et saisissez le nom buffering_mc dans l'inspecteur des propriétés.
Ouvrez le dossier Play Button > states dans le panneau Bibliothèque et faites glisser les quatre symboles de clip du sous-dossier states vers la scène. Sélectionnez le symbole play-disabled et saisissez le nom disabled_mc dans l'inspecteur des propriétés. Affectez les noms d'occurrences up_mc, down_mc et over_mc aux symboles play-up, play-down et play-over, respectivement.

En vous servant de la figure 6 comme guide, sélectionnez ces quatre symboles sur la scène principale et appuyez sur F8 pour les convertir en symbole de clip. Dans la fenêtre Convertir en symbole, saisissez le nom de symbole play-set et sélectionnez le comportement Movie Clip. Cliquez sur OK une fois ces opérations terminées. Sélectionnez la nouvelle occurrence sur la scène et saisissez le nom play_mc dans l'inspecteur des propriétés.
Répétez l'étape 7 pour les symboles des dossiers Pause Button et Stop Button. Utilisez les noms pause-set et stop-set. Les nouvelles occurrences ont les noms pause_mc et stop_mc.
Ouvrez le dossier Mute Button > off states dans le panneau Bibliothèque. Faites glisser les occurrences des symboles sound off-up, sound off-over et sound off-down vers la scène. Affectez les noms d'occurrences up_mc, over_mc et down_mc, à ces trois symboles respectivement (voir Figure 2).

Sélectionnez les trois occurrences sur la scène et appuyez sur F8 pour les imbriquer dans un clip. Dans la boîte de dialogue Convertir en symbole, donnez le nom soundOff-set au nouveau clip. Sélectionnez la nouvelle occurrence sur la scène et saisissez le nom off_mc dans l'inspecteur des propriétés.

Figure 2 : Regroupement des symboles sur la scène.
Ouvrez le dossier Mute Button > on states et répétez l'étape 9 pour les symboles du dossier on states.
Sélectionnez l'occurrence off_mc (créée à l'étape 9) et l'occurrence on_mc (créée à l'étape 10) sur la scène et convertissez-les en clip avec le nom de symbole mute-set. Sélectionnez la nouvelle occurrence sur la scène et saisissez le nom volumeMute_mc dans l'inspecteur des propriétés (voir Figure 3).
Ouvrez le dossier Seek Bar dans le panneau Bibliothèque, et faites glisser les occurrences de seekbar-left, seekbar-middle et seekbar-right vers la scène. Sélectionnez chaque occurrence pour leur donner les noms left_mc, middle_mc et right_mc. Ces occurrences seront regroupées avec d'autres éléments à l'étape 14.
Ouvrez le dossier Volume Slider > thumb states dans le panneau Bibliothèque et faites glisser une occurrence de chaque symbole de clip vers la scène, à côté des trois occurrences seekbar (voir Figure 3).

Figure 3 : D'autres symboles apparaissent sur la scène.

Affectez les noms d'occurrences suivants : up_mc au symbole slider-up, over_mc au symbole slider-over et down_mc au symbole slider-down. Sélectionnez les trois occurrences et imbriquez-les dans un nouveau, avec le nom de symbole handle-set. Sélectionnez la nouvelle occurrence de clip, et saisissez le nom d'occurrence handle_mc dans l'inspecteur des propriétés. La figure 3 présente un clip comprenant toutes les occurrences sur la scène.
Sélectionnez les occurrences seekbar de l'étape 12 et les occurrences slider de l'étape 13, et convertissez-les en un clip avec le nom de symbole seekbar-set. Sélectionnez le nouveau clip et donnez-lui le nom d'occurrence seekBar_mc (voir Figure 4).

Figure 4 : Placez les occurrences seekbar sur la scène.
Ouvrez le dossier Volume Slider et faites glisser une occurrence du symbole volume track sur la scène. Sélectionnez l'occurrence et saisissez le nom bar_mc dans l'inspecteur des propriétés. Faites glisser une occurrence du clip handle-set sur la scène et donnez-lui le nom d'occurrence handle_mc.

Sélectionnez bar_mc et handle_mc et appuyez sur F8 pour les imbriquer dans un nouveau symbole de clip. Entrez le nom de symbole volumeSlider-set et cliquez sur OK. Sélectionnez la nouvelle occurrence sur la scène et saisissez le nom volumeBar_mc dans l'inspecteur des propriétés.
Sélectionnez l'image 1 du calque actions et ouvrez le panneau Actions (Fenêtre > Panneaux de développement > Actions). Copiez et collez le code suivant dans le panneau Script :
```
function getSkinInfo(Void):Object {
    var res:Object = new Object();
    res.video = {x:10, y:10, w:-20, h:-47};
    res.mode = "disable";
    res.playBtn = {x:10, y:-30};
    res.pauseBtn = {x:50, y:-30};
    res.stopBtn = {x:90, y:-30};
    res.seekBar = {x:135, y:-33, w:-229};
    res.buffering = {x:136, y:-27, w:-231};
    res.volumeMute = {x:-88, y:-31};
    res.volumeBar = {x:-66, y:-33, l:51, type:"horizontal"};
    res.autoHide = false;
    res.bgColor = 0xFFFFFF;
    res.uiMode = "stretch";
    return res;
}
```
Conseil – En cas de problème lorsque vous copiez ce code, la suppression et le remplacement des guillemets dans le panneau Actions pourra permettre d'y remédier.

Les valeurs négatives spécifiées pour x, y, w, h ou l indiquent que la valeur devrait être la taille du fichier SWF, moins la valeur spécifiée.

Par exemple, la propriété video de l'objet res comprend un objet avec les propriétés suivantes : x:10, y:10, w:-20 et h:-47. Ces propriétés placent l'objet vidéo aux coordonnées x et y de 10 pixels. La largeur de l'objet vidéo est de 20 pixels inférieure à la taille du fichier d'enveloppe. La coordonnée x de la vidéo étant définie à 10, la vidéo est centrée dans l'enveloppe. La propriété finale est h (hauteur). La hauteur de l'objet vidéo est définie à -47 (la hauteur du fichier de l'enveloppe moins 47 pixels). La coordonnée y étant définie à 10 pixels, un espace de 37 pixels apparaît sous l'objet vidéo, où les autres boutons apparaissent.
Le fragment de code précédent contrôle la façon dont les actifs sont placés dans le contrôleur vidéo. Cette enveloppe sera utilisée pour la lecture de fichiers FLV avec des dimensions de 320 x 240 pixels dans le site web modèle. Les vidéos de taille plus réduite obligent à l'utilisation d'une enveloppe particulière, étant donné que les dimensions de 160 x 120 pixels entraîneraient le recouvrement de certains des actifs.
Enregistrez les modifications apportées au document et publiez le fichier (Fichier > Publier). Flash crée un fichier SWF que vous devrez copier dans le site Farm dans un des exercices suivants.

Remarque – Une version complète de ce fichier se trouve dans farmSkin_large.fla, dans le dossier finished des fichiers fournis.