IM11 Pequenas Imagens - formatação adian

    
IM11 Pequenas Imagens

Esse tutorial oferece o script de  pequenas imagens que ficam em movimento constante sobre o top.


1 - Primeiramente crie um top. Dê preferência a cores escuras.
2 - Formate o Top no Outlook.
3 - Salve em seu computador as imagens abaixo (também estão anexadas).

Imagem 1 - florzinha          Imagem 2 - estrelinha

                                   

4 - Inserindo o script
4.1 -Na abinha "Origem" cole o script do efeito, depois do código responsável pelo back. <BODY bgColor=#ffffff background= >
4.2 - Cole o seguinte código:

Script: Pequenas Imagens

<DIV align=center>&nbsp;</DIV>
<DIV align=center><BR><FONT color=#301818 size=4><EM><IMG class=hidimg
id=ballimg0
src="caminho da imagen 1">
<IMG class=hidimg id=ballimg1
src="caminho da imagem2">
</EM></FONT><SPAN id=container style="POSITION: absolute"
unselectable="on"></SPAN></DIV>
<DIV>
<SCRIPT>

/////////////////////////////////////
// //
/////////////////////////////////////

var ob=new Array();
var ta=0;
var tb=0;
var t=0;
var cosa,sina,cosb,sinb;
var vpz=10000;
var dbcw=document.body.clientWidth;
var dbch=document.body.clientHeight;
var dragging=false;
var dragx=0;
var dragy=0;
var dragstartx, dragstarty;
var dragstarta, dragstartb;


var i;
var persp=400;
var ff=new Array();

for(i=0;i<1000;i++){
ff[i]=persp/(persp-i+500);
}

resize();
document.body.onresize=resize;
document.body.onmousedown=omd;
document.body.onmouseup=omu;

d1=new dot(120,Math.PI/4,Math.PI/4,container,ballimg0.src);
d2=new dot(110,Math.PI/4,Math.PI/4,container,ballimg1.src);

setInterval("anim();",25);

function anim(){
var i;
sina=Math.sin(ta);
cosa=Math.cos(ta);
sinb=Math.sin(tb);
cosb=Math.cos(tb);
for(i in ob){
ob[i].anim();
}
if(dragging==true){
ta=dragstarta+dragy*0.02;
tb=dragstartb-dragx*0.02;
}
else{
ta+=0.06;
tb+=0.07;
t++;
}
}

//48 point symmetry
//2-axis rotation
//perspective transform
//minimum/fastest operations per point (?)
function bigUglyFastAnim(){
var a,b,c,f1,f2,n;
var M=Math;
var s=this.ss;
var ca=cosa;
var sa=sina;
var cb=cosb;
var sb=sinb;
var fa=ff;
var fao=650;
var x=this.x;
var y=this.y;
var z=this.z;


var r=this.rad+80*M.sin(t/this.df);
this.theta=t*this.dtheta;
this.phi=t*this.dphi;
var ct=M.cos(this.theta);
var cp=M.cos(this.phi);
x=this.radius*ct*cp;
y=this.radius*M.sin(this.theta)*cp;
z=this.radius*ct*M.sin(this.phi)*cp;

var pA=x*cb;
var pB=z*ca;
var pC=y*sa;
var pD=y*ca;
var pE=z*sa;
var pF=x*sb;
var pG=y*cb;
var pH=x*sa;
var pI=x*ca;
var pJ=y*sb;
var pK=z*cb;
var pL=z*sb;

var pM=pB*sb;
var pN=pB*cb;
var pO=pC*sb;
var pP=pC*cb;
var pQ=pD*sb;
var pR=pD*cb;
var pS=pE*sb;
var pT=pE*cb;
var pU=pH*sb;
var pV=pH*cb;
var pW=pI*sb;
var pX=pI*cb;

a=pO-pM;
b=pN-pP
y=pD+pE;
z=pF+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA+a;
n=s[0];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[42];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pF-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA-a;
n=s[18];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[24];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pS-pQ;
b=pR-pT;
y=pB+pC;
z=pF+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA+a;
n=s[1];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[43];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pF-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA-a;
n=s[19];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[25];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pU-pM;
b=pN-pV;
y=pI+pE;
z=pJ+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG+a;
n=s[2];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[44];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pJ-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG-a;
n=s[20];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[26];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pS-pW;
b=pX-pT;
y=pB+pH;
z=pJ+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG+a;
n=s[3];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[45];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pJ-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG-a;
n=s[21];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[27];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pU-pQ;
b=pR-pV;
y=pI+pC;
z=pL+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK+a;
n=s[4];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[46];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pL-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK-a;
n=s[22];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[28];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pO-pW;
b=pX-pP;
y=pD+pH;
z=pL+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK+a;
n=s[5];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[47];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pL-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK-a;

n=s[23];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[29];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pM+pO;
b=pN+pP;
y=pD-pE;
z=pF-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA+a;
n=s[6];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[36];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pF+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA-a;
n=s[12];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[30];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pQ+pS;
b=pR+pT;
y=pB-pC;
z=pF-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA+a;
n=s[7];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[37];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pF+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pA-a;
n=s[13];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[31];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pM+pU;
b=pN+pV;
y=pI-pE;
z=pJ-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG+a;
n=s[8];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[38];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pJ+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG-a;
n=s[14];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[32];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pW+pS;
b=pX+pT;
y=pB-pH;
z=pJ-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG+a;
n=s[9];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[39];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pJ+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pG-a;
n=s[15];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[33];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;
a=pQ+pU;
b=pR+pV;
y=pI-pC;
z=pL-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK+a;
n=s[10];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[40];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pL+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK-a;
n=s[16];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[34];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;

a=pW+pO;
b=pX+pP;
y=pD-pH;
z=pL-b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK+a;
n=s[11];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=f1*y;
n=s[41];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=f2*y;
z=pL+b;
f1=fa[fao+M.floor(z)];
f2=-fa[fao-M.floor(z)];
x=pK-a;
n=s[17];
n.zIndex=z;
n.pixelLeft=f1*x;
n.pixelTop=-f1*y;
n=s[35];
n.zIndex=-z;
n.pixelLeft=f2*x;
n.pixelTop=-f2*y;
}

