IM02 Gifs Pulando - formatação adian

    
IM02 Gifs Pulando

Esse tutorial oferece o script categoria imagem: gifs pulando pelo seu papel de carta.

1 - Abra uma nova mensagem.
2 - Na Abinha Editar coloque seu background usando: Formatar>Plano de Fundo>Imagem.

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

4 - Em seguida vamos colocar o script:  clique na Abinha Origem, coloque o cursor após o trecho <BODY bgColor=#ffffff> e dê Enter.

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.

<STYLE>.txt {
COLOR: #ffd060; FONT-FAMILY: times new roman; FONT-SIZE: 16pt; FONT-WEIGHT: bold; TEXT-ALIGN: justify
}
.clim {
LEFT: -10000px; POSITION: absolute; TOP: -10000px; VISIBILITY: hidden
}
</STYLE>
<SCRIPT language=JavaScript>
var db=document.body;
var tim=20; // délai entre chaque boucle "posit"
var dMin=100; // délais mini et maxi de relance objet après cycle de rebonds
var dMax=10000;
var g=0.2; // accélération verticale, en pixels par boucle
var vm=0.4 // vitesse maximum de départ
var a1=0.900; // amortissement à chaque rebond
var a2=0.950; // amortissement de l'amortissement à chaque rebond
var tMouchard = new Array (); // Table servant à la mise au point
var nMouchard=0;
// Fournit un nombre entier choisi au hasard dans une plage donnée
function azar(mini, maxi)
{
return (Math.round(mini + Math.random()*(maxi-mini)));
}
// Réduit à 4 le nombre de décimales d'un nombre (pour affichage mouchard)
function rd(nombre)
{
return (Math.round(nombre*10000)/10000);
}
onload=init;
function init()
{
db.style.cursor="crosshair";
for (i=0; i<imag.children.length; i++)
{
setTimeout ("lance(" + i + ");", 200*i + azar(dMin, dMax));
}
}
// Lancement d'un objet - le n° est le rang dans "imag"
function lance(num)
{
var obj=imag.children[num];
var objs=obj.style;
objs.visibility="visible";
// les valeurs initiales sont rangées dans la balise de l'objet
obj.x=azar(0, db.offsetWidth); // coordonnées de départ
if (g>=0)
{
obj.y=0;
obj.vx=azar(0, vm); // vitesse (x,y) de départ
obj.vy=azar(0, vm);
}
else
{
obj.y=db.offsetHeight;
obj.vx=azar(-vm, 0); // vitesse (x,y) de départ
obj.vy=azar(-vm, 0);
}
obj.am=a1; // amortissement de départ
posit(num);
}
// actualisation position d'un objet - le n° est le rang dans "imag"
function posit(num)
{
var obj=imag.children[num]; // paramètres extraits de la balise de l'objet
var rebond=false;
// accélération de la pesanteur
obj.vy += g;
// rebonds sur bord gauche ou droite de la fenêtre
if ( (obj.x<=0 && obj.vx<=0) || (obj.x>=(db.offsetWidth-obj.width) && obj.vx>=0) )
{
obj.vx *= -1; // inversion mouvement droite/gauche
rebond=true;
}
// rebonds sur bord haut ou bas de la fenêtre
if ( ( obj.y<=0 && obj.vy<=0) || (obj.y>=(db.offsetHeight-obj.height) && obj.vy>=0) )
{
obj.vy *= -1; // inversion mouvement haut/bas
rebond=true;
}
if(rebond)
{
obj.am *= a2; // amortissement de l'amortissement
obj.vx *= obj.am; // amortissement du mouvement
obj.vy *= obj.am;
// (ici on peut déclencher le bruit du rebond)
}
// nouvelles positions
obj.x += obj.vx;
obj.y += obj.vy;
// affectation à l'objet
var objs=obj.style;
objs.pixelLeft=obj.x;
objs.pixelTop=obj.y-g;
file://tMouchard[nMouchard] = "num=" + num + "; obj.x=" + rd(obj.x) + "; obj.y=" + rd(obj.y);
if (obj.am<0.19)
{
objs.visibility="hidden";
setTimeout ("lance(" + num + ");", azar(dMin, dMax));
}
else setTimeout ("posit(" + num + ");", tim);
}
// Peut être utilisé pour la mise au point
file://document.body.onclick=fMouchard;
function fMouchard()
{
var n = nMouchard;
zMouchard.innerHTML="";
for (i=n-10; i<n; i++)
{
zMouchard.insertAdjacentHTML("beforeEnd", tMouchard[i] + "<BR>");
}
}
</SCRIPT>
<SPAN id=zMouchard style="COLOR: white"></SPAN><SPAN id=imag><IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"> <IMG class=clim
src="CAMINHO DA GIF"></SPAN>

