[Flash Lite] Criando um jogo em FLASH Mobile

Programa utilizado:
Macromedia Flash 8

Preparativos:
Criar 3 imagens ou pegar na net
• 1 Arvóre (Nome:Tree)
• 1 Prato (Nome: Plate)
• 1 Maça (Nome: Apple)
(Recomendavél salvar em PNG)

Iniciando o Projeto:

Código:

Nota 1. Frames e Layers Quem já utilizou algum aplicativo de edição de imagens, como Adobe Photoshop, Corel Draw, etc. provavelmente já está familiarizado com o conceito de “layers”.
Layers são camadas invisíveis de contexto gráfico colocadas umas sobre as outras,
que podem ser usadas de forma independente, permitindo a criação de animações nas
quais os elementos de uma camada movem-se independentemente
dos elementos das outras

1º: Frames, no contexto do Flash Lite, são semelhantes aos quadros de um filme ou desenho animado: em cada um dos quadros, os objetos estão em uma posição ligeiramente diferente, o que permite, durante a projeção em velocidade normal (24 frames por segundo) que se tenha a ilusão de animação ao invés de vários quadros estáticos.


2º: Para iniciar o desenvolvimento de nossa aplicação, inicie um novo projeto, clicando em “Global Phones”, sob “Create from Template” na tela inicial da ferramenta Flash 8, conforme exposto na Figura 2. No diálogo que se segue, selecione a opção “Flash Lite 1 – 1 – Symbian Series 60”. Utilizaremos esta opção por ser a plataforma de smartphones que contém o maior número de dispositivos no mercado. Além disso, os dispositvos Series 60 contém tamanhos de tela maiores e com melhor resolução, o que facilitará o teste e a visualização de nossa aplicação. Pressione “Ok”. A tela resultante deve parecer-se com a que está exposta na Figura 1. O lado direto pode apresentar um conjunto de painéis um pouco diferentes, mas não há necessidade de se preocupar com isso agora.

3º: o utilizar os templates de aplicações para telefones, a ferramenta Flash automaticamente configura o tamanho da tela adequado e formata o esqueleto de código para uma aplicação móvel. Mesmo que o tamanho de tela seja definido para 176x208 (você pode ver isto no Inspetor de Propriedades – Figura 1, na parte de baixo da tela), você pode executar a mesma aplicação em dispositivos com tamanhos de tela diferentes. O player Flash Lite redimensionará os elementos automaticamente para que preencham o novo tamanho de tela definido. Para melhor visualização dos gráficos, nossa aplicação será desenvolvida para o formato de tela 240x320. Para fazer tal configuração, pressione o botão Size: 176x208 no inspetor de propriedades e mude o tamanho de tela para 240x320.

Salve a aplicação resultante com um nome de arquivo descritivo (como “apple_game.fla”). O formato “.fla” é o utilizado na fase de desenvolvimento de uma aplicação Flash Lite. Quando uma aplicação é compilada e está pronta para ser instalada em um dispositivo móvel, o formato do arquivo é o tradicional “.swf”.

4º: Você pode agora testar esta aplicação em branco utilizando um emulador. Durante o processo de desenvolvimento é recomendado testar a aplicação regularmente e utilizar vários emuladores diferentes (pelo menos para os telefones para os quais você está desenvolvendo). Testar uma aplicação é bem fácil, basta selecionar “Test Movie” sob o menu “Control” ou pressionar o atalho “Ctrl + Enter” em seu teclado. Você deverá ver uma tela em branco (sua aplicação ainda não contém nada) mostrada no emulador padrão da ferramenta (em nosso caso, o Nokia 7610).

Ao testar sua aplicação, a seguinte mensagem de erro será mostrada:

Código:

FTPS030: FSCommand2 FullScreen command not supported in the emulator, please
test it on the device.

5º:Esta mensagem é mostrada porque a ferramenta automaticamente insere o seguinte comando no primeiro frame da aplicação:

Código:

fscommand2("FullScreen", true);

