IM03 Gifs Entrelaçadas - formatação adian

    

IM03 Gifs Entrelaçadas


1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem".
3 - Vamos colocar o script:
4 - Selecione o código <BODY bgColor=#ffffff>:

5 - Coloque o cursor no espaço criado:

6 - Selecione o scritp, copie (CTRL + C) e cole (CTRL + V) na origem no local indicado acima.

Script Gifs Entrelaçadas
<BODY bgColor=#ffffff onload=zyva()>
<STYLE>
body{filter:revealtrans()}
.img {position:absolute;left:-10000}
</STYLE>

<IMG class=img
src="CAMINHO DA PRIMEIRA GIF AQUI" align=right> <IMG class=img
src="CAMINHO DA SEGUNDA GIF AQUI" align=right>
<SCRIPT language=JavaScript>
// ------------------------------------------------------------
// "+/- l'infini" - javascript créationiste - Gérard Ferrandez -
// 5 Décembre 1999 - version tan & Cul spécial MP
//-------------------------------------------------------------
object = new Array()
nbI = 100
nx=0
ny=0
xm=0
ym=0
//---cO'mdhab-----------
document.body.scroll="no"
document.body.style.cursor="crosshair"
//----------------------
function tourne() {
with (this) {
c=N*k
k+=0.0001
c1=-y+ny+(Math.tan(-c+k))*(c*k2)
if(c1>-y*4 && c1<ny*2){
img.left=-x+nx+(Math.cos(c+k))*(c*k2)
img.top=c1
}
}
}

function CObj(N,img,x,y){
//----def des attributs
this.N = N
this.img = img.style
this.k=0.511
this.k2=2*(ny/nbI)
this.c=0
this.x=x/2
this.y=y/2
this.c1=0
//-----def des méthodes---
this.tourne = tourne
//----c parti-----
setInterval("object[" + N + "].tourne()",1)
}


function zyva() {
resize()
//-----insertion HTML------
j=0
img = document.all.tags("img")
x=img[0].width
y=img[0].height
nbIc=img.length
for(i=0;i<nbI;i++){
document.body.insertAdjacentHTML("BeforeEnd","<img class=img src='"+img[j].src+"'>")
j++;if(j>nbIc)j=0
}
//----création des instances----
img = document.all.tags("img")
nbI=img.length
for (i=0;i<nbI;i++) object[i] = new CObj(i,img[i],x,y)
}

//----le resizage de la window-----
function resize() {
nx=document.body.offsetWidth/1.5
ny=document.body.offsetHeight/1.5
}
window.onresize = resize;
</SCRIPT>

7 - Vamos ver onde podemos mexer no script.

object = new Array()
nbI = 100
nx=0
ny=0
xm=0
ym=0
//---cO'mdhab-----------
document.body.scroll="no"
document.body.style.cursor="crosshair"
//----------------------

Localize na origem o trecho do script acima:

Em nbl = 100. Alterando esse valor, muda-se a quantidade de elementos do efeito e também sua velocidade.
document.body.scroll="no" - Aqui você pode trocar a opção "no" para "yes" para aparecer a barra de rolagem; porém aconselho que mantenha o "no" para evitar que a barra fique oscilando enquanto o efeito está em funcionamento.
document.body.style.cursor="crosshair" Aqui você pode alterar o tipo de cursor que deseja usar.

Eis alguns tipos que você pode escolher:
crosshair (cruz)
default (não altera o cursor)
e-resize (seta para a direita, Este)
hand (a tradicional mãozinha)
help (ponto de interrogação ?)
move (cruz com setas nas extremidades)
n-resize (seta para norte, N)
ne-resize (seta para NE)
nw-resize (seta para NO)
pointer (a mãozinha)
s-resize (seta para sul, S)
se-resize (seta para SE)
sw-resize (seta para SO)
text (cursor típico de inserção de texto)
w-resize (seta para a esquerda, Oeste)
wait (cursor de "ocupado", aguardando)

8 - Vamos inserir as gifs. Procure na Origem o CAMINHO DA PRIMEIRA GIF. Temos dois caminhos, então o endereço terá que se colado duas vezes, ok?

9 - Clique na "Abinha Editar" e depois em Inserir Imagem  e vá buscar o caminho da sua gif. Navegue até a pastinha onde tem as gifs salvas, clique em abrir.  Aparecerá o caminho:

10 - Copie esse caminho: coloque o cursor dentro do local onde está o endereço dê Ctrl+A para selecionar todo o endereço. Dê Ctrl + C para copiar.
11 - Nessa janelinha clique em cancelar.
12 - Clique na abinha "Origem" e procure no script a frase: "CAMINHO DA PRIMEIRA GIF".  Selecione-o, apague e cole (CTRL + V)  o endereço.  Repita o mesmo processo para o "CAMINHO DA SEGUNDA GIF".
13 - Agora, vamos colocar nosso background.  Na Abinha Editar coloque seu background usando: Formatar>Plano de Fundo>Imagem.

14 - Clique em Procurar, localize sua imagem e depois clique em ok.

15 - Clique em "Visualizar" para ver o efeito.
16 - Vamos agora incrementar nossa formatação?  Que tal adicionarmos uma tabela já com filtro Alpha inserido?
17 - Clique na abinha "Origem" e localize o código </BODY></HTML>. Coloque o cursor antes dele:

18 - Selecione o scritp abaixo, copie (CTRL + C) e cole (CTRL + V) na origem no local indicado acima.

Script para colocar Tabela com Filtro Alpha

<DIV>&nbsp;&nbsp;&nbsp; </DIV>
<DIV align=left>
<TABLE style="FILTER: Alpha(Opacity=80)" borderColor=#ffcccc height=300
cellSpacing=7 cellPadding=10 width="40%" bgColor=#fffbfb border=7>
<TBODY>
<TR>
<TD bgColor=#fffbfb>
<DIV align=center>&nbsp;<FONT color=#e783a6>Texto&nbsp;
Aqui</FONT></DIV></TD></TR></TBODY></TABLE>

Para modificar cores  da tabela e a transparência do filtro:

Para alterar a transparência do filtro mude o número que está em verde; valores maiores menos transparência e vice-versa.
Para alterar a cor das bordas da tabela altere o código que está em vermelho.
Para alterar a cor do background da tabela altere o código que está em marrom... ele aparece duas vezes... mantenha o mesmo código para os dois.
O código que está em azul altera a cor do seu texto.

19 - Agora, para deixar nossa formatação ainda mais bonita, vamos colocar bordas coloridas:

Script para colocar Bordas coloridas

<script language="JavaScript">
if (document.all) document.body.style.cssText="border:8 ridge #ffcccc"
</script>

Para alterar a tabela:
largura: o valor que está em verde;
tipo: o que está em azul: os tipos disponíveis são: solid; groove; inset; outset; ridge.
cor da tabela: o que está em vermelho


20 - Escolha um script para mensagem de rodapé, insira no final da sua origem e escreva a sua mensagem.
Se tiver alguma dúvida escreva, pois teremos o maior prazer em ajudá-los.






IM03 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito das gifs entrelaçadas
Background, de preferência um Tile.
Texto
Borda Colorida
Script para Mensagem no Rodapé (opcional)
Música




Não esqueça, por favor:
Colocar no assunto: seu nome ou nick - IM03 - Efeito Gifs Entrelaçadas.
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 Esmê,  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.