Skins

De weergave van een component wordt samengesteld van grafische elementen zoals omtrek, vulling en zelfs andere componenten. Een ComboBox, bijvoorbeeld bevat een component List en een component List bevat een UIScrollBar. De grafische elementen vormen samen de weergave van de ComboBox. De weergave van een component wisselt echter op basis van de huidige toestand. Een CheckBox ziet er bijvoorbeeld zonder label ongeveer zo uit wanneer het in uw toepassing wordt weergegeven:

CheckBox in normale toestand (Omhoog)
Een CheckBox in de normale toestand (Omhoog)

Als u op de muisknop klikt en deze ingedrukt houdt op de CheckBox, verandert de weergave als volgt:

CheckBox in de ingedrukte toestand (Omlaag)
Een CheckBox in de ingedrukte toestand (Omlaag)

En wanneer u de muisknop loslaat, keert de CheckBox terug naar de oorspronkelijke weergave, maar nu met een vinkje om te tonen dat deze is geselecteerd.

CheckBox in de geselecteerde toestand
Een CheckBox in de geselecteerde toestand

De pictogrammen die de component in de verschillende toestanden vertegenwoordigen, worden gezamenlijk zijn skins genoemd. U kunt de weergave van een component wijzigen in een of meer toestanden door de skins in Flash te bewerken zoals u dat met elk Flash-symbool kunt doen. U hebt op twee manieren toegang tot de skins van een component. De eenvoudigste manier is om het component naar het werkgebied te slepen erop te dubbelklikken. Dit opent een palet met de skins van de component, die er voor een CheckBox als volgt uitziet.

De skins van een CheckBox

U hebt toegang tot de afzonderlijke skins van een component via het deelvenster Bibliotheek. Wanneer u een component naar het werkgebied sleept, kopieert u deze ook naar de Bibliotheek, samen met een map met zijn elementen en eventuele andere componenten die het bevat. Als u een ComboBox dus naar het werkgebied sleept, bevat het deelvenster Bibliotheek ook de componenten List, ScrollBar en TextInput, die in de ComboBox zijn ingebouwd, een map met skins voor elk van deze componenten en een map Shared Assets die elementen bevat die deze componenten delen. U kunt de skins voor elk van deze componenten bewerken door zijn map skins te openen (ComboBoxSkins, ListSkins, ScrollBarSkins of TextInputSkins) en te dubbelklikken op het pictogram van de skin die u wilt bewerken. Dubbelklikken op ComboBox_downSkin opent bijvoorbeeld de skin in symboolbewerkmodus, zoals in de volgende afbeelding wordt getoond:

ComboBox_downSkin in symboolbewerkmodus
De ComboBox_downSkin

Een nieuwe skin maken

Als u een nieuw uiterlijk voor een component in uw document wilt maken, kunt u de skins van de component bewerken om de weergave te wijzigen. U kunt dubbelklikken op het component in het werkgebied om een palet van zijn skins te openen. Vervolgens dubbelklikt u op de skin die u wilt bewerken om het te openen in symboolbewerkmodus. Dubbelklik bijvoorbeeld op de component TextArea in het werkgebied om zijn elementen in symboolbewerkmodus te openen. Stel het zoombesturingselement in op 400%, of hoger als u dat wilt, en bewerk het symbool om het uiterlijk te wijzigen. Als u klaar bent, is de wijziging van toepassing op alle instanties van de component in het document. U kunt ook dubbelklikken op een bepaalde skin in het deelvenster Bibliotheek om deze in symboolbewerkmodus te openen in het werkgebied.

U kunt de skin van een component als volgt wijzigen:

  • Maak een nieuwe skin voor alle instanties

  • Maak nieuwe skins voor enkele instanties

Een skin maken voor alle instanties

Wanneer u de skin van een component bewerkt, wijzigt u standaard de weergave van een component voor alle instanties ervan in het document. Als u verschillende weergaven voor dezelfde component wilt maken, moet u de skins die u wilt wijzigen dupliceren en ze verschillende namen geven, ze bewerken en vervolgens de juiste stijlen instellen om toe te passen. Zie Skins maken voor enkele instanties voor meer informatie.

In dit hoofdstuk wordt beschreven hoe u één of meer skins voor elk van de UI-componenten kunt wijzigen. Als u een van deze procedures volgt om één of meer skins van een UI-component te wijzigen, wijzigt u deze voor alle instanties in het document.

Skins maken voor enkele instanties

U kunt een skin maken voor enkele instanties van een component met behulp van de volgende algemene procedure:

  • Selecteer de skin in de map Elementen van de component in het deelvenster Bibliotheek.

  • Dupliceer de skin en wijs er een unieke klassenaam aan toe.

  • Bewerk de skin om deze de weergave te geven die u wilt.

  • Roep de methode setStyle() aan voor de componentinstantie om de nieuwe skin aan de skinstijl toe te wijzen.

De volgende procedure maakt een nieuwe selectedDownSkin voor één of twee instanties Button.

  1. Maak een nieuw document van het type Flash-bestand (ActionScript 3.0).

  2. Sleep twee Buttons van het deelvenster Componenten naar het werkgebied en geef ze de instantienamen aButton en bButton .

  3. Open het deelvenster Bibliotheek en open vervolgens de mappen Component Assets en ButtonSkins in het deelvenster.

  4. Klik op de skin selectedDownSkin om deze te selecteren.

  5. Klik met de rechtermuisknop om het contextmenu te openen en selecteer Dupliceren.

  6. Geef de nieuwe skin een unieke naam in het dialoogvenster Symbool dupliceren, bijvoorbeeld Button_mySelectedDownSkin . Klik vervolgens op OK.

  7. Selecteer Button_mySelectedDownSkin in Bibliotheek > Component Assets > ButtonSkins en klik met de rechtermuisknop om het contextmenu te openen. Selecteer Koppeling om het dialoogvenster Koppelingseigenschappen te openen.

  8. Schakel het selectievakje Exporteren voor ActionScript in. Houdt het selectievakje Exporteren in eerste frame geselecteerd en zorg dat de klassenaam uniek is. Klik op OK en nogmaals op OK bij de waarschuwing dat geen klassedefinitie kan worden gevonden en dat er een wordt gemaakt.

  9. Dubbelklik op de skin Button_mySelectedDownSkin in het deelvenster Bibliotheek om deze in symboolbewerkmodus te openen.

  10. Klik op de blauwe vulling in het midden van de skin tot de kleur in de kleurkiezer voor de vulkleur in Eigenschapcontrole wordt weergegeven. Klik op de kleurkiezer en selecteer kleur #00CC00 voor de skinvulling.

  11. Klik op de knop Terug links van de bewerkbalk boven in het werkgebied om terug te gaan naar de documentbewerkmodus.

  12. Klik in de Eigenschapcontrole op het tabblad Parameters voor elke knop en stel de schakelparameter in op true .

  13. Voeg de volgende code toe aan het deelvenster Handelingen in frame 1 van de tijdlijn: 

    bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin); 
bButton.setStyle("downSkin", Button_mySelectedDownSkin);

  14. Selecteer Besturing > Film testen.

  15. Klik op elke knop De skin voor Omlaag (geselecteerd en niet geselecteerd) voor het object bButton gebruikt het nieuwe skinsymbool.