menu tsunami com XML

Pré-Requisitos

Macromedia Flash 8, conhecimento avançado de actionscript, conhecimento da sintaxe XML.

Conteúdo

Menus Tsunami são feitos desde o flash 5. Existem muitos para baixar na internet. Mas eu resolvi fazer um porque meu amigo bitubas, um desenvolvedor muito bom, disse que a maioria dos arquivos encontrados na net hoje em dia são muito antigos e não funcionam no Flash 8 porque agora o actionscript está case sensitive. Então esse tutorial é o resultado de uma pesquisa que eu fiz com os menus tsunamis disponíveis na internet. Eu baixei vários, editei e montei meu próprio efeito. Aviso aos navegantes, ele não está 100%, tem um bug ou outro, mas dá pra usar sem problemas. Vamos dá uma olhada no bicho:

Veja que fazer um menu desse é bem simples, mas exige atenção ao tutorial e um pouco de conhecimento de actionscript, principalmente ter fresquinho na cabeça conceitos de _x, _y, _xscale e _yscale. Vamos lá. Crie um filme 215 x 400 com 30 FPS e insira um retângulo 180 x 340 nas posições 17 x 40 (a parte de cima, vc deixa em branco para colocar o cabeçalho que quiser). Se você quiser dar esse efeito blur, basta convertê-lo para movieclip e aplicar um filtro de Blur 5 High quality. Agora crie um MC chamado tsunami insira-o no stage nas posições 20 x 50 e instancie-o como tsunamiMenu. Nele crie um campo de texto dinâmico com instância texto. Escolha a fonte (eu usei NewsGoth Cn BT) e coloque o tamanho 15 em negrito. Coloque Anti-alias for animation e coloque os embeds (?) necessários. Converta esse texto para um MC chamado itens, intancie com o mesmo nome e deixe-o nas posições 0 x 0 do MC tsunami. Ainda no MC tsunami, crie uma nova camada abaixo dos textos. Vá na biblioteca e crie um MC chamado area. Esse MC deve estar em branco. Insira esse MC na camada que você criou nas posições 0×0, instancie-o com o mesmo nome. Agora abra o MC itens e converta novamente o texto para o MC item e instancie-o com o mesmo nome. Até agora, seu stage deve ter seguido essa hierarquia e está segundo a imagem abaixo:

Então. Basicamente isso é tudo que tem pra se fazer no Flash. Agora vamos ao actionscript. Vamos começar com o MC area dentro do MC tsunami:

onClipEvent (load) {
_root.noLimite = “nao”;
}
onClipEvent (enterFrame) {
if (_root._xmouse>=_root.tstunamiMenu._x) {
if (_root._xmouse<=(_root.tstunamiMenu._x)+_root.tstunamiMenu._width) {
_root.noLimite = “sim”;
} else {
_root.noLimite = “nao”;
}
} else {
_root.noLimite = “nao”;
}
}

OBS: insira essas ações no MC e não no frame. Esse código calcula os limites do menu e avisa através da variável noLimite se os limites _x e _width do menu estão corretos. Eu usei “sim” e “nao” para deixar o código mais auto-explicativo. Feito isso, vamos para o MC itens, nele nós vamos construir nosso objeto XML e chamar os dados para dentro do flash:

var nomes:Array = [];
var urls:Array = [];
var tsunamiXML:XML = new XML();
tsunamiXML.ignoreWhite = true;
tsunamiXML.onLoad = function(foi) {
if (foi) {
for (var t = 0; t<tsunamiXML.childNodes[0].childNodes.length; t++) {
nomes.push(tsunamiXML.childNodes[0].childNodes[t].attributes.text);
urls.push(tsunamiXML.childNodes[0].childNodes[t].attributes.url);
item.duplicateMovieClip(“item”+t, t);
item._visible = false;
}
for (var i = 0; i<tsunamiXML.childNodes[0].childNodes.length; i++) {
eval(“item”+i).i = i;
eval(“item”+i).texto.text = nomes[i];
eval(“item”+i)._y = eval(“item”+(i-1))._y + 30
eval(“item”+i).onRollOver = function(){
this._alpha = 50
}
eval(“item”+i).onRollOut = function(){
this._alpha = 50
}
eval(“item”+i).onRelease = function(){
getURL(urls[this.i],”_blank”)
}
}
}
};
tsunamiXML.load(“tsunami_menu.xml”);

OBS: insira essas ações no frame. Como vocês podem ver, esse foi um parse normal. Primeiro criamos duas arrays (?) vazias. Depois criamos o objeto tsunamiXML e colocamos um FOR (?)para popular as arrays com o conteúdo dos atributos do XML (no caso text e url). Depois nós duplicamos o MC item e mudamos os seu _y para ficarem um debaixo do outro. Pra finalizar colocamos um efeito rollOver e rollOut nos botões. No onRelease, pedimos para abrir a URL armazenada dentro da array. Por fim, carregamos o tsunami_menu.xml. Falando nele, vamos ver a sua sintaxe?

<?xml version=”1.0″ encoding= “UTF-8″ ?>
<menu>
<button text=”superjG.net” url=”http://www.superjg.com” /><button text=”MXstudio” url=”http://www.mxstudio.com.br” />

<button text=”Gmail” url=”http://www.gmail.com” />

<button text=”Google” url=”http://www.google.com” />

<button text=”rafael rinaldi” url=”http://www.rafaelrinaldi.com” />

<button text=”flashmasters” url=”http://www.flashmasters.com.br” />

<button text=”youtube” url=”http://www.youtube.com” />

<button text=”orkut” url=”http://www.orkut.com” />

<button text=”gotoAndLearn()” url=”http://www.gotoandlearn.com” />

<button text=”site do BBB7″ url=”http://www.globo.com/bbb” />

<button text=”adobe” url=”http://www.adobe.com” />
</menu>

Para Finalizar, vamos colocar umas ações no MC item:

onClipEvent (load) {
inicialY = _y;
nivelCor = 50;
alvo = 100;
alvoY = inicialY;
corItem = new Color(this);
corItemTransform = corItem.getTransform();
}
onClipEvent (enterFrame) {
distanciaY = Math.floor(Math.abs((_y-_parent._ymouse)));
distanciaY2 = Math.floor(_y-_parent._ymouse);
if (distanciaY<50) {
if (_root.noLimite == “sim”) {
alvo = 200-distanciaY;
nivelCor = 100-distanciaY;
alvoY = inicialY+(distanciaY2*.1);
} else {
alvo = 100;
nivelCor = 50;
alvoY = inicialY;
}
} else {
alvo = 100;
nivelCor = 50;
alvoY = inicialY;
}
alvoAdd = Math.floor((alvo-_xscale)*.3);
_xscale += alvoAdd;
_yscale += alvoAdd;
yplus = Math.floor((alvoY-_y)*.3);
_y += yplus;
corItemTransform.ra = nivelCor;
corItemTransform.ga = nivelCor;
corItemTransform.ba = nivelCor;
corItem.setTransform(corItemTransform);
}

Começamos definindo algumas variáveis iniciais como o primeiro Y, ou Y base para todos, o nivel inicial de cores (perceba no swf que há uma mudança de cores). No enterFrame nós criamos uma distancia do Y baseado na diferença entre _ymouse e o _y desse mc. Perceba que existem duas distancias. Isso foi feito para termos uma diferença entre as distâncias, então é aí que entra nosso easing. Depois verificamos se o menu está dentro dos limites (lembra daquelas ações lá em cima). Se estiver, nós colorimos com uma nova cor baseada na distancia de Y. Caso contrário, é porque nós estamos no topo, então voltamos para as configuraçÕes iniciais setadas lá em cima. Além disso, nós aumentamos a _xscale e _yscale do item usando a variável alvoAdd que é a diferença entre o Y atual e o _xscale multiplicado pelo easing. Por fim, colorimos o item com o nível de cor correspondente ao _y. Dessa forma, os itens ficam sempre no mesmo nível de cor, diferenciando apenas a saturação.

É isso aí. Está desvendado um dos grandes mistérios do mundo do flash, de forma simplificada e rápida pra você. Esse tutorial pode ser meio dificil de se entender de primeira, mas repita os passos várias vezes até conseguir, afinal é assim que se aprende.

No próximo artigo: como fazer planos de fundo redimensionáveis no flash? , até lá…

Autor: João Guilherme Ribeiro – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

duplicando fundos usando a classe bitmapData()

Pré-Requisitos

Macromedia Flash 8, conhecimento intermediário de actionscript principalmente drawing API (instruções aqui), classe tween do laco (baixe aqui) (instruções aqui)

Conteúdo

Um dos recursos mais legais do antigo HTML era a a forma com que ele lidava com imagens plano de fundo. Ainda mais quando veio o CSS, que detalhou esse recurso impressionante. No flash as coisas são diferentes. Não existe um recurso nativo do Flash para fazer isso, mas existem várias formas de fazê-lo por você mesmo. Você pode copiar e colar a imagem no stage (isso não e muito inteligente para um stage bem grande), você pode usar duplicateMovieClip (mas novamente isso lhe dará problemas de processamento e carragamento), ou você pode aproveitar a classe bitmapData() e mandar o flash fazer o trabalho sujo. Vamos dar uma olhada no que faremos nesse artigo:

Gostaram? Pois é. Isso é muito simples de fazer e cria um efeito bem bacana nas páginas. Primeiramente, vá no site squidfingers.com ou outro de sua preferência e baixe os seus fundos. Para esse artigo, eu baixei 8 fundos. Importe-os para o flash e renomeios da seguinte forma: fundo_0X ou seja (fundo_00,fundo_01…fundo_07). Agora na biblioteca clique sobre essas imagens com o botão direito e selecione linkage. Lá escolha Export For Actionscript e verifique se eles estão com o mesmo nome da figura.

Feito isso, crie um movieclip chamado de fundo e insira-o no stage com a mesma instância e nas posições 0 x 0. No inspetor de propriedades, aplique um alpha 0 nesse MC. Nas ações do movieclip fundo, escreva os seguintes comandos:

import flash.display.BitmapData;
desenhaFundo = function () {
fundo_mc.removeMovieClip();
var fundo_img:BitmapData = BitmapData.loadBitmap(“fundo_0″+random(7));
this.createEmptyMovieClip(“fundo_mc”, this.getNextHighestDepth);
this.fundo_mc.beginBitmapFill(fundo_img);
this.fundo_mc.lineTo(Stage.width, 0);
this.fundo_mc.lineTo(Stage.width, Stage.height);
this.fundo_mc.lineTo(0, Stage.height);
this.fundo_mc.lineTo(0, 0);
this.fundo_mc.endFill();
_root.fundo.alphaTo(100, 2, “easeInOutCubic”);
};
desenhaFundo();

Explicando o código: A primeira linha importa a classe para o flash. A função desenha fundo cria um MC dentro do MC fundo chamado fundo_mc. Nesse MC, nós inserimos a imagem fundo_img que é resultante de um bitmap da biblioteca. No caso, para abrirmos fundos randômicos, colocamos a expressão loadBitmap(“fundo_0″+random(7)) assim um novo fundo será carregado. Além disso, nós especificamos os limites de altura e largura (no caso a largura e a altura do stage) através do drawing API (vou considerar que você já entende como funciona os comandos do drawing API). Por fim depois que o fundo está pronto, nós colocamos um alphaTo nele, pra dar um efeito de fade.

Agora crie um botão com o texto mudar fundo e coloque as ações nele:

on (release) {
_root.fundo._alpha = 0
_root.fundo.desenhaFundo()
}

Assim, ele chamará a função cada vez que o botão for clicado.

Viu como é fácil. Dá pra fazer muita coisa com o bitmapData(), experimente. Falando nisso, recomendo o livro Flash 8 Essentials. Com ele, você vai ficar por dentro de tudo do Flash 8. Custa apenas $26.39, com o dolar a 2.14 fica por uns 75 reais (incluíndo a postagem). É mais barato que muito livro em português e você tem treinamento de qualidade num livro muito bem diagramado e ainda exercita seu inglês. Detalhe: se você acha que seu inglês não é bom, não se preocupe, o livro é super bem escrito, numa linguagem de fácil compreensão além de ter muitas, MUITAS figuras explicativas.

No próximo artigo: como fazer sites 100% flash aparecerem bonitinhos no google, até lá…

Autor: João Guilherme Ribeiro – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

menu scroll horizontal

Pré-Requisitos

Macromedia Flash 8, conhecimento intermediário de actionscript, eventos e principalmente onEnterFrame() e o método getBounds().

Conteúdo

Olá, após um tempinho sem poder postar, hoje eu volto com todo o gás…Aproveitando, queria divulgar a nova versão do meu portifólio que já está online. Acessem no www.superjg.com. Hoje nós vamos aprender a construir um menu bem simples, MUITO procurado pelos desenvolvedores, porque ele é muito útil na hora de fazer portfólios pois além de lindo, é tudo (ou seria além de tudo, é lindo?). Veja um exemplo do que vamos fazer:

Gostaram? Vamos ver um pouco de teoria. O grande lance do menu scroll é o seguinte. Pegar propriedade _xmouse e compará-la ao _x do menu, se menor aumentar, se maior diminuir. Ou seja, a medida que você arrasta o mouse, o menu irá seguir você com base nas propriedades _x e _xmouse. Então vamos Começar. Crie um filme 500×200 e deixe-o com 30FPS e 4 camadas: “as”, “degrade”, “mascara” e “menu”.

Abra a biblioteca e crie um movieclip chamado “botoes” dentro dele, insira uma série de botoes 100×100 pixels como na figura abaixo. No meu caso, eu criei 10 botões desses:

Feito isso, insira-o na camada “menu” nas posições -751 x 82, ele deve ficar além dos limites do stage para o lado esquerdo. Instancie-o como “menu_mc” e vamos para camada “mascara”. Nela, crie um quadrado de 360 x 125 e posicione-o em 70 x 70. Agora vamos para a camada “degrade”. O objetivo dessa camada é criar um degrade que dê um efeito que os botões estão sumindo ao sair da área da máscara. Não entendeu? Dê uma olhada no swf de novo, você vai entender o que eu quis dizer. Agora preste atenção no que você vai fazer. Crie movieclip chamado “degrade” e nele um quadrado de 35 x 150 e posicione-o nos pontos -15 x 0. Abra o painel Color Mixer vá em linear e coloque duas cores, no primeiro coloque branco com 100% de alpha e no segundo coloque branco com 0% de alpha. Arraste o branco 100% para próximo do 0% (veja a figura). Copie esse quadrado, use a ferramenta de transformação e gire 180 graus pra direita. Posicione esse novo quadrado nos pontos 335 e 0. Veja a figura e entenda mais ou menos o processo:

Agora insira esse MC na camada degrade nos pontos 57 x 60 e intancie-o como “degrade_mc”. Até agora o seu fla deve ter 3 das 4 camadas completas e deve parecer um pouco com a imagem abaixo:

Agora vamos para camda ações. Nela, abra as actions e insira o código abaixo:

menu_mc.onRollOver = menu_mcOver;
function menu_mcOver() {
this.onEnterFrame = scrollmenu_mc;
delete this.onRollOver;
}
var b = degrade_mc.getBounds(_root);
function scrollmenu_mc() {
if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
this.onRollOver = menu_mcOver;
delete this.onEnterFrame;
}
if (menu_mc._x>=89) {
menu_mc._x = 89;
}
if (menu_mc._x<=-751) {
menu_mc._x = -751;
}
var xdist = _xmouse-250;
menu_mc._x += Math.round(-xdist/7);
}

Pronto. Agora vamos entender o código. As primeiras linhas associam o evento onRollOver do menu com a nossa função scrollmenu_mc. A linha var b = degrade_mc.getBounds(_root); Usa um método bem útil, mas quase esquecido depois do flash 8, o getBounds. Esse método insere dentro de um objeto os pontos x e y mínimos e máximos para o movieclip selecionado. É como se você soubesse onde começa e onde termina o movieclip. Como nosso alvo foi o degrade_mc, nós saberemos seus pontos para poder usar no nosso if. Repare que o if compara propriedade _xmouse com os xMinimo e xMaximo do movieclip degrade_mc. Além disso ele também compara o _ymouse com o yMinimo e o yMaximo do degrade_mc. Vamos pensa um pouco? Isso é necessário porque dessa forma o menu só vai dar o scroll quando eu estiver com o mouse na altura do menu. Assim, nós evitamos o problema dele ficar girando o tempo todo, mesmo quando o usuário não quiser.

