My Own Flash

Manutenção

noreply@blogger.com (Carlos) — Sat, 03 Oct 2009 23:04:00 +0000

Faz algum tempo que o blog está parado. Muitas animações sumiram.
Hora de consertar...
Nesse momento estou refazendo alguns tópicos quebrados.
Estou utilizando o Raven para o blogger, indicado pelo Cardoso: http://www.contraditorium.com/2006/08/12/o-melhor-editor-de-blogs-do-universo/
As animações serão refeitas no Flash CS4 e postadas no ImageShack.
Qualquer sugestão é benvinda.

Competição de jogos

noreply@blogger.com (Carlos) — Tue, 15 Jan 2008 17:54:00 +0000

Jay is Games é um site em inglês dedicado a jogos de Flash e está anunciando um campeonato entre desenvolvedores. O desafio é criar um jogo de Flash com base no tema "Upgrade". O desenvolvedor deve interpretar o tema da forma que quiser e sua criatividade vale prêmios. Os melhores jogos receberão uma licença do Flash CS3 e/ou uma quantia em dinheiro.
A inscrição serão até o dia 3 de março de 2008. Maiores informações, no link abaixo:
Jay is Games

Barra de assinatura

noreply@blogger.com (Carlos) — Mon, 14 Jan 2008 10:28:00 +0000

Procurando uma assinatura diferente para suas mensagens?
O site UserBars é especialista em barras para assinaturas em foruns, nos mais variados temas. Barras são pequenos gráficos que ajudam a exibir um pouco da sua personalidade de uma maneira atrativa.
O MOF já possui sua própria barra cadastrada no site:

Então você quer fazer seu próprio MMORPG...

noreply@blogger.com (Carlos) — Mon, 07 Jan 2008 12:28:00 +0000

Artigo traduzido da página: "Stuff - So you want to make your own MMORPG.". Artigo original em inglês.

Ler artigo em português Então você quer fazer seu próprio MMORPG...

Eu estou dizendo que você não deveria. Mas espere - eu explicarei porque.

Talvez você tenha lido 'Snow Crash'.
Talvez você tenha jogado MUDs.
Talvez você apenas pensou sobre um sistema mágico legal e começou lá.

Qualquer que seja o caso, você adorou a idéia. Você escreveu um documento do projeto descrevendo classes de personagens e sistemas mágicos. Você projetou alguns itens. Você criou um website com conceitos de artes e acha que seu jogo está agora um ano a frente, ou mais. Você simplesmente arrebentou com idéias inovadoras.

Um monte de pessoas tem estas idéias hoje em dia. Tempos atrás, muitas pessoas tinham a idéia de fazer seu próprio adventure em modo texto, e mesmo isso era um projeto grandinho para a maioria das pessoas. Enquanto você está brigando para capturar texto da tela, parsers de texto e árvores de objetos serão muita areia pro seu caminhãozinho.

MMORPGs são projetos imensos. Você pode colocar uns 3 ou 4 Quakes dentro de um MMORPG. E mesmo um clone do Quake é muito para a maioria das pessoas.

Falando realisticamente, você precisa de um time de 10 ou mais desenvolvedores por aproximadamente 4 anos em tempo integral. E estas 10 pessoas saberem o que estão fazendo logo de início. Todos estes 4 anos você terá que pagar seus salários, hardware, espaço de escritório, estante. Isto requer duas coisas: uma empresa e financiamento.

Ok, vamos dizer que você não visa 'qualidade comercial' e está fazendo por diversão. Também, você gastará algum dinheiro para ter um engine de jogo 3D que substituiria o desenvolvimento de um ano.

Vamos dizer que você conseguiu juntar seu grupo e começou feliz trabalhar nele. Você sabe sobre coisas como repositório CVS e você faz tudo do livro, todo mundo no grupo está confortável trabalhando com o código base e eles podem estudar a documentação que você mantém, e ninguém faz nenhum código secreto as 4 da manhã. Vamos dizer que você consegue gerenciar tudo por 2 anos.

Dois anos é muito tempo. E isto é uma estimativa muito, muito otimista. Pare e pense o que tem acontecido a você nos últimos dois anos. Nada? Ou você ainda está na escola ou então sua vida é incrivelmente estável. Pessoas se apaixonam, se casam, decidem mudar suas vidas, estudam coisas diferentes, se mudam, ficam doentes, se machucam, ou até morrem. E lembre-se, você não está pagando estas pessoas, então eles não tem obrigação de ficar no seu grupo.

Então você gerencia até terminar o projeto. 'Terminar' mesmo, o jogo e todo o conteúdo estão completos. Qual o próximo? Criar um servidor e deixar as pessoas conectar como cliente. Certeza. Com que dinheiro? Oh, isto não importa, são 2 ou 3 anos a frente, então você pensará em alguma coisa. Certo. Ou você conseguirá patrocinador para rodar o servidor, e então você e cinco outros tomarão conta do jogo 24 horas, 7 dias por semana pelos próximos anos porque você descobrirá que seu 'jogo auto ajustável' realmente não ajusta sozinho. Ou melhor, você está planejando vender o projeto todo para uma empresa grande. Boa idéia, mas improvável de acontecer. Você muito provavelmente estaria melhor começando seu próprio negócio e contratando pessoas para escrever seu jogo, fazer um protótipo rápido juntos e procurar publicitários.

E lembre-se, todo mundo e suas irmãs estão fazendo estes projetos hoje em dia.

O que traz uma questão, por que você precisa ter seu próprio MMORPG? Por que não juntar algum outro projeto, já que existe uma abundância de projetos MMORPG circulando.

Ou melhor, começe com algo mais simples, como o remake do arkanoid.

Eu não estou dizendo para você encarar com desprezo, achando que isto é tudo que você pode fazer. Eu estou dizendo que é muito mais recompensante e absolutamente divertido fazer algo simples e terminar de fato o projeto. Uma vez que você conseguiu um par de pequenos jogos completos, você terá algum tipo de perspectiva em longos projetos - E você terá muito mais chance de conseguir um emprego usando estes como material de portfolio. Pessoas querem contratar realizadores, não sonhadores.

Referência e recursos (inglês):

Strayfire - escrevedo um jogo "simples" por Kurt Miller, Flipcode
Kurt descreve como um projeto de jogo simples acaba se tornando surpriendentemente grande.

Pós-morte: Dark Age of Camelot (gamasutra.com)
25 trabalhadores em tempo integral, 5 fornecedores. U$2,5 milhões. 18 meses de desenvolvimento. Baseado no NetImmerse.
Enquanto geralmente tem sucesso, jogadores tem mencionado que o conteúdo não estão realmente terminado; não há muito a fazer para personagens de alto-nível, mas um dos três mundos será realmente apressado.

Pós-morte: Multitude's Fireteam (gamasutra.com)
14 desenvolvedores em tempo integral, 'alguns' fornecedores. U$2,5 million. 30 meses.
Eu nunca ouvi de fato sobre isto, mas então, eu tive outras coisas em mente na hora. Foi liberado em dezembro de 98.

WorldForge
Projeto MMORPG open source.

MMORPG.net
Fan site e rede de notícias sobre MMORPG.

Agora
Desenvolvimento wiki de um MUD.

Discussão MMORPG na gamedev.net
Alguns bons pontos a favor e contra MMORPGs amadores.

Aqui estão alguns dos muitos sites de projetos MMORPG lá fora.
Estes links levaram aproximadamente cinco minutos para encontrar com Google. Eu tenho certeza que há centenas de outros por aí.

E por último mas não menos importante, alguns divertidos:
StatBuilder e Progress Quest.

Tutorial 24: Furo

noreply@blogger.com (Carlos) — Wed, 12 Dec 2007 14:49:00 +0000

Veja o que está por trás de uma tela cinza, movendo o mouse sobre ela. Um furo, criado com máscara, revela a figura.

Leia mais! * Montagem
Crie ou importe uma figura.
Transforme-a em símbolo chamado 'imagem' (F8).
Apague o símbolo do palco.
Crie um novo símbolo chamado 'luz' (Ctrl+F8).
No símbolo, desenhe um círculo centralizado.
Abra a biblioteca de símbolos (Ctrl+L).
Clique com o botão direito em cada símbolo, escolha "Linkage" e habilite "Export for ActionScript" para cada um.

* Programação
Abra a janela de ActionScript (F9).
Na timeline do documento, clique no frame 1:
attachMovie("imagem", "imagem", this.getNextHighestDepth());
this.createEmptyMovieClip("mascara", this.getNextHighestDepth());
imagem.setMask(mascara);
mascara.attachMovie("luz", "luz", mascara.getNextHighestDepth(), {_x:-100, _y:100});

onMouseMove = function() {
mascara.luz._x = _xmouse;
mascara.luz._y = _ymouse;
};

Tutorial 23: Blocos aleatórios

noreply@blogger.com (Carlos) — Wed, 05 Dec 2007 21:47:00 +0000

Efeito de preenchimento utilizando blocos azuis que surgem aleatoriamente na tela.

Leia mais! * Montagem
Crie um bloco de tamanho 20x20.
Transforme-o em símbolo chamado 'quadro' (F8).
Apague o bloco do palco.
Abra a biblioteca de símbolos (Ctrl+L).
Clique com o botão direito no quadro, escolha "Linkage" e habilite "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do documento, clique no frame 1:
largura = 10;
altura = 10;
total = largura*altura;
ordem = new Array();
exibido = 0;

for (i=0; i<total; i++) ordem[i] = i;
for (i=0; i<total; i++) {
j = int(Math.random() * total);
k = ordem[i];
ordem[i] = ordem[j];
ordem[j] = k;
}

