Intro
INTROAprenderemos a construir uma Intro que pode ser usada numa Galeria de Fotos, por exemplo…
1. Crie a seguinte estrutura de layers em seu novo arquivo Flash de dimensões 625 x 415 px (criei o meu com fundo preto):
2. Vá até o frame 570 da layer AS, crie um Keyframe em Branco teclando F7. 3. Abra o painel Actions (tecle F9) e digite o seguinte código: stop(); O objetivo é que a animação pare nesse ponto (ao chegar ao seu final). 4. No menu, navegue até Insert > New Symbol… (Ctrl + F8), nomeie o novo símbolo como “Academia de Xadrez (Vertical)”. 5. Clique sobre a Text Tool (T) e digite “www.academiadexadrez.com”, com as seguintes configurações:
Para conseguir esse efeito, no painel Properties, após o texto ter sido digitado, clique em “Change orientatin of text” opte por “Vertical, Left to Right” e a seguir, clique no botão Rotation. 6. Volte para a cena principal, clique no frame 60 da layer Título Vertical e insira um keyframe nele. 7. Arraste uma instância do “Academia de Xadrez (Vertical)” para esse keyframe configurando como segue:
8. Tecle no frame 70, tecle F6 para criar um keyframe idêntico ao que acabamos de criar. 9. Clique com o botão direito do mouse entre qualquer um destes keyframes que criamos e opte por “Create Motion Tween”. 10. Clique no keyframe 60, e no painel Properties, configure como a seguir:
11. Vá até o frame 570 e tecle F5 para criar um frame no mesmo. O objetivo é que este título permaneça na animação até o final dela. 12. Vamos agora colocar um link para a repetição da animação quando ela chegar ao final, caso o usuário clique nele. Crie um keyframe no frame 570 das layers “BI” e “Repetir” (Selecione os dois frames segurando o Shift e tecle F5). 13. No frame 570 da layer “Repetir”, digite o texto com o mesmo nome dela. 14. No frame 570 da layer “BI”, crie um botão invisível (só com o Hit) com as configurações a seguir:
15. Clique no frame 570 da layer “AS”, abra o painel Actions (F9) e acrescente o código do botão. Após inseri-lo, deve obter um código como a seguir: stop(); repetir_bt.onRelease=function(){ Ao clicar neste botão a animação reiniciará. Preparando as animações16. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como “Animação 00″. 17. Crie a seguinte estrutura de layers:
18. Clique no frame 79 da layer AS, crie um keyframe (F7), abra o painel Actions e digite o seguinte código: stop(); Afinal, não queremos que a animação fique em loop. 19. Selecione os frames 79 das layers restantes (segurando a tecla Shift enquanto clica no primeiro e último frame a ser selecionado) e crie frames teclando F5. 20. No frame 1 da layer “Animação de Traço Inferior” desenhe um traço com o Line Tool (N) e configure como segue no painel Properties:
21. Transforme-o em um símbolo gráfico teclando F8 e denominando-o como “Linha Horizontal gr” (observe se escolheu “graphic” no painel que se abriu). 22. Clique no frame 20 e crie um keyframe (F6) . 23. Clique novamente no frame 1 e reconfigure o traço (no painel Properties) como segue:
24. Clique com o botão direito do mouse entre qualquer frame entre o 1 e o 20 e opte por “Create Motion Tween”. Com isso, o traço crescerá na tela. 25. No frame 21 da layer Título, digite “Academia de Xadrez” depois de clicar na Text Tool (T) e transforme-o num símbolo gráfico com o mesmo procedimento que fizemos anteriormente:
26. Crie um novo keyframe no frame 30 (F6). 27. Volte ao keyframe 21 e troque a cor do texto para Branco (#FFFFFF). Faça isso mudando o parâmetro Color no painel Properties para Tint e escolhendo no quadradinho ao lado a cor desejada. 28. Clique entre qualquer um dos keyframes que estamos trabalhando e crie um Motion Tween como fizemos anteriormente. 29. Clique no frame 31 da layer “Site”, crie um keyframe (F7), digite o texto “www.academiade xadrez”, transforme-o num símbolo gráfico (denomine-o “Site”) posicionando-o como a seguir:
30. Crie um keyframe (F6) no frame 40, posicionando o texto como segue:
31. Crie um Motion Tween entre eles como fizemos anteriormente. 32. Agora faremos um procedimento análogo para animar o slogan. O texto que usaremos é “Onde os Reis se encontram”. As duas instâncias deste símbolo gráfico que criamos (chamamos de Slogan) estarão nos frames 31 e 40 assim como o anterior e haverá um Motion Tween entre eles. Para facilitar, eis a posição inicial e final dos mesmos, respectivamente:
Pronto! Nossa primeira animação está pronta para ser inserida na cena principal. 33. Volte à cena principal, clique no frame 1 da layer “00″ que está sob a pasta “Animações” e insira uma instância do MovieClip “Animação 00″ nele. Para isso basta arrastá-la da Library para o Stage, posicionando como segue:
34. Clique no frame 79 e crie um frame (F5). Caso seja necessário, exclua todos os frames desta layer a partir do 80, assim só teremos frames do 1 ao 79. Criando objetos que serão usados nas animações- Fade In/Out35. Crie um novo símbolo Gráfico e denomine-o como Quadrado que consiste em um quadrado preto de 100×100 pixels, posicionando-o em X:0 e Y:0. Não o coloque no Stage ainda. 36. Crie um novo símbolo de MovieClip e denomine-o como “Quadrado Pto-Am”. 37. Chame suas duas layers de “AS” e “Quadrado Fade”. 38. No primeiro frame da layer “Quadrado Fade”, arraste uma instância do símbolo gráfico “Quadrado” posicionando-o em X:-50 e Y:-50.] 39. Clique no frame 6 da mesma layer e tecle F6 para criar uma cópia do keyframe 1. Criando as animações com as imagens35. Crie um novo MovieClip (Insert > New Symbol, escolha MovieClip) e denomine-o como “Animação 01″. 36. Crie a seguinte estrutura de layers:
Obs.: para criar a camada de máscara, clique com o botão direito do mouse sobre ela e opte por Mask no menu de contexto. 37. Crie um keyframe na layer Fundo 1 e arraste para ele uma instância de uma imagem previamente importada para a library, posicionando-a em X: -312.5 e Y: -207.5. Observe que a imagem tem o mesmo tamanho do Stage (625 x 415px). 38. Clique no frame 60 e insira um frame (F5). 39. Clique no frame 60 da layer Grade e tecle F5 para inserir frames até aí. 40. Volte ao frame 1 da mesma layer e arraste uma instância da Grade* para o Stage, posicionando-a no mesmo lugar da imagem. (*) Grade é uma imagem de 625 x 415 px que preparei num software externo (no meu caso foi no Fireworks, mas poderia ser também no Photoshop ou similares), você pode obter uma cópia desta imagem no fonte deste tutorial. Basicamente é um retângulo onde recortei retangulos menores com bordas arredondadas. 41. Agora vamos criar a máscara para a animação da imagem miniatura. Crie um keyframe no frame 22 da layer “Máscara”, arraste uma instância do símbolo gráfico “Grade Duplo Hor gr”* para a mesma e posicione-o em X: 107.5 e Y: -207.5. (*)No Fireworks eu criei previamente um retângulo com o tamanho de dois quadrados de nossa grade, importei-o para o Flash, transformei-o em símbolo gráfico denominando-o “Grade Duplo Hor gr”. 42. Clique no frame 53 e crie frames até ele teclando F5. Nossa máscara está pronta. 43. Crie um keyframe no frame 22 da layer “Miniatura 01″ e arraste uma istância do “M01 gr” (imagem importada previamente para a Library, depois de ser preparada no Fireworks), posicionando-o em X: 312.5 e Y: -207.5 que é a posição inicial da animação. 44. Crie uma cópia do keyframe no frame 31 teclando F6, mas reposicione-o com as mesmas coordenadas da Máscara. 45. Crie um Motion Tween entre qualquer um destes frames, mas desta vez, altere o Ease para 100. 46. Crie uma cópia do keyframe no frame 44 e no 53 teclando F6. 47. Clique no frame 53, selecione a miniatura e reposicione-a em X: -102.5 e Y: -206.5, assim a miniatura entrará pela esquerda e sairá pela direita. Se necessário, exclua os frames 54 a 60 das duas layers que acabamos de trabalhar. Agora precisamos colocar na layer Fade In/Out o respectivo efeito. Então vamos fazer uma “pausa” para preparálo como um símbolo de MovieClip, pois ele será usado nas outras animações, assim diminuímos o tamanho do arquivo. - Criando o Fade In/Out48. Crie um novo símbolo de Movie Clip (Insert > New Symbol; Ctrl + F8) e denomine-o como “Fade In-Out”. 49. Crie a seguinte estrutura de layers:
Para ficar mais fácil a localização, chameia as colunas da esquerda para a direita com nome de letras e as linhas de baixo para cima com números de 1 a 4. 50. Crie um novo símbolo de MovieClip e denomine-o “Quadrado Pto-Am”. 51. Neste MC (MovieClip), crie a seguinte estrutura de layers:
52. Crie um keyframe no frame 6 da layer “AS”, abra o painel Actions (F9) e digite: stop(); 53. Crie um novo símbolo Gráfico e denomine-o como Quadrado. Desenhe um quadrado preto com bordas arredondadas (ou importe-o, se o desenhou fora do Flash). 54. Clique no frame 6 desta mesma layer e mude a propriedade Color da cópia do símbolo Gráfico que acabamos de copiar neste frame para Tint (cor: #FFFF00, amarelo). 55. Clique em qualquer frame entre o 1 e o 6 para criar um Motion Tween. 56. Volte para o MC Fade In-Out e no frame 1 da layer a4, arraste uma instância do “Quadrado Pto-Am” para a posição X:-312 e Y:-207.5 57. Use o mesmo procedimento anterior que utilizamos para criar o “Quadrado Pto-Am” para criar o símbolo de MC chamado “Quadrado Am-Transp”, só que o quadrado inicial é Amarelo e o final é transparente (Alpha = 0%). 58. Voltando para o MC Fade In-Out, crie um Keyframe no frame 13 da layer a4 e arraste uma instância do “Quadrado Am-Transp” para ele na mesma posição do anterior. Com isso faremos o quadrado sumir. 59. Faremos agora procedimentos análogos alterando os posicionamentos como segue: Layer a3 Layer b4 Layer a2 Layer b3 Layer c4 Layer a1 Layer b2 Layer c3 Layer d4 Layer b1 Layer c2 Layer d3 Layer e4 Layer c1 Layer d2 Layer e3 Layer f4 Layer d1 Layer e2 Layer f3 Layer e1 Layer f2 Layer f1 Ao final, deve ter algo parecido com isso:
60. Volte para o frame 1 do MC “Anim 01″ e arraste uma instância do MC “Fade In-Out” que acabamos de criar para a posição X: -312.5 Y:-207.5 Se necessário, exclua todos os frames desta layer do 26 em diante, deixando frames apenas do 1 ao 25. 61. Crie um keyframe no frame 60 da layer “AS”, abra o painel Actions (F9) e digite: stop(); 62. De maneira análoga você preparará os MCs Animação 02, Animação 03, …, Animação 10. 63. Volte para a cena principal e crie um keyframe no frame 80 da layer 01 (dentro da pasta Animações). Obs.: se houver algum frame a partir do 80 na layer 00 exclua-os! 64. Arraste uma instância do MC “Animação 01″ para a posição X:0 Y:0 e exclua todos os frames a partir do 141 desta layer. 65. Crie um keyframe no frame 128 da layer 02. 66. Arraste uma instância do MC “Animação 02″ para a posição X:0 Y:0 e exclua todos os frames a partir do 189 desta layer. 67. Crie um keyframe no frame 176 da layer 03. 68. Arraste uma instância do MC “Animação 03″ para a posição X:0 Y:0 e exclua todos os frames a partir do 236 desta layer. 69. Crie um keyframe no frame 223 da layer 04. 70. Arraste uma instância do MC “Animação 04″ para a posição X:0 Y:0 e exclua todos os frames a partir do 284 desta layer. 71. Crie um keyframe no frame 271 da layer 05. 72. Arraste uma instância do MC “Animação 05″ para a posição X:0 Y:0 e exclua todos os frames a partir do 332 desta layer. 73. Crie um keyframe no frame 319 da layer 06. 74. Arraste uma instância do MC “Animação 06″ para a posição X:0 Y:0 e exclua todos os frames a partir do 380 desta layer. 75. Crie um keyframe no frame 367 da layer 07. 76. Arraste uma instância do MC “Animação 07″ para a posição X:0 Y:0 e exclua todos os frames a partir do 428 desta layer. 77. Crie um keyframe no frame 415 da layer 08. 78. Arraste uma instância do MC “Animação 08″ para a posição X:0 Y:0 e exclua todos os frames a partir do 476 desta layer. 79. Crie um keyframe no frame 463 da layer 09. 80. Arraste uma instância do MC “Animação 09″ para a posição X:0 Y:0 e exclua todos os frames a partir do 524 desta layer. 81. Crie um keyframe no frame 511 da layer 10. 82. Arraste uma instância do MC “Animação 10 ” para a posição X:0 Y:0 83. Dê um Ctrl+Enter para testar a animação e pronto. Para incrementar você pode colocar uma música de fundo, mas se fizer isso, não esqueça de fazer também um Preload, ok? |
Escrito por 
Muito legal essa intro!
Mas como eu faço pra introduzir ela no site pelo dreamweaver?
Para colocar ela no DW só fazer o seguinte:
Vai em “insert/media/flash” ou no atalho “ctrl+alt+f”
Espero ajudar abraços
e otimo tutorial!!!