LEANDRO AMANO (83 pts)

EDUARDO CARREGA (150 pts)

DAAFY (55 pts)

MAURO ROCHA TAVARES (40 pts)

GUILHERME G.G. (137 pts)

SYDNEY GANHO (60 pts)

MARCOS JOSÉ PINTO (44 pts)

ZEBEDIAH (35 pts)

DAUTON JANOTA (255 pts)

KEN AWAMURA (130 pts)

DENIS CARAVALHO (85 pts)

NILTON BICALHO (61 pts)
Treinamento PontoFlash de Flash e ActionScript

Estou com problemas em condicionais IF.

Alguém conhece integração flash no access. Não como acesso web, e sim como desing gráfico para formulários de access.

Como faço para fazer um autorun?

Estou com dificuldades de usar fontes true type sem anti-aliasing.

Será possível agora fazer um sistema web de acesso a banco de dados todinho em Flash MX?

Como deslocar um filme para um frame diferente dependendo de uma resposta?

Como eu executo um arquivo .exe a partir de uma apresentação em flash?

É possível trocar variáveis entre filmes abertos com load movie?

Mascara não funcionam com linhas e nem com campos dinâmicos e campos de input?

Quero usar uma variável importada de um TXT numa ação do Flash.

Como faço para adicionar textura ou imagem ao invés de uma cor da paleta?

É possível salvar um TXT a partir do Flash?

Uma variável é uma propriedade? Não deveria ter um “undersore”?

Queria fazer uma barra de rolagem no Flash.
Janela popup.

Load Movie into target (movieclip).

Usando XML com Fireworks MX.

Máscara arrastável no Flash 4.

Logo com aparência 3D - Fireworks

Carregador inteligente no Flash 5.

Entendendo como funciona um preloader. Primeira parte.

Nikefootball, uso e abuso do flash - Avaliação de sites

Quadro comparativo: Fireworks ou Photoshop

Preloader com máscara

Níveis dentro do Flash - Load Movie e Load Variables (primeira parte)

Animação no Flash
Mapa - Países com A 1

shared Objects

Altex

Lighttext

Roll Image

Txt com preloader

Starwars text

Kaleidoscope

Rachadura

Preload advanced

Efeito blur

Substituir texto
HOME | TUTORIAIS
Code Animation - Parte 1
por Ken Awamura

INTRODUÇÃO

A tradicional animação de objetos no Flash é criada utilizando-se recursos de tweenning, guides ou mesmo animação do tipo Frame-by-Frame (Quadro à Quadro). A utilização de actionScript aplicado aos objetos no Flash gera um outro tipo de animação chamado Code Animation, que em poucas palavras seria a animação de objetos via actionScript. A animação via codeAnimation utiliza princípios da matemática, física e de lógica de programação aplicada ao actionScript.

Nesta primeira parte do assunto será visto como podemos movimentar um objeto no stage do Flash somente com actionScript, sem a utilização de tweenings ou animação frame-by-frame.

PORQUÊ CODE ANIMATION

Existem vantagens e desvantagens na utilização de codeAnimation e isto também pode ser uma questão de gosto, pois quem não sabe ou não gosta de programar provavelmente não se interessaria por codeAnimation. A principal vantagem está ligada à otimização do tamanho do arquivo final e no poder de criação de efeitos visuais, porém cuidado com o mau emprego desta técnica que pode sobrecarregar o processador do computador.

RELAÇÃO OBJETOxSTAGE NO FLASH

Um objeto quando colocado no stage do Flash, possui coordenadas x e y relativas à origem 0,0 do stage que se localiza no canto superior esquerdo.

PRINCÍPIO DO MOVIMENTO

De acordo com a figura acima, considere o objeto inicialmente na posição x. Nosso objetivo é movimentá-lo até a posição 'pos', portanto a distância que o objeto deve percorrer será : pos-x.

Se fizermos : x = pos, ou em actionScript, mc._x = pos; de fato ocorrerá o movimento do objeto até a posição pos, porém isto ocorrerá em uma única etapa e desta forma não teremos a sensação de movimento. Conclui-se que precisamos movê-lo através de pequenos incrementos até que ele alcance a posição desejada. Para isto vamos reescrever a nossa fórmula x = pos da seguinte maneira:

x = pos + x-x

note que a fórmula continua sendo a mesma,pois x-x=0, certo?

reordenando: x = x + (pos-x)

Considerando k como um coeficiente proporcional, a fórmula anterior é um caso particular onde k=1, portanto:

x = x + (pos-x)*k e podemos concluir o seguinte:

k = 0 :: não ocorre movimento
k = 1 :: o objeto é deslocado em uma etapa
k > 1 :: o objeto ultrapassa a posição desejada
k < 1 :: é exatamente o coeficiente que procuramos

E finalmente obtemos a nossa fórmula de movimento:

x = x + (pos-x)*k

Quanto maior o valor de k, maior o incremento (pos-x), mais rápido será o movimento e menor será a sensação de movimento.

Observe que quanto mais x se aproxima de pos, a diferença (pos-x) se aproxima de zero e o objeto tende a parar ao atingir a posição desejada. Matematicamente dizemos que o limite de (pos-x) quando x tende a pos é zero.

Lim(pos-x) = 0
x->pos

CONSIDERAÇÕES

x = x + (pos-x)*k : causa deslocamento horizontal (1)

y = y + (pos-y)*k : causa deslocamento vertical (2)

a.No Flash podemos utilizar a combinação de 1 e 2 quando quisermos mover o objeto tanto na vertical como na horizontal. A cena moveXY.fla ilustra este caso.

b.Podemos ainda usar valores diferentes para k em 1 e 2 e teremos um movimento similar a uma trajetória parabólica.

c.Note que utilizamos as propriedades _x e _y, porém podemos adaptar estas fórmulas para as outras propriedades como : _alpha, _scale, _width, etc. Por exemplo, se utilizarmos _alpha na fórmula de movimento no lugar de _x, ao invés de movimentar o objeto podemos obter um efeito de fadeIn ou fadeOut.

d.A Física básica possui fórmulas para os movimentos uniformes e variados, como por exemplo:

MRU - Movimento Retilíneo Uniformemente : x = xo + v.t

MRUV - MRU Variado : x = xo + vo.t + a.t.t/2

Sendo x o deslocamento, v a velocidade, t o tempo e a a aceleração.

Será que estas fórmulas funcionam no Flash?

Sim, porém isto dificultaria um pouco as coisas. O Flash possui uma timeline baseada em frames, diferente de outros aplicativos para autoria destinados à televisão e cinema como a After FXs da Adobe que possui uma timeline baseada em tempo decorrido. Deste modo, para a utilização das fórmulas acima mencionadas e que são baseadas em Tempo decorrido, devemos fazer adaptações do tipo :

À velocidade com que os frames são mostrados no Flash chamamos de FPS - frames per second, que seria o equivalente a Frequência, e portanto o tempo t nas fórmulas acima é o Período e sabemos que T = 1/F.

Teríamos que 'deixar' de pensar em que frame estamos ou no frame número tal ocorre tal evento para pensarmos em algo como : após 2 segundos quero atingir o frame 5 e neste frame quero estar na posição x.

Esta abordagem pode ser adaptada para o Flash, porém acredito que fuja dos padrões do software.

DEMONSTRAÇÃO PRÁTICA - basicMove.fla



download do arquivo : basicMove.zip

Este exemplo ilustra o uso da fórmula de movimento aplicado em um objeto no stage do Flash movie. O exemplo possui 4 scenes (cenas), sendo que cada uma delas ilustra uma aplicação da fórmula de movimento.

Cenas do arquivo basicMove.fla:

moveX
moveUni
moveXY
stopGO

ver figura abaixo:

O objetivo é demonstrar na prática o funcionamento da fórmula de movimento da forma mais simples possível.

Para isto vamos analisar separadamente cada cena :

scene1 : moveX

Abra o arquivo basicMove.fla e na primeira cena moveX click no mc que se encontra sobre o stage. Abra a janela actions e verifique o seguinte código que o mc contém:

onClipEvent(load)
{
_x = 20;
_y = 80;
pos = 250;
}

onClipEvent(enterFrame)
{
_x = _x + (pos - _x)*.1;
}

Explicando o código :

1. A primeira parte do cógigo onde temos o evento onClipEvent(load), se refere ao processo de inicialização de variáveis, onde _x = 20 e _Y = 80 posiciona o mc inicialmente nas coordenadas 20 e 80 do stage e a variável pos é inicializada com o valor 250, que é a posição x até onde queremos mover o nosso objeto.

2. A segunda parte do cógigo onClipEvent(enterFrame) é responsável por fazer o mc se deslocar até a posição 250 através do 'autoLoop' que o método enterFrame causa quando aplicado sobre um movieClip. Para a cte k foi atribuído o valor 0.1 que é um valor que causa uma sensação de movimento visualmente aceitável. (Você pode experimentar outros valores para k até que se consiga um movimento de acordo com o seu próprio gosto)

Para compreendermos o enterFrame vamos atribuir valores para cada enterFrame e verificar o resultado:

