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;
}
}