|
Les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV permettent de personnaliser l’apparence des commandes FLVPlayback dans le fichier FLA et d’observer les résultats lorsque vous affichez un aperçu de votre page Web. Cependant ces composants ne sont pas conçus pour être dimensionnés. Vous devez modifier un clip et son contenu pour qu’ils soient à une taille particulière. C’est pourquoi, il est généralement conseillé de placer le composant FLVPlayback sur la scène à la taille souhaitée, la propriété
scaleMode
étant définie sur
exactFit
.
Pour commencer, faites glisser simplement les composants de l’interface utilisateur personnalisée Lecture de fichiers FLV souhaités à partir du panneau Composants, placez-les où vous le souhaitez sur la scène, et donnez à chacun un nom d’occurrence.
Ces composants peuvent fonctionner sans le moindre code ActionScript. Si vous les placez dans le même scénario et la même image que le composant FLVPlayback et qu’aucune enveloppe n’a été définie dans le composant, ce dernier se connectera automatiquement à eux. Si plusieurs composants FLVPlayback se trouvent sur la scène, ou si le contrôle personnalisé et l’occurrence de FLVPlayback ne se trouvent pas dans le même scénario, une action devient nécessaire.
Une fois que les composants sont sur la scène, modifiez-les comme vous le feriez avec tout autre symbole. Après avoir ouvert les composants, vous pouvez constater que la configuration de chacun diffère légèrement de celle des autres.
Composants Button
Les composants Button ont une structure similaire. Ces boutons sont les suivants : BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton et StopButton. La plupart ont un seul clip sur l’image 1 avec l’occurrence placeholder_mc. Il s’agit généralement d’une occurrence de l’état normal du bouton, mais pas nécessairement. Sur l’image 2, quatre clips se trouvent sur la scène, pour chaque état d’affichage : normal, survol, enfoncé et désactivé. A l’exécution, le composant n’accède jamais réellement à l’image2 ; ces clips sont placés ici pour faciliter les modifications et être forcés à être chargés dans le fichier SWF sans cocher la case Exporter dans la première image dans la boîte de dialogue Propriétés des symboles. Cependant, vous devez toujours sélectionner l’option Exporter pour ActionScript.
Pour appliquer une enveloppe au bouton, vous devez simplement modifier chacun de ces clips. Vous pouvez modifier leur taille ainsi que leur apparence.
Un script ActionScript s’affiche en général sur l’image 1. Normalement, vous ne devez pas le modifier. Il arrête simplement la tête de lecture sur l’image 1 et indique quels clips utiliser pour quels états.
Boutons PlayPauseButton, MuteButton, FullScreenButton et CaptionButton
Les boutons PlayPauseButton, MuteButton, FullScreenButton et CaptionButton sont configurés différemment des autres ; ils possèdent une seule image avec deux calques, sans script. Cette image contient deux boutons, l’un au-dessus de l’autre. Dans le cas de PlayPauseButton, il s’agit d’un bouton Lecture et d’un bouton Pause. Dans le cas de MuteButton, d’un bouton d’activation de la sourdine et d’un bouton de désactivation ; dans celui de FullScreenButton, d’un bouton d’activation du mode plein écran et d’un bouton de désactivation; enfin, dans le cas de CaptionButton, il s’agit d’un bouton d’activation des sous-titres et d’un bouton de désactivation. Pour appliquer une enveloppe à ces boutons, appliquez-la à chacun de ces deux boutons internes comme l’explique la section
Application d’enveloppes aux composants particuliers de l’interface utilisateur personnalisée de lecture FLV
; aucune action ultérieure n’est nécessaire.
Le bouton CaptionButton est dédié au composant FLVPlaybackCaptioning et doit y être exclusivement associé, et non pas au composant FLVPlayback.
Boutons BackButton et ForwardButton
La configuration des boutons BackButton et ForwardButton diffère également légèrement de celle des autres. Sur l’image 2, ils contiennent des clips supplémentaires que vous pouvez utiliser comme cadre autour d’un ou des deux boutons. Ces clips ne sont pas nécessaires et n’ont pas de fonctionnalités spéciales; ils sont uniquement fournis pour leur commodité. Pour les utiliser, faites-les simplement glisser sur la scène à partir du panneau Bibliothèque, puis placez-les là où vous le souhaitez. Si vous n’en voulez pas, ne les utilisez pas ou supprimez-les dans le panneau Bibliothèque.
La plupart de ces boutons, tels qu’ils sont fournis, sont basés sur un ensemble commun de clips pour que vous puissiez modifier l’apparence de tous les boutons à la fois. Vous pouvez utiliser cette fonctionnalité ou remplacer ces clips communs et rendre l’apparence de chaque bouton différente.
Composant BufferingBar
Le composant BufferingBar est simple : il est constitué d’une animation qui s’affiche lorsqu’il entre en mémoire tampon, et ne nécessite pas de script ActionScript spécial pour être configuré. Par défaut, il s’agit d’une barre rayée déplacée de gauche à droite, sur laquelle est placé un masque rectangulaire pour lui donner un effet « bande zébrée », mais il n’y a rien de spécial sur cette configuration.
Bien que les barres de mise en mémoire tampon des fichiers SWF d’enveloppe utilisent l’échelle à 9 découpes car elles doivent être mises à l’échelle à l’exécution, le composant BufferingBar de l’interface utilisateur personnalisée FLV n’utilise pas et ne
peut pas
utiliser l’échelle à 9 découpes car il comporte des clips imbriqués. Si vous souhaitez modifier la largeur ou la longueur du composant BufferingBar, vous pouvez changer son contenu plutôt que sa dimension.
Composants SeekBar et VolumeBar
Les composants SeekBar et VolumeBar sont semblables, même si leurs fonctions sont différentes. Chacun possède des poignées, utilise les mêmes mécanismes de gestion des poignées et prend en charge les clips imbriqués qu’il contient pour suivre la progression.
Il existe de nombreux emplacements où le code ActionScript du composant FLVPlayback suppose que le point d’alignement (également appelé
point d’origine
ou
point zéro
) des composants SeekBar ou VolumeBar est situé dans le coin supérieur gauche du contenu. Il est donc important de conserver cette convention. Autrement, vous risquez de rencontrer des problèmes avec les poignées et avec les clips de progression et de fond.
Bien que les barres de recherche des fichiers SWF d’enveloppe utilisent l’échelle à 9 découpes car elles doivent être mises à l’échelle à l’exécution, le composant SeekBar de l’interface utilisateur personnalisée FLV n’utilise pas et ne
peut pas
utiliser l’échelle à 9 découpes car il comporte des clips imbriqués. Si vous souhaitez modifier la largeur ou la longueur du composant SeekBar, vous pouvez changer son contenu plutôt que sa dimension.
Poignée
Une occurrence du clip de poignée est située sur l’image 2. A l’instar des composants BackButton et ForwardButton, le composant n’accède jamais réellement à l’image 2 ; ces clips sont placés ici pour faciliter leur modification et pour être forcés à être chargés dans le fichier SWF sans cocher la case Exporter dans la première image de la boîte de dialogue Propriétés des symboles. Cependant, vous devez toujours sélectionner l’option Exporter pour ActionScript.
Il se peut que vous constatiez que le clip de poignée comporte, dans son arrière-plan, un rectangle dont la valeur alpha est fixée à 0. Ce rectangle augmente la taille de la zone sensible de la poignée, ce qui permet de la saisir plus aisément sans changer son apparence, de façon similaire à la zone sensible d’un bouton. Comme la poignée est créée de façon dynamique à l’exécution, il doit s’agir d’un clip et non d’un bouton. Ce rectangle dont la valeur alpha est définie sur 0 n’est pas nécessaire et, en règle générale, vous pouvez remplacer l’intérieur de la poignée par l’image de votre choix. Cependant, il fonctionne mieux pour conserver le point d’alignement centré horizontalement au milieu du clip de poignée.
Le code ActionScript suivant est inséré sur l’image 1 du composant SeekBar afin de gérer la poignée :
stop();
handleLinkageID = "SeekBarHandle";
handleLeftMargin = 2;
handleRightMargin = 2;
handleY = 11;
L’appel de la fonction
stop()
est nécessaire en raison du contenu de l’image 2.
La deuxième ligne indique le symbole à utiliser comme poignée, et normalement vous n’avez pas besoin de la modifier si vous modifiez simplement l’occurrence du clip de poignée sur l’image 2. A l’exécution, le composant FLVPlayback crée une occurrence du clip spécifié sur la scène comme sœur de l’occurrence du composant Bar, ce qui signifie qu’elles ont le même clip parent. Ainsi, si votre barre se situe au niveau racine, votre poignée doit également se situer à ce niveau.
La variable
handleLeftMargin
détermine l’emplacement d’origine de la poignée (0 %) alors que la variable
handleRightMargin
détermine son emplacement final (100 %). Ces nombres indiquent les décalages par rapport aux extrémités gauche et droite de la barre : des nombres positifs marquent les limites à l’intérieur de la barre alors que des nombres négatifs marquent les limites à l’extérieur. Ces décalages indiquent où peut aller la poignée, en fonction de son point d’alignement. Si vous placez le point d’alignement au milieu de la poignée, les extrémités gauche et droite de celle-ci dépasseront les marges. Le point d’alignement d’un clip de barre de recherche doit être situé dans le coin supérieur gauche de son contenu pour fonctionner correctement.
La variable
handleY
détermine la position
y
de la poignée par rapport à l’occurrence de la barre. Elle est fonction des points d’alignement de chaque clip. Dans l’exemple de poignée, le point d’alignement est situé au niveau du sommet du triangle pour la placer par rapport à la partie visible, ignorant le rectangle d’état actif invisible. Le clip de barre doit donc conserver son point d’alignement dans le coin supérieur gauche de son contenu pour fonctionner correctement.
Par exemple, si un contrôle de barre est défini sur (100, 100), avec une largeur de 100 pixels, la poignée peut aller de 102 à 198 horizontalement et rester à 111 verticalement. Si vous modifiez les variables
handleLeftMargin
et
handleRightMargin
sur -2 et la variable
handleY
sur -11, la poignée peut aller de 98 à 202 horizontalement et rester à 89 verticalement.
Clips de progression et de fond
Le composant SeekBar contient un clip de
progression
et le composant VolumeBar contient un clip de
fond
, mais en pratique, ces deux composants possèdent chacun l’un ou l’autre de ces clips, n’en possèdent aucun ou possèdent les deux. Leur structure et leur comportement sont identiques, mais ils gèrent différentes valeurs. Un clip de progression se remplit à mesure du téléchargement du fichier FLV (ce qui est utile uniquement pour un téléchargement HTTP, car il est toujours plein en cas de diffusion en flux continu à partir de FMS) et un clip de fond se remplit à mesure que la poignée se déplace de gauche à droite.
Le composant FLVPlayback recherche ces occurrences de clip en fonction d’un nom d’occurrence particulier. Ainsi votre occurrence de clip de progression doit posséder votre clip de barre comme parent et le nom d’occurrence progress_mc. L’occurrence de clip de fond doit être nommée fullness_mc.
Vous pouvez définir les clips de progression et de fond avec ou sans l’occurrence de clip fill_mc imbriquée dedans. Le clip fullness_mc du composant VolumeBar affiche la méthode
avec
le clip fill_mc, et le clip progress_mc du composant SeekBar affiche la méthode
sans
le clip fill_mc.
La méthode avec le clip fill_mc imbriqué est utile si vous souhaitez un remplissage qui ne peut pas être dimensionné sans déformer l’apparence.
Dans le clip fullness_mc du composant VolumeBar, l’occurrence du clip fill_mc imbriqué est masquée. Vous pouvez la masquer lorsque vous créez le clip ou créer un masque lors de l’exécution de façon dynamique. Si vous la masquez avec un clip, nommez cette occurrence
mask_mc
, puis configurez-la pour que fill_mc s’affiche comme si le pourcentage était de 100 %. Si vous ne masquez pas fill_mc, le masque créé de façon dynamique est rectangulaire et de même taille que fill_mc à 100 %.
Le clip fill_mc est révélé avec le masque d’une des deux façons, selon que fill_mc.slideReveal est défini sur
true
ou
false
.
Si fill_mc.slideReveal est défini sur
true
, alors fill_mc est déplacé de gauche à droite pour l’exposer à travers le masque. A 0 %, il est tout à fait à gauche, si bien que rien n’est affiché à travers le masque. A mesure que le pourcentage augmente, il se déplace vers la droite, jusqu’à 100 % ; il revient au pourcentage d’origine lors de sa création sur la scène.
Si fill_mc.slideReveal est défini sur
false
ou non défini (comportement pas défaut), le masque est redimensionné de gauche à droite pour révéler davantage de fill_mc. Lorsqu’il est sur 0 %, le masque est redimensionné horizontalement à 05, et à mesure que le pourcentage augmente,
scaleX
augmente, jusqu’à ce qu’il révèle l’intégralité de fill_mc lorsqu’il est sur 100 %. Cela ne correspond pas nécessairement à
scaleX
= 100, car mask_mc peut avoir été redimensionné au moment de sa création.
La méthode sans fill_mc est plus simple que la méthode avec fill_mc, mais elle déforme le remplissage horizontalement. Si vous ne souhaitez pas de déformation, vous devez utiliser fill_mc. Le clip progress_mc du composant SeekBar illustre cette méthode.
Le clip de progression ou de fond est redimensionné horizontalement en fonction du pourcentage. A 0 %,
scaleX
de l’occurrence est défini sur 0, la rendant invisible. A mesure que le pourcentage augmente,
scaleX
est réglé jusqu’à ce que le clip ait sa taille d’origine au moment de sa création sur la scène lorsqu’il est sur 100 %. De nouveau, cela ne correspond pas nécessairement à
scaleX
= 100 car cette occurrence de clip peut avoir été redimensionnée au moment de sa création.
Connexion aux composants de l’interface utilisateur personnalisée Lecture de fichiers FLV
Si vous placez vos composants de l’interface utilisateur personnalisée sur le même scénario et dans la même image que le composant FLVPlayback, et si vous n’avez pas défini la propriété
skin
, FLVPlayback se connectera automatiquement à ceux-ci sans devoir passer par ActionScript.
Si plusieurs composants FLVPlayback se trouvent sur la scène, ou si le contrôle personnalisé et FLVPlayback ne sont pas dans le même scénario, vous devez rédiger du code ActionScript pour connecter vos composants de l’interface utilisateur personnalisée à votre occurrence du composant FLVPlayback. Vous devez d’abord nommer l’occurrence de FLVPlayback, puis utiliser ActionScript pour affecter les occurrences des composants de l’interface utilisateur personnalisée Lecture de fichiers FLV aux propriétés FLVPlayback correspondantes. Dans l’exemple suivant, l’occurrence de FLVPlayback est nommée my_FLVPlybk, les noms des propriétés FLVPlayback suivent les points (.) et les occurrences des commandes de l’interface utilisateur personnalisée Lecture de fichiers FLV figurent à droite du signe égal (=) :
//FLVPlayback instance = my_FLVPlybk
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc.
my_FLVPlybk.pauseButton = pausebtn;
my_FLVPlybk.playPauseButton = playpausebtn;
my_FLVPlybk.stopButton = stopbtn;
my_FLVPlybk.muteButton = mutebtn;
my_FLVPlybk.backButton = backbtn;
my_FLVPlybk.forwardButton = forbtn;
my_FLVPlybk.volumeBar = volbar;
my_FLVPlybk.seekBar = seekbar;
my_FLVPlybk.bufferingBar = bufbar;
Les procédures suivantes permettent de créer les commandes StopButton, PlayPauseButton, MuteButton et SeekBar personnalisées.
-
Faites glisser le composant FLVPlayback sur la scène et nommez l’occurrence,
my_FLVPlybk
.
-
Dans l’Inspecteur des composants, définissez le paramètre
source
sur
http://www.helpexamples.com/flash/video/cuepoints.flv
.
-
Définissez le paramètre Skin sur None.
-
Faites glisser un composant StopButton, PlayPauseButton et MuteButton sur la scène, puis placez-les au-dessus de l’occurrence de FLVPlayback, en les empilant verticalement sur la gauche. Donnez à chaque bouton un nom d’occurrence dans l’Inspecteur des propriétés (par exemple
my_stopbttn
,
my_plypausbttn
et
my_mutebttn
).
-
Dans le panneau Bibliothèque, ouvrez le dossier Skins de FLVPlayback, puis son sous-dossier SquareButton.
-
Sélectionnez le clip SquareBgDown, puis double-cliquez sur son entrée pour l’ouvrir sur la scène.
-
Cliquez du bouton droit (Windows) ou en appuyant sur la touche Contrôle (Macintosh), puis sélectionnez Sélectionner tout dans le menu, puis supprimez le symbole.
-
Sélectionnez l’outil ovale, dessinez un ovale au même emplacement, puis définissez le remplissage sur bleu (
#0033FF
).
-
Dans l’Inspecteur des propriétés, fixez la largeur (W:) à
40
et la hauteur (H:) à
20
. Fixez la coordonnée x (X:) à
0,0
et la coordonnée (Y:) à
0,0
.
-
Répétez les étapes 6 à 8 pour le clip SquareBgNormal, mais changez le remplissage en le définissant sur jaune (
#FFFF00
).
-
Répétez les étapes 6 à 8 pour le clip SquareBgOver, mais changez le remplissage en le définissant sur vert (
#006600
).
-
Modifiez les clips pour les différentes icônes de symboles dans les boutons (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon et StopIcon). Vous pouvez trouver ces clips dans le panneau Bibliothèque sous FLV Playback Skins/
Etiquette
Button/Assets, où
Etiquette
correspond au nom du bouton, par exemple Lire, Pause, etc. Suivez les étapes décrites ci-dessous pour chacun d’eux :
-
Cliquez sur l’option Sélectionner tout.
-
Modifiez la couleur en la définissant sur rouge (
#FF0000
).
-
Redimensionnez à 300 %.
-
Modifiez l’emplacement du contenu et fixez-le à
7,0
pour changer le placement horizontal de l’icône dans tous les états de bouton.
Remarque :
en modifiant ainsi l’emplacement, vous n’avez pas à ouvrir chaque état de bouton et à déplacer l’occurrence de clip d’icône.
-
Cliquez sur la flèche Retour en bleu située au-dessus du scénario pour revenir à l’image 1 de la séquence 1.
-
Faites glisser un composant SeekBar sur la scène, puis placez-le dans le coin inférieur droit de l’occurrence de FLVPlayback.
-
Dans le panneau Bibliothèque, double-cliquez sur le composant SeekBar pour l’ouvrir sur la scène.
-
Redimensionnez-le à 400 %.
-
Sélectionnez le contour, puis définissez la couleur sur rouge (
#FF0000
).
-
Double-cliquez sur le composant SeekBarProgress dans le dossier FLVPlayback Skins/Seek Bar, puis définissez la couleur sur jaune (
#FFFF00
).
-
Double-cliquez sur le composant SeekBarHandle dans le dossier FLVPlayback Skins/Seek Bar, puis définissez la couleur sur rouge (
#FF0000
).
-
Cliquez sur la flèche Retour en bleu située au-dessus du scénario pour revenir à l’image 1 de la séquence 1.
-
Sélectionnez l’occurrence de SeekBar sur la scène et nommez-la
my_seekbar
.
-
Dans le panneau Actions situé sur l'image 1 du scénario, ajoutez une instruction import pour les classes Video, puis affectez les noms de bouton et de barre de recherche aux propriétés FLVPlayback correspondantes, comme indiqué dans l'exemple suivant :
import fl.video.*;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.muteButton = my_mutebttn;
my_FLVPlybk.seekBar = my_seekbar;
-
Appuyez sur Ctrl+Entrée pour tester l’animation.
|
|
|
