Tutorial 24: Furo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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;

Jogo 3: Jogo da velha

O famoso jogo da velha. Um jogo simples, mas com programação interessante. O objetivo do jogo é preencher uma linha, coluna ou diagonal com o mesmo símbolo. Para se jogar no mesmo micro por duas pessoas. O micro ainda não está jogando.

Ler tutorial! * Montagem
Crie um novo símbolo de botão (Ctrl+F8).
Desenhe um botão.
Volte para o documento (Ctrl+E).
Crie um novo símbolo de filme (Ctrl+F8).
Na timeline do símbolo, crie mais 2 keyframes.
No primeiro quadro, desenhe um retângulo sem borda usando a cor do fundo.
No segundo quadro, desenhe um "X".
No terceiro quadro, desenhe um "O".
Volte para o documento (Ctrl+E).
Desenhe um tabuleiro 3x3 "#".
Em cada casa do tabuleiro, instancie (arraste da biblioteca) um objeto contendo o retângulo sem borda. Nas propriedades de cada objeto instanciado, altere seu nome para: "n1", "n2"... até "n9".
Instancie (arraste) o botão abaixo do tabuleiro.
Nas propriedades, altere o nome do botão para "botao".
Crie um quadro de texto.
Nas propriendades, altere o quadro para dinâmico e na caixa "Var", escreva "msg".

* Programação
Abra a janela de ActionScript (F9).
Clique duas vezes no símbolo com o retângulo sem borda.
Na timeline do símbolo, clique no keyframe 1 e digite:
stop();

onPress = function() {
_root.clicar(_name);
} Clique no keyframe 2 e digite:
delete onPress; Clique no keyframe 3 e digite:
delete onPress; Volte para o documento, clique no keyframe 1 e digite:
turno = 0;
acabou = false;

clicar = function(nome) {
if (acabou) return;
_root[nome].gotoAndStop(turno+2);
turno = (turno+1)%2;
checarAcabou();
}

botao.onPress = function() {
for(i=1; i<=9; i++)
_root["n"+i].gotoAndStop(1);
acabou=false;
msg="Start";
}

checar = function(a,b,c) {
if (a._currentframe>1 &&
a._currentframe==b._currentframe &
a._currentframe==c._currentframe) {
if (a._currentframe==2) msg="X win";
else msg="O win";
acabou=true;
return true;
}
return false;
}

checarAcabou = function() {
if (checar(n1,n2,n3) || checar(n4,n5,n6) ||
checar(n7,n8,n9) || checar(n1,n4,n7) ||
checar(n2,n5,n8) || checar(n3,n6,n9) ||
checar(n1,n5,n9) || checar(n3,n5,n7))
return;
acabou=true;
for(i=1; i<=9; i++)
if(_root["n"+i]._currentframe==1)
acabou=false;
if (acabou)
msg="Draw";
}

Orkut

Adicionei no orkut a comunidade do My Own Flash. O objetivo da comunidade é basicamente trocar idéias, tirar dúvidas sobre Flash, discutir jogos e receber sugestões para o blog.

Tutorial 10: Nave

Embora meu desenho de nave não seja dos melhores, esse tutorial mostra como mover uma nave até uma posição clicada com velocidade constante.

Leia mais! * Montagem
Crie um novo símbolo (Ctrl+F8).
Desenhe uma nave e retorne ao palco (Ctrl+E).
Adicione sua nave da biblioteca para o palco.
Na caixa de propriedades da nave, mude seu nome para 'nave'.

* Programação
Na linha do tempo, clique no keyframe 1.
Abra a janela de ActionScript (F9) e digite:
nx = nave._x;
ny = nave._y;
veloc = 2;

onEnterFrame = function() {
dx = nx - nave._x;
dy = ny - nave._y;
dist = Math.sqrt(dx*dx+dy*dy);
if (dist<veloc) {
nave._x = nx;
nave._y = ny;
} else {
nave._rotation = Math.atan2(dy,dx)*180/Math.PI;
nave._x+=veloc*dx/dist;
nave._y+=veloc*dy/dist;
}
}

onMouseDown = function() {
nx = _xmouse;
ny = _ymouse;
}

Tutorial 9: Sorteio

Segue um exemplo de gerador de números aleatórios de 4 dígitos. Este gerador utiliza matriz para evitar que os dígitos se repitam.

