Aulas de Flash por: Captain

Olá membro do fórum estou aqui mais uma vez pra disponibilizar um conteúdo, bom eu estava na porai pesquisando e achei umas aulas interesantes e resolvi postar pra voceis não foi eu que fiz ok só to postando .

O autor das aulas é o :Captain

Vamos aprender a criar jogos em flash com 10 lições, bem já dei uma olhada nelas e parece ser bem simples.

Aqui os links:

Aulas de Flash 01 - Começando
Começamos com o básico do Flash, desenhando e animando

Aulas de Flash 02 - Animação para Jogos
Aprenda como dispor os quadros de animação para um jogo

Aulas de Flash 03 - Programando Animação
Agora utilizamos os primeiros códigos de programação para animar e movimentar

Aulas de Flash 04 - Programando Movimento
Vamos aprender a movimentar o personagem por um código pouco eficiente

Aulas de Flash 05 - Programando um Jogo
Finalmente começamos a base da programação de um jogo propriamente dito

Aulas de Flash 06 - Programando Ação
Que tipo de jogo estaríamos fazendo sem um pouco de ação?

Aulas de Flash 07 - Programando Inimigos
Existe um ditado na Força Aérea que diz: "É preciso um grande inimigo para construir um grande avião"

Aulas de Flash 08 - Programando Mouse
Não dá pra programar no Flash sem aprender a usar o Mouse

Aulas de Flash 09 - Programando Música & Sons
Chegou a hora de adicionar música e sons ao nosso jogo

Aulas de Flash 10 - Finalizando
É hora de finalizar o jogo e embrulhar o pacote

Créditos

Captain por criar as aulas e por disponibilizalas.

Obs:Para aquele que não conseguirem baixalo leia abaixo .

Aulas de Flash 01 - Começando
Começamos com o básico do Flash, desenhando e animando

Bem-vindo ao Macromedia Flash 8

Não
se preocupe por essa versão ser antiga. Pode-se dizer que a versão 8
foi a primeira de uma série que mudou a nossa percepção do Flash na
Internet. Então não importa se já tivemos várias versões a mais, o que
vamos aprender a partir dessa versão, será útil por muitas à frente.



À
primeira vista o programa parece grego, é fácil pegar um lápis e
desenhar, mas para criar jogos é uma distância bem grande. O Flash
trabalha basicamente em três faces, Timeline, Symbols e ActionScript.

A
Timeline é uma espécie de roteiro a acontecer. Por padrão, o Flash
exibe seus filmes a 12 quadros por segundo, então cada 12 quadros da
Timeline equivalem a 1 segundo. Você pode alterar essa medida nas
propriedades logo abaixo, ou Modify -> Movie, se sua versão for mais
antiga.



Symbols
seriam como os objetos de um jogo, as partes manipuláveis que podem ser
desde o herói e os inimigos até o cenário de fundo. Já o ActionScript
seria a programação propriamente dita.

Para começar, vamos
traçar a barreira entre um desenho comum feito em lápis e um objeto de
jogo, vamos criar nosso primeiro Symbol. clique em Insert -> New
Symbol.





Vamos
fazer um carro, então nomeie-o como "Carro", selecione a opção Graphic
e clique em OK. Veja que de repente a área de trabalho sumiu, este é
como se fosse o editor gráfico do Flash, aqui você cria seu novo
símbolo. Vamos desenhar um carro simples, não se preocupe com a
qualidade, o meu está horrível.



Aquela
pequena cruz entre os pneus indica o centro do objeto. Ao finalizar
clicamos em Edit -> Edit Document (Edit Movie nas versões antigas),
ou simplesmente clicamos em "Scene 1" lá em cima na Timeline. Pode
parecer que acabamos de jogar todo o desenho fora já que ele sumiu, mas
tudo fica registrado na Library do Flash, que é uma lista de todos os
Symbols e outros objetos que você coloca no arquivo. Clique em Window
-> Library ou Ctrl + L ou simplesmente > Library na superior
direita para abrí-la.



Vamos
tentar fazê-lo andar. Antes certifique-se de que a Timeline está no
primeiro quadro, mais pra frente você trabalhará como quiser, mas por
enquanto vamos ficar no quadro 1. Arraste seu carro da Library para a
área de trabalho, bem à esquerda.





Agora
clique no quadro 24, o que significará que nosso movimento levará 2
segundos para ser completado, apesar dessas medições de tempo não serem
importantes, selecione Insert Keyframe. Keyframes são os quadros chave,
ou seja, aqueles que significam uma mudança. Se uma pedra ficasse
parada o tempo todo, não faria diferença nenhuma entre um quadro e
outro, mas se ela rolasse (também em 2 segundos, por conveniência), o
primeiro quadro mostraria o ponto inicial de onde ela começou a rolar e
o quadro 24 o último local até onde ela rolou.



Por
essa lógica, agora arrastemos o carro até o fim da extremidade direita
do quadro, mas para não arrastar meio torto, segure a tecla Shift, ela
é meio que a tecla da ordem no Flash, sempre que quiser fazer algo de
forma reta ou proporcional, utilize-a.





Note
que a Timeline foi alterada. Até agora a sua animação é constituída de
23 quadros de um carro parado à esquerda e 1 quadro onde ele dá um
salto para a direita. Não acredita em mim? Tecle Enter e sua animação
correrá na sua frente.

Agora, se clicarmos nesta área diferente,
em qualquer parte dela, da Timeline com o botão direito do mouse e
selecionarmos Create Motion Tween





Ela
muda! Aperte agora Enter pra ver o resultado. Voilá! Você agora tem 1
quadro de um carro à esquerda, um quadro de 1 carro à direita e 22
quadros entre eles com o carro andando do quadro 1 ao 24. O Motion
Tween preenche a animação entre dois quadros diferentes, então assim
como fizemos o carro andar poderíamos tê-lo feito aumentar de tamanho,
virar de cabeça pra baixo, etc, mas nesses casos teríamos que criar o
Motion Tween antes, não depois, como fizemos agora.

Só que isso
não está muito realista, vamos adicionar um pouco de animação no nosso
carro. Para isso, mudemos as propriedades dele, clique com o botão
direito nele, na Library, e selecione Properties



Vamos
alterá-lo para Movie Clip. Como Graphic é um objeto gráfico estático,
Movie Clip seria um objeto com animação. Depois clique em Edit, ou
clique duas vezes nele na área de trabalho, ou na Library (na imagem
dele, clicar duas vezes no nome permitirá renomear o Symbol), para
voltarmos ao editor gráfico.



Note que nossa Timeline mudou novamente, mais precisamente, zerou



Isto
porque esta Timeline não é mais do nosso filme, do carro andando da
esquerda para a direita, esta é uma Timeline exclusiva do nosso Symbol,
Carro.

Se alterarmos a Timeline do Symbol Carro, quando
voltarmos ao nosso filme, o Symbol Carro reproduzirá sua própria
Timeline dentro da Timeline do filme, e assim cria-se uma animação de
forma bem fácil. Cada objeto tem sua própria Timeline que é executada
durante a nossa Timeline principal.

Não é complicado, veja por exemplo:



Vamos inserir um Keyframe no nosso quadro 4. Não precisa pensar muito sobre os números, experimente até ficar como você quer.

E
neste quadro 4, vamos alterar o carro. Novamente, não precisa se
preocupar com a qualidade. Adicionei dois efeitos nas rodas para dar a
impressão que estão rodando e inverti a bandeira, como se o vento a
agitasse.



Ao
voltarmos pra nossa cena e apertarmos Enter, nosso carro ainda irá
andar da esquerda para a direita, mas agora de 4 em 4 quadros,
mostrando a versão que alteramos, dando a impressão que as rodas estão
rodando e o vento está agitando a bandeira.

Algo que talvez você
não note logo de cara é que é possível criar Symbols DENTRO dos
Symbols, o que por sua vez pode facilitar muito sua vida na hora de
animar, ainda podendo agrupar certos pedaços de gráficos,
selecionando-os e depois indo em Edit -> Group ou Ctrl + G, podendo
ser desfeito com Edit -> Ungroup ou Ctrl + Shift + G.



Claro,
tudo isto está muito mais relacionado à animação como um filme do que
criação de jogos, mas tendo passado este básico, vamos poder cravar os
dentes na programação em breve.

Aulas de Flash 02 - Animação para Jogos
Aprenda como dispor os quadros de animação para um jogo

Como
estamos utilizando o Flash 8, temos à nossa disposição o ActionScript
2.0 e a partir dela poderemos programar um jogo simples e mais tarde
evoluir para os complexos.

No entanto, ainda não temos noção de
animação para jogos, somente para filmes. Uma das primeiras coisas que
precisamos é de um personagem, acho que nosso carro não daria conta
dessa função. Então vamos invocar...



O Boneco Palito Branco de Olhos Azuis!!!

Agora vamos trabalhar um pouco mais de animação, menos voltada para filmes em flash e será a que utilizaremos nos nossos jogos.

Para
criar o boneco palito você começa fazendo só a cabeça e o tronco (e os
olhos se quiser), e então usa o Convert to Symbol, ou já começa
criando-o como um Symbol se preferir, selecionando a opção Movie clip.

Vamos
começar a trabalhar com Symbols dentro de Symbols e isso pode ficar um
pouco complicado se você não prestar atenção. É também uma boa hora pra
começar a ficar ligado nesta parte da Timeline



Eu
dei um Group na cabeça e tronco, logo em seguida desenhando braços e
pernas, selecionando e transformando-os em um único Symbol dando o nome
de "Braços e Pernas parados". Cuidado ao selecionar perto de Symbols ou
Groups, selecionar mesmo um pequeno pedaço deles fará a seleção valer
para o objeto inteiro. Basta segurar Shift e clicar no indesejado para
tirá-lo da seleção.

Note como está a Library



Nosso
boneco palito é na verdade só cabeça e tronco, mas na Library você pode
ver que o Symbol "Braços e Pernas parados" está inserido no Symbol
"Boneco Palito"



Agora
vamos inserir um novo Keyframe no quadro 2 da Timeline do "Boneco
Palito". Lembre-se, atenção e sempre de olho na Timeline, você não vai
querer adicionar coisas no lugar errado.

Neste Keyframe do
quadro 2 vamos apagar o Symbol "Braços e Pernas parados". Caso você
tenha feito os olhos, eu removi um deles, já que o personagem estará de
perfil. Como a cabeça e o tronco foram agrupados, como dito no início,
bastou clicar duas vezes nele para poder voltar a editá-lo e apagar o
outro olho.



Agora
que nosso boneco palito voltou ao seu estado natural, vamos tornar a
desenhar partes para ele. Lembrando mais uma vez, atenção na Timeline,
estamos editando o quadro 2 do Symbol "Boneco Palito".



Adicionei
braços e pernas de outra cor para evitar confusão. Quando se está
animando pra valer, com certeza você não vai querer ter só um Symbol
pra tudo isso, pois a facilidade que um boneco palito traz é justamente
essa. Não importa se o braço deveria estar á frente do corpo ou atrás,
você não precisa lidar visualmente com sobreposição.

