NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalArtigosProgweb : Actionscript003
Quer receber novidades e e-books gratuitos?

Jogo - Acerte o Alvo

 

Bem, vocês sabem que o flash é uma ótima ferramenta para o desenvolvimento de jogos, neste tutorial vamos ensinar como criar um jogo simples mais interessante.

 

Um breve resumo sobre o jogo: é o seguinte teremos um alvo representado por um passaro que ficará movimentando-se aleatoriamente pelo documento, onde o nosso mouse será um clipe de filme em forma de mira que ao acertar o passaro este cai dando a impressão que você o acertou. 

 

Pré-requisitos: Conhecimentos básicos em Action Script(programação no flash).

 

1º Passo: Primeiramente crie um novo documento e altere as suas propriedades pressionando a tecla de atalho CTRL+J:

 

550 Largura(Width) x 400 Altura(Height);

Cor de fundo(background color): Preta;

Insira um quadrado usando clicando sobre ferramenta Rectangle Tool(Artigos - Programação Web - Julio Battisti) ou pressionando a tecla de atalho (R) para ativa-lá, desenhe um retângulo sem fundo do tamanho do documento, ou seja, 550 Largura(Width) x 400 Altura(Height);

 

2º Passo: Crie um novo símbolo(new symbol) pressionando a tecla de atalho CTRL+F8 e escolha a opção clipe de filme(movie clip), insira o nome que este clipe de filme receberá na biblioteca através do campo name. Com isso copie do Word e insira no flash as cinco imagens centralizadas no centro do clipe de filme(para centralizar as imagens pressione as teclas de atalho CTRL+K selecione a imagem e escolha centralizar ao centro horizontalmente e verticalmente) localizadas abaixo, de acordo com a explicação:

 

No 1º quadro chave insira a imagem 01;

Insira um 2º quadro chave e insira neste a imagem 02;

No 3º quadro chave insira a imagem 03;

No 4º quadro chave insira a imagem 04;

 

Isto foi feito para dar a impressão de que nosso passaro está voando. Após ter efetuado a inserção das imagens nos seus respectivos quadros chaves selecione na linha de tempo o quadro de numero 7 e aperte a tecla de atalho F6 para repetir a imagem do último quadro no caso o 4º quadro chave.

 

Imagem 01 Imagem 02 Imagem 03
Artigos - Programação Web - Julio Battisti Artigos - Programação Web - Julio Battisti Artigos - Programação Web - Julio Battisti
Imagem 04 Imagem 05  
Artigos - Programação Web - Julio Battisti Artigos - Programação Web - Julio Battisti  

 

Clique sobre quadro chave de numero 7 e selecione imagem contida nele e pressione a tecla de atalho F8 e escolha a opção gráfico(graphic), após isso clique na linha de tempo no quadro de nº 20 e pressione a tecla de atalho F6, selecione o quadro de numero 20 e clique sobre a nossa imagem, clique sobre a ferramenta free transform tool(Artigos - Programação Web - Julio Battisti) ou pressione a tecla de atalho (Q) para ativa-lá rotacione a imagem para que ela fique da seguinte forma:

 

Artigos - Programação Web - Julio Battisti

 

Arraste a imagem para baixo nesta direção até o final do documento, isto vai dar a impressão de quando clicarmos sobre o alvo o mesmo é atingido e conseqüentemente caí. Para isso clique em um quadro qualquer entre o 7º e o 20º e altere a propriedade interpolação(tween) do painel propriedades para movimento.

 

Sua linha de tempo deve ficar como a imagem abaixo:

 

Artigos - Programação Web - Julio Battisti

 

Agora vamos inserir nossas ações neste clipe de filme nos seguintes quadro chaves:

 

No primeiro quadro chave(KeyFrame) vamos inserir o seguinte código:

 

//posição aleatório no eixo x

setProperty("_root.alvo", _x, random(500));

//posição aleatório no eixo y

setProperty("_root.alvo", _y, random(400));

 

Explicação: Este código é responsável por setar a posição x e y do nosso clipe através de uma função random(), função está que dispara aleatoriamente números dentre do intervalo passado como parâmetro.

 

Insira no quadro chave(KeyFrame) de número 7 o seguinte código:

 

//posição aleatório no eixo x

setProperty("_root.alvo", _x, random(500));

