|
A aparência de um componente é constituída por elementos gráficos como um contorno, uma cor de preenchimento, ícones e até mesmo outros componentes. Uma ComboBox, por exemplo, contém um componente List, e um componente List contém uma ScrollBar. Juntos, os elementos gráficos compõem a aparência da ComboBox. No entanto, a aparência de um componente muda com base em seu estado atual. Por exemplo, uma CheckBox, sem seu rótulo, tem uma aparência como esta quando aparece em seu aplicativo:
Uma CheckBox em seu estado ativo normal
Se você clicar e mantiver o botão do mouse pressionado sobre a CheckBox, sua aparência será alterada para isto:
Uma CheckBox em seu estado pressionado
Quando você solta o botão do mouse, a CheckBox retorna à sua aparência original, mas agora tem uma marca de seleção para mostrar que foi selecionada.
Uma CheckBox em seu estado selecionado
Os ícones que representam o componente em seus diversos estados são chamados, coletivamente, de
capas.
Você pode alterar a aparência de um componente em qualquer um ou em todos os seus estados editando suas capas no Flash, assim como faria com qualquer outro símbolo do Flash. Você pode acessar as capas de um componente de duas formas. A forma mais simples consiste em arrastar o componente para o Palco e clicar nele duas vezes. Isso abre uma paleta com as capas do componente, que tem a aparência a seguir no caso de uma CheckBox.
As capas de uma CheckBox
Você também pode acessar as capas de um componente individualmente, no painel Biblioteca. Quando você arrasta um componente para o Palco, também o copia para a biblioteca, juntamente com uma pasta com seus ativos e quaisquer outros componentes que ele contenha. Por exemplo, se você arrastar uma ComboBox para o Palco, o painel Biblioteca também irá conter os componentes List, ScrollBar e TextInput, que são incorporados à ComboBox, além de uma pasta de capas para cada um desses componentes e uma pasta Ativos compartilhados, contendo os elementos compartilhados por esses componentes. Você pode editar as capas de qualquer um desses componentes abrindo sua pasta de capas (ComboBoxSkins, ListSkins, ScrollBarSkins ou TextInputSkins) e clicando duas vezes no ícone da capa que deseja editar. Por exemplo, clicar duas vezes em ComboBox_downSkin abre a capa no modo de edição de símbolo, conforme mostrado na ilustração a seguir:
A ComboBox_downSkin
Criar uma nova capa
Se quiser criar uma nova aparência para um componente no seu documento, edite as capas do componente para alterar sua aparência. Para acessar as capas de um componente, basta clicar nele duas vezes no Palco para abrir uma paleta com suas capas. Depois, clique duas vezes na capa que deseja editar para abri-la no modo de edição de símbolo. Por exemplo, clique duas vezes no componente TextArea no Palco para abrir seus ativos no modo de edição de símbolo. Defina o controle de zoom como 400%, ou mais se preferir, e edite o símbolo para alterar sua aparência. Quando você terminar, a alteração afetará todas as ocorrências do componente no documento. Como alternativa, você pode clicar duas vezes em uma capa específica no painel Biblioteca para abri-la no Palco no modo de edição de símbolo.
Você pode modificar capas de componentes das seguintes formas:
Criar uma capa para todas as ocorrências
Quando você edita a capa de um componente, por padrão, altera a aparência do componente em todas as suas ocorrências no documento. Se quiser criar aparências diferentes para o mesmo componente, você deverá duplicar as capas que deseja alterar e atribuir-lhes nomes diferentes, editá-las e depois definir os estilos adequados para aplicar a elas. Para obter mais informações, consulte
Criar capas para algumas ocorrências
.
Este capítulo descreve como alterar uma ou mais capas para cada um dos componentes de UI. Se você seguir um destes procedimentos para alterar uma ou mais capas de um componente de UI, irá alterar todas as ocorrências no documento.
Criar capas para algumas ocorrências
Você pode criar uma capa para algumas ocorrências de um componente usando o seguinte procedimento geral:
-
Selecione a capa na pasta Ativos do componente, no painel Biblioteca.
-
Duplique a capa e atribua a ela um nome de classe exclusivo.
-
Edite a capa para conferir a ela a aparência desejada.
-
Chame o método
setStyle()
da ocorrência do componente para atribuir a nova capa ao estilo de capas.
O procedimento a seguir cria uma nova selectedDownSkin para uma de duas ocorrências de Button.
-
Crie um novo documento de arquivo Flash (ActionScript 3.0).
-
Arraste dois Buttons do painel Componentes para o Palco e atribua a eles os nomes de ocorrência de
aButton
e
bButton
.
-
Abra o painel Biblioteca, e depois as pastas Component Assets e ButtonSkins dentro dele.
-
Clique na capa selectedDownSkin para selecioná-la.
-
Clique com o botão direito para abrir o menu de contexto e selecione Duplicar.
-
Na caixa de diálogo Duplicar símbolo, atribua à nova capa um nome exclusivo, por exemplo
Button_mySelectedDownSkin
. Em seguida, clique em OK.
-
Na pasta Biblioteca > Component Assets > ButtonSkins, selecione Button_mySelectedDownSkin e clique com o botão direito para abrir o menu de contexto. Selecione Ligação para abrir a caixa de diálogo Propriedades da ligação.
-
Clique na caixa de seleção Exportar para ActionScript. Deixe a caixa de seleção Exportar no primeiro quadro selecionada e verifique se o nome da classe é exclusivo. Clique em OK, e depois clique em OK novamente em resposta ao aviso informando que não foi possível encontrar uma definição de classe e que uma será criada.
-
Clique duas vezes na capa Button_mySelectedDownSkin, no painel Biblioteca, para abri-la no modo de edição de símbolo.
-
Clique no preenchimento azul no centro da capa até que a cor apareça no Seletor de cor de preenchimento, no Inspetor de propriedades. Clique no seletor de cor e selecione a cor #00CC00 para o preenchimento da capa.
-
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.
-
No Inspetor de propriedades, clique na guia Parâmetros de cada botão e defina o parâmetro de alternância como
true
.
-
Adicione o seguinte código ao painel Ações no Quadro 1 da Linha do tempo:
bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin);
bButton.setStyle("downSkin", Button_mySelectedDownSkin);
-
Selecione Controlar > Testar filme.
-
Clique em cada botão. Observe que a capa pressionada (selecionada e não selecionada) do objeto bButton usa o símbolo da nova capa.
|
|
|
