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.