Aula 01 - Criando um Game de Tiro

Introdução

 

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

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

Usaremos o Adobe Flash CS3 e ActionScript 2.0
 

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

Depois instalado o flash, você verá algo semelhante a isto:

 

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

Um arquivo fla tem vários Componentes UI:

 

Vamos discutir cada componente em detalhe.

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

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

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

Control> Test Movie (CTRL + ENTER)

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

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

A Timeline

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

  

Molduras e Quadros-chave

Quadros contem conteúdo que o público vai ver na animação. Cada quadro representa um momento de tempo em uma animação.
 

Os retângulos da esquerda são exemplo de quadros. Toda quinta moldura aparece cinza, tornando-os fáceis de contar num ápice. O quadrado vermelho é a sua cabeça. Arrastando-o com o mouse permite que você "movimente" através de seu projeto, visualizando-o como você trabalha, simulando o processo de animação.

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

Estes são exemplos de quadros-chave.

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

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

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

Para adicionar um quadro-chave em branco:

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

Para estender um quadro-chave:

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

Para dividir um quadro-chave:

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

Arrastando e reorganizando keyframes:

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

O painel Biblioteca

 

Símbolos e Instâncias

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

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

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

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

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

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

Tipos Símbolo:

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

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

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

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

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

Até a próxima aula.

Aprenda a fazer um jogo estilo "ARCADE"

Se isso soa familiar, aqui está um curso numa série que irei dividir em 8 aulas que detalham como criar um simples jogo de tiro baseado em Flash a partir do zero. A série original foi desenvolvida pela Kongregate. As aulas para novatos no Flash utilizará dos fundamentos de usar o Flash como uma ferramenta de construção de jogo, e irar explorar os elementos necessários para reunir um jogo de tiro simples e interativo.

Embora a construção de um jogo de arcade simples pode parecer um pouco bobo, as habilidades em Flash que você vai aprender ao longo do caminho são um negócio sério.

Habilidades em Flash são cada vez mais na demanda para diversas atividades, tem quem diga que é ultrapassado e tal mas em diversas áreas de mídia digital e muito usado "SIM SENHOR" e há uma escassez de bons designers Flash no mercado hoje. No entanto, apesar das oportunidades de negócios, muitos designers de impressão migram para o projeto de Flash interativo timidamente.
 

Fique atento dia 10 iniciamos nosso curso. 

Aguardo vocês aqui.

Efeito de neve (Snowflake) com ActionScript 2.0

Hoje tá fazendo um frio dos extremos, então vamos reconhecer esse fato com uma cena de inverno. Neste tutorial, vamos criar um efeito de neve caindo usando o Flash e ActionScript 2.0.

Confira o resultado.

Passo 1: Resumo. Usando uma imagem como plano de fundo, vamos criar um efeito de neve caindo. A neve será definida pelo utilizador MovieClip que serão exportados para ser usado como uma variável. Vamos duplicar e animar este clipe com AS2(Action Script 2).

Passo 2: Abra o Flash e crie um novo arquivo Flash (ActionScript 2.0).

Defina o tamanho do palco para 550 x 400 px, cor do palco #333333 e definir a taxa de quadros de 30fps.

Passo 3: Preparando o fundo.

 Uma cena de neve será necessário para este efeito. Ainda não está nevando no sul do Brasil então você pode escolher uma foto, criar o seu próprio ou adaptar um plano personalizado. Neste exemplo eu usei uma fotografia que encontrei no Google (neve no Brasil?) e acrescentei uma pitada de humor com minha cara feia. kkkkk, vamos continuar.

Passo 4: Importando a Imagem 

Quando você terminar de escolher o fundo volte para o Flash, clique em Arquivo> Importar> Importar para o estágio (File > Import > Import to Stage) e selecione a imagem que você baixou.

Coloque a imagem no centro da fase (CTRL+K) e vá para o passo seguinte. 

Passo 5: Crie o seu floco de neve 

Um MovieClip será usado como um floco de neve, Eu usei  este bitmap floco de neve de base:

Converter o bitmap em um MovieClip, marque a caixa de seleção Export for ActionScript, e nomeá-la floco. Defina o identificador para floco_mc. Alternativamente, você pode criar um novo movieclip chamado flocoé só desenhar um círculo no seu interior, com um preenchimento de gradiente para torná-lo sólido e redondo.

Passo 6: Crie seu AS (ActionScript) ou ação 

Criar um novo layer (camada) nomearemos de AS onde iremos inserir a ação, após ter clicado com o botão direito na camada (layer) existente e escolhido a opção nova  camada (layer) clique com o botão direito no frame (quadro) número 1 e clicando novamente com o botão direito escolha a opção action (ação) e digite o seguinte código:


/**
* Efeito Flocos de Neve
*/

//configurações
var velocidade:Number = 2;
var vento:Number = -2;
var larguraFilme:Number = 550;
var alturaFilme:Number = 400;

criarfloco(_root, 100);


function criarfloco(container:MovieClip, numberOfFlakes:Number):Void
{
//executar um loop for com base nos números de flocos de neve
for (var i = 0; i < numberOfFlakes; i++)
{
//definir variável temporária e anexar a ele o floco de neve da biblioteca
var configuraFloco:MovieClip = container.attachMovie("floco_mc", "floco"+container.getNextHighestDepth(), container.getNextHighestDepth());

//variáveis ​​que irão modificar a neve caindo
configuraFloco.r = 1+Math.random()*velocidade;
configuraFloco.k = -Math.PI+Math.random()*Math.PI;
configuraFloco.rad = 0;

//dando as características de cada floco de neve original
var randomScale:Number = random(50)+50;
configuraFloco._xscale = randomScale;
configuraFloco._yscale = randomScale
configuraFloco._alpha = random(100)+50;
configuraFloco._x = random(larguraFilme);
configuraFloco._y = random(alturaFilme);

//dar o floco uma função onEnterFrame para atualizar constantemente suas propriedades
configuraFloco.onEnterFrame = function()
{
//atualizar posição do floco
this.rad += (this.k / 180) * Math.PI;
this._x -= Math.cos(this.rad)+vento;
this._y += velocidade;

//se ultrapassar fora dos limites, ir para outro lado da tela
if (this._y >= alturaFilme) {
this._y = -5;
}
if (this._x >= larguraFilme)
{
this._x = 1
}
if (this._x <= 0)
{
this._x = larguraFilme - 1;
}
}
}
}

//Botões: para manter um padrão internacional as direções estão em inglês left (esquerda) right (direita) e none (nenhum).
//vento
left_btn.onRelease = function()
{
vento = 2;
}
none_btn.onRelease = function()
{
vento = 0;
}
right_btn.onRelease = function()
{
vento = -2;
}
//Velocidade
slow_btn.onRelease = function()
{
velocidade = .5;
}
normal_btn.onRelease = function()
{
velocidade = 1
}
fast_btn.onRelease = function()
{
velocidade = 3
}

Passo 7: Os Botões 

Crie todos os botões como Movie Clip e coloque sua instance name (nome da ocorrência) de acordo com o botão como segue abaixo:

Vento
left_btn
none_btn
right_btn

Velocidade
slow_btn
normal_btn
fast_btn. 

Passo 8: Resultado 

Estas são as camadas necessárias a primeira nosso ActionScript a segunda nossos botões e textos e o terceiro nosso fundo aqui descrito como background (bg). 

Passo 9: Experimente flocos de neve personalizados 

Você pode modificar o MovieClip do floco de neve para torná-la como quiser, estes são alguns exemplos dos resultados que você pode começar!

conclusão 

Trabalhe com os parâmetros da classe e crie MovieClips personalizados para criar o seu próprio efeito de neve. 

Bem, fico a disposição para esclarecimentos. Qualquer coisa deixe seu comentário.

Até a próxima.

EFEITO NEON

EFEITO NEON


Primeiramente devemos criar um documento novo (CTRL+N) e inserir as medidas conforme as da foto abaixo:

Feito isto, pinte o fundo da camada de preto. V á na barra de menu e clique no botão janela, abrindo as seguintes janelas: Camadas e demarcadores. Agora vá na janelinha que abriu de demarcadores e clique em criar um novo demarcador, conforme mostrado na figura abaixo.

Já podemos então começar a criar nosso neon. Vocês podem fazer qualquer desenho, desde que ele seja de linha e feito dentro da camada de demarcador que criamos no passo anterior.

Vamos criar um vaso com planta, utilizando.

Nosso vaso já esta pronto. Agora vamos começar a aplicar o efeito de neon. Para isso, iremos utilizar a ferramenta pincel (B).

Ainda com a ferramenta caneta (P), selecione a parte do demarcador que você quer aplicar o efeito, segurando CTRL. Mude para a ferramenta pincel (B) e fique atento, tenha certeza que você está com a cor branca e que o pincel está com o diâmetro de "1", opacidade 100% e fluxo também de 100%.

Feito isto, dê enter duas vezes. Nosso demarcador deve estar desta forma.

Ainda com o demarcador selecionado, mude o estilo do pincel para suave e de diâmetro "5". Coloque uma cor de sua preferência, é claro uma que seja bem forte, para parecer mais ainda com um neon.

Obs.: agora a opacidade é de 80% e fluxo de 60%. Basta você dar enter três vezes. E vamos ver como está nosso neon.

Agora é simples. Mude o pincel novamente para sólido diâmetro "1" e deixe os mesmos valores de opacidade e fluxo. Dê enter três vezes. Feito isso, mude o pincel para suave e diâmetro de "13" com opacidade de 60% e fluxo de 50%. Dê enter duas vezes.

Obs.: Sempre lembrando que os pinceis de valores maiores devem ser aplicados às cores e não à cor branca.

Resultado temporário:

Nosso neon está quase pronto. Estamos na última parte do trabalho. Selecione pela última vez o pincel sólido de diâmetro "1", coloque opacidade 50% e fluxo também de 50%. Dê enter vinte vezes.

Agora pegue também pela última vez o pincel suave de diâmetro "35", opacidade 40% e fluxo 30%. Dê enter 2 ou 3 vezes, de acordo com seu gosto.

Pronto. Basta ir na janela demarcador e deletar a camada de demarcador criada.

Siga os mesmo passos para criar as outras partes do nosso vaso. Vou colocar o meu para vocês terem uma idéia de como ficará bonito e atraente. Usem a imaginação.

Até a próxima!

OVO DE PÁSCOA FLASH CS5

A prática dos ovos de Páscoa foi inspirada por grandes artistas - Leonardo da Vinci, entre eles - que escondiam pequenos segredos em suas obras.

Os Ovos de Páscoa digitais, começaram a aparecer há duas décadas, provavelmente em 1977, embutidos nos cartuchos do game System Atari 2600 e, mais tarde, propagando-se para os micros Amiga e Apple.

 

E vamos conhecer mais um ovo de páscoa, agora do flash CS5

 

1.Abra o Flash CS5

2.Clique em no Menu Ajuda > Sobre o Adobe Flash CS5 Profissional

 

3. Agora na tela que aparece observe que irá se iniciar os créditos movimentando-se de baixo para cima, não precisa fazer nada.

4. Mas agora vem o primeiro Easter Egg (Ovo de Páscoa). Observe que no topo onde temos o nome Adobe Flash... contem 2 simbolos de marca registrada (® ), na palavra ADOBE e na palavra FLASH.

O primeiro pausa os créditos ou faz voltar já o segundo muda novamente a direção ou acelera, cada clique aumenta ou diminui a velocidade. Divirta-se, mas calma ainda não acabou, vamos para o próximo, isso mesmo temos mais de um ovo.

 

5. Agora clique no número 5 do CS5 e verá um slide show rolar com imagens dos programadores e familiares.

 

Legal não é, comentem e se souber algum que não comentamos no blog divulgue pelos comentários. Feliz Páscoa.

OVOS DE PÁSCOA NO FLASH CS3

Estamos recheados de ovos de páscoa no blog, afinal é páscoa. O que é um ovo de Páscoa? Um ovo de Páscoa é um código divertido criado por desenvolvedores e, em seguida, escondidos dentro de um programa. Ovos de Páscoa normalmente consistem em jogos ou outras coisas divertidas, escondidos dentro de programas, incluindo o Flash, o Flash Pro, e as versões do Flash Educacional. A maioria dos códigos escondidos são jogos!

Bem, a má notícia é que os jogos divertidos de versões anteriores do Flash sumiram e desta vez só há uma apresentação de slides de fotos dos desenvolvedores. Bem, aqui está:

Abra o: Programa

Ir para: Ajuda> (HELP) Sobre o Adobe Flash CS3 Professional (ABOUT ADOBE FLASH...)

Clique sobre o segundo simbolo de direitos autorais: ©

Você vai ver uma apresentação de slides se desdobrar a partir da margem direita:

Para voltar à tela normal, clique em à esquerda do slide show.

Como Arrastar e Soltar Objetos....

Bom nesse meu primeiro tutorial vou lhes explicar de forma simples e objetiva um efeito muito usado. Como primeiro passo e com o nosso programa aberto insira uma figura qualquer (caso não tenha pode desenhar um quadrado ou um circulo), depois disso converta ele em MC (Movie Clip, ou Clip de Filme no MX). Tendo feito isso, instancio-o com um nome qualquer (nome desejado). tendo feito isso clique no objeto que vc inseriu no palco e aperte F9 no seu teclado ou vá no menu ("Windows - Action") no MX 2004, no MX ("Janela - Ações").
nomedainstancia.onPress = function () {
starDrag (this);
}
nomedainstancia.onRelease = function () {
stopDrag();
}

entendendo os códigos:

• nomedainstancia = o nome que você instancia o objeto, ou seja, o movie clip.
• onPress = quando o objeto é pressionado.
• function = função que vai exercer a ação.
• startDrag = prende o objeto
• stopDrag = solta o objeto.

OBS.: Se caso quiser mais de uma imagem você terá que criar para cada objeto inserido no campo uma camada e sempre converter o objeto em MOvie Clip. Lembrando também que o action (Ações), é inserido na "FIGURA" e não no FRAME...
Abraços e espero ter ajudado e esclarecido alguma duvida...