Category Archives: ActionScript

Flash: Game Tutorials

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

Anúncios

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).

ActionScript: Operadores

Ver post no novo domínio: http://blog.rogeriolino.com/2007/03/24/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”;
var n:Number = 10;
n += 2; // saída: 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.:

var frutas:Array = [“banana”, “manga”, “uva”]; // inicializando um vetor com 3 posições.
var minhaFruta:String = frutas[1]; // minhaFruta irá receber “manga”.
frutas[0] = “abacaxi”; // alterou o valor da posição 0 do vetor de “banana” para “abacaxi”.
var matriz:Array = [[1,2,3],[4,5,6],[7,8,9]]; // inicializando uma matriz 3 por 3.
var n:Number = matriz[2,2]; // n recebe o valor da posição 2,2 da matriz, n = 5.

= (recebe/atribui)

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

Ex.:

     var str:String = "Foobar";

     var n:Number = 15;

/*..*/ (bloco de comentário)

Indica uma ou mais linhas de comentários no script.

Ex.:

A = B + C;
/* Primeira linha do comentário do script
Mais uma linha de comentário, e fim */


(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 n:Number = 10;
trace(–n); // saída: 9
trace(n–); // saída: 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); // saída: false
trace(a == c); // saída: 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); // saída: false
trace(b > a); // saída: 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); // saída: true
trace(c >= b); // saída: 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 n:Number = 10;
trace(++n); // saída: 11
trace(n++); // saída: 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); // saída: true
trace(a != c); // saída: 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); // saída: true
trace(b < a); // saída: 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); // saída: true
trace(b <= c); // saída: true

// (linha de comentário)

Indica o começo de um comentário, uma única linha.

Ex.:

// isso é um comentário


&& (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.

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); // saída: 1


* (multiplicação)

Multiplica a expressão1 pela expressão2.

Ex.:

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


new (novo)

Cria um novo objeto e chama a função construtor.

Ex.:

var texto:TextField = new TextField();

(delimitador de string)

Quando usado depois e antes de caracteres, indica que os caracteres tem um valor literal e são considerados uma string, não a variável, mas seu valor.

Ex.:

var str:String = “Flash Player 8”;

(subtração)

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

Ex.:

var a:Number = 8;
var b:Number = 2;
trace(a-b); // saída: 6
trace(-(a-b)); // saída: -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); // saída: 2


: (tipo)

Usado para definir o tipo do dado, um retorno de uma função, ou tipo do parâmetro da função.

Ex.:

var numero:Numer;
function soma(a:Number, b:Number):Number {
return a+b;
}


void

O operador void avalia uma expressão e então descarta o seu valor, define uma função sem retorno.

Ex.:

function helloWorld():Void {
trace(“Hello World”);
}

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

Flash: Resize Proporcional

Ver post no novo domínio: http://blog.rogeriolino.com/2007/03/06/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 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

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:

MovieClip.resizeW(novaLargura);

MovieClip.resizeH(novaAltura);

Espero que possa ajudar.

Flash: Resume Texto (substring e indexOf)

Ver post no novo domínio: http://blog.rogeriolino.com/2007/02/23/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));
//output: “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 menor:Boolean = false;
var aux:String = “”;
menor = (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: startDrag() e stopDrag()

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:

Desenho da Janela

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() {
if (this._parent.conteudo._visible) {
this._parent.conteudo._visible = false;
} else {
this._parent.conteudo._visible = true;
}
}

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.

Flash: AS2 “Hello World!”

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 = “<p>Hello World!</p>”;

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 = https://rogeriolino.wordpress.com&#8221;;

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 = “https://rogeriolino.wordpress.com&#8221;;
//
meuCampo.setTextFormat(style);
meuCampo._x = (Stage.width-meuCampo._width)/2;
meuCampo._y = (Stage.height-meuCampo._height)/2;