BO07 Efeito Explosão - formatação adian


"Clique em cima da flechinha e arraste para marcar o passo do tutorial onde está trabalhando"






    

BO07 Efeito Explosão

Neste tutorial veremos um script com efeito de uma explosão de imagens sobre o background. Para obter um efeito mais bonito devem ser usadas imagens transparentes (gifs).
Para usar esse script o mais prático é o processo de substituição do código e posterior complementação.

1 - Abra uma nova mensagem.
2 - Clique na abinha "Origem"
3- Delete todo o código existente e cole em seu lugar o código abaixo:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:o = "urn:schemas-microsoft-com:office:office"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY bgProperties=fixed background="" onload=zyva()>
<DIV><FONT face="Trebuchet MS" color=#000080></FONT>&nbsp;</DIV>
<DIV><BR></DIV>
<STYLE></STYLE>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<TABLE
style="BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge; FILTER: Alpha(Opacity=50); BORDER-LEFT: #000000 5px ridge; BORDER-BOTTOM: #000000 5px ridge"
borderColor=#000000 cellSpacing=10 cellPadding=10 width="65%" align=center
bgColor=#ffffff border=7>
<TBODY>
<TR>
<TD borderColor=#000000>
<DIV align=center><FONT face="Trebuchet MS" color=#000000
size=4><STRONG>Texto Aqui</STRONG></FONT></DIV></TD></TR></TBODY></TABLE>
<DIV id=G1 style="DISPLAY: none"><IMG alt="" hspace=0
src="CAMINHO DA GIF"
align=baseline border=0>&nbsp;&nbsp;<IMG alt="" hspace=0 src="CAMINHO DA GIF"
border=0>&nbsp;</DIV>
<DIV id=DOOT style="DISPLAY: none"><IMG alt=""
hspace=0 src="CAMINHO DA GIF" border=0>&nbsp;<IMG alt=""
hspace=0 src="CAMINHO DA GIF" border=0> <IMG alt=""
hspace=0 src="CAMINHO DA GIF" border=0></DIV>
<SCRIPT>
window.onerror = new Function("return true")
screen.bufferDepth = 16
var O = new Array()
var nx = 0
var ny = 0
var N = 6
var NN = 32
var T = 400
function spAn(k,q){I = k?G1:DOOT
c = Math.floor((I.children.length)*Math.random())
document.body.insertAdjacentHTML("afterBegin","<img src='"+I.children[c].src+"' style='z-index:-"+(k?2:1)+";position:absolute;left=-1E4'>")
o = document.body.firstChild
this.k = k
this.w = o.width * .5
this.h = o.height * .5
this.obj = o.style
this.t = 0
this.x = 0
this.y = 0
this.dy = 0
this.dx = 0
this.q = q
this.INI = function() {with(this){if(k){t= .2
x = nx * .5
y = ny + this.h
dy = -eval("dyy=1;d=0;while(d<(ny-Math.random()*100)){d+=dyy;dyy+=this.t}")
dx = -8 * Math.random() + 4} else {x= 0
y = 0
a = 2 * Math.PI * Math.random()
r = (q>.3)?5 * Math.random():5
dx = r * Math.sin(a)
dy = r * Math.cos(a)-4
obj.left = -1E4}}}
this.INI()
this.SCR = function(X,Y){with(this){x += dx
y += dy
if(k){dy += t
if(dy>2){obj.visibility="hidden"
obj.left = -1E4
for(var i=0;i<NN;i++)O[i].SCR(x,y)} else {obj.left = x - w
obj.top = y - h}
if(y>ny*3){INI()
for(var i=0;i<NN;i++)O[i].INI()
obj.visibility="visible"}} else {if(Y+y<ny+50){obj.left = X + x - w
obj.top = Y + y - h}}}}
if(k){this.O = new Array()
q = Math.random()
for(var i=0;i<NN;i++)this.O[i] = new spAn(false,q)}}
document.body.onresize = function resize(){nx = document.body.clientWidth
ny = document.body.clientHeight}
function gradient(R,G,B,m){for(i=0;i<25;i++){c = 255 - 10 * i
C = "\"RGB("+Math.round(c*R/255)+","+Math.round(c*G/255)+","+Math.round(c*B/255)+")\""
code = "<span style='position:absolute;font-size:1pt;left=0;width=120%;height="+(m)+".2%;top="+(i*m)+"%;background="+C+";z-Index:-1000'></span>"
document.body.insertAdjacentHTML("beforeEnd",code)}}
function zyva(){resize()
for(var i=0;i<N;i++){O[i] = new spAn(true)
setTimeout('setInterval("O['+i+'].SCR()",16)',T*i)}
load.style.visibility="hidden"
document.body.style.overflowX="hidden"
gradient(41,110,214,2)}
</SCRIPT>
</BODY></HTML>


