Création d’une enveloppe

La meilleure façon de créer un fichier SWF d’enveloppe est de copier l’un des fichiers d’enveloppe fournis avec Flash, puis de l’utiliser comme point de départ. Vous pouvez trouver les fichiers FLA correspondant à ces enveloppes dans le dossier de l’application Flash, dans Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. Pour transformer votre fichier SWF d’enveloppe terminé en option dans la boîte de dialogue Sélectionner une enveloppe, placez-le dans le dossier Configuration/FLVPlayback Skins/ActionScript 3.0 du dossier de l’application Flash ou dans le dossier Configuration/FLVPlayback Skins/ActionScript 3.0 local d’un utilisateur.

Comme vous pouvez définir la couleur d’une enveloppe indépendamment de la sélection de l’enveloppe, il n’est pas nécessaire de modifier le fichier FLA pour modifier la couleur. Si vous créez une enveloppe de couleur spécifique qui ne doit pas être modifiable dans la boîte de dialogue Sélectionner une enveloppe, définissez this.border_mc.colorMe = false; dans le code ActionScript du fichier FLA d’enveloppe. Pour plus d’informations sur la définition de la couleur d’une enveloppe, voir la section Sélection d’une enveloppe prédéfinie.

Lorsque vous consultez les fichiers FLA d’enveloppe Flash installés, vous pouvez penser que certains éléments de la scène sont superflus, mais nombre de ces éléments sont insérés dans les calques de guide. Avec l’aperçu en direct et une échelle de 9, vous pouvez voir rapidement ce qui figurera bel et bien dans le fichier SWF.

Les sections ci-après présentent des personnalisations et des modifications plus complexes des clips SeekBar, BufferingBar et VolumeBar.

Utilisation de la disposition de l’enveloppe

Lorsque vous ouvrez un fichier FLA d’enveloppe Flash, vous constaterez que les clips de l’enveloppe sont disposés sur le scénario principal. Ces clips et le code ActionScript qui figurent sur la même image définissent la disposition des commandes à l’exécution.

Même si le calque de disposition ressemble beaucoup à l’apparence de l’enveloppe à l’exécution, son contenu n’est pas visible à l’exécution. Il est utilisé uniquement pour calculer l’emplacement des commandes. Les autres commandes sur la scène sont utilisées à l’exécution.

Le calque de disposition contient un espace réservé pour le composant FLVPlayback nommé video_mc. Toutes les autres commandes sont disposées par rapport à video_mc. Si vous commencez par l’un des fichiers FLA Flash et modifiez la taille des commandes, vous pouvez probablement corriger la disposition en déplaçant ces clips d’espace réservé.

Chacun de ces clips de balise d’emplacement a un nom d’occurrence particulier. Les noms des clips d’espace réservé sont playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc et volumeBarHandle_mc. La partie recolorée lorsque vous choisissez une couleur d’enveloppe s’appelle border_mc.

Le type de clip utilisé pour une commande n’est pas important. En règle générale, le clip d’état normal est utilisé pour les boutons. S’il s’agit des autres commandes, le clip correspondant à la commande en question est utilisé, mais c’est uniquement pour une raison de commodité. L’emplacement des coordonnées x (axe horizontal) et y (axe vertical) ainsi que la hauteur et la largeur de la balise d’emplacement sont les seuls éléments qui importent.

Outre les commandes standard, vous pouvez posséder autant de clips supplémentaires que vous le souhaitez. Toutefois, l’option Exporter pour ActionScript correspondant aux symboles de bibliothèque de ces clips doit être cochée dans la boîte de dialogue Liaison. Les clips personnalisés du calque de disposition peuvent avoir un nom d’occurrence quelconque, autre que les noms d’occurrence réservés répertoriés ci-dessus. Un nom d’occurrence n’est nécessaire que pour appliquer du code ActionScript aux clips afin de déterminer la disposition.

