AULA 23- EFEITO FUMAÇA

Hoje vamos aprender um novo efeito no email, muito bonito e se chama: EFEITO FUMAÇA

Para isso você vai usar um back, ou top ou ainda uma pattern.
Fica ao seu critério a formatação e se vai usar script de rodapé ou não.
Deixarei isso à vontade de vocês.
Se você formatar no FrontPage, o que é muito bom, depois de salvo vamos ao script:

Script Efeito Fumaça (aqui)

<!-- Original: Kurt Grigg (kurt.grigg@virgin.net) -->
<!-- Web Site: http://website.lineone.net/~kurt.grigg/javascript -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
Image0 = new Image();
Image0.src = bubble.src;
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] < -40) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random() * 6 + 4;
grow[i] = 8;
nsSize[i] = Math.random() * 15 + 5;
}
if (ns) {
document.layers['sn'+i].left = Xpos[i] + wscrll;
document.layers['sn'+i].top = Ypos[i] + hscrll;
}
else {
si[i].style.pixelLeft = Xpos[i] + wscrll;
si[i].style.pixelTop = Ypos[i] + hscrll;
si[i].style.width = grow[i];
si[i].style.height = grow[i];
}
grow[i] += rate[i];
Cstep[i] += Step[i];
if (grow[i] > 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
// End -->


No Outlook

1- Vá na aba origem e veja onde vai onde está marcado no print:

2- Agora procure dentro do script onde está escrito: "Endereço da imagem", assim:

 

3- Ali você vai colocar o endereço da imagem. Mas como???? Abra uma nova mensagem no OE. Vai em Inserir/Imagem e aí terá o endereço da imagem, assim:

4- Aí basta selecionar e copiar/colar

5- Clique na aba Visulalisar para ver seu efeito, gostando basta colocar a música e (se quiser) o scritp de rodapé)

6- Preencha o campo Assunto e envie para correção.

Exemplo da aula

Exercício

***Envie para o grupo uma mensagem formatada como ensina o tutorial.

Ela deve conter:
= Fundo
=Texto
=Gifs
=Assinatura
=Script com efeito fumaça
=Script de rodapé (opcional)
=Música
= Tabela (opcional)

Bom Trabalho!!!

Peketita's Designer