IM01 Gif Flutuante - formatação adian

    IM01 Gif Flutuante

Vamos aprender a usar este script que faz com que uma gif "flutue"  por todo o background.

1 - Abra uma nova mensagem no Outlook.
2 - Clique na Abinha "Origem".
3 - Coloque o cursor no final do código referente à cor de fundo "bgColor=#fffffff" e dê "Enter":

4 - Copie o código abaixo e cole no lugar indicado:

<IMG id=pic style="DISPLAY: none" src="CAMINHO DA IMAGEM">
<SCRIPT language=VBSCRIPT>
' Edgar V. Poirier
' moomoo@nbnet.nb.ca
Dim w, x(2), y(2), ox(2), oy(2), cW(2), cH(2), sL(2), sT(2)

Set w=document.body

sub setUp()
on error resume next

' Get window dimensions
cW(0)=w.clientWidth
cH(0)=w.clientHeight
sL(0)=w.scrollLeft
sT(0)=w.scrollTop
cW(1)=box0.clientWidth
cH(1)=box0.clientHeight
sL(1)=box0.scrollLeft
sT(1)=box0.scrollTop
cW(2)=box1.clientWidth
cH(2)=box1.clientHeight
sL(2)=box1.scrollLeft
sT(2)=box1.scrollTop
' Bounce increment
ox(0)=2
oy(0)=2
ox(1)=4
oy(1)=4
ox(2)=4
oy(2)=4
' Initial coordinates
x(0)=0
y(0)=0
x(1)=10
y(1)=10
x(2)=10
y(2)=40
' start bouncing
bnce

end sub

sub bnce()
ClearTimeOut(myTimer)
' VBScript version of bounce routine
' Box0 bounce
Set bal=document.all("box0")
' Increment position
x(0)=x(0)+ox(0)
y(0)=y(0)+oy(0)
' Check for walls
if (x(0) + bal.offsetWidth > cW(0) + sL(0)) OR (x(0) <= sL(0)) then
ox(0)=-ox(0)
if (x(0) < sL(0)) then x(0) = sL(0)
if (x(0) + bal.offsetwidth > cW(0) + sL(0)) then x(0) = cW(0) - bal.offsetWidth + sL(0)
end if
if (y(0) + bal.offsetHeight > cH(0) + sT(0)) OR (y(0) <= sT(0)) then
oy(0)=-oy(0)
if (y(0) < sT(0)) then y(0) = sT(0)
if (y(0) + bal.offsetHeight > cH(0) + sT(0)) then y(0) = cH(0) - bal.offsetHeight + sT(0)
end if
' Position object
bal.style.posTop = y(0)
bal.style.posLeft = x(0)

' Box1 bounce
Set bal=document.all("box1")
' Increment position
x(1)=x(1)+ox(1)
y(1)=y(1)+oy(1)
' Check for walls
if (x(1) + bal.offsetWidth > cW(1) + sL(1)) OR (x(1) <= sL(1)) then
ox(1)=-ox(1)
if (x(1) < sL(1)) then x(1) = sL(1)
if (x(1) + bal.offsetwidth > cW(1) + sL(1)) then x(1) = cW(1) - bal.offsetWidth + sL(1)
end if
if (y(1) + bal.offsetHeight > cH(1) + sT(1)) OR (y(1) <= sT(1)) then
oy(1)=-oy(1)
if (y(1) < sT(1)) then y(1) = sT(1)
if (y(1) + bal.offsetHeight > cH(1) + sT(1)) then y(1) = cH(1) - bal.offsetHeight + sT(1)
end if
' Position object
bal.style.posTop = y(1)
bal.style.posLeft = x(1)

' Bouncing ball
Set bal=document.all("ball")
' Increment position
x(2)=x(2)+ox(2)
y(2)=y(2)+oy(2)
' Check for walls
if (x(2) + bal.offsetWidth > cW(2) + sL(2)) OR (x(2) <= sL(2)) then
ox(2)=-ox(2)
if (x(2) < sL(2)) then x(2) = sL(2)
if (x(2) + bal.offsetwidth > cW(2) + sL(2)) then x(2) = cW(2) - bal.offsetWidth + sL(2)
end if
if (y(2) + bal.offsetHeight > cH(2) + sT(2)) OR (y(2) <= sT(2)) then
oy(2)=-oy(2)
if (y(2) < sT(2)) then y(2) = sT(2)
if (y(2) + bal.offsetHeight > cH(2) + sT(2)) then y(2) = cH(2) - bal.offsetHeight + sT(2)
end if
' Position object
bal.style.posTop = y(2)
bal.style.posLeft = x(2)
' Repeat. If bounce is too fast, increase the number
' in the line below from the default value of 20.
myTimer=SetTimeOut("bnce",60)
end sub

