Aula 25 - Efeito Rastro do Mouse

Hoje vamos aprender um lindo efeito no mouse: Efeito Rastro do Mouse. Para isso vamos precisar:

= um background ou uma patter
= uma tabela
=texto
=Imagem
=Script de efeito rastro

=Script de Rodapé

=Gifs
=Música
=Assinatura

Programas usados:
=FrontPage
=Outlook Express
=Psp

Você pode usar um back, um top ou um tile que já tenha feito em aulas do psp, ou outro qualquer.

Agora já podemos fazer nosso trabalho, pois o material está arrumado.

1- Vá no psp e dá uma borda em sua imagem, se for necessário.

Vamos trabalhar no FrontPage


1- No meu caso, eu tinha esse back do exemplo configurado no OE, então cliquei em Editar e ele abriu
no FrontPage para colocar uma tabela e fazer quase toda formatação lá. Veja:

2- Na aba Tabela/Inserir/Tabela faça as seguintes configurações:

3- Repita o passo 2 e faça as configurações abaixo:

4- Agora vamos configurar o estilo, com as configurações:

5- Clique em Visualisar para ver como está ficando seu trabalho. Depois volte para aba Editar
e dê Enter para abaixar a tabela e colocar nossa Imagem na parte de cima, fora da tabela. Veja:

6- Agora vou colocar o texto, as gifs e assinatura.

7- Feito isso vou colorir as bordas e barra de rolagem.

8- Agora veja o código:

<DIV style="POSITION: absolute; WIDTH: 9px; HEIGHT: 12px; VISIBILITY: hidden; TOP: 0px; LEFT: 0px"
id=dot0></DIV>
<DIV style="POSITION: absolute; HEIGHT: 36px; TOP: 1371px; LEFT: 122px" id=dot1>
<DIV align=center><IMG border=0 hspace=0 alt="" align=baseline
src="sua imagem"></DIV></DIV>
<DIV style="POSITION: absolute; HEIGHT: 36px; TOP: 1399px; LEFT: 104px"
id=dot2><IMG
src="sua imagem"
height=21></DIV>
<DIV style="POSITION: absolute; HEIGHT: 24px; TOP: 1413px; LEFT: 67px"
id=dot3><IMG
src="sua imagem"
height=21></DIV>
<DIV style="POSITION: absolute; HEIGHT: 38px; TOP: 1424px; LEFT: 32px"
id=dot4><IMG
src="sua imagem"
height=21></DIV>
<DIV style="POSITION: absolute; HEIGHT: 26px; TOP: 1443px; LEFT: 73px"
id=dot5><IMG
src="sua imagem"
height=21></DIV>
<DIV style="POSITION: absolute; HEIGHT: 26px; TOP: 1453px; LEFT: 128px"
id=dot6><IMG
src="sua imagem"
height=30></DIV>
<P>
<SCRIPT language=JavaScript>

<!-- hide code
/*
script
*/
// T
// Y

var nDots = 7;
if (document.all&&window.print)
document.body.style.cssText="overflow-x:hidden;overflow-y:scroll"
var Xpos = 0;
var Ypos = 0;
// fixed time step, no relation to real time
var DELTAT = .01;
// size of one spring in pixels
var SEGLEN = 10;
// spring constant, stiffness of springs
var SPRINGK = 10;
// all the physics is bogus, just picked stuff to
// make it look okay
var MASS = 1;
var GRAVITY = 50;
var RESISTANCE = 10;
// stopping criterea to prevent endless jittering
// doesn't work when sitting on bottom since floor
// doesn't push back so acceleration always as big
// as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
// BOUNCE is percent of velocity retained when
// bouncing off a wall
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
// always on for now, could be played with to
// let dots fall to botton, get thrown, etc.
var followmouse = true;
var dots = new Array();
init();
function init()
{var i = 0; for (i = 0; i < nDots; i++) {dots[i] = new dot(i);}
if (!isNetscape) {
// I only know how to read the locations of the
// <LI> items in IE
//skip this for now
// setInitPositions(dots)
}
// set their positions
for (i = 0; i < nDots; i++) {dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;}
if (isNetscape) {
// start right away since they are positioned
// at 0, 0
startanimate();
} else {
// let dots sit there for a few seconds
// since they're hiding on the real bullets
setTimeout("startanimate()", 2000);}}
function dot(i)
{this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");}}
function startanimate() {
setInterval("animate()", 20);}
// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
// initialize dot positions to be on top
// of the bullets in the <ul>
var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE;}
// put 0th dot above 1st (it is hidden)
dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;}
// just save mouse position for animate() to use
function MoveHandler(e)
{Xpos = e.pageX; Ypos = e.pageY; return true;}
// just save mouse position for animate() to use
function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;}
if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;}
function vec(X, Y)
{this.X = X; this.Y = Y; }
// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;}}
function animate() {
// dots[0] follows the mouse,
// though no dot is drawn there
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1;}
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring);}
if (i < (nDots - 1)) {
springForce(i+1, i, spring);}
// air resisitance/friction
var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
// compute new accel, including gravity
var accel = new vec((spring.X + resist.X)/ MASS,
(spring.Y + resist.Y)/ MASS + GRAVITY);
// compute new velocity
dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
// stop dead so it doesn't jitter when nearly still
if (Math.abs(dots[i].dx) < STOPVEL &&
Math.abs(dots[i].dy) < STOPVEL &&
Math.abs(accel.X) < STOPACC &&
Math.abs(accel.Y) < STOPACC) {
dots[i].dx = 0;
dots[i].dy = 0;}
// move to new position
dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;
// get size of window
var height, width;
if (isNetscape) {
height = window.innerHeight + document.scrollTop;
width = window.innerWidth + document.scrollLeft;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft;}
// bounce of 3 walls (leave ceiling open)
if (dots[i].Y >= height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy;}
dots[i].Y = height - DOTSIZE - 1;}
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx;}
dots[i].X = width - DOTSIZE - 1;}
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx;}
dots[i].X = 0;}
// move img to new position
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y;}}
// end code hiding -->
</SCRIPT>
</P>
<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()",40)}
window.onload=initialize
</SCRIPT>
</DIV>

Onde devo colocá-lo??? No fechamento do email, aqui:

9- Observe o script: Onde está escrito "sua imagem" deve colocar um gif não muito grande. Observe porque são
4 ou 5 lugares.

10- Agora salve seu trabalho onde deve ser salvo. No meu caso, que apenas editei um trabalho que
estava pronto no OE, vou apenas subistituir.

Agora no Outlook
Nota:: Os scripts de barra colorida, barra de rolagem e de rodapé podem ser colocados no FrontPage, também.

1- Abra sua mensagem da maneira que já ensinei.
2- Vamos colocar o script de rodapé, que é esse:

<SCRIPT language=JavaScript>
var hellotext="ART E FORMATAÇÃO PEKETITA'S DESIGNER"
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>

4- Agora escolha sua música e preencha o campo Assunto e envie para correção.

Exemplo da aula

Exercício

Envie para o grupo uma mensagem formatada com os detalhes do tutorial

Ótimo Trabalho!!!

Peketita's Designer