Início
#1
Expansão de banner ao passar o mouse Qua maio 16, 2012 4:21 pm
Daniel D2S
Admin
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:
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:
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:
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:
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.
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.
