IM12 Vôo Livre - formatação adian

    

IM12 Vôo Livre

Este tutorial vamos ver um script que usa uma gif transparente, repetida 11 vezes que se movimentam sobre o background formando um efeito muito interessante.

Vamos aqui também usar o método de substituição.

1 - Abra uma nova mensagem e vá na origem.  Apague tudo o que lá se encontra e cole o script abaixo.

Sempre que for usar um script, copie e cole antes no bloco de notas.  Só então copie do bloco de notas e cole na origem.

Imagem voando

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0022)http://internet.e-mail --><HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><!---------------
Image Follow-On
Script written by DorothyIrene
Version 1.1

MATERIALS REQUIRED
==================
A seamless background image
A midi or wav
11 Moving Images (use same one)
--------------------------------------------->
<STYLE type=text/css>BODY {
BORDER-RIGHT: #ffffff 6px inset; BACKGROUND-POSITION: left top; BORDER-TOP: #ffffff 6px outset;
BACKGROUND-ATTACHMENT: scroll; BORDER-LEFT: #ffffff 6px outset; SCROLLBAR-ARROW-COLOR: #000000; BORDER-BOTTOM: #ffffff 6px inset; BACKGROUND-REPEAT: repeat; SCROLLBAR-BASE-COLOR: #ffffff;
BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
IMG.pn1 {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
DIV.pn1 {
LEFT: -1800px; POSITION: absolute; TOP: -1800px
}
IMG.pn2 {
BORDER-RIGHT: #ffffff inset; BORDER-TOP: #ffffff outset; LEFT: -1800px; BORDER-LEFT: #ffffff outset;
BORDER-BOTTOM: #ffffff inset; POSITION: absolute; TOP: -1800px
}
DIV.pn2 {
BORDER-RIGHT: #ffffff inset; BORDER-TOP: #ffffff outset; LEFT: -1800px; BORDER-LEFT: #ffffff outset;
BORDER-BOTTOM: #ffffff inset; POSITION: absolute; TOP: -1800px
}
DIV.bz1 {
BORDER-RIGHT: #ffffff inset; PADDING-RIGHT: 10px; BORDER-TOP: #ffffff outset; PADDING-LEFT: 10px; FONT-SIZE: 12pt; LEFT: 10px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; OVERFLOW: auto;
 BORDER-LEFT: #ffffff outset; WIDTH: 70%; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff;
PADDING-TOP: 10px; BORDER-BOTTOM: #ffffff inset; FONT-FAMILY: "Times New Roman";
SCROLLBAR-BASE-COLOR: #ffffff; POSITION: absolute; TOP: 10px; HEIGHT: 70%;
BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: center
}
</STYLE>
<!--moving images-->
<META content="MSHTML 6.00.2900.3199" name=GENERATOR></HEAD>
<BODY
background=inserir_background><BGSOUND
balance=0 src="Caminho da música" volume=-600
loop=infinite><IMG class=pn1 id=cir1 style="Z-INDEX: 5" height=99
src="CAMINHO DA GIF" width=115> <IMG class=pn1 id=cir2 style="Z-INDEX: 5"
height=99 src="CAMINHO DA GIF" width=115> <IMG class=pn1 id=cir3
style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115> <IMG class=pn1
id=cir4 style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115> <IMG
class=pn1 id=cir5 style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115>
<IMG class=pn1 id=cir6 style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF"
width=115> <IMG class=pn1 id=cir7 style="Z-INDEX: 5" height=99
src="CAMINHO DA GIF" width=115> <IMG class=pn1 id=cir8 style="Z-INDEX: 5"
height=99 src="CAMINHO DA GIF" width=115> <IMG class=pn1 id=cir9
style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115> <IMG class=pn1
id=cir10 style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115> <IMG
class=pn1 id=cir11 style="Z-INDEX: 5" height=99 src="CAMINHO DA GIF" width=115> <!--messagebox-->
<DIV class=bz1 id=mz1><BR>TEXTO AQUI</DIV>
<SCRIPT language=VBScript>
option explicit
setLocale("en-au")
dim dz, ez, docw, doch, c, d, bw, ox1, oy1, R1, R2, A1, A2, A3, A4, A5, A6, A7, A8, A9, A10, A11, dA1, mzh, mzw, imsp
dz="<-> Script by DorothyIrene Designs <->"
ez=" "
c=0
d=0

'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------
'Script written by DorothyIrene
'© DorothyIrene Designs July 2007
'You are welcome to use this script but
'please do not remove these credits
'this script is encoded and can be traced
'------------------------------------------
'<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
'------------------------------------------

'==========================================================
'=============== changes and user settings section ======================

'place your ticker message between the quotes
window.status=dz&ez&"MENSAGEM DE RODAPÉ"

'border width around image & messagebox
bw=6

'radius (distance from center to edge of circle)
'change this to make the circle smaller or larger
R1=300
R2=200

'rate of angle change (decimal value less than 1)
'change this to speed up or slow down the circle
dA1=0.04

'messagebox height & width
mzh=300
mzw=400

'space between images (recommended between 0.02 - 0.25)
imsp=0.12

'============== end of changes and user settings section ================
'=======================================================

mz1.style.filter="progid:DXImageTransform.Microsoft.BasicImage(Opacity=0.50)"

'initial angle value (measured in radians - possible values range from 0 to 6.27)
A1=0
A2=imsp
A3=imsp*2
A4=imsp*3
A5=imsp*4
A6=imsp*5
A7=imsp*6
A8=imsp*7
A9=imsp*8
A10=imsp*9
A11=imsp*10

sub window_onLoad()
mz1.style.borderWidth=bw&"px"

dddposition
z15
end sub

sub dddposition()
docw=document.body.clientWidth
doch=document.body.clientHeight

'circle center from left
ox1=docw/2

'circle center from top
oy1=doch/2

'messagebox
mz1.style.top=(doch-(mzh+bw*2))/2
mz1.style.left=(docw-(mzw+bw*2))/2
mz1.style.height=mzh+bw*2
mz1.style.width=mzw+bw*2
mz1.style.visibility="visible"
end sub

window.setInterval "scrollit",64
sub scrollit()
c=c+1
document.body.style.backgroundPosition=-c&" "&d
end sub

window.setInterval "anime",25
sub anime()
'moving images
A1=A1+dA1
cir1.style.left=ox1+R1*cos(A1/3)-cir1.width/2
cir1.style.top=oy1+R2*sin(A1)-cir1.height/2

A2=A2+dA1
cir2.style.left=ox1+R1*cos(A2/3)-cir2.width/2
cir2.style.top=oy1+R2*sin(A2)-cir2.height/2

A3=A3+dA1
cir3.style.left=ox1+R1*cos(A3/3)-cir3.width/2
cir3.style.top=oy1+R2*sin(A3)-cir3.height/2

A4=A4+dA1
cir4.style.left=ox1+R1*cos(A4/3)-cir4.width/2
cir4.style.top=oy1+R2*sin(A4)-cir4.height/2

A5=A5+dA1
cir5.style.left=ox1+R1*cos(A5/3)-cir5.width/2
cir5.style.top=oy1+R2*sin(A5)-cir5.height/2

A6=A6+dA1
cir6.style.left=ox1+R1*cos(A6/3)-cir6.width/2
cir6.style.top=oy1+R2*sin(A6)-cir6.height/2

A7=A7+dA1
cir7.style.left=ox1+R1*cos(A7/3)-cir7.width/2
cir7.style.top=oy1+R2*sin(A7)-cir7.height/2

A8=A8+dA1
cir8.style.left=ox1+R1*cos(A8/3)-cir8.width/2
cir8.style.top=oy1+R2*sin(A8)-cir8.height/2

A9=A9+dA1
cir9.style.left=ox1+R1*cos(A9/3)-cir9.width/2
cir9.style.top=oy1+R2*sin(A9)-cir9.height/2

A10=A10+dA1
cir10.style.left=ox1+R1*cos(A10/3)-cir10.width/2
cir10.style.top=oy1+R2*sin(A10)-cir10.height/2

A11=A11+dA1
cir11.style.left=ox1+R1*cos(A11/3)-cir11.width/2
cir11.style.top=oy1+R2*sin(A11)-cir11.height/2
end sub

sub z15()
'important do not remove this
end sub

sub window_onResize()
dddposition
end sub

</SCRIPT>
</BODY></HTML>

2 - Depois de colocar o background, colar o caminho da gif (repetido 11 vezes), música, etc, veremos agora as demais alterações a serem feitas no script.
Os códigos que estão em azul são os das bordas e barra de rolagem da mensagem.
Os códigos em verde são referentes às bordas da tabela que contem a caixa de texto.  Ai também são escolhidas as cores do background, barra de rolagem, tipo e tamanho da fonte;

No trecho destacado em amarelo, você troca:
a) - A largura da borda da Caixa de Texto:
 'border width around image & messagebox
bw=6
b) - A amplitude do movimento das imagens em R1=300; e a distância entre elas em  R2=200.
'radius (distance from center to edge of circle)
'change this to make the circle smaller or larger
R1=300
R2=200
c) - A velocidade do movimento das imagens pode ser mudado em:   dA1=0.04;
'rate of angle change (decimal value less than 1)
'change this to speed up or slow down the circle
dA1=0.04
d) - As medidas da Caixa de Texto podem ser mudadas: altura em mzh=300, e largura em: mzw=400.
'messagebox height & width
mzh=300
mzw=400