Leia mais! * Montagem
Crie um símbolo de botão (Ctrl+F8).
Desenhe o botão e retorne ao palco (Ctrl+E).
Adicione seu botão da biblioteca para o palco.
Na caixa de propriedades do botão, mude seu nome para 'botao'.
Crie uma caixa de texto dinâmica.
Altere a propriedade 'var' do texto para 'marcador'.

* Programação
Na linha do tempo, clique no keyframe 1.
Abra a janela de ActionScript (F9) e digite:
valores = new Array();

botao.onPress = function() {
marcador = "";
for (var i=0; i<4; i++) {
repetiu = false;
valores[i]=int(Math.random() * 10);
for (var j=0; j<i; j++) {
if (valores[j]==valores[i]) {
i--;
repetiu = true;
break;
}
}
if (!repetiu)
marcador+=valores[i];
}
}

Feriado

Ae! Estarei ausente nesse feriado! Portanto nada de Flash.
Retornarei em breve com novas pesquisas e mais tutoriais.
Qualquer sugestão, idéia, crítica, dúvida, utilize o campo de comentários.

Tutorial 8: Letreiro

Tutorial para criar um letreiro rotativo que fica mostrando várias mensagens em um espaço pequeno.

Leia mais! * Montagem
Crie duas caixas de texto dinâmicas.
Divida as mensagens que deseja exibir entre as 2 caixas.
Altere o nome das caixas para "texto1" e "texto2".

* Programação
Abra a janela de ActionScript (F9).
Na linha do tempo, clique no keyframe 1:
texto1._x = Stage.width;
texto1._y = 4;
texto2._x = texto1._x+texto1._width;
texto2._y = 4;

onEnterFrame = function() {
texto1._x-=4;
texto2._x-=4;
if (texto1._x+texto1._width<0)
texto1._x = texto2._x+texto2._width;
if (texto2._x+texto2._width<0)
texto2._x = texto1._x+texto1._width;
}

Tutorial 7: Efeito Matrix

Saia da Matrix! E crie sua própria com as famosas letras verdes caindo no fundo preto.

Leia mais! * Montagem
Mude a cor do fundo para preto.
Crie um novo símbolo (Ctrl+F8) chamado "letra".
No símbolo, crie um campo de texto dinâmico.
Nas propriedades, mude o nome do texto para "texto".
Na biblioteca, clique com o botão direito sobre a letra.
Escolha "Linkage" e selecione "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9).
Na linha do tempo do símbolo, clique no keyframe 1:
texto.text = chr(65 + int(Math.random() * 64));
texto.textColor = (cor==8)?0xffffff:0x002200*cor;
contador = 0;

if (cor==0) removeMovieClip(this);
else onEnterFrame = function() {
_y += _height - 10;
contador++;
if (_y > Stage.height + 10)
removeMovieClip(this);
if (contador==1 && Math.random()*7 > 1)
_root.criar(_x,cor);
} Volte para o documento (Ctrl+E).
Na linha do tempo do documento, clique no keyframe 1:
contador = 0;
onEnterFrame = function() { criar(-1,-1); }
criar = function(xx,cc) {
var nome = "letra"+contador++;
var mudaCor = Math.random() * 5;
attachMovie("letra", nome, this.getNextHighestDepth(), {_y:-10});
var obj = _root[nome];
if (xx > -1) {
obj._x = xx;
obj.cor = (mudaCor<1.5)?cc-1:(mudaCor>4)?cc+1:cc;
if (obj.cor<0) obj.cor=0;
if (obj.cor>7) obj.cor=7;
}
else {
obj._x = int(Math.random() * (Stage.width / obj._width)) * obj._width;
obj.cor = (mudaCor<1.5)?8:7;
}
}

Tutorial 6: Chuva

Faça chover! Bom tutorial para criação, movimentação e destruição de objetos.

Leia mais! * Montagem
Crie um novo símbolo (Ctrl+F8) chamado "gota".
No símbolo, desenhe uma gota.
Na biblioteca, clique com o botão direito sobre a gota.
Escolha o menu "Linkage".
Selecione o item "Export for ActionScript".

* Programação
Abra a janela de ActionScript (F9):
Na linha do tempo do símbolo, clique no keyframe 1:
velocidade = Math.random() * 5;

onEnterFrame = function() {
_y += velocidade+5;
if (_y > Stage.height + 10)
removeMovieClip(this);
}
Volte para o documento (Ctrl+E).
Na linha do tempo do documento, clique no keyframe 1:
contador = 0;

