Rogério Lino » flutuante

Flash e CSS: Banner Flutuante

Rogério Alencar Lino Filho — Sun, 04 Feb 2007 20:45:42 +0000

Muitos sites, portais, adotaram o banner flutuante, aquele no qual ao você passar o mouse por cima ele “cresce” pela página e mostra os detalhes da propaganda, promoções, etc.

A idéia então consiste em posicionar o filme por cima dos outros elementos e ele tem que ter o fundo transparente para não “tampar” o conteúdo.

Então chegamos a conclusão que é só deixar o filme com o fundo transparente e colocá-lo numa div com position absolute? Certo.

Primeiramente vamos ao SWF, no Flash crie um novo documento. Nesse exemplo eu criei um de tamanho 468×280.

No primeiro frame coloque a action stop() para o filme não começar sozinho.

Desenhei um retângulo que cobre todo o palco na horizontal e com altura de 60 pixels. Dupliquei ele (copia e cola) e apertei o F8 para transformá-lo em um MovieClip. Ele vai ser o nosso botão para quando passar o mouse dar o play() no filme.

Instanciei de btn e apliquei o alpha para 0%, para deixar ele transparente. E adicionei no primeiro frame a seguinte action:

btn.onRollOver = function() {
    _root.gotoAndPlay(2);
}

Com essa action definimos que ao passar o mouse sobre o botão (btn) o filme irá para seguir a partir do segundo frame.

E no frame 2 em diante fiz uma animação simple para dar impressão do fundo estar crescendo para baixo. No último frame da animação também adicionei a action stop(); para o filme não voltar para o primeiro frame.

Também temos que colocar uma action para ao tirar o mouse (rolar fora) do botão a animação ir e parar no primeiro frame. E também uma para quando clicar. Essa action pode ser colocada no primeiro frame também.

btn.onRollOut = function() {
    _root.gotoAndStop(1);
}

btn.onRelease = function() {
    getURL("http://rogeriolino.com/", "_blank");
}

Na primeira faz com que ao tirar o mouse de cima do botão volte para o primeiro frame mas não continua o filme (stop). Na segunda tem a função getURL() que funciona como a tag no html, seus parâmetros são: página/endereço e alvo/target (_blank = nova página / _self = mesma página / _parent = pai do frame).

Com a nossa animação pronta vamos ao HTML:

Vamos colocar o SWF dentro de uma div chamada banner:

E o nosso CSS:

#banner {
    margin-left: 250px;
    _margin-left: 10px;
    padding: 20px;
    position: absolute;
}

O hack na margin é por causa do IE.

E pronto, já podemos ver nossa propaganda flutuante funcionando. Download do exemplo.

Flash: startDrag() e stopDrag()

Rogério Alencar Lino Filho — Mon, 29 Jan 2007 17:34:33 +0000

Aproveitando o post anterior sobre uma div arrastável usando Javascript. Vamos ver agora como seria feito uma janela também arrastável só que no Flash.

Primeiro de tudo é desenharmos nossa janela, ela será divida da seguinte maneira:

janela (MovieClip Principal)
|– barra;
|– minimax;
|– fechar;
\– conteudo.

Use as ferramentas de desenho para construir a janela, mas deixe os desenhos separados como mostrado acima. Se você ainda não está familiarizado leia este post primeiro.

A minha janela ficou assim:

Aonde cada parte (desenho) é um MovieClip diferente, para transformar o seu desenho em MovieClip selecione ele aperte F8 coloque o nome do MC e verifique se o radiobutton MovieClip realmente está marcado.

Após criado o Movie devemos instanciâ-lo, para isso clique nele e vá na aba Propriedades (CTRL+F3), preencha o campo instância (siga os nomes definidos acima).

Com os quatros MovieClips prontos (barra, minimax, fechar e conteudo) selecione-os e aperte novamente F8 para transformá-los no nosso MC janela.

Caso você queira editar algum movie ou apenas posicionar melhor, dê um duplo clique nele e poderá navegar através dos demais que estão contidos nele.

Agora com os MCs criados e instanciados, vamos às actions:

Clique no frame principal (o primeiro frame da timeline) e aperte F9. Cole o código abaixo:

this.janela.barra.onPress = function() {
    this._parent.startDrag();
}

this.janela.barra.onRelease = function() {
    this._parent.stopDrag();
}

this.janela.fechar.onRelease = function() {
    this._parent._visible = false;
}

this.abrir.onRelease = function() {
    this._parent.janela._visible = true;
}

this.janela.minimax.onRelease = function() {
    this._parent.conteudo._visible = !this._parent.conteudo._visible;
}

Ao contrário do Javascript e das versões bem mais antigas (até a 5) do Flash não é necessário um método para pegar um alvo. Você mostra o caminha para se chegar nele a partir do palco (_root sempre para raiz, ou this este filme – isso ficará mais claro quando aprendermos sobre carregar filme externo).

Por exemplo o movie fechar está no dentro do MC janela que por sua vez está no palco, então: this.janela.fechar. E se você estiver em um MC (fehcar por exemplo) e queira acessar o seu pai (janela), fica assim: this._parent.

Repare no código que a lógica é a mesma, porém no Flash tem um método nativo para realiza esse arrastar (startDrag()) e um para parar esse arrastar (stopDrag()). O que no HTML temos que fazer na mão mesmo.

O que reduz e muito o código final. Agora é só testar (CTRL+ENTER).

Para ver o exemplo clique aqui.

Javascript: Draggable Window

Rogério Alencar Lino Filho — Thu, 25 Jan 2007 23:11:33 +0000

Tem algum tempo já que estava de bobeira e acabei fazendo um exemplo de uma div (janela) arrastável.

Simulei uma janela padrão em alguns Sistemas Operacionais, tem a barra superior com o título da janela, o espaço ao centro para o conteúdo e uma barra no final, a statusbar (essa só para incrementar mesmo).

Há nela também três opções: “minimizar/maximizar“, “esconder” e “fechar“.

Na opção “minimizar” é alterado a propriedade display do CSS da parte do conteúdo para none. Voltando para block com “maximizar”.

O “esconder” além de aproveitar a função para “minimizar” também altera o display da statusbar para none. E seta a posição da janela para a origem da tela (left:0 e top: 0).

E o “fechar” por sua vez altera a propriedade do visibility do CSS da janela toda para hidden. E no palco tem uma opção para (re)abrir a janela, que altera o visibility para visible.

O porquê de usar visibility para “fechar” a janela é porque não queremos mudar o comportamento da janela, como ela é vista, e sim só sumir, torná-la invisível. O mesmo não funcionaria muito bem com o conteúdo porque fazendo ele só sumir ainda ficaria o seu “espaço guardado” fazendo apenas o conteúdo ficar invisível ao invéz da janela realmente minimizar.

Ao arrastar a janela também é alterado o cursor, mudando para move. O que caracteriza melhor a janela sendo arrastada.

Qualquer dúvida é só deixar no comentário.

Exemplo: Draggable Window

Source: Draggable Window