[juliocesar_rj]

Olá amigos do fórum MXStúdio,

Sou usuário do Dreamweaver MX versão 6 e do Flash MX

Gostaria de saber como faço um menu tipo o que tem neste site http://www.ibm.com/sandbox/homepage/version-b/

O menu é o que está na parte inferior da página onde está escrito (Learn about . Shop for . Develop & Deploy . Get Support . My IBM links . About IBM

São estes botões com os menus de passar o mouse que eu gostaria de saber como fazer.

Tentei fazer em TAB MENU DHTML mas não consegui, vi varios sites a respeito mas não tive sucesso

Tem como algum me ensinar como fazer este menu em Flash?
O menu não precisa ter links no corpo o que eu quero fazer é quando passar o mouse no botão o corpo com o conteudo fica ativo e aparecerá uma imagem sem texto ou link apenas a imagem, eu gostei muito desse menu e ele se encaixa no projeto que estou fazendo de meu site pessoal. Gostaria de saber como fazer este menu em flash

Desde já agradeço a colaboração de todos

Att

Julio

[ubi_rj]

Oi julio beleza ?


Tem problemas se fizermos isso por partes para você não se perder ?

Então, para começar repare que cada parte é representada por uma abinha correto ?
Cada seção tem sua respectiva abinha.

O primeiro passo é desenhar cada seção, abinha por abinha.
E ao concluir cada seção vá salvando como um MovieClip.
Assim se você tiver 5 abinhas terá 5 seções, consequentemente 5 MovieClips diferentes.

Depois disso instâncie cada MovieClip ok ?

Estancie desta forma "aba1", "aba2", "aba3".... e assim por diante.

Faça isso primeiro, veja se tem dificuldades. Acabando isso e não tendo nenhum problema me avisa que a gente começa a segunda parte.

Pode ser assim ?

Porque ai a gente vai fazendo juntos e ninguem se perde...

Abraço !

[juliocesar_rj]

Fala meu camarada Ubi

Claro que pode

Rapaz acabei de postar este topico e tu ja tem a solução

ae vocês não são mole mesmo heim rsrsrsrs

Vou tentar aqui agora e posto o resultado ja ja blz

[juliocesar_rj]

Uma duvida

cada seção ou abinha ou botão tem que esta em uma camada diferente tipo camada 1 (aba1) camada 2 (aba) e assim por diante.

ou coloco todas as abinhas em uma unica camada?

[juliocesar_rj]

Fiz da seguinte forma

Cada abinha eu coloquei em uma camada diferente fiz 4 abas para teste e ficom assim

aba 1 (bt1)
aba 2 (bt2)
aba 3 (bt3)
aba 4 (bt4)

Cada botão ou aba ficou em uma camada individual

Era assim que tem que fazer?

Inclusive ja converti todos em Movie Clip

[juliocesar_rj]

Pessoal ainda não consegui resolver o meu problema

Como faço para incluir funçoes nas abas?

[ex007]

Aperta F9 para abrir a janela de Actions...

Depois você escreve a funçaõ na janela que abrir...

[juliocesar_rj]

Desculpe ex007

Obrigado por me ajudar

Apertei a tecla F9 apareceu uma tela para inserir funções

Eu sou leigo em Flash

Não sei o que fazer nesta tela

Poderial me ajudar?

[ex007]

Nessa janela que abriu...

Vai ter as ações para como os objetos que estão tanto no palco, como na livraria...

O Ubi separou por parte esse tutorial...

Vai chegar a hora que ele vai te passar as ações para ser colocadas, nessa janela dos Actions!

Vlw...

[juliocesar_rj]

Certo, entendi

Vou aguardar a seguencia deste tuto

[ex007]

Vou ver se faço alguma coisa parecida...

Bem básico mesmo, e colcao pra vc fazer o Download!

[ubi_rj]

Calma, não coloca as actions não.

Vamos pro segundo e ultimo passo.

Temos agora todas as abinhas colocadas nos seus respectivos lugares.
O que temos que fazer é colocar um código que ao movermos o mouse sobre a abinha ela venha para frente e jogue as outras para tras.

Utilizaremos um comando que altera a profundidade dos objetos, trazendo eles pra frente ou pra tras.

CÓDIGO

bt1.onRollOver = function () {
bt2.swapDepths(3);
bt3.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
}
bt2.onRollOver = function () {
bt1.swapDepths(3);
bt3.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
}
bt3.onRollOver = function () {
bt1.swapDepths(3);
bt2.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
}
bt4.onRollOver = function () {
bt1.swapDepths(3);
bt2.swapDepths(2);
bt3.swapDepths(1);
this.swapDepths(getNextHighestDepth());
}

Agora teste.

Abração !

[ex007]

Pronto tá aew...

E só esperar!

[juliocesar_rj]

Olhando o modelo no site da IBM, as abinhas são de uma cor, quando clicamos em uma delas ou ao passar o mouse ela abre o conteúde e automaticamente muda a cor indicando que está selecionada.

Como faço para inserir este código, eu tenho que selecionar uma abinha, todas, eu não sei onde inserir o código?

como ficaria o esqueleto das camadas apos prontas?

eu criei da seguinte forma

bt1 criei uma aba de cor azul
bt2 também de cor azul
bt3 também de cor azul
bt4 também de cor azul

Como faço para inserir a aba que mudará de cor e como faço para que cada uma exiba um conteudo diferente?

Já transformei todas elas uma a uma em movie clip

[ubi_rj]

Calma....acho que vamos precisar ir com calma...hehehe...

Crie uma nova camada, nomeie esse camada de "Actions".
Clique no primeiro frame dessa camada e aperte a tecla F9.

Cole as actions que eu postei nesse espaço que vai aparecer e teste para ver se a funcionando.

Se tudo estiver certo a gente passa para as próximas fases.

Abração !

[juliocesar_rj]

Valeu ubi_rj

A estrutura ficou da seguinte forma

actions -> (pressionei F9 e colei o código que você me passou) apareceu um azinho no frame 1
bt1 ------> (botão convertido em movie clip com o nome de bt1) está no frame 1
bt2 ------> (botão convertido em movie clip com o nome de bt1) está no frame 1
bt3 ------> (botão convertido em movie clip com o nome de bt1) está no frame 1
bt4 ------> (botão convertido em movie clip com o nome de bt1) está no frame 1

Logo em seguida salvei o projeto so pra garantir e apertei o Ctrl + Enter ai apareceu os 4 botões mais sem nenhum efeito

[juliocesar_rj]

Tem mais alguem que possa me dar uma ajudinha?

Ainda estou enrolado neste projeto

[juliocesar_rj]

Ubi

c ta ai meu fio?

Cadê aquela ajudinha esperta? heim rsrsrs

To mais enrolado aqui do que rabo de porco :/

[ubi_rj]

Julio, não precisa ficar postando loucamente uma mensagem atrás da outra....quanto eu ou alguem souber a resposta vai vim te ajudar.

Mas voltando ao assundo....muito estranho não estar funcionando...

Coloca seu arquivo no site do RapidShare pra eu olhar pra você ok ?

http://rapidshare.com/

Abração !

[ex007]

Coloca assim ▼

Uma enxugada no código do Ubi...

CÓDIGO

bt1.onRollOver = function () {
mc1.swapDepths(this.getNextHighestDepth());
}
bt2.onRollOver = function () {
mc2.swapDepths(this.getNextHighestDepth());
}
bt3.onRollOver = function () {
mc3.swapDepths(this.getNextHighestDepth());
}
bt4.onRollOver = function () {
mc4.swapDepths(this.getNextHighestDepth());
}

[ex007]

http://rapidshare.com/files/92421110/abas.fla.html

[juliocesar_rj]

O arquivo que eu fiz está no rapidshare

http://rapidshare.com/files/92423580/Proje..._COMPU.fla.html

verifique como ficou o código e o posicionamento das abas

ex007
Fiz o download do arquivo que você colocou no rapidshare
so que quando tento abrir no Flash MX ele apresenta erro e fecha o Flash

Utilizo a versão Flash MX 6.0 r51

[ex007]

Versão MX ▼
http://rapidshare.com/files/92430358/abas_.fla.html

[juliocesar_rj]

Tentei abrir este novo arquivo "abas_" e apareceu a seguinte janela escrito


Flash MX

Formato de arquivo não esperado


Tentei abrir outros arquivos para ver se havia algo de errado com o meu flash e todos abriram normalmente

[ubi_rj]

CÓDIGO

Uma enxugada no código do Ubi...

ex007, o código que fiz não precisa ser reduzido.

As abas devem seguir sempre um padrão de hierarquia para ser real.
Uma deve estar sempre na frente da outra.

A primeira na frente da segunda,
A segunda na frente da terceira,
A terceira na frente da quarta,
E a quarta por último.

Valeu a intenção, mas o código a ser usado é aquele mesmo para obedecer isso, se não fica estranho.

Abraço !

[juliocesar_rj]

Ubi

Você deu uma olhada no arquivo que coloquei no rapidshare?

O máximo que consegui ate o momento foi aquilo :/

[ubi_rj]

Gente !!!

Como vocês querem fazer o efeito das abinhas sem desenharem as abinhas ???

No primeiro post escrevi exatamente isso:

Então, para começar repare que cada parte é representada por uma abinha correto ?
Cada seção tem sua respectiva abinha.

O primeiro passo é desenhar cada seção, abinha por abinha.
E ao concluir cada seção vá salvando como um MovieClip.

Não vi nenhuma aba em seu arquivo, somente retangulos separados....
Você nunca vai visualizar o efeito se não fizer as abas.....

Da uns 10 minutos pra eu fazer isso pra você.....era só desenhar.....nada d+...

Mas calma ae....

Abração !

[juliocesar_rj]

Vlw Ubi vou ficar no aguardo então

[ubi_rj]

Julio,

Como prometido...
http://rapidshare.com/files/92485125/Abas.rar.html

Qualquer dúvida pergunte.
Abraço

[ex007]

Sei...

Mas está funcionando!!!

Vlw...

[ex007]

Ubi...

Pra que deveria ter uma "hierarquia"???
Se o getNextHighestDepth() vai levar o mc ao mais alto nível...

Seria pra manter um certa ordem???
Mais se um vai substituir o outro quando ele for elevado!

vlw...

[ubi_rj]

Ubi...

Pra que deveria ter uma "hierarquia"???
Se o getNextHighestDepth() vai levar o mc ao mais alto nível...

Seria pra manter um certa ordem???
Mais se um vai substituir o outro quando ele for elevado!

vlw...

Não é tão complicado assim....vou tentar explicar, qualquer coisa pergunta.

O que vai subir deve sempre ser programado por último para que alcançe o nível mais alto.
Os restantes devem ser programados anteriormente, seguindo a ordem
PRIMEIRO - SEGUNDO - TERCEIRO - QUARTO
Da mesma forma que um "porta-arquivos", onde as abas dos arquivos da frente aparecem em primeiro fazendo sombra nas de tras.

Vamos pensar como você esta pensando ok ?

Se selecionarmos primeiramente a abinha 2.
Ela ficará mais alta que todas correto ?
E as outras ? Qual esta na frente de qual ? Estão todas juntas ?
Mas OK, ignorando isso.
A aba 2 esta na frente correto ?
E se selecionarmos agora a aba 4.
A aba 4 esta ne frente, e depois dela estará a aba 2. Que deveria estar depois da 1.

Ou seja....fica errado....não é tão complicado.

Deixe o meu código como você falou e teste, vai ver o erro.

Mas de qualquer forma, cada um programa como achar melhor, não estou criticando não. Somente explicando ok ?

Qualquer coisa posta...

Abraço !

[ex007]

OK = 0 killed, que foi usado na guerra da secessão!

Conforme for surgindo novas dúvidas a respeito eu pergunto!

Vlw...

[juliocesar_rj]

Ubi

Antes de mais nada gostaria de agradecer a atenção e a paciência sua e do nosso amigo ex007
Vocês astão me ajudando bastante
Valeu mesmo pessoal, são pessoas assim que fazem com que um Forum se destaque e muito na frente de outros.
Parabéns!

Mas voltando ao assunto

O arquivo que você (Ubi) disponibilizou no rapidshare chamado "abas.zip" continha um arquivo "aba" outro arquivo "abaflash8" e um outro chamado "abaflashcs3"

Tentei abrir o arquivo "aba" para ver como ficaria o efeito no flash player e o mesmo abre so que fica uma janela aberta na cor marrom e não aparece nada nela.

Ja os arquivos "abaflash8" e abaflashcs3" abrem no Flash MX com o seguinte erro "Formato de arquivo não esperado"

Estou utilizando a versão do Flash MX versão 6 em Português.

[ex007]

Julio arruma uma versão mais recente do Flash...

Assim vai parar de dar esse "erro", isso e por causa da versão mesmo!

Ubi, notei o erro...

Eu não estava percebendo por que os btn do meu exemplo eles eram fixos!

E só subiam os mc, por isso que não estava percebendo!

[ubi_rj]

E ae gente !

Julio arruma uma versão mais recente do Flash...

Assim vai parar de dar esse "erro", isso e por causa da versão mesmo!

Como o ex007 falou Júlio, você vai precisar arrumar uma versão mais recente do programa, eu utilizo o Flash CS3 e não consigo salvar meu arquivo em uma versão menor do que a do Flash 8.

Eu não estava percebendo por que os btn do meu exemplo eles eram fixos!

É eu tava vendo isso porque no seu arquivo um não está sobre o outro e não possuem sombras....por isso que pedi pra testar no arquivo que mandei hehehehe....mas enfim...que bom que viu os erros!

Abraço !

[juliocesar_rj]

Certo pessoal vou ver o que consigo

Realmente minha versão do flash ja esta um pouco defasada

Vou resolver isso e entre em contato com vocês novamente para continuar com o tuto se preciso

vlw pessoal um grande abraço para vocês e qualquer coisa eu chamo novamente

[juliocesar_rj]

Pessoal estou de volta

Ubi testei o arquivo que você disponibilizou no rapidshare

Ficou muito legal, ja me quebra um galhão

Agora no site da IBM quando as abas estão de uma cor e conforme o passar do mouse elas ficam com outra cor

a minha ideia e fazer algo tipo o site www.ibm.com com figuras vou fazer uma textura tipo a do site IBM são abinhas 3D e quando passar o mouse a abinha que era de uma figura se tornará outra e na parte de baixo aparecerá o conteúdo que será outra imagem

Tem como fazer algo parecido com aquele menu utilizado no site ibm.com?

como proceder?

[ubi_rj]

Opa, vamos lá.

Abra uma aba e mude a cor dela para a cor que deseja.
Dentro da timeline da abinha adicione um novo "keyframe" na timeline.
Nesse novo "keyframe", que estará no frame 2, faça a abinha possuir outra cor.
Ainda dentro da abinha crie uma nova camada chamada "Actions" e nela crie tambpem 2 keyframes.
Em ambos keyframes dessa camada coloque um "stop ()".

Repira esse processo em todas as suas outras abinhas, e mude suas actions para:

CÓDIGO

bt1.onRollOver = function () {
bt2.swapDepths(3);
bt3.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
bt1.gotoAndStop (2);
bt2.gotoAndStop (1);
bt3.gotoAndStop (1);
bt4.gotoAndStop (1);
}
bt2.onRollOver = function () {
bt1.swapDepths(3);
bt3.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
bt1.gotoAndStop (1);
bt2.gotoAndStop (2);
bt3.gotoAndStop (1);
bt4.gotoAndStop (1);
}
bt3.onRollOver = function () {
bt1.swapDepths(3);
bt2.swapDepths(2);
bt4.swapDepths(1);
this.swapDepths(getNextHighestDepth());
bt1.gotoAndStop (1);
bt2.gotoAndStop (1);
bt3.gotoAndStop (2);
bt4.gotoAndStop (1);
}
bt4.onRollOver = function () {
bt1.swapDepths(3);
bt2.swapDepths(2);
bt3.swapDepths(1);
this.swapDepths(getNextHighestDepth());
bt1.gotoAndStop (1);
bt2.gotoAndStop (1);
bt3.gotoAndStop (1);
bt4.gotoAndStop (2);
}

Ta aqui de qualquer forma: http://rapidshare.com/files/92762719/Aba2.rar.html

Abração

[juliocesar_rj]

Opa Ubi

Baixei o novo arquivo que você disponibilizou, ficou muito bom estou quase conseguindo chegar no ponto

A minha dúvida é a seguinte...

...Tem como eu adaptar o código que você me mandou no arquivo acima "aba2" para inserir ao inves de abas criadas no Flash eu queria criar 4 abas no photoshop e importá-las para o Flash CS3

A idéia é criar as 4 abas digamos com uma cor azul

e quando passar o mouse sobre uma ou outra ela se tornaria da cor digamos que laranja

Só que ao invés de ser feita no Flash eu criaria uma textura no Photoshop

Tem como ao invés de abinhas criadas no Flash eu importar do Photoshop?

O código e a idéia é justamente esta última que você me mandou a unica coisa que falta é saber se tem como utilizar textura feira no photoshop ao invés de abas criadas no Flash.