Le clip border_mc est spécial. Si vous définissez la propriété FlvPlayback.skinAutoHide sur true, l’enveloppe s’affiche lorsque la souris est au-dessus du clip border_mc. Cela est important pour les enveloppes qui s’affichent hors des limites du lecteur vidéo. Pour plus d’informations sur la propriété skinAutoHide, voir la section Modification du comportement d’une enveloppe.

Dans les fichiers FLA Flash, le clip border_mc est utilisé pour le chrome et pour la bordure entourant les boutons Avance et Retour.

Le clip border_mc est également la partie de l’enveloppe dont la valeur alpha et la couleur sont modifiées par les propriétés skinBackgroundAlpha et skinBackgroundColor. Pour pouvoir personnaliser les valeurs de couleur et alpha, le code ActionScript du fichier FLA d’enveloppe doit inclure :

border_mc.colorMe = true;

ActionScript et disposition de l’enveloppe

En règle générale, le code ActionScript suivant s’applique à toutes les commandes. Certaines commandes contiennent du code ActionScript spécifique qui définit un comportement supplémentaire, et qui est expliqué dans la section correspondant à la commande en question.

Le code ActionScript initial est une section de grande taille qui définit les noms de classes pour chaque état de chaque composant. Vous trouverez tous ces noms de classes dans le fichier SkinOverAll.fla. Par exemple, le code pour les boutons Pause et Lecture se présente comme suit :

this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled"; 
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown"; 
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal"; 
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver"; 
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled"; 
this.playButtonDownState = "fl.video.skin.PlayButtonDown"; 
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal"; 
this.playButtonOverState = "fl.video.skin.PlayButtonOver";

Les noms de classe n’ont pas de fichiers de classe externes ; ils sont simplement spécifiés dans la boîte de dialogue Liaison pour tous les clips de la bibliothèque.

Dans le composant ActionScript 2.0, certains clips présents sur la scène étaient utilisés lors de l’exécution. Dans le composant ActionScript 3.0, ces clips se trouvent toujours dans le fichier FLA, mais uniquement pour faciliter les modifications. Ils se trouvent désormais tous dans les calques de guide et ne sont pas exportés. Tous les éléments d’enveloppe de la bibliothèque sont définis pour être exportés dans la première image et sont créés de manière dynamique avec ce code, par exemple :

new fl.video.skin.PauseButtonDisabled();

La section suivante porte sur le code ActionScript qui définit les largeur et hauteur minimales de l’enveloppe. La boîte de dialogue Sélectionner une enveloppe affiche ces valeurs qui sont utilisées à l’exécution pour empêcher de redimensionner l’enveloppe en deçà de sa taille minimale. Si vous ne souhaitez pas spécifier de taille minimale, laissez-les non définies ou affectez-leur une valeur inférieure ou égale à zéro.

// minimum width and height of video recommended to use this skin, 
// leave as undefined or <= 0 if there is no minimum 
this.minWidth = 270; 
this.minHeight = 60;

Les propriétés suivantes peuvent être appliquées à chaque balise d’espace réservé :

Propriété

Description

anchorLeft

Booléen. Positionne la commande par rapport au côté gauche de l’occurrence de FLVPlayback. Elle est définie par défaut sur true sauf si anchorRight est explicitement définie sur true, auquel cas elle est définie par défaut sur false.

anchorRight

Booléen. Positionne la commande par rapport au côté droit de l’occurrence de FLVPlayback. La valeur par défaut est false.

anchorBottom

Booléen. Positionne la commande par rapport au bas de l’occurrence de FLVPlayback. Elle est définie par défaut sur true sauf si anchorTop est explicitement définie sur true, puis elle est définie par défaut sur false.

anchorTop

Booléen. Positionne la commande par rapport au haut de l’occurrence de FLVPlayback. La valeur par défaut est false.

Si les deux propriétés anchorLeft et anchorRight sont définies sur true, la commande est redimensionnée à l’horizontale lors de l’exécution. Si les deux propriétés anchorTop et anchorBottom sont définies sur true, la commande est redimensionnée à la verticale lors de l’exécution.

Pour connaître les effets de ces propriétés, observez leur utilisation dans les enveloppes Flash. Les commandes BufferingBar et SeekBar sont les seules à pouvoir être redimensionnées, et elles sont disposées l’une au-dessus de l’autre. Les propriétés anchorLeft et anchorRight de ces deux commandes sont définies sur true. La propriété anchorLeft de toutes les commandes situées à gauche de BufferingBar et de SeekBar est définie sur true, et la propriété anchorRight de toutes les commandes situées à leur droite est définie sur true. La propriété anchorBottom de toutes les commandes est définie sur true.

Vous pouvez modifier les clips du calque de disposition pour créer une enveloppe dans laquelle les commandes sont situées en haut plutôt qu’en bas. Pour ce faire, vous devez simplement déplacer les commandes jusqu’en haut par rapport à video_mc, puis définir la propriété anchorTop de toutes les commandes sur true.

Barre de mise en mémoire tampon

La barre de mise en mémoire tampon comporte deux clips : bufferingBar_mc et bufferingBarFill_mc. La position de chaque clip sur la scène par rapport à l’autre est importante, car ce positionnement relatif est conservé. La barre de mise en mémoire tampon utilise deux clips distincts, car ce composant redimensionne bufferingBar_mc, mais pas bufferingBarFill_mc.

L’échelle à 9 découpes est appliquée au clip bufferingBar_mc. De cette façon, les bordures ne sont pas déformées lors du redimensionnement. Le clip bufferingBarFill_mc est extrêmement large ; il le sera toujours suffisamment et vous n’aurez pas besoin de le redimensionner. A l’exécution, il est automatiquement masqué pour n’afficher que la partie située au-dessus du clip bufferingBar_mc étiré. Par défaut, les dimensions exactes du masque conservent une marge égale à gauche et à droite dans le clip bufferingBar_mc, basée sur la différence existant entre les positions x (axe horizontal) des clips bufferingBar_mc et bufferingBarFill_mc. Vous pouvez personnaliser le positionnement avec du code ActionScript.

Si votre barre de mise en mémoire tampon n’a pas besoin d’être redimensionnée ou n’utilise pas l’échelle à 9 découpes, vous pouvez la configurer comme le composant BufferingBar de l’interface utilisateur personnalisée Lecture de fichiers FLV. Pour plus d’informations, voir la section Composant BufferingBar.

La barre de mise en mémoire tampon dispose de la propriété supplémentaire suivante :

Propriété

Description

fill_mc:MovieClip

Indique le nom d’occurrence du remplissage de la barre de mise en mémoire tampon. Sa valeur par défaut est bufferingBarFill_mc.

Barre de recherche et barre de volume

La barre de recherche comporte elle aussi deux clips : seekBar_mc et seekBarProgess_mc. La position de chaque clip sur le calque de disposition par rapport à l’autre est importante, car ce positionnement relatif est conservé. Même si les deux clips sont redimensionnés, le clip seekBarProgress_mc ne peut pas être imbriqué dans le clip seekBar_mc car seekBar_mc utilise l’échelle à 9 découpes, qui ne fonctionne pas bien avec les clips imbriqués.

L’échelle à 9 découpes est appliquée au clip seekBar_mc. De cette façon, les bordures ne sont pas déformées lors du redimensionnement. Le clip seekBarProgress_mc peut également être redimensionné, mais il subit des déformations. Il n’utilise pas l’échelle à 9 découpes, car il s’agit d’un remplissage dont l’apparence est correcte s’il est déformé.

Le clip seekBarProgress_mc fonctionne sans fill_mc, de la même façon qu’un clip progress_mc fonctionne dans les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV. En d’autres mots, il n’est pas masqué et il est redimensionné à l’horizontale. Les dimensions exactes du clip seekBarProgress_mc à 100 % sont définies par les marges gauche et droite du clip seekBarProgress_mc. Ces dimensions sont, par défaut, égales et basées sur la différence entre les positions x (axe horizontal) des clips seekBar_mc et seekBarProgress_mc. Avec ActionScript, vous pouvez personnaliser les dimensions du clip de barre de recherche, comme le montre l’exemple suivant :

this.seekBar_mc.progressLeftMargin = 2; 
this.seekBar_mc.progressRightMargin = 2; 
this.seekBar_mc.progressY = 11; 
this.seekBar_mc.fullnessLeftMargin = 2; 
this.seekBar_mc.fullnessRightMargin = 2; 
this.seekBar_mc.fullnessY = 11;

Vous pouvez placer ce code dans le scénario du clip SeekBar ou avec l’autre code ActionScript sur le scénario principal. Si vous personnalisez avec du code au lieu de modifier la disposition, il n’est pas nécessaire de placer le remplissage sur la scène. Il doit simplement être dans la bibliothèque, défini sur Exporter pour ActionScript sur l’image 1 avec le nom de classe approprié.

Comme dans le composant SeekBar de l’interface utilisateur personnalisée Lecture de fichiers FLV, vous pouvez créer un clip de fond pour la barre de recherche. Si vous n’avez pas besoin de redimensionner votre barre de recherche, ou si elle est redimensionnée sans utiliser l’échelle à 9 découpes, vous pouvez configurer les clips progress_mc ou fullness_mc à l’aide des méthodes utilisées pour les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV. Pour plus d’informations, voir la section Clips de progression et de fond.

Comme la barre de volume des enveloppes Flash ne peut pas être redimensionnée, elle est construite de la même façon que le composant VolumeBar de l’interface utilisateur personnalisée Lecture de fichiers FLV. Pour plus d’informations, voir la section Composants SeekBar et VolumeBar. L’exception concerne la poignée dont l’implémentation est différente.

Poignées Seekbar et VolumeBar

Les poignées SeekBar et VolumeBar sont placées sur le calque de disposition en regard de la barre. Par défaut, les marges gauche et droite et les valeurs de l’axe y de la poignée sont définis par sa position par rapport au clip de barre. La marge gauche est définie par la différence entre l’emplacement des x (axe horizontal) de la poignée et l’emplacement des x (axe horizontal) de la barre, la marge droite étant égale à la marge gauche. Vous pouvez personnaliser ces valeurs via ActionScript dans le clip SeekBar ou VolumeBar. L’exemple suivant applique le même code ActionScript que celui utilisé dans les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV :

this.seekBar_mc.handleLeftMargin = 2; 
this.seekBar_mc.handleRightMargin = 2; 
this.seekBar_mc.handleY = 11;

Vous pouvez placer ce code dans le scénario du clip SeekBar ou avec l’autre code ActionScript sur le scénario principal. Si vous personnalisez avec du code au lieu de modifier la disposition, il n’est pas nécessaire de placer la poignée sur la scène. Il doit simplement être dans la bibliothèque, défini sur Exporter pour ActionScript sur l’image 1 avec le nom de classe approprié.

Au-delà de ces propriétés, les poignées sont de simples clips, configurés de la même façon que dans les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV. Les deux poignées sont dotées d’arrière-plans rectangulaires, la propriété alpha étant définie sur 0. Elles sont uniquement destinées à augmenter la zone active et ne sont pas obligatoires.

Clips d’arrière-plan et de premier plan

Les clips chrome_mc et forwardBackBorder_mc sont implémentés comme clips d’arrière-plan.

Parmi les clips ForwardBackBorder, ForwardBorder et BackBorder situés sur la scène et les boutons de balise d’emplacement Avance et Retour, ForwardBackBorder est le seul à ne pas être sur un calque de guide. Ce clip figure uniquement dans les enveloppes qui utilisent réellement les boutons Avance et Retour.

Toutefois, ces clips doivent être exportés pour ActionScript sur l’image 1 de la bibliothèque.