onEnterFrame = function() {
if (exibido<total)
attachMovie("quadro", "c"+exibido, this.getNextHighestDepth(), {_x:20*int(ordem[exibido]%largura), _y:20*int(ordem[exibido]/largura)});
exibido++;
if (exibido>total*2) {
for (i=0; i<total; i++)
_root["c"+i].removeMovieClip();
exibido=0;
}
}

Jogo 5: Labirinto

noreply@blogger.com (Carlos) — Sun, 02 Dec 2007 16:17:00 +0000

Um labirinto simples. O personagem precisa apenas sair do labirinto usando as setas do teclado.

Ler tutorial! * Montagem
Crie um retângulo cinza de tamanho 25x25.
Transforme-o em símbolo chamado 'chao'(F8).
Crie um retângulo azul de tamanho 25x25.
Transforme-o em símbolo chamado 'parede'.
Crie um personagem de tamanho até 25x25.
Transforme-o em símbolo chamado 'heroi'.
Abra a biblioteca de símbolos (Ctrl+L).
Em cada símbolo, clique com o botão direito, escolha "Linkage" e habilite "Export for ActionScript".
No documento principal, crie mais 2 keyframes.
No terceiro keyframe, adicione uma caixa de texto escrito "Fim de jogo".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do símbolo, clique no keyframe 1 e digite:
mapa = [
"1111111111",
"1000100002",
"1011101111",
"1000100001",
"1110001111",
"1011011001",
"1000000011",
"1111111111"]

iniciar = function() {
px = 1;
py = 5;
direcao = 0;
novadirecao = 0;
animar = false;
this.createEmptyMovieClip("cenario", this.getNextHighestDepth());
for (i=0; i<mapa.length; i++)
for (j=0; j<mapa[i].length; j++)
switch(mapa[i].charAt(j)) {
case '0':
case '2':
cenario.attachMovie("chao", "c"+i+"_"+j, cenario.getNextHighestDepth(), {_x:25*j, _y:25*i});
break;
case '1':
cenario.attachMovie("parede", "c"+i+"_"+j, cenario.getNextHighestDepth(), {_x:25*j, _y:25*i});
break;
}
attachMovie("heroi", "heroi", this.getNextHighestDepth(), {_x:25*px, _y:25*py});
Key.addListener(ouvinte);
}

finalizar = function() {
cenario.removeMovieClip();
heroi.removeMovieClip();
Key.removeListener(ouvinte);
}

ouvinte = new Object();
ouvinte.onKeyDown = function()
{
switch (Key.getCode()) {
case Key.UP: novadirecao = 1; break;
case Key.DOWN: novadirecao = 2; break;
case Key.RIGHT: novadirecao = 3; break;
case Key.LEFT: novadirecao = 4; break;
}
}
ouvinte.onKeyUp = function()
{ novadirecao = 0; }

onEnterFrame = function() {
if (!animar && novadirecao>0) {
if (novadirecao==1 && mapa[py-1].charAt(px)==1 ||
novadirecao==2 && mapa[py+1].charAt(px)==1 ||
novadirecao==3 && mapa[py].charAt(px+1)==1 ||
novadirecao==4 && mapa[py].charAt(px-1)==1) return;
animar=true;
direcao = novadirecao;
}
if (animar) {
switch(direcao) {
case 1:
heroi._y-=3;
if (heroi._y<=(py-1)*25) {
py--;
heroi._y = py*25;
animar = false;
}
break;
case 2:
heroi._y+=3;
if (heroi._y>=(py+1)*25) {
py++;
heroi._y = py*25;
animar = false;
}
break;
case 3:
heroi._x+=3;
if (heroi._x>=(px+1)*25) {
px++;
heroi._x = px*25;
animar = false;
}
break;
case 4:
heroi._x-=3;
if (heroi._x<=(px-1)*25) {
px--;
heroi._x = px*25;
animar = false;
}
break;
}
}
if (mapa[py].charAt(px)=='2')
gotoAndStop(3);
} Clique no keyframe 2 e digite:
stop();
iniciar(); Clique no keyframe 3 e digite:
stop();
finalizar();

Tutorial 22: Gravidade

noreply@blogger.com (Carlos) — Sun, 25 Nov 2007 13:36:00 +0000

O programa abaixo simula a ação da gravidade sobre uma pequena bola azul.

Leia mais! * Montagem
Crie um novo símbolo (Ctrl+F8).
No símbolo, desenhe uma bola.
Volte para o documento e instancie a bola no palco.

* Programação
Abra a janela de ActionScript (F9).
Na timeline do documento, clique no frame 1:
gravidade = 1; Edite o símbolo da bola.
Na timeline da bola, clique no frame 1:
vy = 0;

onEnterFrame = function() {
vy+=_root.gravidade;
if (_y+vy<Stage.height)
_y+=vy;
else {
_y = Stage.height;
vy = -vy-_root.gravidade;
}
}

Tutorial 21: Mancha d'água

noreply@blogger.com (Carlos) — Sun, 18 Nov 2007 16:49:00 +0000

Utilize o painel abaixo para desenhar com o mouse. Mas seja rápido! Senão a mancha desaparece.