Agora, alguém sabe por que o IF está comparando o _xmouse e _ymouse do degrade_mc e nao do menu_mc? hã? hã? hã? Simples. Porque o menu_mc está em constante movimento, portanto não podemos usá-lo como comparação (experimente fazer isso, veja o resultado). Então fizemos com o degrade_mc que é um movieclip que está parado no Stage e tem as propriedades que queremos para os limites do nosso menu.

Temos também dois ifs if (menu_mc._x>=89) { e if (menu_mc._x<=-751) { esses dois ifs verificam se o menu_mc está dentro dos limites do nosso filme. Se ele não estiver, ele “manda” pra lá. Assim sempre teremos um limite de onde o menu vai. Esperto, não?

E por fim, temos as linhas var xdist = _xmouse-250; e menu_mc._x += Math.round(-xdist/7); A primeira seta um valor para o _x e a segunda associa esse valor com o _x do menu_mc. Agora. vocês sabem por que esse valor é negativo? hein? hein? hein? Porque o plano cartesiano do flash é invertido, então colocando o valor negativo, garantimos que o menu rolará para os dois lados. E a divisão por 7? Vocês entenderam? Simples. Com ela, nós criamos um easing simples para a nossa animação.

É isso aí galera. Espero que tenham gostado. No próximo tutorial, como fazer um menu tsunami orientado por XML. Até lá

Autor: João Guilherme (superjG) – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

easeDrag() e DepthControl()

Pré-Requisitos

Macromedia Flash 8, conhecimento intermediário de actionscript.

Conteúdo

Vocês gostaram e eu voltei. Com mais novidades e dicas rápidas para usar no Flash. Hoje nós vamos discutir uma questão muito conhecida por ser uma das interfaces mais agradáveis e intuitivas para o usuário, mas com certeza representam um terror para a maioria dos desenvolvedores. SIM, estamos falando das técnicas de arrastar objetos, ou simplesmente Drag.

O Flash um método da classe MovieClip chamado startDrag que para muitos os casos quebra um galho. Mas imagine se sua interface toda fosse baseada em objetos arrastáveis? Isso seria um problema devido às limitações do startDrag, além disso para simular algo mais parecido com o mundo real você precisará usar uma fricção, outro detalhe omisso no método da Macromedia. Tudo bem, ninguém é perfeito. Então vamos fazer o nosso próprio prototype de ease com fricção e bom controle.

Pronto. Esse é um bom começo para a nossa interface arrastável. Mas alguns probleminhas surgem: Se eu tiver muitos objetos arrastáveis, eu quero que o que eu estiver clicando fique em cima, certo? Aí você me diz: ah jota essa é fácil. é só usar o swapDepths(), certo? ERRADASSO! Vejamos, você já está usando um prototype para o seu drag, por que voltar aos padrões do flash no controle dos níveis. Ah jota, quer dizer que eu vou ter que fazer outro prototype só para controlar os niveis dos meus emicêzinhos??? NÃÃÃO!!! Você pode usar A CLASSE NÃO DOCUMENTADA DA MACROMÉÉÉÉÉÉDIA! A mx.behaviors.DepthControl!!!!! Vamos dar uma olhada na classe e analisar os principais métodos:

Deixa eu dá uma explicadinha nos métodos:

• sendToBack(): leva o movieclip indicado para o menor nível;
• bringToFront(): leva o movieclip indicado para o maior nível;
• sendBackward(): diminui 1 nível no movieclip;
• bringForward(): aumenta 1 nível no movieclip;
• trackDepths(): gera uma matriz indicando os níveis superiores e inferiores ao movieclip indicado;

Observe que a diferença entre o DepthControl e o tradicional swapDepths é que você pode controlar de uma maneira mais eficaz o nível dos seus movieclips, colocando-os exatamente onde você os quer, sem muito trabalho. No swapDepths isso é mais dificil porque você nem sempre sabe o nível ou o nome do movieclip que você quer usar. Além do mais o swapDepths permite apenas fazer uma troca entre dois níveis de movieclips, o DepthControl permite que você manipule toda a estrutura do seu swf.

A última questão para o nosso drag ficar perfeito é melhorar a aparência do cursor no filme. A resposta do usuário seria melhor se houvesse, por exemplo um cursor que simulasse a sua mão. Algo que quando arrastasse o objeto ilustrasse exatamente isso. Para isso, basta criar um movieclip com 3 frames e um desenho de cursor em cada um: cursor normal, cursor mão e cursor “arrastando”, respectivamente. Assim, você poderia colocar um código em cada evento do botão a ser arrastado para que o movieclip cursor mude de frame de acordo com a sua tragetória em relação ao botão.

Para finalizar, é prudente, se você estiver usando muitos objetos arrastáveis, que você utilize alguma forma de loop para controlar os eventos dos botões de uma forma mais fácil, economizando linhas e otimizando o seu código. Você pode ler mais sobre loops no meu tutorial Simplificando a Vida com o FOR, publicado no fórum flashmasters.

Aqui, uma prévia do nosso swf montado, onde eu coloquei em prática todos os parâmetros discutidos acima:

E aqui um exemplo do código desse filme:

Se alguém reparou, ainda está faltando um detalhe para o nosso sistema de navegação com drag ficar 100%. Um sistema de colisão entre os movieclips. Mas isso eu deixo como exercício para vocês treinarem a massa cinzenta. Valeu galera, até a próxima.

Autor: João Guilherme Ribeiro – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

MovieClip.prototype.rebobinar()

Pré-Requisitos

Macromedia Flash 8, Flash Communication Server ou Flash Media Server.

Conteúdo

Olá enfermeira! Bem vindos a coluna the flash. A coluna de artigos rápidos pra o Flash (entendeu, artigos rápidos, the flash…hehehe). Aqui eu vou mostrar pra vocês maneiras simples de melhorar as funcionalidades do Flash sem muito esforço e com muito humor. Com o tempo, eu vou mostrar como tirar proveito máximo do Flash, quais são as melhores soluções e também mostrar algumas coisas pouco discutidas como classes não documentadas ou recursos não utilizados.

Para estrear a coluna. Vamos aprender a construir um prototype¹ que rebobina o MovieClip a qualquer momento que for chamado. Qual é a utilidade disso, seu João Guilherme? Bem, imagina se você ta fazendo aquele site, cheio de transições que quando clica em cada botão, a interface que você criou se desfaz para aparecer outra. Pois é. Imagine se você tivesse que animar na timeline a interface aparecendo e sumindo…Não seria fácil né? Esse prototype também é usado em menus, onde na ação over do botão alguma coisa vai mudando de cor, aí no out você quer que volte para a cor original. Às vezes, manualmente esse efeito fica meio confuso, pois nem sempre o frame em que a cor está é adequado. Vejam os exemplos abaixo e endentam o que eu estou falando:

Entenderam? Se vocês passarem e tirarem o mouse rápido no botão que está “sem prototype”, provavelmente ele passará de azul claro pra azul escuro rapidamente e os usuários nem virão a transição acontecendo. Isso não acontece com o prototype, pois independente da posição na timeline, ela sempre voltará para o frame 1. Isso é muito bom. Não, é demais…
Para criar o protype é muito fácil. Abra o flash, coloque as ações e escreva esse código:

//declarando a função prototype
MovieClip.prototype.rebobinar = function() {
//fazendo o loop onEnterFrame
this.onEnterFrame = function() {
//retornar ao frame anterior
this.prevFrame();
//verificar se chegou ao primeiro frame
if (this._currentframe == 1) {
//acabar o loop
delete this.onEnterFrame;
}
};
};

Pronto, agora sim. Fácil né? Com algumas linhas, solucionamos um dos “probleminhas” mais comuns de quem trabalha com flash, especialmente flash animado. Abaixo você pode ver um exemplo de uma animação com o rebobinar funcionando. Na próxima coluna, vamos aprender a fazer o MovieClip.prototype.onEndAlpha(), um evento para verificar fadeIn e fadeOut. Até lá.

Autor: João Guilherme Ribeiro- Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.