PEDRO CLAUDIO (50 pts)

MAURO ROCHA TAVARES (40 pts)

GUILHERME SCHEIBE (49 pts)

RÔMULO NUNES (32 pts)

EDUARDO PERROUD (52 pts)

JOTA LAGO (40 pts)

LEANDRO AMANO (83 pts)

MARCOS JOSÉ PINTO (44 pts)

ILVA RUDEV (90 pts)

LUIZ AVANCI (51 pts)

JOÃO NETO (78 pts)

EDUARDO WALMOTT (226 pts)
Treinamento PontoFlash de Flash e ActionScript

Como fazer a timeline em vez de passar o filme para frente volte o filme?

Quero abrir uma janela popup de um link numa imagem (href).

Exempo de formulário de email interagindo Flash e ASP.

Quero fazer um objeto ficar ir alterando sua propriedade '_alpha' o tempo todo.

Alguém tem um modelo de contrato para websites?

Como fazer links dentro do bloco de texto em flash tal como no html?

Função javascript para voltar há uma página anterior a atual.

Eu fiz um som e queria que ele só tocasse quando a pessoa passasse o mouse por cima dele.

Como faço para um botão que já abriu um loadmovie, ficar nulo quando o mesmo já está na tela, para que ele não fique repetindo a mesma ação?

Campos dinâmicos não aceita máscaras?

Existe algum método no LoadVariables que funcione como POST e GET simultaneamente?

Dicas para seu movie ficar mais enxuto.

Como fazer banners com animação e que fossem links. Com botão transparente?

Como fazer um cronômetro disparado por um botão no flash MX?
Níveis dentro do Flash - Load Movie e Load Variables (terceira parte)

ListBox no FlashMX.

Componentes no Flash MX 2004

Usando XML com Fireworks MX.

O "X" do MacOS no PhotoShop

Máscaras no Fireworks MX, o mistério!

Contador usando SharedObjects.

O desenho animado abrindo sites.

Flash MX 2004 - semelhanças com o modelo NET?

Como usar o Flash com o FrontPage?

Menu arrastável, estilo Windows.

Criando texto neon.
Scroll dinâmico

Swirl2

Drag MC 2

Multipletrail

Efeito MTV

Menu aberto

Mouse delay

Scroll over F5

Preloader marquee

Loader Total

SomnoFlash5

Volume mixer
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