TE01 Efeito Lupa - formatação adian


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






    

TE01 Efeito Lupa

Esse tutorial oferece o script de efeitos sobre a escrita. Esse efeito da um visual muito interessante.

Materiais
1 background
1 pequena gif
texto
1 música
1 assinatura ( opcional)

Como esse script é um pouquinho mas elaborado, vamos usar o processo de substituição de código e depois complementá-lo.

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><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3059" name=GENERATOR>
<STYLE>BODY {
BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: repeat; BORDER-RIGHT: #c00000 5px inset; BORDER-TOP: #c00000 5px outset; SCROLLBAR-HIGHLIGHT-COLOR: #c00000; BORDER-LEFT: #c00000 5px outset; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #c00000 5px inset; SCROLLBAR-BASE-COLOR: #c00000
}
.bubbleText {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; COLOR: #000000; PADDING-TOP: 5px; FONT-FAMILY: Arial Black;TEXT-ALIGN: center
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff background="Insira o Background Aqui">
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV class=bubbleText id=bubbleContainer
style="BORDER-RIGHT: #c00000 5px double; PADDING-RIGHT: 15px; BORDER-TOP: #c00000 5px double; PADDING-LEFT: 15px; LEFT: -1800px; VISIBILITY: hidden; PADDING-BOTTOM: 15px; BORDER-LEFT: #c00000 5px double; WIDTH: 400px; PADDING-TOP: 15px; BORDER-BOTTOM: #c00000 5px double; POSITION: absolute; TOP: 40px; HEIGHT: 300px; BACKGROUND-COLOR: #ffffff"><SPAN
id=firstLetters></SPAN><SPAN id=letter1 style="FONT-SIZE: 120%"></SPAN><SPAN
id=letter2 style="FONT-SIZE: 140%"></SPAN><SPAN id=letter3
style="FONT-SIZE: 160%"></SPAN><SPAN id=letter4
style="FONT-SIZE: 180%"></SPAN><SPAN id=letter5
style="FONT-SIZE: 200%"></SPAN><SPAN id=letter6
style="FONT-SIZE: 180%"></SPAN><SPAN id=letter7
style="FONT-SIZE: 160%"></SPAN><SPAN id=letter8
style="FONT-SIZE: 140%"></SPAN><SPAN id=letter9 style="FONT-SIZE: 120%"></SPAN><!--PUT YOUR IMAGE HERE. IT NEEDS TO BE SMALL--><SPAN
id=letterImage><IMG src="Cole aqui o caminho da imagem pequenina"> </SPAN><SPAN
id=restLetters></SPAN></DIV>
<DIV align=left>
<DIV class=bubbleText id=bubbleText
style="BORDER-RIGHT: #c00000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #c00000 5px double; PADDING-LEFT: 10px; LEFT: 20px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; BORDER-LEFT: #c00000 5px double; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: #c00000 4px double; POSITION: absolute; TOP: 15px; HEIGHT: 400px">
<DIV><FONT color=#000000>Coloque o cursor aqui</FONT></DIV>
<DIV><FONT color=#000000>Para escrever o seu texto, dê dois clique
aqui.</FONT></DIV></DIV></DIV>
<SCRIPT language=VBS>
'----------------------------------------------------------------------------
' Bubble Text & Image, by Bill Scott
'----------------------------------------------------------------------------
' All HTML and script by Bill Scott, April, 2000
' billscott@redrivernet.com
' http://lettermanstationery.tripod.com


Option Explicit

Dim yytemp, screenx
Dim text


Sub Window_OnLoad()
screenx=document.body.clientWidth
bubbleContainer.style.posLeft=(screenx-bubbleContainer.style.posWidth)/2

text=bubbleText.innerText

text=Space(9) & text & Space(9)

initbubble
End Sub

Sub initbubble()
letter1.innerText=Mid(text,1,1)
letter2.innerText=Mid(text,2,1)
letter3.innerText=Mid(text,3,1)
letter4.innerText=Mid(text,4,1)
letter5.innerText=Mid(text,5,1)
letter6.innerText=Mid(text,6,1)
letter7.innerText=Mid(text,7,1)
letter8.innerText=Mid(text,8,1)
letter9.innerText=Mid(text,9,1)
restLetters.innerText=Mid(text,10,Len(text)-9)

bubbleContainer.style.visibility="visible"
yytemp=0
SetTimeOut"bubbleIt",3000
End Sub

Sub bubbleIt()
yytemp=yytemp+1
if yytemp=Len(text)-10 then
yytemp=0
SetTimeOut"bubbleIt",3000
Exit Sub
end if
firstLetters.innerText=Mid(text,1,yytemp)
letter1.innerText=Mid(text,yytemp+1,1)
letter2.innerText=Mid(text,yytemp+2,1)
letter3.innerText=Mid(text,yytemp+3,1)
letter4.innerText=Mid(text,yytemp+4,1)
letter5.innerText=Mid(text,yytemp+5,1)
letter6.innerText=Mid(text,yytemp+6,1)
letter7.innerText=Mid(text,yytemp+7,1)
letter8.innerText=Mid(text,yytemp+8,1)
letter9.innerText=Mid(text,yytemp+9,1)
restLetters.innerText=Mid(text,yytemp+10,Len(text)-yytemp)

SetTimeOut"bubbleIt",200
End Sub

Sub Window_OnResize()
window.location.reload()
End Sub

</SCRIPT>
<P></P>
<SCRIPT language=JavaScript>
<!--
ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " ..:Escreva aqui a sua Mensagem no Rodapé::.. ";

window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

<!-- end -->
</SCRIPT>

</BODY></HTML>
Vamos entender o Script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3059" name=GENERATOR>
<STYLE>BODY {
BACKGROUND-POSITION: left top; BACKGROUND-REPEAT: repeat; BORDER-RIGHT: #c00000 5px inset; BORDER-TOP: #c00000 5px outset; SCROLLBAR-HIGHLIGHT-COLOR: #c00000; BORDER-LEFT: #c00000 5px outset; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #c00000 5px inset; SCROLLBAR-BASE-COLOR: #c00000
}
.bubbleText {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 10pt; PADDING-BOTTOM: 5px; COLOR: #000000; PADDING-TOP: 5px; FONT-FAMILY: Arial Black;TEXT-ALIGN: center
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff background="Insira o Background Aqui">
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV>&nbsp;</DIV>
<DIV class=bubbleText id=bubbleContainer
style="BORDER-RIGHT: #c00000 5px double; PADDING-RIGHT: 15px; BORDER-TOP: #c00000 5px double; PADDING-LEFT: 15px; LEFT: -1800px; VISIBILITY: hidden; PADDING-BOTTOM: 15px; BORDER-LEFT: #c00000 5px double; WIDTH: 400px; PADDING-TOP: 15px; BORDER-BOTTOM: #c00000 5px double; POSITION: absolute; TOP: 40px; HEIGHT: 300px; BACKGROUND-COLOR: #ffffff"><SPAN
id=firstLetters></SPAN><SPAN id=letter1 style="FONT-SIZE: 120%"></SPAN><SPAN
id=letter2 style="FONT-SIZE: 140%"></SPAN><SPAN id=letter3
style="FONT-SIZE: 160%"></SPAN><SPAN id=letter4
style="FONT-SIZE: 180%"></SPAN><SPAN id=letter5
style="FONT-SIZE: 200%"></SPAN><SPAN id=letter6
style="FONT-SIZE: 180%"></SPAN><SPAN id=letter7
style="FONT-SIZE: 160%"></SPAN><SPAN id=letter8
style="FONT-SIZE: 140%"></SPAN><SPAN id=letter9 style="FONT-SIZE: 120%"></SPAN><!--PUT YOUR IMAGE HERE. IT NEEDS TO BE SMALL--><SPAN
id=letterImage><IMG src="Cole aqui o caminho da imagem pequenina"> </SPAN><SPAN
id=restLetters></SPAN></DIV>
<DIV align=left>
<DIV class=bubbleText id=bubbleText
style="BORDER-RIGHT: #c00000 5px double; PADDING-RIGHT: 10px; BORDER-TOP: #c00000 5px double; PADDING-LEFT: 10px; LEFT: 20px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; BORDER-LEFT: #c00000 5px double; WIDTH: 300px; PADDING-TOP: 10px; BORDER-BOTTOM: #c00000 4px double; POSITION: absolute; TOP: 15px; HEIGHT: 400px">
<DIV><FONT color=#000000>Coloque o cursor aqui</FONT></DIV>
<DIV><FONT color=#000000>Para escrever o seu texto, dê dois clique
aqui.</FONT></DIV></DIV></DIV>
<SCRIPT language=VBS>
'----------------------------------------------------------------------------
' Bubble Text & Image, by Bill Scott
'----------------------------------------------------------------------------
' All HTML and script by Bill Scott, April, 2000
' billscott@redrivernet.com
' http://lettermanstationery.tripod.com


Option Explicit

Dim yytemp, screenx
Dim text


Sub Window_OnLoad()
screenx=document.body.clientWidth
bubbleContainer.style.posLeft=(screenx-bubbleContainer.style.posWidth)/2

text=bubbleText.innerText

text=Space(9) & text & Space(9)

initbubble
End Sub

Sub initbubble()
letter1.innerText=Mid(text,1,1)
letter2.innerText=Mid(text,2,1)
letter3.innerText=Mid(text,3,1)
letter4.innerText=Mid(text,4,1)
letter5.innerText=Mid(text,5,1)
letter6.innerText=Mid(text,6,1)
letter7.innerText=Mid(text,7,1)
letter8.innerText=Mid(text,8,1)
letter9.innerText=Mid(text,9,1)
restLetters.innerText=Mid(text,10,Len(text)-9)

bubbleContainer.style.visibility="visible"
yytemp=0
SetTimeOut"bubbleIt",3000
End Sub

Sub bubbleIt()
yytemp=yytemp+1
if yytemp=Len(text)-10 then
yytemp=0
SetTimeOut"bubbleIt",3000
Exit Sub
end if
firstLetters.innerText=Mid(text,1,yytemp)
letter1.innerText=Mid(text,yytemp+1,1)
letter2.innerText=Mid(text,yytemp+2,1)
letter3.innerText=Mid(text,yytemp+3,1)
letter4.innerText=Mid(text,yytemp+4,1)
letter5.innerText=Mid(text,yytemp+5,1)
letter6.innerText=Mid(text,yytemp+6,1)
letter7.innerText=Mid(text,yytemp+7,1)
letter8.innerText=Mid(text,yytemp+8,1)
letter9.innerText=Mid(text,yytemp+9,1)
restLetters.innerText=Mid(text,yytemp+10,Len(text)-yytemp)

SetTimeOut"bubbleIt",200
End Sub

Sub Window_OnResize()
window.location.reload()
End Sub

</SCRIPT>
<P></P>
<SCRIPT language=JavaScript>
<!--
ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " ..:Escreva aqui a sua Mensagem no Rodapé::.. ";

window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

<!-- end -->
</SCRIPT>

</BODY></HTML>

O que está destacado em verde limão, é a parte responsável pela borda colorida e barra de rolagem. Para alterar as cores basta trocar os códigos das cores.

A parte do código que está destacada em vermelho, é a parte responsável pela escrita dentro da caixa de texto. Nessa linhas de código vc pode alterar a fonte ( basta trocar o nome) , o tamanho( basta alterar o valor numérico), a cor da escrita ( basta trocar o código da cor).
Insira o Background através de :Formatar/Plano de fundo/Imagem

Em azul piscina a parte do código responsável pela moldurinha da caixa de texto. Nessa parte do código vc pode alterar a cor, estilo, espessura de sua moldura.

Destacado em rosa o local  no código onde vc deverá colar o caminho a imagem. Dê preferência para um gif. Importante ela deverá ser pequena. Ficará mais bonitinha que tiver movimento. A gif terá que ter fundo transparente.

Alguns exemplos de mini gif

          

Destacado em laranja o Script pertencente a mensagem no rodapé

4 - Colado o script, complementado e feita as alterações necessárias cheque o efeito na abinha "Visualizar":
5 - Checado e tudo certinho, volte a abinha "Editar" e complete a formatação  uma música.




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




Não esqueça, por favor:
colocar no assunto: seu nome ou nick - TE01 - Texto: Efeito na Escrita
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
Verifique o Peso antes de enviar a Mensagem




Copyright© 2002/2004 Dama Da Noite * Todos os direitos reservados*
Esse  tutorial foi criado por brisa®  em janeiro 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).

Assinar: Postar comentários (Atom)