Leia mais! * Montagem
Crie um novo símbolo com o nome 'mancha' (Ctrl+F8).
No símbolo, desenhe um círculo pequeno.
Na biblioteca, clique com o botão direito sobre a mancha.
Escolha "Linkage" e selecione "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do documento, clique no frame 1:
pintar = false;
ct = 0;
onMouseDown = function() { pintar=true; }
onMouseUp = function() { pintar=false; }
onMouseMove = function() {
if (!pintar) return;
attachMovie("mancha","m"+ct++, this.getNextHighestDepth(), {_x:_xmouse, _y:_ymouse});
} Edite o símbolo da mancha.
Na timeline da mancha, clique no frame 1:
minimo = 1;
onEnterFrame = function() {
_alpha--;
if (_alpha<minimo) this.removeMovieClip();
}
* Secagem rápida
Altere o valor de "minimo" para 80.

Tutorial 20: Botão rotativo 2

noreply@blogger.com (Carlos) — Wed, 14 Nov 2007 14:33:00 +0000

Esse tutorial é uma reprogramação do botão rotativo. Para fazê-lo girar, desta vez é necessário girar o mouse em torno do botão.

Leia mais! * Montagem
Utilize a mesma montagem do Tutorial 15: botão rotativo.

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo do botao.
Na timeline do botao, clique no frame 1:
apertou = false;
ax = 0;
ay = 0;
rx = 0;

dot = function(x1,y1,x2,y2) { return x1*x2+y1*y2; }
cross = function(x1,y1,x2,y2) { return x1*y2-x2*y1; }
mod = function(x1,y1) { return Math.sqrt(x1*x1+y1*y1); }
graus = function(rad) { return rad*180/Math.PI; }
angulo = function(x1,y1,x2,y2) {
cx1 = x1-_x; cy1 = y1-_y;
cx2 = x2-_x; cy2 = y2-_y;
valor = graus(Math.acos(dot(cx1,cy1,cx2,cy2)
/(mod(cx1,cy1)*mod(cx2,cy2))));
seno = graus(Math.asin(cross(cx1,cy1,cx2,cy2)
/(mod(cx1,cy1)*mod(cx2,cy2))));
if (seno<0) valor=-valor;
return valor;
}

onMouseDown = function() {
if(!this.hitTest(_root._xmouse,_root._ymouse,false))
return;
apertou = true;
ax = _root._xmouse;
ay = _root._ymouse;
rx = _rotation;
if (rx<0) rx+=360;
}
onMouseUp = function() {
apertou = false;
}
onMouseMove = function() {
if (!apertou) return;
rx += angulo(ax,ay,_root._xmouse,_root._ymouse);
ax = _root._xmouse;
ay = _root._ymouse;
if (rx>359) _rotation=359;
else if (rx<0) _rotation=0;
else _rotation = rx;
}

Tutorial 19: Faixa

noreply@blogger.com (Carlos) — Tue, 06 Nov 2007 14:27:00 +0000

Uma forma diferente de esconder um texto utilizando um botão rotativo. Arraste o botão para direita para exibir a faixa.

Leia mais! * Montagem
Crie 3 camadas (layers).
Crie um símbolo de botão rotativo (ler tutorial).
Na camada superior, instancie (arraste da biblioteca) o botão.
Em propriedades, altere o nome do botão para 'botao'.
Na camada inferior, desenhe sua faixa partindo do botão.
Transforme a faixa em símbolo (F8).
Em propriedades, altere o nome da faixa para 'faixa'.
Na camada central, desenhe um retângulo cobrindo somente a faixa.
Transforme a camada central em máscara (botão direito > Mask).

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo do botão.
No final do código do botão, altere a última linha de:
} Para:
_root.abrir(rot);
} Volte para o documento.
Na timeline do documento, clique no frame 1:
abrir = function(r) {
faixa._x = botao._x - (359-r)*faixa._width/359;
}

abrir(0);

Tutorial 18: Morcegos

noreply@blogger.com (Carlos) — Wed, 31 Oct 2007 14:09:00 +0000

Gostosuras ou travessuras? Dia das bruxas! Clique no quadro e encha sua tela de morcegos!

Leia mais! * Montagem
Crie um novo símbolo com o nome 'morcego' (Ctrl+F8).
No símbolo, desenhe um morcego todo branco.
Na biblioteca, clique com o botão direito sobre o morcego.
Escolha "Linkage" e selecione "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do documento, clique no frame 1:
stop();

contador = 0;

import flash.filters.ColorMatrixFilter;

onMouseDown = function() {
nome = "m"+contador++;
attachMovie("morcego",nome,this.getNextHighestDepth(), {_x:_xmouse, _y:_ymouse});
matrizCor = [Math.random(), 0, 0, 0, 0, 0, Math.random(), 0, 0, 0, 0, 0, Math.random(), 0, 0, 0, 0, 0, 1, 0];
matrizFiltro = new ColorMatrixFilter(matrizCor);
this[nome].filters = [matrizFiltro];
}
* Travessuras
Altere o comando "onMouseDown" para "onMouseMove".

Torneio de pac-man

noreply@blogger.com (Carlos) — Tue, 30 Oct 2007 09:26:00 +0000

Alguns membros do forum da Unidev sobre desenvolvimento de jogos, querendo provar, segundo eles, que um game pode ser muito mais dificil de criar do que pareçe, e que ninguem pode dar um pulo maior que a perna, criaram o Unidev Pac-Man Contest. O desafio é apenas recriar o famoso jogo Pac-man.
Com um prazo de 6 meses para terminar, vários desenvolvedores se inscreveram para recriá-lo de diversas maneiras, como um Pac-man 3D, kart no labirinto e zombies.
O MOF estará presente com um Pac-man em Flash. Para participar ou apenas acompanhar o torneio, clique no pac-man abaixo:

Tutorial 17: Calculadora

noreply@blogger.com (Carlos) — Sat, 27 Oct 2007 17:10:00 +0000

O tópico já diz tudo. Tutorial para fazer uma calculadora básica.

Leia mais! * Montagem
Crie um novo símbolo para calculadora (Ctrl+F8).
No símbolo, desenhe todos botões da calculadora.
Transforme cada botão em um símbolo (F8).
Na janela de propriedades, altere o nome de cada botão para 'b1', 'b2',..., 'b9' (para os botões de 1 a 9), 'bmais', 'bmenos', 'bvezes', 'bdivisao', 'bigual', 'bponto' e 'bc' (para os botões +, -, *, /, =, ., C).
Crie uma caixa de texto dinâmica.
Altere a propriedade 'Var' do texto para 'atual'.
Volte para o documento (Ctrl+E).
Abra a biblioteca de símbolos (Ctrl+L).
Instancie (clique e arraste) o símbolo da calculadora.

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo da calculadora.
Na timeline do botao, clique no frame 1:
limite = 10;

limpar = function() {
atual = 0;
operacao = 0;
zerar = false;
resultado = 0;
ponto = 0;
}

tecla = function(v) {
if (zerar) { atual=0; zerar=false; }
if (length(atual.toString())<limite) {
if (ponto==0) atual=atual*10+v;
else atual+=v/Math.pow(10,ponto++);
}
}

calcular = function(oper) {
switch(operacao) {
case 0: resultado = atual; break;
case 1: resultado += atual; break;
case 2: resultado -= atual; break;
case 3: resultado *= atual; break;
case 4: resultado /= atual; break;
}
zerar = true;
atual = resultado;
operacao = oper;
ponto = 0;
}

bc.onPress = function() { limpar(); }
b0.onPress = function() { tecla(0); }
b1.onPress = function() { tecla(1); }
b2.onPress = function() { tecla(2); }
b3.onPress = function() { tecla(3); }
b4.onPress = function() { tecla(4); }
b5.onPress = function() { tecla(5); }
b6.onPress = function() { tecla(6); }
b7.onPress = function() { tecla(7); }
b8.onPress = function() { tecla(8); }
b9.onPress = function() { tecla(9); }
bmais.onPress = function() { calcular(1); }
bmenos.onPress = function() { calcular(2); }
bvezes.onPress = function() { calcular(3); }
bdivisao.onPress = function() { calcular(4); }
bigual.onPress = function() { calcular(0); }
bponto.onPress = function() { if (ponto==0) ponto=1; }

limpar();

Ícone na barra de endereço

noreply@blogger.com (Carlos) — Tue, 23 Oct 2007 15:22:00 +0000

Adicionei hoje o ícone do MOF na barra de endereços. Esse ícone aparece perfeitamente em navegadores como o Firefox e nas novas versões do IE. Para acrescentar, basta se registrar no site MyFavatar e enviar sua imagem.

Tutorial 16: Ampulheta

noreply@blogger.com (Carlos) — Sat, 20 Oct 2007 22:32:00 +0000

Um relógio de areia que marca 1 minuto. Dessa vez sem programação, apenas animação.

Leia mais! * Montagem
Altere a taxa de frames por segundo (fps) para 3.
Crie um novo símbolo (Ctrl+F8).
No símbolo, crie 6 camadas com os nomes (de cima pra baixo): 'acao', 'ampulheta', 'mask up', 'up', 'mask down', 'down'.
Na camada 'ampulheta', desenhe a borda da ampulheta, sem areia.
Na camada 'up', desenhe areia em toda parte de cima.
Na camada 'down', desenhe areia em toda parte de baixo.
Na camada 'mask up', desenhe um retângulo preenchido suficiente para cobrir toda a areia superior.
Selecione o retângulo e transforme em símbolo (F8).
Na camada 'mask down', desenhe um retângulo preenchido suficiente para cobrir toda a areia inferior.
Selecione o retângulo e transforme em símbolo (F8).
Na camada 'mask up', instancie um símbolo do retângulo e cubra a areia da parte superior.
Na camada 'mask down', instancie outro símbolo do retângulo, e posicione-o sob a areia.
Crie um frame no quadro 60 nas camadas 'ampulheta', 'up' e 'down'.
Crie um keyframe no quadro 60 nas camadas 'acao', 'mask up' e 'mask down'.
Clique no quadro 1 do 'mask up' e mude a propriedade Tween para Motion. Deixe o retângulo cobrir toda areia.
Clique no quadro 60 e mova o retângulo logo abaixo da areia.
Clique no quadro 1 do 'mask down' e mude a propriedade Tween para Motion. Deixe o retângulo logo abaixo da areia.
Clique no quadro 60 e mova o retângulo sobre toda a areia.
Transforme as camadas 'mask up' e 'mask down' em máscaras (botão direito, mask).
Volte para o documento (Ctrl+E).
Instancie (clique e arraste) o símbolo da ampulheta.

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo da ampulheta.
Na timeline da camada 'acao', clique no frame 60:

