Ställa in stilar

En komponents stil anger vanligtvis värden för dess skal, ikoner, textformatering och utfyllning när Flash ritar komponenten i olika lägen. Flash ritar till exempel en Button med ett annat skal för att visa dess ned-läge, som inträffar när du klickar med musknappen på den, än skalet som används för att visa upp-läget eller det normala läget. Ett annat skal används också för att visa att knappen är i inaktiverat läge, vilket inträffar när egenskapen enabled har värdet false.

Du kan ställa in stilar för komponenter på dokument-, klass- och förekomstnivå. Dessutom kan vissa stilegenskaper ärvas från en överordnad komponent. List-komponenten ärver till exempel ScrollBar-stilar från BaseScrollPane.

Du kan ställa in stilar för att anpassa en komponent på följande sätt:

  • Ställa in stilar för en komponentförekomst. Du kan ändra färg- och textegenskaperna för en enda komponentförekomst. Det är effektivt i vissa situationer, men det kan vara tidsödande om du måste ställa in enskilda egenskaper för alla komponenter i ett dokument.

  • Ställa in stilar för alla komponenter av en viss typ i ett dokument. Om du vill ha ett konsekvent utseende på alla komponenter av en viss typ, till exempel alla CheckBoxes eller Buttons i ett dokument, ställer du in stilar på komponentnivå.

    Värdena på stilegenskaperna som ställs in för behållare ärvs av komponenterna i behållaren.

    Flash visar inte ändringar som görs i stilegenskaper när du visar komponenterna på scenen med funktionen direktförhandsvisning.

Förstå stilinställningar

Nedan beskrivs några huvudpunkter om att använda stilar:

Arv
En underordnad komponent är som standard inställd så att den ärver en stil från den överordnade komponenten. Du kan inte ställa in arv för stilar i ActionScript.

Prioritet
Om en komponentstil har ställts in på flera sätt använder Flash den första stilen som den träffar på enligt dess rangordning. Flash letar efter stilar i följande ordning tills ett värde hittas:

  1. Flash letar efter en stilegenskap i komponentförekomsten.

  2. Om stilen är en av de ärvande stilarna letar Flash igenom den överordnade hierarkin för ett ärvt värde.

  3. Flash letar efter stilen i komponenten.

  4. Flash letar efter en global inställning i StyleManager.

  5. Om egenskapen fortfarande inte är definierad har egenskapen värdet undefined .

Komma åt en komponents standardstilar

Du kan komma åt en komponents standardstilar genom att använda den statiska getStyleDefinition() -metoden för komponentklassen. Följande kod hämtar till exempel standardstilarna för ComboBox-komponenten och visar standardvärdena för egenskaperna buttonWidth och downArrowDownSkin : 

import fl.controls.ComboBox; 
var styleObj:Object = ComboBox.getStyleDefinition(); 
trace(styleObj.buttonWidth); // 24 
trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin

Ställa in och få format på en komponentförekomst

Alla förkomster av UI-komponenter kan anropa metoderna setStyle() och getStyle() direkt för att ställa in eller hämta en stil. Följande syntax ställer in en stil och ett värde för en komponentförekomst: 

instanceName.setStyle("styleName", value);

Den här syntaxen hämtar en stil för en komponentförekomst: 

var a_style:Object = new Object(); 
a_style = instanceName.getStyle("styleName");

Observera att metoden getStyle() returnerar typen Object eftersom den kan returnera flera stilar med olika datatyper. Följande kod ställer till exempel in teckensnittsstilen för en TextArea-förekomst ( aTa ) och hämtar den sedan med metoden getStyle() . Exemplet byter ut det returnerade värdet mot ett TextFormat-objekt för att tilldela det till en TextFormat-variabel. Utan bytet skickar kompilatorn ett fel för ett försök att tvinga en Object-variabel till en TextFormat-variabel. 

import flash.text.TextFormat; 
 
var tf:TextFormat = new TextFormat(); 
tf.font = "Georgia"; 
aTa.setStyle("textFormat",tf); 
aTa.text = "Hello World!"; 
var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; 
trace(aStyle.font);

Ställa in textegenskaper med TextFormat

Använd TextFormat-objektet för att formatera text för en komponentförekomst. TextFormat-objektet har egenskaper som gör att du kan ange textegenskaper som bold , bullet , color , font , italic , size , bland andra. Du ställer in de här egenskaperna i TextFormat-objektet och anropar sedan metoden setStyle() för att använda dem på en komponentförekomst. Följande kod ställer till exempel in egenskaperna font , size och bold för ett TextFormat-objekt och använder dem på en Button-förekomst: 

/* Create a new TextFormat object to set text formatting properties. */ 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.size = 16; 
tf.bold = true; 
a_button.setStyle("textFormat", tf);

Bilden nedan visar vilken effekt de här inställningarna har på en knapp med en Submit-etikett:

Button med textFormat-stil använd på etiketten

Stilegenskaper som ställs in för en komponentförekomst med setStyle() har den högsta prioriteten och åsidosätter alla andra stilinställningar. Ju fler egenskaper du ställer in med setStyle() för en komponentförekomst, desto långsammare återges komponenten vid körning.

Ställa in ett format för alla förekomster av en komponent

Du kan ställa in en stil för alla förekomster av en komponentklass med den statiska metoden setComponentStyle() i StyleManager-klassen. Du kan till exempel ställa in att textfärgen ska vara röd för alla Buttons genom att först dra en Button till scenen och sedan lägga till följande ActionScript-kod i åtgärdspanelen på bildruta 1 i tidslinjen: 

import fl.managers.StyleManager; 
import fl.controls.Button; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setComponentStyle(Button, "textFormat", tf);

Alla Buttons som du sedan lägger till på scenen får röda etiketter.

Ställa in en stil för alla komponenter

Du kan ställa in en stil för alla komponenter med den statiska metoden setStyle() i StyleManager-klassen.

  1. Dra en List-komponent till scenen och ge den förekomstnamnet aList .

  2. Dra en Button-komponent till scenen och ge den förekomstnamnet aButton .

  3. Tryck på F9 eller välj Åtgärder på menyn Fönster för att öppna åtgärdspanelen, om den inte är öppen, och ange följande kod i bildruta 1 i tidslinjen för att ställa in textfärgen till röd för alla komponenter: 

    import fl.managers.StyleManager; 
 
var tf:TextFormat = new TextFormat(); 
tf.color = 0xFF0000; 
StyleManager.setStyle("textFormat", tf);

  4. Lägg till följande kod i åtgärdspanelen för att fylla i listan med text. 

    aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true;

  5. Välj Kontroll > Testa filmen eller tryck på Ctrl+Enter för att kompilera koden och testa innehållet. Texten på knappetiketten och i listan ska vara röd.