Post tageado como prototype
Aplicando o Lightbox 2 em sua página
Postado por Weverton Naves em HTML/CSS/Javascript. 13/Março/2008.
Galera, já surgiu aquela necessidade de fazer uma visualização de fotos mais eficiente e rápida de fazer.
Então, eis a solução, o LightBox 2 (by Lokesh Dhakar). Existem muitos lightboxes por aí, mas esse eu acho o mais simples de usar, e mais direto.
O lightbox utiliza o framework prototype e a biblioteca de efeitos Scriptaculous.
Vamos aprender aqui á usá-lo. Baixe aqui o exemplo.
##INTALAÇÃO
<script type=”text/javascript” src=”js/prototype.js” mce_src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder” mce_src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js” mce_src=”js/lightbox.js”></script>
<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” media=”screen” />
3º Coloque as imagens da pasta images no seu site, e cheque se no arquivo .css, as imagens prevlabel.gif e nextlabel.gif estão referenciadas corretamente, e também as imagens loading.gif e closelabel.gif no arquivo lightbox.js.
http://www.huddletogether.com/projects/lightbox2/
##ATIVAÇÃO
1º Nos links que você quer abrir o lightbox, só adicionar o atributo rel=”lightbox” na tag <a>:
O atributo title informa qual será o título do box.
2º Para um grupo de imagens, onde os botões de próximo e anterior serão ativados, coloque o nome do imageset entre chaves, assim:
<a href=”imagens/imagem1.jpg” mce_href=”imagens/imagem1.jpg” rel=”lightbox[setImage]“>Abrir imagem 1</a><a href=”imagens/imagem2.jpg” mce_href=”imagens/imagem2.jpg” rel=”lightbox[setImage]“>Abrir imagem 2</a>
<a href=”imagens/imagem3.jpg” mce_href=”imagens/imagem3.jpg” rel=”lightbox[setImage]“>Abrir imagem 3</a>
Isso aí galera. Prático, fácil e rápido de instalar. Vale a pena usar!
Lembrando que não dá pra abrir .swf via lightbox. A não ser que seja feita uma alteração no código .js.
Animação dinâmica com prototype, função fadeMotion
Postado por Weverton Naves em ActionScript. 6/Março/2008.
Olá. Novamente. Estou aí no segundo artigo de Actionscript. E agora eu não paro mais.
Vou compartilhar com vocês agora uma função que me é muito útil no dia-a-dia do desenvolvimento de animações dinâmicas, a função fadeMotion. Ela na verdade é uma melhoria (e bota melhoria nisso), de um cálculo que peguei na internet à um tempo atrás, para fazer o posicionamento de movieclips com um efeito “deslizante”. Para facilitar ainda mais o manuseio, eu criei um prototype (que utilizarei em alguns artigos) para a classe MovieClip.
Quando aplicada a função fadeMotion, o clipe irá “deslizar” para os valores _x,_y,_width,_height,_alpha informados, de acordo com a velocidade definida.
Versão de AS: ActionScrip 2.0
Compatibilidade: Flash Player 6 ++
Dificuldade de produção: 6
Dificuldade de aplicação: 6
Produzido em: Versão inicial – 2hs
1º Crie um arquivo de ActionScript (extensão .as), e nomeie-o como “MovieClipProts”. Neste arquivo, eu costumo colocar todos os prototypes úteis para MovieClip.
Para incluir este arquivo no seu flash, você pode colocar o .as na mesma pasta e utilizar o seguinte comando:
#include “MovieClipProts.as” Confira o post completo »Replace String com Prototype
Postado por Weverton Naves em ActionScript. 29/Fevereiro/2008.
Vou mandar para vocês um código alidádo ao método prototype da classe String, que nos traz a funcionalidade replace igual á do javascript, onde você substitui um pedaço de uma string, por outro de sua preferência.
O código foi baseado no de Thyago Mendes, que pode ser encontrado neste link:
http://forum.wmonline.com.br/lofiversion/index.php/t24418.html
O fato é que o código de base não substituia strings com mais de um caractere. Daí então eu fiz uma adaptação (que gerou o dobro de linhas de código) para implantar essa nova funcionalidade.
Segue o prototype:
var dbLetras:Array = this.split(”);
var dbSubs:Array = replac.split(”);
if (orig.length>1) {
var strRep = dbLetras.join(”);
while (strRep.indexOf(orig)>=0) {
var ind = this.indexOf(orig);
var strAdd = dbSubs.join(”);
dbLetras.splice(ind,orig.length,strAdd);
strRep = dbLetras.join(”);
}
} else {
if (z == undefined) {
z = this.lastIndexOf(orig);
}
for (var i = 0, n = 0; i<dbLetras.length && n<z; i++) {
if (dbLetras[i] == orig) {
dbLetras[i] = replac;
n++;
}
}
}
return dbLetras.join(”);
};
Para fazer a chamada ao método, segue um exemplo:
var meuTexto = “Weverton Naves”;var textoSubstituido = meuTexto.replace(“Weverton”,”Tom”);
trace(textoSubstituido )
Esse código eu posso garantir que será muito útil (não que os outros não sejam, mais esse precisamos com mais frequencia).
Você pode baixar um exemplo aqui.
Função de Voltar com Prototype (Animação Reversa)
Postado por Weverton Naves em ActionScript. 13/Fevereiro/2008.
Alow galera.
Quem nunca teve aquela necessidade de voltar uma animação de um MovieClip via Actionscript, sem precisar de refazer a animação, seja de um botão ou até mesmo de um movimento complexo. Para isso, coloque o seguinte código no primeiro frame do seu flash (ou crie um arquivo .as para ser compartilhado e inclua-o):
MovieClip.prototype.voltar = function(frame, qFrm) {//cria o movieClp de controle
var voltarControl = this.createEmptyMovieClip(“voltarControl”, this.getNextHighestDepth());
//averigua se a veriável frame é indefinida, e seta como frame 1
if (frame == undefined) {
frame = 1;
}
//se a qFrm não for definida, pula de 1 em 1
if (pStop == undefined) {
voltarControl.onEnterFrame = function() {
if (this._parent._currentframe != frame) {
this._parent.prevFrame();
} else {
delete this.onEnterFrame;
}
};
} else {
//se a qFrm for definida, pula na qtd informada
voltarControl.onEnterFrame = function() {
if (this._parent._currentframe>frame) {
this._parent.gotoAndStop(this._parent._currentframe-qFrm);
//vendo o restante
if (this._parent._currentframe<=qFrm) {
qFrm = this._parent._currentframe-1;
}
} else {
delete this.onEnterFrame;
}
};
}
};
A sintaxe da função é meuMc.voltar(frame,qFrm);
frame > Até qual frame você que que volte a animação, se não informado, volta até o 0;
qFrm > Informa de quantos em quantos frames a animação deve voltar, se não informado, o valor padrão é 1. Caso seja informado 3, por exemplo, a animação volta de 3 em 3 frames, sendo mais rápida.
Para interromper este prototype, caso necessário, é só deletar o onEnterFrame que fica no voltarControl, desta maneira:
delete meuMc.voltarControl.onEnterFrame;É isso aí galera. Espero que ajude.
Baixe os arquivos aqui.
O método prototype para a classe MovieClip
Postado por Weverton Naves em ActionScript. 7/Fevereiro/2008.
Muita gente não conhece o poder desse método não muito divulgado para a classe MovieClip. Eu mesmo demorei para perceber os benefícios existentes. Pra falar a verdade ele é bem mais útil para quem reutiliza muito código, tipo, sempre utiliza aquela função para animar um objeto ou para realizar determinada ação.
Ele é na verdade um economizador de tempo.
Pra que serve o prototype?
Prototype é tem o poder de acrescentar um novo método para a classe MovieClip. Isto é, você pode utilizar aquela função famosa que você usa toda vez que lança mão do flash para seus trabalhos mirabolantes, de forma como se tivesse chamando um loadMovie, que é um método padrão da classe.
Exemplo prático:
Vamos adicionar uma função (maneira mais usada) como método da classe MovieClip:
trace(x*y);
}
Prático não? Agora você pode chamar sua função assim:
meuMC.multiplicacao(2,4) //retorna 8Daí então fica a liberdade de viajar nas funções..srsr.
Lembrando que você pode adicionar o código do prototype no começo do seu filme ou simplesmente criar um arquivo .as, onde você irá incluir em todo arquivo que precisar usá-lo.
Abs.
-
Publicidade
Compartilhe
Creative Commons
