[Resolvido] Mostrar descrição de imagem ao passar mouse

[Luis Fernando R. Valle 0]

Pessoal, bom dia.

Preciso de uma ajuda de vcs.

Estou com uma animação que quando passa o mouse, ela para.

Agora precisaria também que ao passar o mouse, alem dela parar, mostrasse a descrição da imagem.

 

Tenho mais ou menos umas 10 imagens.

 

Estou fazendo em movieclip.

E a animação é toda no timeline.

[Francispansa 6]

Pessoal, bom dia.

Preciso de uma ajuda de vcs.

Estou com uma animação que quando passa o mouse, ela para.

Agora precisaria também que ao passar o mouse, alem dela parar, mostrasse a descrição da imagem.

 

Tenho mais ou menos umas 10 imagens.

 

Estou fazendo em movieclip.

E a animação é toda no timeline.

 

Em AS3??

[Luis Fernando R. Valle 0]

isso em AS3

[Francispansa 6]

isso em AS3

 

Amigo desculpe qualquer erro, mas digitei isso aqui no notepad pois to sem o flash nesse pc.

 

Bom vamos lá, vamos supor que você tenha um campo onde vai aparecer essa legenda, então é so criar uma function pro rollover

movieClip.addEventListener(MouseEvent.ROLL_OVER, _legenda);

function _legenda(e:MouseEvent):void{

switch(e.currentTarget.name){
case 'imagem1':
campo_legenda.text = 'LEGENDA DA IMAGEM UM';
break;

case 'imagem2':
campo_legenda.text = 'LEGENDA DA IMAGEM DOIS';
break;

case 'imagem3':
campo_legenda.text = 'LEGENDA DA IMAGEM TRÊS';
break;

case 'imagem4':
campo_legenda.text = 'LEGENDA DA IMAGEM QUATRO';
break;

}

}

Caso não entenda a ideia acima cola o teu as aqui pra mim ver.

 

Abrass

[Luis Fernando R. Valle 0]

Por enquanto o que tenho é isso:

 

mc.addEventListener(MouseEvent.ROLL_OVER, Over);

mc.addEventListener(MouseEvent.ROLL_OUT, Out);

function Over(myEvent:MouseEvent){

mc.gotoAndStop(mc.currentFrame);

}

function Out(myEvent:MouseEvent){

mc.gotoAndPlay(mc.currentFrame);

}

 

Que é apenas para parar a animação apos passar o mouse em cima.

Precisava ver como colocar esse campo de texto também (se tem alguma forma especifica).

 

É que sou iniciante na area de flash.

Mais estou começando a pegar.

[Francispansa 6]

...

Mais estou começando a pegar.

 

 

Então seguinte, faz assim

 

mc.addEventListener(MouseEvent.ROLL_OVER, Over);
mc.addEventListener(MouseEvent.ROLL_OUT, Out);
function Over(myEvent:MouseEvent){
mc.gotoAndStop(mc.currentFrame);

switch(myEvent.currentTarget.name){
case 'imagem1':
campo_legenda.text = 'LEGENDA DA IMAGEM UM';
break;

case 'imagem2':
campo_legenda.text = 'LEGENDA DA IMAGEM DOIS';
break;

case 'imagem3':
campo_legenda.text = 'LEGENDA DA IMAGEM TRÊS';
break;

case 'imagem4':
campo_legenda.text = 'LEGENDA DA IMAGEM QUATRO';
break;

}

}
function Out(myEvent:MouseEvent){
mc.gotoAndPlay(mc.currentFrame);
campo_legenda.text = '';
}

Ae cria um campo de texto dinamico e instancia de campo_legenda e ali onde tem.:

 

case 'imagem...':

troca o 'imagem...' pelo nome de instancia do movieclip.

[Luis Fernando R. Valle 0]

Deixa eu ver se entendi.

para cada imagem dai eu crio um movieclip.

por exemplo.

 

img1..

img2..

 

(seria um movieclip para cada imagem?)

 

dai crio o campo de texto dinamico

 

ai quando passar pela imagem img1, ele mostra a descrição.

[Francispansa 6]

Deixa eu ver se entendi.

para cada imagem dai eu crio um movieclip.

por exemplo.

 

img1..

img2..

 

(seria um movieclip para cada imagem?)

 

dai crio o campo de texto dinamico

 

ai quando passar pela imagem img1, ele mostra a descrição.

 

Não não..

 

Seguinte, você ja tem os movieClips né?cada imagem sua eh um movieClip, então da um nome de instancia pra cada um deles, ex.: img1, img2 img3..

 

Ai no palco você cria somente um campo de texto dinamico com o nome de instancia de campo_legenda por exemplo..

 

Então quando você passa o mouse em cima de uma imagem a animação para e vai entrar no switch que te passei, ai ele vai buscar o nome de instancia dentro do switch, vamos supor que você tenha parado em cima da imagem com instancia de img4, ele vai entrar no switch e parar onde tiver a instancia img4, ai então vai apresentar a legenda que você colocar para aquela imagem exemplo.: campo_legenda.txt = 'Aqui vai a legenda da imagem 4';

 

Blza?

Qualquer coisa volta a postar..

[Luis Fernando R. Valle 0]

Hum, agora entendi.

mais tem algum problema por exemplo, deixa escrito uma mensagem padrão quando não passar o mouse?

[Francispansa 6]

Hum, agora entendi.

mais tem algum problema por exemplo, deixa escrito uma mensagem padrão quando não passar o mouse?

 

 

Problema algum..

 

Ai faz o seguinte, antes das funções tu deixa setado a mesagem padrão

 

campo_legenda.text = 'MENSAGEM PADRÃO AQUI';

e na function Out tu deixa assim.:

 

function Out(myEvent:MouseEvent){
mc.gotoAndPlay(mc.currentFrame);
campo_legenda.text = 'MENSAGEM PADRÃO AQUI';
}

:D

[Luis Fernando R. Valle 0]

Amigo esta dando erro.

Deixa eu te explicar o que eu tentei fazer

 

1° criei um quadrado de teste

2° transformei em movieclip e coloquei o nome de mc e a instancia também de mc

3° inseri o dinamic text com a instancia com o nome que você me passou (campo_legenda).

4° inseri o codigo que você me passou lá na layer as.

 

mais deu erro

não consegui parar nem a imagem mais e nem mostrar a descrição quando passo o mouse

[Francispansa 6]

Amigo, desculpe a demora da resposta no outro PC eu to sem o flash instalado.

 

Bom criei um exemplo simples aqui, baixa ele e dá uma olhada.

 

francis-g.com.br/exemplos/exemplo-flash.zip

 

Eu comentei um pouco o código, acredito que você vai entender sem problemas, nesse exemplo crie uma animaçãozinha via AS mesmo não por timeline, mas olha bem isso que você consegue implementar o esquema de legendas no teu projeto.

 

Qualquer coisa posta ae, vo acompanhando aqui.

 

Abrass

[Luis Fernando R. Valle 0]

Deixa eu ver se entendi a animação

 

Por exemplo

 

Voce cria um primeiro movie clip.

Por exemplo (principal)

 

Entra dentro dele

Ai cada imagem que você tem dentro da principal, você transforma em um movie clip (cada imagem com um nome).

 

Dai no case você verifica se é o movie clip da imagem que esta setada

Se caso for da imagem, mostra a descrição.

 

É isso mesmo?

Se não for, não entendi mais nada..

rsrs

[Francispansa 6]

É isso mesmo Luis.

 

Para você entender melhor ainda, coloca uns trace dentro das opções do switch, exemplo

 

case 'img1_mc':
trace(e.currentTarget.name);
..
break;

ai coloca esse trace em todos itens ai, que tu vai ve o nome do mc retonando no output. :D

[Luis Fernando R. Valle 0]

Deixa eu ver se entendi corretamente como é o modo de fazer a animação

 

por exemplo.

Faço o primeiro quadro e transformo em movieclip. Essa movie clip chamo de mc.

Entro dentro da mc.

 

Crio 2 quadros dentro da mc. Transformo cada uma delas para movie clip (img1 e img2).

 

No case lá.

uso img1 e img2 ou mc_img1 e mc_img2

 

??

[Francispansa 6]

Deixa eu ver se entendi corretamente como é o modo de fazer a animação

 

por exemplo.

Faço o primeiro quadro e transformo em movieclip. Essa movie clip chamo de mc.

Entro dentro da mc.

 

Crio 2 quadros dentro da mc. Transformo cada uma delas para movie clip (img1 e img2).

 

No case lá.

uso img1 e img2 ou mc_img1 e mc_img2

 

??

 

Bom você tem que ver que vai estar dentro do movieclip mc né, então o caminho completo pro img1_mc seria ' mc.img1_mc '

[Luis Fernando R. Valle 0]

Um

Então como o nome do meu movie clip é img1

 

Dai o caminho seria mc.img1

certo?

[Francispansa 6]

Exato..:D

 

me add no msn caso tenha mais alguma duvida, ta no meu perfil..:P

 

Abrass

[Luis Fernando R. Valle 0]

Não consegui fazer a animação ainda

Por exemplo

A animação ta parando quando fico passando o mouse em cima da imagem.

E não quando passo apenas.

 

Tenho que fikar passando pra ele ir parando.

 

E a descrição ainda não consegui mostrar.

[Elektra 102]

Exato..:D

 

Abrass

 

 

Legal o seu arquivo, gostei muito do uso do switch para o texto. http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Dentro do assunto do tópico, gostaria de perguntar como faço para que o movimento das imagens fique contínuo?

 

Não fique a lacuna em branco até reiniciar a animação, ou seja, após a imagem 4, em sequência venha a imagem 1.

 

Clique aqui

 

Tentei duplicar as funções e posicionar outra instância do mc no final, mas por conta do mouse_over, uma anima para e outra segue rodando, e o code fica muito extenso.

 

Na timeline eu sei como fazer, no action eu agradeço sinceramente pelo auxílio, também estou aprendendo.

 

 

Abraços