stop();

Tutorial 15: Botão rotativo

noreply@blogger.com (Carlos) — Tue, 16 Oct 2007 19:46:00 +0000

Um botão analógico que gira 360 graus é um bom recurso para especificar valores dentro de uma faixa ou criar efeitos diferentes. Para girar, clique no botão e arraste para direita ou esquerda.

Leia mais! * Montagem
Crie um novo símbolo (Ctrl+F8).
No símbolo, desenhe um botão circular (centralizado no +).
Volte para o documento (Ctrl+E).
Abra a biblioteca de símbolos (Ctrl+L).
Instancie (clique e arraste) o símbolo do botão.

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo do botao.
Na timeline do botao, clique no frame 1:
apertou = false;
ax = 0;
rx = 0;

onMouseDown = function() {
if(!this.hitTest(_root._xmouse,_root._ymouse,false))
return;
apertou = true;
ax = _root._xmouse;
rx = _rotation;
if (rx<0) rx+=360;
}

onMouseUp = function() {
apertou = false;
}

onMouseMove = function() {
if (!apertou) return;
dx = _root._xmouse - ax;
rot = rx + dx*3;
if (rot>359) rot=359;
if (rot<0) rot=0;
_rotation = rot;
}
* Outros tutoriais
Tutorial 20: Botão rotativo 2
Tutorial 19: Faixa

MOF no Kongregate

noreply@blogger.com (Carlos) — Sun, 14 Oct 2007 12:44:00 +0000

Para quem não conhece, Kongregate é um site de jogos, descrito pelo desenvolvedor como o YouTube dos jogos. É uma comunidade para jogadores e desenvolvedores de jogos em Flash, onde estes recebem todo um suporte para hospedar e divulgar seus trabalhos enquanto os jogadores podem participar de uma diversidade de jogos, encarar desafios e conversar com outros jogadores enquanto joga (recurso disponível somente para os usuários que criarem um login gratuito).
Como trabalho inicial, acrescentei mais cartas, criei alguns níveis e adicionei ao site o jogo de memória criado no tópico anterior.

Jogo 4: Memória

noreply@blogger.com (Carlos) — Fri, 12 Oct 2007 12:33:00 +0000

No jogo da memória você precisa encontrar todos os pares de figuras iguais. Clique sobre os quadros amarelos para revelar a figura sob ele. Somente duas figuras podem ser exibidas por rodada, o resto é memória.

Ler tutorial! * Montagem
Crie um novo símbolo chamado 'quadro' (Ctrl+F8).
Desenhe a parte de trás das cartas.
Crie mais 6 keyframes.
Em cada keyframe, desenhe uma figura diferente.
Na biblioteca, clique com o botão direito sobre o quadro.
Escolha "Linkage" e selecione "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo do quadro.
Na timeline do quadro, clique no frame 1:
stop();
onPress = function() {
_root.clicar(_name);
} Volte para o documento.
Na timeline do documento, clique no frame 1:
stop();

m_largura = 4;
m_altura = 3;
m_total = m_largura*m_altura/2;
matriz = new Array();

iniciar = function() {
pontos = 0;
selecao1 = null;
selecao2 = null;
for (i=0; i<m_largura*m_altura; i++) {
c = 0;
k = int(Math.random()*m_total);
for (j=0; j<i; j++)
if (matriz[j]==k) c++;
if (c>1) i--;
else matriz[i]=k;
}
for (j=0; j<m_altura; j++)
for (i=0; i<m_largura; i++) {
quadro = "quadro"+i+"_"+j;
attachMovie("quadro",quadro,getNextHighestDepth());
this[quadro]._x = 5+i*(this[quadro]._width+3);
this[quadro]._y = 5+j*(this[quadro]._height+3);
this[quadro].valor = matriz[j*m_largura+i];
}
}

reiniciar = function() {
for (j=0; j<m_altura; j++)
for (i=0; i<m_largura; i++)
_root["quadro"+i+"_"+j].removeMovieClip();
iniciar();
}

clicar = function(nome) {
var obj = _root[nome];
obj.gotoAndStop(obj.valor+2);
if (selecao1==null) selecao1 = obj;
else {
selecao2 = obj;
if (selecao1._currentframe==selecao2._currentframe)
pontos++;
}
delete obj.onPress;
}

onMouseDown = function() {
if (pontos==m_total) reiniciar();
if (selecao2==null) return;
if (selecao1._currentframe!=selecao2._currentframe) {
selecao1.gotoAndStop(1);
selecao2.gotoAndStop(1);
}
selecao1 = null;
selecao2 = null;
}

iniciar();

Dica 2: Comente seu código

noreply@blogger.com (Carlos) — Wed, 10 Oct 2007 12:51:00 +0000

Uma dica para quem está começando a programar: comente tudo o que fizer. A medida que o seu programa vai se tornando grande, fica dificil organizá-lo e saber tudo o que acontecendo. Deixar comentários no código ajuda a entendê-lo, sem precisar ficar lendo códigos, e permite que outras pessoas o entendam.
Leia mais! Para criar um comentário, inicie uma linha digitando duas barras '//' e escreva seu comentário:
// Calculando fatorial de j e armazenando em f
for (f=1; j>1; j--)
f*=j;

// Outro comentario qualquer Para comentários longos de várias linhas, inicie o comentário com barra asterisco '/*' e termine-o por asterisco barra '*/':
/* Programa: jogo da velha
Autor: Carlos
Testando: Comentários longos */ Após executar o programa, o Flash irá ignorar essas linhas.

Tutorial 14: Retrato observando

noreply@blogger.com (Carlos) — Fri, 05 Oct 2007 15:16:00 +0000

Esse tutorial foi baseado nos filmes de suspense. Quando passamos perto de um retrato ou fotografia, temos a impressão que ela fica nos observando.

Leia mais! * Montagem
Desenhe um personagem ou importe uma fotografia, mas sem os olhos (sugestão para remover os olhos: utilize máscaras).
Crie um símbolo para o olho (Ctrl+F8).
No símbolo, desenhe um olho.
Volte para o documento (Ctrl+E).
Com a biblioteca de símbolos (Ctrl+L), instancie (clique e arraste) dois símbolos de olho para o personagem.
Na janela de propriedades, altere o nome das instancias dos olhos para 'o1' e 'o2'.

* Programação
Abra a janela de ActionScript (F9).
Edite o símbolo do olho.
Na timeline do olho, clique no frame 1:
cx = _x; cy = _y;

onEnterFrame = function() {
if (_root.parado) return;
mx = _root._xmouse - cx;
my = _root._ymouse - cy;
dist = Math.sqrt(mx*mx + my*my);
angulo = Math.atan2(my,mx);
_x = cx + Math.cos(angulo)*largura*dist/Stage.width;
_y = cy + Math.sin(angulo)*altura*dist/Stage.height;
} Volte para o documento.
Na timeline do documento, clique no frame 1:
o1.largura = 20; o1.altura = 15;
o2.largura = 15; o2.altura = 13;

parado = false;
onMouseDown = function() {
parado = !parado;
} * Comentários
De início, a movimentação dos olhos provavelmente não ficará ajustada. Centralize as instâncias dos olhos e altere o valor da largura e altura de cada olho nas primeiras linhas do código do documento:
o1.largura = 20; o1.altura = 15;
o2.largura = 15; o2.altura = 13;

Photoshop

noreply@blogger.com (Carlos) — Wed, 03 Oct 2007 12:14:00 +0000

O blog Tutoriais Photoshop editado por Andre Sugai está completando um ano e traz centenas de tutoriais para edição de fotos, criação de efeitos, matérias e dicas sobre Photoshop.
Como o Flash não é forte em edição de fotos, trabalhar em conjunto com o Photoshop resulta em ótimas animações.

Tutorial 13: Relógio analógico 3D com sombra

noreply@blogger.com (Carlos) — Sat, 29 Sep 2007 17:33:00 +0000

Outro relógio analógico, desta vez com efeito tridimensional e sombra.

Leia mais! * Montagem
Crie um símbolo para o ponteiro das horas (Ctrl+F8).
Nesse símbolo, desenhe o ponteiro das horas partindo do centro (cruz) para cima.
Crie outros símbolos para os ponteiros de minutos e segundos.
Crie um novo símbolo para o fundo do relógio (Ctrl+F8).
Desenhe o relógio sem ponteiros e sem preenchimento (apenas desenhe o círculo e os números).
Se utilizar caixa de texto para algum número, transforme-a em figura no menu Modify > Break Apart (Ctrl+B).
Crie um novo símbolo para o relógio completo (Ctrl+F8).
Na biblioteca de símbolos (Ctrl+L), instancie (clique e arraste) o símbolo do fundo do relógio, e os 3 ponteiros. Posicione os ponteiros no centro do relógio, marcando 12 horas.
Na janela de propriedades, altere o nome da instancia de cada ponteiro para 'hora', 'minuto' e 'segundo'.
Volte para o documento (Ctrl+E).
Instancie um relógio completo.
Clique na opção Free Transform Tool (Q) na caixa de ferramentas ou utilize o Modify > Transform para rotacionar e esticar seu relógio dando um aspecto 3D.
Instancie outro relógio completo.
Na janela de propriedades, altere o nome da nova instância do relógio para 'sombra'.
Utilize as ferramentas de transformação para esticar e rotacionar o novo relógio para o formato de uma sombra colorida.
Envie a sombra para trás com o menu Modify > Arrange > Send To Back.

