Obs.: o download do arquivo fonte final pode ser feito através do link ao final desta matéria.
O efeito apresentado acima pode ser utilizado como transição entre seções de seu site.
A maior parte do trabalho para obter um efeito como este não localiza-se no Flash, mas no Photoshop ou outro software de tratamento de imagem, pois a animação é praticamente feita quadro a quadro.
1.
Abra o arquivo transicao_inicial.fla que você baixou na sua máquina através do link acima.
Para nos concentrarmos no foco de nossa matéria, a arte e os elementos que serão utilizados neste tutorial já se encontram na Library. Observe também que já estão criadas as layers e seus respectivos nomes.
FUNDO DA PÁGINA
2.
Na layer Fundo de Página, clique no frame 70 e tecle F5 para criarmos os frames até esse ponto. A seguir, clique no frame 1 e arraste uma instância do símbolo graphic “fundo da página” para o Stage. Posicione-o em x = 0 e y = 0 no painel Properties.
BOTÕES
3.
Na layer “Botão Voltar”, clique no frame 70, tecle F7 para criar um keyframe branco.
4.
No menu, navegue até Window > Common Libraries > Buttons e arraste uma instância do “flat blue back” (está dentro da pasta playback flat) para o Stage configurando-o como na figura a seguir:
5.
Crie um keyframe no frame 70 da layer AS, tecle F9 e digite o seguinte código:
stop();repetir_btn.onRelease = function () {
gotoAndPlay(2);
};
6.
Na layer “Botão Iniciar “, clique no frame 1, tecle F7 para criar um keyframe branco.
7.
No menu, navegue até Window > Common Libraries > Buttons e arraste uma instância do “flat blue play” (está dentro da pasta playback flat) para o Stage configurando-o como na figura a seguir:
8.
Crie um keyframe no frame 1 da layer AS, tecle F9 e digite o seguinte código:
stop();iniciar_btn.onRelease = function () {
play();
};
9.
Na layer Logotipo, crie um keyframe no frame 70 e arraste uma instância do LOGO_06 para ele.
10.
Crie um keyframe no frame 70 da layer Conteúdo e com a ferramenta Text Tool (T) digite o seguinte texto:
www.academiadexadrez.com
Mergulhe nessa você também
11.
Na layer Volta da página de conteúdo, crie um keyframe no frame 53.
12.
Arraste uma instância do fig01 para o Stage, configurando-o como a seguir:
13.
Crie um keyframe no frame 70 da mesma layer e configure o fig01 deste frame da seguinte maneira:
14.
Crie um Motion Tween entre os frames 53 e 70 clicando com o botão direito do mouse entre eles e optando por Create Motion Tween.
15.
Na layer Movimento da água, frame 26, crie um keyframe e arraste para ele uma instância do “onda do mergulho”, configurando da seguinte maneira:
16.
Crie um outro keyframe na layer Movimento da água, agora no frame 34, e configure o “onda do mergulho” deste frame da seguinte maneira:
17.
Crie um Motion Tween entre os frames 26 e 34 clicando com o botão direito do mouse entre eles e optando por Create Motion Tween.
18.
Crie um outro keyframe na layer Movimento da água, agora no frame 42, e configure o “onda do mergulho” deste frame da seguinte maneira:
19.
Crie um Motion Tween entre os frames 26 e 34 clicando com o botão direito do mouse entre eles e optando por Create Motion Tween.
20.
Crie um outro keyframe na layer Movimento da água, agora no frame 44, e configure o “onda do mergulho” deste frame da seguinte maneira:
21.
Crie um Motion Tween entre os frames 42 e 44 clicando com o botão direito do mouse entre eles e optando por Create Motion Tween.
22.
Crie um outro keyframe na layer Movimento da água, agora no frame 45, e configure o “onda do mergulho” deste frame da seguinte maneira:
23.
Crie um outro keyframe na layer Movimento da água, agora no frame 47, e configure o “onda do mergulho” deste frame da seguinte maneira:
24.
Repita o procedimento criando keyframes do frame 48 até o 52, configurando-os respectivmente da seguinte maneira:
Frame 48
Frame 49
Frame 50
Frame 51
Frame 52
25.
Crie um keyframe no frame 26 da layer “Fundo” e arraste para ele uma instância de “fundo do mergulho”, configurando-o como segue:
26.
Crie um keyframe no frame 31 da layer “Fundo” e configurando-o como segue:
27.
Crie um keyframe no frame 53 da layer “Fundo” e configurando-o como segue:
28.
Crie um Motion Tween entre os frames 26 e 31 e também entre o 31 e o 53.
29.
Crie um keyframe no frame 26 da layer “Splash”, arraste uma instância do “mergulho” para o Stage e configure-o como segue:
30.
Crie um keyframe no frame 31 da layer “Fundo” e configurando-o como segue:
31.
Crie um keyframe no frame 40 da layer “Fundo” e configurando-o como segue:
32.
Crie um keyframe no frame 45 da layer “Fundo” e configurando-o como segue:
33.
Crie um Motion Tween entre cada um destes keyframes criados.
34.
Crie um keyframe no frame 21 da layer “Som da Folha Mergulhando” e arraste para o Stage uma instância do “som 2″ (configure Repeat como 0).
35.
Crie um keyframe no frame 11 da layer “Som do Lançamento da Folha” e arraste para o Stage uma instância do “som 1″ (configure Repeat como 0). Com o mouse no frame 12, crie mais um frame teclando F5.
36.
Crie um keyframe no frame 6 da layer “Folha em Moviemento” e arraste para o Stage uma instância do “folha01″, configurando como segue:
37.
Clique no frame 8 e tecle F7 para criar um keyframe em branco. Arraste uma instância do “fig01″ para o Stage, configurando como segue:
38.
Crie novos keyframes em branco nos frames de 9 até 28, arrastando respectivamente em cada um o folha02 até o folha21 (um em cada frame!), configurando como segue:
Copie e cole o código a seguir num frame do seu .fla para obter a data de hoje:
function minhaData () {
agora = new Date(ano, mes, dia, h, min, seg, ms);
dias_da_semana = new Array(“Domingo”, “Segunda”, “Terça”, “Quarta”, “Quinta”, “Sexta”, “Sábado”);
meses = new Array(“Janeiro”, “Fevereiro”, “Março”, “Abril”, “Maio”, “Junho”, “Julho”, “Agosto”, “Setembro”, “Outubro”, “Novembro”, “Dezembro”);
dia_da_semana_hoje = dias_da_semana[agora.getDay()];
mes = meses[agora.getMonth()];
dia_do_mes_hoje = agora.getDate();
ano = agora.getFullYear();
data_inteira = dias_da_semana[agora.getDay()]+”, “+ agora.getDate() + ” de “+meses[agora.getMonth()]+” de “+agora.getFullYear();
return data_inteira;
}
trace(minhaData());
(Fonte: zleez.com, Rommel, adaptado por Francisco Teodorico Pires de Souza)
Escrito por Francisco
on dezembro 10, 2006. Arquivado em Flash.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Galera estou com um projeto, de um site e gostaria muito do arquivo ( flash.de trasição do site ) é muito importante para meus estudos e gostei muito do efeito.
Escrito por 
Não consigo visualizar o exemplo.
Cade o Arquivo Exemplo para podermos acompanhar o tutorial??
Tb não consegui visualizar o arquivo!!!
Cadê o exemplo? ;/
Poderiam arrumar o link ?
Não está dando para visualizar o exemplo tbm.
os links não existe e o exemplo não abre .
como vamos ver ?
obrigado
Galera estou com um projeto, de um site e gostaria muito do arquivo ( flash.de trasição do site ) é muito importante para meus estudos e gostei muito do efeito.
Não consigo visualizar o exemplo e os arquivos estão com link quebrados.
Grato.
Gente, um site tão e a administração nao perceber o erro desta página, todo mundo ta falando ai pra cima que os links não funcionam…
Tá na hora de rever os Conceitos…