DAAFY (55 pts)

RÔMULO NUNES (32 pts)

MANGOOST (80 pts)

EDUARDO CARREGA (150 pts)

PEDRO CLAUDIO (50 pts)

MARCOS JOSÉ PINTO (44 pts)

LUIZ HERRERA (117 pts)

KEN AWAMURA (130 pts)

STICKMAN (155 pts)

SASHA GUDEY (235 pts)

MARCELO SIQUEIRA (96 pts)

AMAURY BENTES (123 pts)
Treinamento PontoFlash de Flash e ActionScript

Como carrego os vários filmes que utilizarei no meu flash em apenas um preload?

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

Quero clicar num botão, que está no primeiro exe para chamar o 2° .exe e que o primeiro finalize o segundo.

Calcular distância de um movieclip invisível.

Tem como criar um cookie para limitar a entrada do usuário a apenas uma vez por dia?

Gostaria de saber se existem plugins para flash.

Quero que ao clicar em um botão executar um filme que vai para 'alpha=0', tipo um 'fadeOut'.

Gostaria de fazer dois olhos 'olhando' para o mouse.

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

Como rolar umas imagens na horizontal, de maneira que elas se repitam continuadamente?

Uma forma diferente de fazer uma concional.

Preciso do comando javascript, que com o botão direito do mouse surge um window.alert.

Dicas para fazer um executável no flash.

Como fazer uma linha criada via métodos de desenho ir crescendo da direita para a esquerda?
Jogo dos 7 erros.

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

Gravidade no Flash.

Alterando Artistic Media no Corel Draw

Janelas pop-up e semi-full no flash

Interpolação de movimento

Duplicate Movieclip.

Sistema de newsletter utilizando Flash + ASP.

Integração Dreamweaver + Fireworks.

Interação de Flash+Asp.

Barra de rolagem simples no Flash5.

Voltar à Timeline principal usando a função "Call"
Duas casas decimais

Luz

MX cria campo

Type 2

Analogicclock

Cleopalyer

Random

Engrenagens 2

Logos caindo

Cronometro

Zoom rotate e pan

Pacman
HOME | TUTORIAIS
Code Animation - Parte 2
por Ken Awamura

 

INTRODUÇÃO

Nesta segunda parte de Code Animation vamos ver como podemos combinar a fórmula de movimento com o uso de Mask Layers e criar um efeito chamado Image Break. O efeito consiste em 'quebrar' uma imagem em várias partes com o uso de mask e na aplicação da fórmula de movimento sobre cada uma destas imagens 'quebradas' fazendo com que ao final do movimento todas estas partes se unam formando a imagem final inteira.

Abaixo temos o exemplo completo para que você tenha uma idéia geral do efeito :

download do arquivo

A seguir vamos analisar quais objetos são necessários para podermos criar este efeito:

1º - Uma imagem qualquer que você queira utilizar. Este exemplo utiliza a imagem 'sample.png' que possui aproximadamente 250x150 pixels.

2º - A fórmula de movimento. Neste exemplo foi utilizado movimento vertical (y): y = y + (pos - y)*k

3º - 8 movieClips da mesma figura : sample.png

CRIANDO OS MOVIECLIPS

movieClip 'pic' :

O primeiro movieClip a ser criado é o mc 'pic'. Para isto coloque uma instância da imagem 'sample.png' no stage e transforme-o em um mc (F8) nomeando-o : pic.

Edite o mc 'pic', selecione a imagem, centralize-a e 'quebre' com 'ctrl+b'.

nota : a vantagem em quebrar as imagens é que deste modo você a traz do nível de overlay para o nível de canvas, onde ela se torna editável e 'shrinked'.

O mc 'pic' será o mc que estará 'dentro' (nested) dos mcs 1,2,...7 e será o mc que receberá a fórmula de movimento.

movieClips 1,2,...,7:

Estes são os mcs que serão 'quebrados' com o uso de mask layer. O processo de criação de cada um deles é análogo, portanto vamos ver como criamos o primeiro deles :

mc 1

1º - Crie um mc vazio com duas layers, sendo que a superior se chama 'mask' e a inferior se chama 'pic', pois é onde será inserido o mc 'pic'.

2º - Insira o mc 'pic' na layer inferior chamada ´pic', centralize-o em x=y=0

3º - Na layer superior chamada mask crie um retângulo sem bordas (qualquer cor) com as dimensões do mc 'pic' (250x150) e posicione-o também em 0,0. Este retângulo deve ser quebrado em 7 partes sendo que cada uma destas partes será a mask equivalente aos mc 1,2,...,7. Neste exemplo o retângulo foi quebrado em colunas verticais e com ângulos diversos, porém é você quem decide como quer quebrá-lo.

4º - Selecione o mc 'pic' e insira o seguinte object actions:

onClipEvent(enterFrame)
{
_y = _y + (_root.pos - _y)*.22;
}

5º - Repita este mesmo processo para os demais 6 mcs e diminua em 0.02 o valor de k na fórmula de movimento para cada mc.

PREPARANDO O STAGE PRINCIPAL

Após terminado todos os 7 mcs, volte à timeline principal e crie 2 layers : actions e bg.

layer actions : insira as seguintes actions nesta layer

fscommand("allowscale", 0);
pos = -170;
stop();

A segunda linha : pos=-170 fará com que todas as instâncias de 'pic' que estão nos mcs 1,2,...,7 se desloquem inicialmente para y=-170, fazendo com que as instâncias 'pic' fiquem fora da área visível da mask layer.

layer bg : insira as 7 instâncias (1,2,3,4,5,6,7) dos mcs, uma a uma, centralizando-as para que no final as 7 formem a imagem final inteira.

botão : este botão é o responsável por enviar o comando para as instâncias de 'pic' se posicionarem em y==0, fazendo com que elas apareçam na região visível das mask layers e causem o efeito desejado. O código do botão play é o seguinte:

on(release)
{
_root.pos = 0;
}

CONCLUSÃO

Neste exemplo a imagem original foi quebrada em 7 partes e utilizou-se movimento vertical, porém efeitos diversos podem ser obtidos quebrando-se a imagem em outros formatos e utilizando-se movimentos verticais e/ou horizontais com diferentes valores para a constante k.

nota : não se sabe precisamente quem foi o criador deste efeito, porém um dos primeiros sites a usá-lo foi o do fotógrafo John Mark Sorum criado pela empresa de New York chamada WDDG. (www.wddg.com)



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