TE03 Efeito Fantasia - formatação adian

    
TE03 Efeito Fantasia

Esse tutorial oferece o script de efeitos sobre frase.

Materiais
1 background colorido
texto
1 música
1 imagem

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 xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3059" name=GENERATOR>
<STYLE></STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>&nbsp;</DIV>
<DIV align=center>
<TABLE height=250 cellPadding=0 width=250 align=center border=0 Spacing="0"
cell>
<TBODY>
<TR>
<TD>
<SCRIPT>
// CREDITS:
// Fun Ticker
// By Peter Gehrig
// Copyright (c) 2004 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com
// info@24fun.com
// 2/5/2004

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.24fun.com on the webpage
// where this script will be featured

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// EDITZONE STARTS HERE
////////////////////////////////////////////////////////////////////

// Add your messages. They should be rather short.
// They should have the same length more or less.
text[0]="FRASE 1"
text[1]="FRASE 2 "
text[2]="FRASE 3"
text[3]="FRASE 4"
text[4]="FRASE 5"
text[5]="FRASE 6"
text[6]="FRASE 7"
text[7]="FRASE 8"
text[8]="FRASE 9"
text[9]="FRASE 10"

// Add a link for each message
// If you don't want to link a message enter "#" instead (see sample below)
textlink[0]="#"
textlink[1]="#"
textlink[2]="#"
textlink[3]="#"
textlink[4]="#"
textlink[5]="#"
textlink[6]="#"
textlink[7]="#"
textlink[8]="#"
textlink[9]="#"

// Add a target-window for each link
// Possible values: "_blank","_top", "_self", "_parent" or the name of a frame
texttarget[0]="_blank"
texttarget[1]="_top"
texttarget[2]="_parent"
texttarget[3]="_self"
texttarget[4]="_blank"
texttarget[5]="_top"
texttarget[6]="_parent"
texttarget[7]="_self"
texttarget[8]="_self"
texttarget[9]="_self"

// Set the font
var textfont="Arial Black"

// Add as many font-colors as you like
var textfontcolor=new Array("#FF0000","#0000FF","#00FF00","#660000")

// Add as many font-outline-colors as you like
var outlinecolor=new Array("#000000","#000000","#FDCF15")

// Add as many font-shadow-colors as you like
var shadowcolor=new Array("#FFFF00","#00FFFF","#FDCF15")

// Set the font-rollovercolor (required for Netscape and Opera only)
var textfontcolorrollover="#ff0000"

// Set the font-size (required for Netscape and Opera only)
var textfontsize=20

// Set the background-color
var textbgcolor="#000000"

// Set "bold" or "normal" (required for Netscape and Opera only)
var textweight="normal"

// Set "italic" or "normal" (required for Netscape and Opera only)rsiv sein soll
var textitalic="normal"

// Set width and height of your Fun Ticker (pixels)
// IMPORTANT: width and height must also be set in the table (see top of code)
var textwidth=250
var textheight=250

// Set the delay between the messages (seconds)
var textpause=2

// Set the width of the funticker's border (pixels)
var funtickerborder=3

// Set the color of the funticker's border
var funtickerbordercolor="#FDCF15"

// Set the width of the font-outline (pixels)
var widthfontoutline=1

// Set the strength of the font's opacity (transparency of letters)
var fontopacity="50%"

// Set the strength of the shadow's opacity (transparency of shadow)
var shadowopacity="50%"

// Set true if your font should display a gradient effect
// Set false if your font should display NO gradient effect
var applygradient=true

// Enter a value between 0 and 3 to set the shape for your messages
// If you enter 4 all shapes will be applied
var i_shape=4

/////////////////////////////////////////////////////////////////////
// EDITZONE ENDS HERE
///////////////////////////////////////////////////////////////////

var path=new Array()
path[0]="m20 0c300 140,300 50,580, 0m20 300c400 100,300 250,580 300e"
path[1]="m20 100c300 -50,300 50,580, 100m20 200c300 400,300 300,580 200e"
path[2]="m20 120c300 100,300 50,580, 0m20 180c300 180,300 300,580 300e"
path[3]="m20 0c300 140,300 50,580, 0m150 300c400 100,300 250,450 300e"

