Aula 26 - Efeito Múltiplo

Hoje vamos aprender um efeito muito bonito no mouse: Efeito Múltiplo
Para isso vamos precisar de:
=um gif pequena
=uma patern ou tile
=uma imagem
=uma tabela
=um texto
=Gifs de enfeite
=Música
=Scritps: Efeito Múltiplo e Rodapé
=Assinatura

1- Escolha uma imagem e coloque bordas nela e depois faça um tile ou uma pattern dela de 300 por 300
2-Veja minha imagem e meu tile (pode usar, se quiser):

3- E agora vamos formatar nosso email no FrontPage. Abra o programa.
Vai na aba Formatar/Plano de Fundo e configure como no print:

4- Agora vá na aba Tabela/Inserir/Tabela e configure assim:

5- Agora vamos configurar o Estilo de nossa tabela. Vá dentro da tabela, clique com o mouse do lado direito e
vá em Propriedades da tabela. Veja as configurações:

6- Agora selecione a tabela e clique em Edt/copy e depois, bem no centro da tabela clique com o mouse
do lado direito e vá em colar. Ajeite uma dentro da outra.

7- Agora clique do lado esquerdo, por fora da tabela e dê uns 2 Enter para colocarmos a imagem
fora da tabela. Veja:

7- Vamos colocar o texto, gifs de enfeite e assinatura.

8- Agora vamos colocar as bordas e barra de rolagem coloridas.

9-Agora veja o script e onde colocá-lo:

<IMG style="DISPLAY: none"
id=balloon src="CAMINHO DE SUA IMAGEM">
<SCRIPT language=javascript>
var images=balloon.src;//Put your image name here!!
var amount=7;//Number of images here. Do not alter for this script!!
var cnter=70;
var step;
var currStep = 0;
var Xpos = 0;
var Ypos = 0;
if (document.all)
{
document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">')
document.write('<div id="c" style="position:relative">');
for (n=0; n < amount; n++)
document.write('<img src=" '+images+'" style="position:absolute;top:0px;left:0px">')
document.write('</div>')
document.write('</div>')

function MsieMouseFollow(){
Xpos = document.body.scrollLeft+event.x-5;
Ypos = document.body.scrollTop+event.y-5;
}
document.onmousemove = MsieMouseFollow;
}
else if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
for (ns=0; ns < amount; ns++)
document.write("<LAYER NAME='n"+ns+"' LEFT=0 TOP=0><IMG SRC='"+images+"'></LAYER>");
function NsMouseFollow(evnt){
Xpos = evnt.pageX-5;
Ypos = evnt.pageY-5;
}
window.onMouseMove = NsMouseFollow;
}

function Swirl(){
if (currStep<0.0550)
step=0.001;
if (document.all)
{
for (i=0;i<ieDiv.all.c.all.length;i++)
{
ieDiv.all.c.all[i].style.top = Ypos+cnter*Math.cos((currStep+i*4.5)/5)*Math.sin((currStep)*150);
ieDiv.all.c.all[i].style.left = Xpos+cnter*Math.sin((currStep+i*4.5)/5)*Math.sin((currStep)*150);
}
}
else if (document.layers)
{
for ( i = 0 ; i < ns ; i++ )
{
var temp="n"+i
document.layers[temp].top = Ypos+cnter*Math.cos((currStep+i*4.5)/5)*Math.sin((currStep)*150);
document.layers[temp].left =Xpos+cnter*Math.sin((currStep+i*4.5)/5)*Math.sin((currStep)*150);
}
}
currStep += step;
setTimeout("Swirl()", 10);
if (currStep>0.0540)
{
step+=0.002;
if (document.layers)
{
for ( i = 0 ; i < ns ; i++ )
{
var temp="n"+i
document.layers[temp].top =Ypos+cnter*Math.cos((currStep+i*4.5)/5)
document.layers[temp].left=Xpos+cnter*Math.sin((currStep+i*4.5)/5)
}
}
else if (document.all)
{
for (i=0;i<ieDiv.all.c.all.length;i++)
{
ieDiv.all.c.all[i].style.top=Ypos+cnter*Math.cos((currStep+i*4.5)/5)
ieDiv.all.c.all[i].style.left=Xpos+cnter*Math.sin((currStep+i*4.5)/5)
}
}
}
if (step > 0.5)
{
step=0.5;
cnter-=8;
}
if (document.layers)
_y=-window.innerWidth;
else if (document.all)
_y=-document.body.clientWidth;
if (cnter <= _y)
{
currStep=0;
step=0.001;
cnter=70;
}
}
Swirl();
// -->
</SCRIPT>
</FONT>
<P align=center><BR><BR></P>
<DIV align=center>
<CENTER><BR><BR>&nbsp;</CENTER></DIV>
<SCRIPT language=JavaScript1.2>
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()",50)
}
window.onload=initialize
</SCRIPT>

*Onde colocá-lo??? No fechamento do email. Aqui:

**Procure no script onde está escrito 'Caminho de sua imagem' e aí coloque o caminho de sua gif.
Veja:

**Agora cilque em Visualizar para ver o efeito e depois volte pra aba Designer

10- Agora vamos salvar seu trabalho lá em Meu computador/Disco C/Arquivos de Programas/
Arquivos Comuns/Microsoft Shared/Papel de carta.

No OE
1- Abra sua mensagem, como já foi ensinado: Mensagem/Nova mensagem usando/Selecionar papel de carta

2- Depois da mensagem aberta, clique em Visualisar pra ver se está tudo certo. Depois volte pra aba
Editar e vamos colocar o script de Rodapé.

<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>

3- Agora a música e preencher o campo Assunto.


Exercício

Envie uma mensagem como foi ensinado no tutorial

Ótimo Trabalho

Peketita's Designers