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.

Tutorial 1: Relógio

Este é meu primeiro tutorial de Flash para a criação de um relógio básico mostrado abaixo. No momento estou utilizando Flash 8.0.

Leia mais! * Montagem
Crie uma caixa de texto.
Altere a propriedade da caixa para "Dynamic Text".
E digite "relogio" no campo "Var" das propriedades.

* Programação
Na timeline, clique no frame 1.
Abra a janela de ActionScript (F9) e digite:
onEnterFrame = function() {
tempo = new Date();
hora = tempo.getHours();
min = "0"+tempo.getMinutes();
seg = "0"+tempo.getSeconds();
relogio = hora+":"+min.substr(-2)+":"+seg.substr(-2);
}
* Comentários
Adicionei o número zero antes dos minutos e segundos e mandei exibir apenas os últimos 2 caracteres. Assim quando for cinco segundos, por exemplo, exibirá '05' e não apenas '5'.

Blog de spam?

Um robô do Blogger disse que este site é um blog de spam e agora não poderei mandar postagens até desbloqueá-lo. Concordo que qualquer medida contra spams, vírus, malwares deve ser aplicada, mas poderiam criar um robô que funciona. Esse sai bloqueando todo mundo.

Personalize o logotipo do Google

Cansado de todo dia encontrar aquele mesmo logotipo do Google? Seus problemas acabaram! O script "My Own Google Logo Text" altera o logotipo do google para qualquer texto que escolher, mantendo o mesmo estilo de fonte. Mas para usar o script, você precisará instalar em seu browser uma extensão chamada GreaseMonkey. No Firefox, você pode encontrá-lo no menu Ferramentas, Complementos, Mais extensões.
Após a instalação, clique duas vezes sobre o logotipo do Google para exibir uma caixa cinza com um formulário pedindo o novo texto e as cores das letras, representada por números: 1 = azul; 2 = vermelho; 3 = amarelo; 4 = verde; e outro valor deixa a cor aleatória.

Trabalhando para o Google

Ainda em estágio de desenvolvimento de blog, verifiquei que tudo gira em torno do Google. O Google é dono do site Blogger onde crio este blog. Para divulgar o blog por feeds, utilizei o FeedBurner que o Google também comprou. Os anúncios colocados no blog vem do AdSense que também é do Google. Praticamente somos funcionários do Google.
Enfim, há uma vantagem nisso tudo. Por serem da mesma corporação, torna-se mais fácil a utilização desses recursos, principalmente para quem está iniciando. Se alguém já tentou utilizar vídeos do YouTube no Orkut, deve ter reparado na simplicidade dessa operação, já que, nem precisa dizer, também são do Google.

Feed resolvido

Não conhecia. O próprio Blogger me indicou esse distribuidor de feeds chamado FeedBurner. Parece bom. Segue o ícone abaixo:

Primeiro post

Ae! Esse é meu primeiro post. Ainda não aprendi mexer nesse blog e pretendo melhorar com o tempo. Se alguém sabe mexer nisso, aceito dicas pra deixá-lo melhor. Deve ter um campo de comentário pra isso mesmo.
Mas a idéia não é criar um blog sobre blog. Estou estudando Flash e jogos, e nunca registro nada do que faço. Acabo perdendo muitas idéias boas. Então pretendo utilizar esse blog para registrar tudo o que faço no Flash. Um diário de bordo. Poderá me ser útil no futuro e ajudar alguém que passe pelo mesmo assunto.
Além disso, existe muita coisa boa na Internet sobre Flash que merece um post. Seja tutoriais, dicas ou bons jogos.
Mas agora preciso aprender mexer nesse blog. Ligar o RSS. Postar por e-mail. Será possível postar imagem por e-mail.