|
Du kan omforma en Button-komponent vågrätt och lodrätt under utvecklingen och vid körning. Under utvecklingen markerar du komponenten på scenen och använder verktyget Omforma fritt eller något av kommandona på menyn Ändra > Omforma. Vid körning använder du metoden
setSize()
eller tillämpliga egenskaper i Button-klassen, t.ex.
height
,
width
,
scaleX
och
scaleY
.
Om du ändrar storleken på knappen förblir ikonens eller etikettens storlek densamma. Begränsningsramen för en Button motsvarar dess kantlinje och anger också förekomstens träffområde. Om du ökar förekomstens storlek ökar du också träffområdets storlek. Om begränsningsramen är för liten för etiketten beskärs etiketten så att den passar.
Om en Button har en ikon och den är större än knappen, sträcker sig ikonen utanför kantlinjerna för Button.
Använda format med komponenten Button
En Buttons stil anger vanligtvis värden för dess skal, ikoner, textformatering och utfyllning när komponenten ritas i sina olika lägen.
Följande procedur placerar två Buttons på scenen och ställer in värdet
true
för egenskapen
emphasized
för båda Buttons när användaren klickar på en av dem. Stilen
emphasizedSkin
för den andra Button anges till stilen
selectedOverSkin
när användaren klickar på den, så de två Buttons visar olika skal för samma läge.
-
Skapa en Flash-fil (ActionScript 3.0).
-
Dra två Buttons till scenen, en åt gången, och ge dem förekomstnamnen
aBtn
och
bBtn
. På fliken Parametrar i egenskapsinspektören ger du dem etiketterna Button A och Button B.
-
Lägg till följande kod i åtgärdspanelen i den första bildrutan på tidslinjen:
bBtn.emphasized = true;
aBtn.emphasized = true;
bBtn.addEventListener(MouseEvent.CLICK, Btn_handler);
function Btn_handler(evt:MouseEvent):void {
bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin");
}
-
Välj Kontroll > Testa filmen.
-
Klicka på en av knapparna för att se vilken effekt stilen
emphasizedSkin
har på varje knapp.
Använda skal med komponenten Button
Komponenten Button använder följande skin som motsvarar dess olika lägen. Om du vill redigera ett eller flera skal för att ändra utseendet på Button dubbelklickar du på Button-förekomsten på scenen för att öppna en palett med skalen. Se bilden nedan:
Button-skal
Om en knapp är aktiverad visas dess över-läge när du rör pekaren över den. Knappen får inmatningsfokus och visar sitt ned-läge när du klickar på den. Knappen återgår till sitt över-läge när du släpper musknappen. Om pekaren flyttas bort från knappen medan du håller ned musknappen, återgår knappen till det ursprungliga läget. Om växlingsparametern har värdet
true
visas det nedtryckta, eller klickade, läget med selectedDownSkin, upp-läget med selectedUpSkin och över-läget med selectedOverSkin.
Om en Button är inaktiverad visas dess inaktiverade läge, oavsett användarinteraktion.
Om du vill redigera något av skalen dubbelklickar du på det för att öppna det i symbolredigeringsläge, som på följande bild:
Button i symbolredigeringsläge
Nu kan du använda utvecklingsverktygen i Flash för att redigera skalet.
Med följande procedur ändras färgen på skalet selected_over för en Button.
-
Skapa en ny Flash-fil (ActionScript 3.0).
-
Dra en Button från panelen Komponenter till scenen. På fliken Parametrar anger du värdet
true
för växlingsparametern.
-
Dubbelklicka på Button för att öppna paletten med dess skal.
-
Dubbelklicka på skalet selected_over för att öppna det i symbolredigeringsläge.
-
Ställ in zoomkontrollen på 400% för att förstora ikonen för redigering.
-
Dubbelklicka på bakgrunden tills dess färg visas i fyllningsfärgväljaren i egenskapsinspektören.
-
Välj färgen #CC0099 i fyllningsfärgväljaren för att använda den på bakgrunden till skalet selected_over.
-
Klicka på knappen Tillbaka till vänster om redigeringsfältet ovanför scenen för att återgå till dokumentredigeringsläge.
-
Välj Kontroll > Testa filmen.
-
Klicka på knappen för att ställa den i markerat läge.
När du rör muspekaren över knappen ska skalet selected_over visas på samma sätt som på följande bild.
Button som visar skalet selected_over med ändrad färg
|
|
|
