Uitgebreid email formulier met flash.

_{door vinTage op 24-11-2006}

In deze tutorial maak je stap voor stap een uitgebreid E-mail formulier in flash.
Het E-mail formulier controleert zelf of er fouten zijn ingevoerd zoals geen naam, een fout mail adres en of er een bericht is ingevoerd.
Daarnaast zit er ook een anti spam functie op, zodat de bezoeker maar eens in de 2 minuten een mail kan verzenden.
Verder kan je het formulier helemaal maken zoals je wilt en de actionScripts zijn kant en klaar voor je geschreven :-)

Het enig wat je voor deze tutorial moet doen is alle namen die ik geef letterlijk overnemen, dus inclusief hoofdletters en streepjes etc.

Daarnaast moet je natuurlijk een webhost hebben die php ondersteund.

De tutorial is mischien wat lang, maar dat is omdat ik ongeveer alles tot in de details heb beschreven zodat een absolute beginner er toch ook iets mee kan doen.
Uiteindelijk komt het erop neer dat we maar 2 movieclips maken, 2 buttons en verder een beetje code copieren en plakken.


Dit gaan we ongeveer maken

Als je het formulier uitgebreid hebt getest, zie je dat het formulier controleerd op de lengte van de naam en bericht, en of er een echt email adres is ingevuld.
Als je een fout maakte werd dat ook netjes getoond in een tekstvakje.
Als je een email hebt verzonden wordt er ook een antispam functie in werking gezet.
Die antispam message, zie je alleen als je een mail verzonden hebt, en daarna de pagina refreshed (binnen de 2 minuten) .
Bovenstaande voorbeeld is aangepast zodat het lijkt of er een mailtje is verstuurd, maar verstuurt niet echt een mail.


Het formulier
Neem de texttool en maak 3 texvelden voor de naam, email en bericht.
Stel alle 3 de texvelden in op input, en het vak waar het bericht in moet komen op multiline.

Geef de tekstvakken de instancenamen
naam
email
bericht

Zet in deze tekstvakken ook letterlijk deze tekst:
Naam
E-mail
Bericht
inclusief de hoofdletters etc.

Maak nu nog een tekstvak aan waar onze foutmeldingen in komen te staan.
Maak dit een dynamic tekstvak en geef het de instancenaam fouten.
We moeten dan nog een zend mail knop hebben en een wis alles knop, dus maak 2 buttons en plaats die bij je tekstvelden, geef ze de instancenamen wisKnop en verzendKnop.

We hebben dus nu 2 knoppen en 4 tekstvelden waarvan er 3 tekstvelden input zijn en een dynamic.

Selecteer nu alle textvelden en knoppen nu en druk op f8, in het venstertje wat opent vink je movie aan en geeft het een naam.
(formulier ofzo).
Klik nu op de main scene op die nieuwe movie en geef het de instancenaam mailFormulier.


Met dat formulier nog geselecteerd, openje het actionScript paneel en plaats het onderstaande script:

Het formulier is nu klaar, het "mooi" maken laat ik aan jullie fantasie over.


De email is succesvol verzonden
We hebben dus nu op onze timeline één keyFrame, en op de scene het mailFormulier.
De volgende stap is het maken van een bedankje wat getoont word als het mailen is gelukt.

Dus klik op de 2e frame in de main timeline, en insert een blank keyFrame (f6).

We hebben dus nu weer een leeg scherm, in dit scherm schrijf je een tekstje, waarin je de bezoeker zegt dat de email succesvol verzonden is.
Ook hier is de eyeCandy helemaal aan jullie fantasie :-)



Foutmelding
Het mailen lukt mischien niet altijd, dus moeten we ook een berichtje tonen dat het mailen mislukt is.
Dat gaan we maken op frame 3
Dus klik nu op het derde frame in de timeline en inserten weer een blank keyFrame.
In het weer lege scherm plaatsen we hier een tekst waarin er gezegd word dat de email NIET is verzonden.
Met andere woorden, dit scherm hopen we nooit te zien :-)

In dit keyFrame (het 3e in de main timeline) plaatsen we het volgende script:


Als er op de verzendknop werd geklikt en de controles resulteerde true, dan werd er een shared object geplaatst ivm de antispam functie.
Omdat er niet gemailed werd, is het cookie overbodig en moet weggehaald worden, anders kan de klant 2 minuten niet proberen opnieuw te mailen.
Met bovenstaande actionScript legen we het cookie en kan er gelijk opnieuw worden gemailed.