Agora entra
a parte de animação de verdade, clique duas vezes no Symbol "Braços e
Pernas correndo". Aqui a animação é quadro a quadro, vamos inserir um
Keyframe, mover um pouco o braço e a perna, adicionar outro Keyframe,
mover mais um pouco, até termos quadros o suficiente para dar a
impressão de movimento.

Por estarmos mexendo com um boneco
palito, uma ótima ferramenta para o serviço é a Subselection Tool, que
pode mover linhas com facilidade.



Um
toque que o Pyong adicionou é que a Onion Skin facilita muito ao fazer
animações, pois ela adiciona camadas transparentes dos outros quadros
de animação, te dando assim uma noção de quanto ele já se mexeu e
quanto precisa se mexer.



O
quadro 2 servirá pra transição, tanto pros braços e pernas se abrindo
quando voltando e se fechando, então vamos repetí-lo no quadro 4. Mas
você não pode simplesmente usar o tradicional copiar e colar, tem que
clicar com o botão direito e selecionar "Copy Frames", depois "Paste
Frames" onde quiser colocá-los.



Bom,
você teve todo esse trabalho, então vamos testar. Clique em Ctrl ->
Test Movie, ou utilize o atalho Ctrl + Enter. Tudo que nosso boneco
palito vai fazer é alternar entre estes dois frames



Não
parece estar funcionando muito bem, certo? Bom, você preparou uma
animação para jogo, mas agora é hora de pular para a terceira aula,
onde vamos programar esse boneco para fazer exatamente o que queremos,
como andar de um lado para o outro e exibir uma animação enquanto o
faz.

Aulas de Flash 03 - Programando Animação
Agora utilizamos os primeiros códigos de programação para animar e movimentar

Ok,
é justamente agora que vamos começar a programação, algumas das funções
mais básicas, como movimentação e animação. Vamos adicionar um Layer ao
nosso filme atual do boneco palito, espero que esteja acompanhando as
aulas. E pra ser exato, a Timeline deve mostrar "Scene 1".



Layer,
do inglês, camada, é um termo bastante comum principalmente em
programas de edição gráfica. Se você já utilizou algum, sabe mais ou
menos suas utilidades para melhor dividir elementos visuais. Podemos
ter Layers para facilitar a separação entre cenário e personagens,
podemos ter Layers dentro de símbolos, muito úteis para trabalhar a
questão da sobreposição, e como neste caso, podemos ter Layers para
programar.

Clique duas vezes em um Layer para renomeá-lo, isso
ajuda a manter a organização e localizarmos facilmente aonde estamos
programando. Note que vamos usar o Quadro 1 da cena. Muitos jogos
simples em Flash acontecem realmente só em um quadro.



Você
já deve ter visto na parte inferior da tela uma barra escrito Actions,
clique nela. Caso não a veja ou ela não esteja ali na sua versão,
pressione F9, um ótimo atalho pra você começar a se acostumar.





Esta
é a janela de Actionscript, a programação do Flash por assim dizer, e
com ela vamos começar a brincar com nosso boneco palito para que
possamos movê-lo e sua animação seja exibida corretamente, diferente do
que aconteceu no filme anterior

A primeira coisa que precisamos
fazer no entanto é nomear os nossos Movie clips. Você deve estar
pensando que já fez isso, já que tem seu Symbol e ele se chama "Boneco
Palito", mas basta clicar nele e a janela Properties na parte inferior
da tela mostrará o seguinte



Como
pode ver, esta instância do Symbol "Boneco Palito" não tem um nome, e
assim não poderíamos chamá-la na programação. É melhor colocar um nome
que não seja o mesmo do Symbol, claro que poderíamos chamar a instância
de "Boneco Palito", mas poderia nos confundir futuramente.



A
programação no Flash é bem simples para quem já teve contato com outro
tipo de linguagem antes. Você usará chaves { } para abrir e fechar suas
condições e terminará suas linhas individuais com ponto e vírgula ; ,
podendo inserir comentários no código com // . Não se preocupe se você
ainda não entendeu, vai ter muitos exemplos quando começar a programar.

Vamos
começar com algo fácil, pegar a posição X do nosso personagem. Só pro
caso de você não ter idéia, X representa o nosso eixo horizontal,
esquerda e direita e Y o eixo vertical, cima e baixo. Para tal,
utilizamos "Nome da Instância._x", neste caso específico, Palitildo._x




Eu
estou trabalhando com um arquivo padrão de 550x400 de tamanho, então
estas coordenadas são mais ou menos a ponta esquerda em relação ao meu
"Boneco Palito". Você pode precisar testar um pouco antes de achar a
posição ideal para o seu. Notou como as linhas de código terminam com
ponto e vírgula ; ? Mudando de assunto, quando utilizamos o sinal de =
, algo que você já deve estar familiarizado de outras linguagens de
programação, estamos dando uma ordem, "ISTO é IGUAL a VALOR".

O
sinal de igual = não é como uma atestação de fatos, não é como olhar
para a etiqueta de uma roupa e ler "PREÇO é IGUAL à 20", ele é na
verdade quem coloca o preço na roupa. Se você fosse um programador do
mundo real, poderia alterar o preço das coisas dizendo: "PREÇO é IGUAL
à QUANTO EU QUISER", pois é isso que o = faz, ele atribui valores.
Então quando dizemos Personagem._x = 40, estamos mandando que o X do
Personagem SEJA 40.

Você pode notar que certas partes do código
tem cores diferentes, isso ajuda a manter tudo organizado visualmente.
Você pode clicar no ícone do canto superior direito da janela de
Actionscript e ajustar suas preferências em Preferences, definindo
cores e etc.



Teste
seu filme agora. Você já se perguntou qual é o problema com esse vai e
vem da animação? Pra ser sincero, já está me irritando, então vamos
consertar.



Fez bastante sentido esse pedaço de código, certo? Personagem . gotoAndStop, do inglês, "ir para E Parar",
e o valor entre parênteses, (1), é o nosso quadro 1, onde nosso
personagem está parado, então ele irá para o quadro 1 e irá parar, ele
não exibirá o quadro 2, onde está começando a se mover. Agora quer ver
algo que vai explodir sua cabeça? Mude este valor de 1 para 2.

O
resultado que você deve obter é nossa animação sendo exibida
perfeitamente. Agora, como dar um comando de Stop pode fazer a animação
funcionar? Não faz sentido, certo? Mas basta pensar um pouco para ver
que Stop, está relativo a "Palitildo", e dentro dele possuímos outro
Symbol, "Braços e Pernas correndo", o qual não recebe Stop nenhum.

A
animação não era exibida antes pois sempre após o quadro 1, parado, e o
quadro 2, começando a se mover, ele retornava ao quadro 1 de "Boneco
Palito", parado. Ou seja, nunca saía do quadro 1 de "Braços e Pernas
correndo" no quadro 2 de "Boneco Palito". Calma, não é tão complicado
assim, você vai achar mais fácil fazendo do que lendo.

Se você
quisesse parar especificamente o Symbol "Braços e Pernas correndo", e
claro, já tendo nomeado a instância dele, por exemplo com o nome
"Correndo", você poderia fazer o comando Palitildo.Correndo.gotoAndStop(1); .

Animações
a parte, agora que já sabemos acertar a animação dele, seria bom que
ele não corresse parado no mesmo lugar, certo? Vamos fazê-lo andar, e
para tal, usar alguns novos comandos. Agora é a hora de eu dar uma
notícia não tão boa, o código é case sensitive, ele difere maiúsculas
de minúsculas. Digite gotoandstop ao invés de gotoAndStop
e não funcionará. Uma boa dica é sempre ficar atento nas mudanças de
cor de cada elemento, sendo que alguns códigos não se incomodam com a
mudança, como Function e function que veremos a seguir.



Sem pânico, vamos desmembrar o código. Tecnicamente este this não precisaria estar aí para a nossa animação, mas é bom limitar a sua área de ação para não ter bugs inesperados. Do inglês, this, significa "isto",
então não precisamos pensar muito para ver que ele serve para nos
manter somente relacionados ao que estamos mexendo no momento.

onEnterFrame, traduzindo "ao Entrar Quadro",
é um looping que acontece na velocidade da nossa animação, de 12
quadros por segundo se mantivermos os valores iniciais, significando
que este evento se repete a cada vez que um novo quadro entra em ação.

Function não é difícil de se imaginar, "Função"
em português, ou seja, ela tem um objetivo, que nós mesmos damos. Não
ligue para os parênteses, eles ficam vazios. Logo após os parênteses,
abrimos as chaves, { e um dos maiores dilemas da programação, NUNCA
esqueça de fechá-las } .

Ok, vamos juntar nosso código novamente:

isto . ao Entrar Quadro = Função()
{

}

Tudo
que estiver dentro dessas chaves se repetirá sempre que a condição que
as comanda se repetir. Nesse caso eu alterei o X do nosso personagem.

Palitildo._x = Palitildo._x +5;

Não
é difícil entender este código, eu estou mandando que o valor X do
nosso personagem passe a ser este mesmo valor X, mais 5. Se tentássemos
fazer o código assim, Palitildo._x =
+5;, na verdade não haveria soma nenhuma, estaríamos só mandando ele
para a posição 5 positivos. Você pode ver algo curioso, não fechamos a
linha da função ou das chaves com ponto e vírgula ; mas as que estavam
dentro delas ainda precisam.

Se isto é um jogo, não pega bem meu
personagem sair andando sem minha autorização, então vamos buscar um
código que não mova meu personagem sozinho, mas que coloque esse
movimento na minha mão. Podemos deletar tudo a partir da linha 9 e nos
preparar para a próxima aula.

Aulas de Flash 04 - Programando Movimento
Vamos aprender a movimentar o personagem por um código pouco eficiente

Para
começarmos a ter controle de movimento dos nossos símbolos, teremos que
começar a mexer com Variáveis. Elas são como baús invisíveis que
guardam informação para nós, de forma que sempre podemos colocar e
retirar nova informação de lá.

O sistema de movimento que eu vou
ensinar não é o ideal, e você poderia se perguntar, por que ensiná-lo
então? Não será pouco comum você encontrar códigos menos que adequados
e é importante se condicionar a jogar fora algo que não está
funcionando bem em favor da sua própria solução melhor.

A próxima aula ensinará a fazer o mesmo sistema de maneira mais simples, considere esta como uma prova de fogo.



Aqui
eu estou criando uma nova Variável, é isto que o comando var faz, ele
declara uma Variável para que possamos usá-la, sendo que "teclado" é
seu nome, e também uma descrição de sua função. Esta variável irá
absorver o valor numérico de cada tecla do nosso teclado que
pressionamos.

Mas ela não faz isso sozinha, então temos que programar algo para tanto.



Acho
que ninguém tem problema com a palavra "add", de adicionar, e Listener,
traduzindo literalmente, seria "escutador". A função deste comando é
justamente ficar atento para "escutar" o que estamos falando pra ele
através do teclado.