var i_path=0
var speed=60
var textdecoration="none"

var innerwidth=Math.floor(0.90*textwidth)
var innerheight=Math.floor(0.90*textheight)

var posleft=Math.floor((textwidth-innerwidth)/2-funtickerborder)
var postop=Math.floor((textheight-innerheight)/2)

var i_message=0
var i_messagelength=0
var i_outlinecolor=0
var i_textfontcolor=0
var i_shadowcolor=0

var textalign="center"
var textvalign="middle"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function gettextcontent() {
tablewidth=textwidth-2*funtickerborder
tableheight=textheight-2*funtickerborder
textpresubstring=text[i_text].substring(0,i_presubstring)
var i_prepre=i_presubstring-1
if (i_prepre<0) {i_prepre=0}
if (text[i_text].substring(i_prepre,i_presubstring)=="<"){notag=false}
if (text[i_text].substring(i_prepre,i_presubstring)==">"){notag=true}
if (notag) {
textcontent="<table border=0 cellpadding=4 width="+tablewidth+" height="+tableheight+"><tr valign="+textvalign+"><td align="+textalign+">"
textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">"
textcontent+=textpresubstring
textcontent+="</a>"
textcontent+="</td></tr></table>"
}
}

function showtickerNS6() {
textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor[i_textfontcolor]+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor[i_textfontcolor]+"\'\">"
textcontent+=text[i_text]
textcontent+="</a>"
textcontent+="</td></tr></table>"
document.getElementById("ticker").innerHTML=textcontent
i_text++
i_textfontcolor++
if (i_text>=text.length) {i_text=0}
if (i_textfontcolor>=textfontcolor.length-1) {i_textfontcolor=0}
var timer=setTimeout("showtickerNS6()", textpause)
}

function showticker() {
if (i_substring<=text[i_text].length) {
i_substring++
i_presubstring=i_substring-1
if (i_presubstring<0) {i_presubstring=0}
gettextcontent()
if (opera) {
document.getElementById("ticker").innerHTML=textcontent
var timer=setTimeout("showticker()", speed)
}
}
else {
clearTimeout(timer)
var timer=setTimeout("changetext()", textpause)
}
}

function changetext() {
i_substring=0
i_presubstring=0
i_text++
i_textfontcolor++
i_path++
if (i_text>text.length-1) {i_text=0}
if (i_textfontcolor>textfontcolor.length-1) {i_textfontcolor=0}
showticker()
}

function changeform() {
if (i_outlinecolor >= outlinecolor.length) {i_outlinecolor=0}
if (i_textfontcolor >= textfontcolor.length) {i_textfontcolor=0}
if (i_shadowcolor >= shadowcolor.length) {i_shadowcolor=0}
if (i_path>path.length-1) {i_path=0}
document.getElementById('strokeid').color=outlinecolor[i_outlinecolor]
document.getElementById('fillid').color=textfontcolor[i_textfontcolor]
document.getElementById('shadowid').color=shadowcolor[i_shadowcolor]
if (i_shape==path.length) {
document.getElementById('shapeid').path=path[i_path]
}
if (i_message < text.length) {
tick()
}
else {i_message=0;tick()}
}

function tick() {
if (i_messagelength <= text[i_message].length) {

var messagestringend=""
var messagestring=text[i_message].substring(0, i_messagelength)+messagestringend
document.getElementById('textpathid').string=messagestring
var timer=setTimeout("tick()",speed)
i_messagelength++
}
else {
clearTimeout(timer)
var timer=setTimeout("prechangeform()",textpause)
}
}

function prechangeform() {
i_messagelength=0
i_message++
i_outlinecolor++
i_textfontcolor++
i_shadowcolor++
i_path++
changeform()
}

function openlink() {
if (texttarget[i_message]=="_blank") {
codepopup=window.open(textlink[i_message], "code", "status=yes,location=yes,toolbar=yes,menubar=yes,resizable=yes,scrollbars=yes,width=770,height=460,top=10,left=10");
}
else if (texttarget[i_message]=="_top") {
top.location.href=textlink[i_text]
}
else if (texttarget[i_message]=="_parent") {
parent.location.href=textlink[i_text]
}
else if (texttarget[i_message]=="_self") {
document.location.href=textlink[i_text]
}
else {
var jumpto=eval("parent."+texttarget[i_text])
jumpto.location.href=textlink[i_text]
}
}