function dot(radius,theta,phi,container,imgsrc){
var i;
var img=new Array();
this.ss=new Array();

this.radius=radius;
this.rad=radius;
this.theta=theta;
this.df=200*(Math.random()-0.5)
this.phi=phi;
this.dtheta=0.05*(Math.random()-0.5);
this.dphi=0.03*(Math.random()-0.5);

this.x=radius*Math.cos(theta)*Math.cos(phi);
this.y=radius*Math.sin(theta)*Math.cos(phi);
this.z=radius*Math.cos(theta)*Math.sin(phi);

for(i=0;i<48;i++){
img[i]=document.createElement("img");
img[i].setAttribute("src",imgsrc);
img[i].setAttribute("unselectable","on");
img[i].style.setAttribute("position","absolute");
container.appendChild(img[i]);
this.ss[i]=img[i].style;
}

this.anim=bigUglyFastAnim;
ob.push(this);
}

function resize(){
dbcw=document.body.clientWidth;
dbch=document.body.clientHeight;
container.style.pixelLeft=dbcw/2-15;
container.style.pixelTop=dbch/2-15;
}

function omd(){
document.body.onmousemove=omm;
dragging=true;
dragstartx=window.event.clientX+document.body.scrollLeft;
dragstarty=window.event.clientY+document.body.scrollTop;
dragstarta=ta;
dragstartb=tb;
dragx=0;
dragy=0;
}
function omu(){
document.body.onmousemove="";
dragging=false;
}
function omm(){
dragx=window.event.clientX+document.body.scrollLeft-dragstartx;
dragy=window.event.clientY+document.body.scrollTop-dragstarty;
var m=window.event.button;
if((m & 1)==0)omu();
}

</SCRIPT>

O caminho da imagem sempre deverá estar entre aspas.
4.3 - Clique na aba  "Visualizar"  para checar o resultado.

5 - Vamos ainda colocar um segundo script logo abaixo do fechamento do primeiro. Esse script é para que a barra de rolagem  se movimente sozinha

Script  - Barra de Rolagem

<SCRIPT language=JavaScript1.2>

/*
Advanced window scroller script-
By Neli
Over 200+ free JavaScripts here!
*/

var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
/*alt=1
else
alt=0*/ /*esta parte faz com que volte para o topo.*/
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",70)
}
window.onload=initialize
</SCRIPT>

11 - Visualizado o efeito, volte à abinha "Editar" e complete a formatação  com:
Barra de rolagem colorida
Script para rodapé
tabela
Texto
Música
Assinatura ( opcional)

Script para o rodapé

<SCRIPT language=VBScript>
'This script is written
'by YRJA - 2002
'- - - - - - - - - -

Dim sch, scw, pict, picl, cct, ccl, R, A, timoutHandle
R=100
A=0

Sub Window_OnLoad
on error resume next
window.status=" Escreva Aqui "
scw=document.body.clientWidth
sch=document.body.clientHeight
cct=(sch/2)
ccl=(scw/2)
pic.style.Top=pict
pic.style.Left=picl
circle
End Sub

Sub circle()
ClearTimeOut(timoutHandle)
A=A+0.05
picl=(R*cos(A)+200)
pict=(R*sin(A)+150)
pic.style.Left=picl
pic.style.Top=pict
if A>6.28 then timoutHandle=SetTimeOut ("reset", 30) else timoutHandle=SetTimeOut ("circle", 30)
End Sub


Sub reset()
ClearTimeOut(timoutHandle)
A=0
circle
End Sub

Sub Window_OnResize()
Window_OnLoad
End Sub

</SCRIPT>

IM11 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito pequenas imagens
Script com barra de rolagem automática
um top
uma tabela
Texto
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura e gifs (opcional)




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - IM11 - Pequenas Imagens
No corpo do e-mail coloque o link correspondente a esse tutorial.
Verificar o peso de sua mensagem.
Não esqueça do anti-banner

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

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