|
Met de aangepaste UI-componenten voor het afspelen van FLV kunt u de weergave van de FLVPlayback-besturingselementen in een FLA-bestand aanpassen. U kunt de resultaten bekijken als u de webpagina bekijkt. Deze componenten kunnen echter niet worden geschaald. U moet de filmclip en de bijbehorende inhoud dan ook voor de gewenste grootte maken. Daarom is het aan te bevelen om de component FLVPlayback in de gewenste grootte in het werkgebied te plaatsen en
scaleMode
op
exactFit
in te stellen.
Sleep om te beginnen de gewenste aangepaste UI-componenten voor het afspelen van FLV vanuit het deelvenster Componenten, plaats ze op de gewenste positie in het werkgebied en geef alle instanties een naam.
Deze componenten werken zonder ActionScript. Als u ze op dezelfde tijdlijn en hetzelfde frame zet als de component FLVPlayback en als er geen skin voor de component is ingesteld, maakt de component FLVPlayback de koppelingen automatisch. Als er meerdere componenten FLVPlayback in het werkgebied zijn, of als het aangepaste besturingselement en de instantie van FLVPlayback zich niet op dezelfde tijdlijn bevinden, moet u ActionScript gebruiken.
Nadat u de componenten in het werkgebied hebt geplaatst, kunt u ze net als alle andere symbolen bewerken. Als u de componenten opent, zult u zien dat ze allemaal hun eigen instellingen hebben.
De component Button
De component Button heeft een vergelijkbare structuur. De component Button bestaat uit een BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton en StopButton. De meeste hebben één filmclip in frame 1 met de instantienaam placeholder_mc. Doorgaans is dat een instantie van de normale toestand van de knop, maar dat hoeft niet zo te zijn. In frame 2 zijn er vier filmclips in het werkgebied voor elke weergavetoestand: normaal, over, omlaag en uitgeschakeld. (Bij uitvoering gaat de component nooit echt naar frame 2. De filmclips worden hier geplaatst zodat ze eenvoudig kunnen worden bewerkt en om te zorgen dat ze in het SWF-bestand worden geladen zonder dat de optie Exporteren in eerste frame in het dialoogvenster Symbooleigenschappen hoeft te worden geselecteerd. U moet de optie Exporteren voor ActionScript echter wel selecteren.)
Als u een skin aan een knop wilt toewijzen, kunt u deze filmclips afzonderlijk bewerken. U kunt de grootte en de weergave van de knoppen aanpassen.
In frame 1 verschijnen doorgaans enkele regels ActionScript. U hoeft dit script niet aan te passen. Dit script zorgt ervoor dat de afspeelkop in frame 1 wordt gestopt en geeft aan welke filmclip voor welke status moet worden gebruikt.
De knoppen PlayPauseButton, MuteButton, FullScreenButton en CaptionButton
De knoppen PlayPauseButton, MuteButton, FullScreenButton en CaptionButton worden op een andere manier ingesteld dan de overige knoppen. Zij bestaan slechts uit één frame met twee lagen en geen script. In dat frame bevinden zich twee knoppen, de ene knop boven de andere. Voor PlayPauseButton zijn dat de knoppen Afspelen en Pauzeren; voor MuteButton zijn dat de knoppen Dempen-aan en Dempen-uit; voor FullScreenButton zijn dat de knoppen Volledig scherm-aan en Volledig scherm-uit; voor CaptionButton zijn dat de knoppen Ondertiteling-aan en Ondertiteling-uit. Als u een skin aan elk van deze twee interne knoppen wilt toevoegen, zoals wordt beschreven in
Skins toewijzen aan afzonderlijke aangepaste UI-componenten voor het afspelen van FLV
; u hoeft verder niets te doen.
De knop CaptionButton heeft betrekking op de component FLVPlaybackCaptioning en moet dan ook aan deze component worden gekoppeld en niet aan de component FLVPlayback.
De knoppen BackButton en ForwardButton
De knoppen BackButton en ForwardButton worden ook op een andere manier ingesteld dan de overige knoppen. In frame 2 hebben ze extra filmclips die u als een frame kunt gebruiken rondom een van de knoppen of beide knoppen. Deze filmclips zijn niet verplicht en hebben geen speciale mogelijkheden. Zij worden slechts toegevoegd om het bewerken eenvoudiger te maken. Als u ze wilt gebruiken, sleept u ze vanuit het deelvenster Bibliotheek naar de gewenste positie in het werkgebied. Als u ze niet wilt gebruiken, kunt u ze desgewenst uit het deelvenster Bibliotheek verwijderen.
De meeste knoppen zijn gebaseerd op een algemene set filmclips. Dat betekent dat u de weergave van alle knoppen tegelijk kunt wijzigen. U kunt gebruik maken van deze mogelijkheid, maar u kunt deze algemene clips ook vervangen en de weergave per knop instellen.
component BufferingBar
De component bufferbalk is eenvoudig: Deze bestaat uit een animatie die zichtbaar wordt als de component de bufferstatus bereikt. U hebt geen ActionScript nodig om deze component te configureren. Standaard bestaat deze component uit een gestreepte balk die van links naar rechts beweegt met een rechthoekig masker, om het idee te geven van een gestreepte paal buiten een kapperszaak. De configuratie van deze component is eenvoudig.
Hoewel de bufferbalken in de SWF-bestanden met skin 9-delige schaling gebruiken omdat ze bij uitvoering moeten worden geschaald, maakt de aangepaste UI-component voor het afspelen van FLV met de naam BufferingBar
geen
gebruik van 9-delige schaling omdat de component geneste filmclips bevat. Als u de bufferbalken breder of langer wilt maken, moet u de inhoud wijzigen en geen schaling toepassen.
De componenten SeekBar en VolumeBar
De componenten SeekBar (zoekbalk) en VolumeBar (volumebalk) zijn vergelijkbaar, maar ze hebben wel verschillende functies. Ze zijn beide voorzien van grepen, gebruiken hetzelfde mechanisme voor bijhouden van de grepen en ondersteunen het gebruik van geneste clips om de voortgang en de volheid bij te houden.
Op veel plaatsen gaat de ActionScript-code in de component FLVPlayback ervan uit dat het registratiepunt (ook wel
uitgangspunt
of
oorsprong
) van de component SeekBar of VolumeBar zich in de linkerbovenhoek van de inhoud bevindt. Het is daarom belangrijk dat u zich hieraan houdt. Anders krijgt u wellicht problemen met de grepen en met de filmclips voor de voortgang en volheid.
Hoewel de zoekbalken in de SWF-bestanden met skin 9-delige schaling gebruiken omdat deze bij uitvoering moeten worden geschaald, maakt de aangepaste UI-component SeekBar
geen
gebruik van 9-delige schaling omdat de component geneste filmclips bevat. Als u de zoekbalken breder of langer wilt maken, moet u de inhoud wijzigen en geen schaling toepassen.
Greep
In frame 2 bevindt zich een instantie van de filmclip Greep. Net als bij de componenten BackButton en ForwardButton gaat deze component nooit echt naar frame 2. De filmclips worden hier geplaatst zodat ze eenvoudig kunnen worden bewerkt en om ervoor te zorgen dat ze in het SWF-bestand worden geladen zonder dat het selectievakje Exporteren in het dialoogvenster Symbooleigenschappen hoeft te worden geselecteerd. U moet de optie Exporteren voor ActionScript echter wel selecteren.
De filmclip Greep heeft een rechthoek op de achtergrond met de transparantie-instelling 0. Deze rechthoek vergroot het raakgebied van de greep, zodat de greep eenvoudiger te gebruiken is zonder dat de weergave wordt gewijzigd. Dit is vergelijkbaar met de toestand Actief van een knop. Aangezien de greep bij uitvoering dynamisch wordt gemaakt, moet deze een filmclip zijn en geen knop. De rechthoek met de transparantie-instelling 0 heeft verder geen enkele functie en u kunt aan de binnenzijde van de greep iedere gewenste afbeelding plaatsen. De greep werkt het best als u het registratiepunt horizontaal gecentreerd in het midden van de filmclip Greep plaatst.
De volgende ActionScript-code bevindt zich in frame 1 van de component SeekBar voor de besturing van de greep:
stop();
handleLinkageID = "SeekBarHandle";
handleLeftMargin = 2;
handleRightMargin = 2;
handleY = 11;
Het aanroepen van de functie
stop()
is noodzakelijk vanwege de inhoud van frame 2.
De tweede regel geeft aan welk symbool als greep moet worden gebruikt. U hoeft deze regel niet te wijzigen als u de instantie van de filmclip Greep in frame 2 bewerkt. Bij uitvoering maakt de component FLVPlayback een instantie van de opgegeven filmclip in het werkgebied op hetzelfde niveau als de instantie van de component Bar, hetgeen inhoudt dat ze allebei dezelfde bovenliggende filmclip hebben. Als uw balk zich op het hoofdniveau bevindt, moet de greep zich dus ook op het hoofdniveau bevinden.
De variabele
handleLeftMargin
bepaalt de oorspronkelijke locatie van de greep (0%) en de variabele
handleRightMargin
bepaalt waar de greep eindigt (100%). De getallen bepalen de verschuiving ten opzichte van de linker- en rechterzijde van het besturingselement voor de balk. Een positief getal geeft de limiet aan binnen de balk en een negatief getal geeft de limiet aan buiten de balk. Deze verschuivingen geven aan waar de greep naartoe kan gaan, op basis van het registratiepunt. Als u het registratiepunt in het midden van de greep plaatst, overschrijden de uiterste linker- en rechterzijde van de greep de marges. Voor een zoekbalkfilmclip moet het registratiepunt in de linkerbovenhoek van de inhoud worden geplaatst om de filmclip correct te laten werken.
The variabele
handleY
bepaalt de
Y
-positie van de greep, in relatie tot de instantie van de balk. Deze is gebaseerd op de registratiepunten van iedere filmclip. Het registratiepunt in de voorbeeldgreep bevindt zich op de punt van de driehoek om dit relatief ten opzichte het zichtbare gedeelte te plaatsen, waarbij de onzichtbare rechthoek van het raakgebied wordt genegeerd. Voor de balkfilmclip moet het registratiepunt in de linkerbovenhoek van de inhoud worden geplaatst om de filmclip correct te laten werken.
Als het besturingselement van de balk bij deze limieten bijvoorbeeld op (100, 100) is ingesteld en als de balk 100 pixels breed is, kan de greep van 102 tot 198 horizontaal gaan en blijft deze op 111 verticaal. Als u
handleLeftMargin
en
handleRightMargin
wijzigt in -2 en
handleY
in -11, kan de greep van 98 tot 202 horizontaal gaan en blijft deze op 89 verticaal.
Filmclips voor voortgang en volheid
De component SeekBar heeft een filmclip voor
voortgang
en de component VolumeBar heeft een filmclip voor
volheid
, maar in de praktijk kan iedere SeekBar of VolumeBar een van beide, geen van beide, of beide filmclips hebben. Ze zijn structureel identiek en gedragen zich op dezelfde manier, maar houden verschillende waarden bij. Een filmclip voor voortgang wordt opgevuld als het FLV-bestand bezig is met downloaden (dat is alleen zinvol bij een HTTP-download, omdat de filmclip bij streaming vanaf FMS altijd is opgevuld) en een filmclip voor volheid wordt opgevuld als de greep van links naar rechts beweegt.
De component FLVPlayback vindt deze instanties van de filmclip door naar een specifieke instantienaam te zoeken. De instantie van de filmclip voor voortgang moet daarom de balkfilmclip als bovenliggende filmclip hebben en de instantienaam progress_mc. De instantie van de filmclip voor volheid moet de instantienaam fullness_mc hebben.
U kunt de filmclips voor voortgang en volheid instellen met of zonder de geneste instantie van de filmclip fill_mc. De filmclip fullness_mc van de VolumeBar geeft de methode
met
de filmclip fill_mc weer en de filmclip progress_mc van de SeekBar geeft de methode
zonder
de filmclip fill_mc weer.
De methode met de geneste filmclip fill_mc is handig als u een opvulling wilt gebruiken die niet kan worden geschaald zonder dat de weergave wordt vervormd.
In de filmclip fullness_mc van de VolumeBar wordt de instantie van de geneste filmclip fill_mc gemaskeerd. U kunt de instantie maskeren als u de filmclip maakt of de maskering dynamisch laten plaatsvinden bij uitvoering. Als u de instantie maskeert terwijl u de filmclip maakt, geeft u de instantie de naam
mask_mc
en stelt u de instantie zodanig in dat fill_mc wordt weergegeven zoals fill_mc zou worden weergegeven al het percentage 100% is. Als u fill_mc niet maskeert, wordt het dynamisch gemaakte masker rechthoekig en even groot als fill_mc op 100%.
De filmclip fill_mc kan met het masker op twee manieren worden weergegeven, afhankelijk van het feit of fill_mc.slideReveal op
true
of
false
is ingesteld.
Als fill_mc.slideReveal op
true
is ingesteld, wordt fill_mc van links naar rechts verplaatst om door het masker zichtbaar te worden gemaakt. Bij 0% wordt fill_mc helemaal links geplaatst, zodat er niets door het masker wordt weergegeven. Als het percentage wordt verhoogd, wordt fill_mc naar rechts verplaatst totdat 100% is bereikt, waardoor de filmclip weer terug is op de positie waar deze in het werkgebied was gemaakt.
Als fill_mc.slideReveal
false
is of niet gedefinieerd (het standaardgedrag), wordt de grootte van het masker van links naar rechts aangepast om meer van fill_mc weer te geven. Bij 0% wordt het masker geschaald tot 05 horizontaal. Als het percentage wordt verhoogd, wordt
scaleX
groter totdat 100% is bereikt en fill_mc in zijn geheel wordt weergegeven. Dit hoeft niet per definitie
scaleX = 100
te zijn omdat mask_mc tijdens het maken kan zijn geschaald.
De methode zonder fill_mc is eenvoudiger dan de methode met fill_mc, maar de opvulling wordt dan wel horizontaal vervormd. Als u geen vervorming wilt, moet u fill_mc gebruiken. De filmclip progress_mc van SeekBar illustreert deze methode.
De filmclip voor voortgang of volheid wordt horizontaal geschaald op basis van het percentage. Bij 0% is
scaleX
van de instantie op 0 ingesteld, waardoor deze onzichtbaar is. Als het percentage toeneemt, wordt
scaleX
aangepast totdat 100% is bereikt. De clip is dan even groot als toen deze in het werkgebied werd gemaakt. Nogmaals, dit hoeft niet per definitie
scaleX
= 100 te zijn omdat de instantie van de clip tijdens het maken kan zijn geschaald.
Aangepaste UI-componenten voor het afspelen van FLV koppelen
Als u uw aangepaste UI-componenten op dezelfde tijdlijn en in hetzelfde frame plaatst als de component FLVPlayback en u de eigenschap
skin
niet hebt ingesteld, wordt FLVPlayback automatisch aan de componenten gekoppeld zonder dat u daarvoor ActionScript hoeft te gebruiken.
Als u meerdere componenten FLVPlayback in het werkgebied hebt of als het aangepaste besturingselement en FLVPlayback zich niet op dezelfde tijdlijn bevinden, moet u ActionScript-code schrijven om de aangepaste UI-componenten te koppelen aan de instantie van de component FLVPlayback. U moet de instantie van FLVPlayback een naam geven en vervolgens ActionScript gebruiken om de instanties van de aangepaste UI-component voor het afspelen van FLV aan de bijbehorende eigenschappen van FLVPlayback te koppelen. In onderstaand voorbeeld is my_FLVPlybk de instantie van FLVPlayback. De namen van de eigenschappen van FLVPlayback staan achter de punten (.) en de besturingsinstanties van de aangepaste UI-component voor het afspelen van FLV staan rechts van het isgelijkteken (=):
//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;
In de volgende stappen worden de aangepaste besturingselementen StopButton, PlayPauseButton, MuteButton en SeekBar gemaakt:
-
Sleep de component FLVPlayback naar het werkgebied en geeft de instantie de naam
my_FLVPlybk
.
-
Stel de parameter
source
via Componentcontrole in op
http://www.helpexamples.com/flash/video/cuepoints.flv
.
-
Zet de parameter Skin op Geen.
-
Sleep een StopButton, een PlayPauseButton en een MuteButton naar het werkgebied en plaats ze op de instantie van FLVPlayback. Stapel ze verticaal aan de linkerzijde. Geef iedere knop een instantienaam in Eigenschapcontrole (zoals
my_stopbttn
,
my_plypausbttn
en
my_mutebttn
).
-
Open in het deelvenster Bibliotheek de map FLVPlayback Skins en open de onderliggende map SquareButton.
-
Selecteer de filmclip SquareBgDown en dubbelklik op de filmclip om deze in het werkgebied te openen.
-
Klik met de rechtermuisknop (Windows) of houd de Control-toets ingedrukt en klik (Macintosh) en kies Alles selecteren in het menu. Verwijder het symbool.
-
Selecteer het ovaal, teken een ovaal op dezelfde locatie en kies de vulkleur blauw (
#0033FF
).
-
Stel in Eigenschapscontrole de breedte (W:) in op
40
en de hoogte (H:) op
20
. Stel the x-coördinaat (X:) in op
0,0
en de -coördinaat (X:) op
0,0
.
-
Herhaal de stappen 6 t/m 8 voor SquareBgNormal, maar kies de vulkleur geel (
#FFFF00
).
-
Herhaal de stappen 6 t/m 8 voor SquareBgOver, maar kies de vulkleur groen (
#006600
).
-
Bewerk de filmclips voor de verschillende symboolpictogrammen in de knoppen (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon en StopIcon). U vindt deze filmclips in het deelvenster Bibliotheek onder FLV Playback Skins/
Label
Button/Assets, waar
Label
de naam van de knop is, bijvoorbeeld Play, Pause, enzovoort. Volg de onderstaande stappen:
-
Kies de optie Alles selecteren.
-
Kies de kleur rood (
#FF0000
).
-
Stel de schaal in op 300%.
-
Wijzig de locatie X: van de inhoud in
7,0
om de horizontale plaatsing van het pictogram in iedere knoptoestand te wijzigen.
Opmerking:
Door de locatie op deze manier te wijzigen hoeft u niet iedere knoptoestand afzonderlijk te openen en aan te passen.
-
Klik op de blauwe pijl Terug boven de tijdlijn om terug te keren naar scène 1, frame 1.
-
Sleep een component SeekBar naar het werkgebied en plaats deze in de rechterbenedenhoek van de instantie FLVPlayback.
-
Dubbelklik in het deelvenster Bibliotheek op de SeekBar om deze in het werkgebied te openen.
-
Schaal deze naar 400%.
-
Selecteer de omtrek en kies de kleur rood (
#FF0000
).
-
Dubbelklik op SeekBarProgress in de map FLVPlayback Skins/Seek Bar en kies de kleur geel (
#FFFF00
).
-
Dubbelklik op SeekBarHandle in de map FLVPlayback Skins/Seek Bar en kies de kleur rood (
#FF0000
).
-
Klik op de blauwe pijl Terug boven de tijdlijn om terug te keren naar scène 1, frame 1.
-
Selecteer de instantie SeekBar in het werkgebied en geef deze de naam
my_seekbar
.
-
Voeg in het deelvenster Handelingen op frame 1 van de tijdlijn een
import
instructie toe voor de klassen Video. Wijs de naam van de knop en van SeekBar aan de bijbehorende eigenschappen FLVPlayback toe zoals in onderstaand voorbeeld:
import fl.video.*;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.muteButton = my_mutebttn;
my_FLVPlybk.seekBar = my_seekbar;
-
Druk op Control+Enter om de film te testen.
|
|
|