Acredito que onKeyDown também seja bem fácil de entender, traduzindo seria como "ao Pressionar Tecla". Eu criei mais uma Variável, chamada especificamente de "tecla", e adicionei a ela um código de captura, Key.getCode,
ou seja, quando uma tecla for pressionada, eu quero que seja executada
aquela função entre as chaves, onde o código da tecla será atribuído à
minha Variável "tecla".

Você já deve imaginar que cada tecla do
teclado tem seu próprio código e não tem realmente um jeito fácil de
lembrar esses valores, então eu estou incluindo-os em um arquivo de
texto. Na verdade eles estão todos disponíveis na ajuda do Flash
teclando F1 e procurando por Key.getCode .



Left
Arrow, Seta Esquerda, valor 37 e Right Arrow, Seta Direita, valor 39,
estes serão os valores que usaremos no código, começando pela esquerda.




A
primeira coisa a se notar é que eu coloquei o código dentro do nosso
código anterior, porque se você pensar na lógica, se o nosso evento é
"ao pressionar uma tecla", é nele onde eu tenho que colocar uma nova
questão "esta tecla presionada é a seta esquerda?". O comando trace é perfeito para testarmos nossa programação, ele apresenta a mensagem dentro de parênteses, no caso "Yay!", numa janela de debug do flash, só pra sabermos que nossa condição está sendo atingida.

Se você já teve qualquer outro contato com programação, o if não deve ser novidade. Se traduzirmos if, teríamos a palavra "se" em português. Na lógica é justamente isso, SE algo acontecer, realize o que está dentro das chaves. A nossa condição é justamente if
(tecla == 37) . A Variável tecla você ainda se lembra, absorve o valor
do teclado, sendo que 37 é o valor da Seta Esquerda. Os sinais == são
bastante comuns na programação, são sinais de comparação. Ao utilizar
somente um sinal de igual = você está atribuindo um valor, enquanto ao
utilizar dois == você está comparando.

Então este é o nosso
evento, logicamente falando, ao pressionar um botão, execute esta
função de pegar o valor da tecla pressionada, e se este valor for 37,
execute esta outra ação. Teste seu filme e veja o resultado. Algo
interessante a observar é que se você segurar a tecla, este comando se
repetirá em looping.



Seu
resultado final deve ser mais ou menos parecido com isso, o que
confirma que todo seu evento está acontecendo. Mas agora vamos apagar
esse trace e colocar aquilo que realmente queremos, movimento. Há
muitas formas de se fazer movimento e esta que utilizaremos não é lá
muito elegante, mas o importante é que funciona.



Essa
é a forma mais básica de mover um objeto, pegar seu valor X, utilizar
um = para atribuir um novo valor e então dizer que este novo valor é
igual ao seu X atual, mais um valor numérico, que será quanto você quer
movê-lo. Ao testar e manter pressionada a tecla, você pode notar que há
uma pequena aceleração, pois é quando seu evento entra em looping.

No entanto, ele ainda está se movendo, "parado", então vamos adicionar agora nossa animação de corrida.



Assim como mandamos a animação começar, também temos que mandá-la parar, vamos utilizar um novo comando, bem simples, onKeyUp, que seria obviamente o inverso de onKeyDown, ou seja, ao Soltar Tecla.



Ok,
você está começando a pegar o jeito, mas note que ao pressionar para a
esquerda, seu personagem ainda utiliza a mesma animação que para
direita. Para consertar isso poderíamos criar outros frames invertidos
e seria um pouco monótono, mas totalmente possível. No entanto, ao
invés disso, vamos utilizar um pequeno truque para virá-lo.



O
comando "scale", utilizado para alterar o tamanho, funciona com
porcentagens, o que significa que "100" é o nosso personagem normal, e
tecnicamente não há motivo para a primeira linha. Na seta esquerda note
que colocamos o valor de "-100", e isso fará com que ele se inverta
horizontalmente, já que estamos usando a coordenada X. É necessário
pensar na ida e volta, ou seja, -100 quando pressionarmos para a
esquerda e 100 quando pressionarmos para a direita, aí sim a linha da
direita ganha uma função.

Teste e veja como agora você pode
correr da esquerda para a direita de forma agradável e pronto para
aplicar isto em um jogo, então na próxima aula é isto que vamos fazer,
um jogo.

Aulas de Flash 05 - Programando um Jogo
Finalmente começamos a base da programação de um jogo propriamente dito

O
nosso sistema de movimento pode ter funcionado bem em um jogo em que
você só ia para a esquerda e direita e nem mesmo tínhamos chão, mas ele
claramente tinha falhas. Por exemplo, ao utilizarmos uma variável
(tecla == 39) para andar pra direita, automaticamente ele não andaria
para a direita quando outra tecla fosse pressionada por cima. Imagine
se fosse um botão de pulo.

Jogue fora praticamente todo o código que já tínhamos, vamos manter só essas linhas.



Ah, e essas também, vamos precisar delas



Note
que eu coloquei o personagem mais pra cima na posição inicial. A
própria linha 7 não será mais necessária quando terminarmos. Precisamos
criar algo graficamente antes, chão. Não esqueça de dar um nome para a
instância. Em um momento de criatividade inigualável, o chamei de
"Chao".



É importante notar algo chamado Registration, pois mais tarde precisaremos disso. Marque-a no centro e superior.



Anteriormente
utilizamos as variáveis para obter informações para movimento, mas em
um jogo de plataforma seria impossível trabalharmos sem variáveis para
dizermos quando e como podemos nos mover. Você só pode pular se estiver
no chão, só pode cair depois que o impulso do pulo acabar, nem pode
andar enquanto estiver no ar.

Pode notar que todos os casos são
de resposta sim e não, então usaremos variáveis Boolean, que só
armazenam dois tipos de informação, verdadeiro / true e falso / false. Comecemos então criando algumas variáveis.



Eu
separei todas em categorias para facilitar. As estáticas são as que
puxam animações de encerramento, quando o personagem pára de se mover:
"parado" será utilizada para saber quando o jogador não está
pressionando as setas esquerda ou direita, logo começa em true,
já que assim que o jogo começar dificilmente alguém já estará
pressionando as teclas esquerda e direita (não causaria nenhum bug se
tivesse, ela só viraria false de imediato). E "nochao" será para indicar que nosso personagem está "pisando" no chão, esta começa em false pois sabemos que colocamos nosso personagem acima do chão. Se começássemos com ele na altura do chão até poderíamos colocar true.

As
de movimento, "esquerda" e "direita", são ligadas quando pressionamos
as setas esquerda e direita, respectivamente. Precisaremos delas pois
não utilizaremos mais o código onKeyUp. Obviamente ambas começam em false já que só devem ser ligadas quando pressionarmos as teclas.

As
categorias Pulo e Queda são auto-explicativas, "pulo" será para dizer
que estamos pulando, "cair" para dizendo que estamos caindo, sendo que
"altura" medirá a altura e velocidade do salto e "queda" fará o mesmo
pela velocidade da queda. Sabemos que nosso personagem começará caindo,
então colocamos a variável cair para true, e consequentemente, pulo será false.

Por que insistir tanto em true e false?
Pois o código do jogo parecerá uma trança, então ajudará lembrar bem
das variáveis, que vão ajudar a trasformar o nosso entrelaçado de
movimentos em um jogo de plataforma que funciona direito.

Outra mudança é que antes o nosso código de movimento rodava dentro de uma function / função que executava-se em looping quando a condição a qual ela estava ligada acontecia, ou seja, onKeyDown / ao Pressionar Tecla, e dessa vez vamos colocá-lo dentro de um looping permanente de um this.onEnterFrame.



Vamos começar refazendo o movimento de andar para a esquerda e direita, com um novo código, Key.isDown,
não é tão diferente do anterior, mas com ele poderemos ler múltiplas
teclas, coisa que não seria possível antes. O valor 39 permanece como
antes. Aproveitaremos também para colocar nossa variável "direita" como
true, ou seja, verdadeira, estamos pressionando a seta direita.



Também introduzindo um conceito tão comum quanto o if na programação, o else. Assim como o if se traduz para se, o else e traduz para senão, ou seja, ele acontece quando há uma negativa do if,
que no nosso caso serve para deduzir que não estamos pressionando a
tecla direita, então podemos colocar essa conclusão na nossa variável,
direita = false;

Agora inverta tudo para a esquerda.



Tem um "defeito" nesses códigos para andar, eles não estão colocando a variável parado como false,
então mais tarde quando a utilizarmos, teremos um efeito indesejado.
Isso foi de propósito para que não deixasse de inserir alguns novos
elementos, o and / e e o or / ou.

Pelos nomes não é difícil saber o que eles fazem, and / e adicionam uma segunda condição a ser cumprida antes de se executar algo e or / ou adiciona uma segunda condição, mas na verdade somente uma delas precisa ser cumprida. Começaremos usando o or agora, mas o and não demora muito a aparecer.



Se direita ou esquerda forem verdadeiras, obviamente parado será false.

Você poderia apagar esse pedaço do código se colocasse parado = false; no if de andar para a esquerda e direita.

Bom, vamos terminar nossa programação na horizontal com três pedaços de código para que seu personagem fique parado.



E aqui está o and. Você já deve estar conseguindo ler o código a essa altura e entender o raciocínio sem auxílio. Se esquerda e direita forem false,
significando que nem as setas esquerda nem direita estão sendo
pressionadas, por lógica também significa que nosso personagem não está
se movendo, logo parado = true;

Se nochao e parado forem true, temos ambas as condições que precisamos para mostrar o nosso personagem parado, então, gotoAndStop(1); , caso você já não lembre mais, é o frame onde nosso personagem está parado.

E
este último pedaço é para aqueles jogadores espertinhos que querem só
ver se o jogo foi programado direito para depois tirar um sarro com o
autor, por exemplo, apertando as teclas esquerda e direita ao mesmo
tempo. Portanto, se ambas forem true, mostremos a animação dele parado também. Poderíamos também resolver esse problema ao utilizar o and no if de andar, algo como if (Key.isDown(39) and esquerda == false) se é que você me entende.

Bom,
andar e parar já tínhamos feito antes. Ok, não era nada tão mirabolante
quanto fizemos agora, mas é hora de pular para algo novo, literalmente.

Para este serviço eu criei dois novos frames no nosso boneco palito preferido.



O
Quadro 3 é o boneco pulando e o Quadro 4 caindo. Não se preocupe com os
braços atravessando a cabeça no Quadro 4, isso só acontece pois o
boneco palito é puro traço, transparente por dentro, poderia ser
resolvido pintando seu interior de branco, inclusive eu teria que fazer
isso se pretendesse colocar um fundo.

Veja que o código é bem
fácil de ser compreendido. O número 16 é o código para Shift, você pode
escolher a tecla que quiser pro seu pulo utilizando a mesma numeração
do Key.getCode



Se eu aperto o botão de pulo e eu estou no chão, eu posso pular, então pulo = true; que é mencionado logo depois, se pulo == true
então vamos fazer o boneco palito pular diminuindo sua coordenada Y.
Provavelmente você já sabe, mas o topo da tela tem coordenada 0, e o
inferior 400, então quanto mais diminuímos do Y, mais o boneco sobe.

