Você está na página 1de 95

W e b

G a m e

N D I C E

Aula 00 - ndice.indd 1

INTRODUO AO FLASH CS5 ............................................... 3

CONCEITO DE ANIMAO .................................................... 23

INTRODUO AO ACTIONSCRIPT 3.0 .................................... 31

ESTRUTURA CONDICIONAIS ................................................. 43

ESTRUTURA DE REPETIO ................................................. 47

FUNES ........................................................................... 51

EVENTOS ........................................................................... 55

CAPTURANDO EVENTOS DE INPUTS DO USURIO ................. 59

MATRIZES .......................................................................... 63

10

TRABALHANDO COM OBJETOS E EXIBIO .......................... 67

11

TRABALHANDO COM CLASSES E PACOTES .......................... 71

12

ACTIONSCRIPT 3.0 - ORIENTADO A OBJETO ......................... 77

13

FSICA DO JOGO ................................................................. 85

02/12/2010 12:55:17

Aula 00 - ndice.indd 2

02/12/2010 12:55:17

W e b

G a m e

C a p t u l o
F u n d a m e n t o s

Aula 01 - Introduo ao Flash CS5.indd 3

d o

0 1
F l a s h

02/12/2010 12:56:13

W e b

G a m e

Introduo ao Adobe Flash CS5


Pelo modo consistente de apresentao e compatibilidade entre computadores pessoais, dispositivos mveis e telas de praticamente qualquer tamanho
e resoluo, o Adobe Flash CS5 tornou-se a ferramenta mais podera no
ramo de entretenimento de jogos eletrnicos para web.
Sua compatiblidade com arquivos .sfw - extenso original do Adobe Flash na internet torna muito fcil o seu desenvolvimento e seu favoritismo.
Agora com seu lanamento do Actionscript 3.0, abriu caminhos mais slidos para programadores desenvolverem jogos interativos e aplicativos mais
complexos para internet.

Iniciando o Programa
Para iniciar o Adobe Flash CS5, v ao Menu Iniciar > Programas (Todos os
Programas) > Adobe Master Collection CS5 > Adobe Flash CS5 ou Menu
Iniciar > Exercutar e digite flash

Aula 01 - Introduo ao Flash CS5.indd 4

02/12/2010 12:56:13

W e b

G a m e

Viso geral de tela Bem-vindo


Quando o Flash est em execuo sem documentos abertos, a tela Bemvindo exibida. A tela Bem-vindo contm estas trs reas:

Para ocultar a tela Bem-vindo,


selecione No mostrar novamente. Caso
queira apresentar novamente a tela
Bem-vindo, selecione Edit > Preference
(Windows) ou selecione Flash Preference
(Macintosh) e selecione Tela de boas
vindas no menu Ao Iniciar, na categoria
Geral.

A. Criar a partir do modelo Lista os modelos usados mais frequentimente para criar documentos Flash.
B. Abrir um item recente Permite abrir os documentos mais recentes
(clique no cone Abrir).
C. Criar novo Lista tipos de arquivos Flash, como documentos Flash e
arquivos ActionScript.
D. Estender Estabelecer um link para o site do Flash na Web, no qual
possvel baixar aplicativos auxiliares, extenses e informaes relacionadas.

A tela Bem-vindo tambm oferece acesso rpido aos recursos da Ajuda.


possvel fazer uma excurso sobre o Flash, aprender sobre recursos
de documentao e localizar instalaes do Treinamento autorizado da
Adobe.

Aula 01 - Introduo ao Flash CS5.indd 5

02/12/2010 12:56:13

W e b

G a m e

Viso geral da rea de trabalho


No decorrer do fluxo de trabalho ser comum o conhecimento de
solues para necessidades bsicas como manipular vrios documentos,
arquivos usando vrios elementos, como painis, barras e janelas. Para
adaptar cada aplicativo ao seu modo de trabalho, selecione uma das
vrios espaos de trabalho predefinidos ou crie o seu prprio.

Vejamos os elementos que o Adobe Flash CS5 disponibiliza em sua rea


de trabalho.
A. Painel Ferramentas
B. Barra de aplicativos
C. Janela de Documento tabuladas
D.Alternador de rea de trabalho
E. Barra de ttulo do Painel
F. Boto Reconher em cones
G. Quatro grupos de painel no encaixe vertical
H. Painel de controle
I. Palco (Stage)
A Janela Documentos exibe o arquivo em que voc esta trabalhando.
Janelas de documento podem ser tabuladas e, em certos casos, agrupupadas e encaixadas.
A Barra de aplicativos na parte superior contm um alternador de
espao de trabalho, menus (somente Windows) e outros controles de
6

Aula 01 - Introduo ao Flash CS5.indd 6

02/12/2010 12:56:14

W e b

G a m e

aplicativo. Em alguns produtos que usam o Mac, possvel usar o


menu Janela para exibir ou ocultar a barra de aplicativos.
O Painel Ferramentas contm ferramentas para criao e a edio de
imagens, arte-final, elementos de pgina e assim por diante. As ferramentas relacionadas so agrupadas.
A Painel de controle exibe as opes para a ferramenta atualmente
selecionada.
Os Painis ajudam a monitorar e modificar seu trabalho. Os exemplos incluem a Linha do Tempo do Flash, Barra de Propriedades, etc.
O Palco representa o espao retangular no Flash Player ou em uma
janela no Navegador da Web.

Uso do palco
O palco a rea retangular na qual o contedo grfico colocado,
durante a criao de documentos Flash. O Palco no ambiente de criao representa o espao retangular no Flash Player ou em uma janela
no Navegador da Web, na qual o documento exibido durante a reproduo. Para alterar a exibio durante o trabalho, aplique mais zoom
ou menos zoom.
Aplicar zoom no palco

Para exibir todo o Palco na tela, ou para exibir uma rea particular do
desenho com alta ampliao, altere o nvel de ampliao.
Nota: A ampliao mxima depende da resoluo do monitor e do
tamanho do documento. O valor mnimo para aplicao de menos zoom
no Palco 8%. O valor mximo para aplicao de mais zoom no Palco
2.000%.

Para aplicar mais zoom em um elementos, selecione a ferramenta Zoom


no painel Ferramentas, e clique no elemento. Para alternar a ferramenta
Zoom entre a aplicao de mais zoom ou menos zoom, use os modificadores Ampliar
ou Reduzir
(na rea de opes do painel Ferramentas, quando a ferramenta Zoom estiver selecionada), ou clique com a tecla
Alt pressionada (Windows) ou com a tecla Option pressionada (Macintosh).

Para aplicar mais zoom para que uma rea especfica do desenho
preencha a janela, arraste uma seleo retangular no Palco com a ferramenta Zoom.
7

Aula 01 - Introduo ao Flash CS5.indd 7

02/12/2010 12:56:14

W e b

G a m e

Para aplicar mais zoom ou menos zoom em todo o Palco, selecione


View > Mais zoom ou View > Menos zoom.
Para aplicar mais zoom ou menos zoom a um percentual especificado, selecione View > Ampliao e selecione um percentual no
submenu, ou selecione um percentual no controle Zoom, no canto
superior direito da janela do documento.
Para dimensionar o Palco para que ele se ajuste completamente
janela do aplicativo, selecione View > Ampliao > Ajustar janela.
Para mostrar o contedo do quadro atual, selecione View > Ampliao > Mostrar tudo, ou selecione Mostrar tudo no controle Zoom,
no lado superior direito da janela do aplicativo. Se a cena estiver
vazia, todo o Palco exibido.
Para mostrar todo o Palco, selecione View > Ampliao > Mostrar
quadro, ou selecione Mostrar quadro, no controle Zoom, no canto
superior direito da janela do documento.
Para mostrar o espao de trabalho ao redor do Palco, ou para exibir elementos em uma cena que estejam parcialmente ou completamente fora
da rea do Palco, selecione View > rea de trabalho. A rea de trabalho
exibida em cinza claro. Por exemplo, para colocar um pssaro voando
em um quadro, posicione inicialmente o pssaro fora do Palco na rea de
trabalho, e anime-o na rea do Palco.
Quando o Palco ampliado, talvez no seja possvel visualiz-lo completamente. Para alterar a exibio sem alterar a ampliao, use a ferramenta Mo para mover o Palco.

Desenho
As ferramentas de desenho no Adobe Flash CS5 Professional permitem
criar e modificar formas para a arte em seus documentos.
Antes de desenhar e pintar no Flash, importante entender como o
Flash cria arte e como desenhar, pintar e modificar formas podem afetar
outras formas da mesma camada.
Grficos vetoriais e de bitmap

Os computadores exibem grficos nos formados vetoriais ou de bitmaps.


A compreeso da diferena entre dois formatos ajuda voc trabalhar com
mais eficincia.
Grficos vetoriais

Aula 01 - Introduo ao Flash CS5.indd 8

02/12/2010 12:56:14

W e b

G a m e

Os grficos vetoriais descrevem imagens usando linhas e curvas, denomidas vetores, que incluem tambm propriedades de cores e de posio.
Nota: A imagem ao lado pode ser ampliada o quanto quiser pois suas dimenses so
recalculadas sem perda de qualidade da imagem.

Grficos de bitmap

Os grficos de bitmap descrevem imagens usando pontos coloridos,


chamados pixels, organizados numa grade.
Nota: No exemplo a cima os valores de dimenso so dinamicos, portanto quanto
maior a ampliao maior ser a perda de qualidade da imagem, outros fatores como
extenso influenciam na qualidade da imagem.

Desenhar linhas e formas simples

Desenhar linhas retas com a ferramenta Segmento de linha

Para desenhar um seguimento de linha reta uma vez, use a ferramenta Linha.
1. Selecione a ferramenta Linha .
2. Selecione Janela > Propriedades e selecione os atributos
de traado.
Nota: No possvel definir atributos de preenchimento
para ferramenta Linha.
3. Clique no boto Desenho de objeto

na seo Opes
do painel Ferramentas, para selecionar o modo Desenho
do objeto ou Mesclar desenho.
4. Posicione o ponteiro onde a linha deve comear e arraste
at onde a linha deve terminar.
Para restingir o ngulo da linha em mltiplos de 45 graus, arraste com
a tecla Shift pressionada.
Desenhar primitiva de retngulos
1. Para selecionar a ferramenta Primitiva de retngulo,

clique e mantenha pressionado o boto do mouse na ferramenta Retngulo e selecione a ferramenta Primitiva
de retngulo no menu pop-up.

2. Para criar uma primitiva de retngulo, arraste a ferramen-

ta Primitiva de retngulo no Palco.


Pra mudar o raio do canto enquanto arrasta com a
ferramenta Primitiva de retngulo, pressione a tecla Seta
para cima ou Seta para baixo. Quando os cantos chegam
aos arredondamento desejado, solte a tecla.

3. Com a primitiva de retngulo selecionada, voc pode usar

os controles de Inspetor de propriedades para fazer mais


modificaes da forma ou para especificar as cores de

Aula 01 - Introduo ao Flash CS5.indd 9

02/12/2010 12:56:14

W e b

G a m e

traado e de preenchimento.
Estes controles do Inspetor de propriedades so especficos da ferramenta Primitiva de retngulo:
Controle de raio do contorno do retngulo Permitem
voc especificar os raios do canto do retngulo.
Redefinir Redefine todos os controles da ferramenta
Primitiva de retngulo e restaura a forma de primitiva de
retngulo desenhada no Palco ao respectivo tamanho e
forma inicias.
4. Para especificar um raio de canto diferente para cada

canto, desmarque a seleo de cone Bloqueio.


Nota: Quando bloqueados, os controles de raio ficam
restringidos, de movo que todos os cantos usam o mesmo
raio.

5. Para redefinir o raio dos cantos, clique no boto Re-

definir, no Inspetor de propriedades.

Desenhar primitivas de oval


1. Clique e mantenha pressionado o boto do mouse na fer-

ramenta Retngulo e selecione a ferramenta Primitiva


de oval .
2. Para criar uma primitiva de oval, arraste a ferramenta
Primitiva de oval no Palco. Para restingir a forma em
um crculo, arraste e mantenha o Shift pressionado.

3. Com a primitiva de oval selecionada no Palco, voc pode

usar os controles encontrados no Inspetor de propriedades para modificar mais a forma ou para especificar as
cores de traado e de preenchimento.

Este controle de Inspetor de propriedades so especificados na ferramenta Primitiva de oval:


ngulo inicial / ngulo final O ngulo do ponto inicial e
do ponto final do oval.
Raio interno Um raio interno (ou oval) dentro do oval.
Nota: Voc pode inserir valores de 0 a 99 representando o
percentual de preenchimento que removido.
Fechar caminho Determinar se o caminho (ou caminhos,
se voc estiver especificando um raio interno) do oval esta
fechado.
Nota: Se voc especificar um caminho aberto, nenhum
preenchimento aplicado forma resultante; apenas o
traado desenhado. O Caminho fechado esta selecionado por padro.

10

Aula 01 - Introduo ao Flash CS5.indd 10

02/12/2010 12:56:14

W e b

G a m e

Desenhando ovais e retngulos

As ferramentas Oval e Retngulo criam essas formas geomtricas


bsicas.
1. Para selecionar a ferramenta Retngulo ou a ferramenta Oval , clique no boto do mouse e mantenha-o na
ferramenta Retngulo e arraste.
2. Para criar um retngulo ou um oval, arraste a ferramenta
Retngulo ou Oval no Palco.
Se estiver usando a ferramenta Retngulo, pressione as
teclas Seta para cima e Seta para baixo enquanto arrasta
para ajustar o raio de cantos arredondados.
Para as ferramentas Oval e Retngulo, arraste e mantenha a tecla Shift pressionada para restringir as formas
em crculos e quadrados.
3. Para determinar um tamanho especfico de oval ou
retngulo, selecione a ferramenta Oval ou Retngulo e
pressione a tecla Alt ou a tecla Option (Macintosh). Em
seguinda, clique no Palco para exibir a caixa de dilogo
Configuraes de oval e de retngulo.
Para ovais, especifique a largura e a altura em pixels e o oval ser desenhado a parti do centro.
Para retngulos, especifique a largura e a altura
em pixels, o raio dos cantos arrendondados e o
retngulo ser desenhado a parti do centro.

Desenhando um polgono e estrelas


1. Selecione a ferramenta PolyStar
2.
3.

4.
5.

clicando e segurando
o boto do mouse na ferramenta Retngulo e selecionando o menu pop-up que aparece.
Na paleta Propriedades e selecione os atributos de traado
e de preenchimento.
Clique em Opes e siga estes procedimentos:
Para Estilo, selecione Polgono ou Estrela
Em Nmero de lados, digite um nmero de 3 a 32.
Em Tamanho do ponto de estrela. Digite um
nmero de 0 a 1 para especificar a profundidade
dos pontos da estrela.
Nota: Um nmero mais prximo de 0 cria pontos
mais profundos (agulhas). Se estiver desenhando
um polgono, no mude esta configurao, pois
ele no afeta a forma de polgono).
Clique em OK.
Arraste no Palco.

11

Aula 01 - Introduo ao Flash CS5.indd 11

02/12/2010 12:56:14

W e b

G a m e

Modos de desenho e objetos grficos


No Flash, voc pode criar vrios tipos de objetos grficos com diferentes
modos de desenho e ferramentas de desenho. Cada tipo tem sua prpria
vantagens e desvantagens. Entendendo os recursos dos diferentes tipos
de objeto grfico, voc pode tornar boas
decises sobre quais tipos de objetos usar
em seu trabalho.
Modo Mesclar desenho

O modo de desenho padro automaticamente mescla as formas desenhadas quanto


voc as sobrepem. Quando voc desenha
formas que se sobrepem uma s outras na
mesma camada, a forma que estiver mais
acima recorta a parte da forma abaixo. Dessa maneira, desenhar formas um modo de
desenho destrutivo.
Nota: Quando uma forma tem um traado
e um preenchimento, este so considerados
elementos grficos separados, que podem ser selecionados e movidos de
forma independente.

Entrar no modo Mesclar desenho


1. Selecione a opo Mesclar desenho, no painel Ferramentas.
2. Selecione um ferramenta de desenho no painel Ferramentas e desenhe no Palco.

Nota: Por padro, o Flash usa o modo Mesclar


desenho.
Modo Desenho de objeto

Objetos de desenho so objetos grficos


separados que no se mesclam automaticamente quando sobrepostos. Isso permite
que voc faa a sobreposio das formas
sem alterar sua aparncia quando voc as
separa ou reordena sua aparncia.
Quando uma ferramenta de desenho est
no modo Desenho de objeto, as formas que
voc cria com ela so independentes. O
traado e o preenchimento de uma forma
12

Aula 01 - Introduo ao Flash CS5.indd 12

02/12/2010 12:56:14

W e b

G a m e

no so elementos separados e as formas que se sobrepem no alteram


umas s outras.
Entrar no modo Desenho de objeto

Para desenhar formas usando o modo Desenho do objeto,


necessrio ativ-lo.
1. Selecione a ferramenta de desenho que suporte o modo
Desenho de objeto.
Nota: As ferramentas Lpis, Linha, Caneta, Pincel, Oval,
Retngulo e Polgono).
2. Selecione o boto Desenho do objeto do

da categoria

Opes do Painel Ferramentas


Pressione J para alterar entre os modos Desenho e
Mesclar desenho. possvel definir as preferncias para
sensibilidade de contato quanto voc selecionar as formas
criadas usandos o modo Desenho de objeto.

3. Desenhe no Palco.

Nota: Formas primitivas como Primitiva Retngular ou Primitiva


Oval , so por padro criadas a parti do modo Desenho, no podendo
ser criadas no modo Mesclar objeto.
Sobreposio de formas

Quando voc desenha uma linha em outra linha ou forma pintada no


modo Mesclar desenho, as linhas sobrepostas ficam divididas em segmentos nos pontos de interseo. Para selecionar, mover e remodelar
cada segmento individualmente, use a ferramenta Seleo.
Nota: Quando voc pinta sobre formas e linhas, a poro debaixo substituda por aquilo que estiver por cima. As pinturas
da mesma cor se mesclam. As pinturas de cores diferentes permanecem distintas.
Para evitar alterar inadvertidamente as formas, superpondo as
linhas, agrupe as formas ou use camadas para separ-las.

Remodelar linhas e
formas
Exibir e ajustar pontos com a
ferramenta subseleo
1. Selecione a ferramenta Subse-

leo .

13

Aula 01 - Introduo ao Flash CS5.indd 13

02/12/2010 12:56:14

W e b

G a m e

2. Clique na linha ou no contorno da forma.


Remodelar uma linha ou forma

Para remodelar uma linha ou contorno da forma, arraste


qualquer ponto da linha usando a ferramenta Seleo . O ponteiro muda para indicar o tipo de remodelagem que pode executar na linha ou no preenchimento.
Nota: Algumas reas de traado com pincel so mais fceis de
remodelar se forem vistas como contornos.
Se tiver problema para remodelar uma linha complexa, suavize-a para
remover alguns de seus detalhes, o que facilita a remodelao. O aumento da
ampliao pode tornar a remodelagem mais fcil e mais precisa.
1.
2.

Selecione a ferramenta Seleo .


Siga um destes procedimentos:
Para remodelar um segmento, arraste de qualquer
ponto.

Para arrastar uma linha para criar um novo
ponto de canto, clique mantendo pressionada a
tecla Control (Windows) ou Option (Macintosh).

Apague arrastando

Selecione a ferramenta Borracha .


Clique no modificador Modo Borracha e selecione o
modo de apagar:
Apagar normal Apagar traados e preenchimentos na mesma camada.
Apagar preenchimentos Apaga apenas os
preenchimentos; os traados no mudam.
Apagar linhas Apaga apenas os traados; os
preenchimentos no mudam.
Apagar preenchimentos selecionados Apaga apenas os preenchimentos selecionados atualmente e
no muda os traados, selecionados ou no.
Selecione os preenchimentos para apagar antes
de usar a ferramenta Borracha nesse modo.
Apagar dentro Apaga apenas o preenchimento
onde foi iniciado o Traado da borracha.
Nota: Se voc comear a apagar de um ponto
vazio, nada apagado. Os traados no so mudados pela borracha nesse modo.
3. Clique no modificador Forma da borracha e selecione
uma forma e um tamanho da borracha.
4. Arraste no Palco.
1.
2.

Para apagar todo contedo que esta no Palco na rea de trabalho, clique duas vezes
na ferramenta Borracha
na barra de ferramentas.

14

Aula 01 - Introduo ao Flash CS5.indd 14

02/12/2010 12:56:15

W e b

G a m e

Transformao de objetos
Voc pode transformar objetos grficos, assim como grupos, blocos de
texto e ocorrncias usando a ferramenta Transformao Livre ou as opes no menu Modificar > Transformar.
Dependendo do tipo de elemento que voc selecionar, voc pode transformar girar, inclinar, dimensionar ou distorcer o elemento. Voc pode
alterar adicionar a uma seleo durante uma operao de transformao.
Nota: Quando voc transformar um objeto, grupo, caixa de texto ou
ocorrncia, o Inspetor de propriedades desse item exibe todas as alteraes feitas s dimenses ou posio do item.
Mova, realinhe, altere e trace o ponto de transformao

Durante uma transformao, o ponto de transformao aparece no


centro de um elemento selecionado. Voc pode mover o ponto de transformao, retorn-lo a sua posio padro e mover o ponto de origem
padro.
Nota: O ponto de transformao inicialmente
alinhado com o ponto central do objeto.
1. Selecione a ferramenta Transformao

livre
ou um dos comandos em Modificar > Transformar.
Uma vez que voc tiver iniciado uma
transformao, voc pode controlar o
local do ponto de transformao no painel Informaes e no
Inspetor de propriedades.

2. Siga um destes procedimentos:


Para mover o ponto de transformao, arraste-o para

dentro do objeto selecionado.


Para realinhar o ponto de transformao com o centro do elemento clique duas vezes no ponto de transformao.
Para mudar o ponto de origem de uma transformao
de dimenso ou inclinao, mantenha pressionada a tecla
Alt (Windows) ou a tecla Option (Macintosh) enquanto
arrasta o ponto de controle do objeto escolhido durante a
transformao.

Para exibir as coordenadas do ponto de transformao no


painel Informaes, clique no boto Registro/Ponto de Transformao no painel Informaes. O quadrado direito inferior
15

Aula 01 - Introduo ao Flash CS5.indd 15

02/12/2010 12:56:15

W e b

G a m e

no boto se torna um crculo para indicar que as coordenadas do ponto de registro esto sendo exibidas.
Nota: Para ocorrncias de smbolo, os valores X e Y so exibidos no
local do ponto de registro do smbolo ou no local do canto superior
esquerdo da ocorrncia do smbolo.

Use a ferramenta Transformao livre


Voc pode realizar transformaes individuais ou combinar vrias
transformaes, tais como mover, girar, dimensionar, inclinar e distorcer.
Nota: A ferramenta Transformao livre no pode transformar smbolos, bitmaps, objetos de vdeo, sons, gradientes ou texto. Se uma
seleo mltipla contiver qualquer um desses itens, somente os objetos de forma sero distorcidos. Para transformar um bloco de texto,
primeiro converta os caracteres em objetos de forma.
1. Selecione um objeto grfico, grupo, ocorrncia ou bloco de

texto no Palco.

2. Clique na ferramenta Transformao livre

.
Mover o ponteiro sobre e ao redor da seleo faz com que o
ponteiro mude para indicar qual funo de transformao esta
disponvel.

3. Para transformar a seleo, arraste as alas:


Para mover a seleo, posicione o ponteiro sobre o ob

jeto na caixa delimitadora e arraste o objeto para uma


nova posio. No arraste o ponto de transformao.
Para definir o centro de rotao ou dimensionamento,
arraste o ponto de transformao para um novo local.
Para girar a seleo, posicione o ponteiro perto da
parte de fora da ala do canto e arraste. A seleo gira
em torno do ponto de transformao. Arraste com a
tecla Shift pressionada para girar em incrementos de
45.
Para girar ao redor do canto oposto, arraste com a
tecla Alt pressionada (Windows) ou arraste com a tecla
Option pressionada (Macintosh).
Para dimensionar a seleo, arraste uma ala do canto
diagonalmente para dimension-la em duas dimenses.
Arraste com a tecla Shift pressionada para redimensionar proporcionalmente.
Para dimensionar somente na respectiva direo, arraste uma ala do canto ou uma ala lateral horizontal
ou verticalmente.
Para inclinar a seleo, posicione o ponteiro no contorno entre as alas de transformao e arraste.

16

Aula 01 - Introduo ao Flash CS5.indd 16

02/12/2010 12:56:15

W e b

G a m e

Para distorcer as formas, pressione Control (Windows)

ou Command (Macintosh) e arraste uma ala do canto ou


uma ala lateral.
Para estreitar o objeto - mover o canto selecionado
e o canto adjacente em distncias iguais de suas origens, clique com as teclas Shift+Control pressionadas para arrastar (Windows) ou clique com as teclas
Shift+Command pressionadas para arrastar (Macintosh)
uma ala do canto.

4. Para finalizar a transformao, clique fora do item selecionado.

Dimensionar objetos
Dimensionar um objeto amplia ou reduz o objeto horizontalmente, verticalmente ou ambos.
1. Selecione o(s) objeto(s) grfico(s) no Palco.
2. Selecione Modificar > Transformar > Dimensionar.
3. Siga um destes procedimentos:
Para dimensionar o objeto horizontal e verticalmente, arraste uma das alas do canto.
As propores so mantidas conforme voc dimensiona. Arraste com a tecla Shift pressionada para dimensionar desproporcionalmente.
Para dimensionar o objeto horizontal ou verticalmente,
arraste uma ala do centro
4. Para finalizar a transformao, clique fora do(s) objeto(s)

selecionado(s).
Nota: Ao aumentar o tamanho de um nmero de itens, os itens
perto das bordas da caixa delimitadora devem ser movidos para
fora do Palco. Se isso ocorrer, selecione Exibir > rea de trabalho
para ver os elementos que esto alm das bordas do Palco.

Girar e inclinar objetos


possvel girar um objeto atravs de um dos seguintes mtodos:
Arrastando com a ferramenta Transformao livre
(voc
pode inclinar e dimensionar o objeto na mesma operao).
Especificando um ngulo no painel Transformar (voc pode
dimensionar o objeto na mesma operao).
Nota: O ponto de transformao alinhado com o ponto de registro, que predefinido para o centro do objeto, mas voc pode
mover o ponto arrastando-o.

17

Aula 01 - Introduo ao Flash CS5.indd 17

02/12/2010 12:56:15

W e b

G a m e

Girar e inclinar objetos arrastando-os


1. Selecione o(s) objeto(s) no Palco.
2. Selecione Modificar > Transformar > Girar e Inclinar.
3. Siga um destes procedimentos:
Arraste uma ala de canto para girar o objeto.
Arraste uma ala central para inclinar o objeto.
4. Para finalizar a transformao, clique fora do(s) objeto(s)

selecionado(s).

Girar objetos em 90
1. Selecione o(s) objeto(s).
2. Selecione Modificar > Transformar > Girar 90 CW para girar no

sentido horrio ou Girar 90 CCW para girar no sentido antihorrio.

Inclinar objetos

Inclinar um objeto transforma-o obliquamente ao longo de um ou ambos os eixos. Voc pode inclinar um objeto arrastando-o ou digitando
um valor no painel Transformar.
1. Selecione o(s) objeto(s).
2. Selecione Janela > Transformar.
3. Clique em Inclinar.
4. Digite os ngulos dos valores horizontal e vertical.

Virar objetos
Voc pode virar objetos em seu eixo vertical ou horizontal sem mover
sua posio relativa no Palco.
1. Selecione o objeto.
2. Selecione Modificar > Transformar > Virar Vertical ou Virar
Horizontal.

Restaurar objetos transformados


Quando voc usa a ferramenta Transformao livre ou o painel Transformar para dimensionar, girar e inclinar ocorrncias e grupos, o Flash
salva o tamanho original e os valores de rotao com o objeto. Isso permite que voc remova as transformaes aplicadas e restaure os valores
originais.
Voc pode desfazer apenas a transformao mais recente ao selecionar
18

Aula 01 - Introduo ao Flash CS5.indd 18

02/12/2010 12:56:15

W e b

G a m e

Editar > Desfazer. Voc pode remover todas as transformaes clicando


no boto Remover transformao do painel, antes de cancelar a seleo
do objeto. Aps desfazer a seleo do objeto, os valores originais se perdero e a transformao no poder ser removida.
Restaurar um objeto transformado para seu estado original
1. Verifique se o objeto transformado ainda est selecionado.
2. Siga um destes procedimentos:
Clique no boto Remover transformao no painel

Transformar
Selecione Modificar > Transformar > Remover transformao

Cores, gradientes e traados

Para que seja possvel a visualizao de cores em dispositivos eletrnicos,


foram padronizados modelos de representao de cor capazes de apresentar praticamente todas as cores encontradas na natureza.
Mdulo de cor RGB

O propsito principal do sistema RGB reproduo de cores em dispositivos eletrnicos como monitores TV, computador, Datashows, scanners
e cmeras digitais, etc. Baseado na teoria de viso colorida tri cromtica,
de Helmholtz, e o tringulo de cores de Maxwell, utiliza valores numricos para representar o espectro visvel de cor utilizando as cores Red Vermelho; Green - Verde; Blue - Azul.

19

Aula 01 - Introduo ao Flash CS5.indd 19

02/12/2010 12:56:15

W e b

G a m e

O painel Cor

O painel Cor permite que voc modifique a paleta de cores do seu documento e alterar as cores de traados e preenchimentos, incluindo importar, exportar, excluir, ou ento modificar a paleta de cores do seu painel
Amostras, seleo de cores no modo hexadecimal4 criao de gradientes multicoloridos para produzir uma gama de efeitos de profundidade
a objetos bidimensionais, etc.

O painel Cor contm os seguintes controles:


1. Cor do Traado Altera a cor do traado, ou a borda, de um ob-

jeto grfico.

2. Cor de preenchimento Mudana na cor de preenchimento. O

preenchimento a rea de cor que preenche a forma.

3. Menu Tipo Altera o estilo de preenchimento:


Nada Remove o preenchimento.
Slido Apresenta cor de preenchimento slida e nica.
Linear Produz um gradiente que se mistura em um

caminho linear

Radial Produz um gradiente que se mistura para fora em

um caminho circular a parti de um ponto focal central.

Bitmap Cobre a rea de preenchimento selecionada com

uma imagem de bitmap que se pode selecionar.

20

Aula 01 - Introduo ao Flash CS5.indd 20

02/12/2010 12:56:15

W e b

G a m e

4. RBG Permite que voc altere a densidade das cores vermelho,

verde e azul (RGB) num preenchimento.

5. Alfa Define a opacidade de um preenchimento slido ou o con-

trole deslizante selecionado atualmente para um preenchimento


gradiente.
Nota: Um valor alfa de 0% cria um preenchimento invisvel (ou
transparente) e um valor 100% cria um preechimento opaco.

6. Amostra de cor atual Exibe o valor hexadecimal de cor atual.


7. Estouro Permite que voc controle as cores aplicadas alm dos

limites de um gradiente linear ou radial.


Estender (Padro) Aplica as cores especificadas alm do
fim do gradiente.
Refletir Faz com que as cores do gradiente preencham a

forma usando um efeito de espelho reflexo.

Repetir Repete o gradiente do incio ao fim at que a

forma selecionada esteja preenchida.

8. RGB linear Cria um gradiente radial ou linear compatvel com

Grficos Escalonveis de Vetor (SVG).

21

Aula 01 - Introduo ao Flash CS5.indd 21

02/12/2010 12:56:15

W e b

G a m e

Anotaes

22

Aula 01 - Introduo ao Flash CS5.indd 22

02/12/2010 12:56:15

W e b

G a m e

C a p t u l o
C o n c e i t o s

Aula 02 - Conceitos de animao.indd 23

d e

0 2

a n i m a o

02/12/2010 12:59:17

W e b

G a m e

Conceitos de animao
Como foi dito anteriormente, a animao uma iluso de movimento
causada por uma sequncia de imagens estticas.
Para que essa iluso possa ocorrer de forma limpa, sem imperfeies, existem alguns conceitos a serem aplicados.
Animao quadro a quadro

Uma animao feita a partir de uma sequncia de imagens, exibida em


uma determinada velocidade de forma que no possamos perceber a
transio entre uma e outra. Comparando com um rolo de cinema temos
diversos quadrinhos cada um com uma foto do rolo de filmagem que
so rodados no projetor. Podemos dizer que cada quadro desses, ou frame,
possui uma parte de um movimento e cada quadro seguinte ter uma parte
rapidamente posterior do movimento. Podemos dizer tambm que possumos uma variao de quadros a serem exibidos por segundo, ou FPS
(frames por segundo). Para animaes em 2D utilizamos por conveno
uma taxa de 24 FPS, e para animaes em 3D de 30 60 FPS
Veja o exemplo abaixo:

Imagem extraida do livro animators survival kit, Autor: Williams, Richard. Editora: Farrar
Straus & Giroux

Como se nota, temos uma variao de espao entre a bola quicando e a


quantidade de frames para mostrar o movimento. Quanto menos frames
utilizarmos para animar um movimento mais rpido ele ser, e quanto mais
frames utilizarmos mais lento ele ser.

24

Aula 02 - Conceitos de animao.indd 24

02/12/2010 12:59:18

W e b

G a m e

Animao quadro a quadro no flash.


O Flash facilita bastante na aplicao das animaes frame a frame. Para
saber mais sobre isso daremos uma olhada na timeline (linha de tempo)
do flash e seu funcionamento, bem como em alguns recursos do flash
como a interpolao de movimento.

A. Reproduo, B. Frame em branco, C. Cabealho da timeline, D. Camadas, E. Menu


Pop-Up de visualizao dos frames, F. Animao frame a frame, G. Animao interpolada, H. Boto de exibio de frame da reproduo, I. Botes de Onion Skin, J. Mostra
o Frame corrente, K. Mostra a taxa de quadros por segundo. L. Tempo decorrido da
animao.

Keyframes e Onion Skin

Da mesma forma que num rolo de filme cada frame abriga uma imagem
que faz parte do movimento a ser exibido. O Flash j iniciado com um
keyframe em branco para se trabalhar. Para criar mais quadros chave em
branco click no frame desejado e apertando o boto F7 ou indo no menu
INSERT>TIMELINE>BLANK KEYFRAME (inserir>timeline>key
frame em branco) criado um novo keyframe em branco.
Na parte inferior da timeline ao centro dela encontra-se o grupo de
botes onion skin. Eles servem para que possam ser visualizados os
frames anteriores e posteriores para facilitar o trabalho do animador.
Papel de transparncia pode-se visualizar de forma translucida
frames anteriores posteriores.
Contorno de papel de transparncia a visualizao dos frames
anteriores e posteriores feita com contornos.
Editar mltiplos frames permite editar mais de um frame ao
mesmo tempo.
Obs.: Recomenda-se utilizar essa opo APENAS para alterao de
posicionamento das imagens.

Modificar marcadores de transparncia altera configuraes de transparncia.

25

Aula 02 - Conceitos de animao.indd 25

02/12/2010 12:59:18

W e b

G a m e

Extremos do movimento e interpolao:

Como se pode notar no exemplo da bola quicando o movimento ele


composto de extremos, que so pontos chave do movimento. Onde o
movimento se inicia e onde ele termina. Esses extremos de movimento
podem denominar quadros chave. Com base nisso pensado quais so
os quadros que so necessrios para que o movimento corra de forma
suave, sem parecer algo descontnuo.

Imagem extrada do livro animators survival kit, Autor: Williams, Richard. Editora:
Farrar Straus & Giroux

Com a interpolao de movimento o Flash j calcula automaticamente


o movimento do objeto gerando assim a animao com a quantidade de
frames necessrios do comeo ao fim do movimento.
O Flash trabalha com 3 tipos de interpolao:
Interpolao clssica (classic tween): Neste tipo no h alterao do
objeto em questo. Porm o movimento pode ser realizado de acordo
com a vontade do animador. possvel utilizar outra layer com uma
linha para que ela seja o caminho por onde o objeto vai percorrer. Este
recurso chamado linha guia ou guide line e s pode ser utilizada com o
modo de desenho de objetos, formas agrupadas ou smbolos, no caso de
tentar utilizar esse recurso com uma forma no agrupada ela agrupada
automaticamente no Flash CS5. Linha guia e seus recursos sero explicados mais a frente.
Interpolao de forma (shape tween): um tipo de interpolao exclusivo para formas no agrupadas e no pode ser utilizadas em smbolos
nem em outros tipos de objetos, apenas formas. Entende-se por forma
qualquer desenho que no seja smbolo, no esteja agrupado ou no
tenha sido criado/convertido para objeto. Na interpolao de forma
todas as caractersticas do desenho podem ser alteradas durante a transformao. Formato, cor, posio no palco, etc.. Esta alterao pode ser
controlada por pontos ncora denominada referncia de forma. Atravs
deles o Flash suaviza essa transformao permitindo que possam ser
transformados desenhos complexos sem que no processo de transio
aparea uma animao meio tosca.

26

Aula 02 - Conceitos de animao.indd 26

A referncia de forma pode se encontrada no menu


Modificar>Forma>Referncia de forma (Modify/Shape/Shape reference)
ou ctrl+shift+H e deve ser ajustado nos objetos a receberem a interpolao nos seus respectivos keyframes.
Interpolao de movimento (motion tween): A interpolao de movi-

02/12/2010 12:59:18

W e b

G a m e

mento controlada de uma forma bem peculiar. Pode ser utilizada com
apenas objetos e simbolos e s necessita de um keyframe que onde se
inicia a interpolao. Cria-se o objeto em um keyframe desejado e se
escolhe at qual frame ser executado o movimento. No Flash a timeline
apresenta diviso em quadros, mas para poder utiliza-los necessrio
acessar a opo de criar quadros. Menu Inserir>Timeline>Quadros
(Insert>Timeline>Frames) ou simplesmente seleciona-se o quadro desejado da mesma forma e utiliza-se o F5 que o atalho no teclado para
esta funo. O Flash estender o contedo do keyframe, exibindo-o at
o frame desejado, porm na interpolao de movimento pode-se clicar
no objeto em um frame normal e simplesmente movimenta-lo vontade. Alm disso, ainda possvel alterar qualquer propriedade do objeto
interpolado na aba de edio de movimento (motion editor) por padro
localizada junto da timeline. Caso a mesma no esteja sendo exibida
pode ser ativada no menu Janela>Editor de movimento (Window> Motion Editor)
Easy in e Easy out

Eventualmente quando realizamos qualquer tipo de movimento existem


alteraes no ritmo e na velocidade desse movimento. Quando uma
pedra comea a rolar ladeira abaixo ela vai ganhando gradativamente velocidade at atingir seu pice. Neste caso a pedra esta sofrendo um easy
out. Ela sai lenta do seu ponto de repouso e aos poucos fica mais rpida.
Quando arremessamos uma pedra em algum lugar ela inicia o movimento rpido e vai perdendo a velocidade medida que segue o trajeto. Esse
movimento de desacelerao chamamos de easy in. Em uma animao
quanto mais quadros tivermos entre os extremos de um movimento
mais lento ele ser e quanto menos quadros mais rpido ele ser, bvio
tomando o devido cuidado para que todos os quadros sejam suficientes
para mostrar o movimento de forma clara.

Imagem extrada do livro animators survival kit, Autor: Richard Williams. Editora:
Farrar Straus & Giroux

No Flash podemos utilizar o easy in e o easy out clicando por cima do


frame na timeline e na aba de propriedades alterando o valor de atenuao (easy). Valores positivos so out e negativos so in. O easy tambm
pode ser mais bem configurado atravs de grficos que so exibidos clicando no lpis ao lado da atenuao no caso de interpolao de forma ou
clssica, mas no caso de interpolao de movimento o grfico j existe no
motion editor portanto no exibido o cone do editor de easy ao lado
da atenuao na aba de propriedades.

Aula 02 - Conceitos de animao.indd 27

27

02/12/2010 12:59:18

W e b

G a m e

Antecipao de movimento
Movimento antecipado o movimento contrrio que fazemos antes de
executar qualquer ao. Como por exemplo, quando pulamos flexionamos as pernas para pegar impulso, e quanto maior for o pulo maior ser
o impulso, portanto mais intenso o movimento de dobrar os joelhos
antes de pular. Quando uma personagem da um soco ela primeiramente
puxa o brao para trs para pegar impulso. Este tipo de reao tambm
serve para a parte posterior ao movimento. Ao cairmos depois do pulo
dobramos os joelhos para amortecer a queda, quando uma arma de fogo
disparada ela causa um impacto que a projeta para trs, etc.. este tipo
detalhe que tornar far sua animao mais dinmica e atraente.
Detalhes gerais e dicas
Pesquise anatomia em geral para saber como os mais variados animais e
objetos se comportam na antecipao de movimento. Pesquise como a
anatomia de cada uma das personagens e os itens dispostos no cenrio
ou coisas que sua personagem utiliza.
Usar referncias sempre torna o trabalho mais rico.
O avanado sempre vem depois do bsico assim como o sucesso depois
do trabalho.

28

Aula 02 - Conceitos de animao.indd 28

02/12/2010 12:59:18

W e b

G a m e

Anotaes

29

Aula 02 - Conceitos de animao.indd 29

02/12/2010 12:59:18

W e b

G a m e

Anotaes

30

Aula 02 - Conceitos de animao.indd 30

02/12/2010 12:59:18

W e b

G a m e

C a p t u l o
I n t r o d u o

Aula 03 - Introduo ao Actionscrip 3.0.indd 31

a o

0 3

A c t i o n s c r i p

3 . 0

02/12/2010 12:59:30

W e b

G a m e

Introduo ao Actionscrip 3.0


Para comearmos a entender a funo e utilizao do Action Script 3.0,
iremos aprender primeiramente a sua estrutura e utilizao. Independente
se voc j um programador ou um aluno que esta entrando no mundo da
programao, vlida lembrar que o Action Script 3.0 a linguagem mais
utilizada pelas produtoras no desenvolvimento de Games no mundo.

O que o Actionscript 3.0?


O ActionScript 3.0 (AS3) uma linguagem de programao baseada em
ECMAScript interpretada por uma mquina virtual (ActionScript Visual
Machine 2) que est presente nos plugin Adobe Flash Player (v.9 ou superior) e no ambiente Adobe AIR.
Por serem executadas em uma mquina virtual, as aplicaes feitas com
AS3 podem ser executadas em todos os navegadores e em qualquer plataforma com suporte ao plugin Flash Player, inclusive dispositivos mveis.
Alm disto, os aplicativos podem rodar em qualquer Sistema Operacional
suportado pelo Adobe AIR.
Lanado em 2006, foi completamente remodelada e aperfeioada em diversos aspectos. Dentre suas mudanas, a maior conquista foi no que diz
respeito ao suporte Programao Orientada a Objetos o mesmo conceito
utilizado em linguagens tradicionais como C/C#, Java, Phyton, etc.

AS2 vs. AS3


Apesar de terem sido criadas a parti da mesma Empresa - Adobe, o nmero
aps a palavra Actionscript (2 ou 3), no indica o grau de dificuldade da
linguagem, e nem que haja uma escala progressiva de conhecimento, onde
preciso saber AS2 para aprender AS3. Na verdade, pode-se dizer que mais
fcil aprender AS3 sem saber AS2 previamente, por elas trabalharem com
paradigmas de programao diferente.

32

Aula 03 - Introduo ao Actionscrip 3.0.indd 32

Para que voc possa entender um pouco mais sobre a diferena entre a
verso 2.0 e 3.0, a Adobe incluiu na documentao do Flash CS5 uma tabela
tremendamente til, intitulada ActionScript 2.0 Migration Migrao ActionScript 2.0. Para localizar esse documento, olhe nos apndices de ActionScript 3.0 Language and Components Reference (Referncia de Linguagem
e Componentes ActionScript 3.0). Esse documento est tambm disponvel
em Adobe online Help Resource Center (Centro de Recurso de Ajuda online Adobe): HTTP://help.adobe.com/en_US/AS3LCR/Flash_10.0/migration.html

02/12/2010 12:59:30

W e b

G a m e

Dando os primeiros passos


Devido a sua dificuldade, no trataremos do ActionScript em sua totalidade, apenas uma breve introduo e mostraremos algumas utilizaes
prticas.
Para inserir uma ao, escolheremos a opo de menu Janela > Aes (ou
pressione a tecla de atalho F9). Ser aberta a janela de ActionScript do
Flash, possibilitando a entrada de comandos.

A. Painel Script B. Menu do painel C. Caixa de ferramentas de aes D.


Navegador de scripts

O painel Aes consiste em trs painis: a caixa de ferramentas Aes,


que agrupa elementos do ActionScript por categoria, o navegador de
scripts, que permite mover rapidamente entre os scripts em seu documento Flash, e o painel Script, onde voc digita seu cdigo ActionScript.
Se voc encontrar alguma dvida sobre as funes disponveis no ActionScript 3.0, basta utilizar o Ajuda do ActionScript clicando no boto disponvel no canto superior direito da janela anterior.

Ferramentas no painel Aes e na janela Script


As barras de ferramentas do painel Aes e da janela Script permitem
que voc acesse os recursos de assistncia de cdigo que ajudam a simplificar e dinamizar a codificao no ActionScript.
Nota: As ferramentas so diferentes dependendo se voc est usando
o painel Aes ou a janela Script.
1. Adicionar novo item ao script

Exibe os elementos da linguagem que tambm esto na caixa de ferramentas de aes.


2. Localizar
Localiza e substitui texto no script.
3. Inserir caminho de destino Ajuda na configurao do caminho de destino absoluto ou relativo para uma ao no script
Nota: Somente no painel Aes.

Aula 03 - Introduo ao Actionscrip 3.0.indd 33

33

02/12/2010 12:59:30

W e b

G a m e

4. Verificar sintaxe

Verifica os erros de sintaxe no script atual.


Os erros de sintaxe so listados no painel Sada.
5. Formato automtico Formata seu script para uma sintaxe de
codificao apropriada e uma legibilidade melhorada.
possvel definir as preferncias da formatao automaticamente na caixa de dilogo Preferncias, que est disponvel no
menu Editar ou no menu do painel Aes.
6. Mostrar referncia de cdigo

Se voc desativou a referncia


de cdigo automtica, use Mostrar referncia de cdigo para exibir uma referncia de cdigo para a linha de cdigo em que est
trabalhando.
7. Opes de depurao
Define e remove pontos de interrupo
para que voc possa prosseguir linha por linha em seu script ao
executar uma depurao.
Nota: Somente no painel Aes.
8. Contrair entre chaves

Contrai o cdigo que aparece entre


as chaves ou os parnteses que, atualmente, contm o ponto de
insero.
9. Contrair seleo Contrair o bloco de cdigo contrado no
script atual.
10. Expandir tudo Expande todo o cdigo atualmente selecionado.
11. Aplicar comentrio em bloco Adiciona marcadores de comentrio no incio e no final do bloco de cdigo selecionado.
12. Aplicar comentrio em linha Adiciona um marcador de
comentrio de linha nica no ponto de insero, ou no incio de
cada cdigo em uma seleo multilinha.
13. Remover comentrio Remove os marcadores de comentrio
da linha atual ou de todas as linhas de seleo atual.
14. Mostrar / ocultar caixa de ferramentas Exibe ou oculta a
caixa de ferramentas de aes.
15. Assistncia de script
No modo de Assistncia de script, voc
apresentado a uma interface de usurio para insero dos elementos necessrios criao de scripts.
16. Ajuda Exibe as informaes de referncia para o elemento do
ActionScript que est selecionado no painel Script.
17. Menu do painel
Contm os comandos e as preferncias que se
aplicam ao painel Aes.
Nota: Somente painel Aes.

Fundamentos de programao
Como o ActionScript uma linguagem de programao, para conheclo, primeiro necessrio compreender alguns conceitos gerais de
programao de computador.

34

Aula 03 - Introduo ao Actionscrip 3.0.indd 34

Um Game de web consiste em dois aspectos principais:


Ele uma srie de instrues ou etapas que o computador
deve executar.
Cada etapa envolve a manipulao de algumas informaes
ou dados.

02/12/2010 12:59:30

W e b

G a m e

Em termos gerais, um Game de computador apenas uma srie de


comandos passo a passo que voc fornece ao computador e ele executa.
Cada comando conhecido como instruo. Como voc ver neste
manual, no ActionScript, cada instruo escrita com um ponto-e-vrgula no final.

Variveis, Tipos de dados e Operadores


Agora que j tivemos um primeiro contato com o mundo do ActionScript 3.0, vamos entender na prtica o seu funcionamento. Abordaremos trs pontos fundamentais dos muitos utilizados em jogos no AS3,
sendo eles: Variveis, Tipos de Dados, Operadores Aritmticos e o Debbuger.

Vriaveis
As vriaveis permitem armazenar valores usados para fluxo do funcionamento do jogo. Neste contesto uma vriavel nada mais do que uma instncia de um Classe e portanto definica com um um tipo assim como
declarada com a palavra-chave var.
Exemplo:
var instanciaDaClasse:nomeDaClasse;
Uma representao de uma declarao de uma varivel ficticia.

Nota: O valor de uma varivel acessado normalmente nos scripts,


exceto quando criamos uma varivel dentro de uma funo. Quando isso
ocorre varivel chamada de varivel local e s ter validade dentro da
funo.
Regras para a criao de variveis:
1. O primeiro caractere do nome de uma varivel deve ser uma

letra, underline (_) ou um cifro ($). Os prximos caracteres


podem ser uma letra, nmero, um sublinhado ou um cifro.
2. O nome de uma varivel no pode ser uma palavra chave4 e nem
uma literal5 do Actionscript, como true, false, null ou undefined.
3. Os nomes de variveis no devem conter espaos.
4. O Actionscript 3.0 case-sensitive, ou seja, ele diferencia maisculas de minsculas, portanto meuNome diferente de meunome.

35

Aula 03 - Introduo ao Actionscrip 3.0.indd 35

02/12/2010 12:59:31

W e b

G a m e

Tipo de dados
Anteriormente vimos que a varivel um espao virtual criado na
memria RAM, para armazenar temporariamente alguns dados. Mas
quais seriam esses dados? Se formos exemplificar esse espao como uma
vaga para um carro, podemos chegar a concluso que existem carros de
cores, tamanhos, tipos e estilos diferentes, igualmente aos dados. Existem
dados numricos, caracteres, valores inteiros entre outros. Por esse motivo iremos aprender os tipos de dados para no criarmos uma varivel
(vaga para um carro) tentando colocar um caminho no local.
A associao de uma varivel a um tipo de dados deve ser feita durante
a declarao da varivel. A declarao de uma varivel sem designar seu
tipo legal, mas gera um aviso do compilador no modo estrito. Um tipo
de varivel designado anexando o nome da varivel ao caractere doispontos (:) seguido do tipo da varivel.

Observe que o exemplo a cima declara uma varivel idade que do tipo
int.
1. String utilizado quando o programador esta criando uma var-

ivel que trabalha com texto ou cadeia de caracteres.

2. int utilizado quando pretendemos amarzenar valores nmeri-

cos de tipo inteiro sejam eles negativos ou positivos.

Nota: possvel armazenar valores que variam de -2.147.483.648


(-2) 2.147.483.647 (2-)
3. uint Armazena valores nmericos do tipo inteiro no negativo.

Nota: possvel armazenar valores que variam de 0


4.294.967.295 (232 - 1)
4. Number Representar inteiros, inteiros no assinados e nmeros

de ponto flutuante.

36

Aula 03 - Introduo ao Actionscrip 3.0.indd 36

Para maximizar o desempenho, voc deve usar o tipo de dados


Number somente para valores inteiros maiores do que os tipos
int e uintde 32 bits podem armazenar ou para nmeros de ponto
flutuante.
Nota: possvel armazenar valores que variam de
-9.007.199.254.740.992 (-253) 9.007.199.254.740.992 (253).

02/12/2010 12:59:31

W e b

G a m e

5. Boolean O tipo de dados Boolean compreende dois valores:

true e false. Nenhum outro valor vlido para variveis do tipo


Boolean.

Valores padro o valor que uma varivel contm antes que seu valor seja definido.
Uma varivel inicializada quando seu valor definido pela primeira vez. Se voc declarar uma varivel, mas no definir seu valor, ela ser uma varivel no inicializada. O
valor de uma varivel no inicializada depende de seu tipo de dados. A tabela a seguir
descreve os valores padro de variveis, organizados por tipo de dados:

Tipo de dados

Valor padro

Boolean

false

int

Number

NaN

Object

null

String

null

uint

No declarado (equivalente
anotao de tipo *)

undened

Todas as outras classes, inclusive classes definidas pelo


usurio.

null

Converses de tipo
Uma converso de tipo ocorre quando um valor transformado em um
valor de um tipo de dados diferente. As converses de tipo podem ser
implcitas ou explcitas. A converso implcita, que tambm chamada de
coero, s vezes, executada pelo Flash Player ou Adobe AIR em tempo
de execuo, ou seja, automaticamente no momento da compilao.
Exemplo:

No exemplo a cima a vriavel valorBoleano do tipo Boolean (Boleano) tem seu valor
convertido para o tipo int (Inteiro).

Nota: O valor nmerico para valores true ou false so 0 para false e 1 para
true.

Converses implcitas quando uma converso realizada


de forma automatica, sem a influencia manual do programador. As converses implcitas podem acontecer em tempo de
execuo em diversos contextos:
Em instrues de atribuio
Quando os valores so transmitidos como argumentos
de funo
Quando os valores so retornados de funes
Em expresses que usam determinados operadores,

Aula 03 - Introduo ao Actionscrip 3.0.indd 37

37

02/12/2010 12:59:31

W e b

G a m e

como o operador de adio (+)

Converses explcitas Este tipo de converso feita manualmente com a interveno do programador. a maneira mais
correta de se trabalhar, pois evita que a incompatibilidade das
coeses de tipos gere um erro durante a compilao.
Exemplo:
Exemplo de coeso implcita mal sucedida.

Exemplo de coeso explcita.


Valores padro de coeso assumem resultados da projeo para os tipos de dados
Number, int ou uint a partir de outros tipos de dados. Vejamos na tabela a baixo.

Tipo de dados ou valor

Resultado da converso em
Number, int ou uint

Boolean

Se o valor for true, 1; caso


contrrio, 0.

Date

A representao interna do
objeto Date, que o nmero
de milsimos de segundo
desde a meia-noite de 1 de
janeiro de 1970, hora universal.

null

Object

Se a ocorrncia for null e


convertida para Number, NaN;
caso contrrio, 0.

String

Um nmero se o Flash Player


ou o Adobe AIR puderem converter a seqncia de caracteres em um nmero; caso
contrrio, NaN se convertida
em Number ou 0 se convertida em int ou uint.

undened

Se convertido em Number,
NaN; se convertido em int ou
uint, 0.

38

Aula 03 - Introduo ao Actionscrip 3.0.indd 38

02/12/2010 12:59:31

W e b

G a m e

Tipo de dados ou valor

Resultado da converso em
Boolean

String

false

null

false

Number, int ou uint

false

Object

false
null;

Tipo de dados ou valor

Resultado da converso em
String

Array

Uma seqncia de caracteres


incluindo todos os elementos
de matriz.

Boolean

true

Date

Uma representao da seqncia de caracteres do


objeto Date.

null

null

Number, int ou uint

Uma representao da seqncia de caracteres do


nmero.

se o valor for null ou


uma seqncia de caracteres
vazia (); caso contrrio, true.

Object

se o valor for NaN ou 0;


caso contrrio, true.
se a ocorrncia for
caso contrrio, true.

ou false

Se a ocorrncia for null,

null; caso contrrio, [object Object].

Operadores
Bastante familiares aos operadores matemticos que aprendemos na
escola, os operadores aritmtricos so utilizados dentro da programao
para possibilitar clculos entre as variveis, como: adio, multiplicao, diviso, subtrao, etc.
A tabela a seguir lista os operadores para o ActionScript 3.0 em ordem
decrescente de precedncia. Cada linha da tabela contm operadores de
mesma precedncia. Cada linha de operadores tem precedncia sobre a
linha que aparece abaixo dela na tabela.

Grupo

Operadores

Primrio

[] {x:y} () f(x) new x.y x[y]


<></> @ :: ..

Sufixo

x++ x--

Unrio

++x --x + - ~ ! delete typeof


void

Multiplicativo

* / %

Aula 03 - Introduo ao Actionscrip 3.0.indd 39

39

02/12/2010 12:59:31

W e b

G a m e

Aditivo

+ -

Desvio em nvel de bits

<< >> >>>

Relacional

< > <= >= as in instanceof is

Igualdade

== != === !==

AND em nvel de bits

&

XOR em nvel de bits

OR em nvel de bits

AND lgico

&&

OR lgico

||

Condicional

?:

Atribuio

= *= /= %= += -= <<= >>= >>>=


&= ^= |=

Vrgula

Maiores referncias podem ser encontradas no site da Adobe help Flash


Actionscript: http://help.adobe.com/pt_BR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7fd1.html#top

40

Aula 03 - Introduo ao Actionscrip 3.0.indd 40

02/12/2010 12:59:31

W e b

G a m e

Anotaes

41

Aula 03 - Introduo ao Actionscrip 3.0.indd 41

02/12/2010 12:59:31

W e b

G a m e

Anotaes

42

Aula 03 - Introduo ao Actionscrip 3.0.indd 42

02/12/2010 12:59:31

W e b

G a m e

C a p t u l o
E s t r u t u r a

Aula 04 - Estrutura Condicionais.indd 43

0 4

C o n d i c i o n a i s

02/12/2010 13:16:09

W e b

G a m e

Estrutura condicionais
Toda ao gera uma reao. Na programao estas escolhas recebem o
nome de estruturas condicionais. muito importante entendermos que
uma estrutura condicional gera resultados diferentes de acordo com a ao
do usurio de nossos games.

Conceitos gerais de utilizao if, else,


else if
O ActionScript 3.0 fornece trs instrues condicionais bsicas que voc
pode usar para controlar o fluxo de programa.
if .. else Esta instruo condicional permite testar uma condio e executar um
bloco de cdigo se essa condio existir; ou executar um bloco de cdigo alternativo se ela no existir.

Exemplo de utilizao if..else


Nota: Caso deseje executar um bloco de cdigo alternativo, voc poder
usar a instruo if sem a instruo else.
if.. else if Permite testar mais de uma condio usando a instruo if.. else
if.

Exemplo de utilizao do if..else if


44

Aula 04 - Estrutura Condicionais.indd 44

Se a uma instruo if ou else for seguida de apenas uma instruo, a instruo no


precisa ficar entre chaves.

02/12/2010 13:16:09

W e b

G a m e

Por exemplo, o cdigo a seguir no usa chaves

Entretanto, a Adobe recomenda que voc sempre use chaves, porque


poder ocorrer um comportamento inesperado se instrues forem adicionadas posteriormente a uma instruo condicional sem chaves.

No exemplo a cima o cdigo a seguir, o valor numeroPositivo aumentado em 1 quer a


condio seja ou no avaliada como true.

switch ltil se voc tem vrios caminhaos de execuo que dependem da mesma expresso condicional. Ela fornece uma funcionalidade
semelhante a uma longa srie de instrues if..else if, mas mais fcil
de ler. Em vez de testar uma condio quanto a um valor booleano, a
instruo switch avalia uma expresso e usa o resultado para determinar
qual bloco de cdigo ser executado. Os blocos de cdigo comeam com
uma instruo case e terminam com uma instruo break.

45

Aula 04 - Estrutura Condicionais.indd 45

02/12/2010 13:16:09

W e b

G a m e

Anotaes

46

Aula 04 - Estrutura Condicionais.indd 46

02/12/2010 13:16:09

W e b

G a m e

C a p t u l o
E s t r u t u r a

Aula 05 - Estrutura de repetio.indd 47

d e

0 5

r e p e t i o

02/12/2010 12:59:56

W e b

G a m e

Estrutura de repetio
Podemos entender como repetio todo tipo de ao que ser feita at que
o objetivo se cumpra. Por exemplo, durante uma partida so testados se os
adversrios foram atingidos, se seu nmero de vidas superior a 0, respostas de inputs do usurio, etc.

Lao de repetio for, for..in, while, do..


while
As instrues de repetio permitem executar um bloco especfico de cdigo repetidamente usando uma srie de valores ou variveis.
for Este lao permite fazer a iterao por meio de uma varivel para um
intervalo especfico de valores. Voc deve fornecer trs expresses em
uma instruo for: uma varivel que definida com um valor inicial, uma
instruo condicional que determina quando a repetio termina e uma
expresso que altera o valor da varivel a cada repetio.

O cdigo a cima repetido cinco vezes. O valor da varivel i comea com 0 e termina com
4, e a sada ser os nmeros de 0 a 4, cada um em sua prpria linha.

for..in Itera por meio das propriedades de um objeto ou dos elementos de


uma matriz.

O exemplo a cima usar uma repetio for..in para iterar por meio das propriedades de
um objeto genrico, ou seja, as propriedades de objeto no so mantidas em uma ordem
especfica, por isso elas podem aparecer em uma ordem aparentemente aleatria.

Tambm possvel iterar por meio dos elementos de uma matriz:


48

Aula 05 - Estrutura de repetio.indd 48

02/12/2010 12:59:56

W e b

G a m e

No exemplo a cima o lao criado e puxado a parti da matriz Array.


Nota: H outro tipo de Lao de nvel for (for each..in itera por meio
dos itens de um conjunto, que podem ser tags em um objeto XML.ou
XMLList.), que no entraremos em detalhe por no ser utilizada nas
prximos projetos de Games.
while Funciona como uma condicional if que repetida desde que a
condio seja true.

No exemplo a cima o loop acontece enquanto a varivel permanecer menor que 5

Nota: Por no possuir a condio para repetio como parmetro a


mudana no valor da condio deve ser feita dentro do bloco de cdigos.
Isto torna mais fcil a criao de loops infinitos, portanto cuidado.
do..while Garante que o bloco de cdigo seja executado pelo menos uma
vez, porque a condio verificada depois que o bloco executado.

49

Aula 05 - Estrutura de repetio.indd 49

02/12/2010 12:59:56

W e b

G a m e

Anotaes

50

Aula 05 - Estrutura de repetio.indd 50

02/12/2010 12:59:56

W e b

G a m e

C a p t u l o

0 6

F u n e s

Aula 06 - Funses.indd 51

02/12/2010 13:01:09

W e b

G a m e

Funes
As funes so blocos de cdigo que executam tarefas especficas - aces - e
podem ser reutilizados no seu Game. H dois tipos de funes no ActionScript 3.0: mtodos e fechamentos de funo. O fato de uma funo ser uma
chamada a um mtodo ou um fechamento de funo depende do contexto
na qual ela definida. Uma funo chamada de mtodo quando especificada como parte de uma definio de classe ou anexada a uma ocorrncia
de um objeto. Uma funo chamada de fechamento de funo quando
definida de qualquer outra forma.
Nota: As funes possuem escopo prprio, ou seja, objetos declarados dentro da funo s podem ser acessados dentro dela.
O uso de funes oferece diversas vantagens:
Reduzem a quantidade de linhas de cdigo.
Facilitam o entendimento do cdigo.
Facilitam a manuteno, uma vez que caso seja necessria alguma
alterao, precisamos faz-la em apenas um lugar.
Favorecem uma melhor organizao e documentao do projeto.
Criando uma funo
Uma funo comea com a palavra-chave function e, em seguida, vem:
O nome da funo
Os parmetros, em uma lista delimitada por vrgula e entre parnteses
O corpo da funo, ou seja, o cdigo do ActionScript a ser executado quando a funo chamada, delimitado por chaves

Parmetros de funo

52

Aula 06 - Funses.indd 52

Os parmetros so usados para mandar valores funo, com os quais ela


trabalhar para realizar as aes. Os parmetros podem ser obrigatrios,
desde que no possuam algum valor padronizado ou podem ser opcionais,
bastando receberem algum valor padro no momento de sua criao na

02/12/2010 13:01:09

W e b

G a m e

funo.

Retorno de valores de funes


Para retornar um valor de sua funo, use a instruo return seguida
pela expresso ou pelo valor literal que deseja retornar.

Funes aninhadas
possvel aninhar funes, o que significa que as funes podem ser declaradas dentro de outras. Uma funo aninhada est disponvel apenas
dentro da funo pai, a menos que uma referncia a ela seja transmitida
ao cdigo externo.

53

Aula 06 - Funses.indd 53

02/12/2010 13:01:10

W e b

G a m e

Anotaes

54

Aula 06 - Funses.indd 54

02/12/2010 13:01:10

W e b

G a m e

C a p t u l o

0 7

E v e n t o s

Aula 07 - Eventos.indd 55

02/12/2010 13:01:25

W e b

G a m e

56

Aula 07 - Eventos.indd 56

02/12/2010 13:01:25

W e b

G a m e

Eventos
Toda interao do usurio com o jogo considerada um evento. Todas essas
aes de um game ocorrem por conta dos eventos, eventos que controlam
Tempo, os Movimentos atravez de inputs - sadas do teclado, mouse, joystick, etc.
Um sistema de manipulao de eventos permite que os programadores respondam entrada do usurio e aos eventos do sistema de modo prtico.

Introduo manipulao de eventos


Nesta etapa interessante frizar que qualquer tipo de interao com o
usurio esta vinculado ao bom uso da manipulao dos eventos. Por exemplo, a maioria dos arquivos SWF oferece suporte a algum tipo de interao
do usurio - seja algo simples, como responder ao clique do mouse, ou
algo mais complexo, como aceitar e processar dados de reconhecimento de
movimento via frames de vdeo.
Adicionando um Evento a lista de exibio
Para incluir um ouvinte no ActionScript 3.0 utilizamos addEventListener()
em todas as situaes. O mtodo addEventListener() pode ser chamado em
qualquer objeto que faa parte do fluxo de evento.
Nota: Apenas funes ou mtodos podem ser ouvintes de evento.

Remoo de ouvintes de evento


Voc pode usar o mtodo removeEventListener() para remover um ouvinte
de evento que no mais necessrio.
recomendado remover todos os ouvintes que no sero mais usados.

Vericao de ouvintes de evento existentes


O mtodo hasEventListener() retornar true se um ouvinte de evento for
encontrado para um tipo de evento especfico em um determinado objeto
da lista de exibio. O mtodo willTrigger() tambm retornar true se um
ouvinte for encontrado para um objeto especfico da lista de exibio, mas
willTrigger() procurar ouvintes nesse objeto de exibio e em todos os
ancestrais desse objeto em todas as fases do fluxo de evento.

Aula 07 - Eventos.indd 57

57

02/12/2010 13:01:26

W e b

G a m e

Anotaes

58

Aula 07 - Eventos.indd 58

02/12/2010 13:01:26

W e b

G a m e

C a p t u l o
C a p i t u r a n d o

Aula 08 - Capiturando eventos de inputs do usurio.indd 59

I n p u t s

0 8
d o

u s u r i o

02/12/2010 13:13:01

W e b

G a m e

Capturando inputs do usurio


Nesta etapa estudaremos como criar interatividade com usurio utilizando
os eventos de teclado, mouse, tempo, etc. Aps a aula voc dominar os
conceitos de inputs do usurio, podendo expandir seus conhecimentos aps
o captulo atravez do prprio glossrio do livro ou os materiais disponveis
pela Adobe.

Capturando eventos do mouse


Os cliques criam eventos de mouse que podem ser usados para acionar
funes interativas. Voc pode adicionar um ouvinte de eventos ao palco
para ouvir eventos de mouse que ocorrem em qualquer lugar no seu Jogo.
Tambm possvel adicionar ouvintes de eventos a objetos no palco (por
exemplo, Sprite ou MovieClip); esses ouvintes so acionados quando o objeto clicado. Os eventos responsveis pela captura dos comportamentos do
mouse esto dentro da Classe MouseEvent.
Lista das principais funcionalidades
MOUSE_DOWN Captura o comportamento do mouse com o boto esquerdo do mouse pressionado.
MOUSE_UP Captura o comportamento do mouse com o boto esquerdo
no momento que ele deixa de ser pressionado.
MOUSE_CLICK Captura o comportamento do clique do mouse.
MOUSE_MOVE Captura as coordenadas de localizao do cursor do
mouse.

Capturando eventos do teclado


Um item extremamente importante vinculando a interao do usurio o
controle de sada das teclas do teclado. Nesta etapa estudaremos as funcionalidades dos eventos do teclado e reconhecimento numrico de cada input
pressionado pelo usurio no decorrer do jogo.
Identificao de cdigos de tecla e de cdigo de caractere

60

Aula 08 - Capiturando eventos de inputs do usurio.indd 60

Voc pode acessar as propriedades keyCode e charCode de um evento de


teclado para determinar qual tecla foi pressionada e, em seguida, acionar
outras aes. A propriedade keyCode um valor numrico que corresponde ao valor de uma tecla no teclado. A propriedade charCode o valor

02/12/2010 13:13:01

W e b

G a m e

numrico dessa tecla no conjunto de caracteres atual.


Nota: Em caso de mapeamentos entre teclas e seus respectivos valores
de cdigo de caracteres em ASCII, consulte a classe flash.ui.Keyboard
na referncia de linguagem do ActionScript: http://www.adobe.com/go/
learn_flashcs4_langref_br?flash/ui/Keyboard.html
O mapeamento entre as teclas e os cdigos de tecla depende do dispositivo e do
sistema operacional. Devido a isso, no use mapeamentos de tecla para acionar comandos. Em vez disso, use os valores de constantes predefinidos fornecidos pela classe
Keyboard para fazer referncia s propriedades keyCode adequadas. Por exemplo, em
vez de usar o mapeamento para a tecla Shift, use a constante Keyboard.SHIFT (como
mostra o cdigo de exemplo anterior).

Lista das principais funcionalidades


KEY_DOWN Captura o comportamento da tecla quando pressionada.
KEY_UP Captura o comportamento da tecla quando deixa de ser pressionada.

Controle de intervalos de tempo


Ao desenvolver Games usando o Adobe Flash CS5l, voc tem acesso
linha do tempo, que oferece uma progresso uniforme quadro a quadro
do seu jogo. No entanto, em projetos exclusivamente do ActionScript,
necessrio usar outros mecanismos de controle de tempo.
Voc pode criar objetos do Timer para serem executados uma vez, ou
repetidamente em intervalos especificados, para a execuo de cdigos
numa programao. Dependendo da velocidade de execuo do arquivo
do Jogo ou do ambiente do tempo de execuo (memria disponvel e
outros fatores), o tempo de execuo pode despachar eventos em intervalos ligeiramente deslocados.

61

Aula 08 - Capiturando eventos de inputs do usurio.indd 61

02/12/2010 13:13:01

W e b

G a m e

Anotaes

62

Aula 08 - Capiturando eventos de inputs do usurio.indd 62

02/12/2010 13:13:02

W e b

G a m e

C a p t u l o

0 9

M a t r i z e s

Aula 09 - Matrizes.indd 63

02/12/2010 13:01:56

W e b

G a m e

Matrizes
As matrizes permitem que voc armazene vrios valores em uma nica
estrutura de dados. Com base nisto possvel guardar diversas informaes
importantes agrupadas em uma nica varivel. H diversos jogos que
abusam das matrizes para armazenar diversas funcionalidades do jogo,
como som, sprites, valores numricos, strings, etc.

Vector, Array, Dictionary


Existem basicamente trs tipos de matrizes no ActionScript 3.0, so elas
Vector, array e Dictionary. Ambas as matrizes armazenam mltiplas informaes em sua estrutura e podem ser acessadas a parti dos mtodos de
acesso de matriz explicados mais a frente.
Criao de Matrizes
possvel usar diversas tcnicas para criar uma ocorrncia de Array ou
Vector. No entanto, as tcnicas para criao de cada tipo de matriz apresentam diferenas entre si.
Array A funo de construtor Array() pode ser usada de trs modos:
1. Voc pode chamar o construtor sem nenhum argumento, obtendo

uma matriz vazia.

No exemplo a cima utilizada a propriedade length da classe Array


para verificar se a matriz no tem nenhum elemento.
2. Se preferir, voc usar um nmero como o nico parmetro do con-

strutor Array(), uma matriz com esse comprimento ser criada, com
o valor de cada elemento definido como undefined.
Nota: O argumento deve ser um nmero inteiro sem sinal entre os
valores 0 e 4.294.967.295.
No exemplo a cima o cdigo chama o construtor Array() com um
nico argumento numrico.

3. Por ltimo voc pode chama o construtor e transmitir uma lista de

elementos como parmetros, uma matriz com elementos correspondem a cada parmetro criada.

64

Aula 09 - Matrizes.indd 64

Vector Essa funo converte um objeto especificado em uma ocorrncia de


Vector. Quando voc declara uma varivel de vetor (ou do mesmo modo,
um parmetro de mtodo de vetor ou um tipo de retorno de mtodo), est
especificando o tipo base da varivel de vetor, ou seja, um vetor nunca

02/12/2010 13:01:56

W e b

G a m e

criado sem delimitado o seu tipo. O tipo base do vetor especificado por
meio de uma sintaxe de parmetro de tipo. O parmetro de tipo segue
imediatamente a palavra Vector no cdigo. Esse parmetro consiste em
um ponto (.), seguido do nome de classe base entre colchetes angulares
(<>).

No exemplo a cima a varivel vetor est declarada como uma ocorrncia de


Vector.<String>. E j apresenta como matriz indexada que pode conter apenas ocorrncias de String.

Uso do construtor Vector.<T>()


Caso voc use o construtor Vector.<T>() sem quaisquer argumentos,
uma ocorrncia de Vector vazia ser criada.

Voc pode verificar se um vetor est vazio ao conferir sua propriedade length.
Voc tambm pode predefinir a quantidade de elementos que um vetor
precisa ter inicialmente, se tiver essa informao antecipadamente. Para
criar um vetor com um determinado nmero de elementos, transfira
o nmero de elementos como o primeiro parmetro (o parmetro
length).
Nota: Os elementos Vector so preenchidos com ocorrncias do tipo
base, j que no podem ficar vazios. Se o tipo base um tipo de referncia que permite valores null, todos os elementos contero null. Caso
contrrio, os elementos contero o valor padro para a classe.

Neste exemplo o vetor criado com o tamanho fixo de valor 7

Uso da funo global Vector.<T>()


A funo global Vector.<T>() uma funo de converso. Quando a
funo global Vector.<T>() chamada, voc est especificando o tipo
base do vetor que o mtodo retorna. Com isso, uma nica matriz indexada (ocorrncia de Array ou Vector) passada como um argumento. Em seguida, o mtodo retorna um vetor com o tipo base especificado, contendo os valores do argumento da matriz de origem.

Exemplos de aplicao de Vetor.

Nota: Se no for possvel converter nenhum dos elementos de origem,


ocorrer um erro.

65

Aula 09 - Matrizes.indd 65

02/12/2010 13:01:57

W e b

G a m e

Anotaes

66

Aula 09 - Matrizes.indd 66

02/12/2010 13:01:57

W e b

G a m e

C a p t u l o
T r a b a l h a n d o

Aula 10 - Trabalhando com objetos e exibio.indd 67

c o m

1 0

o b j e t o s

e x i b i o

02/12/2010 13:25:17

W e b

G a m e

Trabalhando com objeto de


exibio
Durante o desenvolvimento de um jogo voc trabalhar com elementos
visuais, como menu, cursor do mouse, botes e entre outros itens que devero ser apresentados de acordo com a necessidade inicial do jogo.
Este captulo descreve os conceitos bsicos do trabalho com elementos da
tela. Voc aprender detalhes sobre como organizar os elementos visuais de
modo programtico. Voc tambm aprender a criar suas prprias classes
personalizadas para objetos de exibio.

Vantagens da abordagem de lista de


exibio
Renderizao mais eficiente e arquivos menores
Melhor gerenciamento da trajetria dos objetos exibidos
Total compatibilidade com os arquivos gerados no Flash (Sprites,

MovieClips, Bitmaps, etc.)

Controle maior de desempenho do jogo tem como objetivo a cri-

ao de boa parte dos efeitos criada via cdigo, no gerando assim


lixo para o cache da mquina.

Trabalhando com os objetos de exibio


Ao ser percorrido, o objeto de exibio no aparece na tela (no palco) at
que voc adicione a ocorrncia desse objeto a um continer que est na lista
de exibio.
Nota: Quando algum elemento visual adicionado ao palco, esse elemento
se transforma em filho do objeto Stage.
Adicionando um objeto a lista de exibio
Para adicionar um objeto a lista de exibio basta seguir os seguintes passos
a baixo:
var texto:TextField = new TextField(); // Criao do objeto
texto.text = Ol mundo!; // Qual informao h dentro do campo
de texto
addChild(texto); //Adicionando a lista de exibio