onEnterFrame = function() {
attachMovie("gota", "gota"+contador++,
this.getNextHighestDepth(),
{_x:Math.random() * Stage.width, _y:-10});
}

Jogo 2: Vestuário

Um joguinho bastante comum na rede. Ele não tem regras. É apenas uma diversão mudando a roupa do personagem.

Ler tutorial! * Montagem
Desenhe o personagem.
Crie vários símbolos (Ctrl+F8), cada um com uma roupa diferente.
Volte para o documento (Ctrl+E).
Espalhe várias instâncias dessas roupas (clique na bibliteca e arraste para o palco).

* Programação
Utilize a mesma programação do tutorial 5 de arrastar objetos.

* Observações
Quando criar as roupas, posicione seu centro (cruz) sobre a figura.
Edite as roupas (clique 2x) para ficar no tamanho adequado.
Mude a ordem das instâncias para que não fique camisa sobre paletó.

Tutorial 5: Arrastar objetos

Mova objetos com a ajuda do mouse. Clique sobre o objeto e mova-o para outra posição. Clique novamente para soltá-lo.

Leia mais! * Montagem
Crie vários símbolos (Ctrl+F8), cada um com uma figura diferente.
Volte para o documento (Ctrl+E).
Espalhe várias instâncias desses símbolos (clique na bibliteca e arraste para o palco).

* Programação
Na linha do tempo, clique no keyframe 1.
Abra a janela de ActionScript (F9) e digite:
selecao = "";

MovieClip.prototype.onPress = function() {
if (selecao=="") {
selecao = this._name;
Mouse.hide();
} else {
selecao = "";
Mouse.show();
}
}

onMouseMove = function() {
if (selecao != "") {
this[selecao]._x = _xmouse;
this[selecao]._y = _ymouse;
}
}
* Observação
Quando criar cada símbolo, posicione seu centro (cruz) sobre a figura, de preferência no centro.

Tutorial 4: Cronômetro regressivo

Continuando com o tratamento de tempo, segue um cronômetro regressivo. Digite o valor desejado e pressione o botão para iniciar o cronômetro.

Leia mais! * Montagem
Crie um símbolo de botão (Ctrl+F8).
Desenhe o botão e retorne ao palco (Ctrl+E).
Adicione seu botão da biblioteca para o palco.
Na caixa de propriedades do botão, mude seu nome para 'botao'.
Crie uma caixa de texto dinâmica.
Altere a propriedade 'var' do texto para 'marcador'.
Crie uma caixa de entrada de texto.
Altere a propriedade 'var' do texto para 'entrada'.

* Programação
Na linha do tempo, clique no keyframe 1.
Abra a janela de ActionScript (F9) e digite:
tempoInicio = 0;
cronometro = 0;
parado = true;

onEnterFrame = function() {
if (parado) return;
tempo = new Date();
segundos = cronometro - int((tempo.getTime() - tempoInicio.getTime()) / 1000);
marcador = segundos;
if (segundos==0) parado = true;
}

botao.onPress = function() {
if (entrada<1 || entrada>999) return;
cronometro = entrada;
tempoInicio = new Date();
parado = false;
}

Jogo 1: O enigma das luzes

O enigma das luzes contém um painel com vários botões azuis e um cadeado. O objetivo do jogo é simplesmente abrir o cadeado, mas para conseguí-lo você precisará deixar todos os botões verdes. Cada click sobre um botão irá alterar sua cor e também a cor dos botões vizinhos.

Ler tutorial * Montagem
Crie um novo símbolo (Ctrl+F8).
No símbolo, desenhe a figura de um botão azul.
Adicione um keyframe no quadro 2 do símbolo.
No keyframe 2, altere o botão para verde.
Crie outro símbolo (Ctrl+F8).
Nesse símbolo, desenhe um cadeado fechado.
Insira um novo keyframe e desenhe um cadeado aberto.
Volte para o documento (Ctrl+E).
Insira (arraste para o palco) 25 botões (5x5).
Clique no cadeado e altere seu nome na janela de propriedades para 'cadeado'.
Clique no primeiro botão (acima a esquerda) e altere seu nome (na janela de propriedades) para 'n00', o próximo botão (a direita) altere para 'n01' e continue até 'n04'. Na linha seguinte, mude o nome dos botões para 'n10' até 'n14'. Continue alterando até o último botão se chamar 'n44'.

* Programação
Abra a janela de ActionScript (F9).
Na timeline do cadeado, clique no keyframe 1 e digite:
stop(); Na timeline do botao, clique no keyframe 1 e digite:
stop();

mudar = function() {
if (_currentframe==1) gotoAndStop(2);
else gotoAndStop(1);
}

onPress = function() {
_root.checar(_name);
} Na timeline do documento, clique no keyframe 1 e digite:
q = 5;

checar = function(nome) {
m2 = m1 = m = nome.charAt(1);
n2 = n1 = n = nome.charAt(2);
m1--; n1--;
m2++; n2++;
this["n"+m+n].mudar();
if (m>0) this["n"+m1+n].mudar();
if (m<q-1) this["n"+m2+n].mudar();
if (n>0) this["n"+m+n1].mudar();
if (n<q-1) this["n"+m+n2].mudar();
for (m=0; m<q; m++)
for (n=0; n<q; n++)
if (this["n"+m+n]._currentframe==1) {
cadeado.gotoAndStop(1);
return;
}
cadeado.gotoAndStop(2);
}

Hora de jogar

Nosso blog preocupa-se em trazer tudo que se refere ao Flash, seja notícias, dicas ou tutoriais. Muito bom para quem, além de jogar, gosta de conhecer como esse jogos funcionam, e acha que pode criar seus próprios ou melhorar os existentes.
Uma dica para quem está começando nessa área é jogar muito. Seja para conhecer melhor o mundo dos jogos, analisá-los, pegar idéias, ou simplesmente se divertir muito.
E um site bacana para quem quer conhecer e passar algum tempo jogando é o blog Joguinhos Viciantes. Nesse blog, o editor Carlos Hotta traz diariamente um jogo diferente e, como ele mesmo cita, viciante, destinado à procrastinação ;-)
Play time!

Tutorial 3: Botão de estados

Este é um botão com vários estados (de humor!?). A cada clique ele muda sua imagem.

Leia mais! * Montagem
Crie a figura de um botão, com textos estáticos.
Transforme-a em símbolo de filme (F8).
Entre na janela de edição do símbolo (duplo-clique ou Ctrl+E).
Na linha de tempo, crie vários keyframes.
Altere o botão para cada keyframe.

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

onPress = function() {
if (_currentframe == _totalframes) gotoAndStop(1);
else nextFrame();
}

Dica 1: Trilhe seus dados

Uma ferramenta simples mas muito útil na programação em Action Script é o comando 'trace'. Este comando ajuda a trilhar a execução de um programa exibindo valores de variáveis em uma janela separada.
Leia mais! Basta adicionar imediatamente após a instrução que se deseja trilhar o código abaixo: trace(valor);
Por exemplo, temos duas variáveis e queremos saber seus valores e sua diferença:
preco = 42;
desconto = 12;
trace("Preço: "+preco);
trace("Desconto: "+desconto);
trace("Total: "+(preco-desconto));

Tecnologia e gadgets

Acabei de adicionar ao MOF uma lista com links de sites e blogs que considero interessantes.
Para iniciar a lista, adicionei o Digital Drops: um blog editado por Nick Ellis que apresenta as últimas novidades em tecnologia e gadgets com ótimas imagens, comentários e um bom humor. São aparelhos bem bacana, alguns parecem ficção, outros são apenas estilosos.

Tutorial 2: Relógio analógico

Outro relógio! Aproveitando o tutorial do relógio anterior, fiz algumas alterações para criar este relógio analógico.

Leia mais! * Montagem
Crie a figura do relógio sem os ponteiros.
Transforme-a em símbolo de filme (F8).
Crie um novo filme para o ponteiro das horas (Ctrl+F8).
Nesse símbolo, desenhe o ponteiro das horas partindo do centro (cruz) para cima.
Volte para o documento (Ctrl+E).
Na biblioteca de símbolos (Ctrl+L), instancie (clique e arraste para o palco) um símbolo de hora. Posicione o ponteiro da hora no centro do relógio, marcando 12 horas.
Altere o nome da instancia na janela de propriedades para 'hora'.
Repita o procedimento para os ponteiros de minuto e segundo.

* Programação
Na timeline, clique no frame 1.
Abra a janela de ActionScript (F9) e digite:
onEnterFrame = function() {
tempo = new Date();
hora._rotation = tempo.getHours()%12*360/12;
minuto._rotation = tempo.getMinutes()*360/60;
segundo._rotation = tempo.getSeconds()*360/60;
}
* Comentários
Limitei o valor das horas para 12 (%12) antes de transformá-la em graus.