De component NumericStepper aanpassen

U kunt een component NumericStepper horizontaal en verticaal aanpassen tijdens het ontwerpen en bij uitvoering. Selecteer tijdens het ontwerpen de component in het werkgebied en gebruik het gereedschap Vrije transformatie of een van de opdrachten Wijzigen > Transformeren. Bij uitvoering kunt u de methode setSize() of alle toepasselijke eigenschappen van de klasse NumericStepper gebruiken, zoals width , height , scaleX en scaleY .

Het wijzigen van de grootte van de component NumericStepper verandert de breedte van de pijltoetsen omhoog en omlaag niet. Als de grootte van de stapfunctie groter wordt dan de standaardhoogte, zet het standaardgedrag de pijltoetsen vast aan de boven- en onderkant van de component. Anders bepaalt 9-delige schaling hoe de knoppen worden getekend. De pijlknoppen worden altijd rechts van het tekstvak weergegeven.

Stijlen en de component NumericStepper

U kunt de stijleigenschappen van de component NumericStepper instellen om de weergave te wijzigen. De stijlen geven waarden op voor de skins, opvulling en tekstopmaak van de component wanneer de component wordt getekend. Met de stijl textFormat kunt u de grootte en weergave van de waarde van de NumericStepper wijzigen. Met de verschillende stijlen van skins kunt u verschillende klassen opgeven die de skin kan gebruiken. Zie Skins voor meer informatie over het gebruik van skinstijlen.

In deze procedure wordt de stijl textFormat gebruikt om de weergave te wijzigen van de waarde die de NumericStepper weergeeft.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component NumericStepper van het deelvenster Componenten naar het werkgebied en geef deze de instantienaam myNs .

  3. Voeg de volgende code toe aan het deelvenster Handelingen in frame 1 van de hoofdtijdlijn:

    var tf:TextFormat = new TextFormat(); 
    myNs.setSize(100, 50); 
    tf.color = 0x0000CC; 
    tf.size = 24; 
    tf.font = "Arial"; 
    tf.align = "center"; 
    myNs.setStyle("textFormat", tf);
  4. Selecteer Besturing > Film testen.

Stijlen en de component NumericStepper

De component NumericStepper heeft skins die de toestanden Omhoog, Omlaag, Uitgeschakeld en Geselecteerd van zijn knoppen vertegenwoordigen.

Wanneer een stapfunctie is ingeschakeld, geven de knoppen Omlaag en Omhoog de toestand Boven weer als de muisaanwijzer erover beweegt. De knoppen geven hun toestand Omlaag weer wanneer ze worden ingedrukt. De knoppen keren terug naar de toestand Boven wanneer de muis wordt losgelaten. Wanneer de aanwijzer van de knoppen af beweegt, terwijl de muis is ingedrukt, keren de knoppen terug naar hun oorspronkelijke toestand.

Wanneer een stapfunctie is uitgeschakeld, wordt de uitgeschakelde toestand weergegeven, ongeacht gebruikersinteractie.

Een component NumericStepper bevat de volgende skins:

Afbeelding groot weergeven
Skins voor een NumericStepper
  1. Maak een nieuw FLA-bestand.

  2. Sleep de component NumericStepper naar het werkgebied.

  3. Stel het zoombesturingselement op 400% in om de afbeelding te vergroten voor bewerking.

  4. Dubbelklik op de achtergrond van de skin TextInput in het deelvenster met skins tot u doordringt tot het groepsniveau en de achtergrondkleur wordt weergegeven in kleurkiezer voor de vulkleur in Eigenschapcontrole.

  5. Selecteer met de kleurkiezer voor de vulkleur in Eigenschapcontrole de kleur #9999FF om deze op de achtergrond van de skin TextInput toe te passen.

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

  7. Dubbelklik opnieuw op de NumericStepper om het deelvenster met skins te openen.

  8. Dubbelklik op de achtergrond van de pijlknop Omhoog in de groep Omhoog totdat de achtergrond is geselecteerd en de kleur ervan wordt weergegeven in de kleurkiezer voor de vulkleur in Eigenschapcontrole.

  9. Selecteer kleur #9966FF om deze op de achtergrond van de pijltoets Omhoog toe te passen.

  10. Herhaal de stappen 8 en 9 voor pijl Omlaag in de groep Omhoog.

  11. Selecteer Besturing > Film testen.

    De instantie NumericStepper wordt weergegeven, zoals in de volgende afbeelding wordt getoond:

    NumericStepper met aangepaste achtergrond en knoppen