* Programação
Abra a janela de ActionScript (F9).
Edite o relógio.
Na timeline do relógio, clique no frame 1:
onEnterFrame = function() {
tempo = new Date();
hora._rotation = tempo.getHours()%12*360/12;
minuto._rotation = tempo.getMinutes()*360/60;
segundo._rotation = tempo.getSeconds()*360/60;
} Volte para o documento.
Na timeline do documento, clique no frame 1:
import flash.filters.ColorMatrixFilter;

var matrizCores:Array =
[0.2, 0.2, 0.2, 0, 0,
0.2, 0.2, 0.2, 0, 0,
0.2, 0.2, 0.2, 0, 0,
0, 0, 0, 0.2, 0];

var matrizFiltro = new ColorMatrixFilter(matrizCores);
sombra.filters = [matrizFiltro];

Tutorial 12: Foto oculta

noreply@blogger.com (Carlos) — Wed, 26 Sep 2007 23:58:00 +0000

Deixe fotos ocultas que se revelam quando o mouse as encontram.

Ler tutorial! * Montagem
Crie um novo botão (Ctrl+F8).
Instancie (arraste para o palco) o botão criado.
Em propriedades, altere seu nome para "botao".
Clique no menu File, Import, Import to Library.
Importe uma foto para a biblioteca.
Na biblioteca, clique com o botão direito sobre a foto.
Escolha "Linkage", selecione "Export for ActionScript" e altere o campo "Identifier" para "foto".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do disco, clique no keyframe 1 e digite:
import flash.display.BitmapData;

imagem = BitmapData.loadBitmap("foto");

botao.onRollOver = function() {
createEmptyMovieClip("quadro", this.getNextHighestDepth());
quadro.attachBitmap(imagem, this.getNextHighestDepth());
quadro._x = (Stage.width - quadro._width) / 2;
quadro._y = (Stage.height - quadro._height) / 2;
};

botao.onRollOut = function() {
unloadMovie('quadro');
quadro.removeMovieClip();
};

Tutorial 11: Colisão de discos

noreply@blogger.com (Carlos) — Fri, 21 Sep 2007 21:46:00 +0000

Vários discos se movem livremente pela tela, até colidir com outro disco. Então desaparecem. Só pode restar um.

Ler tutorial! * Montagem
Crie um novo símbolo com o nome "bola" (Ctrl+F8).
Desenhe um disco.
Crie no centro do disco uma caixa de texto dinâmica.
Altere a propriedade "Var" do texto para "valor".
Na biblioteca, clique com o botão direito sobre o disco.
Escolha "Linkage" e selecione "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Na timeline do disco, clique no keyframe 1 e digite:
onEnterFrame = function() {
// Colisao
k = prox;
while(k!=valor) {
obj = _root["bola"+k];
if (colidir(obj)) {
if (ante==k) {
_root["bola"+obj.ante].prox=prox;
_root["bola"+prox].ante=obj.ante;
} else if (prox==k) {
_root["bola"+ante].prox=obj.prox;
_root["bola"+obj.prox].ante=ante;
} else {
_root["bola"+ante].prox=prox;
_root["bola"+prox].ante=ante;
_root["bola"+obj.ante].prox=obj.prox;
_root["bola"+obj.prox].ante=obj.ante;
}
removeMovieClip(obj);
removeMovieClip(this);
break;
}
k = obj.prox;
}
// Movimentacao
_x+=vx;
_y+=vy;
if (_x>Stage.width+10) _x=-10;
if (_x<-10) _x=Stage.width+10;
if (_y>Stage.height+10) _y=-10;
if (_y<-10) _y=Stage.height+10;
}

colidir = function(obj) {
raio = _width/2;
dx = _x-obj._x;
dy = _y-obj._y;
dist = Math.sqrt(dx*dx+dy*dy);
if (dist<raio) return true;
return false;
} Volte para o documento, clique no keyframe 1 e digite:
for (i=0; i<37; i++) {
attachMovie("bola","bola"+i,this.getNextHighestDepth(),
{valor:i, vx:Math.random()*6-3, vy:Math.random()*6-3,
_x:Math.random()*Stage.width,
_y:Math.random()*Stage.height,
prox:(i==36)?0:i+1, ante:(i==0)?36:i-1});
}
* Comentários
A colisão é calculada no centro dos discos. Para colidir nas extremidades, altere o código:
if (dist<raio) return true; para:
if (dist<raio*2) return true;