All for Joomla All for Webmasters

Slideshow em Flash

Todos os links do tutorial contém imagens para ajudar no tutorial à você se guiar.

Vou ensinar como fazer o header deste meu theme e diga adeus para scripts de slideshow ou gifs que demoram para carregar.

1. Você vai abrir um novo documento em ActionScript 2.0, apertar CTRL+J e ajustar as medidas do seu documento.
2. Clique em File, Import, Import to Library e importe as imagens que você quer usar para o slideshow.

Lembrando que antes de começar a fazer o slideshow, você já deve ter feito as imagens que quer usar nele, todas com o mesmo tamanho.

3. Depois, clique duas vezes em cima da Layer 1 (que fica ali na Timeline onde tem a linha do tempo) e renomeie para “imagem 1” ou para o nome que você quiser… é apenas para diferenciar uma layer (camada) da outra.

4. Existe uma barra do lado direito que tem as abas Properties e Library. Clique na aba Library, clique e arraste uma das imagens para o seu documento.

5. Alinhe direitinho a sua imagem na parte branca do documento do Flash, no canto esquerdo inferior. Depois, clique em Insert – Timeline – Layer e nomeie para “imagem 2”. Arraste uma nova imagem para o documento, alinhe-a no canto direito superior esquerdo e pronto!

6. Na linha do tempo, clique no primeiro quadradinho embaixo do número 20 e aperte F6. Agora, aperte o segundo quadradinho embaixo do número 20 e aperte F6 novamente. Vai ficam assim.

Se quiser que o slide seja da imagem 1 para a imagem 2, arraste a layer “imagem 1” para cima da layer “imagem 2” na caixa de layers.

7. Na primeira layer, você vai selecionar o quadradinho embaixo do 40 e apertar F6. Você viu que ficou um quadradinho cinza com uma bolinha dentro bem embaixo do 40? Clique com o botão direito em cima dele e depois em Remove Frames. Então a Timeline vai ficar assim.

8. Na primeira layer, há dois retângulos cinza grandes na linha do tempo. Um do 0 até o 19, e um do 20 até o 39. Nesse segundo retângulo, o que vai de 20 até 39, clique com o botão direito no meio desse retângulo e depois em Create Motion Tween.

Se aparecer qualquer quadro de atenção, clique para continuar (algo como Continue ou OK).

9. Na segunda layer, a layer da “imagem 2”, você vai clicar no quadradinho embaixo do 60 e apertar F6. Lembrando que deve ser o quadradinho que está na mesma reta da layer “imagem 2”. Se você usar o quadradinho 60 da layer “imagem 1”, não vai dar certo.

Do passo 8 ao 9, a Timeline vai ficar assim.

10. Na sua Motion Tween que agora é um retângulo azul clarinho, clique na bolinha, que fica logo no primeiro frame (quadro) da sua Motion Tween. Depois, vá na aba Properties (a aba ao lado de Libraty), depois, clique em cima da imagem que você está usando e depois, nessa barra, vai aparecer uma série de configurações… e tem “Color Effect” e embaixo: Style. Na frente desse Style, tem um menu-drop-down. Quando você clica, tem várias opções, como Brightness, Alpha… clique em Alpha.

Essa é a tela com todas as instruções.

11. Embaixo aparecerá: Alpha e uma linha com uma porcentagem. Coloque 100.

12. Agora, vá na sua Motion Tween e clique no último quadradinho da sua Motion Tween (aquele retângulo azul claro da sua Timeline). Repare que o ponteiro vermelho que indica o frame vai parar bem em cima dele. Clique na imagem novamente, vá ao Color Effects, Style e em Alpha coloque 0.

Vamos ver como está ficando? Aperte Ctrl+Enter.

Você quer que a imagem mude de uma para a outra e depois pare? Não quer uma animação repentina? Então atenção:

13. No quadrinho 60 da sua linha do tempo tem um quadradinho com uma bolinha preta dentro, não? Clique nesse quadrado e aperte F9. Vai abrir uma janela. Dentro dessa janela, cole:

stop();

Clique aqui para ver a tela.

Agora feche. Vamos ver como ficou? Aperte Ctrl+Enter de novo.

Todo frame do Flash que tiver uma aciton, ele sempre terá um “a” dentro… reparou?

Pronto! Esse é o básico. Breve eu ensinarei como fazer um slide contínuo e com mais imagens!

Resultado final aqui.