Treinamento Online
Sexta-feira, 13 de dezembro de 2002 às 03h59

Flash MX: Menu com dica

Faltam -1 dias! Inscreva-se agora! O maior encontro de profissionais web da américa latina.

Fala pessoal!

Novamente estou aqui pra tentar ajudar algumas pessoas interessadas no assunto...

Sabe aqueles menus onde as indicações aparecem ao passar o mouse sobre o objeto? É só colocar alguma mensagem no frame sobre (over) do objeto botão que a gente tem este resultado.

Mas se a gente colocar alguns actionscripts a coisa fica bem mais apresentável, e é este o motivo que estou aqui de novo.

Vamos lá?

1- Crie um filme (250x250 px) com uma Cena (Cena 1) seis Camadas – “ações”, “preloader”, “máscara”, “botões”, “o que move” e fundo – respectivamente, onde somente as camadas “botões” e “o que move” são mascaradas e, lógico, a camada máscara é uma máscara.

2- No primeiro frame da Camada ações, abra a janela “actions” e coloque no modo especialista. Insira no 1º frame o seguinte:

fscommand("allowscale",false)

stop()

3- Agora, insira a ação stop() no 6º frame da mesma camada

4- Na camada Preloader que contém só o primeiro quadro insira um mc com o nome loadBarra (onde possua um quadrado de 250 x 250 px), volte para a cena 1 clique uma única vez sobre o mc loadBarra e insira a seguinta ação no modo especialista:

onClipEvent(load) {

_xscale = 0

// Kilobytes totais

kbt = _parent.getBytesTotal()

}

onClipEvent (enterFrame) {

// novo xscale

nxs = Math.round((_parent.getBytesLoaded()/kbt)*100)

// diferença entre o novo e o atual xscale

dxs = nxs - _xscale

// movimento

mxs = dxs/5

// adiciona movimento no xscale

_xscale += mxs

if (_xscale > 99) {

_parent.gotoAndPlay(2)

}

}

 

5- Na camada Máscara crie uma máscara no tamanho 250x250 px (você pode alterar pelo tamanho que quiser), no 6º frame.

6- Na Camada botões, crie um movie clip (EX: joiaMC) e dentro deste joiaMC crie um botão (EX: botão) –entre no modo de edição de joiaMC. Clique em cima do botão, abra a caixa de actions e insira o seguinte:

on (rollOver) {

_parent.balao.cima = true

_parent.balao.nx = _root._xmouse+10

_parent.balao.ny = _root._ymouse+10

_parent.balao.titulo = texto

}

on (rollOut,dragOut,releaseOutside) {

_parent.balao.cima = false

_parent.balao.titulo = ""

_parent.balao.nx = random(778)

_parent.balao.ny = random(278)

}

7- Arraste 3 instancias do clipe joiaMC para o palco no 6º frame da camada botões – ainda na raiz do filme clique em cima de cada joiaMC e insira a ação:

onClipEvent(load) {

texto = "ALGUMA INFO AQUI!"

}

// Para cada joiaMC vc poderá inserir um valor diferente para a variável texto

8- Na camada “O que move” no 6º frame crie um movie clipe com o nome balaoMC onde ao edita-lo, crie duas camadas (“caixa de texto” e “balão”).

Na camada caixa de texto do movie clip balaoMC, frame 1, insira um campo de texto com a variável “titulo” (sem aspas – claro).

9- Ainda no movie clip balaoMC, mas na camada balão, desenhe um balão de quadrinhos.

10- Volte para a Cena 1, na camada “o que move” no 6º frame arraste uma instância de movie clip balaoMC, de o nome na caixa de instancia “balao” (sem aspas de novo!), abra a caixa de ações no modo especialista e insira o seguinte:

onClipEvent (load) {

_alpha = 0

a1 = 4 // aceleração ----- 1.1 - 10

d1 = 1.4 // amortecedor ----- 1.1 - 4

a2 = 6

d2 = 2

nx = 100

ny = 100

}

onClipEvent (enterFrame) {

dx = nx - _x

mx = (dx/a1)+(mx/d1)

_x += mx

dy = ny - _y

my = (dy/a2)+(my/d2)

_y += my

if (cima == true && _alpha < 100) {

_alpha += 5

} else if (cima == false && _alpha > 0) {

_alpha -= 5

}

}

11- E por fim na camada fundo faça um quadrado branco (ou qualquer cor), no tamanho do palco no frame 2. Dê um ctrl+alt+c (copiar quadro) e cole o quadro idêntico nos frames 4 e 6 (ctrl+alt+v).

12- Agora é só publicar!

Vamos introduzir sempre este ‘OB’:

Vale a pena vocês mexerem nas actionscipt e ir notando os resultados, com isso poderão se relacionar cada vez melhor!

Espero que tenham gostado mais uma vez, além de agradecer os comentários que recebo diariamente das pessoas interessadas no assunto, qualquer dia desses eu volto pra deixar mais alguma coisa pra vocês!

Clique aqui para fazer o download dos arquivos

3 comentários

 FRANCISCO BRAZ
26/04/2005 10h18

As dicas são muito boas mais muitas vezes não da pra acompanhar,seria bom se acompanha-se uma visualização tipo as dicas de photoshop...
Valeu...

 Huayna Tejo
20/04/2009 17h49

criei um tutorial sobre isso em AS3, pode dar uma olhada se quiser...
http://sodaflash.blogspot.com/2009/04/menu...do-o-mouse.html

abraços!!

 Andre Ferracini
16/05/2006 18h21

Muito bom!

Sou um curioso em flash e tudo q sei aprendi por aqui. Esse topico em especial é muito bom. Parabens meu velho!

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


Patrocínio:
Sobre o Autor
Dauton Janota é desenvolvedor de projetos avançados em Flash MX e autor dos livros "Flash Action Script MX - Documentado e Não-documentado" e "Flash animado - Técnicas avançadas de design e animações".

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.