Adobe Flash e não “Flesh”
Bem pessoal sempre levantaram uma questão da pronuncia correta do software da Adobe, o Adobe Flash, muitas pessoas sempre me questionaram eu pronunciar Flash e não “Flesh”. Bem para sanar esse problema, encontrei um vídeo no youtube de uma das pessoas que trabalham com Flash de dentro da própria Adobe em uma conferencia em San Francisco, no qual ele pronuncia claramente: Flash(com a) e não “Flesh”, vocês podem conferir o vídeo abaixo. Recomendo ligar o som bem alto para escutar a pronuncia correta: Adobe FLASH.
Explicando: Adobe Flash é nome próprio e por isso é diferente do “Flash” da câmera fotográfica, por exemplo, no qual pronunciamos “Flesh”.
Criando um jogo Adobe Flash + Actionscript 3.0 (Prog) Part IV
Bem esse é o último post do jogo Quebra-Cabeça. Espero que esse seja o primeiro de muitos jogos a serem desenvolvidos e postados aqui no blog.
Conforme comentado anteriormente, nesse post falaremos mais de Actionscriot, mas antes de iniciarmos os códigos vamos criar o último item de Design do jogo que será as telas de “Start Game”, “Venceu” e “Perdeu”.
Então primeiro eu vou criar uma nova camada acima da Camada de Informações chamada de “Tela de Informações”.
Na sequência também já crio um novo keyframe no quadro 2 da camada Tela de Inicio, afinal não iremos precisar colocar nenhum conteúdo no quadro 1.
Depois com a ferramenta retângulo (Rectangle Tool) vou desenhar um retangulo de forma que ele cubra todos os demais objetos(a cor do retângulo é irrelevante, podendo usar quaisquer cores):
Converto o retângulo em símbolo do tipo MovieClip, para converter o retângulo, com o objeto selecionado:
Menu Modify, Convert to Symbol… ou uso o atalho F8.
Name: telainicio
Registration: Canto superior esquerdo
Vou dar um nome para o retângulo na instance name para que possa encontrá-lo através de Actionscript. Então seleciono o retângulo e coloco como nome na instance name.
Por último com a ferramenta de texto, vou criar uma caixa de texto vazia.
Com as seguintes configurações:
Dynamic Text
Character
Family: _typewriter
Size: 25.0 pt
Cor: cinza (#CCCCCC)
Essas configurações de fonte, tamanho e cor são apenas uma sugestão, podendo se trabalhar com quaisquer outras fontes, tamanhos ou cores.
Centralizo o texto. E por ultimo coloco o seguinte nome da instance name da caixa de texto:
Agora sim vamos para a parte de Actionscript, clico no quadro 2 da Layer Actionscript e em seguida abro o painel de Action:
Menu Windows, Action ou uso o atalho F9.
Agora vamos começar a digitar o Actionscript de todo o jogo. Como o código final agora é bastante grande já vou colocá-lo comentado(ao copiar o código tome cuidado com as aspas, pois ele as inverte).
stop(); // para o script no quadro atual
import flash.utils.*; // importo uma galeria de utilidades do flash
texto_inicio.text=”Como jogar?\n\n\nMonte o quebra-cabeça encaixando as peças antes que o tempo acabe!\n\nPara começar apenas clique na tela.\n\nIniciar Jogo”; // adiciono o texto no texto_inicio;
var soma:Number = new Number(); // crio uma variável chamado soma e tipo ela como número(só pode receber números)
addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //crio um ouvinte de evento quando houver o clique, inicia a função iniciar
function iniciar(Event:MouseEvent):void { //crio a função iniciar, com parâmetro de mouse com retorno nenhum (void)
tempo.text=”2:0″; // gravo dentro do tempo o valor de 2:0, lembrando que esse valor é apenas uma string
soma=0; // seto o valor inicial de soma para 0
pontos.text=”0″; // gravo dentro de pontos o valor de 0, lembrando que esse valor é apenas uma string
inicio.visible=false; //coloco o quadro do inicio como invisível
texto_inicio.visible=false; // faço o mesmo com o texto que está no inicio
inicio.mouseEnabled=false; //Essa função desabilita o mouse sobre o quadro inicio, para que não atrapalhe enquanto trabalho no quebra cabeças
texto_inicio.mouseEnabled=false; //faço o mesmo com o texto, pois se clicar no texto também ocorre o mesmo problema
for (var i = 1; i < 17; i++) { // crio uma repetição, dizendo que i deve iniciar em 1 e enquanto ele for menor que 17 (temos 16 peças), ele aumenta 1
var Totalpecas=getChildByName(“peca”+i); /* crio uma nova variável com o nome de Totalpecas e pego o nome da peça, lembra que demos os nomes de peca1, peca2 e assim por diante, então ele vai pegar o nome “peca” + i(valor de i que vai se repetir 1, 2,3, até 16 */
Totalpecas.x = Math.floor( Math.random() * (stage.stageWidth-100) ); /* coloco cada peça em uma posição x randômica, para que as peças não fiquem sempre na mesma posição dentro do tamanho máximo do meu stage e subtraio o valor de 100, para que as peças não fiquem muito nos cantos, senão assim seria muito fácil */
Totalpecas.y = Math.floor( Math.random() * (stage.stageHeight-100) ); //faço o mesmo com a posição y
Totalpecas.mouseEnabled=true; /* “ligo” a opção do mouse, agora vem a pergunta, porque fiz isso se o padrão é ser true? Simples, mais abaixo no script eu desligo(seto como false) essa opção em determinado ponto e explicarei mais abaixo */
}
var segundos:Number=0; // crio a variável segundos para criar o cronometro e coloco o valor de 0
var minuto:Number=2; // faço o mesmo para minutos, mais com o valor de 2, ou seja tem 2 minutos para montar o quebra-cabeças
var contador:Timer=new Timer(1000); /*crio uma variável chamada contador e tipo como sendo do tipo Timer e coloco o valor padrão de 1000 milisegundos, ou seja, 1 segundo. A cada um segundo ele volta a função para verificar como está o tempo atual */
contador.addEventListener(“timer”, funcTempo); // crio o ouvinte de evento do contator e chamo a função funcTempo
contador.start(); //inicio o Timer, quando se cria uma função do tipo Timer, é necessário que se inicie ela
function funcTempo(ObjTempo:TimerEvent) { /* crio a função funcTempo, passando o parâmetro como sendo do tipo TimerEvent, ou seja evento de tempo */
if (segundos>0) { // executo uma condição onde pergunto se segundos é maior que 0
segundos–; // se for, ele regride 1
} else { // senão
minuto–; //quem regride são os minutos
segundos+=59; //ao regredir um minuto, os segundos volta a valer 59
}
if (soma==80) { //executo uma segunda condição, se a soma for igual a 80(os pontos do jogador), caso o jogador ganhe!
texto_inicio.text=”Você Venceu, Parabéns\n\n\nVocê fez: “+soma+”pontos\n\n\n\nJogar Novamente?”; /* mudo o texto de texto_inicio, \n significa linha de baixo ou pular linha */
inicio.visible=true; //volto a visibilidade do quadro inicio
texto_inicio.visible=true; //também volto a visibilidade do texto
inicio.mouseEnabled=true; //também devolvo a função do mouse de clicar no quadro inicio
texto_inicio.mouseEnabled=true; // faço o mesmo com o texto
removeEventListener(MouseEvent.MOUSE_OVER, pecas); //removo o ouvinte pecas(veja mais abaixo)
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); //também removo o ouvinte pegar
removeEventListener(MouseEvent.MOUSE_UP, soltar); //e o soltar (veja a explicação abaixo)
inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); // volto a adicionar o ouvinte de texto para o quadro inicio
texto_inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //faço o mesmo com o texto
contador.stop(); //se o jogador ganhou, paro o contator
contador.removeEventListener(“timer”, funcTempo); /* e removo o ouvinte de evento, isso é necessário por dois motivos, 1 – descarrega da memoria, liberando espaço, 2 – irá zerar o contador, caso o jogador queira jogar novamente. */
}
if (minuto==0&&segundos==0) { // crio uma outra condição, caso o jogador não consiga montar as peças a tempo, ou seja, perdeu
texto_inicio.text=”Você perdeu, tente novamente\n\n\nVocê fez: “+soma+”pontos\n\n\n\nTentar Novamente?”; // adiciono o seguinte texto
inicio.visible=true; // devolvo a visibilidade do inicio
texto_inicio.visible=true; //faço o mesmo com o texto
inicio.mouseEnabled=true; // e também devolto a função de clicar no quadro inicio
texto_inicio.mouseEnabled=true; //faço o mesmo com o texto
removeEventListener(MouseEvent.MOUSE_OVER, pecas); //removo o ouvinte de evento pecas
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); //também removo o ouvinte pegar
removeEventListener(MouseEvent.MOUSE_UP, soltar); // e o ouvinte soltar
contador.stop(); // paro o contator
contador.removeEventListener(“timer”, funcTempo); /* e removo o ouvinte de evento, isso é necessário por dois motivos, 1 – descarrega da memoria, liberando espaço, 2 – irá zerar o contaro, caso o jogador queira jogar novamente. */
inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //volto a adicionar o ouvinte de texto para o quadro inicio
texto_inicio.addEventListener(MouseEvent.MOUSE_DOWN, iniciar); //também faço o mesmo com o texto_inicio
}
tempo.text=minuto+”:”+segundos; //retorno o valor para a caixa de tempo dos minutos e segundos restantes
}
removeEventListener(MouseEvent.MOUSE_DOWN, iniciar); /*enquanto não acontece nenhuma das condições acima, eu removo o ouvinte de evento iniciar */
addEventListener(MouseEvent.MOUSE_OVER, pecas); /*crio um novo ouvinte de evento, dessa vez com a propriedade MOUSE_OVER, ou seja quando o usuário passar o mouse sobre o(s) objeto(s) ele irá chamar a função pecas*/
}
function pecas(evt:Event):void { //crio a função pecas e passo o parâmetro evt do tipo Event
switch (evt.target.name) { // recupero o nome do objeto em qual o usuário está no momento passando o mouse por cima e pergunto:
case “tempo” : /* caso seja o tempo(campo dynamic de texto), ele não faz nada, imagina você puder ficar arrastanto a contagem de tempo, sem contar que isso poderia prejudicar o script, além de ocasionar erro. */
break; // pare aqui
case “pontos” : // caso seja pontos(campo dynamic de texto), ele também não irá fazer nada
break; //pare aqui
case “espaco1″ : //lembra das nossas peças invisiveis, não é porque elas estão invisiveis que não podem ser selecionadas, fiz isso para as 16.
break;
case “espaco2″ :
break;
case “espaco3″ :
break;
case “espaco4″ :
break;
case “espaco5″ :
break;
case “espaco6″ :
break;
case “espaco7″ :
break;
case “espaco8″ :
break;
case “espaco9″ :
break;
case “espaco10″ :
break;
case “espaco11″ :
break;
case “espaco12″ :
break;
case “espaco13″ :
break;
case “espaco14″ :
break;
case “espaco15″ :
break;
case “espaco16″ :
break;
default : //bem caso não seja nenhuma dessas opções, será o que precisamos
evt.target.addEventListener(MouseEvent.MOUSE_DOWN, pegar); /*não me importa qual peça ele pegou, o importante é que ele selecionou e ao selecionar, ele dispara a função pegar */
evt.target.addEventListener(MouseEvent.MOUSE_UP, soltar); // o mesmo irá ocorrer quando ele soltar a peça
break; //pare aqui
}
}
function pegar(Obj:Event):void { // crio a função pegar
Obj.target.startDrag(); // inicio a opção de poder arrastar a peça enquanto segura o botão do mouse apertado
Obj.target.alpha = 0.6; //também digo que a minha transparência é de 60%
}
function soltar(Obj:Event):void { //crio a função soltar
Obj.target.stopDrag(); //faço o objeto parar aonde o jogador soltou o botão do mouse
var espaco=”espaco”+Obj.target.name.substring(4,6); /*recupero os dois ultimos digitos do nome da peça(exemplo: seleciono a peca1, ele retorna 1, seleciono a peca15, ele retorna apenas 15, isso foi possivel graças ao substring, onde o valor 4, significa que eu quero que ignore os 4 primeiros caracteres pegue apenas a partir do quinto e o número 6 significa que eu quero que pare no máximo até o caracter 6 */
Obj.target.alpha = 1; //volto a transparencia da peça para 100%
var alvo = getChildByName(espaco); /* De posse da informação dos dois ultimos caracteres, eu crio uma variável que vai pegar a string acima “espaco” e vai adicionar os dois ultimos caracteres recuperados, formando assim o então espaco1, espaco2…. até o espaco16 */
if (Obj.target.hitTestPoint(alvo.x+50,alvo.y+50,true)) { /* Depois eu executo uma condição se a peça que o jogador está tentando encaixar está realmente sobre o espaço correto com uma margem de erro de 50, afinal acertar a posição exata de x e y poderia ser algo extremamente complicado */
soma+=5; //caso ele acerte soma +5 pontos
pontos.text = soma+”pts”; // retorno essa informação dentro do dynamic text pontos
Obj.target.mouseEnabled=false; /*a peça já foi encaixada, então desativo a opção de movimenta-la, para não ter um espertinho querendo fazer milhões de pontos */
Obj.target.x=getChildByName(espaco).x; //travo a peça na posição do espaço certo em x
Obj.target.y=getChildByName(espaco).y; //e no y
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); // removo o ouvinte de evento pegar, descarregando da memoria
removeEventListener(MouseEvent.MOUSE_UP, soltar); //faço o mesmo com o ouvinte soltar
} else {
removeEventListener(MouseEvent.MOUSE_DOWN, pegar); /* se ainda não conseguiu encaixar no espaço correto, eu também descarrego o ouvinte da memoria para tornar o jogo mais rápido */
removeEventListener(MouseEvent.MOUSE_UP, soltar); //faço o mesmo com o soltar
}
}
Assim finalizo a última parte do Jogo: Quebra-Cabeças, algumas outras informações:
O meu aquivo .fla ficou com 320Kb
O swf ficou com apenas: 17,9Kb
Ele consome entre 6352Kb e 6380Kb de memóra, ou seja é possivel rodar até mesmo em computadores muito lentos e com pouca memória ram.
Por último o size report do jogo:
quebra-cabecas.swf Movie Report
——————————–
Metadata
——–
Bytes Value
—– —–
1049 <rdf:RDF xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”> <rdf:Description rdf:about=”" xmlns:xmp=”http://ns.adobe.com/xap/1.0/”> <xmp:CreatorTool>Adobe Flash CS4 Professional</xmp:CreatorTool> <xmp:CreateDate>2009-05-21T19:25:16-03:00</xmp:CreateDate> <xmp:MetadataDate>2009-05-28T22:12:13-03:00</xmp:MetadataDate> <xmp:ModifyDate>2009-05-28T22:12:13-03:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about=”" xmlns:xmpMM=”http://ns.adobe.com/xap/1.0/mm/” xmlns:stRef=”http://ns.adobe.com/xap/1.0/sType/ResourceRef#”> <xmpMM:InstanceID>xmp.iid:E4D60591DE4BDE11B4A1AD2E7C4A877D</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:E4D60591DE4BDE11B4A1AD2E7C4A877D</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:6823CA215546DE11A3988B60EAE2E33E</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType=”Resource”> <stRef:instanceID>xmp.iid:31407BC75F4ADE119D74E069E2B7B7C0</stRef:instanceID> <stRef:documentID>xmp.did:31407BC75F4ADE119D74E069E2B7B7C0</stRef:documentID> <stRef:originalDocumentID>xmp.did:6823CA215546DE11A3988B60EAE2E33E</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> <rdf:Description rdf:about=”" xmlns:dc=”http://purl.org/dc/elements/1.1/”> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> </rdf:RDF>
Frame # Frame Bytes Total Bytes Scene
——- ———– ———– —————-
1 15165 15165 Scene 1 (AS 3.0 Classes Export Frame)
2 3261 18426
Scene Shape Bytes Text Bytes ActionScript Bytes
————————- ———– ———- ——————
Scene 1 604 249 3214
Symbol Shape Bytes Text Bytes ActionScript Bytes
————————- ———– ———- ——————
telainicio 34 0 0
peca16 72 0 0
peca15 88 0 0
peca14 88 0 0
peca13 69 0 0
peca12 98 0 0
peca11 109 0 0
peca10 104 0 0
peca9 88 0 0
peca8 87 0 0
peca7 103 0 0
peca6 99 0 0
peca5 83 0 0
peca4 64 0 0
peca3 82 0 0
peca2 81 0 0
peca1 65 0 0
espaco16 0 0 0
espaco15 0 0 0
espaco14 0 0 0
espaco13 0 0 0
espaco12 0 0 0
espaco11 0 0 0
espaco10 0 0 0
espaco9 0 0 0
espaco8 0 0 0
espaco7 0 0 0
espaco6 0 0 0
espaco5 0 0 0
espaco4 0 0 0
espaco3 0 0 0
espaco2 0 0 0
espaco1 0 0 0
Mascara_quadrado 32 0 0
img_fundo 37 0 0
Font Name Bytes Characters
———————- ——— ————–
_typewriter 35
ActionScript Bytes Location
—————— ——–
3214 Scene 1:Frame 1
Bitmap Compressed Compression
———————– ———- ——– ———–
quebra-cabecas.jpg 10004 230400 JPEG Quality=80
Abraços e até o próximo jogo.
Criando um jogo Adobe Flash + Actionscript 3.0 (Design) Part III
O palco deve estar assim agora somente com os contorno e as peças apenas coloridas na parte de fora do palco.
Agora vou posicionar todas as peças sobre os contornos como a imagem abaixo:
Isso será necessário para criarmos uma “rota de colisão”. Como a camada das peças está acima do contorno não será possível mais ver os contornos, isso não será um problema. Em seguida irei selecionar todas as peças e criar uma nova Camada abaixo da Cama Peças, chamando de Peças_invisiveis.
Logo depois crio um novo Keyframe no quadro 2 da camada Peças_invisiveis, pois não é necessário que coloquemos conteúdo no quadro 1. Para inserir um novo quadro, clico sobre o quadro 2 da camada Peças_invisiveis e:
Menu Insert, Timeline Keyframe ou uso o atalho F6.
Na seqüência seleciono todas as peças e copio:
Menu Edit, Copy ou o atalho CTRL + C.
Depois seleciono a layer: Peças_invisiveis (isso é necessário, pois as peças estão em outra layer e ao selecioná-las, ele perde a seleção da layer Peças_invisiveis) e colo as peças no mesmo lugar:
Menu Edit, Paste in Place ou CTRL + SHIFT + V.
Isso será necessário pelo seguinte motivo:
Lógica = Quando a Peça final sobrepuser à peça invisível, o código entenderá que aquela peça foi encaixada sobre a outra.
Bom agora vou transformar todas as peças da camada Peças_invisiveis em Symbol do tipo MovieClip, como também tenho a camada das Peças que são identifica, preciso fazer com que a camada das Peças não me atrapalhe e para isso eu irei torna-a invisível, para fazer isso basta clicar na coluna que tem um Olho da camada Peças. Irá aparecer um X, indicando que a camada Peças está oculta.
E depois vou convertendo peça por peça da camada Peças_invisiveis em Sumbol do tipo MovieClip, para converter(com a peça selecionada):
Menu Modify, Convert to Symbol ou uso o atalho F8.
Vou fazer isso em todas as peças, começando da esquerda para direita e de cima para baixo, com os seguintes nomes:
Name: espaco1, espaco2, espaco3, espaco4 e assim por diante
Registration: Canto superior esquerdo.
Aproveito também para colocar os menos nomes na Instance name(espaco1, espaco2, espaco3, espaco4…) de cada peça e mudar o Alpha para 0% em Color Effect.
Ao terminar as 16 peças do quebra-cabeça, vou agora devolver visibilidade a camada Peças, já que o trabalho foi finalizado em Peças_invisiveis. Para devolver visibilidade, basta clicar no X que apareceu na coluna do olho para devolver visibilidade a camada Peças.
Agora eu vou fazer um trabalho similar com as Peças da camada Peças, com alguns diferenciais, seleciono e irei converter em símbolo do tipo MovieClip, para converter:
Menu Modify, Convert to Symbol ou uso o atalho F8
Name: peca1
Registration: canto superior esquerdo
Também aproveito para colocar o mesmo nome na Instance Name de cada peça.
O diferencial além do nome será colocar a imagem correspondente aquela peça usando mascara.
Para fazer esse trabalho agora, após converter a peça em MovieClip e adicionar a instance name, eu irei editar esse símbolo MovieClip, para editar um símbolo, seleciono a peça já convertida:
Menu Edit, Edit Symbol ou uso o atalho CTRL + E
Essa opção faz com que eu edite o símbolo em uma nova área sem ver as outras peças em volta. Posso editar mais de um símbolo por vez (basta selecionar dois ou mais símbolos).
Menu Edit, Edit Select
O mesmo processo que o Edit Symbol, porém só é possível editar um símbolo por vez.
Menu Edit, Edit in Place
O mesmo processo do Edit Select, porém ele mantém os outros objetos em volta a vista com opacidade.
Essas mesmas opções também se encontram clicando com o botão direito do mouse sobre o símbolo, com um diferencial:
Edit = Edit Select
Edit in Place = Edit in Place do menu Edit
Edit in new Windows = Abre o símbolo em uma nova janela para editar
Para editar um símbolo também posso selecionar ao lado do Zoom(caixa que tem padrão 100% localizado no canto superior direito do palco) tem um botão Edit Symbol(são três figuras, um meio triangulo, um quadrado e um circulo) que tem a mesma propriedade do Edit Symbol do menu Edit. E por último e não menos importante também pode dar um duplo clique sobre o símbolo que ele aciona o: Edit in place.
Ao se editar um símbolo do tipo MovieClip, ele abre uma nova Timeline e também é possível saber que simbolo estou editando vendo na barra de navegação.
Vou criar uma nova layer, ficando com duas layers:
Depois será necessário posicionar a Layer 1 sobre a Layer 2, para fazer isso, basta clicar na Layer 1 e arrastá-la para cima da Layer 2
Agora irei renomear a Layer 1 para Mascara e a Layer 2 para Img_mascarada.
Seleciono a Camada Img_mascarada e pego o gráfico: img_fundo na Library(Biblioteca).
e arrasto até o palco, e encaixo a peça corretamente como abaixo(eu até poderia colocar no eixo x = 0 e eixo y = 0, porém isso só irá funcionar nessa primeira peça, nas demais não irá dar certo):
E para finalizar, irei até a camada Mascara e converto-a em Mask. Para converter em mascara, clico com o botão direito sobre a camada Mascara e escolho Mask.
Feito isso eu consigo o efeito que precisava que essa peça fique com apenas uma parte da imagem.
Bem agora eu volto para a Scene 1 e repito o processo com todas as peças.
Vou repetindo os processos com todas as peças até conseguir esse resultado final:
Para finalizarmos, crio uma nova camada acima da camada de Peças e chamo ela de Informações:
Em seguida adiciono um novo Keyframe no quadro 2 da Layer Informações, para criar um novo Keyframe, clico no quadro 2 da layer Informações:
Menu Insert, Timeline Keyframe ou uso o atalho F6.
Por ultimo, seleciono a ferramenta de texto(no quadro 2 da camada Informações).
Com os seguintes parâmetros:
Static Text
Character
Family: _typewriter
Size: 25.0pt
Cor: Preta (#000000)
Essas são uma sugestão de parâmetros para o texto, pode ser usado quaisquer outros tipos de fonte, cor e tamanho. Escrevo as palavras Tempo: e Pontos: e as posiciono acima das peças.
Ainda com a ferramenta de texto, entretanto dessa vez utilizarei do tipo Dynamic, criarei duas caixas de texto.
Por ultimo adiciono e posiciono uma caixa de texto a frente de Tempo: e a outro a frente de Pontos: e adiciono uma instance name em cada uma das caixas referente aos seus respectivos itens:
Instance name tempo para a caixa de texto que está na frente do texto Tempo:
e Instance name pontos para a caixa de texto que está na frente do texto Pontos:
Assim concluo a parte III do jogo Quebra-Cabeças, no próximo e último post, falarei mais sobre Actionscript e finalizarei o jogo.
Criando um jogo Adobe Flash + Actionscript 3.0 (Prog) Part II
Complementando o post anterior, esse post será mais voltado à parte da programação Actionscript 3.0, embora ainda tenha alguns itens de design para terminar o jogo de quebra-cabeças.
A primeira coisa a fazer é criar uma nova Layer e mudar o nome para Actionscript, lembrando que essa layer deve ficar acima de todas as demais Layers, esse processo é necessário, pois o Adobe Flash carrega as layer de baixo para cima, ou seja, para que ele carregue os objetos primeiros e somente depois acione as ações sobre eles.
Após criar a nova layer, seleciono o quadro um da layer actionscript e abro o painel de Actions:
Menu Window, Action (Atalho F9).
Vou criar agora o “Carregando” do jogo. Para isso vou criar duas novas camadas:
Uma irá chamar Mascara e a outra de Img_mascarada, ambas devem ficar acima da img_fundo apenas.
Em seguida vou selecionar a camada Img_mascarada e colar a imagem nas mesmas posições(x e y)da imagem fundo. Para copiá-la nas mesmas posições:
Menu Edit, Paste in Place ou use o atalho CTRL + Shift + V.
A imagem vai parecer que ganhou mais cor, mas na verdade é porque temos duas imagens uma sobrepondo à outra. Agora sim é que vou fazer com que a imagem da Img_mascarada vai ganhar literalmente cor, mudando o Alpha de 40% para 100%.
No painel de Propriedades em Color Effect mudo o alpha de 40% para 100%.
Depois disso vou selecionar a camada Mascara e criar um quadrado de 240×240 (tamanho do nosso quebra-cabeça e consequentemente da nossa imagem) sem contorno (a cor do preenchimento é irrelevante nesse momento, então pode ser selecionado qualquer cor) e irei posicionar exatamente sobre a imagem.
Agora vou selecionar o quadrado que acabei de criar e converte-lo em simbolo do tipo MovieClip, para converter seleciono e:
Menu Modify, Convert to Symbol ou use o atalho F8 (com o quadrado selecionado).
Name: Mascara_quadrado
Type: MovieClip
Registration: Centro inferior
Obs: Para o efeito funcionar corretamente é extremamente importante colocar o registration exatamente igual ao da foto.
Após converter, com o quadrado ainda selecionado, vou no painel de Propriedades(Properties) e dou o nome na Instance Name de barra.
Agora por último converto a Layer (camada) Mascara em Mask (mascara). Para converter em mascara, clico sobre a Layer (camada) Mascara com o botão direito do mouse e seleciono Mask.
Bom, agora é hora de voltar as Actions e fazer o “Carregando” funcionar. Para isso seleciono novamente a Layer Actionscript e abro novamente o painel de Action(Menu Window, Action ou F9) e adiciono as seguintes linhas de código:
addEventListener(Event.ENTER_FRAME, carregando);
function carregando(Obj:Event) {
var total = stage.loaderInfo.bytesTotal;
var carregado = stage.loaderInfo.bytesLoaded;
var porcentagem = Math.round(carregado*100/total);
barra.scaleY = porcentagem/100;
if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}
Agora vamos entender o código:
A partir do Actionscript 3.0, você deve adicionar toda função em um ouvinte de evento:
addEventListener(Event.ENTER_FRAME, carregando);
Em seguida eu crio a função carregando e adiciono um parâmetro do tipo Event(Obj:Event):
function carregando(Obj:Event) {
Aqui eu cri uma variável e chamo de total e dentro de total eu gravo as informações da quantidade total de bytes que tem o arquivo final, no caso o SWF.
var total = stage.loaderInfo.bytesTotal;
Em seguida crio uma outra variável e gravo dentro dele a quantidade de bytes que já foram descarregados ou seja, já baixaram e gravaram nos temporários da máquina do usuário.
var carregado = stage.loaderInfo.bytesLoaded;
Por último crio uma terceira variável chamada de porcentagem para fazer o calculo em porcentagem da quantidade já descarregada. A função Math.round arredonda o número para que eu não tenha porcentagem fracionada, exemplo: 10,3% passa a ser 10%.
var porcentagem = Math.round(carregado*100/total);
Depois eu pego essa informação e divido por 100 e adiciono a escala Y do quadrado desenhado, fazendo com que ela vá aumentando conforme a quantidade de itens já descarregados, pois a idéia será fazer as peças ganharem cor com a mascara no exemplo.
barra.scaleY = porcentagem/100;
Aqui faço uma condição, onde verifico se a quantidade já descarregada é igual ou maior do que o total, se for, ele irá para o quadro 2 do nosso jogo e irá remover o ouvinte de evento, descarregando assim a função da memória e liberando mais espaço.
if (carregado >= total) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, carregando);
}
}
Fecho as duas chaves e está pronto o “Carregando” do jogo. Agora vou criar o quadro dois no jogo para eventualmente fazer a tela de jogo, pontuação e colocar as peças com as devidas “partes” do quebra-cabeça. Primeiro fecho a tela de actions(Menu Windows, Action ou atalho F9) e depois clico sobre a layer action e para criar um novo quadro:
Menu Insert, Timeline, Keyframe ou uso o atalho F6.
Depois vou clicar na camada da Action e no quadro 2, abro o painel de action(Menu Window, Action ou F9) e adiciono a seguinte Action:
Para que a cena fique parada no quadro 2.
Como não precisamos das peças no quadro 1, vou selecionar o quadro 1 e arrastá-lo para o quadro 2. Para isso eu seleciono o quadro 1, clico novamente, mantenho o botão do mouse apertado e arrasto para o quadro 2.
As layers: Mascara, Img_mascarada e img_fundo não serão necessárias no quadro 2, então irei selecioná-las e removerei os quadro dois, para selecionar o quadro 2 das 3 layers, seguro o SHIFT e vou clicando nos quadros 2 das três layers.
Depois de selecionado, clico com o botão direito sobre qualquer uma das três layer e escolho Remove Frames (remover quadros).
Assim concluo a parte II do Jogo Quebra-Cabeças, no próximo posto devemos voltar mais a parte de design para estruturar as peças, demarcar as partes onde irão a pontuação, o tempo para montar e os outros itens.
Criando um jogo Adobe Flash + Actionscript 3.0 (Design) Part I
Tipo do jogo: Quebra-Cabeças
Objetivo do jogo: Encaixar as peças corretamente antes que o tempo acabe.
Nível do jogo: Fácil
Ferramentas utilizadas: Adobe Flash CS4 e Actionscript 3.0
Iniciando a fase de desenvolvimento:
Primeiramente vamos criar um novo documento no Adobe Flash CS4 usando Actionscript 3.0
Agora vamos conhecer a nova interface do Adobe Flash CS4 e descobrir aonde foram parar tudo.
Esse é o palco(Stage).
Linha de Tempo (timeline)
Painel de Propriedades (properties)
Barra de Ferramentas(tools)
O jogo terá uma interface de 550×400(tamanho padrão).
Primeiramente faremos a tela de carregando e um botão “iniciar o jogo”. O nosso objetivo será já usar o quebra-cabeças montado na “Tela Carregando”.
Na seqüência será preciso criar as peças do jogo, para isso usaremos as ferramentas: Rectangle localizada na barra de ferramentas.
Com a ferramenta Retângulo (Rectangle Tool) desenhe um quadrado, sem contorno com as dimensões de 60×60 (largura x altura), no flash representado por W e H (Width e Height), a cor nesse momento é irrelevante.
Agora duplique o retângulo, para duplicá-lo:
Menu Edit, Duplicate
Menu Edit, Copy e em seguida Menu Edit, Paste
Selecionar e usar o atalho CTRL+D
Logo depois altere a cor do quadrado para outra cor qualquer.
Então o encaixe do lado do primeiro quadrado:
repita o processo até ter uma fileira de quatro quadrados como a imagem abaixo:
E depois faça o mesmo na vertical, ficando com um total de dezesseis quadrados:
É extremamente importante que os quadrados não choquem cores, por isso optei por colocar cada um de uma cor.
Agora vamos criar os encaixes, para isso usaremos a ferramenta Oval (Oval Tool) localizada na barra de ferramentas.
Com a ferramenta Oval (Oval Tool), desenhe um circulo de 25×25(largura x altura):
E então a duplique, ficando com dois círculos iguais.
Selecione o circulo duplicado e então clique no quadro Fill Color (cor de preenchimento, “balde de tinta”).
Você perceberá que seu cursor irá mudar para o Eyedropper Tool (ferramenta conta gotas) e então selecione a cor do primeiro quadro que desenhou, duplique novamente o circulo e então encaixe os dois círculos no primeiro quadrado.
Ao fazer isso você cria a primeira peça do quebra-cabeça e já faz as marcas de encaixe nos outros dois quadrados envolvidos.
Isso acontece porque no flash quando você trabalha com shapes (vetores), ele automaticamente soma um objeto ao outro sem necessidade de soldar, mesclar ou algo do tipo.
Bom, agora basta ir duplicando o circulo e encaixando da forma que você quer que fique o quebra-cabeça como na imagem abaixo.
Agora vamos dar uma imagem para o nosso quebra-cabeça e um contorno para as peças. Primeiro vamos importar uma imagem, a imagem não precisa ter um tamanho especifico, mas para ter um melhor resultado, eu recomendo que a imagem tenha as dimensões de 240x240pixels(tamanho total do quebra-cabeça).
Como não vamos precisar da imagem no palco, vamos importar ela somente para a Biblioteca, para importar uma imagem vá ao Menu File, Import, Import to Library.
Após importar a imagem, selecione todas as peças do quebra-cabeça e duplique uma cópia.
Com as peças ainda selecionadas, vá ao Fill Color (Cor de preenchimento, “balde de tinta”) e mude para uma cor de preenchimento sólido. Em seguida vá ao Menu Windows, Color(Shift + F9) para abrir a paleta Color e com o quadrado selecionado selecione Bitmap e veja o resultado.
Fazendo isso, estamos adicionando preenchimento em um vetor sem acrescentar maior peso ao arquivo final, pois não estamos usando a imagem Bitmap.
Selecione a imagem e clique sobre ela com o botão direto do mouse e escolha a opção: Distribute to Layers, dessa maneira colocaremos a imagem em uma nova layer.
Selecione a imagem novamente e vou convertê-la em um símbolo do tipo gráfico (Graphic), para converter em símbolo do tipo graphic:
Menu Modify, Convert to Simbol… (tecla de atalho F8)
Name: Vou colocar img_fundo
Type: Graphic
Registration: Canto superior esquerdo (que é o ponto inicial da minha imagem, zero no eixo X e zero no eixo Y).
Depois de convertido em gráfico, vou ao painel de propriedades (Properties) e em Color Effect, Style e escolho: Alpha e Alpha amount preencho com o valor de 40 %.
Feito isso, vou colocar contorno em todas as peças. Agora vem a pergunta: “Porque já não ter feito os quadrados com contorno?” Simples: Se eu o fizesse, eu teria mais trabalho, pois ao adicionar o circulo, ele não teria o contorno e se eu adicionasse o circulo com o contorno, mesmo que da mesma cor do quadrado, eu teria o trabalho de tirar parte do contorno, ou seja, eu teria um trabalho a mais.
Para adicionar contorno as peças, selecione a ferramenta Ink Bottle Tool (Frasco de Tinta).
Vou selecionar uma cor que não usei em nenhuma das peças e começarei a clicar em cada uma das peças até a última peça.
Após ter colocado contorno em todas as peças eu vou recortar(Edit, cut ou CTRL + X) o preenchimento, deixando somente o contorno das peças e na seqüência irei renomear a Layer 1 para contorno das peças.
Depois vou criar uma nova Layer(Camada), para criar uma nova camada, clique sobre o ícone: New Layer, localizado no canto inferior esquerdo do painel Timeline e vou renomear como: Peças.
Com a nova layer selecionada vou colar o preenchimento das peças: Edit Paste ou CTRL + V.
E na seguencia irei posicionar os objetos como na imagem abaixo. Como as peças eu ainda não irei usar (lembrando que essa tela ainda é a “Tela Carregando”), vou posicioná-los para fora do palco.
Clico na Layer img_fundo e com a Text Tool (ferramenta de texto) vou escrever a palavra: Carregando…
Configurei o texto com as seguintes especificações:
Static Text
Family: _typewriter
Size: 25 pt
Format: Align Left
Assim finalizo a parte de Design do Jogo: Quebra-Cabeças, no próximo post termino a parte de design e estarei colocando a parte de Programação em Actionscript 3.0.