//posição aleatório no eixo y

setProperty("_root.alvo", _y, random(400));

//vai para o quadro de numero 1 e executa a partir deste

gotoAndPlay(1);

 

Explicação: Este código só tem uma diferença com relação ao código anterior, que é a ação gotoAndPlay() que tem como parâmetro o quadro que a animação deve ir e continuar a execução a partir deste.

 

E para finalizar está animação insira no quadro chave de número 20 a ação:

 

//vai para o quadro de numero 1 e executa a partir deste

gotoAndPlay(1);

 

Explicação: Ao chegar no final da animação deve voltar ao seu inicio onde será disparada uma posição x e y aleatória.

 

Feito isto volte a cena principal. E pressione a tecla de atalho F11 para acessar os objetos da biblioteca e clique e arraste para o palco o clipe de filme do passaro e lhe de o nome de alvo nome este que será usado na nossa programação como mostrado no código anterior. Teste a animação através do pressionamento das teclas CTRL+ENTER e verifique se o clipe de filme alvo está se posicionando aleatoriamente na tela, caso esteja ok vamos prosseguir.

 

Agora criaremos três variáveis que serão usadas na nossa animação, com os seguintes nomes:

 

contador – armazena os pontos do usuário quando este acerta o alvo.

posx_m – armazena a coordenada x do clipe de filme da mira.

posy_m - armazena a coordenada x do clipe de filme da mira.

 

Para criar estas variáveis selecione a ferramenta text tool(Artigos - Programação Web - Julio Battisti) ou pressione a tecla de atalho (T) para ativa-lá, feito isso desenhe no documento o comprimento de visibilidade do conteúdo de sua variável, não se esqueça de alterar a cor da variável e as suas propriedades como indicado na figura abaixo:

 

Artigos - Programação Web - Julio Battisti

 

Crie as três variáveis com o nome indicado acima e de acordo com a figura e as alinhe de acordo com a sua preferência pelo documento.

 

3º Passo: Copie e cole do Word a seguinte imagem que será usada como mira:

 

Artigos - Programação Web - Julio Battisti

 

Altere o seu tamanho para width(largura) = 63 e  height(altura) = 52, pressione a tecla de atalho F8 e escolha a opção clipe de filme(movie clip) para converter a imagem em um clipe filme, está imagem será a imagem que conterá o código do nosso jogo, não se esqueça de inserir o nome do nosso clipe de filme selecionando o clipe de filme da mira e pressionando as teclas de atalho CTRL+F3 para exibir o painel de propriedades se este não estiver ativo e insira o seguinte nome para o clipe de filme da mira: cursor.

 

Agora pressione a tecla de atalho F9 para exibir a área de programação e insira o seguinte código na seqüência do tutorial no clipe de filme da mira(cursor):

//ao carregar o clipe de filme

onClipEvent (load) {

//seta a variavel que armazena os pontos com zero

_root.contador = 0;

//seta a variavel que armazena a posição da mira com zero no eixo x

_root.posx_m = 0;

//seta a variavel que armazena a posição da mira com zero na eixo y

_root.posy_m = 0;

//oculta o mouse

Mouse.hide();

//delimita a area de movimento do mouse ao tamanho do documento

startDrag(this,true,0,0,490,350);

/* cria uma instancia(c) para alterar o cor da mira quando esta colidir com o passaro*/

c = new Color(this);

}

 

Explicação: Ao carregar(onClipEvent (load)) o clipe de filme da mira, a variável contador responsável por armazenar os pontos do usuário quando este acerta o passaro é inicialmente definida como zero pois o jogo começou e ele não possui nenhum acerto, as variáveis posx_m e posy_m são responsáveis por armazenar as posições x e y da nossa mira e inicialmente são definidas como zero, porque o alinhamento do nosso clipe de filme da mira deve ficar centralizado no meio do nosso documento na posição x=245.4 e y= 176.0, para que as coordenadas mostradas sejam corretas. O método startDrag(this,true,0,0,490,350) é responsável por deixar a mira como sendo o nosso cursor personalizado e ainda defini uma área de atuação da nossa mira a primeira coordenada 34 defini até onde a mira pode movimentar-se na esquerda, e a coordenada 29 defini até onde a mira pode movimentar-se na parte superior do documento, a coordenada 516 define até onde a nossa mira pode movimentar-se na direita e para finalizar a coordenada 372 define até onde a mira pode movimentar-se na parte inferior do documento. Para finalizar este trecho de código criamos uma variável com o nome de c que será uma instância da classe Color que será usada para mudarmos a cor do nosso clipe de filme da mira.

 

4º Passo: Insira o seguinte o código abaixo:

 

//ao pressionar o mouse

onClipEvent (mouseDown) {

//se a mira colidir com o alvo e o quadro atual do alvo for menor que 8

if (this.hitTest(_root.alvo) == true && _root.alvo._currentframe<8) {

//move o clipe de filme do passaro para o quadro 8 - derruba o passaro

_root.alvo.gotoAndPlay(8);

//incrementa a variável que armazena a quantidade de pontos

_root.contador += 10;

}

}

 

Explicação: Ao clicar com o mouse será detectado através da função(hitTest())que tem como parâmetro o clipe de filme do passaro(_root.alvo) se a mira representada na chamada da função através do código(this) colidiu com o clipe de filme do passaro(_root.alvo), esta função retorna verdadeiro(true) no caso da colisão ser verdadeira(true), e se o clipe de filme corrente do alvo for menor que 8 ou seja, só será constado como acerto quando atingir o passaro e este estiver batendo assas e não caindo. Se estas duas condições forem verdadeiras, o clipe de filme do passaro vai para o quadro de número oito e prossegue a animação a partir deste, o intervalo do quadro 8 até o quadro de número 20 é responsável por representar a queda do passaro. E a cada acerto nos contabilizaremos 10 pontos a mais para o usuário.

 

5º Passo: Bem vamos inserir o nosso último trecho de código do nosso jogo:

 

//Fica a todo o momento checando

onClipEvent (enterFrame) {

//pega a posição x da mira de acordo com o centro do documento

_root.posx_m = parseInt(this._x)-277;

//pega a posição y da mira de acordo com o centro do documento

_root.posy_m = 202 - parseInt(this._y);

////se a mira colidir com o alvo e o quadro atual do alvo for menor que 8

if (this.hitTest(_root.alvo) == true && _root.alvo._currentframe<8) {

//deixa a cor da mira vermelha

c.setRGB(parseInt("ff2211", 16));

} else {

//deixa a cor da mira normal

c.setRGB(006633);

}

}

 

Explicação: Este trecho de código é responsável por pegar as coordenadas x e y do nosso clipe de filme da mira através das propriedades(_x e _y) as subtrações e adições que são feitas nas coordenadas(x e y) do clipe de filme da mira são responsáveis por deixar a mira inicialmente na posição x = 0 e y = 0. A mesma condição de detecção de colisão é feita novamente só que agora com um intuito diferente que é o seguinte: quando a mira colidir com o passaro e este estiver voando a cor da mira ficará vermelha indicando colisão, caso a mira não colida com o clipe de filme do passaro esta ficará azul.

 

Se alguém estiver interessado nos arquivos executáveis é só me mandar um e-mail(fabianounipam04@yahoo.com.br) solicitando tais arquivos