1º enterFrame : x = 20 + (250-20)*.1 = 43
2º enterFrame : x = 43 + (250-43)*.1 = 63.7
3º enterFrame : x = 63.7 + (250-63.7)*.1 = 82.33
4º enterFrame : x = 82.33 + (250-82.33)*.1 = 99.097
5º enterFrame : x = 99.097+ (250-99.097)*.1 = 114.1873
6º enterFrame : x = 114.1873+ (250-114.1873)*.1 = 127.76857
. . . e sucessivamente até que o x atinja o valor 250

Deste modo conseguimos fazer com que um objeto se mova no stage através de pequenos incrementos utilizando a fórmula de movimento.

Scene2 : moveUni

Um caso particular à formula de movimento é o Movimento Uniforme, que pode ser obtido considerando (x-pos)*k como sendo fixo, tal que :

x = x + (pos-x)*k se torne : x = x + cte onde cte>0.

Em x = x + cte considere cte=2 e x=5, para cada enterFrame teremos:

1º enterFrame : x = 5 + 2 = 7
2º enterFrame : x = 7 + 2 = 9
3º enterFrame : x = 9 + 2 = 11
. . . e sucessivamente, causando um movimento uniforme com deslocamento de 2 pixels por enterframe.

Então o código para o mc desta cena é o segunte:

onClipEvent(load)
{
Dx = 1;
this._x = 20;
this._Y = 80;
}

onClipEvent(enterFrame)
{
_x = _x + Dx;
}

Scene3 : moveXY - mouseFollow

Aqui o assunto começa a ficar mais interessante, pois neste exemplo criamos uma interação entre o usuário e o movie fazendo com que o nosso mc 'siga' o cursor do mouse de acordo com a posição deste na tela.

Dois pontos importantes devem ser considerados aqui :

a. devemos considerar a fórmula do movimento tanto na vertical como para a horizontal(x e y), pois o mouse se movimenta na tela tanto verticalmente como horizontalmente.

b. como queremos fazer com que o mc siga as coordenadas do mouse, a posição 'pos' que o mc deve atingir será na verdade a posição em que se encontra o mouse na tela, e felizmente o Flash possui a propriedade que retorna a posição do mouse tanto para a coordenada x como para y. Portanto a fórmula tradicional _x = _x + (pos - _x)*k; será adaptada trocando-se 'pos' por _xmouse e _y_mouse.

Na cena moveXY - mouseFollow selecione o mc no stage e verifique o código a ele atribuído.

onClipEvent(enterFrame)
{
_x = _x + (_root._xmouse - _x)*.1;
_y = _y + (_root._ymouse - _y)*.15;
}

Note que 'pos' foi substituído por '_root._xmouse' para o movimento horizontal e por '_root._ymouse' para o movimento na vertical.

Deste modo, para cada enterFrame a posição do mc será atualizada para a posição atual do mouse na tela.

Scene4 : stopGO

Esta última cena é um extra, onde poderemos ver que a action updateAfterEvent(enterFrame) admite a utilização de condicionais no bloco de código. Neste exemplo faremos com que durante o movimento do mc, para uma determinada posição ele se desloque com uma velocidade e a partir de uma outra posição ele assuma uma nova velocidade.

Para isto vá para a cena stopGO, selecione o mc e verifique o seu código.

onClipEvent(load)
{
pos = 100;
pos2 = 290;
}

onClipEvent(enterFrame)
{
if(_x < pos)
{
_x = _x + (pos-_x)*.15;
}
if(_x > pos-2)
{
_x = _x + (pos2-_x)*.3;
}
}

A primeira parte : onClipEvent(load) inicializa as duas posições com valores 100 e 290 para pos e pos2 respectivamente.

Na segunda parte, de acordo com a posição atual do mc, a fórmula relativa à este posicionamento será aplicada.

if(_x < pos)
{
_x = _x + (pos-_x)*.15;
}

este trecho de código significa que, se a posição do mc for menor do que 100 (_x < pos) assuma a seguinte fórmula de movimento : _x = _x + (pos-_x)*.15;

if(_x > pos-2)
{
_x = _x + (pos2-_x)*.3;
}

Já neste trecho, caso a posição do mc esteja bem próximo de pos (_x>pos-2), assuma a próxima fórmula de movimento e vá até a posição pos2.

Note que a velocidade do movimento varia na segunda parte, pois utilizamos diferentes valores para 'k' : 0.15 e 0.3

Acredito que com estas 4 cenas podemos ilustrar bem a utilização e a lógica aplicada na dedução da fórmula de movimento.



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário