Flash advanced mail
advanced email formulier. Basis kennis van flash maakt het
wel makkelijker deze tut echt te begrijpen.
In deze tutorial ga ik proberen zo kort mogelijk uit te leggen hoe je een
email formulier in flash kan maken, die ook controleert op fouten etc.
Een voorbeeld van een email formulier zonder poespas kan je hier vinden.
Onderstaand voorbeeld controleert de lengte van de string in de input veldjes
en het email adres wordt ook nog gechecked of het adres wel uit minimaal
6 characters bestaat, er geen spaties inzitten, er een @ inzit, of er
een punt komt NA de @ en of er NA de punt die NA de @ komt niet meer dan 3
characters komen.
Verder wordt er ook nog gekeken of er daadwerkelijk contact word gelegd met
de email.php, als dat niet gebeurt krijg je ook netjes een foutmelding.
(Deze swf heb ik aangepast zodat hij denkt dat er wel
een php aanhangt en zal dus nooit een foutmelding geven)
Om te beginnen maken we in de main scene 3 blank keyFrames aan en zetten
overal een stop();
Op de eerste keyframe komt ons formuliertje, op de 2e onze "bedankt" boodschap
en op de derde een "er is iets misgegaan" boodschap.
In de eerste keyframe gaan we 4 dynamic
tekstvakken maken met de volgende namen :
|
instanceName |
variabelName |
|
naamVak |
naam |
|
emailVak |
email |
|
berichtVak |
bericht |
|
geheimVeld |
hidden |
Zet hierin een geheime string (ik heb "scoobydoo" gebruikt(dit
vind je ook in de php terug)) |
De reden dat ik ook instance namen gebruik, is omdat ik dingen moet gaan doen
die niet met de variabel kunnen (omdat die nog niet zijn gedeclareerd).
Als je deze 4 tekstvakken hebt gemaakt en de juiste instance en variable namen
hebt gegeven, dan maken we van deze tekstvakken een movieclip door ze alle
vier te selecteren en dan f8 te klikken.
De reden dat ik 4 tekstvakken heb gebruikt in plaats van de 3 die je ziet is
omdat ik niet wil dat de email.php kan worden aangesproken zonder dat je die
geheime waarde meestuurt.
Dit geheime vak wordt onzichtbaar gemaakt verderop in het AS.
In de main scene moet je deze nieuwe movieclip met de 4 tekstvakken de instance
naam "formulier" geven .
Nu moeten we nog 2 knoppen hebben
(verzenden en wissen) dus die mag je ook even maken en deze in de main scene
zetten.
Geef ze de instance namen "verzendKnop" en "wisKnop".
Tot zover de inputvelden en de knoppen.
Het volgende wat we nodig hebben is een movieclip die onze fouten weergeeft.
Maak dus een nieuwe mc aan en maak daarin 2 blank keyframes aan.
Zet op elke frame een stop();
De eerste keyframe moet leeg zijn en op de tweede keyframe zetten we een dynamish
tekstveld met de instance naam "label".
Zorg ervoor dat het tekstvak
groot genoeg is om je errors in te tonen.
Als je deze mc gemaakt hebt zet hem dan in de main scene in frame 1 en geef
hem de naam "errors".
Als laatste heb ik er nog een controle bijgemaakt, deze controle geeft na
een bepaalde tijd aan dat er geen contact werd gemaakt met de email.php en
dan de pointer van onze swf naar frame 3 zet, waar onze "sorrie er is
iets misgegaan" boodschap
staat.
De werking van deze mc leg ik helemaal onderaan nog uit.
Nu hebben we zo ongeveer het belangrijkste wat nodig is hebben, en is het
tijd voor wat actionscript.
Selecteer het eerste keyframe in de main scene en open het AS panel.
Daarin zetten we de volgende AS:
stop();
//ons "geheime" tekstveld onzichtbaar maken.
formulier.geheimVeld._visible = false;
//ongewenste characters excluden uit het email tekstvak.
formulier.emailVak.restrict =
"^!^"^#^$^%^&^(^)^'^?^;^+^±^=^¸°^¸^,^[^]^¦^*^€^{^}^>^<";
//velden leegmaken knop.
wisKnop.onRelease = function()
{
formulier.naamVak.text = "";
formulier.emailVak.text = "";
formulier.berichtVak.text = "";
errors.gotoAndStop(1);
};
//aray aanmaken waarin de fouten worden opgesomt.
foutjes = Array();
//de hele meuk controleren en evt verzenden.
verzendKnop.onRelease = function()
{
//naam veld checken.
if (formulier.naamVak.text.length<=1)
{
foutjes[0] = "Naam fout.";
naamerror = "1";
} else {
foutjes[0] = "";
naamerror = "0";
}
//email veld checken
if ((formulier.emailVak.text.length<6)
||
(formulier.emailVak.text.indexOf(" ")>=0)
||
(formulier.emailVak.text.indexOf("@")<=0)
||
(formulier.emailVak.text.lastIndexOf(".")<formulier.emailVak.text.indexOf("@"))
||
((formulier.emailVak.text.lastIndexOf(".")+3)>formulier.emailVak.text.length))
{
foutjes[1] = "Ongeldig e-mail adres.";
emailerror = "1";
} else {
foutjes[1] = "";
emailerror = "0";
}
//bericht checken.
if (formulier.berichtVak.text.length<=20)
{
foutjes[2] = "Het bericht is te kort.";
berichterror = "1";
} else {
berichterror = "0";
foutjes[2] = "";
}
//als alles gechecked is, kijk ik hier nog of er fout meldingen zijn, zo niet,
dan posten naar php
if ((naamerror == "0") && (emailerror
== "0") && (berichterror
== "0")) {
formulier.loadVariables("email.php", "POST");
verzendKnop.enabled = false;
wisKnop.enabled = false;
errors.gotoAndStop(1);
bezig.play();
} else {
//als er wel fouten zijn, dan de errors laten zien.
errors.gotoAndStop(2);
errors.label.text = foutjes[0]+newline+foutjes[1]+newline+foutjes[2];
}
};
|
Bovenstaande AS lijkt me redelijk duidelijk, mocht je daar toch vragen bij
hebben stel ze dan gerust bij de comments of in het forum.
Dan selecteren we in de main scene onze "formulier" mc en geven die
onderstaande AS mee:
onClipEvent (data) {
_root.nextFrame();
}
|
Met dit stukje AS wordt er door de "formulier"- mc gecontroleerd
of er een data overdracht plaatsvond. Zodra dat gebeurd is, gaat de pointer
van onze swf naar het volgende frame, meerbepaald frame 2 , waar we ons "bedankt"-
bericht hebben gezet.
Als je het lange stuk script goed hebt bekeken, dan zag je dat als er geen
errors waren "bezig" moest gaan spelen.
Die "bezig" is een mc dat onze kijker bezighoudt terwijl er overdracht
plaatsvindt naar de email.php.
In mijn voorbeeldje had ik een cirkeltje gemaakt dat ronddraaide.
Hieronder de uitleg van die "bezig" mc.
Maak een nieuwe mc met op de timeline eerst een lege keyframe en daarin
de volgende AS:
Op de tweede keyframe heb ik een cirkeltje getekend die ik via motion tween
over 10 frames een ronddraaiende beweging liet maken.
In frame 10 heb ik de volgende AS gezet:
aftellen++;
gotoAndPlay(2);
if(aftellen == 10){
_root.gotoAndStop(3);
} |
Hieronder heb ik nog een swf gezet die echt werkt, er zit alleen geen php
bij. Er word dus ook niet gemailed en geeft een foutmelding.
De email.php
De volgende code gebruik ik om de email te verzenden.
Noem dit bestand "email.php" en zet het in dezelfde directory als die
waar de swf staat.
<?php
$to = "jou@emailAdres.com";
$subject = "Hier het onderwerp van de mail";
$check = $_POST['hidden'];
$bericht = $_POST['bericht'] ;
$header = "From: " . $_POST['naam'] . " <" . $_POST['email'] . ">
";
$header .= "Reply-To: " . $_POST['naam'] . " <" . $_POST['email'] . ">
";
$header .= "X-Priority: 1";
//scoobydoo is de "geheime" variabel in flash
als je hem hier verandert dan moet dat ook in flash en andersom.
if ($check == "scoobydoo")
{
mail ($to, $subject, $bericht, $header);
}
?>
|
Tot zover deze tutorial die mischien wel wat lang is voor een email form
maar dan heb je ook wat
In mijn voorbeeldjes heb ik de tekstvakken nog een makeover gegeven. Hoe dat
werkt kan je hier terug
lezen.
Om deze tutorial nog wat te verduidelijken heb je hier de
fla en het php bestand.
Mocht deze tutorial nog niet helemaal voldoen aan je verwachting, bezoek
dan mijn website voor een
eventuele geupdate tutorial.
mvg vinTage
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.4) 