Flash SlideShow


Podemos encontrar centenas de widgets grátis em JavaScript feitos utilizando Scriptaculous, Prototype, Mootools, Jquery e muitos outros, mas em Flash não temos este compartilhamento de código. É muito mais comum encontrar-mos sites que vendem componentes em Flash( que quase sempre são código fechado ) que blogs que compartilham suas soluções com outros desenvolvedores.

Claro que isto não é uma regra, temos vários sites muito bons que compartilham suas soluções e pensando desta forma vamos tentar compartilhar, sempre que possível, as soluções que criamos para nossos projetos em AS3.

Vamos começar compartilhando um slideshow que fizemos para os dois últimos projetos que estamos desenvolvendo.

Veja aqui um exemplo da galeria funcionando: Exemplo

É uma galeria simples que utiliza os efeitos e transições disponíveis na classe TransitionManager disponibilizada pela Adobe. As imagens do slideshow são carregadas dinamicamente por um XML.

Abaixo o código de como utilizar:

1
2
3
4
5
6
7
8
9
10
11

  import com.slideshow.SlideShow;

  var slideShow:SlideShow = new SlideShow(slideShowContainer,"assets/xmlfile.xml");  
  slideShow.params.displayControls = true; 
  slideShow.params.displayPreloader = true; 
  slideShow.params.preloaderBgColor = 0x00FFFF; 
  slideShow.params.randomTransition = true; 
  slideShow.params.transitions = ["Blinds","Fade","Fly","Iris","Pixel","Wipe","Zoom"];
  slideShow.createSlides();
  slideShowContainer.addChild(slideShow);

Explicando o código:
Linha 1 : Criamos o nosso SlideShow e no construtor indicamos qual será o XML com as informações das fotos, também temos um parâmetro opcional para o tempo entre a troca de imagens, o default é 7 segundas.
Linha 2 : Propriedade que indica que deverá ser mostrado os botões de pause, avançar e voltar imagens.
Linha 3 : Indica que deverá ser mostrado a barra de preloader.
Linha 4 : Cor da barra de preloader.
Linha 5 : Indica que o efeitos deverão ser aleatórios.
Linha 6 : Efeitos possíveis.
Linha 7 : Cria slideshow.
Linha 8 : Adicionar slideShow em um MovieClip ou Sprite.

XML para as imagens:
1
2
3
4
5
6
7
8
9
10
11
12
13

<slideshow>
    <slide id="1">
        <url>assets/images/01.jpg</url>
    </slide>
    <slide id="2">
        <url>assets/images/02.jpg</url>
    </slide>
    .
    .
    .

</slideshow>

É possível implementar seu próprios efeitos, basta acrescentar o novo efeito na classe PictureLoader.as. Vale lembrar que o código foi desenvolvido em um prazo muito curto e provavelmente existem melhorias e refatoramentos que podem ser interessantes. Portante sinta-se livre para realizar alterações e nós também ficariamos felizes em receber contribuição :D.

Abaixo um arquivo ZIP com as duas classes necessárias para o slideshow(PictureLoader.as e SlideShow.as) e um exemplo de uso. Download


15 Comentários to “Flash SlideShow”

Carlos Henrique diz:

Gostei muito deste tutorial, mas não consegui aprender muito, mas valei


Bruno diz:

Daniel, achei muito legal o tuto, porém como eu faço para definir as dimensões do swf? Eu notei que vc utilizou as dimensões padrões do flash (600×400 px). Eu tentei mudar para 350×200 px, porém as fotos não acompanham o tamanho do meu swf. Como eu faço para que as fotos tb acompanhem as dimensões do swf?

Mais uma vez, obrigado pela iniciativa de postar um tutorial sobre um assunto q eh extremamente dificil de ser encontrado na Internet.

Um abraço.


daniel lopes diz:

Olá @Bruno, se você reparar no construtor da classe SlideShow verá que precisamo passar quem será o container do slideshow.

SlideShow(scope:MovieClip, xmlFile:String, time:Number = 7000)

E o tamanho do slideshow é calculado com base neste container.

Abraços.

ps. Na verdade este post não é um tutorial :D … só estou compartilhando uma de minhas classes reutilizáveis em AS3.


andre cavalcanti diz:

oi Tem como vc me manda o arquivo fla. muito obrigado…


daniel lopes diz:

Não é necessário um fla para se utilizar as classes, baixa o arquivo do link download acima. Veja a pasta usage dentro do arquivo que fizer o download, neste pasta está um exemplo de uso com os flas do exemplo.


diego diz:

Daniel muito bom o tutorial. Queria saber se você poderia me da uma luz de como construir um xml dinâmico para exibição das imagens em flash?


daniel Lopes diz:

@diego, da uma olhada no código fonte do Slideshow, é exatamente isso que ele faz. Só desconsidere as partições de animação e paginação.


Flávio diz:

Maravilhoso seu tutorial, parabens !!!


Bruno diz:

Opa, otimo tutorial o seu… eu tava meio que sem tempo pra fazer um e utilizei o seu slide, só que eu tentei redimensionar o tamanho do palco para 440px/205px mas não deu certo, fico meio que desconjuntado, eu sou leigo nesse assunto de flash tem como tu me da uma lampada? eu só queria deixar o slide nessas dimensões citadas acima, mas não consegui, ajuda aii tio.

Vlw, abraçoo.


Helcio diz:

Muito bom seu tutorial, apartir dele tive i´deias para outros um grande abraço.


Guilherme diz:

Simples rapido e pratico…Parabens!


Carlos diz:

Olá Daniel, muito obrigado por compartilhar; mas tenho uma dúvida, eu fiz um slideshow utilizando a sua classe, e depois inseri esse swf dentro de outro, e não consigo que ele pegue o xml nem as imagens, alguma idéia?


Cristina diz:

Oi gostei muito mas gostaria de saber como posso redimensionar as fotos e gsotaria da sua sugestão tenho que sempre colocar no ar um jornal e gostaria de uma ideia sua para que o leitor lei a o jornal não vendo uma imagem e entrando na outra mas como se ele estivesse vendo um jornal virtual pode me ajudar?

Obrigada

e aguardo respostas


Matheus diz:

Muito bom.Era o que eu precisava. Abs e obrigado


paulo rodrigo diz:

oi, eu tento por mais slides e n consigo, como se faz?


Comentário