sexta-feira, 31 de julho de 2009

Tutorial - Macromedia Flash

Descubra através dos tutoriais abaixo técnicas que te vão aumentar o seu conhecimento no dominio do Macromedia Flash. Os tutoriais encontram-se divididos em diferentes graus de dificuldade. São várias dicas desde algumas básicas até outras mais avançadas. Aprenda a fazer um site básico, barra de load, efeito de luz, preloader, jogos em primeira pessoa, abrir links em outra janela (popups), e classe Key. Basta ler as informações abaixo e começar a editar!
Site básico em Flash
Tutorial para você fazer um site básico em flash!
Bom vamos começar o Tutorial de um site feito totalmente em flash (um site básico)
1º - Crie um novo filme com as seguintes características :Width = 500 pxHeight = 300 pxCom o Background na cor preta (#000000)
2º - Crie 3 Layers (Camadas):A primeira Camada deve se chamar “actions”;A segunda Camada deve se chamar “botões”;A terceira Camada deve se chamar “Fundo”;Todos sem as aspas.
3º - Vamos desenhar o fundo; Vá na layer fundo.
a. Desenhe um quadrado Azul (#0099FF), com o seguinte tamanho e localização:W: 500.0 X: 0.0H: 200.0 Y: 100.0
b. Desenhe um outro quadrado na cor cinza (#333333) com o seguinte tamanho e localização:W: 500.0 X: 0.0H: 100.0 Y: 0.0
4º - Vamos criar os botões, nesse tutorial vou fazer apenas 2 links (2 botões), com uma animação simples, vamos ao primeiro:
a. Vai ser o botão “home”;Aperte “alt+F8” (para criar um novo símbolo), nas opções selecione “botão” e no campo “nome” coloque “link1” sem as aspas.
b. No “timeline” haverá 4 Para Cima, Sobre, Para baixo, Área. (normal, quando passa o mouse por cima, quando clicar, área “rolável” e “clicável” do botão);b1. – No frame "Para Cima" insira um quadrado de 100 px X 30 px, na cor verde (#00FF00), Aperte “ctrl + K” (alinhar) e alinhe ele no centro do palco.
b2. Vá no frame “Áera” e aperte “F6” (para inserir um quadro chave);Vá no frame “Sobre” e também aperte “F6”; continuando no frame “Sobre” clique sobre o quadrado e modifique sua cor para o azul (#0099FF).
b3. Para colocar um texto no botão você deve inserir um novo layer; renomeio para “texto”, sem as aspas, verifique que o layer “texto” deve estar acima do layer “Layer1”.No frame “Up” insira um campo de texto estático e escreva “Home” alinhe-o no centro do palco (caso não saiba alinhar volte para o passo “b1”)
c. O primeiro botão está feito, volte ao palco;Vamos ao segundo botão, vai ser “Links”, aperte “alt+F8”, nas opções selecione “botão” e no campo “nome” = “link2” sem as aspas.A partir daí repita o mesmo processo do botão 1 (“b1”, “b2” e “b3”), mudando apenas o campo de texto de home para links.
5º - Vamos inserir os botões no palco;Pressione “F11” ou “ctrl+L” para abrir a bibliotecade arquivos. Clique na layer “botões” e arraste para o palco os dois botões da biblioteca (link1 e link2), alinhe-os no palco sobre o quadrado cinza.
6º - Vamos criar os “links” ou “telas”, ou seja quando a pessoa clicar em um determinado link o determinado filme será exibido na parte azul.
a. Crie um novo filme com as seguintes características:
Width: 500 pxHeight: 200 px
Com o background na cor branca (#FFFFFF).Neste filme você deve inserir o que você quer que apareça quando o usuário pressionar o link “home”. Após colocar o conteúdo desejado salve-o na mesma pasta que o site com o nome de “home”. Após isto aperte “ctrl+enter” para testar.
b. Crie um outro filme que será do segundo link “links” com as mesmas características mas com outro conteúdo. E salve-o como “links” após isso teste o filme.
7º - Vamos as actions (Tá acabando):Vá na layer “actions”e clique no 1º frame.Abra o painel de ações e coloque no modo expert (se você utilizar o flash MX 2004 não é necessário modificar);
a. Vamos colocar as actios para que o filme comesse parado e com o link1 iniciado:escreva:
CODEStop();
Para que o filme comesse parado;Na segunda linha:
CODEcreateEmptyMovieClip("mc1", 5)
ai ele cria um movieclip que chamará de “mc1”Na terceira linha:
CODEmc1.loadMovie("home.swf")
Ai ele fala que o mc1 deve dar um load no arquivo “home.swf”Na quarta e quinta linha:
CODEmc1._x = 0.0mc1._y = 100.0
Ai ele fala a posição X e Y do mc1.
b. Continuando com o painel de ações aberto clique sobre o botão “home”.O Painel de ações ficará vazio então insira as seguintes ações:
CODEon (press)
A única coisa que muda é esta ação que diz que ao clicar deste botão..., e a ação “stop” que ai não tem alem das chaves para continuar a ação on (press).Nas linhas 2,3,4,5 e 6 coloque:
{createEmptyMovieClip("mc1", 5)mc1.loadMovie("home.swf")mc1._x = 0.0mc1._y = 100.0}
c. Continuando com o painel de ações aberto clique sobre o botão “Links”.O painel ficará vazio então insira as ações nas linhas 1,2,3,4,5 e 6:
on (press) {createEmptyMovieClip("mc2", 5)mc2.loadMovie("links.swf")mc2._x = 0.0mc2._y = 100.0}
Houveram algumas alterações do “link1” para o “link2” que foram:Eu chamei o movieclip criado de “mc2”, e o filme a ser carregado de “links.swf”.
8º - ACABOU!!!Salve este arquivo e teste ele.

Load Com barra e porcentagem no flash
Bem vamos lá!
Abra o seu
Macromedia Flash
.
Apenas desenhe uma barrinha ________________ (de tamanho 200x19, por exemplo). Não há necessidade de criar mais nada, apenas desenhe.
Após isto, tecle (F8) e tranforme um um clip de filme (ou movie clip), com o nome de carregador. Depois, na mesma camada que esta a barrinha, faça uma caixa de texto dinâmico (a caixa de texto dinâmico deve ter o mesmo tamanho da barrinha - 200x19), após fazer a tal caixa, na tab de propriedades (onde se muda o tamanho da fonte..), localize o campo chamado "var" e
digite
"porcentagem". Feito isso, clique na sua barrinha que vc tranformou em movie clip, tecle F9 e coloque o seguite código:
onClipEvent (load) {
barra._xscale = "0"
total = _root.getBytesTotal();
_root.stop();
}
onClipEvent (enterFrame) {
carregado = _root.getBytesLoaded();
porcentagem = Math.floor((carregado/total)*100);
barra._xscale = porcentagem;
if (porcentagem == "100") {
_root.play();
}
_root.porcentagem = porcentagem + '% Carregado'; }

Estamos quase lá.
Apóst isto, vamos fazer com que o pre-load faça o que ele deveria, que é carregar a aplicação. Vimos que seu carregador fica no 1º quadro, e a partir daí vem os quadros da animação. Pronto, no seguno quadro, você digita a ação "stop", para que a
animação
pare alí, pois quem vai dar partida nela será o pre-load, mas apenas depois de carregar por completo.
Feito isto, basta teclar CTRL + ENTER para ver nosso pre-load.

Efeito de luz no Flash
Isso se chama máscara. Vamos ver como é...
Abre aí, o seu
flash e cria um documento do tamanho que você quer e com o fundo preto. Agora selecione a ferramenta de texto e escreve seu nome completo ou então uma frase. Agora vai lá no frame 20 clica com o botão direito depois clica em " Insert
Keyframe" ou "Inserir quadro chave". Agora crie uma nova camada. Agora crie um circulo do tamanho da letra que você escreveu a frase e co preenchimento e contorno branco. Aperte F8 e transforme-o em um gráfico. Agora vá no frame 20 da camada que tá o circulo e insira um quadro chave da mesma maneira que fizemos com a primeira camada. No frame 1 da camada do circulo suponhamos que você tenha colocado o circulo emcima da primeira letra da frase! Senão fez isso, faça agora! Depois vá no frame 20 e bote o circulo na última letra da frase. Feito isso vá no primeiro frame da camada do circulo clique com o botão direito nele e depois clique em "Create Motion Tween". Agora lá no painel "Time Line" ou "Linha do Tempo" tem um quadrado onde ficam as camadas certo? Clique com o botão direito na camada do circulo e depois clique em "Mask" ou "Máscara". Está pronto o efeito!! Aperte Control + Enter e teste o movie.

Preloader para iniciantes
Abaixo vai um código de um preloader bem fácil, pra iniciantes. A instancia barra é de um mc (movieclip) que você vai desenhar dentro dele uma barra preferencialmente rentangular (para aprender) alinhado a esquerda (dentro do mc, veja se sua barra está com o x igual a 0). Se preferir, crie um campo de texto dinamico com a instancia de pct Coloque esse código no primeiro quadro, e do segundo em diante, faça sua arte. Teste e veja.
stop();
onEnterFrame = function () {
var total = getBytesTotal();
var loaded = getBytesLoaded();
var calc = ((100*loaded)/total);
barra._xscale = calc; //barra
pct.text = Math.floor(calc)+"%"; //porcentagem
stop();

};
Obs.: recomendo que no segundo quadro faça um mc PAI e dentro dele construa sua animação.


Jogos em Primeira Pessoa
Este tutorial não vai te ensinar exatamente como criar uma versão em Flash de virtua-cop, mas vai mostrar o básico para fazer um jogo de tiro em primeira pessoa, com as mãos e movendo - dando um pouco mais de realismo ao jogo. Meu trabalho gráfico é rudimentar - mas isso não faz diferença - o que faz diferença é o conceito por trás de como o jogo funciona. A parte 1 engloba fazer a mão, arma, a mira e ações pro tiro.Mova seu mouse pelo movie abaixo e a mira da arma vai seguir seu mouse. Pressione o botão esquerdo do mouse e você vai atirar.Nada impressionante, mas é a base que é importante. Vá em frente e desenhe sua própria desert eagle (pistola muito poderosa) e miras bem legais.Antes de tudo, faça o movie(filme) com 3 quadros (frames)(só pra dar um pouco de espaço). Crie 2 layers (camada), um chamado "Arma" e outro chamado "Mira":
IMAGEM

Na camada Arma, desenhe uma mão segurando uma arma o melhor que você puder. É melhor usar a Pencil Tool com Smooth para a mão. Eu desenhei uma manga e um botão nessa manga. Agrupe as coisas. Pressione CTRL+ALT+S para redimensionar a mãe e a arma para qualquer tamanho que você quiser.Pressione F8 para converter em símbolo e selecione Clipe de Filme (Movie Clip). Dê um nome qualquer. Também dê uma nome da instância (Instance Name). Neste exemplo eu nomeei como "arma". (Você já deveria ter o hábito de dar nomes de instância para os seus clipes de filme).Posicione a mão e a arma onde você quiser da vertical(y) do seu stage. Se você tiver alguma coisinha que não gostou no final da mão, apenas mova esse poquinho para fora do stage (não se preocupe, ninguém vai ver o que está fora do stage - voltaremos a isso depois) ou use a Ferramenta de Seleção(Select Tool - a flechinha preta), selecione esse finalzinho e delete.Dê um duplo clique no clipe de filme "arma". A linha de tempo(timeline) vai mudar automaticamente para a linha de tempo do clipe de filme. Insira mais 2 quadros(então serão 3). Ponha um stop(); no primeiro frame. Clique no segundo frame e aperte F6 para inserir uma keyframe. Nela, desenhe uma pequena fagulha ou chama. Arraste ela para a frente da arma para dar o efeito de que está saindo uma pequena chama do tambor.
IMAGEM

Também mova um pouquinha a chama e mão com a arma para trás, por causa do coice da arma. No segundo quadro(lembre-se de selecionar o quadro), em propriedades de quadro - CTRL+F3 se ainda não estiver visível - escolha um som para o tiro e selecione sincronização para o evento (Vá em Arquivo >> Importar para a Biblioteca).
IMAGEM

Agora que já acabou, volte para a cena principal (clique em Cena, acima do stage).
IMAGEM

Clique na camada da mira. Desenhe suas miras. A mira que eu fiz foi simplesmente um X e um círculo em volta dele. Agrupe tudo - CTRL+G - e pressione F8 para converter em um clipe de filme. Dê um nome e um nome de instância.Agora vamos para as ações(actions / actionscript / as). Clique no clipe de filme arma e pressione F9. Isso vai abrir a janela de ações. Escreva o seguinte:
onClipEvent (enterFrame) {_x = _root._xmouse;}onClipEvent (mouseDown) {play();}
Explicação das ações:
onClipEvent (enterFrame): Quando este clipe é carregado, faz o seguinte:
_x = _root._xmouse;
A horizontal(x) da mão e da arma também vai ser a horizontal(x) do mouse
onClipEvent (mouseDown)
Quando o botão esquerdo do mouse é clicado acontece o seguinte:
play();
Inicia o próximo(s) quadro(s) deste clipe.Agora vá no clipe de filmes da mira e pressione F9, escreva o seguinte código:
onClipEvent (load) {Mouse.hide();}onClipEvent (enterFrame) {_x = _root._xmouse;_y = _root._ymouse;if (_y>=210) {_y = 210;}}
Explicação das ações:
onClipEvent (load)
Quando este clipe é carregado, faz o seguinte:
Mouse.hide();
Esconde o cursor do mouse
onClipEvent (enterFrame)
Quando este clipe é carregado, faz o seguinte:
_x = _root._xmouse;
A horizontal(x) da mira vai ser a horizontal(x) do mouse
_y = _root._ymouse;
A vertical(y) da mira vai ser a vertical(y) do mouse
if (_y>=210) {_y = 210;}
Se a vertical(y) da mira for maior ou igual a 210, então y vai ser 210. Em outras palavras, y não pode ser mais do que 210. Isso é feito para não permitir que a mira não fique na arma, o que seria muito irreal você atirar na tua mão ou no tambor da arma. Você pode ter que ajustar isso dependendo do tamanho da tela do seu filme.E é isso. Quando você testar seu filme, você vai poder mover a mira pela tela e atirar, e a mão vai seguir o mouse na horizontal do finald a tela.É claro que isso é apenas o básico do jogo. Você pode adicionar um efeito super trabalhado para o tiro, como uma pedra sendo jogada por uma catapulta. Nos próximos tutoriais vamos adicionar alguns inimigos, fundo, pontuação, tempo e sistema de munição. Ou talvez algo totalmente diferente.Nota: O efeito da mira seguindo o mouse pode ser usado para você customizar o ponteiro do mouse no Flash.

Abrindo link em popup no flash
1° passo: Cole em sua página "index.html" * Deve ser a mesma onde o flash está.

2° passo: Cole este no action de seu botão
on (release) {getURL("javascript:window.open('suapagina.htm','pop','width=550,height=430,top=0, left=0, scrollbars=yes');void(0);");}
Observações: * Caso dê errado com o "on release" altere para "on press", creio que não irá apresentar erros no exemplo acima. * Em getURL("java script:window.open ele está separado, deixe "javascript" junto. * É necessário enviar os arquivos para o servidor on line do seu site.

Classe key
Com a classe Key do Actionscript pode-se controlar pelo teclado tanto sistemas quanto jogos.
this.onKeyDown = function()
{trace("Alguma tecla foi pressionada.");}
Key.addListener(this);
No código acima, o método onKeyDown é invocado quando alguma tecla for pressionada, e imprime uma frase no painel de saída (output). Quando este código for aplicado na timeline, o uso do this referênciará ao _root, o mais correto seria registrar um ouviente através do método Key.addListener.
var teclas:Object = new Object(); //objeto "tecla"
teclas.onKeyDown = function()
{trace("Alguma tecla foi pressionada.");}
Key.addListener(teclas); //utilizando o método Key.addListener() resgistrou-se o objeto "teclas" como ouvinte
Para se remover um objeto anteriormente registrado com o método Key.addListener, utiliza-se o método Key.removeListener. Se for bem sucessido retorna true, caso contrário retorna false.
var teclas:Object = new Object();
teclas.onKeyDown = function()
{trace("Alguma tecla foi pressionada.");}
Key.addListener(teclas);
Key.removeListener(teclas);
Tecla pressionada, tecla liberada
Trocando o método onKeyDown, que é acionado quando um tecla é precionada, por onKeyUp os comandos passarão a serem executados quando a tecla for liberada.
var teclas:Object = new Object();
teclas.onKeyUp = function()
{trace("Alguma tecla foi liberada.");}
Key.addListener(teclas);
Para testar o código acima, matenha qualquer tecla pressionada, assim que esta seja liberada é exibida a frase “Alguma tecla foi liberada.” no painél Output.
Comandos específicos a uma tecla ou mais
A estrutura condicional if é utilizada para adicionarmos comandos específicos a uma tecla, observe:
var teclas:Object = new Object();
teclas.onKeyDown = function()
{if(Key.isDown(Key.SPACE)){trace("A tecla espaço foi pressionada.");}}
Key.addListener(teclas);
No código acima foi utilizado o método isDown para verificar se a tecla “espaço” foi pressionada.
Para adicionar comandos a duas ou mais teclas, basta adicionar a estrutura condicional if, para cada tecla.

var teclas:Object = new Object();
teclas.onKeyDown = function()
{if(Key.isDown(Key.RIGHT))
{trace("A tecla direita foi pressionada.");}
if(Key.isDown(Key.LEFT))
{trace("A tecla esquerda foi pressionada.");}}
Key.addListener(teclas);
Para testar o código acima pressione as teclas “direita” e “esquerda”.
Resgatando o código virtual de tecla e o código ASCII
Cada tecla possui uma identificação numérica, e algumas teclas, as mais usadas, possuem constantes que nos possibilitam idêntificá-las através do nome.
São elas: ALT, BACKSPACE, CAPSLOCK, CONTROL, DELETEKEY, DOWN, END, ENTER, ESCAPE, HOME, INSERT, LEFT, PGDW, PGUP, SPACE, SHIFT, RIGHT, TAB, UP.
Caso necessite utilizar alguma tecla que não esteja na seqüência acima, basta resgatar o código da tecla virtual utilizando o método Key.getCode().

var teclas:Object = new Object();
teclas.onKeyDown = function()
{trace(Key.getCode());}
Key.addListener(teclas);
No código acima, quando alguma tecla for pressionada, o código de tecla virtual desta será exibido no painel Output, e é este o código que é utilizado para idêntificarmos a tecla, o qual garante que os controles se comportem da mesma forma independente da plataforma ou linguagem.
Pode-se utilizar o código ASCII que é atribuido aos primeiros 127 caracteres. O código ASCII fornece a informação sobre um caractere de uma tecla, por exemplo, o código ASCII de “a” é diferente de “A”. Para se resgatar o código ASCII de uma tecla utiliza-se o método Key.getAscii(), veja:

var teclas:Object = new Object();
teclas.onKeyDown = function()
{trace(Key.getAscii());}
Key.addListener(teclas);
Após resgatar o código da tecla, no exemplo abaixo a tecla “L” (76), aplica-se o código da seguinte maneira:
var teclas:Object = new Object();
teclas.onKeyDown = function(){
if(Key.isDown(76)){trace("A tecla L foi pressionada.");}}
Key.addListener(teclas);
[ATENÇÃO] Quando você for utilizar o “Control>Test Movie” (Control + Enter), algumas teclas possuem comportamentos internos, como a tecla “ENTER”, portanto podem não funcionar no ambiente de teste, entretanto, basta marcar a opção no menu “Control>Disable Keyboard Shortcuts” para que funcionem corretamente.
Combinar teclas
Para combinar duas teclas ou mais, utilize o operador lógico &&
.
var teclas:Object = new Object();
teclas.onKeyDown = function(){
if(Key.isDown(Key.SPACE)&&Key.isDown(76))
{trace("A tecla espaço + L foi pressionada.");}}
Key.addListener(teclas);
Para testar o código acima, mantenha a tecla “espaço” pressionada e em seguida pressione a tecla “L”.
Verificando se a tecla Capslock e NumLock estão ativadas
Com o método Key.isToggled(), pode-se verificar se as teclas NumLock(144) ou a tecla CapsLock(20) esta ativadas ou não. Caso estejam ativadas o método retornará true, e se estiverem desativadas retornam false.
No código abaixo, é retornado o status das teclas apenas quando estas forem pressionadas (onKeyDown). Para testar o código abaixo, pressione as teclas “Caps Lock” e “Num Lock” aletóriamente.
var teclas:Object = new Object();
teclas.onKeyDown = function(){
if(Key.isDown(20)){
if(Key.isToggled(20) == true){
trace("Caps Lock ativado.");}else
{trace("Caps Lock desativado.");}}
if(Key.isDown(144)){if(Key.isToggled(144) == true){trace("Num Lock ativado.");}
else
{trace("Num Lock desativado.");}}}
Key.addListener(teclas);
Método Key.isAccessible(): retorna tue ou false que indica se a última tecla pressionda pode ser acessada por outros SWF, de acordo com as configurações de segurança.
Propriedade Key._listeners: é utilizado para verificar quantos ouvintes foram registrados com o objeto Key.
var teclas:Object = new Object();
teclas.onKeyDown = function(){
if(Key.isDown(76)){
trace("A tecla L foi pressionada.");}}
Key.addListener(teclas);
trace(Key._listeners.length);

Movendo um movieClip e o limitando a área do palco
Converta algum objeto em movieClip e o instâncie de “seta”.
//velocidade
var velocidade:Number = 10;
var teclas:Object = new Object();
teclas.onKeyDown = function(){
//seta para a direita
if(Key.isDown(Key.RIGHT)){
if(mcSeta._x <= Stage.width - mcSeta._width){ mcSeta._x += velocidade; } mcSeta._rotation = 0; } //seta para a esquerda if(Key.isDown(Key.LEFT)){ if(mcSeta._x > mcSeta._width){
mcSeta._x -= velocidade;
}
mcSeta._rotation = 180;
}

//seta para baixo
if(Key.isDown(Key.DOWN)){
if(mcSeta._y <= Stage.height - mcSeta._height){ mcSeta._y += velocidade; } mcSeta._rotation = 90; } //seta para cima if(Key.isDown(Key.UP)){ if(mcSeta._y > mcSeta._height){
mcSeta._y -= velocidade;
}
mcSeta._rotation = -90;
}

//seta para cima e esquerda
if(Key.isDown(Key.UP)&&Key.isDown(Key.LEFT)){
mcSeta._rotation = 225;
}

//seta para cima e direita
if(Key.isDown(Key.UP)&&Key.isDown(Key.RIGHT)){
mcSeta._rotation = -45;
}

//seta para baixo e esquerda
if(Key.isDown(Key.DOWN)&&Key.isDown(Key.LEFT)){
mcSeta._rotation = -225;
}

//seta para baixo e direita
if(Key.isDown(Key.DOWN)&&Key.isDown(Key.RIGHT)){
mcSeta._rotation = 45;
}
}
Key.addListener(teclas);

Nenhum comentário: