IM10 Animated Glow Filter - formatação adian

    
IM10 Animated Glow Filter

Neste tutorial iremos estudar um script que cria efeito de sombra em imagens colocadas nas laterais no background, utilizando o filtro glow .  Esse efeito é animado e sua espessura pode ser modificada a gosto  do usuário.

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem".
3 - Coloque o cursor no início da tag de fechamento da mensagem </BODY></HTML> e clique em Enter:

4 - Copie (Ctrl + C) o script abaixo e cole (Ctrl + V) no espaço criado.

Script Animated_glow_filter

<STYLE>
BODY {
BORDER-RIGHT: #e6ad67 10px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #e6ad67 10px ridge; SCROLLBAR-FACE-COLOR: #f0e0c7; BACKGROUND-ATTACHMENT: scroll; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #f0e0c7; BORDER-LEFT: #e6ad67 10px ridge; SCROLLBAR-SHADOW-COLOR: #e6ad67; SCROLLBAR-3DLIGHT-COLOR: #f0e0c7; SCROLLBAR-ARROW-COLOR: #e6ad67; SCROLLBAR-TRACK-COLOR: #f0e0c7; BORDER-BOTTOM: #e6ad67 10px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-DARKSHADOW-COLOR: #f0e0c7; SCROLLBAR-BASE-COLOR: #f0e0c7; BACKGROUND-COLOR: #ffffff
}
.offscrn {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}

.pl {
LEFT: 20px; WIDTH: 300px; BOTTOM: 20px; POSITION: absolute; HEIGHT: 313px
}
.pl1 {
RIGHT: 20px; WIDTH: 300px; BOTTOM: 20px; POSITION: absolute; HEIGHT: 313px
}
.text {
BORDER-RIGHT: #e6ad67 5px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #e6ad67 5px ridge; PADDING-LEFT: 15px; FONT-SIZE: 14pt; LEFT: 30%; PADDING-BOTTOM: 15px; OVERFLOW: auto; BORDER-LEFT: #e6ad67 5px ridge; WIDTH: 40%; COLOR: #d28641; PADDING-TOP: 15px; BORDER-BOTTOM: #e6ad67 5px ridge; FONT-FAMILY: papyrus; POSITION: absolute; TOP: 10%; HEIGHT: 70%; TEXT-ALIGN: center
}
</STYLE>
<!-- Glowing Image -->
<META content="MSHTML 6.00.6000.16414" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff
background=CAMINHO DO BACKGROUND AQUI>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT>&nbsp;</DIV>
<DIV style="FONT: 10pt arial">
<DIV><FONT face="Trebuchet MS" color=#000080 size=3></FONT>&nbsp;</DIV></DIV>
<DIV><BR></DIV>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT>&nbsp;</DIV>
<DIV style="FONT: 10pt arial">&nbsp;</DIV>
<DIV>&nbsp;</DIV><IMG class=pl id=glower
src="CAMINHO DA IMAGEM (GIF) DA DIREITA"> <IMG
class=pl1 id=glower1
src="CAMINHO DA IMAGEM (GIF) DA ESQUERDA"> <!--bacground text division --><IMG class=offscrn id=dcc1
src="CAMINHO DO BACKGROUND DA CAIXA DE TEXTO"> <!-- background image --><!-- midi -->
<DIV class=text id=sdb1 align=center><BR>TEXTO<BR></DIV>
<SCRIPT language=VBScript>
'---------------------------------------
'Diana Haveman
'11-02-2007
'Dont remove this lines
'Shavannah design
'http://www.shavannah.nl
'----------------------------------------

Option Explicit
SetLocale("en-gb")

sdb1.style.backgroundImage="URL("&dcc1.src&")"

Dim clr, glowstrength, minstrength, maxstrength, changestrength

'------------ User settings -----------
Rem set glow color
clr="#E3384B"

Rem set maximun strength of glowfilter
maxstrength=20

Rem set minimum strength of glowfilter
minstrength=1

'-------- end of User settings ---------

Rem set rate of change to glowscript
changestrength=1

glowstrength=maxstrength

sub window_onload()
glower.style.filter="glow()"
glower.filters(0).color=clr
glower.filters(0).strength=glowstrength

glower1.style.filter="glow()"
glower1.filters(0).color=clr
glower1.filters(0).strength=glowstrength
end sub

window.setInterval "glow",100

sub glow()
glowstrength=glowstrength-changestrength
if glowstrength>=maxstrength or glowstrength<=minstrength then changestrength=-changestrength
glower.filters(0).strength=glowstrength
glower1.filters(0).strength=glowstrength
end sub

</SCRIPT>