No trecho destacado em cinza, pode-se mudar a opacidade do fundo da Caixa de Texto:
mz1.style.filter="progid:DXImageTransform.Microsoft.BasicImage(Opacity=0.50)"
Quanto maior o valor mais opaco ficará o fundo e vice-versa.
Notem que o tamanho da gif está especificado no que está destacado em roxo: height=99  e width=115. Esse é o tamanho da gif utilizada no primeiro exemplo. No segundo as medidas usadas foram: height=190 e width=149. Observem que foram trocadas em todas as 11 vezes que a gif aparece.

Se tiver dúvidas pergunte, pois teremos muito prazer em ajudá-lo.

IM13 - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial.

Ele deverá conter:

Script com o efeito Imagem Voando

Background

Imagem pequena na caixa de texto (opcional)

Texto

Música

Assinatura (opcional) dentro da Caixa de Texto.

 

Coloque no "Assunto" o seu nome ou nick, seguido do número e título da aula: Nome - IM13 - Imagem voando.

Abaixo do texto e dentro da caixa de mensagem, coloque numa imagem pequena ou palavra um hiperlink com o endereço do tutorial.

Não esqueça o anti-banner. De preferência use um anti-banner transparente para não interferir na formatação.

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

Esse  tutorial foi elaborado e formatado por Esmê, em outubro 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 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.