6º: Este comando é suportado apenas nos dispositivos reais, não no emulador. Por isso, não há necessidade de se preocupar com a mensagem, já que as aplicações executam em tela cheia por padrão, nos emuladores, e o comando é aceito normalmente nos aparelhos reais.

Neste ponto, você também pode editar a lista de emuladores nos quais você pretende testar sua aplicação, selecionando “Device settings...” no menu “Device emulation -> Test device”, conforme mostrado na Figura abaixo.


7º: Isto provoca o aparecimento do diálogo “Device Settings” (mostrado na Figura 4), que você pode utilizar para selecionar telefones da lista disponível no lado esquerdo (“Available devices”) e adicioná-los à lista de dispositivos simulados (“Test devices”) no lado direito.


8º: Adicione algum emulador com a resolução de 240x320 (por exemplo, Nokia N73) e configure-o como emulador padrão para sua aplicação.

A partir desta janela você poderá baixar e instalar novos emuladores de dispositivos direto do site da Adobe, clicando no link “Check for new devices” no canto inferior esquerdo da caixa de diálogo. Depois que os novos emuladores estiverem instalados, você deve reiniciar a ferramenta.

Código:

Nota 2. Download de novos emuladores
Ao clicar no link “Check for new devices”, você será levado ao site “Device
Profile Updates” (Atualizações dos perfis de dispositivos), que contém
vários pacotes de emuladores, os quais você pode baixar e instalar
localmente. O emulador do Nokia N73, usado neste tutorial, está
disponível no pacote “Mobile Device Profile Update #4”.

9º: Utilizar layers para organizar os elementos visuais, como: botões, campos de texto, gráficos e trechos de código Actionscript, é sempre uma boa idéia. Para este jogo, nós criaremos alguns novos layers na timeline (linha do tempo) principal (a aplicação de template já contém um layer para Actionscript e outro para o conteúdo). Para isso, clique duas vezes sobre o layer “Content” e troque seu nome para “CampoPontuação”. A seguir, crie cinco layers adicionais com os nomes: Botão, Maçãs, Prato, Árvore e Background. Os layers devem estar nesta mesma ordem, de baixo para cima (primeiro Actionscript, depois CampoPontuação, Botão, Maçãs e assim por diante). Esta ordem será usada para desenhar os layers na tela.

O próximo passo é criar alguns keyframes para o layer de Actionscript na timeline. Para isso, selecione o frame 2 no layer Actionscript e selecione a opção “Insert --> Timeline --> Keyframe”. Repita este passo com o frame 3. A diferença entre um frame e um keyframe é que o segundo permite a adição de Acrionscript e objetos, o que não é possível nos frames normais.

O último passo na edição da timeline é certificar-se de que todo o conteúdo no primeiro frame em outros layers ainda será visível durante outros frames. Selecione o frame 3 em todos os outros layers e selecione “Insert --> Timeline --> Frame”. Este procedimento garante que o código Actionscript a ser inserido nos keyframes 2 e 3 sejam executáveis e válidos em todos os outros layers.

A seguir desenharemos e importaremos os gráficos necessários à aplicação. Para isso, selecione o primeiro frame do layer “Background” e desenhe um retângulo azul-claro na tela, para representar o céu, e um pequeno retângulo verde na parte de baixo da tela para representar grama. Então, selecione o primeiro frame do layer Árvore, e selecione “File--> Import --> Import to Stage...”. Selecione o arquivo tree.png. árvore será maior do que a área da tela, portanto você deve utilizar a ferramenta Scale para redimensionar a árvore de modo que ela caiba na área de desenho. Ajuste o retângulo da grama para coordená-lo com a colocação da árvore.

