Tag Archives: tutorial

Flash: Game Tutorials

Uma coisa que facina a mim e acredito que a muitos outros usuários do Flash é a posibilidade de desenvolver jogos bastante interativos com uma certa facilidade.

Então como conhecimento em excesso nunca é o bastante, segue alguns links de Tutoriais sobre criação de jogos (variados) em Flash, e links de experimentos interessantes.

OutsideOfSociety (Tutoriais – Exemplos)
http://oos.moxiecode.com/

Tonypa (Tutoral – Tile Based Games)
http://www.tonypa.pri.ee/tbw/start.html

Strille (Tutoriais)
http://www.strille.net/tutorials/part1_scrolling.php

Andre Michelle (Exemplos)
http://lab.andre-michelle.com/

GotoAndPlay (Tutoriais)
http://www.gotoandplay.it/

GotoAndPlay (Tutorial – Zelda-like Game)
http://www.gotoandplay.it/_articles/2003/10/zelda.php

Tutorialized (Tutoriais)
http://www.tutorialized.com/tutorials/Flash/Games/1

MXStudio (Tutorial Megaman – Parte 1 e 2)
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1128
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1132

GameSheep (Tutorial – Flash Racing Game)
http://www.gamesheep.com/free/flash-tutorials/1-flash-racing-game-1/flash-tutorial-1-1.php

Emanuele Feronato (Tutorial)
http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/

Actionscript.org (Tutorial – Building Games in Flash)
http://www.actionscript.org/resources/articles/52/1/Building-games-in-flash/Page1.html

Flash Dreamer (Tutorial – Into to OOP Game Design)
http://www.freshvision.com.au/blog/index.php/2007/03/27/tutorial-intro-to-oop-game-design/

Flashkit (Tutorial – Scoreboard)
http://www.flashkit.com/tutorials/Games/How_to_c-Nick_Kuh-771/index.php

FlashPerfection (Tutorial – Pong)
http://www.flashperfection.com/tutorials/How-to-Make-the-Game-of-Pong-65527.html

Matheus Prestes (Tutorial – Tiles Map – português)
http://www.freewebs.com/matheusprestes/MapTiles/html/TilesMap.html

Javascript: setTimeout() e setInterval()

Ver post no novo domínio: http://rogeriolino.com/2006/12/19/javascript-settimeout-e-setinterval/

São duas funções interessantes do Javascript, com elas podemos definir um intervalo de tempo que um evento irá acontecer.

A sintaxe das duas funções é idêntica. O que muda é como agem.

Sintaxe:

window.setTimeout(‘funcao()’, intervalo_em_milisegundos);
window.setInterval(‘funcao()’, intervalo_em_milisegundos);

As duas funções irão chamar uma segunda função passada por parâmetro no intervalo determinado também por parâmetro.

Sendo a setTimeout() chamando a função uma única vez. Enquanto a setInterval() chama a função “infinitamente” sempre no mesmo intervalo de tempo.

Para pausar a função usa-se clearInterval(). Passando como parâmetro o nome do seu intervalo.

Ex:

var intervalo = window.setInterval(lerolero, 1000);
function lerolero() {
window.alert(“Popup”);
}
clearInterval(intervalo);

Juntando as duas funções podemos “brincar” fazendo por exemplo um script que simula um sorteio.

Ex:

var intervalo = window.setInterval(function() {
<funcao>
}, 50);
window.setTimeout(function() {
clearInterval(intervalo);
}, 3000);

Explicando: A setInterval() vai executar o que for definido dentro de uma função passada como parâmetro em 50 em 50 milisegundos. Isso durante 3000 milisegundos (3 segundos), que é o tempo definido na setTimeout() para entrar na função que pausa a setInterval.

Deu pra entender né? Veja o script um pouco mais incrementado em funcionamento aqui.

Você pode usar setInterval() para fazer um relógio também. Agora é só deixar com a criatividade de cada um.

mais sobre:

http://javascript.about.com/library/blstvsi.htm

http://www.w3schools.com/js/js_timing.asp

Flash 8 Para quem está começando #1

Ver post no novo domínio: http://blog.rogeriolino.com/2006/09/06/flash-8-para-quem-esta-comecando-1/

Flash Tools

Vamos agora no blog começar a estudar sobre o software Macromedia Flash, que agora pertence à Adobe. No mesmo site pode-se fazer o download da versão Trial do programa.

Para melhor se familiarizar com o Flash vamos dividir esse tópico em algumas partes, sendo esta primeira voltada para a apresentação das ferramentas.

Com o Flash já instalado abra um novo arquivo: file > new… ou CTRL+N. Pode-se também clicar em Create New > Flash Document no splash que aparece ao iniciar o programa. Escolha o que melhor lhe agrade.

Ao abrir o documento novo repare que no lado esquerdo habilita um menu de ferramentas. Que é justamente o menu que iremos estudar agora. Vamos ver os botões nele contido e suas respectivas funcionalidades.

O menu é dividido em 4 (quatro) partes como pode ver na figura ao lado.

A primeira (de cima para baixo), com as ferramentas de criação.

Na segunda ficam as ferramentas de visualização.

Com a terceira aparecem as ferramentas para setar as cores, as paletas.

E na quarta e última, as opções de uso das ferramentas da primeira parte.

Vamos conhecer agora cada uma dessas ferramentas e suas utilidades.

Tools (Ferramentas)

Selection Tool (V)Selection Tool (Ferramenta de Seleção), com ela você seleciona, manipula, arrasta os objetos no palco. Pode selecionar só uma parte do objecto para quaso queira recortar ou editar. Tecla de atalho (V).
Subselection Tool (A)Subselection Tool (Ferramenta de Subseleção) ao selecionar o objeto inteiro você pode editar os pontos de contorno, esticando ou diminuindo só um canto (ponto) do objeto. Tecla de atalho (A).
Free Transform (Q)Free Transform Tool (Ferramenta de Transformações Livres) com o objeto selecionado permite que você altere sua forma, tanto tamanho quanto aparência. Serve também para girar o objeto no palco. Tecla de atalho (Q).

Gradient Transform Tool (F)Gradient Transform Tool (Ferramenta de Transformação do Gradiente) com ela você pode ajustar o tamanho, o espaçamento, ou mudar a direção do gradiente aplicado ao objeto. Tecla de Atalho (F).
Line Tool (N)Line Tool (Ferramenta de Linha) desenhe linhas no palco. Com o shift apertado fixa a direção da reta em 45 em 45 graus. Tecla de atalho (N).

Lasso Tool (L)Lasso Tool (Ferramenta de Laço) seleciona com movimentos do mouse uma parte da figura. Bom para quando quizer selecionar uma área que não seja quadrada ou retangular. Tecla de atalho (L).

Pen Tool (P)Pen Tool (Ferramenta Caneta) para criar formas livres. Com os cliques você marca os pontos e arrastando o mouse defini a curva da linha entre esses pontos. Tecla de atalho (P).

Text Tool (T) Text Tool (Ferramenta de Texto) para adicionar algum texto ao palco. Tecla de Atalho (T).

Oval Tool (O)Oval Tool (Ferramenta para Formas Ovais) desenhe formas ovais no palco, para desenhar um círculo segure o shift enquanto arrasta o mouse. Tecla de atalho (O).

Rectangle Tool (R)Rectangle Tool (Ferramenta de Retângulo) desenhe formas retangulares no palco, para desenhar um quadrado segure o shift enquanto arrasta o mouse. Tecla de atalho (R).

Polystar ToolPolystar Tool (Ferramenta de Polígono) embora esta ferramenta não esteje inicialmente visível no menu, ao pressionar o mouse por alguns instantes sobre a Rectangle Tool aparecerá um submenu para que você escolha uma das duas ferramentas. Sem tecla de atalho.

Pencil Tool (Y)Pencil Tool (Ferramenta Lápis) desenhe a mão livre no palco. Tecla de atalho (Y).

Brush Tool (B)Brush Tool (Ferramenta Pincel) desenhe a mão livre no palco. Sua diferença entre a Pencil Tool é que o resultado é um preenchimento e não uma linha. Tecla de atalho (B).

Ink Bottle Tool (S)Ink Bottle Tool (Ferramenta Frasco de Tinta) ao clicar em cima de um objeto não agrupado adiona-se uma linha em volta do objeto, borda. Tecla de atalho (S).

Paint Bucket Tool (K)Paint Bucket Tool (Ferramenta Balde de Tinta) adiciona um preenchimento à uma linha. Mesmo que não esteje completamente fechada. Tecla de atalho (K).

Eyedropper Tool (I)Eyedropper Tool (Ferramenta Conta-gotas) captura o cor em hexadecimal de qualquer parte do palco e do programa. Tecla de atalho (S).

Eraser Tool (E)Eraser Tool (Ferramenta Borracha) como qualquer outra borracha sua funcionalidade é apagar. Tecla de atalho (E).

View (Visualização)

Hand Tool (H)Hand Tool (Ferramenta Mão) para movimentar o palco mais rápido sem precisar usar as barras de rolagem. Enquanto segura a barra de espaço ela é habilitada. Tecla de atalho (H).

Zoom Tool (Z)Zoom Tool (Ferramenta de Zoom) aumente ou diminua o Zoom do palco. Tecla de atalho (Z) ou (M).

Colors (Cores)

Stroke ColorStroke Color (Cor da Linha) com ele selecionado você escolhe a cor da linha.

Fill ColorFill Color (Cor do Preenchimento) altere a cor do preenchimento da imagem.

Color OptionsColor Options (Opções de Cor) algumas mudanças rápidas que podem ser feitas nos itens acima. Da esquerda pra direita:

Black and White – deixa a linha na cor preta e o preenchimento branco.

No Color – o que estiver selecionado ficará sem cor, transparente.

Swap Color – inverta as cores da linha pro preenchimento e vice-versa.

Todas sem teclas de atalho.

Options (Opções)

Object Drawing (J)Object Drawing (Desenho do Objeto) serve para agrupar as formas ao serem desenhadas no palco. Tecla de atalho (J).

Snap To ObjectsSnap to Objects (Pressão aos Objetos) com esta opção marcada adiciona uma atração entre os objetos. Muito utilizado para alinhar, ou mesmo unir objetos. Sem tecla de atalho.
As demais opções variam conforme qual ferramenta foi selecionada. Servindo para configurar o uso de cada uma. Como por exemplo formato do pincel, suavizar linha