Untitled Document
ASP BÁSICO
1 Cálculo de Frete Internacional com ASP e Access
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 1
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 2
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 3
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 4
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 5
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 6
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 7
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 8
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 9
1 Sistema de Login com ASP 3.0 usando três camadas – Parte 10
1 ASP 3.0 utilizando 3 camadas - Parte 1
1 ASP 3.0 utilizando 3 camadas - Parte 2
1 ASP 3.0 utilizando 3 camadas - Parte 3
COLDFUSION
1 Criando um formulário em Flash usando o ColdFusion MX 7
FLASH - ACTIONSCRIPT
1 Movimentar objeto – Parte 01
1 Movimentar objeto – Parte 02
1 Jogo – Acerte o Alvo
1 Como Movimentar um Objeto utilizando Botões
1 Exibir frases Aleatórias
1 Ações Básicas do ActionScript
1 Criando Botões com MovieClip no Flash
1 Criando Links em Botões Flash
1 Integrando Flash com Fireworks na Criação de Botões
1 Interpolação Motion (Movimento)
1 Interpolação Shape (Forma)
1 Principais Eventos do Mouse (Flash/ActionScript)
1 Criando Máscaras no Flash (Mask) Parte 1
1 Criando Máscaras no Flash (Mask) Parte 2
1 Galeria de Fotos Carregando Arquivos Externos (Flash e ActionScript)
PHP BÁSICO
1 Introdução ao PHP
1 Lógica em PHP
1 Trabalhando com Formulários HTML
1 Utilizando Arquivos – Criando um Scrap Book
1 Banco de Dados em Arquivos Texto
1 PHP - Sistema de busca de preços - Parte 1
1 PHP - Sistema de busca de preços - Parte 2
1 PHP - Sistema de busca de preços - Parte 3
1 PHP - Sistema de busca de preços - Parte 4
1 PHP - Sistema de busca de preços - Parte Final
1 Primeiros Scripts
1 Guardando dados em memória
1 Um pouco mais sobre variáveis
1 Manipulando variáveis
1 Estruturas de controle - Parte 1
1 Estruturas de controle - Parte 2
1 Estruturas de controle - Parte 3
1 Estruturas de controle - Parte 4
1 Estruturas de controle - Parte 5
1 Criação de Funções no PHP
1 Funções – Um pouco mais Sobre Parâmetros - Parte 1
1 Funções – Um pouco mais Sobre Parâmetros - Parte 2
1 Funções – Alguns Truques
1 Funções – Últimos Truques
1 Arrays – Noções Básicas
1 Arrays – Um pouco Mais Sobre Criação de Arrays
PHP COM BANCO DE DADOS
1 Criando um Sistema Ficha Cadastral Clientes - Parte 1
1 Criando um Sistema Ficha Cadastral Clientes - Parte 2
1 Criando um Sistema Ficha Cadastral Clientes - Parte Final
1 Controle Horarios Funcionários - Parte 1
1 Controle Horarios Funcionários - Parte 2
1 Controle Horarios Funcionários - Parte 3
1 Controle Horarios Funcionários - Parte 4
1 Controle Horarios Funcionários - Parte 5
1 Controle Horarios Funcionários - Parte 6
1 Controle Horarios Funcionários - Parte 7
1 Controle Horarios Funcionários - Parte 8
1 Controle Horarios Funcionários - Parte 9
1 Controle Horarios Funcionários - Parte 10
1 Controle Horarios Funcionários - Parte 11
1 Controle Horarios Funcionários - Parte 12
1 Controle Horarios Funcionários - Parte 13 - Conclusão
1 Instalando o PHP no Windows XP
1 Instalando o MySQL no Windows XP
1 Sistema Controle Extintores -Parte 1
1 Sistema Controle Extintores -Parte 2
1 Sistema Controle Extintores -Parte 3
1 Sistema Controle Extintores -Parte 4
1 Sistema Controle Extintores -Parte 5
1 Sistema Controle Extintores -Parte - Conclusão
1 PHP - Controle dos Correios - Parte 1
1 PHP - Controle dos Correios - Parte 2
1 PHP - Controle dos Correios - Parte 3
1 PHP - Controle dos Correios - Parte 4
1 PHP - Controle dos Correios - Parte 5
1 PHP - Controle dos Correios - Parte 6
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 1
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 2
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 3
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 4
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 5
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 6
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 7
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 8
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 9
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 10
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 11
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 12
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 13
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 14
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 15
1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 16
JAVASCRIPT BÁSICO
1 JavaScript Básico - Lição 1
1 JavaScript Básico - Lição 2
1 JavaScript Básico - Lição 3
1 JavaScript Básico - Lição 4
1 JavaScript Básico - Lição 5
1 JavaScript Básico - Lição 6
1 JavaScript Básico - Lição 7
1 JavaScript Básico - Lição 8 - Instruções If e Else
1 JavaScript Básico - Lição 9 - Tópicos Diversos
1 JavaScript Básico - Lição 10 - Objetos Math e Date
1 JavaScript Básico - Lição 11 - Trabalhando com o objeto Browser
1 JavaScript - Criando Seus Próprios Objetos
1 JavaScript - Virtual Earth – Primeiro Passo
1 JavaScript - Virtual Earth – Segundo Passo
Quer receber novidades e e-books gratuitos?

Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

Todos os direitos reservados, Júlio Battisti 2001-2021 ®

[LIVRO]: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2010 - PASSO-A-PASSO

APRENDA COM JULIO BATTISTI - 1124 PÁGINAS: CLIQUE AQUI