controleren en verzenden (of juist niet)
We hebben nu dus op de main timeline 3 keyframes, met op frame 1 het formulier, op frame 2 onze bedankt boodschap en op frame 3 de mislukt boodschap.

In het tweede keyFrame plaatsen we een stop();

In het eerste keyframe komt het script wat alles controleerd en eventueel de foutmeldingen toont.
Ik heb het script voldoende commentaar gegeven, dus ik denk niet dat ik daar verder iets aan hoeft uit te leggen.

Het enige wat er nog veranderd MOET worden in het script is het email adres waar de mail naartoe moet.

Copieer het onderstaande actionScript en plak die in het eerste keyFrame op de main scene.
Let, je moet het email adres nog aanpassen naar jouw E-mail adres, ook de "meldingen" kan je daar aanpassen.





tijdens het verzenden.
Als alle velden goed waren ingevuld word er een php bestand aangesproken.
We willen dus wel dat er een controle is ingebouwd die kijkt of het php bestand wel werd gevonden, en er dus gemailed kan worden.

Tijdens deze controle tonen we een animatie die 30 seconden (kan) duren.
Deze 30 seconden is ook de (standaart) timeout tijd van php.

We maken dus een nieuwe movieclip (ctrl+f8)

Nu inserten we een nieuwe blank keyFrame in de timeline (van deze nieuwe movieclip).

Er staan nu dus twee lege keyframes in de timeline.
Plaats op het 2e keyframe een figuurtje dat we gaan laten draaien.

Neem de oval tool (o), en teken een cirkel.
Met de gum kunnen we een klein stukje weggummen uit de rand van het cirkeltje, zodat het duidelijk is dat het draait.
Klik nu op de 2e keyFrame en rechtsklik =>create motion tween.

Ik ga er even vanuit dat je fla 12 FPS is (ook standaart), dus we plaatsen we een keyFrame op frame 13.
(zo duurt één loop precies één seconde)
Er is nu een paarse balk in de timeline te zien.
Selecteer de 2e keyFrame weer in de main timeline en in het properties scherm van die frame selecteren we rotate/CW.

Als het goed is houden we dus een cirkeltje over wat ronddraait.

Er zijn dus nu 13 frames in beeld, waarvan de eerste leeg is, en de rest is onze motiontween.

Maak een nieuwe laag aan, boven het cirkeltje en zet met de texttool daar een dynamish tektvakje ter grote van 2 cijfers en centreer de tekst.
Zet het tekstvakje in het midden van het cirkeltje en geef het de variable naam "tijd".

Nu hebben we nog een klein beetje actionscript nodig wat ervoor zorgt dat het cirkeltje maar 30 seconden in beeld is, en daarna de bezoeker doorverwijst naar de fout pagina, want blijkbaar is de mail na 30 seconden niet verzonden.

Op een nieuwe laag, genaamd "actions" zetten we op de eerste lege keyframe het volgende script:

Klik op die laag op frame 13 en insert een blank keyframe, in dat keyframe plaats je de volgende code:

Deze code zorgt ervoor dat elke keer als de pointer op frame 13 komt, dat hij terugspringt naar frame 2 en dus weer opnieuw begint te draaien.
Ondertussen word er ook elke keer 1 puntje van onze tijd afgetrokken, zodra de tijd op 0 staat zijn er dus 30 seconden voorbij en gaat de flash naar het 3e frame waar de foutmelding dus staat, dat het mailen mislukt is.

We moeten nu weer naar de main scene gaan en slepen de movieclip die we net gemaakt hebben op ons werkblad.
Daar geven we het de instance naam bezig.

Het mailformulier hieronder werkt echt, maar de email php word niet gevonden, je zal dus echt 30 seconden moeten wachten om daarna de foutmelding te zien.


Het php bestand
Tot zover het flash gedeelte, nu moeten we alleen nog even een php bestandje hebben wat alles werkelijk doormailt.

Open je favoriete editor en plak onderstaande php code in een nieuw bestand.

Save dit bestand als email.php en zet het in dezelfde map als waar je swf staat.


Je moet alleen nog even in bovenstaande scriptje je naam aanpassen, anders krijg je mailtjes van mensen met de naam "jouwNaamHier".


Nu alles op een php enabled server zetten en je hebt je eigen deftig email formulier.



Mocht een en ander niet duidelijk zijn, dan heb ik hier een fla bestand ter ondersteuning voor deze flash email applicatie.
(alleen zelf nog mooi maken ^^ )