7 - Vamos inserir as gifs. Clique na Abinha Editar e depois em Inserir Imagem  e vá buscar o caminho da gif. Vá até a pastinha onde a tem salva, clique em abrir . Aparecerá o caminho:

8 - 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.
9 - Nessa janelinha clique em cancelar.
10 - Clique na abinha "Origem" e procure no script a frase: "CAMINHO DA GIF". Ela está repetida 14 (quatorze) vezes. Selecione o primeiro deles, apague e cole (CTRL + V)  o endereço.

11 - Procure o segundo "CAMINHO DA GIF", selecione, apague e cole o endereço.
12 - Repita esse processo até que todos os 14 endereços tenham sido colados.
  Muita atenção, pois as "aspas" tem que ser mantidas.
13 - Clique na Abinha Visualizar e veja se todas as gifs estão aparecendo (elas não aparecem todas de uma vez. Vão caindo uma a uma).  Se encontrar algum quadradinho com um  X  é sinal que um dos endereços está com erro, (normalmente falta de aspas)  ou você pulou algum deles. Volte à Origem e procure onde está o problema.
14 - O seu efeito está pronto. Muito  bonito e delicado, não acha?
Neste tutorial foi ensinado a usar a mesma gif 14 vezes. (Ex. 01)
Mas você pode optar por usar gifs diferentes, colocando no script, em cada "CAMINHO DA GIF", os endereços correspondentes a cada uma delas.  (Ex. 02).
Sugerimos que neste caso, exemplo 02, seja utilizado no background uma tile delicada ou textura. Pode também usar uma imagem com uma borda também delicada.

Alterações que podem feitas no Script

Localize no script:

var tim=20; - tempo entre cada gif
var dMin=100; - tempo mínimo de reativação do objeto após cada ciclo de saltos.
var dMax=10000; - tempo máxino de reativação do gif após cada ciclo de saltos.
var g=0.2; - aceleração vertical, em pixels das gifs.
var vm=0.4 - velocidade máxima de partida.
var a1=0.900; - amortização à cada salto.
var a2=0.950; - amortização da amortização à cada salto.

Alterações no cursor:

db.estilo.cursor= " crosshair ";

Tipos de cursores que podem ser usados no lugar de crosshair: wait; text; help; e-resize; ne-resize; n-resize; nw-resize; w-resize; sw-resize; auto

15 - Volte a abinha "Editar" e complete a formatação  com:
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)

Sugestão de Script para Bordas e Barra de Rolagem Colorida

<STYLE>BODY {
BORDER-RIGHT: #a3af89 10px ridge;
BORDER-TOP: #a3af89 10px ridge;
BORDER-LEFT: #a3af89 10px ridge;
SCROLLBAR-ARROW-COLOR: #a3af89 ;
BORDER-BOTTOM: #a3af89 10px ridge;
SCROLLBAR-BASE-COLOR: #a3af89
}
</STYLE>

Sugestão de Script para Mensagem de Rodapé

 <script  language="JavaScript">
<!--
ScrollSpeed = 275; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = " Escreva aqui o seu texto";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</script>

IM02 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.
Ele deverá conter:
Script com o efeito gifs pulando no papel de carta
background
Imagem ( opcional)
Texto
Borda Colorida
Barra de Rolagem Colorida
Script para Mensagem no Rodapé (opcional)
Música
Assinatura (opcional)




Não esqueça, por favor:
colocar no assunto: seu nome ou nick - IM02 - Imagem: Gifs Pulando
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 Esmê  em fevereiro 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.