terça-feira, 8 de julho de 2014

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.

sábado, 9 de junho de 2012

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.




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.

sexta-feira, 29 de julho de 2011

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!

domingo, 24 de abril de 2011

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.

sábado, 23 de abril de 2011

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.

domingo, 22 de novembro de 2009

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...

terça-feira, 18 de novembro de 2008

CHUVA - Animação em Flash

Primeiramente abra um novo documento no flash. vá em propriedade(CTRL+J) E ajuste conforme a imagem abaixo...
Crie uma camada e nomei como gota
Após isso com a ferramenta pen tool

Desenhe uma Gota como a de baixo
Arraste a Gota para o topo da imagem conforme mostrado abaixo

transforme a gota em um clipe... para isso aperte F8...

Agora cline na time line, no frame 30 e crie um key frame. aperte F6 para isso.

arraste a gota em linha reta para o ponto inferior da animação...

Clique com o botão direito no frame e clique em Interpolação de movimento.



Pronto a animação da chuva esta pronta.... agora vamos fazer as ondas...
Crie mais uma camada, nomei como onda.
no quadro 30 aperte F7 para adicionar um quadro vazio.

e com a ferramenta Oval Tool faça um circulo com a cor: #0000ff
Transforme a onda para um clipe.

e enseguida clique clique no quadro 45 e faça um key frame. para isso aparte F6.
repita o processo no quado 60

Selecione o quadro 45 e aumente nossa onda um pouco....
Para isso selecione a ferramenta free trasnform tool (ferramenta transformação livre) e aumente a onda com uma proporção....
com a ferramenta Selection tool clique na onda do frame 45.
vá em color mude para alpha e coloque color para alpha e coloque o valor para 44%




selecione a o frame 60. aumente a onda um pouco maior do que o frame 45.
clique com a selection tool e mude tambem para alpha mas agora mude o valor para 22%
entre as frames 30, 45 e 60 clique com o direito e selecione

pronto para testa aperte CTRL + ENTER
Para fazer uma segunta onda basta copiar os frame da layer onda e colar em uma nova camada que deve ficar acima...
Coloque os frames com uma distância direfente.
no frame 45 na nova camada coloque alpha com o valor de 18%
no frame 60 na nova camada coloque alpha com o valor de 10%
no frame 75 na nova camada coloque alpha com o valor de 0%
não esqueça de criar o motion entre as camadas 45,60 e 75
salve e de uma olhada...
Para isso pressione CRTL + D.