quinta-feira, janeiro 07, 2010

Projeto flash - parte 2

Olá a todos.
Desculpem-me o intervalo entre um post e outro, o tempo anda escasso...
Inicio pedindo para que alteremos um pequeno detalhe do post anterior, onde eu pedi para colocarem a camada de ações no modo guide layer, coloquem de volta para o modo normal, no AS3 existem problemas no funcionamento se for colocado assim, então a camada de ações deve ser uma camada comum, ok? não esqueçam de fazer isso logo no início pois se não for feito os códigos não funcionarão.
Este post é quase todo sobre os códigos, iremos deixar a navegação no nosso index funcionando, ou seja ao clicarmos nos botões iremos para o frame específico e criaremos a marcação para identificar em que frame estamos. a parte dos códigos é bem simples e eu vos fazer da seguinte maneira, colo aqui os códigos com os comentários para que vocês possam colar no frame específico e ler os comentários para entender. Agradeço ao Ricardo Teixeira pelos toques sobre o AS3.
Bem, no nosso arquivo, no frame 1 da camada "ações" (depois de ter transformado a camada ações em uma camada comum, desmarcando nas propriedades da camada a opção guide), cole o sequinte codigo:

var carregador:Loader = new Loader();
//criamos um objeto Loader para podermos carregar os arquivos para a timeline principal.

this.addChild(carregador);
//adicionamos o Loader à timeline.

carregador.x=10;
//posicionamos o loader na timeline. Esta posição pode ser alterada posteriormente.

carregador.y=10;
//note uma pequena mudança na sintaxe das posições x e y em relação ao AS2.

Note que está comentado, quando colar o código preste atenção se não vai ser alterada a quebra de linhas, isso poderá fazer não funcionar.


No frame 2 desta mesma camada de ações cole os códigos abaixo:

stop();
//paramos a timeline

/*
Aqui vemos uma mudança significativa do AS2 para o AS3. As ações não podem mais ser aplicadas diretamente aos objetos
apenas podem ser colocadas na timeline e para o controle da timeline criamos uma função que poderá funcionar com qualquer
um dos botões, comento abaixo os comandos para entendermos os detalhes
*/
function anda(evento:MouseEvent):void {// um função agora precisa fazer referência ao tipo de evento queremos manipular
//no caso da nossa função um evento de Mouse, ao ser clicado o mouse chamamos a função.

carregador.unload();
// descarregamos o que quer que esteja carregado no Loader

var botaoClicado:SimpleButton=SimpleButton(evento.target);
// aqui criamos uma variável para identificarmos quem está disparando o evento (chamando a função)

var nomeBotao:String=botaoClicado.name;
//e aqui lemos o nome de quem está chamando a função e criamos outra variável

switch (nomeBotao) {
//criamos um switch tendo como parametro o nome do botão que chama a função
//nos cases abaixo, dependendo do nome de quem chamou a função iremos para o frame especificado.

case "intro_btn" :
//caso o nome do botão clicado seja "intro_btn"

gotoAndStop("intro");
//vamos para o frame "intro"

break;
//o break é bastante importante para que o switch não continue sendo executado sem necessidade.

case "fotos_btn" :
gotoAndStop("fotos");
break;
case "videos_btn" :
gotoAndStop("videos");
break;
case "musicas_btn" :
gotoAndStop("musicas");
break;
case "contato_btn" :
gotoAndStop("contato");
break;
}
}
//aqui abaixo outra grande diferença do AS3, não existe mais onRelease.
//Temos que criar Listenners para os botões. Listenners são como vigilantes, eles disparam eventos conforme sejam ativados
//no caso abaixo, sempre que o botão for clicado (MouseEvent.CLICK) a função anda é disparada
//o botão que dispara a função é identificado pela função a ação é executada conforme o nome do botão.
intro_btn.addEventListener(MouseEvent.CLICK, anda);
fotos_btn.addEventListener(MouseEvent.CLICK, anda);
videos_btn.addEventListener(MouseEvent.CLICK, anda);
musicas_btn.addEventListener(MouseEvent.CLICK, anda);
contato_btn.addEventListener(MouseEvent.CLICK, anda);

Ao colar, muita atenção na quebra de linhas e leiam os comentários para entender como funciona e poder criar suas próprias variações.

Para a marcação é muito fácil, mas voce pode alterar conforme queira no seu layout.
Criei um retângulo da largura dos botões e na camada "marcação" que havíamos criado eu colei este retângulo logo abaixo do nome do botão que leva para o frame onde estamos, então se estamos no frame fotos o retangulo está abaixo do botão fotos e assim por diante. Veja as imagens abaixo:






































































Veja que conforme o frame o marcador fica na posição que permita ao navegante saber onde ele está.
Publique e veja se está funcionando corretamente.
Por hoje é bastante, Abraço a todos.

6 comentários:

junior disse...

E ai Avanzi.
Já esta na Hora das novidades do
photoshop CS4. Valeu.
abraço.

ezekias disse...

Beleza, cara tô acompanhando essa postagem , e tá legal de mais,
valeu!

ezekias disse...

ha, Ezekias ,logo ali Belo Horizonte - MG

UsidaDdesign disse...

Avanzi,
Estou precisando falar com vc a respeito de cursos de photoshop, illustrator e indesign para umas pessoas daqui da Prefeitura do Recife (freelance) vc poderia deixar seu contato? Meu e-mail é o andrews27g@gmail.com e tel.: 3355.8657 (Pref. do Recife)

Carol Dias disse...

Avanzi, gostaria do teu e-mail. podes me passar?

Anônimo disse...

It is remarkable, it is very valuable information