if (ie5) {
document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+';cursor:hand" onClick="openlink()">')
document.write('<v:shapetype id="shapeid" coordsize="600,320" path="'+path[i_shape]+'">')
document.write('<v:path textpathok="t"/>')
document.write('<v:textpath on="t" fitshape="t" xscale="t"/>')
document.write('</v:shapetype>')
document.write('<v:shape type="#shapeid" style="position:absolute; top:3px; left:'+posleft+'px; width:'+innerwidth+'px;height:'+innerheight+'px;" strokeweight="1pt">')
if (applygradient) {
document.write('<v:fill id="fillid" method="linear sigma" type="gradient" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
}
else {
document.write('<v:fill id="fillid" color="'+textfontcolor[i_textfontcolor]+'" opacity="'+fontopacity+'"/>')
}
document.write('<v:stroke id="strokeid" weight="'+widthfontoutline+'pt" color="'+outlinecolor[i_outlinecolor]+'"/>')

document.write('<v:shadow on="t" id="shadowid" opacity="'+shadowopacity+'" color="'+shadowcolor[i_shadowcolor]+'"/>')
document.write('<v:textpath id="textpathid" style="font-family:\''+textfont+'\';v-text-kern:t" trim="t" fitpath="t" xscale="f" string="Hello World"/>')

document.write('</v:shape>')
document.write('</div>')
}


if (ns6 || opera) {
if (ns6) {
textwidth-=2*funtickerborder
textheight-=2*funtickerborder
}
document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+funtickerborder+'px;border-color:'+funtickerbordercolor+';background-color:'+textbgcolor+'">')
document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+innerwidth+'px;height:'+innerheight+'px;"></span>')
document.write('</div>')
}

if (ie5) {window.onload=changeform}
if (opera) {window.onload=showticker}
if (ns6) {window.onload=showtickerNS6}
</SCRIPT>
</TD></TR></TBODY></TABLE></DIV>
<DIV><!-- CODE FOR FUN TICKER ENDS HERE --></DIV></BODY></HTML>

A parte do código que está destacada em vermelho, é a parte responsável pela escrita. Escreva frase a frase, não esquecendo que deverá estar entre aspas.
Insira o Background através de :Formatar/Plano de fundo/Imagem ou a cor ( formatar/Plano de fundo/Cor)

Em azul  esta destacada a parte do código responsável pela cor da fonte . Para alterar a cor da fonte, basta alterar o código da cor.

Em rosa está destacada o nome da fonte. Para trocar a fonte basta alterar o nome dela. Lembrando que sempre é necessário usar as fontes originais do Windows

Destacado em verde  o background onde está as frases escritas vc pode alterar a cor dessa caixinha

Destacado em verde limão  a moldurinha onde está as frases escritas vc pode alterar a cor dessa moldurinha.

Pode ser que ao colocar o fundo na mensagem perca o efeito. Para fazer funcionar novamente. Cole o código abaixo:

<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>

Logo abaixo da seguinte linha que já está bem no começo da mensagem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>

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  com:
Uma  música
Uma imagem
Com uma borda e uma barra colorida

Borda e barra de rolagem colorida

<STYLE>BODY {
BORDER-RIGHT: #e5c5b8 20px dashed; BORDER-TOP: #e5c5b8 20px dashed; SCROLLBAR-HIGHLIGHT-COLOR: #606c62; BORDER-LEFT: #e5c5b8 20px dashed; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #e5c5b8 20px dashed; SCROLLBAR-BASE-COLOR: #e5c5b8
}
</STYLE>

TE03a - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial mantendo o script original

TE03b - Envie para o grupo um e-mail formatado como foi ensinado nesse tutorial alterando a borda e background do efeito para que tenham a mesma cor que o background da mensagem

Não esqueça, por favor:
colocar no assunto: seu nome ou nick - TE03 - Texto: Efeito na Escrita  -Texto Fantasia.
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
BBBB 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.