Een nieuwe skin maken

De beste manier om een nieuw SWF-bestand met skin te maken is een van de skinbestanden die met Flash worden geleverd te kopiëren en dit te gebruiken als beginpunt. De FLA-bestanden voor deze skins bevinden zich in de Flash-toepassingsmap in Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. Als u het voltooide SWF-bestand met skin beschikbaar wilt maken als een optie in het dialoogvenster Skin selecteren, plaatst u het bestand in de map Configuration/FLVPlayback Skins/ActionScript 3.0, ofwel in de Flash-toepassingsmap ofwel in een lokale gebruikersmap Configuration/FLVPlayback Skins/ActionScript 3.0.

Aangezien u de kleur van een skin kunt instellen onafhankelijk van het kiezen van een skin, hoeft u het FLA-bestand niet te bewerken om de kleur te wijzigen. Wanneer u een skin maakt met een specifieke kleur en u niet wilt dat deze kan worden bewerkt in het dialoogvenster Skin selecteren, voegt u this.border_mc.colorMe = false; toe aan de ActionScript-code van het FLA-bestand met skin. Zie Een vooraf ontworpen skin selecteren voor informatie over het instellen van de kleur van een skin.

Wanneer u de geïnstalleerde Flash-bestanden met skin (FLA) bekijkt, kunnen bepaalde onderdelen in het werkgebied onnodig lijken. Veel van deze onderdelen worden echter in geleidelagen geplaatst. Met live voorvertoning op schaal 9 kunt u snel zien wat werkelijk wordt weergegeven in het SWF-bestand.

In de volgende secties worden complexere aanpassingen en wijzigingen in de filmclips van zoekbalk, bufferbalk en volumebalk besproken.

De skinlay-out gebruiken

Wanneer u een Flash-bestand met skin (FLA) opent, worden de lay-outs van de filmclips van de skin weergegeven op de hoofdtijdlijn. Deze clips en de ActionScript-code die zich in hetzelfde frame bevindt, definiëren de lay-out van de besturingselementen bij uitvoering.

Hoewel de lay-outlaag veel lijkt op het uiterlijk van de skin bij uitvoering, is de inhoud van deze laag niet zichtbaar bij uitvoering. Deze laag wordt alleen gebruikt om de plaatsing van de besturingselementen te berekenen. De overige besturingselementen in het werkgebied worden bij uitvoering gebruikt.

In de lay-outlaag bevindt zich een plaatsaanduiding video_mc voor de component FLVPlayback. De lay-out van alle overige besturingselementen wordt bepaald ten opzichte van video_mc. Wanneer u begint met een van de Flash-bestanden (FLA) en de grootte van de besturingselementen wijzigt, kunt u waarschijnlijk de lay-out bepalen door deze clips voor plaatsaanduiding te verplaatsen.

Elke clip voor plaatsaanduiding heeft een specifieke instantienaam. De namen van de clips voor plaatsaanduiding zijn 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 en volumeBarHandle_mc. Het gedeelte dat een nieuwe kleur krijgt wanneer u een skinkleur selecteert, wordt border_mc genoemd.

Het is niet van belang welke clip wordt gebruikt voor een besturingselement. Over het algemeen wordt voor knoppen de clip voor de normale toestand gebruikt. Voor overige besturingselementen wordt de clip voor het betreffende besturingselement gebruikt, maar dit is alleen voor het gemak. De enige belangrijke onderdelen zijn de posities x (horizontaal) en y (verticaal) en de hoogte en breedte van de plaatsaanduiding.

Naast de standaardbesturingselementen kunt u zo veel aanvullende clips gebruiken als u wenst. De enige vereiste voor deze clips is dat voor de bijbehorende bibliotheeksymbolen de optie Exporteren voor ActionScript in het dialoogvenster Koppelingseigenschappen is geselecteerd. Aangepaste clips in de lay-outlaag kunnen elke instantienaam hebben, behalve de gereserveerde instantienamen die hiervoor zijn opgesomd. Een instantienaam is alleen nodig om ActionScript in de clips in te stellen om de lay-out te bepalen.

