Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario

Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Novembro 2018
SegTerQuaQuiSexSabDom
   1234
567891011
12131415161718
19202122232425
2627282930  

Calendário Calendário

Visitou

Banner expandivel

Ir em baixo

Tutoriais Banner expandivel

Mensagem por konan em Qui 16 Jun 2011 - 21:29

Veja aqui como fazer um banner que se expande ao passar do mouse
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.
[Você precisa estar registrado e conectado para ver esta imagem.]
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.
[Você precisa estar registrado e conectado para ver esta imagem.]
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.
[Você precisa estar registrado e conectado para ver esta imagem.]
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”.
[Você precisa estar registrado e conectado para ver esta imagem.]
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
[Você precisa estar registrado e conectado para ver esta imagem.]
Com o botão selecionado, pressione “F9” para abrir a paleta “Actions”.
Dentro da paleta digite:
Código:
[/color]
[color=#009933]on (rollOut) {
gotoAndStop(”cena1″, 1)
} [/color]
[color=#009933]on (rollOver) {
gotoAndPlay(”rollover”, 1)
}[/color]
[color=#009933]

[Você precisa estar registrado e conectado para ver esta imagem.]
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:
Código:
[/color]
[color=#009933]on (rollOut) {
gotoAndStop(”cena1″, 1)
}
on (release) {
getURL(’http://www.suapagina.html’, ‘_blank’)
}[/color]
[color=#009933]

[Você precisa estar registrado e conectado para ver esta imagem.]
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.
[Você precisa estar registrado e conectado para ver esta imagem.]
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.
[Você precisa estar registrado e conectado para ver esta imagem.]
Pronto, agora nosso banner está inserido na página.
avatar
konan
Uplouder
Uplouder

Respeito às regras : Respeito as regras 100%

Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 26

Voltar ao Topo Ir em baixo

Voltar ao Topo


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