|
O exemplo do Gerador visual algorítmico desenha dinamicamente no palco vários "satélites" ou círculos que se movem em uma órbita circular. Entre os recursos explorados estão:
-
Uso da API de desenho para desenhar uma forma básica com aparências dinâmicas
-
Conexão da interação do usuário com as propriedades utilizadas em um desenho
-
Transmissão de animação por meio da limpeza do palco em cada quadro e redesenho
O exemplo na subseção anterior animou um “satélite” solitário utilizando o evento
Event.ENTER_FRAME
. Esse exemplo vai além disso, criando um painel de controle com séries de controles deslizantes que atualizam imediatamente a exibição visual de vários satélites. Esse exemplo formaliza o código em classes externas e agrupa o código de criação de satélites em um loop, armazenando uma referência para cada satélite em uma matriz
satellites
.
Para obter os arquivos de aplicativo desse exemplo, consulte
www.adobe.com/go/learn_programmingAS3samples_flash_br
. Os arquivos do aplicativo podem ser encontrados na pasta Amostras/AlgorithmicVisualGenerator. Essa pasta contém os seguintes arquivos:
|
Arquivo
|
Descrição
|
|
AlgorithmicVisualGenerator.fla
|
O arquivo principal do aplicativo no Flash Professional (FLA).
|
|
com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as
|
A classe que fornece a funcionalidade principal do aplicativo, que inclui desenho de satélites no palco e resposta aos eventos do painel de controle para atualizar as variáveis que afetam o desenho dos satélites.
|
|
com/example/programmingas3/algorithmic/ControlPanel.as
|
A classe que gerencia a interação do usuário com vários controles deslizantes e eventos de despacho quando eles ocorrem.
|
|
com/example/programmingas3/algorithmic/Satellite.as
|
Uma classe que representa o objeto display que gira em uma órbita ao redor de um ponto central e contém propriedades relacionadas ao estados atual do seu desenho.
|
Definição de ouvintes
O aplicativo primeiro cria três ouvintes. O primeiro atende um evento despachado do painel de controle informando que é necessário recriar os satélites. O segundo atende às alterações de tamanho do palco do arquivo SWF. O terceiro atende a cada transmissão de quadro no arquivo SWF e para redesenhar utilizando a função
doEveryFrame()
.
Criação de satélites
Assim que os ouvintes estiverem definidos, a função
build()
é chamada. Essa função chama primeiro a função
clear()
, que esvazia a matriz
satellites
e apaga qualquer desenho anterior no palco. Isso é necessário pois a função
build()
pode ser chamada novamente sempre que o painel de controle envia um evento para isso, como quando as configurações de cor são alteradas. Nesse caso, os satélites devem ser removidos e recriados.
A função então cria os satélites, configurando as propriedades iniciais necessárias para a criação, como a variável
position
, que começa em uma posição aleatória na órbita, e a variável
color
, que neste exemplo não é alterada pois o satélite foi criado.
Como cada satélite é criado, uma referência a ele é incluída na matriz
satellites
. Quando a função
doEveryFrame()
é chamada, ela será atualizada para todos os satélites nessa matriz.
Atualização da posição do satélite
A função
doEveryFrame()
é o coração do processo de animação do aplicativo. Ela é chamada para cada quadro, em uma taxa igual à taxa de quadro do arquivo SWF. As pequenas alterações das variáveis do desenho transmitem a aparência da animação.
A função primeiro apaga todos os desenhos anteriores e redesenha o plano de fundo. Em seguida, ela percorre cada contêiner de satélite, incrementa a propriedade
position
de cada satélite e atualiza as propriedades
radius
e
orbitRadius
que podem ter sido alteradas na interação do usuário com o painel de controle. Por fim, o satélite atualiza-se para a sua nova posição chamando o método
draw()
da classe Satellite.
Observe que o contador,
i
, incrementa apenas até a variável
visibleSatellites
. Isso porque se o usuário limitar a quantidade de satélites que são exibidos no painel de controle, os satélites restantes no loop não deverão ser redesenhados, mas deverão ficar ocultos. Isso ocorre em um loop que segue imediatamente o loop responsável pelo desenho.
Quando a função doEveryFrame() é concluída, o número de
visibleSatellites
é atualizado na posição na tela.
Resposta à interação do usuário
A interação do usuário ocorre por meio do painel de controle, que é gerenciado pela classe ControlPanel. Essa classe define um ouvinte junto com os valores individuais mínimo, máximo e padrão de cada controle deslizante. À medida que o usuário move esses controles, a função
changeSetting()
é chamada. Essa função atualiza as propriedades do painel de controle. Se a alteração exigir a criação da exibição, um evento é despachado e então tratado no arquivo principal do aplicativo. À medida que as configurações do painel de controle são alteradas, a função
doEveryFrame()
desenha cada satélite com as variáveis atualizadas.
Personalização posterior
Esse exemplo é apenas um esquema básico de como gerar visuais utilizando a API de desenho. Ele usa relativamente poucas linhas de código para criar uma experiência interativa que parece muito complexa. Apesar disso, esse exemplo pode ser estendido com pequenas alterações Algumas ideias:
-
A função
doEveryFrame()
pode incrementar o valor de cor do satélite.
-
A função
doEveryFrame()
pode reduzir ou expandir o raio do satélite com o tempo.
-
O raio do satélite não precisa ser circular; ele pode usar a classe Math para se mover de acordo com uma onda senoidal, por exemplo.
-
Os satélites podem usar a detecção de pressionamento com outros satélites.
A API de desenho pode ser utilizada como uma alternativa para criar efeitos visuais no ambiente de autoria do Flash, desenhando formas básicas no tempo de execução. Mas ela também pode ser utilizada para criar efeitos visuais diversos e com escopo diferente que não podem ser criados manualmente. Com a utilização da API de desenho e um pouco de matemática, o autor do ActionScript pode dar vida a várias criações inesperadas.
|
|
|