' This sub starts the action as soon as the message is received.
sub window_OnLoad()
' Create a DIV for the backgrounds. Only runs once.
data=data&"<DIV id=box0 style='position: absolute; top: 0; left: 0"
data=data&";height: 420; width: 350; z-index: 5'>"
data=data&"<DIV id=box1 style='position: absolute; top: 0; left: 0"
data=data&";height: 150; width: 150; z-index: 5'>"
data=data&"<IMG id=ball src='"&pic.src&"' style="
data=data&"'position:absolute;top:0;left:0'>"
data=data&"</DIV></DIV>"
w.InsertAdjacentHTML "AfterBegin", data
REM w.scroll="no"
setUp
end sub

' In case window is re-sized
sub window_OnResize()
setUp
end sub

' In case text is scrolled this keeps the bouncing inside the window.
sub window_OnScroll()
sL(0)=w.scrollLeft
sT(0)=w.scrollTop
sL(1)=box0.scrollLeft
sT(1)=box0.scrollTop
sL(2)=box1.scrollLeft
sT(2)=box1.scrollTop
end sub
</SCRIPT>

A imagem usada no script deve ser com terminação gif.
Para mudar o velocidade, altere o valor em:       myTimer=SetTimeOut("bnce",60)  -  Quanto menor o número, mais rápido será o movimento e vice versa.
5 - Após colar o script, clique na abinha "Editar". Aparecerá um XX vermelhinho:

6 - Clique em "Inserir Imagem"  e procure o caminho da  imagem. Vá  até a pastinha onde salvou sua gif e clique em abrir . Aparecerá o caminho:

7 - Copie esse caminho colocando o cursor dentro do local onde está o endereço;  dê Ctrl+A para selecionar todo o endereço e em seguida dê    Ctrl +C para copiar.
8 - Nessa janelinha clique em "Cancelar".
9 - Clique na abinha "Origem" procure no script a frase: CAMINHO DA IMAGEM

10 -Apague e cole ( Ctrl+V) o endereço:

O endereço tem que ficar entre aspas.

11 - Após colocar o caminho da imagem de sua gif, cheque o efeito na abinha "Visualizar". Verifique se sua gif está flutuando pela mensagem.
12 - Está pronto o seu efeito.  Aqui termina a aplicação do script.
13 - Agora volte a Abinha "Editar" para completar a formatação incluindo:
Background (Formatar/Plano de fundo/ Imagem)
Imagens ( opcionais)
Borda colorida.
Barra de rolagem colorida
Script para rodapé ( opcional - pois muito interferem no funcionamento do script principal)
Texto
Música ( Formatar/Plano de fundo/ Som)
Assinatura ( opcional)
1 tabela (opcional) (abaixo você vai encontrar  sugestão de uma tabela em forma de script, já com o Filtro Alpha. Se for usá-la coloque em bgColor=#4e6a99 a mesma cor do background. Para  os demais códigos coloque uma cor contrastante.)

Sugestão de Tabela com Filtro Alpha

 <DIV align=center>
<TABLE
style="BORDER-RIGHT: #d5d6d8 7px dotted; BORDER-TOP: #d5d6d8 7px dotted; FILTER: Alpha(Opacity=80); BORDER-LEFT: #d5d6d8 7px dotted; BORDER-BOTTOM: #d5d6d8 7px dotted"
borderColor=#ffffff cellSpacing=10 cellPadding=10 width="70%" bgColor=#4e6a99
border=7>
<TBODY>
<TR>
<TD borderColor=#d5d6d8>&nbsp;</TD></TR></TBODY></TABLE>

Copie e cole o Script da Tabela, no final da origem antes de </BODY></HTML>.

 Sugestão de Script para Mensagem de Rodapé

 <SCRIPT language=JavaScript>
var hellotext="ESCREVER SEU TEXTO AQUI"
var thetext=""
var started=false
var step=0
var times=1
function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
window.status = hellotext;
setTimeout("anim()",1);
}
thetext = hellotext;
}
}
function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}
function anim()
{
step++
if (step==5) {step=1}
if (step==1) {window.status=']::--::--::--::--::--::--::--::--::'+thetext+ '::--::--::--::--::--::--::--::--::['}
if (step==2) {window.status=']-::--::--::--::--::--::--::--::--:'+thetext+'-::--::--::--::--::--::--::--::--:['}
if (step==3) {window.status=']--::--::--::--::--::--::--::--::--'+thetext+'--::--::--::--::--::--::--::--::--['}
if (step==4) {window.status=']:--::--::--::--::--::--::--::--::-'+thetext+':--::--::--::--::--::--::--::--::-['}
setTimeout("anim()",50);
}
welcometext();
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() {
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() {
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</SCRIPT>

Copie e cole o Script da mensagem do rodapé, novamente antes de </BODY></HTML>.





IM01 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito da gir flutuante;
Background
Imagens ( opcionais)
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)
Tabela (opcional)




Não esqueça, por favor:
colocar no assunto:  seu nome ou nick - IM01 `- Imagem:  Gif Flutuante
Crie seu próprio material para a formatar a aula
No corpo do e-mail coloque o link correspondente a esse tutorial.
Não esqueça do anti-banner
Verificar o Peso da Mensagem antes de enviar

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

Esse  tutorial foi criado por  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.