Eu
poderia ter utilizado um valor fixo como 5 assim como fizemos para ele
andar, mas isso tornaria o pulo muito mecânico, quase como se fosse um
elevador, por isso eu criei a variável altura. Note que sempre que esse
loop se repetir, serão subtraídas 2 unidades da variável altura, que se
você bem lembra do início do código, começa com 20. isso significa que
primeiro ele subirá 20 pixels, depois 18, então 16, 14, e assim por
diante, ou seja, desacelerando naturalmente, como qualquer um que vive
por essa lei chamada gravidade.

Claro que este código sozinho só cria a subida, eis que entra esse outro pedaço.



Vamos pular o primeiro if
e ir para o segundo, ele é que faz a transição entre a subida do pulo e
a descida da queda. Usamos um comparador diferente, "igual" é ==, então
usamos o "menor ou igual" <= . Também existe "maior ou igual" >=
ou só "menor" < , e "maior" > , entre outros comparadores que não
usamos aqui, como o "diferente" != .

Veja que assim que a variável altura for menor ou igual ( <= ) ela colocará a variável pulo para false e cair para true.
É sempre importante estar recolocando os valores das variáveis para que
elas não fiquem zeradas, já que isso causaria efeitos adversos ao jogo.

Voltando ao primeiro if,
podemos ver que ele é bem parecido com o código de pulo só que
invertido, sendo que a variável altura, diminui, fazendo o boneco
palito subir cada vez mais devagar, enquanto a variável queda aumenta,
fazendo ele cair cada vez mais rápido. Se já estivéssemos criando o
código definitivo, precisaríamos ajustar um limite para o valor da
variável queda, ou em algum momento durante uma queda muito longa ela
estaria com um valor numérico tão alto que não haveria mais como ver o
movimento, ou ele poderia até mesmo atravesar plataformas muito finas.

Por
falar em plataformas, nosso código não estaria completo sem
programarmos o chão. Aliás, ainda faltam duas últimas coisas
importantes para o nosso código estar completo, inclusive algo que vai
abrir seus horizontes, o hitTest.



Oras, o que é um jogo sem contato? Vira nado sincronizado! o hitTest
é o comando que nos permite checar por colisões. O código funciona de
maneira bem auto-explicativa sobre quem colide em quem, e encerra todo
o nosso movimento de plataforma dizendo que se colidirmos com o chao,
nochao será true e cair será false.

Permita-me lembrar outra coisa que eu disse que seria importante.



Este
"centro" do símbolo é utilizado, entre outras funções, como o ponto que
detecta as colisões, então se quiséssemos que ele "entrasse" um pouco
no chão, para dar uma sensação de profundidade, bastaria mudar esse
ponto para o meio.

Mas essa não era a segunda coisa que eu
mencionava. Note que na imagem do //Chao está sobrando algo para aquele
pedaço de código em questão, }

Sempre fique atento aos
parênteses, é especialmente fácil esquecer deles quando uma condição
começa na linha 27 e só a estamos terminando na linha 114. Se você nem
lembra mais do que eu estou falando, aí vai a dica.



Já
estamos fazendo progressos bem consideráveis, com um personagem que
anda, pula, cai, etc... É fácil considerar que já estamos mais perto de
seu jogo de Flash preferido do que daquela animação do carro vermelho
andando da primeira aula. Na verdade, já temos boa parte do básico
utilizado para criar esses jogos.



Teste
seu jogo, corra de um lado pro outro, pule um pouco, aproveite o fruto
do seu esforço. Apesar de tudo, ainda tem uma coisa faltando no nosso
jogo. Ação.

Aulas de Flash 06 - Programando Ação
Que tipo de jogo estaríamos fazendo sem um pouco de ação?

Se
você achou que programar movimento era complicado, respire fundo,
programar a ação do jogo em si não fica atrás. Não é nenhum monstro de
sete cabeças, mas há alguns conceitos novos e lógica um pouco
diferente. Nesta aula vamos dar uma arma para o nosso personagem e
fazê-lo atirar.

Prioridades primeiro, precisamos de um novo gráfico.



Este
é o quadro 5 do Palitildo. Dei a ele uma cara de mau porque... pessoas
atirando devem ter cara de mau ._.' Claro, roxo não é a cor mais
máscula para um boneco palito com cara de mau atirar, mas estou ficando
sem cores. Podem notar que eu não fiz o braço que segura a arma, isso
porque eu o fiz separado por um propósito explicado mais a frente.





Essa
é a arma, não em tamanho natural, claro, quando encaixada no modelo ela
fica perfeitamente proporcional, eu a chamei de Arma (sim, criatividade
ainda em alta). Logo abaixo dela estão duas bolas vermelhas que serão
os tiros, os quais estão fora da área visível da tela, também
desproporcionais, mas vale lembrar que você pode usar o tamanho que
quiser. Para facilitar a programação vamos usar dois tiros, um para
esquerda e um para a direita.

Assim como com movimento, vamos
precisar determinar variáveis antes de começarmos a programar qualquer
coisa, então vamos pensar em quantas precisamos e colocar em prática.



A
variável atirar será usado para dizer se estamos atirando ou não,
porque vamos precisar negar certas condições, como a que coloca a
animação do personagem parado, e para isso vamos precisar ter uma
variável que indique. Já a variável balas é completamente opcional, eu
quis colocar para limitar o número de tiros que o personagem poderia
dar de uma só vez. Digamos que no seu jogo a arma fosse um revólver,
você poderia permitir que o jogador disparasse seis balas e então
tivesse que recarregá-lo.

A variável direcao é um velho truque, quando o jogador pressionar para a direita, ela será true, quando pressionar para a esquerda, será false,
e assim sempre teremos a informação de em qual direção o personagem
está atirando. A variável atirando é um timer, pois atirar não é como
andar, você pode não estar mais pressionando a tecla de tiro, mas o
personagem não deve voltar à sua animação inicial tão rápido, pra isso
o timer.

Explicadas as variáveis, vamos começar a aplicar as mais simples.

Vamos mudar isso:



Para isso:



Nesse jogo em específico eu só quero que o personagem possa atirar quando estiver parado, então eu coloquei um and atirar == false.
Pode notar que a variável direcao foi o que eu falei antes e algo que
eu não mencionei é que se a arma será um objeto separado "grudado" no
personagem, temos que usar o _xscale nela também para mudar a direção.

Acho que não preciso falar, como você já sabe, fazemos o mesmo para a esquerda, invertendo o _xscale para -100 e a variável direcao para false.



Como
dito antes, temos que alterar um pouco o nosso código que chama a
animação do personagem parado. Em um jogo que seu personagem tenha
muitas animações extras, seria bom ter uma variável só para todas, mas
como aqui só atiramos, dá pra levar só com a negação da variável
atirar.



Começando com o código para atirarmos, vamos logo no mais óbvio.



Assim
a arma sempre ficará grudada no boneco palito, sendo que o -5 é só um
pequeno ajuste para encaixar bem. Mas ainda tem algo errado, imagine
como está nossa imagem no momento.



Meio alien, não? Temos que programar algumas coisas, a começar por:



Você pode notar que _visible naturalmente pode ser true, ou seja, visível, ou false, ou seja, invisível, resolvendo rápido o nosso problema sem criarmos mais uma variável.



Não
coloquei a arma visível ainda pois isso causaria um certo atraso em
relação ao tiro. Caso você queira esse atraso, como se ele mirasse
rapidamente antes de atirar, pode alterar isso, mas por enquanto eu
colocarei a arma visível no mesmo evento do tiro. Já a variável
atirando é aquele timer mencionado antes, então esta variável
continuará sendo diminuída até chegar ao 0, e então finalizarmos a
animação do personagem atirando.



E assim que o nosso timer da variável atirando for menor ou igual a 0, colocar a variável atirar para false.

Para
o nosso próximo pedaço de código, o tiro, nós vamos precisar de algumas
novidades, pois estaremos lidando com um número indeterminado de
objetos, apesar de eu ter escolhido limitar a 3 tiros por vez, ele pode
ser usado para um número infinito deles.

A primeira novidade não está no código, mas na Library, chama-se Linkage



Tiro
a Disparar Dir é o nome que eu dei, mas só este nome não é suficiente,
é necessário criar um identificador para podermos chamá-lo pelo código,
eu escolhi o nome TiroDir.



Marque
a opção "Export for ActionScript", a outra opção será marcada
automaticamente. Faça o mesmo para o tiro esquerdo e vamos voltar ao
código.



A
primeira linha pode até assustar, mas ela só usa tudo que já vimos para
atestar todas as condições para o tiro acontecer, 17 é o número para a
tecla CTRL, balas é um opcional para só permitir que um novo tiro seja
disparado caso haja menos de três tiros em jogo, nochao e parado dizem
que o personagem não poderá atirar pulando ou caindo, nem correndo e
direcao == true marca que este é o nosso tiro para a direita.



Seguindo
com código simples, tornando a arma visível, dizendo que o personagem
está atirando e não está parado, colocando a animação certa e
estabelecendo o valor 5 para o nosso timer atirando.

O próximo pedaço de código assusta mais ainda, então eu vou explicá-lo antes de mostrar, é o attachMovie que permite que utilizemos a inserção de um Movie Clip sob as condições que queremos. A estrutura é mais ou menos assim:

O nome do nosso novo objeto = attachMovie("Nome da instância", "Novo nome da instância", aqui o valor numérico equivalente ao nível da camada em que se deseja criar o objeto , { _x: Aqui o X em que desejamos colocar o novo objeto , _y: e aqui o Y } );

É
mais complicado de ver e de explicar do que realmente usar, uma vez
pegando o jeito você logo usará este comando com naturalidade.

O código poderia ser, por exemplo:

NossoTiroDir = attachMovie("TiroDir", "TirodisparadoDir", 1 , { _x:20 , _y:380 } );

E
isso faria o tiro aparecer nas coordenadas 20 e 380 (canto inferior
esquerdo). No entanto, não só o nosso X e Y não são fixos, sendo
determinados pela arma, quanto se colocarmos todos os tiros na camada
1, automaticamente ao disparar o próximo tiro, o primeiro
desapareceria, porque não podemos ter dois objetos atuando no mesmo
nível de profundidade, além de todos os nosso objetos terem o mesmo
nome, TirodisparadoDir.

O X e Y não é problema algum, basta usarmos { _x:Arma ._x + 45 , _y:Arma._y
- 5 } sendo que os valores 45 e 5 são só o que funcionava para
posicionar o tiro na saída a arma, já que seria meio ridículo disparar
pelo lugar errado.

Mas para poder criar objetos infinitos sem
que um ocupe a camada do outro, vamos sempre estar pegando o valor da
próxima camada mais alta, e para tanto, precisamos de um novo comando, getNextHighestDepth() que traduzindo significa pegar Próxima Profundidade Mais Alta. Vamos atrelar a ela um comando _root, que servirá para que o nosso comando remeta à raiz do arquivo para tirar esse valor, ou seja, _root.getNextHighestDepth() o qual retornará um valor numérico. Então é este comando que queremos para determinar o valor numérico da nossa camada.

Mas por que parar por aqui? Podemos também resolver o problema dos nossos tiros sairem todos com o mesmo nome, "TirodisparadoDir".
Poderíamos criar uma variável, por exemplo "tiros" e sempre que um novo
objeto fosse criado, adicionar mais uma unidade à ela, e onde colocamos
o nome da nova instância ficaria "TirodisparadoDir"+tiros
e o primeiro tiro sairia TirodisparadoDir0 e o segundo
TirodisparadoDir1 e assim por diante, mas por que nos dar ao trabalho?
Vamos utilizar o mesmo comando da camada e colocar "TirodisparadoDir"+_root.getNextHighestDepth()

E é assim que fica o nosso código final, que eu tive que dividir em duas linhas pra caber na imagem:



Por fim, adicionar mais uma unidade na variável balas. Agora respire fundo e vamos ver o código completo.



Mas
se você está ligado no que o código faz já deve imaginar que isso cria
o tiro, mas não faz ele se mover, precisamos de algo pra resolver isso.




Como estamos lidando com objetos múltiplos é hora de começar a usar o this
pois os mesmos eventos começarão a não funcionar para todas as
instâncias quando multiplicarmos um símbolo. E aumentar o X em 20 dá
uma velocidade agradável, altere como preferir mas não tanto ao ponto
que o tiro se distancie tanto que possa atravessar alvos finos demais.

Se
você já testou o jogo deve ter reparado que após três tiros, não
consegue mais disparar, pois limitamos os tiros a 3, mas não excluímos
as balas que perdemos. Assim como o attachMovie nos permite chamar Movie Clips, temos un comando que nos permite mandá-los embora, removeMovieClip
o qual usaremos em conjunto com o this para tirar todas os tiros que
sairem da tela. É importante ressaltar que este evento vai dentro do
NossoTiroDir.onEnterFrame = function() e por isso que o this pode ser usado para se referir a ele.



Como
temos um tiro pra direita e um pra esquerda obviamente o tiro pra
dirita só vai sair pela tela à direita. Não há nenhum mistério no removeMovieClip e é aqui também que removemos uma unidade da nossa variável balas para poder atirar mais

Fizemos relativamente pouca coisa, mas como já está ficando um pouco grande, vamos deixar o inimigo pra próxima aula.

Aulas de Flash 07 - Programando Inimigos
Existe um ditado na Força Aérea que diz: "É preciso um grande inimigo para construir um grande avião"

Podemos
dizer que a última aula já foi o ápice, com ela aprendemos praticamente
todo o necessário pra programação de um jogo, esta aula é mais como uma
aplicação prática com poucos pequenos códigos novos.

A primeira
mudança, visível logo de cara, é que eu mudei o X do personagem para
colocá-lo no meio, para fazermos com que um inimigo apareça pelo lado,
aleatoriamente.



Saudades de quando escrevemos isso?

Já que estamos falando de código antigo, podemos apagar este pedaço aqui



Afinal escrevemos muitas linhas para que ele saiba exatamente qual animação mostrar em qual situação.

Voltando ao código novo, eu criei algumas variáveis novas para o nosso inimigo.



A
variável inimigos contará quantos temos em tela, assim sempre que ela
estiver em 0, saberá que deve criar mais, sim, é um daqueles jogos de
inimigos infinito, ela começará em 0 para que o jogo já comece com ela
trabalhando. A variável morto é bem explicativa, ela registrará se o
inimigo foi atingido e portanto, morto, e obviamente começará como false.

A
variável desaparecendo será numérica, para que possamos dar aquele
efeito legal do inimigo desaparecendo aos poucos no ar, começamos em
100. A variável lado só terá dois valores, 0 e 1, onde 0 significará
inimigo vindo pela esquerda e 1 pela direita, mas não a fiz Boolean
para que ela possa ser facilmente alterada caso quiséssemos fazer uma
situação diferente.

Mas como eu sou distraído, ainda não criei o gráfico do inimigo, então invocaremos...



O
Boneco Palito Negro de Olhos Vermelhos!!! Sabe, os nomes dos bonecos
foram usados como uma brincadeira com YuGiOh, mas até que soam bem
racistas quando não se referem a dragões...

Não precisamos do
frame parado, pois ele estará sempre em movimento, então substitui pelo
quadro do tiro. A animação de andar você ainda lembra como é, ela está
toda dentro do Symbol dentro do Quadro 2. A novidade fica por conta do
Quadro 3, que será usado para a morte do inimigo.

Você pode notar pela cor de fundo da imagem que eu o coloquei fora da área de jogo, e após programarmos o attachMovie
para ele até poderíamos apagar, mas não faça isso, usaremos para
exemplificar algo em uma outra aula. Também fora do quadro eu criei
dois tiros para ele disparar e oferecer algum perigo ao jogador.

O próximo pedaço de código é o attachMovie onde eu nomeei o Linkage para Inimigo, não há nenhuma novidade nisso, se a variável inimigos for igual a 0...



Algo novo no entanto é este lado = random(2); que como mencionado anteriormente é a variável que determina se o inimigo é criado à esquerda ou direita. A parte random(valor) traduzindo do inglês, random significa aleatório
e o valor 2 no caso significa que o aleatório será entre dois valores,
0 e 1. Você pode notar que incluir o 0 é uma bela pegadinha para
confundir.

A seguir um código simples de perseguição, sempre que
o X do inimigo for menor, ele andará na direção do personagem,
adicionando 2 ao X, e se ele for maior, ele andará também na direção do
personagem, porém subtraindo. Notem que eu abusei do this que por estar dentro de NossoInimigo.onEnterFrame = function() ele se refere ao NossoInimigo. Não é o código ideal, mas vamos manter pouco complicado. Obviamente temos um and morto == false para que ele não ande após morrer.



Ao ser atingido, morto será true
e durante essa condição, ele exibirá o Quadro 3, onde faz a pose de
morto, e a variável desaparecendo será reduzida de 10 em 10. Ao
diminuirmos o ._alpha o inimigo vai
ficando cada vez mais transparente, sendo 100 visibilidade total e 0
completamente invisível, e ao atingir o 0, ou ir além, já que o código
pode rodar até o valor ficar negativo, aí sim vamos remover o inimigo,
reiniciar o valor, colocar morto em false e retirar uma unidade de inimigos, que voltando ao 0 irá criar outro novamente.



No
entanto, não criamos um inimigo, afinal ele nem mesmo está fazendo
alguma oposição, são alvos ambulantes andando em direção ao matadouro.
Precisamos colocar um pouco de inteligência neles. O termo inteligência
articial pode intimidar um pouco, mas em jogos nada mais é do que um
comportamento lógico ou aleatório pré-programado, e o que faremos é
mandar o personagem se aproximar quando for atirar, e se afastar quando
não puder atirar.

Você deve lembrar das nossas variáveis de
atirar com o nosso personagem, havia uma chamada atirar para dizer que
ele estava atirando, aqui vamos chamar de inimigoatira e tinha uma
chamada atirando que era um timer para ele parar de atirar e voltar ao
seu movimento padrão, aqui chamaremos de tempodostiros e faremos ela um
pouco maior que a do personagem para usarmos na AI, sendo seu valor
inicial 50.



Para
a detecção de proximidade eu utilizei um círculo de aproximadamente
350x350 que seguirá o personagem o tempo todo. Isso não é nem um pouco
recomendável, e numa programação mais limpa seria muito melhor comparar
o X do personagem e do inimigo, mas quis manter as coisas visualmente
simples por enquanto. Eu chamei esse círuculo de areadetiro, e ela será
invisível no campo de jogo, então ao invés de programar o ._alpha dela, vamos alterar direto nas propriedades do objeto, clicando nele e trazendo a barra Properties.





Colocando
a porcentagem em 0% ele ficará completamente invisível, mas é uma boa
deixar em uns 50% para enxergarmos ele na tela como um Debug. Sempre
que o inimigo encostar nesse círculo, e ele estiver pronto pra atirar,
ele o fará. Mas antes precisamos programar lá no início do código para
que esse objeto siga o personagem.



Você
vai notar que tem um certo atraso entre o movimento do personagem e a
área seguir, porque tanto o movimento quanto a atualização acontecem no
mesmo looping, se quiséssemos uma maior exatidão, em cada movimento
teríamos que mudar o X e Y da Área de Tiro em todos os códigos que
mexem com o X e Y do personagem, mais ou menos como adicionamos a arma,
mas está satisfatório por enquanto.

Para o próximo pedaço de código, note que tempodostiros não está dentro de nenhum if ou function, sua função de sempre ser reduzida uma unidade do seu valor se repetirá sempre.



E
se o inimigo estiver sobre a Área de Tiro, seu alpha for 100, já que
menor que isso significaria morto, e o tempodostiros for menor ou igual
a 0, já que a variável continuará sendo diminuída até valores
negativos, então ele irá atirar no nosso personagem.

Já não tem nenhum mistério no código, mas aquele bloco do attachMovie
ainda pode assustar um pouco, mas é só porque ele é muito extenso
horizontalmente e eu tenho que pular linha para transformar em imagem,
quando você "desdobrar", vai parecer normal. Veja também que enquanto
ele não encontra os caracteres que o fecham, como ( ) ou { }, ele
considera o código como aberto. Isso vai explicar alguns erros que você
possa ter nos seus futuros códigos próprios.



Podemos ver o gotoAndStop(1); para mostrar a animação do tiro, apesar de só isso ainda não ser suficiente, temos o inimigoatira = false; o reset para tempodostiros = 100; e os _xscale para mudar a direção.



Bom,
o próximo código também não é novidade, é só para mover os tiros do
inimigo. Não programaremos ainda as colisões com o personagem, vamos
deixar pra próxima aula... bem, não próxima exatamente, mas você vai
entender.



Para o nosso próximo código vamos voltar ao movimento do inimigo para incrementarmos um pouco.

Primeiro,
se só faltarem 50 loops (são 12 fps ou quadros por segundo), ele já
começará a andar na direção do nosso personagem, para que quando chegue
a 0, ele esteja perto o bastante para atirar.



E quando ainda faltar muito para ele poder atirar de novo, ele vai fugir



Perceba
que eu usei maior que 50 e menor que 95, o que significa que entre 100
e 95 ele não executará nenhuma função, perfeito para exibir a animação
de tiro.

Claro que esta AI não é nenhum primor, caso ele esteja
no mesmo X do personagem, mas com a variável tempodostiros abaixo de 50
(estado que dura uns 3 segundos), começará a sambar de um lado pro
outro até que atire e então fuja. Ele também pode entrar e sair da tela
livremente, pois se houvesse um limite, teríamos que programar mais
ações para deixar a AI cada vez mais real.

Não está ruim do
jeito que está, está bem arcade, inimigos continuam entrando e tentam
te matar e você tem que ser rápido para atingí-los antes, se eles
atirarem, você pode pular. Imagine que colocássemos novos tipos de
inimigos, com comportamentos variados, situações diferentes, como
inimigos saindo de alguma construção do fundo ou vindo pelos dois
lados, mortes diferentes dependendo se o inimigo está de frente ou de
costas (usando algo parecido com o Symbol Cabeca, mas na parte de trás
do personagem), viraria um jogo divertido.

Nosso jogo está
praticamente pronto, mas ainda falta tornarmos ele apresentável,
amarrar algums pontas soltas, e claro, botar som. A próxima aula no
entanto é dedicada a dar uma incrementada misturando-o com outro estilo
de jogo no Flash, os que utilizam o mouse, para vermos como seria se
este jogo tivesse um outro tipo de jogabilidade.

Aulas de Flash 08 - Programando Mouse
Não dá pra programar no Flash sem aprender a usar o Mouse

Não
dá pra fazer uma aula de como criar jogos no Flash sem abordar jogos de
mouse, então vamos adaptar o nosso jogo para aceitar também tiros com o
mouse. Como isso não tem muito a ver com o jogo que estávamos criando,
você pode querer não adicionar ao código final, então é melhor fazer
uma cópia agora para depois prosseguir na aula 9. Esta aula também tem
uma parte opcional, mas falaremos mais a respeito dela quando chegar.

Já
de praxe, criamos uma nova variável, não seria necessário se o jogo
fosse só de mouse, mas eu a estou usando para ligar e desligar a mira.



Temos que encher o código de and tiropreciso == false
basicamente nos mesmos eventos de tiro comum, movimentação, etc, mas
principalmente nos que engatilham a animação do personagem parado.
Muitas vezes isso não é importante, pois os códigos se sobrepõe.

Outra
alteração que eu fiz em código antigo foi criar a necessidade para um
tiro com mouse em primeiro lugar, colocando os inimigos na posição Y de
50, lá no alto da tela, fora do alcance do nosso tiro comum.

O próximo passo é criar uma mira para seguir o nosso mouse.



E
dentro desta mira um objeto invisível, mais ou menos como o symbol
Cabeca ficava dentro do symbol do Inimigo. Eu a chamei só de Centro da
Mira.



Continuando
sem nenhuma novidade no código, caso você esteja com preguiça de
checar, 32 é o equivalente à Barra de Espaço, será o botão que enquanto
pressionado permitirá que atiremos com o mouse.



A seguir um código simples que irá colocar a Mira sempre no mesmo X e Y do Mouse, a novidade fica por conta do onMouseMove que traduzindo seria assim que o Mouse se Mover o que fará com que sempre que o Mouse se mova, leve a Mira com ele



Mas
basta testar o jogo para ver que o resultado não está satisfatório, a
Mira fica lenta, afinal isso está rodando em um looping relativamente
lento, de 12 quadros por segundo

Para consertarmos isso usaremos o updateAfterEvent traduzindo atualizar Após Evento
que é uma linha de código útil para esse caso, mas que sempre deve ser
pesada ao ser usada. Ela permitirá que este pedaço de código onde se
encontra atropele a taxa de quadros do frame e rode em um looping muito
mais rápido, assim acompanhando perfeitamente o mouse



Aqui o tradicional jogo de fumaça e espelhos, mostra um, esconde o outro, com linhas um pouco diferentes para o mouse como .hide e .show

Vamos
criar um método de tiro de apontar e clicar, já temos a Mira, um Centro
de Mira dentro dela, um Inimigo, uma Cabeca dentro dele, só precisamos
juntar isso tudo para criar um belo POW! Hum... não temos um efeito de
impacto...



Pronto,
agora sim! Também associei este Symbol a variável desaparecendo para
que fosse sumindo gradativamente junto com o inimigo

Para detectar o clique temos o onMouseDown e eu usei o if(Mira._visible == true) assim como poderia ter checado a variável tiropreciso

E
com isso já podemos segurar a barra de espaço, mirar com o mouse no
inimigo (que eu coloquei no alto por praticidade), clicar na cabeça
dele e ele morre como se fosse atingido por um tiro comum.



Agora
a parte opcional. Você está aprendendo a criar um jogo simples com
conceitos que podem ser usados para criar jogos ainda mais complicados
simplesmente melhorando a jogabilidade, porém, uma boa parcela de jogos
em Flash se utiliza de matemática para criar certos tipos de
jogabilidade, então é bom ter uma amostra do que você pode esperar se
seguir esse caminho.

Usaremos a classe Math, disponível no Flash
desde a versão 5.0, para criar um braço que rotaciona, apontando sempre
na direção da mira e um tiro que é disparado em sua direção.

Voltemos
ao código do tiro com mouse. Uma coisa que você deve ter notado é que
quando segura a barra de espaço e a mira aparece, seu personagem ainda
aponta para frente. Digamos que você queira que o braço acompanhe a
mira, parece fácil, não?

Para tanto, usaremos o _rotation
que para dificultar nossa vida precisa receber informação em formato de
ângulo que significa que precisaremos pensar matematicamente. E o que
seria da matemática sem triângulos? Se você pensar bem, o braço que
atira, o X do mouse e o Y do mouse formam um triângulo, significando
que podemos obter todo tipo de informação matemática a partir deste.

Por exemplo, para obter o ângulo que precisamos rotacionar o braço do personagem, só precisamos da função Math.atan2( Y , X ); onde tan vem de tangente, que retornará o ângulo formado entre um ponto Y e um ponto X



Mas
isso não se trata de um passo único, pois receberemos o valor desse
ângulo em radianos, e então o transformaremos em graus. Para tanto
vamos usar duas variáveis, rotacaoemradianos e rotacaoemgraus

E
para calcular a distância entre os pontos X e Y usamos esse macete
simples de subtrair um pelo outro X do mouse menos X da Arma será igual
à distância horizontal entre os dois, e assim por diante.



Vindo direto do arquivo de ajuda do Flash, para converter radianos para ângulo, utilizamos a seguinte linha, onde Math.PI é o valor que você conhece arredondado para 3,14



Agora
é só aplicar esse valor do ângulo ao comportamento do nosso mouse. Para
que o jogador não precise se virar com o teclado, eu fiz dois if
comparando o X para quando a mira está à esquerda ou à direita. Para
espelhar o ângulo para a esquerda basta adiconarmos 180 ao valor.



Por fim um updateAfterEvent para que o braço se mova tão rápido quanto a mira.

Adicionei também ao evento de tiro comum um Arma._rotation = 0; para que ele aponte para frente em tiros comuns

Na
parte simples era só apontar e clicar e o inimigo morria, mas para
disparar na direção do ângulo, precisaremos de mais matemática que
isso, e se você odeia matemática como eu, isso pode ser um problema.
Por isso pedi ajuda ao Mister Ricko e Xano.

Pra início de conversa, é necessário criar um novo tiro e estabelecer o Linkage dele como de costume, aqui foi o TiroMouse



Também
foi necessário conferir se a nossa variável de tiro estava ligada e
inserir a limitação do número de balas, mas você sabe que pode
adaptá-la ao seu agrado.

Normalmente para criar nosso tiro nós só o posicionávamos na posição Arma._x + 50 mas agora que estamos lidando com um ângulo que varia, precisamos criá-lo utilizando Arma._x + (Math.cos(rotacaoemgraus * Math.PI / 180) * 50) onde cos vem de Cosseno e na fórmula da coordenada Y, sin traduzindo seria Seno

Vamos
voltar a usar essa expressão para determinar a progressão dos tiros,
que antes era tão simples quanto sempre adicionar X + 20 e agora é mais
complicado.

Você deve se lembrar da Aula 2 aonde colocamos uma Timeline dentro de um Symbol e ela era executada no nosso quadro principal.

Não
é diferente com Actions, podemos programá-las dentro dos Symbols para
que tenham ações no nosso quadro principal com algumas propriedades
únicas. Por exemplo, seria bem chato fazer a progressão dos tiros
individualmente, mas se entrarmos no Symbol do tiro e programarmos de
lá, será bem mais fácil.

A primeira coisa que você pode
estranhar é que o espaço aonde escrevemos todo o código, agora está
vazio, isto porque, assim como a Timeline, estamos num espaço próprio,
e dentro deste Symbol ainda não há nenhum código rodando.

Vamos
mudar isso começando com variáveis para pegar a "velocidade" que o
nosso tiro deverá avançar, eu as chamei de progressaoX e progressaoY



Hora de explicar os _parent. basicamente, a variável rotacaoemgraus não existe aqui, ela existe no quadro anterior, para isso usaremos _parent. para puxar o valor deste quadro anterior. Caso estivéssems dois quadros adentro, poderíamos usar _parent._parent. e assim por diante.

A seguir um this.onEnterFrame que é importante avisar, não podemos programar aqui e no quadro principal ter um NossoTiroMouse.onEnterFrame pois eles entrariam em conflito



Antes
só precisávamos nos preocupar com o tiro saindo pela esquerda ou
direita, mas agora ele pode sair por qualquer extremidade da tela,
então temos que cobrir todas.



Mais
um lembrete de extrema importância, ao programar dentro de um Symbol,
não poderíamos por exemplo inverter e programar assim



Pois o código roda dentro deste Symbol, então se ele for removido, qualquer comando listado após este, não será executado

E por fim o hitTest com o inimigo

Antes
de rodar nosso código precisamos apagar o TiroMouse que ficou lá quando
o criamos, pois mesmo fora da tela, por estar programado por dentro,
nos traria problemas. Mais precisamente, se você o deixar fora da tela,
ele removeria infinitamente uma unidade da variável balas

Bom,
não importa se você escolher o primeiro modo ou este mais complicado
para atirar com o mouse, pois sabe o que eu acho que está faltando? Uma
boa música e uns efeitos sonoros.

Aulas de Flash 09 - Programando Música & Sons
Chegou a hora de adicionar música e sons ao nosso jogo

Eu
sempre deixo os sons nos meus jogos por último, então não é incomum
encontrar um jogo meu incompleto sem som, mas isso não vai acontecer
desta vez.

O Flash permite que você importe arquivos, entre eles
o tradicional MP3 e arquivos WAV. Ele não se limita a arquivos de som,
mas é o que precisaremos por ora.

Por exemplo, para colocarmos uma música de fundo em MP3, vamos em File > Import > Import to Library



Você
verá uma tela de progresso dizendo "Working", e quando terminar, seu
arquivo MP3 estará agora na sua Library. É possível criar um novo Layer
chamado "Música", arrastar o arquivo de som direto da sua Library para
a tela e ele estaria anexado diretamente ao seu jogo.

Visualmente
pode parecer que não mudou nada, mas basta testar para ver que a música
toca assim que o jogo começa. Se quiser ver o resultado com seus
próprios olhos, experimente inserir alguns quadros a mais, só não
esqueça de apagá-los depois ou terá efeitos adversos.



Uma
vez introduzida no quadro temos um bocado de opções para a música na
guia Properties. Mazinger Z Theme é o nome da música que eu importei



Há um bocado de opções para as músicas, inclusive efeitos para a entrada e saída gradativa do som, o Fade in e Fade out.