De clip border_mc is bijzonder. Wanneer u de eigenschap FlvPlayback.skinAutoHide op true instelt, wordt de skin weergegeven wanneer de muisaanwijzer zich boven de clip border_mc bevindt. Dit is belangrijk voor skins die buiten de grenzen van de videospeler worden weergegeven. Zie voor informatie over de eigenschap skinAutoHide Het gedrag van een skin aanpassen .

In de Flash-bestanden (FLA) wordt border_mc gebruikt voor chroom en voor de randen rondom de knoppen Vorige en Volgende.

De clip border_mc is ook het gedeelte van de skin waarvan de alpha en kleur worden gewijzigd door de eigenschappen skinBackgroundAlpha en skinBackgroundColor . Wanneer u aanpasbare kleur en alpha wilt toestaan, moet de ActionScript-code in het FLA-bestand met skin het volgende bevatten: 

border_mc.colorMe = true;

ActionScript en skinlay-out

De ActionScript-code hieronder is algemeen van toepassing op alle besturingselementen. Sommige besturingselementen hebben specifieke ActionScript die aanvullend gedrag definieert. Dit wordt beschreven in de sectie voor het  betreffende besturingselement.

Het begin van de ActionScript-code bestaat uit een groot gedeelte waarin de klassenamen voor elke status van elke component worden opgegeven. Deze klassenamen bevinden zich alle in het bestand SkinOverAll.fla. Voor de knoppen Pauzeren en Afspelen ziet de code er bijvoorbeeld als volgt uit: 

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";

De klassenamen hebben geen werkelijke externe klassebestanden en worden alleen opgegeven in het dialoogvenster Koppelingseigenschappen voor alle filmclips in de bibliotheek.

In de ActionScript 2.0-component waren er filmclips in het werkgebied die werkelijk werden gebruikt bij uitvoering. In de ActionScript 3.0-component zijn deze filmclips nog steeds in het FLA-bestand opgenomen, maar alleen om het bewerken ervan te vergemakkelijken. Deze clips bevinden zich nu in geleidelagen en worden niet geëxporteerd. Alle skinelementen in de bibliotheek zijn ingesteld om te worden geëexporteerd op het eerste frame en worden dynamisch gemaakt met bijvoorbeeld de volgende code: 

new fl.video.skin.PauseButtonDisabled();

Na dit gedeelte volgt ActionScript-code die de minimale breedte en hoogte voor de skin definieert. In het dialoogvenster Skin selecteren worden deze waarden weergegeven en deze worden gebruikt bij uitvoering om te voorkomen dat de skin kleiner wordt geschaald dan de minimale grootte. Wanneer u geen minimale grootte wilt opgeven, laat u deze ongedefinieerd of stelt u deze in op kleiner dan of gelijk aan nul. 

// 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;

Op elke plaatsaanduiding kunnen de volgende eigenschappen worden toegepast:

Eigenschap

Beschrijving

anchorLeft

Boolean. Plaatst het besturingselement ten opzichte van de linkerkant van de instantie FLVPlayback. De standaardwaarde is true , tenzij anchorRight expliciet wordt ingesteld op true . In dat geval is de standaardwaarde false ..

anchorRight

Boolean. Plaatst het besturingselement ten opzichte van de rechterkant van de instantie FLVPlayback. De standaardwaarde is false .

anchorBottom

Boolean. Plaatst het besturingselement ten opzichte van de onderkant van de instantie FLVPlayback. De standaardwaarde is true , tenzij anchorTop expliciet wordt ingesteld op true . In dat geval is de standaardwaarde false .

anchorTop

Boolean. Plaatst het besturingselement ten opzichte van de bovenkant van de instantie FLVPlayback. De standaardwaarde is false .

Wanneer de eigenschappen anchorLeft en anchorRight beide true zijn, wordt het besturingselement horizontaal geschaald bij uitvoering. Wanneer de eigenschappen anchorTop en anchorBottom beide true zijn, wordt het besturingselement verticaal geschaald bij uitvoering.

Wanneer u de effecten van deze eigenschappen wilt zien, kunt u kijken naar het gebruik ervan in de Flash-skins. De besturingselementen voor bufferbalk en zoekbalk zijn de enige met schaling. Deze worden boven elkaar geplaatst en voor beide zijn de eigenschappen anchorLeft en anchorRight ingesteld op true . Voor alle besturingselementen aan de linkerkant van de bufferbalk en zoekbalk is anchorLeft ingesteld op true en voor alle besturingselementen aan de rechterkant is anchorRight ingesteld op true . Voor alle besturingselementen is anchorBottom ingesteld op true .

U kunt proberen de filmclips in de lay-outlaag te bewerken om een skin te maken waar de besturingselementen zich aan de bovenkant bevinden in plaats van aan de onderkant. U hoeft alleen de besturingselementen aan de bovenkant te verplaatsen ten opzichte van video_mc en anchorTop in te stellen op true voor alle besturingselementen.

Bufferbalk

De bufferbalk heeft twee filmclips: bufferingBar_mc en bufferingBarFill_mc. De positie in het werkgebied van elk van beide clips ten opzichte van de andere clip is van belang aangezien deze relatieve plaatsing wordt behouden. De bufferbalk gebruikt twee afzonderlijke clips omdat de component wel bufferingBar_mc schaalt, maar niet bufferingBarFill_mc.

Op de clip bufferingBar_mc wordt 9-delige schaling toegepast, dus de randen worden niet vervormd tijdens het schalen. De clip bufferingBarFill_mc is zeer breed, zodat deze altijd breed genoeg is en schalen niet nodig is. De clip wordt bij uitvoering automatisch gemaskeerd zodat alleen het gedeelte boven de uitgerekte bufferingBar_mc wordt weergegeven. De exacte afmetingen van het masker houden standaard links en rechts een gelijke marge aan binnen bufferingBar_mc, op basis van het verschil tussen de x -posities (horizontaal) van bufferingBar_mc en bufferingBarFill_mc. U kunt de plaatsing aanpassen met ActionScript-code.

Wanneer uw bufferbalk niet hoeft te schalen of geen 9-delige schaling gebruikt, kunt u deze instellen zoals de aangepaste UI-component bufferbalk van FLVPlayback. Zie component BufferingBar voor meer informatie.

De bufferbalk heeft de volgende aanvullende eigenschap:

Eigenschap

Beschrijving

fill_mc:MovieClip

Geeft de instantienaam aan van de vulling van de bufferbalk. De standaardwaarde is bufferingBarFill_mc.

Zoekbalk en volumebalk

De zoekbalk heeft ook twee filmclips: seekBar_mc en seekBarProgess_mc. De positie in de lay-outlaag van elk van beide clips ten opzichte van de andere clip is van belang aangezien deze relatieve plaatsing wordt behouden. Hoewel beide clips kunnen schalen, kan seekBarProgress_mc niet worden genest binnen seekBar_mc, aangezien seekBar_mc 9-delige schaling gebruikt, wat niet goed werkt met geneste filmclips.

Op de clip seekBar_mc wordt 9-delige schaling toegepast, dus de randen worden niet vervormd tijdens het schalen. De clip seekBarProgress_mc schaalt ook, maar deze kan vervormen. De clip gebruikt geen 9-delige schaling aangezien deze een vulling is, die er goed uitziet wanneer deze wordt vervormd.

