BO11 Tiras em Movimento - formatação adian

    
BO11 Tiras em Movimento

O script apresenta pra vc um efeito lindíssimo e muito interessante que é o background com tiras em movimento. E ainda vai além a imagem central abre em forma de estrela. Com certeza vc irá gostar muito.
Aconselho vc primeiramente dar uma olhada no modelo dessa aula. Antes de criar a sua formatação.

1 - Primeiro passo é criar a tag que será a imagem central. Crie sua própria tag com as seguintes medidas: 446 x 485pixels.

 : o script até permite mudar a medida da imagem central mas aconselho que não faça para não perder a beleza do conjunto.

A minha  Tag ficou assim:

2 - Vamos agora ter que criar 3 tiras como fundos transparentes. Para fazer com fundo transparente vc criará primeiramente no PSP  e terá que salvá-la no Animation como gif.

 Você não poderá  mudar as medidas abaixo:
Tira da Lateral Esquerda: 191x400pixels.
Observe: Deixei parte sólida e partes transparente. Pq a beleza desse script é juntamente em ver as tiras interagir. E a parte transparente que é responsável por isso.

 Quero lembrar que o Animation não reconhece sombras. As sombras em fundo transparente ele, o AS, as transforma em cores sólidas. Por essa razão evite o Drop Shadow nas partes vazadas de suas tiras.

Tira da Lateral Direita: 191x400pixels.
Você pode usar a mesa tira feita para à direita. Basta agora dar Flip no próprio animation e salvar novamente como gif, para que tenha fundo transparente.
PS: Se vc assinou a tirinha daí terá que voltar para o PSP dar undo e inverter apenas a faixa.

Tira do Top: 386x156pixels.

Para o top você precisará  de uma tira mais estreitinha. Mas mesmo assim, não se esqueça de deixar partes transparentes
A minha ficou assim:

3 - Para complementar o material necessário. Precisamos de uma cor para o fundo do papel de carta( Background) eu usei a mesma cor do fundo da minha tag , essa cor já deixei pronto no PSP para poder copiar seu código, para mais tarde colar no meu script. Minha cor é:#d2cdcc
4 - Para a caixa de texto eu desci um tom da cor que usei no fundo, fiz isso no próprio PSP:#f3f3f3
5 - E Para escrita e detalhes das bordas, caixa de texto e barra de rolagem eu subi alguns tons:#aaa5a4

Material todo Prontinho, agora sim vou trabalhar com o outlook e com script.

6 - Abrindo o Outlook vou inserir o código:
Vou inserir na abinha"Origem"
Vamos usar aqui o processo de substituição do código e sua posterior complementação.
7 - Delete todo o código existente e cole em seu lugar o código abaixo:

Script -  Tiras em Movimento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>BODY {
BORDER-RIGHT: #aaa5a4 2px solid; BORDER-TOP: #aaa5a4 2px solid; SCROLLBAR-HIGHLIGHT-COLOR: #aaa5a4; BORDER-LEFT: #aaa5a4 2px solid; SCROLLBAR-SHADOW-COLOR: #d2cdcc; SCROLLBAR-ARROW-COLOR: #aaa5a4; SCROLLBAR-TRACK-COLOR: #d2cdcc; BORDER-BOTTOM: #aaa5a4 2px solid; SCROLLBAR-BASE-COLOR: #d2cdcc
}
.box1 {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
.box2 {
LEFT: 0px; POSITION: absolute; TOP: 2px
}
.box3 {
RIGHT: 0px; POSITION: absolute; TOP: 0px
}
.bg {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
.pic {
LEFT: -1800px; VISIBILITY: hidden; POSITION: absolute; TOP: -1800px
}
.mess {
PADDING-RIGHT: 10px; BORDER-TOP: #aaa5a4 2px solid; PADDING-LEFT: 10px; FONT-SIZE: 16pt; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; OVERFLOW: auto; COLOR: #76272a; PADDING-TOP: 10px; BORDER-BOTTOM: #aaa5a4  2px solid; FONT-FAMILY: Comic Sans MS; POSITION: absolute; TOP: 0px; HEIGHT: 200px; BACKGROUND-COLOR: #e8e6e6; TEXT-ALIGN: center
}
A:link {
FONT-SIZE: 12pt; COLOR: #aaa5a4; FONT-FAMILY: Comic Sans MS
}
A:visited {
FONT-SIZE: 12pt; COLOR: #aaa5a4; FONT-FAMILY: Comic Sans MS
}
A:active {
FONT-SIZE: 12pt; COLOR: #aaa5a4; FONT-FAMILY: Comic Sans MS
}
</STYLE>
<!--hieronder de kleur van de achtergrond aanpassen-->
<META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD>
<BODY bgColor=#d2cdcc>
<DIV>&nbsp;</DIV><BGSOUND balance=0 src="caminho da musica"
volume=0 loop=infinite><!--plaatje linkerscroll, wijdtemaat vermelden-->
<DIV class=box1 id=box1 style="WIDTH: 200px"></DIV><IMG class=bg id=bkg1
src="CAMINHO DA TIRA DA LATERAL ESQUERDA">
<DIV></DIV><!--plaatje bovenscroll, hoogtemaat vermelden-->
<DIV class=box2 id=box2 style="HEIGHT: 157px"></DIV><IMG class=bg id=bkg2
src="CAMINHO DA TIRA DE TOP">
<DIV></DIV><!--plaatje rechterscroll, wijdtemaat vermelden-->
<DIV class=box3 id=box3 style="WIDTH: 200px"></DIV><IMG class=bg id=bkg3
src="CAMINHO DA TIRA DA LATERAL DIREITA">
<DIV></DIV><!--hoofdplaatje, maat vermelden--><IMG class=pic id=pic height=446
src="CAMINHO DA IMAGEM PRINCIPAL" width=485> <!--tekstvak, wijdte van hoofdplaatje vermelden-->
<DIV class=mess id=tekst style="WIDTH: 485px">
<DIV><FONT color=#808080>Escreva aqui seu texto</FONT> <BR><BR><BR></DIV></DIV>
<SCRIPT language=VBScript>
'----------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'oktober 2004
'please leave these lines in
'----------------------------

Option Explicit
SetLocale("en-gb")

window.status="Escreve sua mensagem aqui"

Dim sch,scw,th,a,n,e,pich,picw,teksth,tekstw,box2h

a=0
n=0
e=0

pich=pic.offsetheight
picw=pic.offsetwidth
teksth=tekst.offsetheight
tekstw=tekst.offsetwidth
box2h=box2.offsetheight

box1.style.backgroundImage="URL("&bkg1.src&")"
box2.style.backgroundImage="URL("&bkg2.src&")"
box3.style.backgroundImage="URL("&bkg3.src&")"

Sub Window_OnLoad()
size_and_position
settimeout"start",100
end sub

sub size_and_position()
scw=document.body.clientWidth
sch=document.body.clientHeight
box1.style.height=box2h+pich+teksth+150
box2.style.width=scw
box3.style.height=box2h+pich+teksth+150
pic.style.posTop=box2h+50
pic.style.posLeft=(scw-picw)/2
tekst.style.posTop=box2h+pich+100
tekst.style.posLeft=(scw-picw)/2
End Sub

Sub start()
pic.style.filter="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)"
pic.filters(0).apply()
pic.style.visibility="visible"
pic.filters(0).play(6.000)
tekst.style.filter="progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)"
tekst.filters(0).apply()
tekst.style.visibility="visible"
tekst.filters(0).play(6.000)
window.SetTimeOut "scrollit",6000
end sub

sub scrollit()
window.SetInterval "scroll",64
end sub

sub scroll()
a=a+1
n=n-1
e=e
box1.style.backgroundposition=e&" "&n
box2.style.backgroundposition=a&" "&e
box3.style.backgroundposition=e&" "&a
end sub

sub window_onresize()
size_and_position
end sub

</SCRIPT>
</BODY></HTML>

 para as substituições.

Os códigos que estão destacados em vermelho, são os responsáveis pelas cores da bordas do e-mail e da barra de rolagem.

Os códigos em azul são responsável pela caixa de texto. Você terá que alterar a cores da BORDER-TOP e da BORDER-BOTTOM, para que combinem com seu conjunto assim como a cor do BACKGROUND-COLOR.

Em azul escuro  está destacado o código que pertence a cor de fundo do seu papel de carta( background) é nesse local que vc vai alterar o código da cor. Colocando uma cor que combine com seu conjunto.

Em roxo  está destacado a música que vc vai inserir pelo caminho: Formatar/Plano de Fundo/Som

Em azul claro está destacado onde vc deve inserir o caminho da tira da lateral esquerda

Em rosa está destacado onde vc deve inserir o caminho da tira do Top

Em laranja está destacado onde vc deve inserir o caminho da tira da lateral direita

Em verde escuro está destacado onde vc  dever inserir o caminho da imagem principal ( da Tag)

Em verde limão, destaquei os códigos responsáveis pelas medidas do da Tag, aconselho não alterar essas medidas.

Em amarelo está destacado os códigos responsáveis pela caixa de texto. Como largura da caixa de texto, cor da fonte e escrita.

Em rosa escuro, está destacado onde você deverá escrever a mensagem de rodapé

8  - Após colado o script na Origem, feito todas as modificações, coloque na abinha "Visualizar" para verificar o resultado.
9 -  Estando tudo certinho, volte para a abinha "Editar", dê um duplo clique na caixa de texto. Digite aí sua mensagem. Se  for copiar e colar, não esqueça de colá-lo antes no bloco de notas.
10 - Insira ainda uma bela música. Pelo caminho: Formatar/ Plano de fundo/Som

Trabalhoso , não?

Maravilhoso esse scritp da Annem@rie, não?

Mas que resultado maravilhoso!!

bom estudo pra vc

beijos brisa®

BO11 - Envie um e-mail com sua linda formatação personalizada:
Ele deverá conter:
Script  Background Tiras em Movimento
Background com combinando com imagem principal e tira
Uma tag com as medidas de 446 x 485 pixels
Três tiras nas medidas do tutorial
Texto
Música




Não esqueça, por favor:
Você deve usar seu próprio material para a formatação
Colocar no assunto: seu nome ou nick -BO11 - Background com tiras em movimento
Colocar no corpo do e-mail o link correspondente a esse tutorial inserido como hiperlink numa imagem pequena ou palavra.
Verificar o peso de sua mensagem.
Não esqueça principalmente do anti-banner, sem ele o banner poderá estragar sua linda formatação

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

Esse  tutorial foi criado por  brisa® em setembro de 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.