Também
há uma caixa onde diz Repeat e você pode estabelecer um número de vezes
que aquele arquivo será repetido, ou clicando na caixa e selecionando
Loop para repetir infinitamente. Este método para inserir música até é
útil e rápido, mas não é o único que temos à disposição e com certeza
não funcionará para efeitos sonoros, então vamos jogar isso fora e
voltar à programação.

Primeiro damos um Linkage para a música
assim como fizemos para os tiros e para o nosso inimigo, a minha se
chama MazinGo. Não queremos que nossa música entre em looping infinito
em seus primeiros segundos, pareceria um disco arranhado, então vamos
programá-la fora do onEnterFrame



Atribuímos
a essa variável a classe de som e ganhamos alguns comandos que não
poderíamos chamar sem ela. Por exemplo, para adicionarmos a nossa
música através dela, podemos usar um código mais ou menos parecido com
o de quando colocamos os tiros e inimigos, só que dessa vez é .attachSound("Nome do Linkage");



E prosseguimos com o comando .start,
que nada mais faz do que tocar a música, seguido de dois parâmetros.
Digamos que eu queira pular a introdução da música até a entrada dos
vocais (nada pessoal, Isao Sasaki), que por um acaso eu sei que é por
volta dos 10.9 segundos, então eu coloco este valor para que seja
pulado. O segundo valor é o número de vezes que eu quero o som
repetido, e como eu quero que fique em looping coloquei um valor bem
alto, uma maneira não muito elegante mas funcional.

Caso quisesse atribuir um número de looping mas não de segundos a pular, poderia colocar o código .start(0, 9999); e caso só quisesse estabelecer o primeiro valor, .start(10.9); e obviamente, .start(); caso não fosse definir nenhum dos dois. Lembrando que a cada looping ele pulará os mesmos 10.9 segundos.

Algo
a lembrar é que talvez as pessoas não queiram ouvir o tema de Mazinger
Z 9999 vezes (a audácia!), então um sistema de liga e desliga seria
adequado, usando o .stop(); mas com
cuidado, pois se não for especificado um alvo dentro desses parênteses,
ele parará TODOS os sons. Se quisermos parar somente a música, dizemos .stop("MazinGo");

É
importante criar um botão "Mudo" que corte todos os sons do jogo, pois
nada é mais comum do que alguém jogando um jogo em Flash quando na
verdade deveria estar fazendo outra coisa.

Agora algo engraçado, ou desesperador, dependendo do ponto de vista, arquivos MP3 podem ocupar muito espaço.



Mesmo
tendo somente duas MP3, de no máximo 3 MBs juntas, o arquivo está de um
tamanho imenso! Bom, a culpa não é só das MP3, isso acontece por vários
motivos, inclusive porque essas mesmas duas MP3 foram adicionadas
várias vezes na Library durante o processo de capturar imagens para o
tutorial. Parte desse problema é facilmente resolvido em File ->
Save and Compact. Ainda assim você pode ver seu arquivo ficar gigante,
só para depois ver um arquivo final compilado muito menor.

Caso
mesmo compilado o tamanho não lhe agrade é possível editar clicando com
o botão direito no seu arquivo de áudio na Library e em Properties



Basta
desmarcar "Use imported MP3 quality" se estiver marcado, que traduzindo
seria "Usar a qualidade da MP3 importada" e surgirão opções para
diminuir a qualidade, caso elas já não apareçam logo de cara.



Quanto
menor o Bit rate, menor a qualidade e menor o tamanho final, então
encontre seu equilíbrio, evite o mínimo pois ficará péssimo, o mono é
praticamente obrigatório, mas por um acaso esta já estava em mono,
então a opção "Convert stereo to mono", que traduzindo seria "Converter
stereo para mono", não estava disponível.

O resultado final é
mostrado ali embaixo, 12.5% do tamanho original, daria pra ficar ainda
menor com mais testes. Não se dê ao trabalho de clicar em "Advanced",
só mostrará as opções de Linkage.

Com o código de inserir a
música ficou moleza inserir também os efeitos sonoros, é só aplicar
praticamente o mesmo conceito, porém alterar o momento do start.



Depois é só inserir o start no mesmo evento da criação do tiro



Mas
digamos que você queira fazer algo louco... e eu sei que quero. Tirar
um efeito sonoro do meio de uma MP3, um grito, um solo de bateria, um
som engraçado, claro, não vai ficar nada bom se tiver muita coisa
tocando ao fundo, mas será que dá pra fazer?

Se soubermos onde
começa o som que queremos pegar, que no meu caso é 6.2 segundos, e
sabemos onde ele termina, 6.6 segundos, podemos fazer um belo remendo
que funcione para tanto.



Existem mais opções em relação a som e uma delas é a .position que você pode reparar que retorna o valor em milisegundos da posição em que a música está.

Parar
um som no Flash é um pouco mais complicado, na verdade, a ação em si é
bem fácil, mas pra onde você leva a partir daí pode ser um pouco
difícil.

Existe um comando simples o onSoundComplete = function() mas tem uma forma mais simples de se parar um som com um if.

Além do .position que diz onde o som está, há também o .duration,
que indica a duração total do som. Assim basta usar um pouco de lógica,
quando a posição da música for igual à duração, você pode parar o som,
pois ele estará no seu final.



O
que acontece no entanto, é que ao parar o som, ele fica exatamente
parado onde você o mandou parar. Isso significa que ele não volta ao
início, o que torna bem difícil fazer por exemplo uma trilha sonora de
várias músicas em sequência.

Outras duas opções bem simples mas que causam uns efeitos legais



Bom, volume é auto-explicativa, o valor 75 é só um exemplo, esse comando controla o volume do som atribuído ao objeto.

Mas .setPan
não é algo que se entende de cara. Seria o equivalente ao som estéreo,
se colocarmos em 0, o som sairá normalmente pelas duas caixas. No
entanto, se colocarmos esse valor em 100, o som sairá unicamente pela
caixa direita, assim como -100 faria o son sair apenas pela caixa
esquerda, com variações entre esquerda e direita nos valores
intermediários.

Imagine que efeito legal não daria pra fazer
diminuindo o volume do som quando a distância do inimigo pra personagem
estiver muito grande, e fazendo com que o som do tiro venha da mesma
direção de onde o inimigo estiver disparando.

Dessa vez você não
receberá o arquivo exato que eu usei porque ele ficou muito grande para
download, mas as versões compiladas estão com os sons e com um tamanho
aceitável, basta seguir os passos e adicionar suas próprias MP3s.

E a próxima aula é pra arrematar!

Aulas de Flash 10 - Finalizando
É hora de finalizar o jogo e embrulhar o pacote

Viva! Nosso jogo está pronto! Mas peraí, não dá pra lançar do jeito que está e esperar sucesso!

Precisamos
de uma tela de carregamento, um menu, uma tela de game over, créditos,
etc. É hora de botar em prática tudo que já aprendemos e aprender as
últimas lições que precisaremos antes de começarmos a fazer nossos
próprios jogos livremente.

Antes de mais nada, temos que dar
mais espaço, todo o nosso jogo e programação estão em um quadro só e
precisamos inserir alguns antes.

Selecione os nossos dois
quadros, para fazer isso basta usar o método tradicional de dupla
seleção, clicando em um, segurando Ctrl e clicando no outro.



Agora
clique com o botão direito e selecione Insert Frame, ou melhor, utilize
o atalho F5. Adicione um punhado de frames para nos movermos melhor



Ainda com os quadros selecionados, arraste para onde quiser, eu os coloquei no 15 para dar bastante espaço.



Pronto,
todos os quadros antes do 15 estão em branco para fazermos tudo que
quisermos. Nem precisávamos de tantos quadros, mas é bom ter espaço pra
respirar.

Adicioniei mais Layers e sempre arrastando e
adicionando mais quadros, assim tendo espaço pro Pré Loader e pro Menu.
Você pode inclusive adicionar um Frame Label nsa Properties, que seria
basicamente uma etiqueta



Veja o resultado na Timeline



No
entanto, o que vai acontecer? O Pré Loader vai aparecer de fundo do
Menu. Isso remete às primeiras aulas sobre Keyframes e etc, podemos
resolver de várias maneiras, como apagando os frames que sobram, mas eu
preferi inserir um Blank Key Frame exatamente onde um termina e o outro
começa, que nada mais é do que um Quadro Chave em Branco.



E o resultado será esse. Não esqueça de adicionar também um Blank Key Frame na Timeline do Menu.



Bom,
começando pelo Pré Loader, provavelmente você não vai querer branco
como cor de fundo, então crie um quadrado comum, não precisa ser do
tamanho da tela.



Selecione-o
e veja nas Properties, lá você pode colocar o tamanho do seu quadro
diretamente, 550x400 nesse caso, e até posicioná-lo em 0 e 0, o que
automaticamente o alinhará com o centro. Há outras formas de fazer isso
caso precise alinhar um objeto, no menu Modify -> Align mas é
necessário marcar o To Stage para dizer que é em relação ao seu quadro.




É bom ter propaganda no seu Pré Loader, um bom jogo pode viajar muito e ser um bom veículo de marketing pro seu site.

Você
pode colar o logo do seu site (nunca vindo do Paint, ou sairá
invertido), mas precisa dar uma ajustada, pois o que pode parecer muito
bom na hora de colar pode sair bem feio na versão final. Clique com o
botão direito na imagem, que deve estar no formato Bitmap já que você a
colou, e selecioe Properties



Se
você vai mexer com uma imagem não muito adequada para isso, por
exemplo, aumentar um ícone pequeno, é bom marcar o "Allow smoothing"
que significa "Permitir suavizar", a diferença é gritante. E se você
estiver usando JPG é bom desmarcar o "Use document default quality",
traduzidndo, "Usar qualidade padrão do documento", e colocar a
qualidade no máximo, 100, ou vai ter que encarar aquela poluição em
volta.



Compare os dois resultados



Mas
você pode não querer mantê-lo em Bitmap, então você pode colocá-lo no
estilo gráfico vetorial do Flash. Vá em Modify -> Bitmap -> Trace
Bitmap



Dependendo
dos valores que você colocar nesta janela poderá ter uma imagem mais
precisa, porém maior, o segredo é encontrar o equilíbrio, como no som,
sendo que uma imagem bem convertida pode também ficar menor do que um
Bitmap.



Não
esqueça de transformar o Logo em Symbol para mais tarde. Prosseguindo,
crie um objeto de texto e escreva o endereço do seu site, marque-o como
Static Text



Lá
mesmo já é possível colocar um Link para o seu site. Do lado do Link há
uma lista de opções sobre como a janela será aberta quando o Link for
clicado. Por exemplo, _blank abrirá uma nova janela com o site do Link,
_parent abre na mesma página em que o arquivo está sendo visualizado,
mas caso haja frames no site, abrirá no principal, _self abre
exatamente na mesma janela do navegador e _top abre na janela de maior
nível caso haja frames.

Obviamente _blank é a opção que menos
incomodará os usuários querendo visitar o site sem sair do jogo, mas as
outras podem ser muito úteis na criação de sites em Flash.



