::..Conexão D2S..::



Seja bem vindos ao ConexãoD2S,


Cadastre-se no fórum e tenha benefícios:


*Baixe músicas, jogos, vídeos;
*Faça perguntas, tire suas dúvidas;
*Entre em nosso Xat;
*Crie tópicos, converse direto com o Admin;
*Leia tutoriais completos



Cadastre-se e faça parte da equipe CD2S
Tudo gratuito!
Sign Up NowFAQ
Signup Now
Esta afim fazer uma postagem iniciar um novo tópico e ou interagir com outros
membros deste conselho, você precisa criar uma conta primeiro.
Se esta é sua primeira visita, não se esqueça de verificar o FAQ clicando no link acima. Você pode ter que registrar antes que você possa postar: clique no link de registro para prosseguir. Para começar a ver as mensagens, selecione o fórum que pretende visitar da seleção abaixo.

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo Mensagem [Página 1 de 1]

#1 Expansão de banner ao passar o mouse em Qua Maio 16, 2012 4:21 pm

Nesse tutorial você irá aprender a fazer um banner que se expande ao passar do mouse no Flash.

O expandable banner é, a principio, um full banner (468×60) comum, porém, quando o usuário passa o mouse em cima do mesmo, ele se expande, criando uma boa interação e mostrando informações adicionais.

Chega de conversa e mãos à obra!

O expandable banner, apesar de ter um impacto bem grande na página, é fácil de ser elaborado. Iremos usar o Flash para desenvolvê-lo e o Dreamweaver para inserí-lo na página (utilizando layer).

No Flash, crie um documento com 468 de width, que é a largura padrão de um full banner e com a altura de sua preferência, porém só não exagere muito, o ideal é que o banner tenha 468×280 pixels.


Recomendo dividir a animação em cenas. Uma para o primeiro estado e o segundo para quando o usuário passar o mouse em cima do banner, pois assim faciltia o nosso trabalho e possíveis alterações.
No meu caso, eu dividi a animação em duas cenas, chamadas “cena1” e “rollover”, respectivamente.
Para trabalhar com cenas, você utilizará a paleta Scene (Cena). Abra-a pressionando “Shift + F2”. e adicione uma cena clicando no sinal de “+”.

Renomeie suas cenas de acordo com sua preferência. E vale lembrar que o Flash exibe as cenas de acordo com a posição na paleta, de cima para baixo.


Vamos agora editar a primeira cena (“cena1”).
Faça um retângulo que será o fundo do seu banner, pois vale ressaltar que a animação terá fundo transparente no html, mas nos preocuparemos com isso só no Dreamweaver. Por enquanto, você precisa imaginar que a cor de fundo do Flash não existe. Portanto, na cena 1, faça um retângulo de 468×60, sem bordas.

Agora selecione-o e agrupe pressionando “Ctrl + G”. Com o retângulo ainda selecionado, defina na barra Properties (Propriedades) sua posição Y e X igual a zero.


Dentro desse retângulo você coloca todo o conteúdo que fará parte do primeiro estado do banner. Crie movimentos, utilize fotos, textos, tudo de acordo com sua necessidade. O que importa é usar a criatividade para chamar a atenção (de uma forma educada) do usuário, dispertando seu interesse em interagir com o banner, mas atentando sempre para o tamanho final do mesmo, tendo em vista que os portais normalmente não aceitam banners maiores que 12 kbytes, pois prejudica o carregamento do restante da página.

Depois de criada sua primeira cena, você deverá criar uma layer e ela deverá estar acima de todas as outras. Vamos criar um botão que chamará a próxima cena.

Faça um outro retângulo de 468×60 pixels e defina o seu X e Y igual a zero.
Com o retângulo ainda selecionado, pressione “F8” para convertemos ele para botão. Na janela que se abrir, escolha a opção button (botão) e dê um nome para ele. Clique em “OK”.


Em seguida, clique duas vezes no botão para editá-lo.
Na timeline (linha do tempo), clique em cima do primeiro frame e, sem soltar o mouse, arraste-o para o último frame.

