MK Templates

Gostou do Site? Sim Não
Criar um editor de brilho em 3 ActionScript

O brilho é um atributo da percepção visual em que uma fonte parece ser irradiada ou refletir a luz.


Neste tutorial vamos aprender como modificar o brilho de um objeto de exibição usando o ActionScript 3.


Exemplo:


Vamos dar uma olhada no resultado final nós estaremos trabalhando no sentido de:









Passo 1: Breve Descrição


Usando a classe ColorTransform e um componente Slider vamos aumentar ou diminuir o brilho de uma DisplayObject.


Passo 2: Iniciando


Abra o Flash e crie um novo arquivo Flash (ActionScript 3).





Defina o tamanho do palco para 500x350px e defina a taxa de quadros de 24fps.





Passo 3: Escolha um objeto de exibição


Qualquer DisplayObject pode ser usado com essa classe, por exemplo eu peguei uma imagem do Flickr:






Coloque sua imagem no centro do palco, convertê-lo em MovieClip e dê a ele um nome de instância da imagem.


Passo 4: Painel de Brilho


Nós vamos criar um painel com uma componente Slider e um TextField Dinâmico como objetos interativos.


Selecione a Rectangle Primitive Tool (R) e desenhe um retângulo de 250x70px, defina o raio de canto aos 7 e alterar o seu alfa para 60.





Convertê-lo em MovieClip e adicione o seguinte filtro:





O painel deve ser semelhante a esta:





Clique duas vezes no MovieClip para o modo editar e criar um TextField Dinâmico, defina seu nome de instância para bValue (por "valor de brilho") e centralizá-laDê-lhe uma entrada inicial de 0. Você também pode adicionar um título ao painel e alguns ícones como um guia.





Passo 5: componente Slider


Abra o painel Components (Cmd / Ctrl + F7) e arraste um componente Slider ao seu painel de Brilho, centralizá-lo e nomeá-la slider.





Passo 6: Component Inspector


Com o componente slider selecionada, pressione Shift + F7 para abrir o painel Component Inspector e editar as opções como mostrado na imagem:





Passo 7: ActionScript


Crie um novo documento do ActionScript e salve-o como Main.as.





Nós vamos usar uma classe de documento para este projeto..Se você não tiver certeza de como usar uma classe do documento, leia esta breve introdução.


Passo 8: Pacote





A palavra-chave pacote permite-lhe organizar seu código em grupos que podem ser importadas por outros scripts, recomenda-se a nomeá-los começando com uma letra minúscula e intercaps uso de palavras subsequentes por exemplo: myClasses.


Se você não quiser agrupar seus arquivos em um pacote ou você tem apenas uma classe você pode usá-lo desde a sua pasta de origem.


Passo 9: Classes Obrigatório


Algumas classes são necessárias para que isso funcione. Para uma descrição mais detalhada sobre cada classe, consulte a Ajuda do Flash (F1).





Passo 10: Estendendo a classe


A palavra-chave extends define uma classe que é uma subclasse de outra classe. A subclasse herda todos os métodos, propriedades e funções, de que maneira podemos utilizá-los na nossa classe.





Passo 11: Variáveis


Apenas uma variável é necessária neste exemplo: uma instância ColorTransform. Isso será usado para mudar os valores RGB do objeto de exibição de destino.





Passo 12: função de construtor


Esta função é executada quando a classe é carregada.


Um ouvinte SliderEvent é adicionado ao componente Slider para executar uma função quando o usuário altera o valor do Slider.





Passo 13: Color Transform


Esta função é executada quando o valor muda slider. Esta é a parte ColorTransform. Os deslocamentos de vermelho, verde e azul da cor matriz de transformação são definidas para coincidir com o valor do controle deslizante.





Passo 14: Aplicar alterações


Esta linha aplica as alterações à imagem no palco.





Passo 15: Relação Texto


O texto no painel de brilho também é atualizado.





Passo 16: Classe do documento


Volte para o fla. E no Painel de Propriedades defina o campo para a principal classe para vinculá-lo à classe do documento.





Conclusão


Agora você pode facilmente implementar uma forma de modificar o brilho de uma imagem ou outro objeto de exibição usando o ActionScript 3.


Obrigado por ler!

0 Comentários:

Postar um comentário