Champs de saisie amelioré

Voici un mini-tuto pour vous montrer comment donnez un peu de punch à vos champs de saisie.
Le code qui suit va permettre de changer la couleur de vos champs lorsqu’ils ont le focus, de les preremplir, de les vider lors du 1er focus, de leur donner un effet de profondeur, etc ...

Le script

Placez un champs de texte de saisie sur votre scene, et donnez lui comme nom d’occurence “test“.
Ensuite placez ce code sur le scenario principal:

/**********************************************************
#Fonction à appeler ...
**********************************************************/
/*  
|	Elle prend 4 paramètres obligatoires
|	*champs:TextField --> l'occurence de votre champs de texte
|	*defaut_txt:String --> chaine de pre-remplissage
|	*color1:Number --> Couleur du fond par defaut
|	*color2:Number --> Couleur du fond au focus
*/
function txt_focus(champs:TextField, defaut_txt:String, color1:Number, color2:Number):Void {
	//On stock la couleur actuelle du texte
	var init_color:Number = champs.textColor;
	//On active la bordure
	champs.border = true;
	//On active le background
	champs.background = true;
	//On defini la couleur de background
	champs.backgroundColor = color1;
	//On met le texte en gris clair
	champs.textColor = 0x999999;
	//Lorsque le champs obtient le focus
	champs.onSetFocus = function(Void):Void  {
		//On affiche le texte de pre-remplissage
		this.text = defaut_txt;
		//On change le fond
		this.backgroundColor = color2;
		//On remet la couleur de texte originale
		this.textColor = init_color;
		//On vire la fonction onSetFocus
		delete this.onSetFocus;
		//Un 2ème onSetFocus pour les prochains focus sur le champs
		champs.onSetFocus = function(Void):Void  {
			champs.backgroundColor = color2;
		};
	};
	//On change le fond quand on perd le focus
	champs.onKillFocus = function(Void):Void  {
		this.backgroundColor = color1;
	};
	//Creation du demi cadre pour effet de profondeur
	var cadre:MovieClip = this.createEmptyMovieClip("cadre", this.getNextHighestDepth());
	cadre.lineStyle(0, 0xbbbbbb, 100, true, "none");
	cadre.moveTo(champs._x+champs._width, champs._y);
	cadre.lineTo(champs._x+champs._width, champs._y+champs._height);
	cadre.lineTo(champs._x, champs._y+champs._height);
}
/**********************************************************
#Affectation des champs de texte
**********************************************************/
this.test.text = "Votre nom ici ...";
txt_focus(test, 'Nom : ', 0xEEF3F5, 0xFFF9EC);

Voilà, il suffit d’appeler la fonction txt_focus pour chacun des champs que vous souhaitez. Vous y renseignrez le nom d’occurence du champs, le text de pre-remplissage, la couleur de fond par defaut et la couleur de fond au focus.

Exemples

Exemple de champs de saisie

Download

Telecharger les fichiers d'exemple

astuces

, fla

, flash

:: #38 :: rss :: Haut

Commentaires

1. Par Stip93

Salut K-Ny,
j'ai l'impression que ca bugge un chouilla ! Le 1er OnSetFocus fontionne, ensuite l'appli bug et plus moyen de rien faire.
Et tant qu'à faire, pour avoir un tuto exhaustif ;), sur le OnKillFocus, j'aurais ré-assigné les variables par défaut des champs de textes (comme ça, si je n'écris rien dans la 1ere case, j'ai toujours le texte : " Votre nom ici ... ".).

L8r

Le lundi 16 avril 2007 à 14:24

2. Par k-ny

Salut,

Comment ça plus moyen de rien faire ? De mon coté ça tourne nickel .... :o
C'est mon fichier d'exemple qui bug ?

Pour le onKillFocus, j'ay ai pensé, mais je voulais me rapprocher des comportements de champs de saisie javascript classique, qui ne réecrive pas le texte par defaut ...

Bon en mème temps, si il y a des interessé par cette fonction, je rajoute les 2 lignes de code qu'il faudrait

Mais le bug, je ne comprend vraiment pas ! (Compil avec flash8, et testé sous player flash9 et windows xp)

Thanks

Le lundi 16 avril 2007 à 16:24

3. Par Stip93

Comprends plus ... là ca fonctionne (ton fichier d'exemple). Alors qu'hier, meme en téléchargeant la source et en la compilant ca ne fonctionnait pas. Bon ... j'ai p'tete besoin de repos ... sorry !

Le mardi 17 avril 2007 à 10:30

4. Par k-ny

Ah ? C'est quand mème louche ... p't'ètre ton player swf qui a foiré ...

Enfin si quelqu'un d'autre rencontre ce soucis, qu'il se fasse entendre, merci :p

Ps: Voilà Stip ce qui arrive quand on fait des folies de son corps au lieu de dormir la nuit lol ^^

Le mardi 17 avril 2007 à 10:36

5. Par vidasorg

Hello,

Chez moi ça marche avec fond.swf mais impossible de lire fond.fla avec Flash MX 6... alors, comment faire ?! Merci de la réponse..

Le mardi 21 août 2007 à 13:25

6. Par jorcres

Moi je comprend rien à rien, je cherchais seulement une solution pour mettre des animations dans mon blog de façon à ce qu elles soit visibles en direct dans mes pages mais j arrive seulement à faire paraitre le lien de l animation sur lequel il faut cliquer pour la voir. Mon but était de dynamiser mon blog avec un effet visuel immédiat pas de devoir cliquer sur son titre pour la voir. De même si je veux télécharger une vidéo à partir du web je ne peux pas avoir la vidéo seule sans la page du site d'oû elle provient. Comment puis je procéder ? Quant à mon adresse blog qui est : jorcres.blogspot.com est inaccessible sur internet et semble ne pas exister. MERCI D AVANCE

Le lundi 12 novembre 2007 à 14:38

7. Par danbo

oh ben, ça marche très bien avec moé !
j'ai Mx et CS4, et même une tortue, et ça marche quand même!
Merci pour le tuto !