Anzeige
Tutorialbeschreibung

Kontaktformular mit Flash und PHP

Kontaktformular mit Flash und PHP

Bilder


Kontaktformular in Flash


Inhalt:
Mit diesem Tutorial möchte ich euch zeigen wie Ihr ein Kontaktformular in Flash erstellt.
Dazu gehört natürlich auch das PHP-Script.

Man benötigt hierfür einen Server, welcher mindestens PHP 3 unterstützt.
Auf das spätere PHP-Script werde ich nur bedingt eingehen.

Ebenso setze ich Grundwissen in Flash voraus.
Ich werde hier nicht erklären wie man Textfelder erstellt oder wo man Action Script ablegt.

Los geht's!


Als erstes benötigen wir eine neue Bühne ( Strg N / Neues Flash Dokument )
Bitte fügt gleich drei Ebenen ein.
1. Ebene Textfelder
2. Ebene Buttons
3. Ebene Script

Nun brauchen wir in unserem ersten Frame Ebene Textfelder, 3 Textfelder.

Instancename: name_clikk Variablenname: nachname
Instancename: mail_clikk   Variablenname: mailfrom
Instancename: nach_clikk  Variablenname: body

Alle drei müssen als Eigenschaft Eingabefelder sein.

Bilder


Dann noch zwei Textfelder mit folgendem Inhalt: "senden" sowie "löschen"
Diese müssen aber keine Eingabefelder sein.

Erstellt gleichzeitig bitte einen Button der in seinem Inhalt unsichtbar ist und eine Größe von 40 x 20 px hat.

Da ich seid 2 Jahren keine richtigen Schaltflächen und Grafiksymbole benutze
nehmen wir hier einfach einen MovieClip als Buttons.
Also einfach MovieClip erstellen. In Ihm ein Rechteck mit 40 x 20 Px ziehen und den Alpha-Wert 0 zuweisen.
Diesen MovieClip brauchen wir dann zweimal auf der Bühne im ersten Frame der Ebene Buttons.

Bitte jeweils über das Wort senden und löschen positionieren.
Die MovieClips haben folgenden Instancenamen: "senden" und "loeschen"
Wohin welcher kommt sollte klar sein. :-)

Wenn Ihr soweit seid sollte eure Bühne in etwa so aussehen.
Ich habe Rahmen um meine Textfelder gemacht. Dann seht ihr sie besser.

Bilder

Bilder


1. Teil vom Script

Beginnen wir nun mit unserem ersten Script.
Ich lege den Script im ersten Frame in der Ebene Script ab.
In diesem Teil wollen wir den Inhalt unserer Textfelder bestimmen
sowie unsere Funktion des lösch Buttons schreiben.

Action Script Part 1: Erläuterungen:
stop();
System.useCodepage = true;

_root.signalcontact = 0;
nachname = "name";
mailfrom = "mail";
Body = "message";


loeschen.onRelease = function() {
nachname = "name";
mailfrom = "mail";
body = "message";
}
Das Wort sagt es ja schon. :-)
Texte werden mit der herkömmlichen Codepage des Betriebssystems interpretiert.

Dieses Variable benötigen wir später im PHP Part.
Text der später im Textfeld zu anfangs angezeigt werden soll.
Text der später im Textfeld zu anfangs angezeigt werden soll.
Text der später im Textfeld zu anfangs angezeigt werden soll.
Braucht Ihr nicht unbedingt machen. Ich könnt den Inhalt natürlich gleich schreiben.

Das ist unser lösch Button. Beim Drücken sollen die Textfelder wieder
in ihren Ursprungswert zurückfallen.

2. Teil vom Script

Dieser kommt direkt unter den ersten Teil ins gleiche Frame.
Hier geht es um den Focus der Textfelder.
Wir wollen das der Standartinhalt automatisch verschwindet sobald der User in das Feld klickt.
Das funktioniert mit onSetFocus und onKillFocus.