O próximo passo é importar o prato usado para pegar as maçãs que caem da árvore. Selecione o primeiro frame do layer Prato, importe o gráfico “plate.png” para a tela, e redimensione-o para um tamanho adequado. Para que possamos controlar sua posição e aparência, precisamos transforma-lo em um objeto Movie Clip, que nada mais é do que um objeto animado que possui sua própria timeline, e pode ser reutilizado em outras partes (layers e frames) de uma aplicação Flash. Para tal, clique com o botão direito sobre o gráfico e selecione “Convert to Symbol...” no menu pop-up. Defina o tipo como “Movie clip” e defina o nome do objeto como “mcPlate”. Pressione “Ok” e note como o objeto “mcPlate” é inserido na Library (biblioteca de símbolos). Renomeie a instância do símbolo Prato que está na tela para “plate” (utilizando o Inspetor de Propriedades) e posicione-o nas coordenadas (8,294). Note que as coordenadas corretas para sua aplicação podem ser um pouco diferentes, dependendo do nível de redimensionamento aplicado ao objeto gráfico importado para a aplicação.

Finalmente importaremos o gráfico para a maçã. Selecione o primeiro frame do layer Maçãs, importe o gráfico “apple.png” para a tela e redimensione-o para um tamanho adequado. Novamente necessitamos criar um “Movie clip” para o símbolo (pelos mesmos motivos: controlar a posição e definir uma animação). Chame-o de “mcFruit” e defina o parâmetro “Registration” para o canto inferior esquerdo (isso é para facilitar o posicionamento da maçã caída no solo com a maçã que está caindo; o procedimento será detalhado mais à frente). Renomeie a instância que está na tela para “apple”. Arraste a maçã para fora da área de desenho. Sua aplicação agora deve estar semelhante à tela da Figura 5 (note como a maçã está fora da área de desenho).



10º: Agora adicionaremos uma parte do código-fonte da aplicação. Na timeline principal, selecione o primeiro frame do layer Actionscript, clique com o botão direito e selecione “Actions”. Note que já existem algumas linhas de código neste frame. Substitua este código com o que está contido na Listagem 1. O significado das variáveis é explicado nos comentários.

Código:

// define que a aplicação será executada em tela cheia (fullscreen)
fscommand2("FullScreen", true);
 
// define a posição do prato (0..3 significando quatro posições)
plateX=0;
 
// tempo decorrido entre a queda de duas maçãs
// para tornar o jogo mais rápido, defina um valor menor para timer
// make 15 smaller and increase 10 to increase the variation
timer=15+random(10);
 
// contador para o total de maçãs
counter=0;
 
// escore total, incrementado a cada maçã recolhida
score=0;

Agora, selecione o segundo frame do layer Actionscript. Coloque o código da Listagem 2 neste frame. Este código cria uma nova maçã em uma das quatro posições aleatórias (você talvez precise refinar o cálculo das coordenadas para se adequar ao layout da sua aplicação) após o tempo definido entre as quedas passar. O controle da animação é então passada ao próprio objeto “maçã”.

Código:

timer++;
apple._visible = false;
if (timer == 24) {
    timer = 0;
    count++;
    duplicateMovieClip("apple", "apple" add count, count);
    appleX = random(4);
    setProperty("apple" add count, _x, 20+(appleX*50));
    tellTarget("apple" add count)
    {
        gotoAndPlay(2);
    }
}

11º: Finalmente, digite o código da Listagem 3 no terceiro frame do layer Actionscript. O propósito deste código é criar um loop infinito para executar o código do frame 2 de forma repetida.

Código:

gotoAndPlay(2);

12º:A esta altura, se você testar sua aplicação no emulador, você verá maçãs aparecendo na árvore e o prato sob a mesma, mas as maçãs ainda não estão caindo e você não pode mover o prato em nenhuma direção.

Para que possamos controlar o prato, criaremos um botão invisível, que será usado para capturar o pressionamento de teclas e mover o objeto de acordo com a direção escolhida. Para isso, selecione o primeiro frame do layer Botão e selecione “Insert --> New Symbol...” Selecione o tipo “Button” e lhe dê o nome de btMoves. Desenhe um retângulo de qualquer tamanho no estado “Up” do botão. Retorne à timeline principal, clicando na opção “Scene 1” sobre a mesma. Clique no painel direito “Library” e arraste uma instância do botão btMoves para a tela (stage) mas coloque-o fora da área de desenho. Desta maneira o usuário não poderá ver ou selecionar o botão, mas o mesmo poderá ser usado para capturar o pressionamento de teclas. Clique sobre btMoves botão direito, escolha “Actions” e digite nele o código da Listagem 4.

Código:

on (keyPress "<Left>") {
    if (_root.plateX>0) {
      _root.plateX--;
    }
    setProperty("plate", _x, 8+(50*_root.plateX));
}
 
on (keyPress "<Right>") {
    if (_root.plateX<3) {
        _root.plateX++;
    }
    setProperty("plate", _x, 8+(50*_root.plateX));
}

13º: Se você tiver feito tudo corretamente até agora, você será capaz de mover o prato para a direita e a esquerda ao testar a aplicação no emulador. Você pode criar os pressionamentos de tecla tanto clicando sobre o botão direcional do emulador na direção desejada, ou usando as teclas direcionais do próprio teclado do seu computador.

O ultimo passo na timeline principal é adicionar a pontuação. Selecione o primeiro frame do layer CampoPontuação e desenhe um campo de texto (com a ferramenta Text Field) perto do topo da árvore. No inspetor de propriedades, assegure-se de que o tipo do campo é “Dynamic Text”. Isto permite que o conteúdo do campo seja modificado dinamicamente. Para fazer o campo de texto mais visível, aumente o tamanho do texto (para 20, por exemplo) e você também pode criar uma borda ao redor do mesmo. Finalmente, escreva “score” no campo “Var:”. Esta operação associa o conteúdo do campo de texto ao da variável “score”, da timeline principal.

14º: O desafio final é criar a animação da queda da maçã e sua conseqüente colisão com o solo. Então vamos fazer isso?

Para iniciar essa programação, clique duas vezes sobre o objeto “apple” (na tela), o que abre o objeto para edição. Note que a timeline é modificada e passa a mostrar a linha do tempo do próprio objeto “apple” (sim, objetos Flash podem ter suas próprias timelines) e que a linha de título sobre a timeline mostra “mcApple” como título.

Como queremos manter o código Applescript e os gráficos em layers separados, precisamos criar um layer adicional na timeline da maçã. Dê o nome de “Actionscript” ao layer no topo, e “Gráfico” ao segundo layer. Para criar o loop para a queda da maçã e mostrar a maçã no solo por um momento, precisamos criar alguns keyframes nesta timeline. Crie os keyframes em ambos os layers nos frames 2,3,4,7,8 e 11. A razão para a criação desses keyframes exatamente nessas posições será explicada na continuidade desta seção.

O próximo passo é inserir o código Actionscript necessário em cada um dos keyframes do layer Actionscript. Selecione o frame 1 e digite nele o código mostrado na Listagem 5. Este código inicializa a posição da coordenada Y quando da criação de um novo objeto.

Código:

appleY=0;
stop();

A seguir, digite o código mostrado na Listagem 6 no frame 2 e o código da Listagem 7 no frame 3. Estes códigos calculam uma nova posição Y para a maçã que está caindo e passa o controle para dois frames diferentes (“sucess” e “splash”, que criaremos no próximo parágrafo) quando a maçã atinge o solo. Novamente, você necessita refinar o cálculo das coordenadas para fazer com que a maçã apareça nas posições corretas.
Listagem 6

Código:

if (appleY<=18) {
    setProperty("", _y, (120+appleY*10));
    appleY++;
    play();
} else {
    if (_root.plateX == appleX) {
        _root.score++;
        gotoAndPlay("success");
    } else {
        gotoAndPlay("splash");
    }
}

Listagem 7

Código:

gotoAndPlay(2);

Selecione o frame 4 e lhe dê o nome de “success” utilizando o inspetor de propriedades. Repita o procedimento para o frame 8, com o nome “splash”. Estes são os nomes que você usou para se referir aos frames no código do frame 2 (Listagem 6). Finalmente, insira o código da Listagem 8 nos frames 7 e 11. Esta linha de código remove o objeto maçã, mantendo o chão visualmente limpo.

Código para limpeza do solo da aplicação.

Código:

removeMovieClip("");

Pronto, seu jogo em SWF foi criado, agora importe - o em SWF e teste no celular.

Maneiro... Mas e muito dificil

é msm, dificil de mais pra kem naum entende muito...