Removento um objeto da lista de exibio


68

Aula 10 - Trabalhando com objetos e exibio.indd 68

Para adicionar um objeto a lista de exibio basta seguir os seguintes passos

02/12/2010 13:25:17

W e b

G a m e

a baixo:
var texto:TextField = new TextField(); // Criao do objeto
texto.text = Ol mundo!; // Qual informao h dentro do
campo de texto
addChild(texto); //Adicionando a lista de exibio
texto.addEventListener(MouseEvent.CLICK, removerTextField);
function removerTextField(event:MouseEvent)
{
removeChild(texto); //Remoo do objeto da lista de exibio
}

Manipulando os objetos de exibio


possvel efetuar tarefas do tipo posicionamento do objeto na tela, movimento para frente ou para trs na ordem de empilhamento dos objetos
de exibio, dimensionamento, giro e assim por diante.
heroi.alpha = 1; //Transparencia
heroi.width = 200; //Largura
heroi.height = 200; //Altura
heroi.scaleX=1; //Escala no eixo X
heroi.scaleY=1; //Escala no eixo Y
heroi.rotation=0; //Rotao

69

Aula 10 - Trabalhando com objetos e exibio.indd 69

02/12/2010 13:25:17

W e b

G a m e

Anotaes

70

Aula 10 - Trabalhando com objetos e exibio.indd 70

02/12/2010 13:25:17

W e b

G a m e

C a p t u l o
T r a b a l h a n d o

Aula 11 - Trabalhando com Classes e Pacotes.indd 71

c o m

1 1

c l a s s e s

p a c o t e s

02/12/2010 13:22:12

W e b

G a m e

Trabalhando com classes e


pacotes
A utilizao de Classes e Pacotes fundamental para fabricao de qualquer
tipo de jogo. Dentre as vantagens podemos classificar: maior poder de gerenciamento do cdigo; reusabilidade, ou seja, possvel reutilizar o cdigo
em diversos momentos do projeto ou reutiliz-los em futuros projetos,
maior desempenho no momento da depurao, etc.

Classes & Pacotes


A sintaxe apropriada para uma definio de classe requer a palavra-chave
class seguida pelo nome da classe. O corpo da classe que est entre chaves
({}) segue o nome da classe.
public class Heroi
{
trace(Classe Heroi);
}

Uma alterao significativa na sintaxe envolve definies de classes que


esto dentro de um pacote. No ActionScript 3.0, a instruo package
obrigatria, o nome do pacote deve estar includo na declarao do pacote em vez de na declarao da classe.
package flash.display
{
public class BitmapData
{
}
}

Atributos de classe
Em discusses do modelo de objeto do ActionScript, o termo property
significa qualquer coisa que possa ser um membro de uma classe, incluindo
variveis, constantes e mtodos. No ActionScript 3.0, h um conjunto de
atributos que pode ser usado com qualquer propriedade de uma classe. A
tabela a seguir lista esse conjunto de atributos.

72

Aula 11 - Trabalhando com Classes e Pacotes.indd 72

Atributo

Definio

internal (padro)

Visvel para referncias dentro do mesmo pacote.

private

Visvel para referncias na mesma classe.

protected

Visvel para referncias na mesma classe e em


classes derivadas.

public

Visvel para referncias em todos os lugares.

static

Especifica que uma propriedade pertence classe,


ao contrrio das ocorrncias da classe.

02/12/2010 13:22:12

W e b
UserDefinedNamespace

G a m e

Nome do espao para nomes personalizado definido pelo usurio.

Atributos de espao para nomes de controle de acesso


O ActionScript 3.0 fornece quatro atributos especiais que controlam o
acesso s propriedades definidas dentro de uma classe: public, private,
protected e internal.

O atributo public torna a propriedade visvel em qualquer lugar


no script. Por exemplo, para disponibilizar um mtodo para o cdigo fora de seu pacote, declare o mtodo com o atributo public.
Isso verdadeiro para qualquer propriedade, se ela for declarada
usando as palavras-chave var, const ou function.

O atributo private torna a propriedade visvel apenas para chamadores dentro da classe de definio da propriedade. Propriedades que esto marcadas como private no esto disponveis em
tempo de compilao e em tempo de execuo.
class ExemploPrivado
{
private var privVar:String = varivel privada;
}
var meuExemplo:ExemploPrivado = new ExemploPrivado;
trace(meuExemplo.privVar); // Erro de compilao no tempo
de execuo
trace(meuExemplo[privVar]); // Erro de execuo
Neste exemplo a tentativa de acessar a varivel privada intil.

A tabela a seguir resume os resultados da tentativa de acessar


uma propriedade private que pertence a uma classe selada (no
dinmica):
modo Estrito

modo Padro

operador ponto (.)

erro em tempo de
compilao

erro em tempo de
execuo

operador colchete ([])

erro em tempo de
execuo

erro em tempo de
execuo

73

Aula 11 - Trabalhando com Classes e Pacotes.indd 73

02/12/2010 13:22:12

W e b

G a m e

Em vez disso, a varivel simplesmente no visvel, portanto, o


Flash Player ou o Adobe AIR retorna o valor undefined. No
entanto, ocorrer um erro em tempo de compilao, se voc usar
o operador ponto no modo estrito.
dynamic class ExemploPrivado
{
private var privVar:String = varivel privada;
}
var meuExemplo:ExemploPrivado = new ExemploPrivado;
trace(meuExemplo.privVar); // Erro de compilao no tempo
de execuo
trace(meuExemplo[privVar]); // Sada: undefined
No exemplo a cima a classe dinamica retorna valor indefinido.

A tabela a seguir mostra que um erro gerado apenas quando o


operador ponto usado para acessar uma propriedade private no
modo estrito:
modo Estrito

modo Padro

operador ponto (.)

erro em tempo de compilao

undefined

operador colchete ([])

undefined

undefined

O atributo protected, que novo para o ActionScript 3.0, torna


uma propriedade visvel a chamadores dentro de sua prpria
classe ou em uma subclasse. Em outras palavras, uma propriedade protected est disponvel dentro de sua prpria classe ou a
classes que esto em qualquer lugar abaixo dela na hierarquia de
heranas. Isso ser verdadeiro se a subclasse estiver no mesmo
pacote ou em um pacote diferente.
O atributo protected do ActionScript 3.0 tambm semelhante
ao atributo protected no Java, mas difere j que a verso do Java
tambm permite acesso a chamadores dentro do mesmo pacote.
O atributo protected til quando voc tem uma varivel ou
mtodo que as subclasses precisam, mas que voc deseja ocultar
do cdigo que est fora da cadeia de heranas.

74

Aula 11 - Trabalhando com Classes e Pacotes.indd 74

O atributo internal, que novo para o ActionScript 3.0, torna


uma propriedade visvel a chamadores dentro de seu prprio
pacote. Este o atributo padro do cdigo dentro de um pacote
e se aplica a qualquer propriedade que no tenha nenhum dos
seguintes atributos:
public
private
protected
um espao para nomes definido pelo usurio
O atributo internal est disponvel no ActionScript 3.0 para
fornecer a opo de indicar explicitamente a inteno tornar a
propriedade visvel apenas para chamadores dentro de seu prprio pacote.

02/12/2010 13:22:12

W e b

G a m e

O atributo static, que pode ser usado com propriedades declaradas com as palavras-chave var, const ou function, permite anexar
uma propriedade classe em vez de s ocorrncias da classe. O
cdigo externo classe deve chamar propriedades estticas usando o nome da classe em vez do nome de uma ocorrncia.
Nota: As propriedades estticas no so herdadas pelas subclasses, mas fazem parte da cadeia de escopos de uma subclasse. Isso
significa que dentro do corpo de uma subclasse, uma varivel ou
mtodo esttico pode ser usado sem fazer referncia classe na
qual ele foi definido.

75

Aula 11 - Trabalhando com Classes e Pacotes.indd 75

02/12/2010 13:22:12

W e b

G a m e

Anotaes

76

Aula 11 - Trabalhando com Classes e Pacotes.indd 76

02/12/2010 13:22:12

W e b

G a m e

C a p t u l o
A c t i o n s c r i p t

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 77

1 2

O r i e n t a d o

O b j e t o

02/12/2010 13:02:48

W e b

G a m e

Actionscript Orientado a Objeto


Estudamos nos ltimos captulos a sintaxe utilizada no ActionScript 3.0 e
agora chegou a hora de aprofundar os conhecimentos relacionados a comunicao com a mquina. Como programar pode ser divertido, construtivo,
enriquecedor e lucrativo.

O que programao?
Programar o mesmo que se comunicar. Convenhamos que nossa comunicao se divide basicamente em:
Substantivo na programao vista Objeto / Instncia. responsvel a dar
nomes aos objetos na programao. Exemplo: Heri um objeto ou classe
utilizada para instanciar o personagem do jogo Zelda.
Adjetivo na programao vista como Atributos. Na verdade responsvel pelas
caractersticas do personagem. Exemplo: Vida, fora, velocidade, etc.

Nota: As caractersticas so medidas em sua grande maioria por nmeros.


Exemplo: fora = 10, Vida = 100, velocidade = 5, etc.
Verbo na programao vista como Mtodos. responsvel pela ao criada
tanto do processo externo quanto interno do jogo. Exemplo: Bater, falar,
morrer, etc.
Nota: Um conjunto de mtodos pode ser puxado ou removido a parti de
eventos. Eventos so acontecimentos medidos pelo tempo ou quer situaes ocasionadas a parti de ocasies impulsionadas pelo usurio. Exemplo:
Click, Pressionar uma tecla, movimentao em uma cmera, etc.
Linguagem na programao ditada como Plataforma de programao ou
linguagem. Como a mquina entende tudo por nmeros, foram criadas
linguagens responsveis pela interpretao do que falado por ns e repassadas para o computador atravz da compilao. Exemplo real: Portugus;
Exemplo na programao: Actionscript.
Veremos agora como funcionam na prtica os conceitos abordados a cima.

Encapsulamento no Actionscript
Este mecanismo utilizado amplamente para impedir o acesso direto ao
estado de um objeto (seus atributos), disponibilizando externamente apenas
os mtodos que alteram estes estados.
78

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 78

No ActionScript 3.0 o encapsulamento idealizado a parti da sintaxe pack-

02/12/2010 13:02:48

W e b

G a m e

age, ou seja, pacote.

packagem // encapsulamento da Classe Main


{
public class Main()
{
public function Main()
{
trace(funo construtora);
}
}
}
Para ter controle dos objetos e de seus atributos e mtodos essencial
conhecermos os tipos de moderadores de acesso. A baixo voc visualiza
a lista dos principais moderadores de acesso:
public

Acessvel em qualquer lugar

private

S acessvel dentro da classe definio

protected

Apenas acessvel em subclasses

internal

S acessvel no mesmo pacote

packagem // encapsulamento da Classe Main


{
public class Bola()
{
private var posicaoX = 0;
public function Bola()
{
trace(funo construtora);
}
public function PosicaoX ():uint
{
return posicaoX;
}

public function PosicaoX(c:uint):void


{
posicaoX = c;
}

var bola:Bola = new Bola();


trace(bola.PosicaoX()); // retorna o valor privado do mtodo

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 79

79

02/12/2010 13:02:49

W e b

G a m e

Conceito de instanciao no
Actionscript
Instanciar o ato de dar nome ao objeto e dar caracterstica a uma
Classe. Exemplo: Zelda uma instncia da Classe Heri e, portanto
herda todas as caractersticas do tipo Heri.
package //Este arquivo o documento .as externo
{
import flash.display.MovieClip;
public class Heroi extends MovieClip //Iremos abordar isto mais
a frente em Herana
{
public function Heroi()
{
}

public function andar():void


{
trace(Voc esta andando);
}

// A parti de agora o arquivo no Flash possui um arquivo com as propriedades configuradas para para ter como Objeto a classe Heroi.
import Heroi(); // Importei a Classe Heroi
heroi.andar(); // Mtodo criado a parti do documento externo
heroi.alpha(); // Mtodo da classe MovieClip que foi extendida

Conceito de Polimorfismo aplicado no


Actionscript
O polimorfismo uma tcnica de reutilizao do cdigo em tarefas
semelhantes, porm no exatamente idnticas. Exemplo: possvel o
ser humano locomover, porm o ato de se locomover tambm pode ser
aplicado em outras situaes como, por exemplo, um veculo (carro,
caminho, van, etc.). Nesta situao ambos os objetos o mesmo mtodo
(locomover), porm de maneira diferente.
Um exemplo simples de aplicao de polimorfismo pode ser visto abaixo
na Coeso de valores flutuantes para valores inteiro.

80

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 80

02/12/2010 13:02:49

W e b

G a m e

Exemplo de atributos e mtodos


Estticas
Utiliza-se a definio static quando se deseja utilizar a Classe como referencia e no sua instncia, ou seja, voc no precisa de uma instncia do
tipo da classe para ter acesso a seus atributos ou mtodos.
Atributo:
package
{
public class Veiculo
{
public static var velocidade:uint = 15;

public function Veiculo()


{
}

import Veiculo;
trace(Veiculo.velocidade);
Mtodo:
package
{
import flash.display.DisplayObject
public class Utils
{
public function Utils()
{
}

public static alinharObjeto(obj:DisplayObject):void


{
obj.x = obj.stage.stageWidth / 2 - obj.width / 2;
obj.y = obj.stage.stageHeigh / 2 - obj.height / 2;
}

import Utils;
Utils.alinharObjeto(boxe_mc);
Nota: Caso seja utilizada a definio esttica em uma constante, no ser possvel
alterar o valor do atributo.

package
{
public class Veiculo
{
public static const VELOCIDADE:uint = 15;

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 81

81

02/12/2010 13:02:49

W e b

G a m e
public function Veiculo()
{
}

import Veiculo;
trace(Veiculo.velocidade);
Veiculo.VELOCIDADE = 20; // Dar erro pois este atributo uma constante, portanto seu valor no pode variar.

Exemplo de get e set de um mtodo

packagem
{
public class Bola()
{
private var _posicaoX = 0;
public function Bola()
{
trace(funo construtora);
}
public function get posicaoX ():uint
{
return _posicaoX;
}

public function set posicaoX(c:uint):void


{
_posicaoX = c;
}

var bola:Bola = new Bola();


bola.posicaoX = 10;
trace(bola.posicaoX); // retorna o valor privado do mtodo

Conceitos gerais de Interface no Actionscript

82

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 82

Polimorfismo que basicamente o conceito de reutilizao dos mesmos mtodos, mas aplicando funes diferentes. Pois bem, Interface
a aplicao do conceito de polimorfismo. Neste caso voc ver como o
mesmo mtodo se comporta de maneira diferente em diversas situaes
do cdigo.

02/12/2010 13:02:49

W e b

G a m e

Criando uma interface


Para realizar a criao de uma interface basta utilizar a sintaxe intertace
antes de seu nome.

Nota: Por padro interfaces criadas possuem o I na frente do nome da


interface e abas so apresentadas em letra maiscula.
package
{
public interface IComunicacao
{
function falar():void
{
}
}
}

Implementando uma interface


O objetivo da interface voc poder implement-la, ou seja, adicionar
recursos a ela de acordo com sua necessidade. O exemplo abaixo acompanha a linha de raciocnio do ltimo exemplo.
package
{
public class Brasileiros implements IComunicacao
{
public function Brasileiros()
{
}
}

public function falar():void


{
trace (Ol);
}

package
{
public class Americano implements IComunicacao
{
public function Americano()
{
}
}
public function falar():void
{
trace (Hello);
}

}
var brasileiro:Brasileiros = new Brasileiros();
var americano:Americano = new Americano();
function falar (falar:IComunicao):void
{
falar.falar();
}
falar(brasileiro);
falar(americano);

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 83

83

02/12/2010 13:02:49

W e b

G a m e

Anotaes

84

Aula 12 - Actionscript 3.0 - Orientado a Objeto.indd 84

02/12/2010 13:02:49

W e b

G a m e

C a p t u l o
F s i c a

Aula 13 - Fisica do jogo.indd 85

p a r a

1 3
j o g o s

02/12/2010 13:03:00

W e b

G a m e

Fsica para jogos


Uma das coisas que diferenciam os jogos simples e medocres dos jogos
realmente avanados hoje em dia o uso das leis da fsica. Quanto melhor um jogo emular a fsica da vida real, mais o jogador consegue penetrar
nesse universo e acreditar nele.
importante frisar que um jogo segue todos os mesmos paradigmas de um
mundo real. Como no mundo real h Gravidade, Repulso, Coliso, Atrito,
Velocidade, Acelerao, entre outros fatores que do vida ao jogo. Neste
momento iniciaremos os conceitos de fabricao de uma engine.

A fsica de movimento
O objetivo da fsica que examinaremos basicamente, decompor o movimento e emul-lo usando nmeros. o que veremos em cinco tipos de
movimento:

Movimento retangular normal

Ricochete

Gravidade

Vento

Movimento circular ou rotacional

Frico ou Atrito

Nota: Os quatro primeiros tipos de movimento dependem simplesmente de


criao de foras que atuam sobre a posio horizontal (eixo x) e a posio
vertical (eixo y). O quinto tipo de movimento usa um mtodo ligeiramente
distinto para apresentar as variveis do movimento (rotao e velocidade),
mas no final, isso tambm convertido para controle de coordenada do
eixo x e y.
Movimento Retangular normal

O movimento retangular normal definido simplesmente com a razo do


movimento de um objeto ao longo de um ou vrios eixos, ou seja, para
mover um objeto normalmente ao longo de um eixo (x), basto modificar a
posio x desse objeto ao longo do tempo.
86

Aula 13 - Fisica do jogo.indd 86

02/12/2010 13:03:00

W e b

G a m e

var _dx:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular(event:Event):void
{
this.x += _dx;

}
Esse um movimento alo longe de um nico eixo. Quando nos referimos ao monitor do computador, porm, estamos falando de uma superfcie bidimensional, o que significa que dever haver outro eixo: o eixo
vertical y.
var _dx:int = 2;
var _dy:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular(event:Event):void
{
this.x += _dx;
this.y += _dy;
}
Neste exemplo a cima o movimento ocorre ao longo de dois eixos, x e y, ou
seja, no final a bola se mover diagonalmente.

Ricochete
Ricochetear o mesmo que refletir o movimento. Em uma trajetria a
coliso de um objeto as paredes delimitadoras foram o objeto a movimentar-se em sentido contrrio. Pois bem, com penas adaptaes no
cdigo anterior conseguimos representar este conceito com muita facilidade. Vejamos o exemplo:
var _dx:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular(event:Event):void
{
this.x += _dx;
if (this.x > 500)
{

Aula 13 - Fisica do jogo.indd 87

87

02/12/2010 13:03:00

W e b

G a m e
_dx *= -1;

}
}

Nota: Lembre-se de que nosso teste comparativo criado a cima foi relativo ao ponto de registro do clipe de filme em questo, ou seja, no caso
de bola o ponto de registro est no centro exato do clipe de filme. Para
resolver esta situao examinamos as dimenses da bola e a distncia
do ponto de registro para a borda direita que a largura dividida por 2.
Assim a bola movida para uma posio em que esta apenas tocando
a parede e no a parti do seu ponto de registro. Observe o exemplo a
abaixo:
var _dx:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular(event:Event):void
{
this.x += _dx;
if (this.x this.width / 2 > 500)
{
this.x = 500 this.width / 2;
_dx *= -1;
}
}

Para criarmos uma o mesmo efeito de ricochete na parede esquerda


basta simplesmente verificarmos se o ponto de registro, menos metade
da largura da bola, ultrapassou a borda esquerda.
var _dx:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular(event:Event):void
{
this.x += _dx;
if (this.x this.width / 2 > 500)

88

Aula 13 - Fisica do jogo.indd 88

02/12/2010 13:03:00

W e b

G a m e

this.x = 500 this.width / 2;


_dx *= -1;
}
if (this.x this.width / 2 < 10)
{
this.x = 10 + this.width / 2;
_dx *= -1;
}
}

Caso deseje aplicar o mesmo conceito na coordenada do eixo y, observe


o bloco complete do cdigo a baixo:
var _dx:int = 2;
var _dy:int = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular (event:Event):void
{
this.x += _dx; //Responsvel pela bola se mover no eixo X
this.y += _dy; //Responsvel pela bola se mover no eixo Y

if(this.x - this.width / 2 > 500)


{
this.x = 500 - (this.width / 2);
_dx *= -1;
}
if(this.x - this.width / 2 < 10)
{
this.x = 10 + (this.width / 2);
_dx *= -1;
}

if(this.y - this.height / 2 > 500)


{
this.y = 500 - (this.height /2);

Aula 13 - Fisica do jogo.indd 89

89

02/12/2010 13:03:00

W e b

G a m e
_dy *= -1;

}
if(this.y - this.height / 2 < 10)
{
this.y = 10 + (this.height / 2);
_dy *= -1;
}
}

Fico ou Atrito
Fico ou atrito bsicamente uma fora que provoca a reduo do
movimento de um objeto ao longo do tempo. No caso da bola, o ponto
de maior fico provavelmente seria sua coliso com alguma parede.
var _dx:Number = 2;
var _dy:Number = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular (event:Event):void
{
this.x += _dx; //Responsvel pela bola se mover no eixo X
this.y += _dy; //Responsvel pela bola se mover no eixo Y

if(this.x - this.width / 2 > 500)


{
this.x = 500 - (this.width / 2);
_dx *= -.8;
}
if(this.x - this.width / 2 < 10)
{
this.x = 10 + (this.width / 2);
_dx *= -.8;
}

if(this.y - this.height / 2 > 500)

90

Aula 13 - Fisica do jogo.indd 90

02/12/2010 13:03:00

W e b

G a m e

this.y = 500 - (this.height /2);


_dy *= -.8;
}
if(this.y - this.height / 2 < 10)
{
this.y = 10 + (this.height / 2);
_dy *= -.8;
}
}

Gravidade
Existem vrias teorias cientficas a respeito desse tema. A terica mais
aceita para ns que a gravidade basicamente a acelerao do movimento de um objeto, esse movimento, por sua vez, altera a posio
do objeto. Portanto, a gravidade no afeta diretamente a posio de
qualquer objeto, ela s age sobre o movimento do objeto. O exemplo
a baixo reutiliza o exemplo anterior adicionando apenas uma linha de
cdigo:
_dy += 1; //gravidade
Como nenhum objeto capaz de preservar 100% de sua velocidade quando ricocheteia no cho, melhor mudar o cdigo do ricochete para seguinte maneira:
_dy += .9; //gravidade

O exemplo completo pode ser acompanhado a baixo:


var _dx:Number = 2;
var _dy:Number = 2;
bola_mc.addEventListener(Event.ENTER_FRAME,
movimentoRetangular);
function movimentoRetangular (event:Event):void
{
this.x += _dx; //Responsvel pela bola se mover no eixo X
this.y += _dy; //Responsvel pela bola se mover no eixo Y

if(this.x - this.width / 2 > 500)


{

Aula 13 - Fisica do jogo.indd 91

91

02/12/2010 13:03:01

W e b

G a m e
this.x = 500 - (this.width / 2);
_dx *= -.8;

}
if(this.x - this.width / 2 < 10)
{
this.x = 10 + (this.width / 2);
_dx *= -.8;
}

if(this.y - this.height / 2 > 500)


{
this.y = 500 - (this.height /2);
_dy *= -.8;
}
if(this.y - this.height / 2 < 10)
{
this.y = 10 + (this.height / 2);
_dy *= -.8;
}
_dy += .9; //gravidade
}

Vento
O vento simbolizado no Actionscript representa basicamente a acelerao do movimento de um objeto no eixo x, esse movimento, por sua
vez, influencia alterao da posio do objeto. O exemplo a baixo reutiliza o exemplo anterior adicionando apenas uma linha de cdigo bastante
semelhando a aplicao da gravidade:
_dx += .1; //vento

O exemplo completo pode ser acompanhado a baixo:


var _dx:Number = 2;
var _dy:Number = 2;

92

Aula 13 - Fisica do jogo.indd 92

bola_mc.addEventListener(Event.ENTER_FRAME,

02/12/2010 13:03:01

W e b

G a m e

movimentoRetangular);
function movimentoRetangular (event:Event):void
{
this.x += _dx; //Responsvel pela bola se mover no eixo X
this.y += _dy; //Responsvel pela bola se mover no eixo Y

if(this.x - this.width / 2 > 500)


{
this.x = 500 - (this.width / 2);
_dx *= -.8;
}
if(this.x - this.width / 2 < 10)
{
this.x = 10 + (this.width / 2);
_dx *= -.8;
}

if(this.y - this.height / 2 > 500)


{
this.y = 500 - (this.height /2);
_dy *= -.8;
}
if(this.y - this.height / 2 < 10)
{
this.y = 10 + (this.height / 2);
_dy *= -.8;
}

_dy += .9; //gravidade


_dx += .1; //vento
}

93

Aula 13 - Fisica do jogo.indd 93

02/12/2010 13:03:01

W e b

G a m e

Anotaes

94

Aula 13 - Fisica do jogo.indd 94

02/12/2010 13:03:01

W e b

D i r e i t o s

G a m e

A u t o r a i s

Todas as imagens vinculadas na apostila tem funo exclusivamente


pedaggica e todos os direitos esto reservados seus respectivos criadores.
Sonic - SEGA . Registered trademarks or trademarks of the SEGA Corporation.

Crditos
Autor: Willian SantAnna
Diagramao: Willian SantAnna
Arte da Capa: Tiago Sousa; Oskar Alves
Auxiliar de Arte: Tiago Sousa; Oskar Alves
Direitos Autorais - Creditos.indd 95

02/12/2010 13:03:29