Battle Maker

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Suporte para criação de Jogos


    Aulas de Flash por: Captain

    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:44 pm

    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 .


    Última edição por jiraya em Qui Mar 24, 2011 6:56 pm, editado 1 vez(es)
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:45 pm

    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.

    Aulas de Flash por: Captain Primeiravista

    À
    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.

    Aulas de Flash por: Captain Fps

    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.

    Aulas de Flash por: Captain Insertnewsymbolmenu

    Aulas de Flash por: Captain Insertnewsymbol

    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.

    Aulas de Flash por: Captain Carro

    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.

    Aulas de Flash por: Captain Library

    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.

    Aulas de Flash por: Captain Timelinequadro1

    Aulas de Flash por: Captain Carroandandoesq

    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.

    Aulas de Flash por: Captain Insertkeyframe

    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.

    Aulas de Flash por: Captain Carroandandodir

    Aulas de Flash por: Captain Timelinekeyframe24

    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

    Aulas de Flash por: Captain Timelinemotiontween1

    Aulas de Flash por: Captain Timelinemotiontween2

    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

    Aulas de Flash por: Captain Carroproperties

    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.

    Aulas de Flash por: Captain Symbolmovieclip

    Note que nossa Timeline mudou novamente, mais precisamente, zerou

    Aulas de Flash por: Captain Timelinedosymbol

    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:

    Aulas de Flash por: Captain Insertkeyframecarro

    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.

    Aulas de Flash por: Captain Animandocarro

    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.

    Aulas de Flash por: Captain Xiaoxiao

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:46 pm

    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...

    Aulas de Flash por: Captain Bonecopalitobranco

    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

    Aulas de Flash por: Captain Timelinesymbols

    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

    Aulas de Flash por: Captain Symbolslibrary

    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"

    Aulas de Flash por: Captain Symbolsobresymbol

    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.

    Aulas de Flash por: Captain Bonecopalitopuro

    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".

    Aulas de Flash por: Captain Bonecopalitocorrendo

    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.

    Aulas de Flash por: Captain Subselectiontool

    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.

    Aulas de Flash por: Captain Onionskin

    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.

    Aulas de Flash por: Captain Copyframes

    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

    Aulas de Flash por: Captain Doisframes

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:46 pm

    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".

    Aulas de Flash por: Captain Insertlayer

    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.

    Aulas de Flash por: Captain Renomearlayer

    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.

    Aulas de Flash por: Captain Actions

    Aulas de Flash por: Captain Actionscript

    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

    Aulas de Flash por: Captain Instancename

    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.

    Aulas de Flash por: Captain Palitildo

    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

    Aulas de Flash por: Captain Posicaoinicial


    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.

    Aulas de Flash por: Captain Preferences

    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.

    Aulas de Flash por: Captain Animacao

    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.

    Aulas de Flash por: Captain Correndosozinho

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:47 pm

    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.

    Aulas de Flash por: Captain Varteclado

    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.

    Aulas de Flash por: Captain Addlistener

    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.

    Aulas de Flash por: Captain onkeydown

    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 .

    Aulas de Flash por: Captain Helpkeygetcode

    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.


    Aulas de Flash por: Captain Iftrace

    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.

    Aulas de Flash por: Captain Traceyay

    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.

    Aulas de Flash por: Captain Movimentoxmais5

    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.

    Aulas de Flash por: Captain Movimentoeanimacao

    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.

    Aulas de Flash por: Captain onkeyup

    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.

    Aulas de Flash por: Captain Movimentoanimacaoescale

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:48 pm

    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.

    Aulas de Flash por: Captain Codigoquesobrou

    Ah, e essas também, vamos precisar delas

    Aulas de Flash por: Captain Essetambem

    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".

    Aulas de Flash por: Captain Chao

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

    Aulas de Flash por: Captain Registration

    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.

    Aulas de Flash por: Captain Variaveisiniciais

    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.

    Aulas de Flash por: Captain Thisonenterframe

    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.

    Aulas de Flash por: Captain Andarpradireita

    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.

    Aulas de Flash por: Captain Andarpraesquerda

    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.

    Aulas de Flash por: Captain Andandoor

    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.

    Aulas de Flash por: Captain 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.

    Aulas de Flash por: Captain Quadro3e4

    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

    Aulas de Flash por: Captain Pulo

    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.

    Aulas de Flash por: Captain Queda

    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.

    Aulas de Flash por: Captain Chaohittest

    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.

    Aulas de Flash por: Captain Registration

    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.

    Aulas de Flash por: Captain Thisonenterframe


    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.

    Aulas de Flash por: Captain Dreamalittle

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:49 pm

    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.

    Aulas de Flash por: Captain Quadro5

    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.

    Aulas de Flash por: Captain Arma

    Aulas de Flash por: Captain Tiros

    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.

    Aulas de Flash por: Captain Variaveisiniciais

    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:

    Aulas de Flash por: Captain Andarpradireita

    Para isso:

    Aulas de Flash por: Captain Mudarandarpradireita

    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.

    Aulas de Flash por: Captain Mudarandarpraesquerda

    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.

    Aulas de Flash por: Captain Mudarparado

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

    Aulas de Flash por: Captain Posicionararma

    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.

    Aulas de Flash por: Captain Tresbracos

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

    Aulas de Flash por: Captain Armavisible

    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.

    Aulas de Flash por: Captain Atirartrue

    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.

    Aulas de Flash por: Captain Atirarfalse

    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

    Aulas de Flash por: Captain 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.

    Aulas de Flash por: Captain Exporttirodir

    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.

    Aulas de Flash por: Captain Keyisdownctrl

    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.

    Aulas de Flash por: Captain Codigodetiroincompleto

    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:

    Aulas de Flash por: Captain Codigodetirofinal

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

    Aulas de Flash por: Captain Codigodetirocompleto

    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.


    Aulas de Flash por: Captain Tiroonenterframe

    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.

    Aulas de Flash por: Captain Removeclip

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:50 pm

    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.

    Aulas de Flash por: Captain Posicaoinicial

    Saudades de quando escrevemos isso?

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

    Aulas de Flash por: Captain Bobagemanimacao

    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.

    Aulas de Flash por: Captain Variaveisinimigo

    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...

    Aulas de Flash por: Captain Bonecopalitonegro

    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...

    Aulas de Flash por: Captain Attachmovie

    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.

    Aulas de Flash por: Captain Inimigopersegue

    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.

    Aulas de Flash por: Captain Mortoealpha

    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.

    Aulas de Flash por: Captain Variaveisdeai

    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.

    Aulas de Flash por: Captain Propertiesalpha

    Aulas de Flash por: Captain Porcentagemalpha

    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.

    Aulas de Flash por: Captain Areadetiroxey

    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.

    Aulas de Flash por: Captain Inimigoatiratrue

    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.

    Aulas de Flash por: Captain Inimigoatiradir

    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.

    Aulas de Flash por: Captain Inimigoatiraesq

    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.

    Aulas de Flash por: Captain Tirosdireesq

    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.

    Aulas de Flash por: Captain Inimigoperseguindo

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

    Aulas de Flash por: Captain Inimigofugindo

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:51 pm

    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.


    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.

    Aulas de Flash por: Captain Vartiropreciso

    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.

    Aulas de Flash por: Captain Mira

    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.

    Aulas de Flash por: Captain Centrodamira

    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.

    Aulas de Flash por: Captain Tirocommouse

    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

    Aulas de Flash por: Captain onmousemove

    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

    Aulas de Flash por: Captain Hideshow

    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...

    Aulas de Flash por: Captain Nossopow

    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.

    Aulas de Flash por: Captain Paliticidio

    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

    Aulas de Flash por: Captain Atan2

    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.

    Aulas de Flash por: Captain Rotacaoemradianos

    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

    Aulas de Flash por: Captain Rotacaoemgraus

    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.

    Aulas de Flash por: Captain Rotacaodobraco

    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

    Aulas de Flash por: Captain Disparocommousecosesin

    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

    Aulas de Flash por: Captain Progressaoxey

    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

    Aulas de Flash por: Captain Aplicandoprogressao

    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.

    Aulas de Flash por: Captain Removeaosairdatela

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

    Aulas de Flash por: Captain Removeerrado

    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.
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:52 pm

    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

    Aulas de Flash por: Captain Importtolibrary

    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.

    Aulas de Flash por: Captain Quadromusica

    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

    Aulas de Flash por: Captain Properties

    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.

    Aulas de Flash por: Captain Effects

    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

    Aulas de Flash por: Captain Newsound

    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");

    Aulas de Flash por: Captain Attachsoundestart

    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.

    Aulas de Flash por: Captain Detalhes

    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

    Aulas de Flash por: Captain Soundproperties

    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.

    Aulas de Flash por: Captain Soundproperties2

    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.

    Aulas de Flash por: Captain Efeitossonoros

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

    Aulas de Flash por: Captain Pistolastart

    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.

    Aulas de Flash por: Captain Efeitoemmp3

    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.

    Aulas de Flash por: Captain Positionduration

    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

    Aulas de Flash por: Captain Volumeepan

    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!
    jiraya
    jiraya
    Administrador
    Administrador


    Mensagens : 1299
    Credibilidade : 54

    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por jiraya Qui Mar 24, 2011 6:54 pm

    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.

    Aulas de Flash por: Captain Selecionarquadros

    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

    Aulas de Flash por: Captain Insertframe

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

    Aulas de Flash por: Captain Arrastarquadros

    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

    Aulas de Flash por: Captain Framelabel

    Veja o resultado na Timeline

    Aulas de Flash por: Captain Framelabelsnatimeline

    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.

    Aulas de Flash por: Captain Insertblankkeyframe

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

    Aulas de Flash por: Captain Layersnatimeline

    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.

    Aulas de Flash por: Captain Propertiesshape

    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.


    Aulas de Flash por: Captain Modifyalign

    É 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

    Aulas de Flash por: Captain Bitmapproperties

    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.

    Aulas de Flash por: Captain Bitmapproperties2

    Compare os dois resultados

    Aulas de Flash por: Captain Smoothingequality

    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

    Aulas de Flash por: Captain Tracebitmap

    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.

    Aulas de Flash por: Captain Logos

    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

    Aulas de Flash por: Captain Statictext


    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.

    Aulas de Flash por: Captain Link

    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.

    Aulas de Flash por: Captain Stop

    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

    Aulas de Flash por: Captain Logoonrelease

    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.

    Aulas de Flash por: Captain 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

    Aulas de Flash por: Captain Barradeprogresso

    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.

    Aulas de Flash por: Captain 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

    Aulas de Flash por: Captain Selectable

    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%

    Aulas de Flash por: Captain Ifporcent100

    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

    Aulas de Flash por: Captain Gotoandstop10

    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.

    Aulas de Flash por: Captain Simulatedownload

    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.

    Aulas de Flash por: Captain Globaldificuldade

    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.

    Aulas de Flash por: Captain Currentframe

    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.

    Aulas de Flash por: Captain 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.

    Aulas de Flash por: Captain Shape

    É
    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.

    Aulas de Flash por: Captain Arrastarpramask


    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.

    Aulas de Flash por: Captain Keyframesemmask

    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.

    Aulas de Flash por: Captain Doubutsu


    Creditos ao autor: Captain

    Conteúdo patrocinado


    Aulas de Flash por: Captain Empty Re: Aulas de Flash por: Captain

    Mensagem por Conteúdo patrocinado


      Data/hora atual: Dom Fev 05, 2023 6:55 pm