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.