movieclipsdinamicamente3

/ Tutoriais

Criando MovieClips dinamicamente com Action Script 3 – III

Tutorial

Criar MovieClips dinamicamente, utilizando Action Script 3, é uma tarefa fundamental para ao desenvolvimento de aplicações dinâmicas e interativas.

Quando falamos em criação de MovieClips dinamicamente, temos três finalidades:

1. Utilizar o MovieClip criado como container para outros símbolos.
2. Utilizar o MovieClip criado como um elemento de interface modelo (que se repetirá).
3. Desenhar dinamicamente o conteúdo do MovieClip.

Nesse artigo iremos falar sobre a terceira finalidade.

Para acessar os recursos de desenho nós utilizaremos a propriedade graphics dos MovieClips. Essa propriedade nos fornece acesso a um objeto do tipo Graphics, que está presente em todos os MovieClips.
Ao realizar uma chamada a um método da classe Graphics o flash realiza a ação sobre o movieclip proprietário do atributo graphic correspondente. Por exemplo, se você usa “movie_mc.drawCircle()”, você estará desenhando um círculo dentro do MovieClip de nome “movie_mc”. Execute o exemplo a seguir no flash:

Os recursos da classe Graphics permite-nos a criação de aplicações muito intessantes. Existem até mesmo programas de edição gráfica disponíveis na Web que utilizam a classe Graphics. Sugiro ao leitor acessar o help da classe Graphics do flash. Lá encontramos a lista completa de métodos da classe.

Vamos a um exemplo um pouco mais complexo. Crie um projeto em flash e adicione dois botões ao stage, um chamado “desenhar_btn” e outro chamado “apagar_btn”. Esses botões vão assumir a função dos botões de lápis e borracha da toolbar de uma aplicação gráfica, como o paint, por exemplo. Veja:

Estrutura do exemplo

Estrutura do exemplo

Agora adicione o código Actionscript a seguir na primeira frame do projeto:

Nas linhas 7 a 10 criamos os EventListeners para os eventos do mouse, pois desejamos que quando o usuário clique no stage ele desenhe ou apague na posição clicada.

Nas linhas 13 e 14 criamos os EventListeners para os botões “desenhar_btn” e “apagar_btn”, pois desejamos que quando o usuário clique nesses botões a aplicação mude o a ferramenta selecionada (lápis ou borracha).

Nas linhas 18 a 38 definimos a função que será executada quando o cursor do mouse for movimentado sobre o stage. Nas linhas 23 a 33 executamos a ação apropriada de acordo com o botão clicado pelo usuário. Caso seja “desenhar”, desenhamos um círculo preto com transparência 0.5 (na linha 25 definimos a cor e o alpha do circulo) de raio 2 e na posição do cursor do mouse (na linha 26 definimos onde o círculo será desenhado e qual o seu raio).

O mesmo se repete para a ação de apagar (linhas 31 e 32), só que dessa vez usamos um raio maios e a cor branca sem transparência.

Nas linhas 41 a 45 definimos o tratador para o evento de clique nos botões, que define a ação de acordo com o botão clicado pelo usuário. Nas linhas 48 a 56 identificamos se o usuário está com o botão do mouse pressionado ou não, armazenando true ou false na variável desenhando.

Em caso de dúvidas é só perguntar! Até o próximo artigo!



Arivan Bastos

Analista de sistemas, desenvolvedor Web e de games. Possui domínio de PHP, SQL e ActionScript 3. Possui conhecimentos avançados em Starling Framework, Corona SDK e Yii Framework. Atua na Virtualize na criação de sites, desenvolvimento de jogos, desenvolvimento de aplicativos mobile e desenvolvimento de aplicativos para redes sociais.