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.
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
20 Comentários to “Flash SlideShow”
Carlos Henrique diz:
16/08/2008 em 12:02 AM
Gostei muito deste tutorial, mas não consegui aprender muito, mas valei
Bruno diz:
13/02/2009 em 08:56 AM
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:
14/02/2009 em 02:45 PM
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:
14/06/2009 em 03:44 PM
oi Tem como vc me manda o arquivo fla. muito obrigado…
daniel lopes diz:
14/06/2009 em 05:41 PM
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:
06/07/2009 em 11:29 PM
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:
07/07/2009 em 08:40 AM
@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:
29/08/2009 em 10:01 AM
Maravilhoso seu tutorial, parabens !!!
Bruno diz:
20/09/2009 em 04:41 PM
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:
25/09/2009 em 07:01 AM
Muito bom seu tutorial, apartir dele tive i´deias para outros um grande abraço.
Guilherme diz:
01/10/2009 em 11:57 AM
Simples rapido e pratico…Parabens!
Carlos diz:
10/10/2009 em 03:34 PM
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:
10/11/2009 em 08:30 AM
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:
18/02/2010 em 09:06 AM
Muito bom.Era o que eu precisava. Abs e obrigado
paulo rodrigo diz:
28/02/2010 em 12:21 PM
oi, eu tento por mais slides e n consigo, como se faz?
Consigo desenvolver no flash mx? Qual versão? diz:
06/07/2010 em 06:28 AM
Eu uso o flash mx 2002, será que é possivel criar esse slideshow nele? Muito bom a iniciativa, obrigado!
Joice Luan'na diz:
12/07/2010 em 02:48 PM
obrigada me ajudou muito bjs…
links of london charm bracelets diz:
21/07/2010 em 02:48 AM
louis vuitton handtaschen louis vuitton geldboerse pandora gucci geldboerse
Gilmar diz:
29/07/2010 em 02:40 PM
Muito bacana seu slideShow! Existe algum jeito de colocar texto dinâmico para cada foto via xml? De qualquer forma obrigado por liberar o dowload do mesmo, esta sendo de muita ajuda.
leonardo paiva diz:
02/08/2010 em 10:59 AM
Então tenho 2 dúvidas: 1- Quero colocar o slide no meu site. o arquivo zip que colocou como faço para por no meu blog.
2- tenho o programa 3d flash slide show, que prepara o slide legal bem rápido, mais o código de html que gera não funciona qndo coloco no meu blog no gadget -> adicionar html \ javascript. Será que tenho que configurar algo na página html para esse código funcionar no meu site… pode me ajudar.
Comentário
CATEGORIAS
HomeDesign
SEO
Empreendimento
Cifras
Ruby e Rails
Flex
Photoshop
Flash
XHTML/CSS
JavaScript
Variados
Database
Firefox
Projetos
3D
Projetos
TextMate
Smalltalk
Mac
Livros
ARQUIVO
08/2010 (5)07/2010 (2)
06/2010 (4)
05/2010 (4)
04/2010 (4)
03/2010 (5)
02/2010 (7)
01/2009 (4)
12/2009 (7)
11/2009 (4)
10/2009 (10)
09/2009 (7)
08/2009 (6)
07/2009 (12)
06/2009 (5)
05/2009 (6)
04/2009 (9)
03/2009 (14)
02/2009 (18)
01/2009 (14)
12/2008 (20)
11/2008 (18)
10/2008 (9)
09/2008 (12)
08/2008 (6)
07/2008 (12)
06/2008 (10)
05/2008 (15)
04/2008 (19)




Eventos e mais eventos
comentado por Jonathas Sampaio
Eventos e mais eventos
comentado por Alison Souza
Eventos e mais eventos
comentado por Daniel Lopes
Eventos e mais eventos
comentado por Jonathas Sampaio
Curso de Rails 3.0
comentado por hiago