4 - Após colado o script na Origem, volte à abainha "Editar" e insira o Background através de: Formatar/Plano de fundo/Imagem.
5 - Em seguinda insira a gif colando o endereço capturado nos lugares indicados. Vão ser inseridas 5 vezes. (Se necessário, veja no item 6 do tutorial CI02 como capturar o caminho da imagem.)
6 - Vamos ver agora os códigos destacados, lembrando que ao trocá-los, você deverá escolher uma cor que combine com seu background ou imagem (gif).

a) Localize o trecho:

<TABLE
style="BORDER-RIGHT: #000000 5px ridge; BORDER-TOP: #000000 5px ridge; FILTER: Alpha(Opacity=50); BORDER-LEFT: #000000 5px ridge; BORDER-BOTTOM: #000000 5px ridge"
borderColor=#000000 cellSpacing=10 cellPadding=10 width="65%" align=center
bgColor=#ffffff border=7>
<TBODY>
<TR>
<TD borderColor=#000000>
<DIV align=center><FONT face="Trebuchet MS" color=#000000
size=4><STRONG>Texto Aqui</STRONG></FONT></DIV></TD></TR></TBODY></TABLE>

Os códigos que estão destacados em verde, são os responsáveis pelas cores da bordas da tabela.
Os valores em azul determinam a largura da borda da tabela.
A palavra em laranja especifica o tipo do estilo da borda.
O código em rosa é o responsável pela cor do fundo da tabela.
O que está em roxo diz respeito à fonte; aqui você troca seu tipo, cor e tamanho.  Lembre-se sempre de usar fontes originais do Windows.

7 - Após todas as alterações terem sido feitas, cheque o resultado clicando na abinha "Visualizar".
8 - Estando tudo certinho e a seu gosto, clique novamente em "Editar" e complemente a formatação com bordas e barra de rolagem coloridas, texto, uma mensagem de rodapé  e uma bela música.  Dê preferência às músicas online, pois diminuem muito o peso final de seu trabalho.






BO07 - Envie para o grupo dois e-mail formatados como foi ensinado nesse tutorial.
BO07a - Use a mesma imagem (gif) cinco vezes. (Modelo 01)
BO07b - Use  cinco imagens (gifs) diferentes.  (Observe que todas devem ser do mesmo tamanho). (Modelo 02)
Ele deverá conter:
Script com o efeito explosão
background
Imagem (gifs)
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 - BO07 - Efeito Explosão (a e b)
No corpo do e-mail coloque o endereço correspondente a esse tutorial inserido como hiperlink numa imagem pequena ou palavra.
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ê. em junho 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.

Nenhum comentário:

Postar um comentário

Para se inscrever nas listas clique nos títulos de cada grupo na página inicial. Comece com as aulas de PSP, depois continue com o PSP + AS, e se quiser siga com o Xara e a Formatação para criar belos e-mails.
Deixe aqui suas opiniões e seja sempre bem-vindo(a).