sexta-feira, 11 de julho de 2014

Aula 01 - Criando um Game de Tiro

Introdução

 
Neste curso bordaremos os conceitos básicos de download da versão de avaliação gratuita do Adobe Flash CS3, e as noções básicas de usar o Flash como uma ferramenta de desenvolvimento de de jogos.

O objetivo é orientar os desenvolvedores de jogos aspirantes, que não tem conhecimento do Adobe flash e nenhum conhecimento de programação. Vamos construir um simples side-scrolling shooter (jogo de tiro com movimentação vertical. Aqueles que concluírem as aulas terão as habilidades básicas necessárias para começar a desenvolver os seus próprios jogos em flash simples.

Usaremos o Adobe Flash CS3 e ActionScript 2.0
 
Caso você não tenha o Adobe Flash precisará baixá-lo para isso acesse o link abaixo e baixe a versão Trial.
http://www.adobe.com/products/flash.html  será necessário criar uma conta na Adobe, baixar o aplicativo e instalá-lo em sua maquina. Feito isso seguimos.
 
Depois instalado o flash, você verá algo semelhante a isto:

 

A partir das novas opções, selecione Arquivo Flash (ActionScript 2.0). Isto irá criar um novo arquivo Flash. Arquivos Flash tem uma extensão fla. Este é o arquivo no qual você vai desenhar gráficos, criar animações de linha de tempo, e publicar um jogo no final deste curso. O arquivo do jogo que você publica do fla terá uma extensão swf.

Um arquivo fla tem vários Componentes UI:

 

Vamos discutir cada componente em detalhe.

O palco é o principal espaço de trabalho do fla. Você pode importar gráficos para o palco, desenhar gráficos vetoriais no palco usando as ferramentas de desenho e organizar fotos e texto. O tamanho da fase irá determinar o tamanho do SWF que publica. Você pode definir o tamanho do palco no painel de propriedades, logo abaixo do palco.


O tamanho default de novos projetos é 550X400 pixels. Se vier a publicar um swf agora, nós teríamos um swf em branco que é de 550 pixels de largura e 400 pixels de altura. 

Vamos testar o menu do aplicativo acima da linha do tempo, selecione: 

Control> Test Movie (CTRL + ENTER)


Isto irá publicar nosso fla e criar um swf. O swf vai aparecer frente e no centro. É apenas um swf branco que não faz nada. Mas com um pouco de arte e um pouco de código, você pode transformar este swf branco em um jogo Flash. 

Sempre que você quiser ver como ficará o seu projeto do Flash na sua forma final, apenas teste seu filme usando Control> Test Movie. Você também pode escolher a partir do menu Arquivo> Publicar ou File> Publish Preview para criar um swf do seu fla.

A Timeline

O que é realmente surpreendente sobre programas como o Flash é sua capacidade de representar o tempo como um objeto gráfico, algo que pode ser manipulado com o clique de um mouse. A seção de linha de tempo da janela do projeto exibe cada quadro do seu projeto como um quadrado colorido codificado dentro de uma grade numerada. (veja a ilustração abaixo). fla.

  


Molduras e Quadros-chave

Quadros contem conteúdo que o público vai ver na animação. Cada quadro representa um momento de tempo em uma animação.
 
Os retângulos da esquerda são exemplo de quadros. Toda quinta moldura aparece cinza, tornando-os fáceis de contar num ápice. O quadrado vermelho é a sua cabeça. Arrastando-o com o mouse permite que você "movimente" através de seu projeto, visualizando-o como você trabalha, simulando o processo de animação.

Um quadro-chave representa um ponto na linha do tempo, onde uma mudança ocorre na animação. (a mudança pode ser adicionar conteúdo, subtrair conteúdo, mudança de posição de um objeto, etc)
 
Estes são exemplos de quadros-chave.

Os quadros-chave na camada superior são pontos pretos sólidos, dizendo que eles contêm objetos. O quadro-chave na camada inferior é um ponto branco, o que significa que ele está em branco.

O quadro-chave à esquerda na camada superior é um quadro de comprimento, enquanto o da direita na camada superior é de oito quadros de comprimento.

Para trabalhar com o conteúdo de um determinado quadro-chave, clique em seu primeiro quadro (aquele com o ponto preto). Ele agora está selecionado e seu conteúdo aparecerá no palco.

Para adicionar um quadro-chave em branco:


  1.      Clique em uma seção da linha do tempo.
  2.      Pressione F7 ou escolha Inserir> Linha do tempo> Quadro-chave em branco.

Para estender um quadro-chave:


  1.      Selecione um quadro-chave, um ponto preto de um ou um ponto branco um, clicando sobre ela,
  2.      Arraste o mouse esquerda e direita para fazer o quadro-chave mais longo ou mais curto.
  3. Um longo quadro-chave pode ser dividido em keyframes menores com conteúdo idêntico. O corte pode ocorrer em qualquer quadro dentro do quadro-chave.

Para dividir um quadro-chave:


  1.      Decida qual quadro-chave que você deseja dividir.
  2.      Escolha no quadro em que deseja dividir, movendo a cabeça de reprodução. Este será o primeiro quadro do segundo quadro-chave.
  3.      Pressione F6 ou escolha Inserir> Linha do tempo> Quadro-chave

Arrastando e reorganizando keyframes:


  1.      Mova o cursor do mouse sobre um quadro-chave completo; o ponteiro terá um retângulo arrastando-o.
  2.      Clique com o mouse e arraste o quadro para onde você quiser. Ele pode mover para a esquerda e para a direita, e entre as camadas.

O painel Biblioteca


 

Símbolos e Instâncias

Um símbolo é um objeto auto-contido dentro de uma animação em Flash que pode ser usado várias vezes. Isto é muito útil para fazer alterações em toda a animação. Digamos que você está animando a imagem de um foguete, e o mesmo foguete aparece em 30 quadros diferentes. 

Se você decidir mais tarde que o seu foguete precisa ser azul em vez de vermelho, ou que tenham as palavras "Vai Brasil" estampada na lateral, imagine o que você deve fazer se cada foguete é uma coleção de linhas e preenchimentos. 30 quadros devem ser alterados individualmente e perfeitamente! Você pode muito bem desistir e começar de novo, a menos que seu foguete é um símbolo! Através da criação de uma imagem como um símbolo, você cria uma "cópia master", que fica na biblioteca do seu projeto. Fazer alterações para o símbolo mestre afetará todas as suas instâncias todo o seu projeto Flash.

Para criar um símbolo a partir de uma imagem que você já elaborado:


  1.      Selecione todos os elementos da imagem que você deseja fazer parte de sua instância. Utilize o letreiro retangular, o laço, ou clique em elementos, mantendo pressionada a tecla SHIFT.
  2.      Escolha Modificar> Converter em símbolo da barra de menu.
  3.      Dê o seu símbolo um nome e selecione seu tipo (símbolos gráficos são os mais básicos). Para uma descrição dos tipos de símbolos, clique aqui.
  4.      O novo símbolo agora deve residir em sua Biblioteca.

Para criar um novo símbolo a partir do zero:


  1.      Escolha Inserir> Novo símbolo na barra de menu.
  2.      Dê o seu símbolo um nome e selecione seu tipo.

Tipos Símbolo:


Símbolos vêm em três variedades:

Clipe de filme:
     Os clipes de filme são geralmente utilizados por usuários avançados do Flash para criar animações que podem iniciar e parar de forma interativa. Um clipe de filme de animação vai jogar de forma contínua, mesmo se ele é colocado em um projeto apenas um quadro de comprimento.

Gráfico:
     Este é o seu símbolo básico Flash. Sua animação é dependente de cronograma do projeto. Isto significa que se um símbolo gráfico é de 35 quadros de comprimento, e é colocado em um projeto apenas 24 quadros por muito tempo, a animação do símbolo irá reiniciar no quadro 24.

Button:
     Os botões são usados ​​para fornecer interatividade. Eles são símbolos com quatro quadros, um para cada estado do botão - Up, Over, Down e Hit que correspondem ao uso do mouse.

Próxima aula falaremos sobre as ferramentas do Adobe Flash, ferramentas estas que nos auxiliarão no desenvolvimento de nosso game.

Até a próxima aula.

Nenhum comentário: