Magazine Internet

[FLASH] Form mail php : Design 1/2

Publié le 16 mars 2009 par Avi Teboul
Voici comment réaliser un formulaire mail en flash et php.


1) Créez sur votre desktop un folder : formail
2) Copiez dedans le fichier : mc_tween.as - ici
3) Ouvrez Flash
4) Créez un fichier flash AS2 et pas AS3
5) Créez plusieurs calques et nommez-les : Design, Textes, Boutons, Erreurs, AS.
6) Sauvez votre fichier dans le répertoire : formail avec le nom par défaut.
7) Changez la taille de votre animation en : 240x400.
8 ) Changez la couleur de fond de l'animation par celle de votre choix.
9) Créez un movieclip et donnez-lui comme nom : bg_champs.
10) Dedans dessinez un rectangle de taille moyenne.
11) Placez-vous sur le calque Textes et placez les champs suivants : nom - email - sujet - message.
12) Ces champs doivent être en format saisie et donnez comme nom : txt_nom - txt_email - txt_sujet - txt_message.
13) Placez-vous sur le calque Design, posez le movieclip créé avant en dessous de chaque champs texte, et donnez respectivement les noms suivants : mc_nom - mc_email - mc_sujet - mc_message.
14) Maintenant placez-vous sur le calque AS, faites F9 et copiez/collez le code suivant :

#include "mc_tween.as"

15) Maintenant revenez sur la scène principale et tapez dans les champs de saisie la valeur du champ : nom - email - sujet - message.
16) Placez-vous sur le calque AS et faites F9, nous allons animer les champs texte et le background des champs, coller le code suivant en dessous du include :

//ce code efface le contenu du champ lorsqu'il est sélectionné et exécute un alpha du background
txt_nom.onSetFocus = function() {
if (txt_nom.text == "NOM") {
txt_nom.text = "";
mc_nom.alphaTo(30, 1, "easeOutExpo");
}
};
//ce code remet le contenu du champ à  sa valeur et remet le background à  100%
txt_nom.onKillFocus = function() {
if (txt_nom.text == "") {
txt_nom.text = "NOM";
mc_nom.alphaTo(100, 1, "easeOutExpo");
}
};

Il faut copier ce code pour chaque champ de notre formulaire et modifier le champ txt et celui du mc.
17) Faites un ctrl+enter afin de vérifier que tous nos champs soient fonctionnels.
18) Nous allons utiliser une autre fonction de cette classe : colorTo().
19) Créez un nouveau movieclip, dedans créez deux calques un fond et l'autre texte
20) Dessinez un rectangle et sur l'autre calque le texte : envoie
21) Convertissez le fond du bouton en MovieClip : bt_envoie_mc
22) Placez votre bouton sur le calque boutons et donnez-lui comme nom : bt_envoie.
23) Faites F9 et collez le code suivant :

bt_envoie.onPress = function() {
this.bt_envoie_mc.colorTo(btOut,1,"easeOutExpo");
};
bt_envoie.onRollOver = function() {
this.bt_envoie_mc.colorTo(btOn,1,"easeOutExpo");
};
bt_envoie.onRollOut = function() {
this.bt_envoie_mc.colorTo(btOut,1,"easeOutExpo");
};

24) Maintenant il faut déclarer les deux variables suivantes : btON et btOUT pour la couleur, placer le code suivant en haut juste en dessous du include.


//Couleur du bouton clear et envoie lors du rollover.
var btOn = "0x990066";
var btOut = "0x993399";

25) Faites ctrl+enter afin de vérifier le bon fonctionnement.
26) Maintenant créez le bouton clear de la même façon, dupliquez le clip bt_envoie et bt_envoie_mc dans la bibliothèque et changez le nom du bouton et le movieclip de fond.
27) Placez votre bouton sur la scène et ajoutez le code suivant :

//Bouton clear
bt_clear.onPress = function() {
this.bt_clear_mc.colorTo(btOut,1,"easeOutExpo");
};
bt_clear.onRollOver = function() {
this.bt_clear_mc.colorTo(btOn,1,"easeOutExpo");
};
bt_clear.onRollOut = function() {
this.bt_clear_mc.colorTo(btOut,1,"easeOutExpo");
};

28) Allez sur le calque Erreurs et placez un champ dynamique avec comme nom : txt_erreur.
Voilà c'est fini pour la première partie : dans la deuxième nous ajouterons le code php afin de rendre notre formulaire opérationnel.
Démo : ICI
Source : ICI
Bàv,
Burnside.

[FLASH] Form mail php : Design 1/2


Les dernieres videos de buzz

Voir les dernieres videos

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Avi Teboul 600 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog