DANIELA PIRES (86 pts)

MARLOS ALVES CARMO (90 pts)

JOTA LAGO (40 pts)

SASHA GUDEY (235 pts)

EDUARDO WALMOTT (226 pts)

FLASHGURU (155 pts)

IRAPUAN MARTINEZ (45 pts)

GUILHERME SCHEIBE (49 pts)

ILVA RUDEV (90 pts)

LUI FERNANDO (151 pts)

ALEXANDRE PORTO (1281 pts)

ZEBEDIAH (35 pts)
Treinamento PontoFlash de Flash e ActionScript

Utilização do Bryce 3D.

Como imprimir no Flash?

Qual é a melhor forma de carregar clips secundários? LoadMovie ou AttachMovie?

Queria que o Flash importasse imagens de meu banco de dados.

Vídeo no Flash - programa que fiz.

Como fazer um efeito alpha no Flash5?

Como faço pra mudar o nome de uma variável em tempo real?

O que é e para que serve o "linkage"?

Como fazer abrir uma janela popup do Flash?

Uma forma diferente de fazer uma concional.

Como criar um campo de texto dinamicamente pelo FlashMX?

Quando usar onclipevent (enterframe) ou onclipevent (load)?

Tenho alguns arquivos em flash que gostaria de imprimir.

Exemplo de digitação de texto, com simulação de backspace.
O desenho animado abrindo sites.

O desenho animado abrindo sites.

Sistema de busca utilizando Flash + ASP .

Fontes no Flash - campos de texto e HTML

Configurando texto via actionscript.

Objeto XML - xml viewer

Objeto Movieclip - Endereçamento (segunda parte)

Bate-papo com Dennis Baldwin - FlashCFM.com

Animação no Flash

Cadastro de usuários, com Flash+ASP

Fireworks, o patinho feio da Macromedia.

Janelas tipo Windows com Swap Depth
Botão liga/desliga

Alfabetar

Drag circling

Trailer

SomnoFlash5

Bola quicando

Text lights 2

Foto mask

Intro animada

Worm

Drag gravity

Load dinâmico de fotos
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