Coluna Dreamweaver - Framework Spry: Effects

Introdução

Salve Pessoal! Recebi alguns e-mail querendo algo mais complexo, que possa integrar as varias funções do Spry. Mais para que possamos fazer isso devemos conhecer antes todas as funções do Spry. Vale ressalta também a dificuldade em encontrar documentação sobre a utilização do Spry pelo Dreamweaver. Então nesse tutorial vamos conhecer o Effects do Spry, fiz alguns exemplos que podem ser visto clicando aqui.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui

Conceitos

O Effects é um conjunto de efeitos visuais do Frameworks Spry, que pode ser adicionado em diversos elementos do HTML. No Dreamweaver os efeitos podem ser adicionados no modo Design, sem a necessidade de trabalhar diretamente com código, falicitando ainda mais a adição desses efeitos. O Effects fica localizado no Painel de Behaviors (Windows > Behaviors) como um comportamento normal, podendo ser ativado com diversos eventos.

Conteúdo

Appear/ Fade

Esse efeito faz o elemento selecionado ir aparecendo ou surgindo na tela. Pode usar este efeito com todos os objetos do HTML exceto o applet, body, iframe, tr, tbody, ou th.Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Appear/Fade. A janela de configuração do efeito fade ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milissegundos.
Effect: Tipo de efeito podendo ser o Fade onde a camada vai sumindo aos poucos, ou Appear onde a camada vai aparecendo.
From: Tamanho da camada em porcentagem quando o efeito iniciar.
To: Tamanho da camada porcentagem quando o efeito terminar

Blind

Esse efeito faz a camada selecionada subir ou descer lentamente semelhante a uma cortina que sendo aberta ou fechada. Pode ser usado somente com estes objetos do HTML: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu, ou pré. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Blind. A janela de configuração do efeito Blind vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser o Blind Up aonde a camada vai subindo, ou Blind Down aonde a camada vai descendo na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.

Grow/ Shrink

Esse efeito faz o elemento selecionado crescer ou diminuir. Pode ser usado com estes objetos do HTML: address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu, o pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Grow/ Shrink. A janela de configuração do efeito Grow/ Shrink vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Effect: Tipo de efeito podendo ser Grow aonde a camada vai crescer, ou Shrink aonde a camada vai diminuir na tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar.
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar.
To: Para que local a camada deve ir quando o efeito for selecionado podendo ser ao centro ou a esquerda superior.

Shake

Esse efeito faz o elemento selecionado dar uma tremida. Você pode usar este efeito com estes objetos do HTML: address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre, ou table. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Squish

Esse efeito faz o elemento selecionado desaparecer. Você pode usar este efeito com estes objetos do HTML: address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu, or pre. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Squish. A janela de configuração do efeito Squish vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.

Slide

Esse efeito faz uma transição podendo ser para cima ou para baixo. Você pode usar este efeito com estes objetos do HTML: blockquote, dd, div, form, or cente. Esse efeito requer uma única tag ID e os efeitos dentro do elemento com tag ID. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Shake. A janela de configuração do efeito Shake vai se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos
Effect: Tipo de efeito podendo ser Slide UP aonde a camada vai subir, ou Slide Down aonde a camada vai descendona tela.
From: Tamanho da camada porcentagem ou pixel quando o efeito iniciar
To: Tamanho da camada porcentagem ou pixel quando o efeito terminar

Highlight

Esse efeito faz o elemento selecionado ir trocando as cores. Pode ser usado com todos os objetos do HTML exceto o applet, body, frame, frameset, ou noframes. Para aplicá-lo você deve selecionar aonde será ativado, podendo ser o próprio elemento, depois ir ao Painel Behaviors do Dreamweaver (Windows > Behaviors), clicar no botão adicionar comportamento (+), selecionar a opção Effects e depois o Highlight. A janela de configuração do efeito Highlight ira se abrir para podemos configurá-lo.

Target Element: Selecionar o ID do objeto ou elemento onde será aplicado o efeito. Se você já estiver selecionado o objeto, pode escolher <Current Selection>.
Effect duration: Tempo de duração do efeito em milisegundos.
Start Color: Cor com qual o efeito vai iniciar.
End Color: Cor com qual o efeito vai terminar.
Color after Effect: Esta cor dura somente durante a duração do efeito

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos - Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br