Banner Em Flash

olá pessoal,

Como fazer aqueles banners que aumentam de tamanho, como se "desdobrassem" na tela? no flash? Como são feitos?
e aonde posso arrumar um pronto "fla" para que eu possa editar.

Obrigado
valeu galera

Edição feita por: lfabio, 13/09/2005, 20:36.

Você poderia desenvolver o seu banner com o tamanho final dele, e simplesmente adicionar a propriedade de transparência, dessa forma, somente o conteúdo ficaria visivel, não toda a área do swf.

E controlava a visualização do conteúdo pelo próprio Flash.

So completando...

Autor: Felipe Gomes
Site: Imasters

Olá amigos do iMasters.

Para minha primeira matéria publicada aqui, preparei algo que interessa a muita gente. É um novo formato publicitário que valoriza a publicidade on-line, o "expandable banner".

O expandable banner é, a principio, um full banner (468x60) 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 468x280 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 468x60, 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ê colocar 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 468x60 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 468x280, 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(‘www.imasters.com.br’, ‘_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.

Se quiser baixar os arquivos deste tuto:
Clique aqui

Um abraço,
Patrique André

Valeu Patrique,

era isso que eu queria, mais esta acontecendo um problema quando mando abrir o arquivo "fla" que baixei a parece uma menssagem de erro "Formato do arquivo não esperado" o que sera que esta acontecendo eu uso o flash MX.
Obrigado mais uma vez

Isso ta acontecendo pois vc esta usando a versão mais antiga.... esse fla foi feito no mx2004 mais me mande o seu email que eu compilo ela na versão mais antiga... qual vc ta usando mx ou 5?

Um abraço,
Patrique André

Gente aproveitando a deixa......eu tentei aki e nao entendi nada......como é para colocar esse banner no site....tipo eu coloque aqui e eles fica por cima de todo mundo tipo.....eu fiz uma tabela e coloquei ele lá...so quando visualizo ele se espande normal so q a tabela fica enorma no caso do tamanho dele...gente nao entendi o pq....quem poder me ajudar....


Brigadao

Gente aproveitando a deixa......eu tentei aki e nao entendi nada......como é para colocar esse banner no site....tipo eu coloque aqui e eles fica por cima de todo mundo tipo.....eu fiz uma tabela e coloquei ele lá...so quando visualizo ele se espande normal so q a tabela fica enorma no caso do tamanho dele...gente nao entendi o pq....quem poder me ajudar....


Brigadao

O certo de se inserir o banner não é em tabela mas sim em camada (layer). E como inserir no tutorial acima tem falando tudo!

Segue a parte do tutorial que fala sobre inserir o banner:

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.

Se quiser baixar os arquivos deste tuto:
Clique aqui



Excelente Tutorial Patrique!!!

Edição feita por: Graphics.jr, 14/09/2005, 11:05.

Coisa rápida. Tô me batendo com esse tut. Acho q por inexperiência minha, mas me perdoem.

Onde é q eu coloco aquele código da figura 6??? Se for no botao, o mesmo já tem o código descrito acima da figura. Alguém pode me dar um help?

E ai Greeboy beleza,

O codigo da figura 6 é o:

stop();

Um abraço,
Patrique André