Rogério Lino

Web development and tips

Javascript: replaceAll()

**UPDATE**: Ao invés de usar a função abaixo, utilize **split + join**. Conforme mostrado no post [http://rogeriolino.com/2009/01/07/javascript-benchmark-replaceall/](http://rogeriolino.com/2009/01/07/javascript-benchmark-replaceall/)

Creio que algumas pessoas já se depararam com a situação de ter que substituir um caracter ou uma string num texto. Tudo resolveria casa o replace() não substituisse só o primeiro token encontrado.

Por isso temos que criar nossa própria função para sair buscando os resultados repitidos. Abaixo segue uma simples função que realiza tal instrução:

function replaceAll(string, token, newtoken) {
    while (string.indexOf(token) != -1) {
        string = string.replace(token, newtoken);
    }
    return string;
}

Com a ajuda do indexOf() - que retorna a posição da string que queira achar ou -1 caso não encontre - podemos em poucas linhas resolver isso.

Enquanto ainda existir a string que queira substituir (indexOf != -1) substitua (replace).

Uso:

str = "Phasellus commodo gravida ligula. Vivamus libero eros, dignissim sit amet, imperdiet quis, condimentum ut, enim.";
window.alert(replaceAll(str, "a", "[A]"));

Wiki FlashMasters

Já tem algum tempo que está no ar a Wikipedia FlashMasters mas estava esperando juntar mais um pouco de conteúdo antes de divulgá-la aqui.

Lá você poderá tirar sua dúvida sobre algum comando ActionScript por exemplo, ou até mesmo deixar sua contribuíção. Assim como eu em Operadores, que também postei aqui no blog.

A intenção por trás da criação do Wiki está em ter o Help (ou um) do Flash traduzido para o português. Como o LiveDocs da Adobe.

Tirando muitas dúvida dos usuários Flash do Brasil. Que sempre reclamam de ter pouco conteúdo a respeito escrito em nosso idioma.

Sem esquecer também do Forum, bem rico em conteúdo. E contanto com os melhores Flash Users do Brasil para sanar sua(s) dúvida(s).

Javascript: Graphic Generator

Gráfico

Esses dias um pouco inspirado com a aula de Probabilidade e Estatística, resolvi fazer um script para gerar gráficos de barras.

Você cria um novo objeto Grafico (sem acento mesmo - new Grafico(n); ) passando o número de barras como parâmetro e então a partir dele com set’s e get’s você gera o seu gráfico.

Não vou explicar aqui linha por linha porque o código não está pequeno e também porque está bem simples de entender. Mas havendo alguma dúvida é só deixar um comentário que logo eu respondo.

Clique aqui para vê-lo funcionando.

O código que gerou o gráfico da imagem ao lado é o seguinte:

var grafico = new Grafico(11);
grafico.setSize("200px");
grafico.setTitle("Grafico de Barras");
grafico.setSource("Fonte: Fictícia");
grafico.setBarraSize(0, "80%");
grafico.setBarraLabel(0, "manga");
grafico.setBarraSize(1, "30%");
grafico.setBarraLabel(1, "banana");
grafico.setBarraSize(2, "50%");
grafico.setBarraLabel(2, "maracuja");
grafico.setBarraSize(3, "100%");
grafico.setBarraLabel(3, "melancia");
grafico.setBarraSize(4, "70%");
grafico.setBarraLabel(4, "maracuja");
grafico.setBarraSize(5, "76%");
grafico.setBarraLabel(5, "pera");
grafico.setBarraSize(6, "30%");
grafico.setBarraLabel(6, "uva");
grafico.setBarraSize(7, "47%");
grafico.setBarraLabel(7, "melao");
grafico.setBarraSize(8, "25%");
grafico.setBarraLabel(8, "laranja");
grafico.setBarraSize(9, "90%");
grafico.setBarraLabel(9, "abacaxi");
grafico.setBarraSize(10, "10%");
grafico.setBarraLabel(10, "kiwi");

[update]

Faça o download do exemplo aqui (.rar)

[/update]

ActionScript: Operadores

Operadores são caracteres que servem para especificar como combinar, comparar ou modificar os valores de um expressão. Operadores Mais Utilizados:

+ (adição)

Adiciona um número, variável numérica, à expressão ou concatena (une) Strings. Ex.:

var n:Number = A + 10;
var s:String = "Foo" + "bar";

+= (atribuição)

Atribui à expressão1 o valor da expressão1 mais o valor da expressão2. Ex.:

var s:String = "Foo";
s += " bar";
trace(s) // "Foo bar"

var n:Number = 10;
n += 2; 
trace(n) // 12

[] (acesso à array)

Inicialize uma nova array (vetor ou matriz) com os elementos especificados, ou acessa os elementos através de um índice (inteiro). Ex.:

// inicializando um vetor com 3 posições
var frutas:Array = ["banana", "manga", "uva"];

// minhaFruta irá receber "manga"
var minhaFruta:String = frutas[1];

// alterou o valor da posição 0 do vetor de "banana" para "abacaxi"
frutas[0] = "abacaxi";

// inicializando uma matriz 3 por 3
var matriz:Array = [
    [1, 2, 3], 
    [4, 5, 6], 
    [7, 8, 9]
]; 

// n recebe o valor da posição 2,2 da matriz, n = 5
var n:Number = matriz[2, 2]; 

= (atribui/recebe)

Atribui o valor da expressão2 (direita) à expressão1 (esquerda). Ex.:

var str:String = "Foobar";
var n:Number = 15;

(decremento)

Decrementa em 1 a variável. Caso venha antes da expressão (esquerda) terá maior relevância, a variável será decrementada primeiro, caso venha depois da expressão (direita) só será feita depois. Ex.:

var n1:Number = 10;
trace(--n1); // 9

var n2:Number = 10;
trace(n2--); // 10

/ (divisão)

Divide a expressão1 pela expressão2. Ex.:

var a:Number = 12;
var b:Number = 3;
trace(a / b); // saída: 4

== (igualdade)

Testa a igualdade de duas expressões. Ex.:

var a:Number = 5;
var b:Number = 10;
var c:Number = 5;

trace(a == b); // false
trace(a == c); // true

> (maior que)

Compara duas expressções e determina se a expressão1 é maior que a expressão2, se for retorna true. Ex.:

var a:Number = 5;
var b:Number = 10;

trace(a > b); // false
trace(b > a); // true

>= (maior ou igual que)

Compara duas expressões e determina se a expressão1 é maior ou igual que a expressão2, se for retorna true. Ex.:

var a:Number = 5;
var b:Number = 5;
var c:Number = 7;

trace(a >= b); // true
trace(c >= b); // true

++ (incremento)

Incrementa em 1 a variável. Caso venha antes da expressão (esquerda) terá maior relevância, a variável será incrementada primeiro, caso venha depois da expressão (direita) só será feita depois.

Ex.:

var n1:Number = 10;
trace(++n1); // 11

var n2:Number = 10;
trace(n2++); // 10

!= (desigualdade/diferente)

Testa a desigualdade de duas expressões. Ex.:

var a:Number = 5;
var b:Number = 10;
var c:Number = 5;

trace(a != b); // true
trace(a != c); // false

< (menor que)

Compara duas expressções e determina se a expressão1 é menor que a expressão2, se for retorna true. Ex.:

var a:Number = 5;
var b:Number = 10;

trace(a < b); // true
trace(b < a); // false

<= (menor igual que)

Compara duas expressões e determina se a expressão1 é menor ou igual que a expressão2, se for retorna true. Ex.:

var a:Number = 5;
var b:Number = 5;
var c:Number = 7;

trace(a <= b); // true
trace(b <= c); // true

&& (E lógico)

Executa uma operação booleana nos valores de ambas expressões. Ex.:

var n:Number = 50;
if ((n > 10) && (n < 80)) {
    trace("n está entre 10 e 80");
}

! (NÃO lógico)

Inverte o valor booleano da variável ou expressão (negação). Ex.:

var b:Boolean = false;
if (!b) {
    trace("Condição passada como true");
}

|| (OU lógico)

Executa uma operação booleana nos valores de ambas expressões. Ex.:

var n:Number = 100;
if ((n < 10) && (n > 80)) {
    trace("n é menor que 10 ou maior que 80");
}

% (módulo/mod)

Calcula o resto da divisão entre a expressão1 pela expressão2. Ex.:

var a:Number = 10;
var b:Number = 3;

trace(a%b); // 1

***** (multiplicação)

Multiplica a expressão1 pela expressão2. Ex.:

var a:Number = 4;
var b:Number = 3;

trace(a*b); // 12

- (subtração)

Usado para subtrair ou negar, transformar em negativo, expressões. Ex.:

var a:Number = 8;
var b:Number = 2;

trace(a-b); // 6
trace(-(a-b)); // -6

-= (atribuição de decremento)

Atribui à expressão1 o valor da expressão1 menos a expressão2. Ex.:

var a:Number = 5;
a -= 3;

trace(a); // 2

Para saber mais sobre operadores do Actionscript veja no próprio help do Flash, ou no LiveDocs da Adobe

Javascript: Image Preloader

Conforme prometido aqui um exemplo de preloader de imagem feito em Javascript:

Clique aqui para visualizar

var bgColor = "#FFFFFF";
var bgImage = "http://www.../loading.gif";
var bgRepeat = "no-repeat";
var bgPosition = "center center";
var borderWidth = "3px";
var borderStyle = "solid";
var borderColor = "#3366FF";

var loadImage = function(w, h, url, target) {
    var img = new Image(w, h);
    img.src = url;
    img.style.visibility = "hidden";
    var molde = document.createElement("div");
    molde.setAttribute("id", "molde");

    var style = molde.style;
    style.border = borderWidth+" "+borderStyle+" "+borderColor;
    style.background = bgColor+" url("+bgImage+") "+bgRepeat+" "+bgPosition;
    style.width = img.width+"px";
    style.height = img.height+"px";

    document.getElementById(target).appendChild(molde);
    molde.appendChild(img);
    img.onload = function() {
        this.style.visibility = "visible";
        molde.style.background = bgColor;
    }
}

Nesse caso ao invés de aplicar o background na tag img, apliquei numa div que funciona como uma moldura. E está de fácil personalização, bastando apenas alterar as variáveis globais.

O código é de fácil entendimento, deixa-se a imagem transparente e quando ela carregada (onload) ela “volta” a ser visível.

Para usar coloque isso no HTML:

/*
 * largura: largura da imagem em pixel
 * altura: altura da imagem em pixel
 * url: caminho para a imagem
 * alvo: id da tag aonde deverá ser adicionada a imagem
 */
var imagem = new loadImage(largura, altura, url, alvo);

Qualquer dúvida ou sugestão só comentar.

CSS: Loading Image

Podemos simular um pré-carregamento de uma imagem utilizando a propriedade CSS background setando um outra imagem, na qual informará o carregamento da imagem.

img {
    background: #ffffff url(loading.gif) no-repeat center center;
}

E pronto, mas uma observação um tanto lógica e óbvia que deve se fazer é sobre o tamanho da imagem de fundo, que deve ser pequena para ser mostrada rapidamente.

Aqui você vê um exemplo

Uma maneira mais útil de utilizar isso seria com javascript com a função onLoad para só mostrar a imagem depois dela totalmente carregada.

Liberando um tempo vago darei um update nesse post com o exemplo já utilizando javascript.

[update] Link para o exemplo com Javascript: http://rogeriolino.com/2007/03/21/javascript-image-preloader/ [/update]

Flash: Resize Proporcional

Acabei de responder no forum da FlashMasters um tópico que se tratava sobre a seguinte dúvida:

O membro queria saber alguma função que redimensiona-se um determinado objeto mas mantendo a sua proporção. Por exemplo um MovieClip de tamanho 400x200 se eu aumentar a largura em 100 tenho que aumentar a altura em 50. Isso devido a razão entre os dois valores.

Então com um lápis na mão podemos chegar a seguinte fórmula para uma nova altura caso altere sua largura:

**H = dW . H/W + H** Aonde: _ H: Altura_ _W: Largura_ _dX: delta da variável “X”_

Sabendo a fórmula para uma nova altura é facil chegar na da nova largura:

**W = dH . W/H + W**

Agora então mãos a obra com as Actions:

MovieClip.prototype.resizeW = function(w) {
    var dw = w - this._width;
    this._height += dw * (this._height / this._width);
    this._width = w;
}

MovieClip.prototype.resizeH = function(h) {
    var dh = h - this._height;
    this._width += dh * (this._width / this._height);
    this._height = h;
}

Para utilizar:

// redimensionando a partir da largura
MovieClip.resizeW(novaLargura);

// redimensionando a partir da altura
MovieClip.resizeH(novaAltura);

Espero que seja útil.

Javascript: Tooltip

Há algum tempo eu fiz um script de uma tooltip (aquela caixa que abre ao passar o mouse sobre algum link). Infelizmente o código não é dos menores, o que deixaria muito grande o post e sua explicação.

Mas não está difícil de entender. Qualquer dúvida é só deixar um comentário que eu comento logo abaixo explicando.

O seu funcionamento é bem simples. No HTML é adicionado uma div com position absolute com display igual a none. Com o document.onmousemove a posição do mouse é guardada em uma variável então ao passar o mouse sobre qualquer link o display da div (tooltip) muda para block e sua posição (x,y) é setada pela do mouse.

Para ver o exemplo clique aqui.

obs: o código (javascript) está junto com o HTML e o CSS.

Flash: Resume Texto (Substring E indexOf)

Esses dias no Forum FlashMasters um amigo meu deixou a seguinte dúvida:

Ele queria saber como fazer uma função para resumir um texto (uma String) por palavras. E não por caracteres. O que poderia ser feito apenas usando uma função substring() do próprio Flash.

Então fiz uma bem simples depois dei uma implementada nela (utilizando prototype) e estou postando aqui porque acho que poderá ser útil:

String.prototype.resume = function(q) {
    var aux:String = "";
    for (var i = 0; i < q; i++) {
        aux += this.substring(0, this.indexOf(" ")) + " ";
        this = this.substring(this.indexOf(" ") + 1);
    }
    return (aux += "...");
}

Na função é passado por parâmetro a quantidade de espaços (palavras) no qual o texto será resumido.

**substring()** : Retorna um pedaço da **String**. Método sobrecarregado você pode passar dois ou um parâmetro (**Integer**). Passando dois o primeiro é o ponto inicial e o segundo final. Com um parâmetro ela retorna da posição escolhida em diante. **indexOf() :** Retorna a posição (**Integer**) no texto (**String**) da **Char/String** passado como parâmetro, ou -1 quando não achar.

E para utilizar:

var texto = "Putz, o carnaval acabou comigo.";
trace(texto.resume(3)); // "Putz, o carnaval ..."

Mais sobre essas funções e outras:

Livedocs.Adobe.com - Flash 8

[update date=“24/02/2007” ]

Adicionei condições para ver se o texto não é uma única palavra ou a quantidade de palavras no texto é menor do que a quantidade que quer resumir.

String.prototype.resume = function(q) {
    var aux:String = "";
    var menor:Boolean = (this.indexOf(" ") == -1) ? false : true;
    for (var i= 0; i < q; i++) {
        if (!menor) {
            return this;
        } else if (this.indexOf(" ") != -1) {
            aux += this.substring(0, this.indexOf(" ")) + " ";
            this = this.substring(this.indexOf(" ") + 1);
        } else {
            return aux + this;
        }
    }
    return aux + "...";
}

[/update]

Flash E CSS: Banner Flutuante

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc.

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Então chegamos a conclusão que é só deixar o filme com o fundo transparente e colocá-lo numa div com position absolute? Certo.

Primeiramente vamos ao SWF, no Flash crie um novo documento. Nesse exemplo eu criei um de tamanho 468x280.

No primeiro frame coloque a action stop() para o filme não começar sozinho.

Desenhei um retângulo que cobre todo o palco na horizontal e com altura de 60 pixels. Dupliquei ele (copia e cola) e apertei o F8 para transformá-lo em um MovieClip. Ele vai ser o nosso botão para quando passar o mouse dar o play() no filme.

Instanciei de btn e apliquei o alpha para 0%, para deixar ele transparente. E adicionei no primeiro frame a seguinte action:

btn.onRollOver = function() {
    _root.gotoAndPlay(2);
}

Com essa action definimos que ao passar o mouse sobre o botão (btn) o filme irá para seguir a partir do segundo frame.

E no frame 2 em diante fiz uma animação simple para dar impressão do fundo estar crescendo para baixo. No último frame da animação também adicionei a action stop(); para o filme não voltar para o primeiro frame.

Também temos que colocar uma action para ao tirar o mouse (rolar fora) do botão a animação ir e parar no primeiro frame. E também uma para quando clicar. Essa action pode ser colocada no primeiro frame também.

btn.onRollOut = function() {
    _root.gotoAndStop(1);
}

btn.onRelease = function() {
    getURL("http://rogeriolino.com/", "_blank");
}

Na primeira faz com que ao tirar o mouse de cima do botão volte para o primeiro frame mas não continua o filme (stop). Na segunda tem a função getURL() que funciona como a tag no html, seus parâmetros são: página/endereço e alvo/target (blank = nova página / self = mesma página / parent = pai do frame_).

Com a nossa animação pronta vamos ao HTML:

Vamos colocar o SWF dentro de uma div chamada banner:

<div id="banner">
    <object type="application/x-shockwave-flash" data="banner.swf" width="480" height="280">
    <param name="movie" value="banner.swf" />
    <param name="allowScriptAcess" value="sameDomain" />
    <param name="wmode" value="transparent" />
    <param name="quality" value="best" />
</object>
</div>

E o nosso CSS:

#banner {
    margin-left: 250px;
    _margin-left: 10px;
    padding: 20px;
    position: absolute;
}

O hack na margin é por causa do IE.

E pronto, já podemos ver nossa propaganda flutuante funcionando. Download do exemplo.