Action Script Part 2: Erläuterungen:
name_clikk.onSetFocus = function() {
if (nachname == "name") {
nachname = "";
}
};
name_clikk.onKillFocus = function() {
if (nachname == "") {
nachname = "name";
}
};
mail_clikk.onSetFocus = function() {
if (mailfrom == "mail") {
mailfrom = "";
}
};
mail_clikk.onKillFocus = function() {
if (mailfrom == "") {
mailfrom = "mail";
}
};
nach_clikk.onSetFocus = function() {
if (body == "message") {
body = "";
}
};
nach_clikk.onKillFocus = function() {
if (body == "") {
body = "message";
}
};

Sobald das Feld den Focus erhält. (Wenn jemand reinklickt)
Wenn das Textfeld das Wort name enthält
dann lösche den Inhalt dieses Textfeldes.


Sobald das Feld den Focus verliert. (Wenn was anderes angeklickt wurde)
Wenn das Textfeld leer ist
dann schreibe das Wort name rein.


Sobald das Feld den Focus erhält. (Wenn jemand reinklickt)
Wenn das Textfeld das Wort mail enthält
dann lösche den Inhalt dieses Textfeldes.


Sobald das Feld den Focus verliert. (Wenn was anderes angeklickt wurde)
Wenn das Textfeld leer ist
dann schreibe das Wort mail rein.


Sobald das Feld den Focus erhält. (Wenn jemand reinklickt)
Wenn das Textfeld das Wort message enthält
dann lösche den Inhalt dieses Textfeldes.


Sobald das Feld den Focus verliert. (Wenn was anderes angeklickt wurde)
Wenn das Textfeld leer ist
dann schreibe das Wort message rein.



Ihr könnt den Film nun zum ersten mal testen.
Prüft ob die Textfelder sich leeren wenn ihr hineinklickt. Sollte aber alles soweit funktionieren.



3. Teil vom Script


Dieser kommt ebenso ins gleiche Frame unter den anderen Scripten.
Hier geht es um das prüfen der Textfelder vor dem Abschicken.
Wenn alle Felder ausgefüllt wurden wird das Formular verschickt.
Dieser Script ist eine Funktion des Senden Buttons.

Action Script Part 3: Erläuterungen:
senden.onPress = function() {
if (body === "message" || body === "Ihren Text bitte!" || body === "") {
body = "Ihren Text bitte!";
} else {
s_nachricht = 1;
}
if (nachname === "name" || nachname === "Ihren Namen bitte!" || nachname === "") {
nachname = "Ihren Namen bitte!";
} else {
s_nachname = 1;
}
if (mailfrom.indexOf("@") == -1 || mailfrom.indexOf(".") == -1 || mailfrom == "mail") {
mailfrom = "unbekannte E-mail";
} else {
s_mail = 1;
}
if (s_nachricht == 1 && s_nachname == 1 && s_mail == 1) {
gesendet = "";
s_body = 2;
s_nachname = 2;
s_mail = 2;
loadVariablesNum("contact.php", 0, "POST");
gotoAndStop(2);
}
}
Beginn unserer Funktion beim Drücken des Buttons senden.
Überprüfen des Textfeldes body. 
Bei fehlern kommt dieser Text.
Ansonsten,
wird die Variable auf 1 gesetzt. Diese s Variablen brauche ich unten.

Das ganze natürlich drei mal. Für jedes Feld eben.




Mit indexOf prüfe ich ob sich ein @ und ein . im Textfeld befindet.
Es gibt viele asdf User die mal schnell kucken wollen was passiert.
Bei uns müssten sie aber z.B. asdf@asdf.asdf eingeben. Umständlich!
Also lassen sie es sein und wir werden verschont von asdf mails. :-)

Hier prüfen wir nun ob alle Variablen auf 1 gesetzt wurden.
Sprich ob alles korrekt eingegeben wurde.
Wenn ja, dann wird unsere PHP-Datei geladen.
Die Variablen versenden wir mit POST. Bei diesem Befehl und unserer
Schreibweise werden alle lokalen Variablen an das PHP-Script gesendet.

