SWFAddress é uma pequena mas poderosa biblioteca que provê deep linking para Flash e Ajax. É uma ferramenta de desenvolvimento, permitindo a criação de URLs unicas e virtuais que podem apontar para uma seção do site ou aplicação. SWFAddress habilita algumas de importantes capacidades que faltam hoje em dia nas tecnologias [...]]]>

SWFAddress é uma pequena mas poderosa biblioteca que provê deep linking para Flash e Ajax. É uma ferramenta de desenvolvimento, permitindo a criação de URLs unicas e virtuais que podem apontar para uma seção do site ou aplicação. SWFAddress habilita algumas de importantes capacidades que faltam hoje em dia nas tecnologias RIA, incluindo:

• Adicionar ao Favoritos de um navegador ou site social
• Enviar links via email ou mensageiros instantâneos
• Procurar por um conteúdo específico através dos sites de buscas
• Utilizar o histórico do navegador e o botão de recarregar

O Flash está para o SEO assim como o Coringa está para o Batman. Mas nem tudo está perdido quando se trata de otimizar a indexação do site em SWF nos mecanismos de busca. Com SWFAddress você pode interagir com a página via javascript alterando a URL e o próprio conteúdo do filme, possibilidade do o uso dos botões voltar e avançar do browser, adicionar ao Favoritos e alterar a animação do seu filme de acordo com a URL que está sendo requisitada.

Caso sua página seja acessada através da URL http://siteemflash.com/#contato, você poderá pular na timeline indo direto para o frame do contato. Para evitar o reload da página toda interação é feita através de âncoras html (#). E as alterações da URL utilizando âncoras são desprezadas pelos buscadores, uma vez que a âncora só serve para movimentar o foco na mesma página, logo o seu conteúdo permanece inalterado.

É aí que entra o módulo ReWrite do Apache, com o mod_rewrite podemos escrever condições para tratar as requisições, redirecionando-as ou não. Então voltando ao exemplo anterior, teríamos uma condição que quando for requisitada a página http://siteemflash.com/contato (ou qualquer outra URL) redireciona para a página inicial (index) adicionando a âncora para contato (#contato) e imprime na página o conteúdo referente à mesma. Esse conteúdo impresso não será visível, apenas para indexação. O sitemap ou a estrutura básica do site, também deve estar contido no bloco de código html invisível, juntamente com todas outras informações relevantes.

Resumindo, você acaba tendo um trabalho dobrado ao desenvolver o site, mas evita transtornos de indexação. É muito útil para quem não abre mão do site feito com o uso da ferramenta da Adobe.

No próprio site da Asual tem um exemplo de uso do SWFAddress para SEO (o exemplo pode ser baixado pelo site). Abaixo segue alguns sites que fizeram uso da biblioteca, no qual o primeiro eu participei do desenvolvimento:

• Óticas Paris
• Salinas Rio -inverno2010
• Umbro
• Mis Architecture
• Kraftfoods – Food and Family
• BBH

Então como conhecimento em excesso nunca é o bastante, segue alguns links de Tutoriais sobre criação de jogos (variados) em Flash, e links de experimentos interessantes.

OutsideOfSociety (Tutoriais [...]]]>

Uma coisa que facina a mim e acredito que a muitos outros usuários do Flash é a posibilidade de desenvolver jogos bastante interativos com uma certa facilidade.

Então como conhecimento em excesso nunca é o bastante, segue alguns links de Tutoriais sobre criação de jogos (variados) em Flash, e links de experimentos interessantes.

OutsideOfSociety (Tutoriais – Exemplos)
http://oos.moxiecode.com/

Tonypa (Tutoral – Tile Based Games)
http://www.tonypa.pri.ee/tbw/start.html

Strille (Tutoriais)
http://www.strille.net/tutorials/part1_scrolling.php

Andre Michelle (Exemplos)
http://lab.andre-michelle.com/

GotoAndPlay (Tutoriais)
http://www.gotoandplay.it/

GotoAndPlay (Tutorial – Zelda-like Game)
http://www.gotoandplay.it/_articles/2003/10/zelda.php

Tutorialized (Tutoriais)
http://www.tutorialized.com/tutorials/Flash/Games/1

MXStudio (Tutorial Megaman – Parte 1 e 2)
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1128
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1132

GameSheep (Tutorial – Flash Racing Game)
http://www.gamesheep.com/free/flash-tutorials/1-flash-racing-game-1/flash-tutorial-1-1.php

Emanuele Feronato (Tutorial)
http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/

Actionscript.org (Tutorial – Building Games in Flash)
http://www.actionscript.org/resources/articles/52/1/Building-games-in-flash/Page1.html

Flash Dreamer (Tutorial – Into to OOP Game Design)
http://www.freshvision.com.au/blog/index.php/2007/03/27/tutorial-intro-to-oop-game-design/

Flashkit (Tutorial – Scoreboard)
http://www.flashkit.com/tutorials/Games/How_to_c-Nick_Kuh-771/index.php

FlashPerfection (Tutorial – Pong)
http://www.flashperfection.com/tutorials/How-to-Make-the-Game-of-Pong-65527.html

Matheus Prestes (Tutorial – Tiles Map – português)
http://www.freewebs.com/matheusprestes/MapTiles/html/TilesMap.html

Lá você poderá tirar sua dúvida sobre algum comando ActionScript por exemplo, ou até mesmo deixar sua contribuíção. Assim como eu em 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).

+ (adição)

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

+= (atribuição)

Atribui à expressão1 o valor [...]]]>

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

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 400×200 se eu aumentar a largura em 100 tenho que aumentar a altura [...]]]>

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 400×200 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.

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 [...]]]>

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]

Primeiro de tudo é desenharmos nossa janela, ela será divida da seguinte maneira:

janela (MovieClip Principal)
|– barra;
|– minimax;
|– fechar;
\– conteudo.

Use as ferramentas [...]]]>

Aproveitando o post anterior sobre uma div arrastável usando Javascript. Vamos ver agora como seria feito uma janela também arrastável só que no Flash.

Primeiro de tudo é desenharmos nossa janela, ela será divida da seguinte maneira:

janela (MovieClip Principal)
|– barra;
|– minimax;
|– fechar;
\– conteudo.

Use as ferramentas de desenho para construir a janela, mas deixe os desenhos separados como mostrado acima. Se você ainda não está familiarizado leia este post primeiro.

A minha janela ficou assim:

Aonde cada parte (desenho) é um MovieClip diferente, para transformar o seu desenho em MovieClip selecione ele aperte F8 coloque o nome do MC e verifique se o radiobutton MovieClip realmente está marcado.

Após criado o Movie devemos instanciâ-lo, para isso clique nele e vá na aba Propriedades (CTRL+F3), preencha o campo instância (siga os nomes definidos acima).

Com os quatros MovieClips prontos (barra, minimax, fechar e conteudo) selecione-os e aperte novamente F8 para transformá-los no nosso MC janela.

Caso você queira editar algum movie ou apenas posicionar melhor, dê um duplo clique nele e poderá navegar através dos demais que estão contidos nele.

Agora com os MCs criados e instanciados, vamos às actions:

Clique no frame principal (o primeiro frame da timeline) e aperte F9. Cole o código abaixo:

this.janela.barra.onPress = function() {
    this._parent.startDrag();
}

this.janela.barra.onRelease = function() {
    this._parent.stopDrag();
}

this.janela.fechar.onRelease = function() {
    this._parent._visible = false;
}

this.abrir.onRelease = function() {
    this._parent.janela._visible = true;
}

this.janela.minimax.onRelease = function() {
    this._parent.conteudo._visible = !this._parent.conteudo._visible;
}

Ao contrário do Javascript e das versões bem mais antigas (até a 5) do Flash não é necessário um método para pegar um alvo. Você mostra o caminha para se chegar nele a partir do palco (_root sempre para raiz, ou this este filme – isso ficará mais claro quando aprendermos sobre carregar filme externo).

Por exemplo o movie fechar está no dentro do MC janela que por sua vez está no palco, então: this.janela.fechar. E se você estiver em um MC (fehcar por exemplo) e queira acessar o seu pai (janela), fica assim: this._parent.

Repare no código que a lógica é a mesma, porém no Flash tem um método nativo para realiza esse arrastar (startDrag()) e um para parar esse arrastar (stopDrag()). O que no HTML temos que fazer na mão mesmo.

