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
15 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?
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
03/2010 (2)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)




Seja produtivo consumindo tomates
comentado por rafael
Botões de Logout
comentado por Leonardo
GAIA, o maior amigo do programador Flash
comentado por criação de sites
Seja produtivo consumindo tomates
comentado por Gabriel Sobrinho
Cifras: novas funcionalidades
comentado por Juarez P. A. Filho