Außerdem gehen wir nun zum 2.Bild über.

 

Gehen wir nun zu unserem 2. Frame.

Nachdem der User die eMail verschickt hat wollen wir dem User mitteilen ob die eMail auch wirklich versand wurde.
Wir prüfen also ob unser PHP Script aufgerufen wurde und alles verarbeitet hat.

Ihr fügt in der Ebene Textfelder 2. Frame folgenden Text ein: please wait...
Eigentlich ist es egal was aber der User soll darauf hingewiesen werden das er kurz warten muss. Zumindest Modemuser.

Das Frame Buttons bleibt hier leer. Wir brauchen hier ja keinen.

Wir haben dann im 2. Frame in der Ebene Script folgenden Code stehen:

 

Action Script 2. Frame: Erläuterungen:
stop();
onEnterFrame = function(){
  if(_root.signalcontact == 1){
    delete this.onEnterFrame;
    gotoAndStop(3);
   }
}
Wir wollen erst einmal auf Frame 2 Stoppen.
Einleiten einer onEnterFrame Schleife.
Hier prüfen wir ob unsere Variable signalcontact vom PHP Script auf 1 gesetzt wurde.
Wenn ja dann löschen wir die onEnterFrame Schleife
und gehen zum 3. Frame über.

Anstelle der onEnterFrame Lösung könnten wie hier auch ein LoadVars Objekt einbauen.
Denn, sollte unser PHP Script nicht antworten so bleibt unser Film ab hier stehen. Einfach so... :-)

Da wir aber alles richtig machen und super funktioniert, entscheiden wir uns für die schnellere bzw. kürzere Variante. :-)


Gehen wir nun zu unserem 3. Frame.

Jetzt kommt eigentlich nicht mehr viel.
Hier geht's nur darum einen Zurückbutton einzubauen sowie dem User einen Text zu schreiben
das die Mail versand wurde.

Also Ebene Textfelder einen ähnlichen Text schreiben sowie das Wort "zurück".
Auf das Wort "zurück" legt ihr wieder einen Button aus der Bibliothek in der Ebene Buttons ab.
Gleiches Prinzip wie im 1. Frame mit senden und löschen.

Als Instancenamen hat dieser Button den Namen "back"

Folgenden Code bitte in der Ebene Script ablegen:

Action Script 2. Frame: Erläuterungen:
stop();
back.onPress = function(){
  gotoAndStop(1);
}
Wir wollen erst einmal auf Frame 3 Stoppen.
Funktionsstart für den Button beim onPress
Wir wollen wieder zurück zum 1. Frame

Somit wäre der Flash Part ersteinmal fertig.

Da der PHP Teil viel zu lang für diesen Workshop wäre.

Das komplette Formular findet Ihr im Bereich downloads / Flash
Außerdem liegt eine readme.txt dabei, welche Ihr euch zuerst durchlesen solltet.

In dieser erkläre ich euch wie Ihr vorzugehen habt und was der PHP Teil noch so bietet.

Für Fragen, Anregungen oder Verbesserungsvorschläge bin ich gerne offen.

Ich wünsche Euch nun viel Spaß!


Euer Schinki

Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Diveraowd
  • 19.04.2012 - 19:01

Danke. Das hat mir sehr geholfen :)

Portrait von whoknow
  • 16.09.2010 - 15:13

thanx, merci, si, danke,aregato,spasibo,bayarlalaa

Portrait von WebDiver_09
  • 29.08.2010 - 17:37

Klasse, kann ich grad gut gebrauchen!

Portrait von fhabits
  • 22.06.2010 - 11:17

top. fettes merci. superhilfreich

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.04.2010 - 17:22

Vielen Dank für das tut.
Im ActionScript Part 1 ist übrigens ein klitzekleiner Fehler:
Body = "message";
müsste body (kleingeschrieben) heißen

