Aula 01 - Criando um Game de Tiro

INTRODUO

Neste curso bordaremos os conceitos bsicos de download da verso de avaliao gratuita do

Adobe Flash CS3, e as noes bsicas de usar o Flash como uma ferramenta de
desenvolvimento de de jogos.
O objetivo orientar os desenvolvedores de jogos aspirantes, que no tem conhecimento do
Adobe flash e nenhum conhecimento de programao. Vamos construir um simples sidescrolling shooter (jogo de tiro com movimentao vertical. Aqueles que conclurem as aulas
tero as habilidades bsicas necessrias para comear a desenvolver os seus prprios jogos
em
flash
simples.
Usaremos

Adobe

Flash

CS3

ActionScript

2.0

Caso voc no tenha o Adobe Flash precisar baix-lo para isso acesse o link abaixo e baixe a
verso
Trial.
http://www.adobe.com/products/flash.html ser necessrio 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 opes, selecione Arquivo Flash (ActionScript 2.0). Isto ir criar um novo
arquivo Flash. Arquivos Flash tem uma extenso fla. Este o arquivo no qual voc vai
desenhar grficos, criar animaes de linha de tempo, e publicar um jogo no final deste curso.
O arquivo do jogo que voc publica do fla ter uma extenso swf.

Um arquivo fla tem vrios Componentes UI:

Vamos

discutir

cada

componente

em

detalhe.

O palco o principal espao de trabalho do fla. Voc pode importar grficos para o palco,
desenhar grficos 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, ns
teramos 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 no faz nada. Mas com um pouco de arte e um pouco de cdigo, 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 tambm 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 grfico, algo que pode ser manipulado com o clique de
um mouse. A seo 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 ilustrao
abaixo). fla.

Molduras e Quadros-chave
Quadros contem contedo que o pblico vai ver na animao. Cada quadro representa um
momento
de
tempo
em
uma
animao.

Os retngulos da esquerda so exemplo de quadros. Toda quinta moldura aparece cinza,

tornando-os fceis de contar num pice. O quadrado vermelho a sua cabea. Arrastando-o
com o mouse permite que voc "movimente" atravs de seu projeto, visualizando-o como voc
trabalha,
simulando
o
processo
de
animao.
Um quadro-chave representa um ponto na linha do tempo, onde uma mudana ocorre na
animao. (a mudana pode ser adicionar contedo, subtrair contedo, mudana de posio
de
um
objeto,
etc)

Estes so exemplos de quadros-chave.

Os quadros-chave na camada superior so pontos pretos slidos, dizendo que eles contm
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 contedo de um determinado quadro-chave, clique em seu primeiro
quadro (aquele com o ponto preto). Ele agora est selecionado e seu contedo aparecer no
palco.

Para adicionar um quadro-chave em branco:

1.
2.
branco.

Clique em uma seo da linha do tempo.

Pressione F7 ou escolha Inserir> Linha do tempo> Quadro-chave em

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
contedo idntico. 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 cabea de
reproduo. 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 retngulo 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

Smbolos e Instncias
Um smbolo um objeto auto-contido dentro de uma animao em Flash que pode ser usado
vrias vezes. Isto muito til para fazer alteraes em toda a animao. 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 coleo de linhas e preenchimentos. 30 quadros devem ser alterados
individualmente e perfeitamente! Voc pode muito bem desistir e comear de novo, a menos
que seu foguete um smbolo! Atravs da criao de uma imagem como um smbolo, voc cria
uma "cpia master", que fica na biblioteca do seu projeto. Fazer alteraes para o smbolo
mestre afetar todas as suas instncias todo o seu projeto Flash.

Para criar um smbolo a partir de uma imagem que voc j elaborado:

1.
Selecione todos os elementos da imagem que voc deseja fazer parte de
sua instncia. Utilize o letreiro retangular, o lao, ou clique em elementos, mantendo
pressionada a tecla SHIFT.
2.
Escolha Modificar> Converter em smbolo da barra de menu.
3.
D o seu smbolo um nome e selecione seu tipo (smbolos grficos so os
mais bsicos). Para uma descrio dos tipos de smbolos, clique aqui.
4.
O novo smbolo agora deve residir em sua Biblioteca.

Para criar um novo smbolo a partir do zero:

1.
2.

Escolha Inserir> Novo smbolo na barra de menu.

D o seu smbolo um nome e selecione seu tipo.

Tipos Smbolo:
Smbolos

vm

em

trs

variedades:

Clipe
de
filme:
Os clipes de filme so geralmente utilizados por usurios avanados do Flash para criar
animaes que podem iniciar e parar de forma interativa. Um clipe de filme de animao vai

jogar de forma contnua, mesmo se ele colocado em um projeto apenas um quadro de

comprimento.
Grfico:
Este o seu smbolo bsico Flash. Sua animao dependente de cronograma do projeto.
Isto significa que se um smbolo grfico de 35 quadros de comprimento, e colocado em um
projeto apenas 24 quadros por muito tempo, a animao do smbolo ir reiniciar no quadro 24.
Button:
Os botes so usados para fornecer interatividade. Eles so smbolos com quatro quadros,
um para cada estado do boto - Up, Over, Down e Hit que correspondem ao uso do mouse.
Prxima aula falaremos sobre as ferramentas do Adobe Flash, ferramentas estas que nos
auxiliaro no desenvolvimento de nosso game.
At a prxima aula.