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.