En komponents utseende består av grafiska element, till exempel en kontur, en fyllningsfärg, ikoner och till och med andra komponenter. En ComboBox innehåller till exempel en List-komponent och en List-komponent innehåller en ScrollBar. Tillsammans utgör de grafiska elementen utseendet på ComboBox. Men en komponents utseende ändras beroende på dess läge. En CheckBox utan etikett ser till exempel ut ungefär så här när den visas i ett program:
En CheckBox i normalt upp-läge
Om du klickar håller ned musknappen ovanför CheckBox ändras utseendet och den ser ut så här:
En CheckBox i ned-läge
Och när du släpper musknappen återgår CheckBox till det ursprungliga utseendet, men har en bock för att visa att den har markerats.
En CheckBox i markerat läge
De ikoner som representerar komponenten i de olika lägena kallas tillsammans för komponentens
skal.
Du kan ändra en komponents utseende i ett läge eller alla lägen genom att redigera skalen i Flash, precis som du gör med andra Flash-symboler. Du kommer åt en komponents skal på två sätt. Det enklaste är att dra komponenten till scenen och dubbelklicka på den. Då öppnas en palett med komponentens skal, och den ser ut ungefär så här för en CheckBox.
En CheckBoxs skal
Du kan också komma åt en komponents skal individuellt från panelen Bibliotek. När du drar en komponent till scenen kopierar du den också till biblioteket, tillsammans med en mapp med komponentens resurser och alla andra komponenter som den innehåller. Om du till exempel drar en ComboBox till scenen innehåller även panelen Bibliotek komponenterna List, ScrollBar och TextInput, som är inbyggda i ComboBox, tillsammans med en mapp med skal för var och en av komponenterna, samt en mapp med delade resurser som innehåller element som de här komponenterna delar. Du kan redigera skala för alla dessa komponenter genom att öppna deras skalmappar (ComboBoxSkins, ListSkins, ScrollBarSkins och TextInputSkins) och dubbelklicka på ikonen för skalet som du vill redigera. Om du till exempel dubbelklickar på ComboBox_downSkin öppnas skalet i symbolredigeringsläge. Se följande bild:
ComboBox_downSkin
Skapa ett nytt skal
Om du vill skapa ett nytt utseende på en komponent i ett dokument redigerar du komponentens skal så att de ändrar utseende. Om du vill komma åt en komponents skal dubbelklickar du på komponenten på scenen, så öppnas en palett med skalen. Sedan dubbelklickar du på det skal som du vill redigera, så öppnas det i symbolredigeringsläge. Om du till exempel dubbelklickar på TextArea-komponenten på scenen så öppnas dess resurser i symbolredigeringsläge. Ställ in zoomkontrollen på 400 %, eller mer om du vill, och redigera symbolen för att ändra dess utseende. När du är klar påverkar ändringen alla förekomster av komponenten i dokumentet. Du kan också dubbelklicka på ett visst skal i bibliotekspanelen för att öppna det på scenen i symbolredigeringsläge.
Du kan ändra komponentskal på följande sätt:
Skapa ett skal för alla förekomster
När du redigerar en komponents skal ändrar du som standard komponentens utseende för alla dess förekomster i dokumentet. Om du vill skapa olika utseenden för samma komponent måste du duplicera skalen som du vill ändra och ge dem olika namn, redigera dem och sedan ställa in stilar för att använda dem. Mer information finns i
Skapa skal för vissa förekomster
.
I det här kapitlet beskrivs hur du ändrar ett eller flera skal för var och en av användargränssnittskomponenterna (UI). Om följer en av de här procedurerna för att ändra ett eller flera skal för en UI-komponent ändrar du dem för alla förekomster i dokumentet.
Skapa skal för vissa förekomster
Du kan skapa ett skal för vissa förekomster av en komponent med följande allmänna procedur:
-
Markera skalet i komponentens resursmapp i bibliotekspanelen.
-
Duplicera skalet och tilldela det ett unikt klassnamn.
-
Redigera skalet så att det får utseende som du vill ha.
-
Anropa metoden
setStyle()
för komponentförekomsten för att tilldela det nya skalet skalstilen.
Följande procedur skapar ett nytt selectedDownSkin för en av två Button-förekomster.
-
Skapa ett nytt Flash-fildokument (ActionScript 3.0).
-
Dra två Buttons från panelen Komponenter till scenen och ge dem förekomstnamnen
aButton
och
bButton
.
-
Öppna bibliotekspanelen och sedan mapparna Component Assets och ButtonSkins som finns i bibliotekspanelen.
-
Klicka på selectedDownSkin för att markera det.
-
Högerklicka så att snabbmenyn visas. Välj Duplicera.
-
I dialogrutan Duplicera symbol ger du skalet ett unikt namn, till exempel
Button_mySelectedDownSkin
. Sedan klickar du på OK.
-
I mappen Library > Component Assets > ButtonSkins i biblioteket markerar du Button_mySelectedDownSkin och högerklickar för att öppna snabbmenyn. Välj Länkning så öppnas dialogrutan Länkningsegenskaper.
-
Klicka i rutan Exportera för ActionScript. Låt kryssrutan Exportera i första bildrutan vara markerad och se till att klassnamnet är unikt. Klicka på OK, och klicka sedan på OK igen när ett varningsmeddelande visas om att ingen klassdefinition kan hittas och att en klassdefinition kommer att skapas.
-
Dubbelklicka på skalet Button_mySelectedDownSkin i panelen Bibliotek för att öppna det i symbolredigeringsläge.
-
Klicka på den blå fyllningen i mitten av skalet tills färgen visas i fyllningsfärgväljaren i egenskapsinspektören. Klicka på färgväljaren och välj färgen #00CC00 för skalets fyllning.
-
Klicka på knappen Tillbaka till vänster om redigeringsfältet ovanför scenen för att återgå till dokumentredigeringsläge.
-
I egenskapsinspektören klickar du på fliken Parametrar för varje knapp och ställer in värdet
true
för växlingsparametern.
-
Lägg till följande kod i åtgärdspanelen i den första bildrutan på tidslinjen:
bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin);
bButton.setStyle("downSkin", Button_mySelectedDownSkin);
-
Välj Kontroll > Testa filmen.
-
Klicka på varje knapp. Observera att ned-skalet (markerat och omarkerat) för objektet bButton använder den nya skalsymbolen.