De clip seekBarProgress_mc werkt zonder fill_mc, op nagenoeg dezelfde manier als een clip progress_mc clip in aangepaste UI-componenten van FLVPlayback. Met andere woorden, de clip wordt niet gemaskeerd en wordt horizontaal geschaald. De exacte afmetingen van seekBarProgress_mc op 100% worden gedefinieerd door linker- en rechtermarges binnen de clip seekBarProgress_mc. Deze afmetingen zijn standaard gelijk aan elkaar en gebaseerd op het verschil tussen de x -posities (horizontaal) van seekBar_mc en seekBarProgress_mc. U kunt de afmetingen met ActionScript aanpassen in de filmclip van de zoekbalk, zoals wordt getoond in het volgende voorbeeld: 

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;

U kunt deze code plaatsen op de tijdlijn van de filmclip van de zoekbalk, of samen met de overige ActionScript-code op de hoofdtijdlijn. Wanneer u aanpassingen aanbrengt met code in plaats van de lay-out te wijzigen, hoeft de vulling zich niet in het werkgebied te bevinden. Deze moet zich alleen in de bibliotheek bevinden en zijn ingesteld op Exporteren voor ActionScript in frame 1 met de juiste klassenaam.

Net als met de aangepaste UI-component SeekBar van FLVPlayback, is het mogelijk om een volheidsfilmclip voor de zoekbalk te maken. Wanneer uw zoekbalk niet hoeft te schalen, of wel schaalt, maar geen 9-delige schaling gebruikt, kunt u progress_mc of fullness_mc zo instellen dat deze gebruikmaakt van een van de methoden die worden gebruikt voor aangepaste UI-componenten van FLVPlayback. Zie Filmclips voor voortgang en volheid voor meer informatie.

Aangezien de volumebalk in de Flash-skins niet schaalt, is deze op dezelfde manier opgebouwd als de aangepaste UI-component volumebalk van FLVPlayback. Zie De componenten SeekBar en VolumeBar voor meer informatie. De uitzondering is dat de greep anders is geïmplementeerd.

Grepen van zoekbalk en volumebalk

De grepen van de zoekbalk en volumebalk zijn op de lay-outlaag naast de balk geplaatst. De waarden voor de linkermarge, rechtermarge en y -as van de greep worden standaard ingesteld door de positie ten opzichte van de filmclip van de balk. De linkermarge wordt ingesteld door het verschil tussen de x -locatie (horizontaal) van de greep en de x -locatie (horizontaal) van de balk. De rechtermarge is gelijk aan de linkermarge. U kunt deze waarden aanpassen met ActionScript in de filmclip voor de zoekbalk of volumebalk. Het volgende voorbeeld bevat dezelfde ActionScript-code die wordt gebruikt met de aangepaste UI-componenten van FLVPlayback: 

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

U kunt deze code plaatsen op de tijdlijn van de filmclip van de zoekbalk, of samen met de overige ActionScript-code op de hoofdtijdlijn. Wanneer u aanpassingen aanbrengt met code in plaats van de lay-out te wijzigen, hoeft de greep zich niet in het werkgebied te bevinden. Deze moet zich alleen in de bibliotheek bevinden en zijn ingesteld op Exporteren voor ActionScript in frame 1 met de juiste klassenaam.

Buiten deze eigenschappen zijn grepen eenvoudige filmclips, die op dezelfde manier worden ingesteld als in de aangepaste UI-componenten van FLVPlayback. Beide hebben een rechthoekige achtergrond met de eigenschap alpha ingesteld op 0. Deze is alleen aanwezig om het raakgebied te vergroten en is niet verplicht.

Achtergrond- en voorgrondclips

De filmclips chrome_mc en forwardBackBorder_mc zijn geïmplementeerd als achtergrondclips.

Van de filmclips ForwardBackBorder, ForwardBorder en BackBorder in het werkgebied en de plaatsaanduidingen voor de knoppen Vorige en Volgende, is ForwardBackBorder het enige onderdeel dat zich niet op een geleidelaag bevindt. Dit bevindt zich alleen in de skins die werkelijk gebruikmaken van de knoppen Vorige en Volgende.

De enige vereiste voor deze clips is dat deze zijn ingesteld op Exporteren voor ActionScript in frame 1 in de bibliotheek.