:: Tutorial de E-mails ::

Curso de Formatação Avançado- Lição 8

Texto com sombra - conhecendo melhor o filtro dropshadow

Imagens que "passeiam" na tela

Podemos usar um script do Edgar V. Poirier que gera um efeito interessante de imagens que "passeiam" pela tela do e-mail.

O ideal aqui é escolher imagens que combinem entre si ou usar uma mesma imagem para conseguir o efeito.

Faça o seguinte:

1. Abra uma nova mensagem

2. Clique na aba "Origem"

3. Apague tudo o que está na aba "Origem".

4. Cole o seguinte script:

Obs.: Substitua os endereços das imagens que estão em vermelho pelos endereços das imagens que você quer usar. Você pode usar imagens animadas ou não. Como eu disse, você poderá usar figuras iguais ou fazer as combinações que quiser e achar mais adequadas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tutorial de e-mail - Lili Russo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16608" name=GENERATOR></HEAD>
<BODY bgProperties=fixed bgColor=#ffffff
background="endereço do papel de carta algo do tipoC:\Arquivos de programas\Arquivos comuns\Microsoft Shared\Papel de carta\tutorial_fundo1.jpg">
<DIV style="FONT: 10pt arial">
<DIV><BR></DIV><FONT size=4>
<DIV align=center><FONT face="Comic Sans" color=#8080c0 size=5></FONT><IMG
id=pic0 style="LEFT: 104px; POSITION: absolute; TOP: 1005px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic1 style="LEFT: 92px; POSITION: absolute; TOP: 903px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic2 style="LEFT: 335px; POSITION: absolute; TOP: 940px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic3 style="LEFT: 295px; POSITION: absolute; TOP: 940px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic4 style="LEFT: 29px; POSITION: absolute; TOP: 903px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic5 style="LEFT: 114px; POSITION: absolute; TOP: 946px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic6 style="LEFT: 113px; POSITION: absolute; TOP: 994px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic7 style="LEFT: 72px; POSITION: absolute; TOP: 1019px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic8 style="LEFT: 117px; POSITION: absolute; TOP: 903px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<IMG id=pic9 style="LEFT: 23px; POSITION: absolute; TOP: 951px"
src="endereço da imagem algo do tipo C:\paginas\lili\palavrasesentimentos\gifs\coracao.gif">
<SCRIPT language=VBSCRIPT>
REM Edgar V. Poirier
REM moomoo@nbnet.nb.ca

REM IMPORTANT: Value in brackets for the arrays below taken from last image number.
REM The number in brackets for an array represent the total number of
REM items in the array. Note that the first item is number 0.

Dim w, wW, wH, an(9), x(9), y(9), ox(9), oy(9), c(9), cW, cH, sL, sT, numPics, capture

Set w=document.body

REM Initialize
sub setUp()
REM Get window dimensions
cW=w.clientWidth
cH=w.clientHeight
sL=w.scrollLeft
sT=w.scrollTop
capture=153
REM IMPORTANT: Enter number of last image here
numPics=9
for i=0 to numPics
randomize
REM Initially none are bouncing
c(i)=0
REM Number of pixels to move image per step
ox(i)=4
oy(i)=-4
REM Initial coordinates
an(i)=3.14159-i
x(i)=Int(SIN(an(i))* 50)+70
y(i)=Int(COS(an(i))* 50)+70
document.all("pic"&i).style.top=y(i)
document.all("pic"&i).style.left=x(i)
next
REM start bouncing
bnce
end sub

sub bnce()
ClearTimeOut(myTimer)
REM VBScript version of bounce routine
REM Loop for each object
for i=0 to numPics
if c(i)=1 then
REM This one is bouncing so check to see if
REM it is near the juggler. If too close, catch it.
if x(i)<50 and y(i)<50 then
c(i)=0
ox(i)=4
oy(i)=-4
end if
REM Calculate next move for bouncing object.
p="pic"&i
Set bal=document.all(p)
REM Increment position
x(i)=x(i)+ox(i)
y(i)=y(i)+oy(i)
REM Check for walls on right or left
if (x(i) + bal.offsetWidth > cW + sL) OR (x(i) <= sL) then
ox(i)=-ox(i)
if (x(i) < sL) then x(i) = sL
if (x(i) + bal.width > cW + sL) then x(i) = cW - bal.offsetWidth + sL
end if
REM Check for walls on bottom or top
if (y(i) + bal.offsetHeight > cH + sT) OR (y(i) <= sT+R) then
oy(i)=-oy(i)
if (y(i) < sT+R) then y(i) = sT+R
if (y(i) + bal.offsetHeight > cH + sT) then y(i) = cH - bal.offsetHeight + sT
end if
REM Position object
bal.style.posTop = y(i)
bal.style.posLeft = x(i)
else
REM Juggle the birds
an(i)=an(i)-.1
x(i)=Int(SIN(an(i))* 50)+70+sL
y(i)=Int(COS(an(i))* 50)+70+sT
document.all("pic"&i).style.top=y(i)
document.all("pic"&i).style.left=x(i)
REM Pick a number
sw=INT(rnd*1000)
REM If number is divisible by 333 then release bird.
if sw mod 333 = 0 then c(i)=1
end if
next
REM Repeat. If bounce is too fast, increase the number
REM in the line below from the default value of 12.
myTimer=SetTimeOut("bnce",12)
end sub

REM This sub starts the action as soon as the message is received.
sub window_OnLoad()
setUp
end sub

REM In case window is re-sized then re-calculate
sub window_OnResize()
setUp
end sub

REM In case text is scrolled, this keeps the bouncing objects inside the window.
sub window_OnScroll()
sL=w.scrollLeft
sT=w.scrollTop
end sub

</SCRIPT>
</DIV></FONT></DIV></BODY></HTML>

Obs.: Deixei em vermelho uma parte que pode ser alterada no script - (os valores positivo e negativo mudam o movimento)

Tarefa:

Crie um e-mail usando um back bem bonito e use o script das imagens que passeiam na tela. Lembre-se de usar uma moldura para a mensagem, deixar a barra de rolagem colorida, inserir um texto e uma música. Ah! Acrescente também uma mensagem de rodapé e envie ao grupo.

Importante: Insira seu cartão de visitas!

Endereço do grupo: tutorial_emails@yahoogrupos.com.br

Lembre-se de indicar no campo Assunto: Nome do aluno, Nível e Número da lição. Caso a lição tenha sido refeita, inclua a palavra "refeita".

Lição elaborada por Lilian Russo

Autor do script: Edgar V. Poirier


	.