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 :

  • Flash Infos .....

    Accord pour la TVA réduite dans la restaurationLe compromis qui a été trouvé aujourd'hui marque l'aboutissement de plusieurs années de tractations difficiles,... Lire la suite

    Par  Sumotic
    EMARKETING, INTERNET, SOCIÉTÉ, WEB2.0
  • Ajax Hotel Reservation Form, formulaire de reservation en ligne

    Ajax Hotel Reservation Form, formulaire reservation ligne

    Ajax Hotel Reservation Form est un script spécialisé et dédié à un secteur d’activité, l’hôtellerie, qui vous permettra de proposer à vos internautes la... Lire la suite

    Par  Myrmex
    INTERNET
  • Eco-design

    ECO DESIGN - TENDANCES 2009 - Introduction au rapport d'innovation Courts Circuits View more OpenOffice presentations from Jérémy Dumont. Lire la suite

    Par  Zebiz Net
    EMARKETING, FOCUS EMPLOI, INTERNET, MARKETING & PUBLICITÉ, A CLASSER
  • OVNI design

    OVNI design

    Lors de ma dernière brocante, je suis entrée dans la cour d'une vieille maison encombrée de caisses emplies d'objets hétéroclites, me disant, on ne sait jamais. Lire la suite

    Par  Madamebidule
    CÔTÉ FEMMES, GRAPHISME, TALENTS
  • TNA design

    Twiggy Lamp pour Maxray, 2007, design TNA©Lampe dont l'abat-jour est réalisé à partir de la découpe d'un papier fabriqué par Takeo, producteur japonais, évoquan... Lire la suite

    Par  Pierre Pozzi
    BEAUX ARTS, CULTURE
  • Design Peruongeluk

    Dans ce monde qui délire de plus en plus voici Part of Me histoire de manger vos objets familiers à la manière de Peruongeluk!!!Allez bon appétit bien... Lire la suite

    Par  Tonton
    INSOLITE
  • Infini design ...

    ... pour cette chaise réalisée par Brodie Neill. C'est bien le sentiment d'une boucle infinie qui ressort de ce dessin, et allié au matériau chromé utilisé on... Lire la suite

    Par  Kosmodesign
    CONSO, CÔTÉ FEMMES, DÉCORATION, DESIGN ET ARCHITECTURE

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