Bom pessoal, estive um tempo, como posso dizer?[...] Em stand by, por motivos de tempo e cansaço físico...

Mas voltei, e preparei uma ótima surpresa!!! 

Neste tutorial, vamos aprender a criar um SlideShow de .swf ou .jpg dinâmico, esse Slideshow é mais leve porque não precisa da linha de tempo para setar um tempo entre um slide e outro, vamos controlar o tempo dos slide através da ActionScript.

Eu estou ultilizando imagens .jpg externas, mas você pode fazer com .swf também, basta modificar o caminho do arquivo no Array, explicarei melhor mais na frente.

Vamos ao que interessa...

Temos duas camadas uma que chamaremos de “AS” e a outra de “Objetos” como mostrado na Fig1. 

Fig. 1

Vamos trabalhar primeiro na camada “Objetos”, aqui colocaremos toda a parte do designer e um nome carregando, se preferir estilize seu carregando do modo que quiser, no meu caso crie um Movie Clip com uma linha arredondada girando, exemplo segue na Fig2.

Obs.: Se for slides de swf, você pode colocar um preloader no próprio swf externo.

Fig. 2

Crie uma pasta chamada slides, e coloque seus .swfs e/ou .jpgs nomeados de 01, 02, 03, 04...

Feito o designer, partiremos para a camada “AS”, e vamos colocar nesse frame a ActionScript abaixo:

01- stop();
02- /*...Slideshow de swfs externos com loop...*/
03- /*.......Programado por Raphael Bruno......*/
04- var tempo = 5000;
05- var area = this.createEmptyMovieClip("area", this.getNextHighestDepth());
06- _root.area._x = 0;
07- _root.area._y = 75;

08- var slides = new Array();
09- slides[0] = "slides/slide_01.jpg";
10- slides[1] = "slides/slide_02.jpg";
11- slides[2] = "slides/slide_03.jpg";
12- slides[3] = "slides/slide_04.jpg";

13- var i = 0;
14- function novoSlide(){
15-   area.loadMovie(slides[i]);
16-   i++;
17-   trace(i);
18-   if(i==slides.length){
19-     i=0;
20-   }
21-  }
22- novoSlide();
23- setInterval(novoSlide, tempo);

Achou complicado de entender... ?
Não tem problema, eu explicarei todas as linhas. 

01 - Afirmo que o Filme começa parado.

04 - Afirmo que a variavel “tempo” tempo tem o valor de 5000, esse valor serve para da um intervalo entre um slide e outro, é contado com milésimos, 5000 de milésimos equivale a 5 segundos, se precisa de um tempo maior com por exemplo 8 segundos, então troque esse valor de 5000 para 8000.

05 - Crio um MovieClip vazio com o nome de instancia de “area”.

06 - Afirmo o posicionamento horizontal do MovieClip criado.

07 - Afirmo o posicionamento vertical do MovieClip criado.

08 - Declaro o array, Array é um bloco de objetos, nesse caso os objetos são os slides, que são todos os .jpgs externos da pasta slides.

09 - Caminho do Slide 1

10 - Caminho do Slide 2

11 - Caminho do Slide 3

12 - Caminho do Slide 4

13 - Variavel “i” tem o valor 0

14 - Crio uma função chamada novoSlide, as cinco linhas abaixo será o conteúdo desta função.

15 - Carrega o swf do array slide com o valor de i.

16 - Após carregado o novo objeto é acrentado + 1 ao valor de i. 

17 - Não precisa se preocupar com esse trace, funciona perfeitamente sem o mesmo, uso apenas em ambiente de teste, no caso ele me retorna o valor de “i” todas as vezes que a função novoSlide é executado.

18 - Condiciona se o valor de i chegar a ter o mesmo valor de objetos do array...

19 - ...Então o valor de i será 0, e assim recomeça o loop de slide.

22 - Executo a função novoSlide

23 - Afirma que a cada 5 segundos será executada a função novoSlide

Se precisar colocar mas slide, por exemplo se quiser adicionar mais 2 slides, tera que acrecentar os slides na pasta slides e adicionar no Array, que o trabalho pesado a programação que eu criei se encarrega de fazer.

Então, para acrescentar mais 2 slides, o Array que era assim...

slides[0] = "slides/slide_01.jpg";
slides[1] = "slides/slide_02.jpg";
slides[2] = "slides/slide_03.jpg";
slides[3] = "slides/slide_04.jpg";

Ficará assim...

slides[0] = "slides/slide_01.jpg";
slides[1] = "slides/slide_02.jpg";
slides[2] = "slides/slide_03.jpg";
slides[3] = "slides/slide_04.jpg";
slides[4] = "slides/slide_05.jpg";
slides[5] = "slides/slide_06.jpg"; 

Pronto, agora nosso SlideShow terá 6 slides, funciona do mesmo jeito se quiser acrescentar ou retirar... a técnica será como apresentado.

Então é isso, espero que tenham gostado, abraço !!!

comentários (2)

01° -   Ericksen Silva comentou:

25 de Novembro de 2009

Muito bom tutorial ajuda muito pra mim que estou começando agora nessa área.
valeu..

02° -   Eduardo Oliveira comentou:

19 de Novembro de 2009

Muito show, essa matéria vou experimentar...estou entrando no meio de Web Design (cursando) estou criando o meu site e gostaria de colocar algumas "animações" ou interações deste tipo tbm. mas valeu parabéns pela matéria...mande mais artigos nesse segmento.