O que reduz e muito o código final. Agora é só testar (CTRL+ENTER).

Para ver o exemplo clique aqui.

Após abrir o Flash (na versão 6 ou superior) escolha novo arquivo (New/Novo > Flash Document) .

Clique no primeiro frame da Timeline e aperte F9 (atalho para [...]]]>

Vamos nos familiarizar com a ActionScript 2, nesse exemplo veremos como exibir uma mensagem no meio do palco sem usar a ferramenta de texto, apenas por AS.

Após abrir o Flash (na versão 6 ou superior) escolha novo arquivo (New/Novo > Flash Document) .

Clique no primeiro frame da Timeline e aperte F9 (atalho para abrir a janela das Actions).

Criando então o campo de texto aonde aparecerá a mensagem.

this.createTextField("meuCampo", _root.getNextHighestDepth(), 0, 0, 0, 0);
meuCampo.autoSize = true;
meuCampo.html = true;
meuCampo.text = "Hello World!";

É passado como parâmetro no método createTextField() o nome de instância do campo de texto (text field), a profundidade (o que define o que fica em cima do que – nesse caso usamos um método para retornar um valor para seu objeto ficar por cima de todos), o valor da posição em x, em y, largura e altura.

Não precisa se preocupar porque todos valores estão zerados, que como pode ver logo embaixo definimos que o nosso campo de texto pode auto ajustar o seu tamanho (autoSize). Logo aumentará de acordo com o tamanho do texto.

Mais abaixo pertimimos o campo de texto aceitar tags, ele aceita html.

E por fim o nosso texto, a mensagem que queremos que apareça – “Hello World!”. Como nosso campo de texto tá definido como html poderiamos passar o texto assim:

meuCampo.htmlText = "Hello World!";

Assim o campo de texto irá tratar as tags e mostrará só o texto. Isso é muito bom porque você pode passar um texto todo e ele ficará já pré-definido pelas tags. E também nos possibilita utilizar CSS para formatar o texto, mas isso não veremos agora.

Se você executar agora o arquivo verá a mensagem aparecer na parte superior esquerda, e com a formatação padrão.

Vamos então criar o objeto que formatará o nosso texto (textFormat).

var style:TextFormat = new TextFormat();
style.align = "center";
style.bold = true;
style.italic = true;
style.color = 0x000099;
style.font = "Verdana";
style.size = 30;
style.url = "http://rogeriolino.com"

Para poder conhecer melhor as propriedades vamos deixar o texto bem “emperequetado”. Alinhamento central (pode escolher: “justify”, “center”, “left”, “right”), negrito (bold), italico (italic), a cor é representada de uma forma diferente do CSS ao invéz da “#” na frente usa-se “0x” (zero e xis) mais o código hexadecimal, a font (poderia ser “Arial” por exemplo), o tamanho (size) e por graça um link (url) passando o destino dele. Para este último funcionar tem que definir o campo como html.

Agora só falta adicionar esse estilo ao campo:

meuCampo.setTextFormat(style);

E colocar o ele centralizado no palco:

meuCampo._x = (Stage.width-meuCampo._width)/2;
meuCampo._y = (Stage.height-meuCampo._height)/2;

Posição x recebe a largura do palco menos a largura do texto dividido por 2;
Posição y recebe a altura do palco menos a altura do texto dividido por 2;

Para funcionar corretamente temos que alinhar por último já que o tamanho do campo de texto irá mudar ao aplicar o estilo.

Agora é só executar. Abaixo o código completo:

this.createTextField("meuCampo", _root.getNextHighestDepth(), 0, 0, 0, 0);
meuCampo.autoSize = true;
meuCampo.html = true;
meuCampo.text = "Hello World!";

var style:TextFormat = new TextFormat();
style.align = "center";
style.bold = true;
style.italic = true;
style.color = 0x000099;
style.font = "Verdana";
style.size = 30;
style.url = "http://rogeriolino.com";

meuCampo.setTextFormat(style);
meuCampo._x = (Stage.width-meuCampo._width)/2;
meuCampo._y = (Stage.height-meuCampo._height)/2;