E
como de costume já deu pra reparar que tem a forma fácil de fazer e a
forma que eu me divirto obrigando vocês a aprenderem, então digamos que
eu quisesse que ao clicar no Logo ele abrisse uma janela assim como o
texto. Sem dúvida não há um campo de texto aguardando para colocarmos,
então voltemos à programação.

A primeira coisa que temos que
fazer no entanto é brecar a nossa Timeline, pois agora temos uma
Timeline ativa e se deixarmos ela ficará andando do Pré Loader até o
Menu, até o jogo e então recomeçando.



Não
dava pra ser mais simples, não? O próximo comando é bem útil para
gerenciar cliques do Mouse diretamente em um Movie clip, o onPress mas traduzindo, ao Pressionar
dá pra ver que não é bem o que queremos, pois enquanto você mantiver o
botão do Mouse segurado, novas janelas serão abertas, então
utilizaremos um semelhante, mas que só será contado uma vez, o onRelease traduzindo ao Soltar



Apesar do nome getURL não parecer bem o que queremos, já que significa pegar URL
ainda assim ele serve para abrir páginas, seguido das mesmas
características que vimos para o Link do Static Text, então, _blank
continua sendo o ideal. Mas como você se lembra da colisão do tiro com
o inimigo, é uma caixa muito ampla, então dentro do Symbol Logo eu
criei outro Symbol no formato só do círculo e dei a ele o nome de
Clicavel

Bem fácil comparado ao que fazíamos algumas aulas
atrás, não? Vamos relembrar os bons tempos então programando o Pré
Loader propriamente dito. Mas antes, crie uma barra para ser a nossa
barra de progresso. Você pode desenhar com contorno e fundo e depois
converter os dois em símbolos diferentes, usando o fundo para mostrar
quanto já foi carregado e o contorno para mostrar o total.

Um
ponto importante é colocar o Registration na esquerda, para que a barra
avance da esquerda para a direita. Se colocado no meio, a barra se
estenderia do meio para as pontas, não é um efeito ruim, mas é pouco
tradicional. Vale também lembrar que seu primeiro frame não pode ser
muito pesado, pois se demorar demais para carregar o Pré Loader, as
pessoas podem achar que o Link está quebrado.

Vamos abrir um novo this.onEnterFrame aqui. Na verdade criar um Pré Loader é bem fácil tecnicamente graças a dois códigos, o getBytesTotal() do inglês pegar Total de Bytes, que retorna um valor numérico do tamanho do seu arquivo em Bytes e o getBytesLoaded() que significa pegar Bytes Carregados que retorna um valor numérico de quantos Bytes do seu arquivo já foram carregados.

Ou
seja, para obter uma porcentagem basta dividir os carregados pelo total
e multiplicar por 100. Como vamos usar esse valor mais de uma vez,
atribuirei ele a uma variável chamada porcent.



E
agora basta usar a cabeça, se temos uma barra e temos um comando que
pode torcê-la à nossa vontade através de porcentagens, que caso você
não lembre, é o _xscale basta fechar o pacote



Mas
além da barra eu queria também mostrar a porcentagem e não queria que a
passagem de frame fosse automática, queria que o usuário clicasse em
"Começar". Para tanto, eu criei um objeto de texto que fica em cima da
barra, com letras brancas, mas este não era Static Text, mas Dynamic
Text, o que permite que eu dê a ele um nome de instância e altere o que
está escrito nele como altero o valor de uma variável. O chamei de
porcentagem.



O .text
é usado para mudar exatamente as propriedades de texto da variável,
lembrando que porcent é o nome da variável que já mostra a porcentagem
da expressão ( getBytesLoaded() / getBytesTotal()
) * 100 mas esse valor é extremamente quebrado, então teríamos valores
como 1,42308980% que não são vistosos nem necessários, para isso usamos
o Math.round que arredondará para o valor inteiro mais próximo e colocamos, em formato de texto, o sinal de porcentagem.

Sempre
que se coloca um texto no seu jogo é uma boa desmarcar a caixa
Selectable, traduzindo, Selecionável, já que esta permitiria que um
usuário selecionasse o texto clicando e arrastando com o mouse por
cima, dando um efeito bem feito



Aproveitando
este mesmo objeto, eu o tranformei em Symbol, Movie Clip para ser mais
exato, o chamando de comecar para que eu possa detectar cliques nele, e
para alterar a parte de texto, que foi para dentro do Symbol, eu só
preciso chamar comecar.porcentagem.text e com isso fica bem fácil pensar numa forma de mostrar a porcentagem e quando chegar a 100%



E então quando tiver carregado, permitiremos que o jogador clique para ir ao Quadro 10, onde está o Menu. Ao usar o gotoAndStop não precisaremos botar um stop(); no Quadro 10 como precisamos colocar nesse



Ok,
tecnicamente está pronto para testarmos, não fosse um pequeno
problema... o arquivo está em nosso HD, já está carregado! Bom, teste
normalmente pressionando Ctrl + Enter e vamos ver como resolver.

No Player em que nosso jogo abriu clique no menu View e veja a conveniência que temos à nossa disposição.



Clique
em Simulate Download para simular como seria se você estivesse baixando
o jogo. Recomendo botar uma conexão fraca, já que nosso jogo é pequeno
e carregaria a jato em uma DSL.

Sabendo adicionar quadros e usar o gotoAndStop não há segredos restantes no Menu ou no Game Over, basta fazer uma tela ao seu gosto e viajar pela Timeline.

Fica
faltando somente um detalhe, como se comunicar entre todos esses
quadros separados. Os macacos velhos já devem saber do que eu estou
falando, Variáveis Globais.

Por exemplo, se após o Pré Loader e
o Menu eu quisesse inserir uma tela de seleção de dificuldade, eu
precisaria dar um jeito da escolha feita nessa tela chegar ao quadro do
jogo, e se eu simplesmente criasse uma variavel chamada dificuldade,
ela não existirá no quadro do jogo, existirá somente no quadro da
seleção de dificuldade. Eu preciso criar uma variável Global, para todo
o jogo, usando _global.dificuldade e assim poderei chamá-la e alterá-la em qualquer quadro. Você não pode usar o var na frente, ao criar uma variável global.



Mas
eu estava escondendo um segredo até agora. Você pode ter só aprendido
Variáveis Globais agora, mas esta não é o primeiro elemento global que
você aprendeu. O que eu não disse até agora é que functions também são globais. Mas e aí, o que muda?

Se uma function
estiver ligada a um elemento que só existe em um único quadro, como
variável ou movie clip, você não precisa se preocupar, porque ela não
teria a base lógica para ser executada de qualquer jeito. Mas se você
tiver usado um termo mais geral, ou uma variável global, a sua function,
digamos, que você colocou no menu para mostrar um efeito gráfico
bonito, pode aparecer no meio da sua tela de seleção de dificuldade ou
até do jogo propriamente dito.

Caso sua function
esteja funcionando no quadro errado, você pode inserir uma linha de
código que a limite toda a um único quadro. Por exemplo, digamos que
meu menu tenha sido colocado no quadro 10.



O _currentframe,
traduzindo, quadro atual, retorna o valor numérico do quadro onde, no
caso, o nosso "filme" está. Isso pode ser usado para verificar o quadro
em que vários objetos estão, e isso pode ser muito útil, por exemplo,
imagine o Hadouken, que só sai da mão no segundo ou terceiro quadro,
diferent de um tiro, que é disparado de imediato.

Existe um
operador, justamente o contrário do == que é o != ou seja, enquanto ==
significa igualdade, != significa diferença. então você pode tanto
dizer "só aconteça no quadro 10" com == como também limitar "não
aconteça se o quadro for diferente != de 10".

Isto porque functions não serão as únicas coisas transitando indesejadamente pelo seu jogo. Lembra-se quando adicionamos objetos através do attachMovie? e utilizamos o comando _root.getNextHighestDepth()
para determinar sua profundidade? Bom, quando fizemos isso, os tornamos
praticamente globais, e ao viajar pela timeline, eles ficarão colados
na tela onde não devem. Lembre-se de removê-los antes de inserir
códigos que mudarão de quadro, ou eles te perseguirão.

Lembra-se
quando eu falei para deixar alguns objetos fora do seu quadro para o
futuro? Há uma chance que quando seu jogo for espalhado pela internet,
apareça em sites onde o tamanho da tela deles não será o mesmo do seu
jogo, podendo ser maior ou menor. E como evitar que as pessoas vejam as
coisas que você deixou do lado de fora da área de jogo? Para isso
usamos o recurso Mask.




O
Mask, como a tradução do nome diz, é uma máscara, mas pense do lado de
quem a usa. Imagine que você colocasse uma máscara sem um buraco para
os olhos, você não enxergaria nada. O que fazemos então? Recortamos um
buraco para os olhos na nossa máscara.

Crie um retângulo, não
importa o tamanho, nem o traço, só o conteúdo conta para a Mask. Agora
selecione-o e altera o Width (largura) e Height (altura) para serem as
mesmas da janela do seu jogo, e coloque-o em 0 para X e Y.



É
necessário também arrastar todos os layers que você quer que fiquem por
trás dessa Mask para dentro dela. Basta clicar no layer e arrastar até
o layer Mask, você vai saber que deu certo quando eles mudarem de
aparência.



Há
dois detalhes sobre Masks, o primeiro é o mais incômodo, é que objetos
de texto dinâmico, Dynamic Text, ficam por trás dela, algo que pode ser
resolvido transformando-os em Symbols e aplicando algum efeito gráfico,
ou você pode inserir Blank Keyframes, quadros em branco no meio da sua
Mask para que naquela parte, ela não atue.



Outro detalhe, objetos criados com profundidade de _root.getNextHighestDepth() estarão acima da Mask, e portanto não desaparecerão fora da área de jogo.

Agora chegou a grande hora, publicar o arquivo final do seu jogo.

Se
você quiser ajustar as opções de publicação, vá em File > Publish
Settings, ou o atalho Ctrl + Shift + F12, em Type, caso não esteja
marcado, marque Flash (.swf), e se quiser veja as opções que tem para
esse tipo de arquivo na guia Flash que surgirá do lado de Formats.
Quando estiver pronto, vá em File > Publish, ou o atalho Shift +
F12. Seu jogo está agora pronto, em uma versão SWF para ser espalhada
por toda a internet.

Lembre-se que seu jogo tem que ser
interessante, não queira só pegar uma fatia do bolo já existente,
desenvolva idéias originais, incremente o que você já tem para que as
pessoas estejam motivadas para jogá-lo. Tudo que você aprendeu pode ser
usado para melhorar seu jogo. Alguns ifs aqui e ali e você pode criar ótimas variedades na sua jogabilidade.

O
resultado deste tutorial foi o jogo online chamado "Doubutsu" que pode
ser jogado na CasaDosJogos, cujo código fonte em aberto acompanha esta
aula. Tudo que está no código foi ensinado nas aulas, então dê uma
estudada nele. Não se esqueça de mencionar todos que te ajudaram nos
créditos, não tem graça nenhuma ser o único nome lá. Espero que tenham
gostado e até uma próxima vez.




Creditos ao autor: Captain