Pronto, agora pressione “Crtl + e” para voltar à raiz do filme


Com o botão selecionado, pressione “F9” para abrir a paleta “Actions”.
Dentro da paleta digite:

on (rollOut) {
gotoAndStop(“cena1″, 1)
}
on (rollOver) {
gotoAndPlay(“rollover”, 1)
}


Essa ação faz com que a próxima cena seja chamada quando o usuário passar o mouse em cima do botão ou que volte ao começo do filme caso o usuário tire o mouse do banner durante a animação de transição entre as cenas.

Pronto, agora feche a paleta e, na timeline, crie mais uma layer com o nome “actions” ou “ações”, como preferir. Selecione o primeiro frame dessa layer e pressione “F9” para abrir a paleta “Actions” novamente. Na paleta digite:

stop();

Isso fará com que o filme pare e não vá automaticamente para a próxima cena assim que for exibido.
Pronto, nossa cena está criada. Vamos à segunda e última cena.

Crie novamente um retângulo, só que dessa vez ele deverá ter 468×280, que é a área total do filme. Depois de criado, agrupe-o e defina X e Y igual a 0.

Crie sua animação final, respeitando as dimensões do retângulo que acabou de criar.
Depois de criar a animação, crie uma camada acima de todas que, como na cena passada, conterá o botão, só que dessa vez o botão levará para uma determinada página quando clicado.

Com a layer criada, abra a “Library” (Blibioteca), pressionando “Ctrl + L” ou “F11”.
Procure pelo botão que você criou na cena anterior e arraste-o para o stage. Defina seu X e Y igual a zero. Feito isso, com o botão selecionado, pressione “Q” para redimensioná-lo. Aumente sua altura para que fique igual a do filme, ou seja, 280 pixels. Ou você poderá fazer isso diretamente na barra “Properties” (Propriedades), bastando selecionar o botão e digitar 280 no campo “H”, de “height”(altura).

Agora iremos inserir e ação que levará o usuário para o endereço desejado e outra que fará com que o banner volte à primeira cena, se por acaso o usuário tirar o mouse em cima do banner.
Para isso, com o botão selecionado, pressione “F9” e dentro da paleta “Actions” digite:

on (rollOut) {
gotoAndStop(“cena1″, 1)
}
on (release) {
getURL(‘http://www.suapagina.html’, ‘_blank’)
}


Essa ação fará com que, quando o usuário tirar o mouse de cima da área do banner, ele volte para a primeira cena, onde está com o tamanho padrão de um banner.

E ao ser clicado, o botão chama a função “getURL”, que levará o usuário à página especificada dentro da mesma.

A especificação “_blank”, como vocês já devem saber bem, serve para que a página seja aberta em uma nova janela.
Bom, agora só mais um passo para finalizarmos nosso banner. Crie uma camada chamada “Actions”, semelhante à da cena anterior.

No último frame de sua animação, crie um frame vazio, pressionando “F7”. Com esse frame selecionado, abra a paleta “Actions” pressionando “F9”.
Então digite:

stop();

Pronto, agora é só salvar e exportar seu banner para swf.
Iremos, nesse momento, inserir o banner no site. Para isso, abra a página na qual ficará o banner e crie uma layer, posicione-a no local desejado.
Clique dentro da layer e então pressione “Ctrl + Alt + F” para inserir um swf.


Depois de inserido o banner dentro da layer, vamos remover a cor de fundo do nosso banner, para que ele não fique por cima de parte do conteúdo do site. Para isso, selecione o banner e, na barra “Properties” (Propriedades), clique em “Parameters” (Parâmetros).

No campo “Parameter”, digite “wmode” – sem aspas. E no campo “value”, digite “transparent” – sem aspas também.


Pronto, agora nosso banner está inserido na página.

Ver perfil do usuário http://conexaod2s.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum


Ganhadores da SOTW
Small BannerSmall BannerSmall BannerSmall BannerSmall BannerBig Banner
PurevB Banner Placeholder