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
:
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:
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