Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CHAMPS DE SAISIE AMELIORÉ


Information sur la source

Catégorie :Astuces Classé sous : kennyblog, kny, champs, saisie, amelioré Niveau : Débutant Date de création : 16/04/2007 Vu / téléchargé: 4 856 / 1 330

Note :
8 / 10 - par 3 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note


Description

Dans cette source je vais 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:
 

Source

  • /**********************************************************
  • #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);
/**********************************************************
#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);

Conclusion

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


Demo
----
http://blog.ka-studio.net/tuto/beau_champs/fond.html
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de scara 51 le 16/04/2007 23:13:25

Simple et efficace. Bon même si g déjà vu ca qlq part c cool d'avoir des sources comme ca.
Je me demandais, pourquoi mettre en paramètre des fonction Void comme ceci function(Void)
Ca ne gêne absolument pas le code de le mettre ou non, mé je me demandais quelle en était l'origine.

Bon voilà des fois je me pose des questions existentielles super importantes :)

signaler à un administrateur
Commentaire de x_mec le 17/04/2007 06:48:57

Bonjour et merci Scara ;)

Oui effectivement des sources semblable existe très certainement. On va dire qu'ici j'ai regroupé plusieurs fonctionnalités en une seule fonction. Et touours en essayant d'avoir la meilleur syntaxe possible.

Le void c'est du typage fort pour ma fonction, au mème titre que Number, String ou Boolean pour une variable (ou pour une fonction egalement si elle retourne une valeur). C'est un manière plus propre de coder, et puisplus l'actionscript avance (as3) et plus il faut ètre riguoureux dans sa programmation, donc autant prendre les bonnes habitudes dès le départ ;)

++

signaler à un administrateur
Commentaire de zoukozouko le 23/04/2007 01:24:23

Très malin. ca rend la saisie des utilisateurs plus intuitive. Très sympa!!!
bravo

signaler à un administrateur
Commentaire de Stivmakwin le 23/04/2007 22:55:59

Pour être plus précis Void signifie que la fonction ne retourne aucune valeur.
Attention la syntaxe est bien function ():Void et non function (Void).
L'intérêt du truc est que si par mégarde on ajoute une instruction return dans cette fonction, on aura un message d'erreur de typage. Et donc on sera obligé de décider si oui ou non cette fonction a pour but de retourner une valeur.

signaler à un administrateur
Commentaire de scara 51 le 24/04/2007 01:16:44

Je sé ca Stivmakwin :)
C pour ca que je parlais plutôt du paramètre Void qui peut être pris dans certains cas par Flash comme une variable s'il est mis entre parenthèses, et peut occasioinner des bugs si on utilise cet élément dans la fonction (mais qui ne pose pas de problème ici car les fonction ne contiennent aucune référence à la constante Void).

Je dis "peut" car je n'ai pas testé.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

variable champs de saisie, entre scene [ par pommes ] Salutj'ai dans une scene, plusieur champs de saisie, dont je me sert pour une fonction, le truc, c'est que je voudrai tramsmetre mes valeur a une autr envoyer un formulaire avec MX [ par fabrice88 ] salut,j'ai fais un formulaire avec des champs de texte de saisie.j'ai mis un bouton sans actionpour l'instant.comment dois je faire pour envoyer les c Champs de saisie invisibles.... [ par archette_b ] bonjour tout le monde,mon problème est 'simple', je charge un .swf dans une anim via un loadMovie, là tout marche. Mais les champs texte de saisie qui champs texte de saisie [ par YeahYeahYeahs ] hello.J'ai un ptit soucis avec les champs de saisies :J'ai un champs de saisie (non html et j'ai envie qu'il le reste)J'envoi le résultat dan champs de saisie [ par nabmoah ] bonjour ...   j'aimerai savoir comment peut on créer un champ de saisie simple ! j'ai essayé de créer un rectangle puis faire Comment afficher le résultat d'une saisie (en live) dans un champs dynamique? [ par twelve34 ] Voilà, j'ai deux champs texte : un champs de saisie et un champs dynamique.J'aimerais, en tapant dans mon champs de saisie que ça duplique ce que j'éc URGENT : liste déroulante champs texte et sharedObject [ par emilie_87 ] Bonjour,j'ai besoin d'aide d'urgence, j'espère que vous pourrez m'aider.Je suis actuellement en stage, il me reste une semaine, et biensur à la fin il clavier virtuel et saisir dans plusieurs champs de saisie independant [ par newlc ] Bonjour et bonne année à tous,je bosse sur un clavier en flash et je sais remplir un champs de saisie mais seulement j'ai trois champs de saisiecommen Problème avec les champs de saisie [ par copy63 ] Salut à tous je débute un peu dans AS2. J'ai réalisé un programme avec flash8 permettant de déterminer le nombre de détecteur incendie à implanter dan problème de"." et "@" dans champs de saisie de texte... [ par olliesound ] Bonjour à tous ! bon ben tout est dans le titre : Mon formulaire flash en mode "debug" prends en compte tous les caractères type "@" ou encore "." mai


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,608 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.