Para a execução deste tutorial, você vai precisar de uma gif. Abra-a no Animation Shop e aplique o mirror e salve. Assim, você terá uma pra colocar como  GIF DIREITA e outra para GIF ESQUERDA.
5 - Colado o script, cole também os endereços dos backgrounds e gifs, nos "CAMINHOS" correspondentes (destacados em vermelho neste tutorial).
6 - Após colocar todas as imagens, cheque o efeito clicando na abinha Visualizar.
7 - Depois de visualizado o efeito, vamos estudar detalhadamente esse script e ver onde pode ser alterado. Para isso clique novamente na aba Origem.

Vamos ver as alterações que podem ser feitas no script:

Localize o trecho:

a)
BODY {
BORDER-RIGHT: #e6ad67 10px ridge; BACKGROUND-POSITION: left top; BORDER-TOP: #e6ad67 10px ridge; SCROLLBAR-FACE-COLOR: #f0e0c7; BACKGROUND-ATTACHMENT: scroll; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #f0e0c7; BORDER-LEFT: #e6ad67 10px ridge; SCROLLBAR-SHADOW-COLOR: #e6ad67; SCROLLBAR-3DLIGHT-COLOR: #f0e0c7; SCROLLBAR-ARROW-COLOR: #e6ad67; SCROLLBAR-TRACK-COLOR: #f0e0c7; BORDER-BOTTOM: #e6ad67 10px ridge; BACKGROUND-REPEAT: repeat; SCROLLBAR-DARKSHADOW-COLOR: #f0e0c7; SCROLLBAR-BASE-COLOR: #f0e0c7; BACKGROUND-COLOR: #ffffff

Os códigos que estão em verde são os responsáveis pela cor das bordas da tabela. Essa cor deve combinar com o background.
Os códigos que estão em laranja são os responsáveis pelas cores da barra de rolagem. Elas devem combinar com o background.


b)
.pl {
LEFT: 20px; WIDTH: 300px; BOTTOM: 20px; POSITION: absolute; HEIGHT: 313px
}
.pl1 {
RIGHT: 20px; WIDTH: 300px; BOTTOM: 20px; POSITION: absolute; HEIGHT: 313px
}

Os valores que estão em roxo são os que determinam as distâncias referentes ao posicionamento das imagens em relação às margens esquerda (LEFT) e direita (RIGHT) e, também em relação à margem inferior (BOTTOM).
Os valores que estão em verde são referentes a largura (WIDTH) e altura (HEIGHT) das gifs.


c)
.text {
BORDER-RIGHT: #e6ad67 5px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #e6ad67 5px ridge; PADDING-LEFT: 15px; FONT-SIZE: 14pt; LEFT: 30%; PADDING-BOTTOM: 15px; OVERFLOW: auto; BORDER-LEFT: #e6ad67 5px ridge; WIDTH: 40%; COLOR: #d28641; PADDING-TOP: 15px; BORDER-BOTTOM: #e6ad67 5px ridge; FONT-FAMILY: papyrus; POSITION: absolute; TOP: 10%; HEIGHT: 70%; TEXT-ALIGN: center
}

Os valores que estão em rosa são os responsáveis pela cor das bordas da tabela que contem a caixa de texto. Essa cor deve combinar com o background.


d)
Rem set glow color
clr="#E3384B"

Esse é o código que altera a cor do efeito do filtro glow.


e)
Rem set maximun strength of glowfilter
maxstrength=20

Esse valor determina largura máxima do efeito do filtro glow. Você pode aumentar ou diminuir.


f)
Rem set minimum strength of glowfilter
minstrength=1

Esse valor determina largura mínima do efeito do filtro glow. Você pode aumentar ou diminuir.


8 - Mais uma vez visualize seu trabalho. Estando tudo certinho e a seu gosto, volte à abinha "Editar" e complete a formatação com:
Script para rodapé (Como sugestão, você poderá usar o script que está disponível em Scritp)
Texto
Música online
Assinatura ( opcional)

Se precisar de ajuda é só pedir que teremos o maior prazer em ajudá-lo.

IM10 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o  Script Antimated Glow Filter.
background
Imagem
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé
Música
Assinatura (opcional)




Não esqueça, por favor:
BBBB Colocar no assunto: seu nome ou nick - IM10 - Antimated Glow Filter.
BBBB No corpo do e-mail coloque o endereço correspondente a esse tutorial como hiperlink numa imagem pequena ou palavra.
BBBB Verificar o peso de sua mensagem.
BBBB Não esqueça do anti-banner

Copyright© 2002/2007 Dama Da Noite * Todos os direitos reservados*

Esse  tutorial foi criado por Esmê, em maio/2007, especialmente para o Grupo PSP Brasil.

É expressamente proibida, por lei, a divulgação desta página em outro site ou qualquer outro modo de veiculação sem a autorização expressa da autora ou dos detentores de copyright do texto, da formatação e dos demais elementos que compõem a página. 

Direitos Autorais protegidos pela Lei 9.610 de 19/02/1998.