Ripplescript

 

 

 

 

 

 

 

 

 

 

 

 

We gaan een waterrimpel effect maken om te kunnen
gebruiken in Outlook en Outlook Express.

Hiervoor heeft men nodig, psp 6 of 7 en een script.

Het is een goed idee om eerst een nieuwe map aan te maken.
 Noem hem Waterscript en plaats hierin
het script en het plaatje dat je wilt gaan gebruiken.

Men heeft natuurlijk een plaatje nodig waarop
wat water voorkomt. Je kunt natuurlijk een eigen plaatje
gebruiken, of je neem mijn plaatje.
Rechtsklik op onderstaand plaatje en kies kopiëren 


Open  psp,  rechtsklik op het werkblad en kies: plakken.
Maak er nu  eerst een kopie van.
Dit doet men door de Shift knop in te drukken en gelijktijdig op de knop -D- te drukken.
Nu staan er 2 dezelfde plaatjes op het werkvlak.
Klik nu op een van de plaatjes en sla het op in je nieuwe map.
Opslaan Als,  zie hieronder, en geef het een naam.

Als een plaatje is opgeslagen sluit je dat door bovenaan op het kruisje te klikken.

We gaan nu verder werken met plaatje 2.
Kies in het kleurenpalet een kleur die NIET in je plaatje voorkomt.
In dit geval neem ik paars.


Klik vervolgens op het verfkwastje en zorg dat op het
palet Opties voor gereedschap de Hardheid, de Dekking en de Dichtheid op 100 staan.
Zie hieronder.




Nu komt het leukste en het moeilijkste gedeelte,
begin alle delen van het water in te kleuren waarvan je wilt dat die bewegen ( ripple) als je hem in de e-mail gaat versturen.



Hier is dus al een gedeelte ingekleurd, maar er moet nog een flink
 gedeelte worden gedaan.
Een tipje. Gum niet helemaal tot tegen de rand aan, anders
krijgt men lelijke bobbeltjes te zien.


Als we alles hebben ingekleurd waarvan we willen dat het gaat
bewegen (het ripple effect weergeven) wordt het nu tijd er een transparant plaatje van te maken.
Klik boven in de werkbalk op Kleuren-Kleurendiepte verminderen-256 kleuren (8 bit)
Als het tabblad te voorschijn komt zet een vinkje in
geoptimaliseerde merediaan en dichtstbij gelegen kleur.
Klik dan op ok.
Zie voorbeeld hieronder.


Om nu de waterkleur,( in ons geval paars) transparant te maken, klik je weer bovenin de werkbalk op Kleuren/Transparantie van Palet instellen.
Als het tabblad verschijnt zet je een vinkje in de middelste regel:
Waarde transparantie instellen op huidige achtergrondkleur.
Nog niet op ok klikken , zie volgende instructie


Klik nu het pipetje onderop de werkbalk aan en klik op je mooie paarse waterkleur. Dat zal de paarse kleur aangeven als de toekomstige transparante kleur.

Merk op dat het vinkje dat voor de middelste regel stond, nu naar de onderste regel verspringt. Bovendien verschijnt er een nummer.
Dat geeft aan dat de kleuren met dit nummer transparant moeten worden.
Als je een andere kleur dan paars hebt gekozen krijg je nu daar onderaan ook een ander nummer te zien natuurlijk.
Nu pas mag je op OK klikken.
Zie voorbeeld hieronder


Nu kan men het plaatje Via Bestand-Exporteren-Exporteren-
 gif optimalisatie, opslaan  als gif bestand naar je nieuwe map.

Gefeliciteerd, je hebt zojuist de plaatjes gemaakt voor het waterrimpel effect. Het enige wat er nu nog moet gebeuren, deze plaatjes invoegen in een speciaal script.

Er is een lege kopie van het script, klaar voor gebruik.
Je kunt het hier downloaden door op de knop hieronder te klikken.Unzip het de nieuwe map waar je 2 plaatjes instaan.


Nu is het nog slechts een kwestie van je plaatjes en de juiste maten van je plaatjes, in het script te plaatsen.
Daarna sla je het script opnieuw op in dezelfde map onder 
de naam  xxxxxxx.htm
Waar de kruisjes staan zet je de naam die jijzelf er aan wilt geven.

Hieronder plaats ik nog even het lege script en geef daarin
aan waar de veranderingen moeten komen.
 Groen zijn de maten van je plaatje en Rood zijn de namen
van het plaatje in de vorm van kruisjes.
Op regel 5 van boven af ziet men staan:
 COLOR: #FFFFFF; FONT-FAMILY: "Kristen ITC";
FONT-SIZE: 18px; FONT-STYLE: normal; FONT-WEIGHT: bold;

Hier kan men het kleurnummer voor de achtergrond en lettertype wijzigen en het Font veranderen.

