login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > Flash


Gegevens:
Geschreven door:
vinTage
Moeilijkheidsgraad:
Normaal
Hits:
15915
Punten:
Aantal punten:
 (4.4)
Aantal stemmen:
10
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (15)
 

Tutorial:

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:

stop();
aftellen = 1;


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



« Vorige tutorial : flash popups Volgende tutorial : mp3 player in flash »

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.019s