ob es funktioniert sehe ich ja leider erst, wenn ich mich durch den php-teil gearbeitet habe...

Portrait von videom
  • 23.01.2010 - 18:23

Vielen Dank!!! Das hat mir sehr echt geholfen!!!

Portrait von willwissen
  • 11.11.2009 - 19:32

Also mir hat dieser kleine Lehrgang sehr gut geholfen!!
Ich wünschte ich könnte auch einen solchen Beitrag leisten!

Portrait von skewster
  • 08.11.2009 - 14:26

Super gemacht! Wollt ich schon immer mal machen. Hab mich aber bisher noch nicht rangetraut. Dankeschön!

Portrait von Schleppschuh
  • 18.08.2009 - 13:30

Super ! Sehr gut erklärt, leicht nachvollziehbar und funktioniert einwandfrei !

Portrait von paul_schmidt
  • 22.07.2009 - 02:18

Ganz toll. Vielen Dank dafür.
Gruß
Paul

Portrait von Limnoura
  • 24.06.2009 - 15:09

Schönes Tutorial. Jedenfals für den Flash-Teil. Mit dem PHP Teil werde ich mich später auseinandersetzen ;).

Portrait von mrxmrx
  • 02.06.2009 - 18:36

Gut erklärt, und funktioniert einwandfrei. Einen kurzer PHP Ausschnitt hätte ich mit noch gewünscht.

Portrait von bss
bss
  • 15.05.2009 - 23:00

Das Tutorial, ist zwar schon 2 Jahre alt aber trotzdem nicht schlecht und das erste Kontaktformular wo ich sofort die Umlaute hinbekommen habe. Zwar funktionier ß nicht, aber es gibt schlimmeres. Den einen Punkt zieh ich ab, da der PHP-Teil nicht richtig beschrieben wurde. Wäre nicht schlecht gewesen, irgendwo in der readme Datei zu vermerken, wo man die Email-Adresse ändern muss ohne groß zu suchen.

Portrait von Morano
  • 20.03.2009 - 08:51

Hallo klasse tut!
Nur leider löscht der die "message" nicht on klick. Das liegt ja wie bereits hier beschrieben an dem großen B in "Body" im folgenden Block:

_root.signalcontact = 0;
nachname = "name";
mailfrom = "mail";
Body = "message";

b einfach klein schreiben und es klappt..

Danke!

Portrait von alteradel_steffi
Portrait von olaf2211
  • 19.12.2008 - 10:54

Klsse tut hat mir sehr geholfen, danke

lg Olaf

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.10.2008 - 11:36

thumbs up. super erklärt!

Portrait von Daphne10
  • 15.09.2008 - 09:48

Schön erklärt, nur leider kann ich die Flash-Datei nicht öffnen. Also kann ich nun auch nicht nachvollziehen, warum meine Flash.Kontaktformular nicht funktioniert. Schade. Kann mir jemand helfen. Im Grunde funktioniert alles, bis auf eine Kleinigkeit: Die E-mail mit den Infos kommt nicht bei mir an.
Was mache ich falsch??

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.08.2008 - 10:53

Hallo.

Also das Tutorial ist gut keine Frage,

ABER, was bringt mir das ohne der PHP Erklärung.

Habe auch schon die genannten dateien runtergeladen, dort is
aber nur eine fertige php datei mit der ich nicht anfangen kann.

Bitte um hilfe, wie krige ich das ganze nun zum laufen,
oder war das ganze nur zeitverscfhwendung???

Portrait von doedel_ei
  • 07.08.2008 - 08:44

Ich habe das Tutorial durch und eingebaut, die Mail wird auch soweit generiert (ist übrigens das einzige Tutorial wo das geklappt hat), allerdings wird der Inhalt nicht übertragen und die Mail kommt leer an.
Was mich ebenfalls wundert ist, dass der Actionscript teil im Tutorial anders ist als letztendlich in der Datei. Dadurch habe ich keine Chance das nachzuvollziehen.

x
×
×