|
Você pode transformar um componente NumericStepper horizontal e verticalmente, durante a autoria e em tempo de execução. Durante a autoria, selecione o componente no Palco e use a ferramenta Transformação livre ou qualquer um dos comandos Modificar > Transformar. Em tempo de execução, use o método
setSize()
ou qualquer propriedade ou método aplicável da classe NumericStepper, como
width
,
height
,
scaleX
e
scaleY
.
Redimensionar o componente NumericStepper não altera a largura dos botões de seta para cima e para baixo. Se o seletor é redimensionado de forma a tornar-se maior do que a altura padrão, o comportamento padrão inclui os botões de seta nas partes superior e inferior do componente. Caso contrário, o dimensionamento de 9 fatias determina como os botões são desenhados. Os botões de seta sempre aparecem à direita da caixa de texto.
Os estilos e o componente NumericStepper
Você pode definir as propriedades de estilo do componente NumericStepper para alterar sua aparência. Os estilos especificam valores para as capas, o preenchimento e o formato de texto do componente quando ele é desenhado. O estilo
textFormat
permite alterar o tamanho e a aparência do valor do NumericStepper. Os diversos estilos de capas permitem especificar diferentes classes a serem usadas com a capa. Para obter mais informações sobre o uso de estilos de capa, consulte
Sobre capas
.
Este procedimento usa o estilo
textFormat
para alterar a aparência do valor exibido por NumericStepper.
-
Crie um novo documento Flash (ActionScript 3.0).
-
Arraste o componente NumericStepper do painel de componentes para o Palco e atribua a ele um nome de ocorrência de
myNs
.
-
Adicione o seguinte código ao painel Ações no Quadro 1 da Linha do tempo principal:
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);
-
Selecione Controlar > Testar filme.
As capas e o componente NumericStepper
O componente NumericStepper tem capas que representam os estados ativo, pressionado, desativado e selecionado de seus botões.
Se um seletor está ativado, os botões para cima e para baixo exibem seus estados de mouse acima quando o ponteiro se move sobre eles. Os botões exibem seu estado pressionado quando são pressionados. Os botões retornam ao estado de mouse acima quando o botão do mouse é solto. Se o ponteiro é movido para fora dos botões enquanto o mouse é pressionado, os botões retornam ao estado original.
Se um seletor está desativado, exibe seu estado desativado, independentemente da interação do usuário.
Um componente NumericStepper tem as seguintes capas:
-
Crie um novo arquivo FLA.
-
Arraste o componente NumericStepper para o Palco.
-
Defina o controle de zoom como 400% para ampliar a imagem para edição.
-
Clique duas vezes no plano de fundo da capa TextInput, no painel de capas, até que você alcance o nível de Grupo e a cor do plano de fundo apareça no Seletor de cor de preenchimento, no Inspetor de propriedades.
-
Usando o Seletor de cor de preenchimento, no Inspetor de propriedades, selecione a cor #9999FF para aplicá-la ao plano de fundo da capa TextInput.
-
Clique no botão Voltar, do lado esquerdo da barra de edição acima do Palco, para voltar ao modo de edição de documento.
-
Clique duas vezes no NumericStepper novamente para reabrir o painel de capas.
-
Clique duas vezes no plano de fundo do botão de seta para cima, no grupo Up, até que o plano de fundo seja selecionado e sua cor apareça no Seletor de cor de preenchimento, no Inspetor de propriedades.
-
Selecione a cor #9966FF para aplicá-la ao plano de fundo do botão de seta para cima.
-
Repita as etapas 8 e 9 para a seta para baixo no grupo Up.
-
Selecione Controlar > Testar filme.
A ocorrência de NumericStepper deverá aparecer como mostrada na ilustração a seguir:
|
|
|
