Personalizar o componente ProgressBar

Você pode transformar um componente ProgressBar 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 as propriedades adequadas da classe ProgressBar, como height , width , scaleX e scaleY .

A ProgressBar tem três capas: uma capa de faixa, uma capa de barra e uma capa indeterminada. Ela usa o dimensionamento de 9 fatias para dimensionar os ativos.

Os estilos e o componente ProgressBar

Você pode definir propriedades de estilo para alterar a aparência de uma ocorrência de ProgressBar. Os estilos de ProgressBar especificam valores para sua capa e seu preenchimento quando o componente é desenhado. O exemplo a seguir aumenta o tamanho de uma ocorrência de ProgressBar e define seu estilo barPadding.

  1. Crie um novo arquivo FLA.

  2. Arraste o componente ProgressBar do painel Componentes para o Palco e atribua a ele um nome de ocorrência de myPb .

  3. No Quadro 1 da Linha do tempo principal, digite o código a seguir no painel Ações:

    myPb.width = 300; 
    myPb.height = 30; 
     
    myPb.setStyle("barPadding", 3);
  4. Selecione Controlar > Testar filme.

    Para obter informações sobre como definir estilos de capas, consulte Sobre capas .

As capas e o componente ProgressBar

O componente ProgressBar usa capas para representar a faixa da barra de progresso, a barra concluída e uma barra indeterminada, conforme mostrado na ilustração a seguir.

Capas de ProgressBar

A barra é inserida sobre a capa de faixa, usando o barPadding para determinar o posicionamento. Os ativos são dimensionados com uso do dimensionamento de 9 fatias.

A barra indeterminada é usada quando a propriedade indeterminate da ocorrência de ProgressBar é definida como true . A capa é redimensionada vertical e horizontalmente para ajustar-se ao tamanho da ProgressBar.

Você pode editar essas capas para alterar a aparência da ProgressBar. O exemplo a seguir altera a cor da barra indeterminada.

  1. Crie um novo arquivo FLA.

  2. Arraste um componente ProgressBar para o Palco e clique nele duas vezes para abrir seu painel de ícones de capa.

  3. Clique duas vezes na capa da barra indeterminada.

  4. Defina o controle de zoom como 400% para ampliar o ícone para edição.

  5. Clique duas vezes em uma das barras diagonais, mantenha pressionada a tecla Shift e clique em cada uma das outras barras. A cor atual aparecerá no Seletor de cor de preenchimento, no Inspetor de propriedades.

  6. Clique no Seletor de cor de preenchimento, no Inspetor de propriedades, para abri-lo e selecionar a cor #00CC00, que será aplicada às barras diagonais selecionadas.

  7. 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.

  8. Selecione Controlar > Testar filme.

    A ProgressBar deverá aparecer como é mostrada na ilustração a seguir.

    Capa personalizada para ProgressBar indeterminada