Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Champs de saisie amelioré

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Par k-ny

Article écrit le 11/04/2007 18:18.
Par k-ny ( Blog ).



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 …

Au programme

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

Download