De regel die ik paars gekleurd heb kan je het beste helemaal verwijderen en dan in de e-mail via Opmaak-Achtergrond-Geluid, het muziekje gewoon toevoegen, anders heeft men  kans op een foutmelding bij versturen.
Ook  regels die bruin gekleurd zijn (onderaan) kan men
veranderen om de golfslag te wijzigen.

 

<HTML>
<!--CHANGE FONT COLOR, SIZE, AND STYLE HERE.
ALSO ADJUST MARGINS DEPENDING UPON THE SIZE OF YOUR IMAGES-->
<STYLE>BODY {
COLOR: #FFFFFF; FONT-FAMILY: "Kristen ITC";
FONT-SIZE: 18px; FONT-STYLE: normal; FONT-WEIGHT: bold;
MARGIN-LEFT: 50px; MARGIN-RIGHT: 50px; MARGIN-TOP: 550px
}
</STYLE>
<!--INSERT BACKGROUND IMAGE HERE--> Hier kan je achtergrond invoegen of de achtergrondkleur veranderen.
<BODY background="BACKGROUND GOES HERE" bgColor=#4a4f86 bgproperties="fixed">
<!--INSERT BACKGROUND SOUND HERE-->Hier kan je muziek invoegen.
<BGSOUND balance=0 loop=infinite src="MIDI OR WAV" volume=0>
<!---THIS IS THE DIV THAT HOLDS ALL THE PIECES OF THE IMAGE. 
CHANGE NUMBERS TO MOVE THE ENTIRE DIV--->
<DIV id=box 
style="HEIGHT: 425px; LEFT: 0px; POSITION: absolute; TOP: 50px; WIDTH: 330px">
<!---THIS IS THE PICTURE OF THE WATER. INSERT YOUR OWN FILE NAME.
CHANGE THE NUMBERS TO POSITION IT--->
<IMG id=tw src="PICTURE1.JPG GOES HERE" 
style="HEIGHT: 425px; LEFT: 0px; POSITION: absolute;
TOP: 50px; WIDTH: 330px; BORDER-BOTTOM: #fffed4 3px ridge;
BORDER-LEFT: #fffed4 3px ridge; BORDER-RIGHT: #fffed4 3px ridge;
BORDER-TOP: #fffed4 3px ridge">
<!---THIS IS THE TOP IMAGE. INSERt YOUR OWN FILENAME. 
CHANGE THE NUMBERS IN BLUE TO POSITION IT--->
<IMG src="PICTURE2.GIF GOES HERE" 
style="HEIGHT: 425px; LEFT: 0px; POSITION: absolute; TOP: 50px; 
WIDTH: 330px; BORDER-BOTTOM: #fffed4 3px ridge; 
BORDER-LEFT: #fffed4 3px ridge; BORDER-RIGHT: #fffed4 3px ridge;
BORDER-TOP: #fffed4 3px ridge">
</DIV>

<!---THIS IS THE SCRIPT. CHANGE THE NUMBERS TO CHANGE THE AMOUNT OF RIPPLE--->
<SCRIPT language=VBScript>
<!---Thank you Phil(evolve) for the script and helpful hints--->

Dim wav,s


Sub animatwav
wav = (wav + 1) mod 5 + 35
tw.filters(0).freq = wav
SetTimeOut "animatwav()",100
End Sub

sub window_onResize()
box.style.left=document.body.clientWidth/2-box.style.posWidth/2
end sub
In de regel hieronder kan men de frequentie en grootte van de golfjes wijzigen.
tw.style.filter = "wave(freq=9, strength=4, phase=5, lightstrength=0, add=1, enabled=1)" 
Probeer bv. eens (freq=19, strength=10, phase=15, lightstrength=5, add=0,enabled=1)
animatwav 

document.body.scroll="yes" 

window_onResize

</SCRIPT>
<!--THIS IS WHERE YOUR TEXT WILL GOE-->
<P>TEXT GOES HERE</P>
</SCRIPT>
</BODY></HTML>


Als je gebruik maakt van IE.5 moet je nog een kleine verandering aanbrengen in het "ripple control" gedeelte van dit script om dit te laten werken in IE 5.5.

Zoek in het script deze regel op (Staat bijna onderaan):
tw.style.filter = "wave(freq=9, strength=4, phase=5, lightstrength=0, add=1, enabled=1)" 
Verander nu het nummer 1 in add= (hier in rood) in add=0

Dus komt deze zin er zo uit te zien:

tw.style.filter = "wave(freq=9, strength=4, phase=5, lightstrength=0, add=0, enabled=1)"


Nog een kleine tip. Neem een plaatje waarvan het water
niet tegen de buitenranden aankomt, dus wat iets in het midden van het plaatje ligt. Dat geeft een mooier effect.
In de bruine regel bij lightstrengh kan men het nummer
veranderen om het water een lichter of donkerder kleur te geven.

Veel plezier met dit lesje en succes.

Volgende een nachthemel maken.

Zijn er toch nog vragen, je kunt ze hier stellen en
ik zal proberen ze zo goed mogelijk te beantwoorden.

 

Home

copyright: Maud de Graaf