Piecemaker 3D Flash Slide: Como funciona?



Vimos por aí na internet muitos slides de imagens bem legais em jquery e outros...
Mas um slide em especial me chamou muito a atenção: O slide The Piecemaker2, um slide open source em Flash e xml que tem plugin até para Wordpress...

Andei estudando o código-fonte desse slide e gostei muito do seu funcionamento.

No site modularweb.net você confere o demo do slide além da documentação e tutorial de como usá-lo no seu código HTML, até mesmo no wordpress...

Para dar água na boca, confira o que o Piecemaker Flash 3D Slide nos oferece:

     * Ilimitados efeitos de transição
     * A capacidade de incluir arquivos SWF e vídeos
     * Melhor navegação (usando as dicas)
     * Sombras animadas

Também é inteiramente baseado em XML, HTML e o CSS foi melhorado em relação ao primeiro, permitindo que os caracteres especiais possam ser utilizados. Além disso, as imagens agora podem conter links para outros websites.

 
E no WordPress?

Muitos leitores queriam usar a galeria Piecemaker original em seus blogs WordPress - tanto que o site NETTUTS + publicou um tutorial (em inglês) explicando como fazer exatamente isso.

O Piecemaker 2 é open source, fique à vontade para baixá-lo, usá-lo em qualquer projeto que você gosta, aprender com ele, modificá-lo e melhorá-lo se você puder. Gostaríamos de ver o que você faz com ele.




Aqui vai um exemplo de arquivo HTML com o slide, tirado do site oficial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The Piecemaker by Modularweb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "piecemaker.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,
params, null);
</script>
</head>
<body>
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
</body>
</html>

Acesse o site oficial e faça o download...e divirta-se...



7 comentários:

  1. Boa garoto Junior, estou neste exato momento estudando este Slide..para poder incorpora-lo no querido WordPress

    ResponderExcluir
  2. Poxa camarada, muito legal mesmo, mas tentei tantas vezes que perdi a conta. sera que vc ppderia me ajudar nisso!? Ficaria muito agradecido,

    meu msn é: diniz-cardoso@hotmail.com..estou sempre na linha, se puder me add acredito que juntos pderemos resolver esta qestão.

    Mais uma vez ovrigado pelo post e continue o bom rabalho.

    ResponderExcluir
  3. Olá Diniz tudo bem??
    Esse slide é sim um pouco complicado de se usar...

    mas dê uma olhada nesse template grátis você pode estudar o código fonte dele e ver como exatamente ele é incluído no código HTML ok? Faça o download do tema e veja todos os arquivos...qqr dúvida estamos aí!!
    Aí vai o link:

    http://www.templatemo.com/preview/templatemo_281_chrome

    Um abraço!
    @junim_ramos

    ResponderExcluir
  4. o piecemaker não funciona corretamente em versões muito antigas do ie e na versão atual (ie9 ) vc conheceria alguma maneira de se usar na versão atual do ie sem ocorrer esses erros??

    ResponderExcluir
  5. Eu não consigo colocar swf no lugar das imagens.Tem como?

    ResponderExcluir
  6. Como ajustar a largura e altura do slide?

    ResponderExcluir
  7. Boas
    Consigo implementar o Piecemaker, mas estou tentando usar simultaneamente com um smooth scroll mas tenho tido problemas de compatibilidade alguém me pode ajudar?

    Cumprimentos,
    Francisco Costa

    ResponderExcluir