Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox
Vous êtes dans la section des pages en cours de rédaction. Cette page n'est pas terminée, et peut contenir des informations erronées.
EN CHANTIER
Cette page n'est pas terminée et est en cours d'écriture.

Clavier virtuel pour Smartphones et tablettes tactiles

Compatible Flash CS5. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par Tit_Nelly (Audrey MENARGUES), le 09 novembre 2011

Vous vous êtes toujours demandé comment réaliser un joli clavier type Iphone pour vos applications Flash AS3 ? Vous êtes au bon endroit.

Dans ce tutoriel, nous allons détailler sa conception, de A à Z. Nous verrons ainsi comment réaliser la classe de base KeyBoard, qui nous permettra de créer, par la suite, les touches de notre clavier. Puis nous verrons comment interagir avec un champ texte pour y inscrire des données, les supprimer, etc…Ici, nous ne nous occuperons pas de la place du curseur. Nous verrons juste l’ajout et la suppression des caractères dans le champ texte.

Je considèrerais, ici, que vous connaissez les bases de la programmation objet (créer une classe, qu’est-ce qu’un objet, les écoutes des différents évènements,…). Pour gagner du temps, j’utilise une classe Bouton déjà faite par …( que l’auteur se fasse connaître, je n’arrive pas à le retrouver ! ).

Remarque : depuis que je programme, j’ai pris l’habitude de tout coder en anglais et selon des normes précises. Par exemple : le nom d’une variable booléenne commence par un verbe (is ou have) suivit d’un participe passé ; … C’est une habitude que j’ai et je peux concevoir que ce soit déroutant pour certains. Rien ne vous oblige à reproduire ces normes. Le plus important, ici, est le principe étudié. La forme importe peu.

Prêts à coder ? C’est parti !

Questions de base

Voici ce que nous souhaitons obtenir:

Mais avant de commencer à coder, posons-nous quelques questions :

  • Un clavier c’est quoi ?
  • Une touche (bouton) c’est quoi ?
  • Toutes les touches sont-elles identiques ?

Alors un clavier, à mon sens, c’est un ensemble de touches (boutons). Donc qui dit ensemble, dit conteneur. Donc il nous faudra un MovieClip pour regrouper tous nos boutons. Une touche ou bouton, c’est un objet (pourquoi pas un MovieClip aussi…) qui prend une valeur (A par exemple) et qui admet une action : clic. Au clic sur ce bouton, il va envoyer sa valeur pour qu’elle soit traitée.

Toutes les touches ne sont pas identiques. Il y a les touches alphanumériques : A à Z, 1 à 0 et il y a les touches spéciales : shift, retour, Echap, etc…

Partant de ce principe, nous savons déjà qu’il nous faudra plusieurs fonctions :

  • Une fonction d’ajout de touche « normale »
  • Une fonction d’ajout de touche spéciale
  • Une fonction d’écoute d’évènement de clic de touche « normale »
  • Une fonction d’écoute d’évènement de clic de touche spéciale

Pour commencer, créez un document Flash Actionscript 3 et enregistrez-le. Ce sera notre document de base.

La classe mère: KeyBoard

La classe KeyBoard est la classe mère du clavier virtuel. C’est sur cette classe que tout repose. Grâce à cette classe, vous allez pouvoir créer un bouton, lui assigner une valeur et une action. C’est elle aussi qui permettra d’interagir avec le champ texte.

Cette classe définit les fonctions nécessaires au fonctionnement du clavier, celles qui ont été évoquée plus haut :

  • Une fonction d’ajout de touche « normale »
  • Une fonction d’ajout de touche spéciale
  • Une fonction d’écoute d’évènement de clic de touche « normale »
  • Une fonction d’écoute d’évènement de clic de touche spéciale

Commençons donc à écrire la classe KeyBoard . Créez une nouvelle classe AS3 et appelez-la « KeyBoard ».

package  {
	import flash.display.MovieClip;
	public class KeyBoard extends MovieClip {		
		public function KeyBoard() {
			graphics.beginFill( 0x333333, 1 );  // Comme on veut faire joli, on
			graphics.drawRect(0, 0, 540, 200 ); // ajoute un fond au clavier…
		}
	}	
}
Normalement, les bonnes règles de programmation voudraient que je sorte la création du fond du constructeur, que je la mette dans une fonction et que j’appelle juste cette fonction dans un init, lui-même appelé dans le constructeur… Dans la mesure où ce n’est pas le sujet du tutoriel, je considère que vous savez optimiser les choses et que vous êtes capable de faire les changements nécessaires.

Ajouter une touche alphanumérique :

Pour le moment, notre clavier n’a un fond. Or, un clavier contient des touches… Donc nous allons créer les touches « normales » ou touches alphanumériques. Pour cela, nous aurons besoin de créer une fonction « addKey » qui va prendre en argument 3 paramètres : une valeur de bouton, une position en x et une position en y. Cette fonction va créer une occurrence de la classe Bouton (classe toute prête, empruntée à …), la positionner sur la scène en x et y, selon les arguments passés dans la fonction et afficher ce nouveau bouton.

public function addKey( val:String, posX:int, posY:int ){
        var myKey = new Bouton( val, 16, 0x5C5C5C, true, [0xFFFFFF, 0xCCCCCC], [0xCCCCCC, 0xFFFFFF], [0xCCCCCC, 0xCCCCCC], 40, 35, 15); 	                //On crée notre nouveau bouton
	    myKey.x = posX; 				//on le positionne x
	    myKey.y = posY; 				// puis en y
	addChild( myKey );				// On l’ajoute à la liste d’affichage
}

La classe Bouton étant très bien commentée, je vous renvoie vers cette dernière pour comprendre les arguments qui lui sont passés. Les valeurs passées en paramètres dans cet exemple ne sont pas à utiliser telles quelles. Vous pouvez les modifier selon vos besoin (boutons plus gros, plus petits, taille de police, couleur, etc…)

Normalement, Flash devrait faire les imports de classe automatiquement, en haut de la classe. Si toutefois ce n’est pas le cas, n’oubliez pas d’importer la classe « Bouton », sinon vous risqueriez d’avoir une erreur.

Donc maintenant, nous avons une fonction qui nous permet de créer des touches.

Dans le constructeur de la classe KeyBoard, appelez la fonction avec les paramètres que vous souhaitez pour créer un nouveau bouton.

public function KeyBoard() {
	graphics.beginFill( 0x333333, 1 );
        graphics.drawRect(0, 0, 540, 200 );
        addKey( «A», 15, 12 ) ;
}

Testons notre nouvelle classe. Dans votre fla principal (chez moi, il s’appelle « main »), instanciez un nouvel objet KeyBoard et ajoutez-le à la liste d’affichage.

import KeyBoard;
 
var kb:KeyBoard	= new KeyBoard() ;
addChild( kb ) ;

Normalement, sous vos yeux ébahis, vous devriez voir apparaître l’équivalent de l’image ci-dessous :

Ce n’est pas encore terrible, mais c’est déjà un début… ! Sauf que… Notre si jolie touche n’a aucune réaction lorsqu’on clique dessus.

Nous allons donc écouter le clic sur le bouton.

Dans la classe KeyBoard, ajoutez cette ligne dans la fonction « addKey »

public function addKey( val:String, posX:int, posY:int ){
        var myKey = new Bouton( val, 16, 0x5C5C5C, true, [0xFFFFFF, 0xCCCCCC], [0xCCCCCC, 0xFFFFFF], [0xCCCCCC, 0xCCCCCC], 40, 35, 15);
	    myKey.x = posX;
	    myKey.y = posY;
	addChild( myKey );
	    myKey.addEventListener( MouseEvent.CLICK, clicKey); //On écoute le clic du bouton
}

A ce stade, si vous exécutez à nouveau le projet, vous rencontrez une erreur :

« 1120 : Accès à la propriété non définie clickKey »

C’est normal puisqu’on essaye d’appeler une fonction qui n’existe pas. Pour résoudre cette erreur, créez la fonction « clicKey » après « addKey ».

public function clickKey( me:MouseEvent ){
        trace( « clic » ) ;
}

Si maintenant vous exécutez le fla, vous allez voir s’afficher « clic » à chaque clic sur le bouton.

Mais nous, ce qui nous intéresse, c’est surtout de récupérer la valeur du bouton pour la faire s’afficher.

Dans votre fonction « clicKey », ajoutez ceci :

public function clickKey( me:MouseEvent ){
        trace( me.target.name ) ;
}

Dans la fenêtre de sortie, vous allez voir apparaître:

A

Super ! On a la valeur de la touche. Plus tard, nous la ferons apparaitre dans le champ input. Pour les autres touches alphanumériques, c’est le même principe.

Dans un clavier, il n’y a pas que des touches alphanumériques. Il y a aussi des touches spéciales comme la touche Shift ou la touche Echap. Ces touches-là nécessitent un traitement spécial.

Ajouter une touche spéciale :

Les touches spéciales, comme la touche Shift par exemple, n’envoie pas de valeur, mais doivent provoquer des actions (mise en majuscule/minuscule, disparition du clavier, perte de focus du champ, envoi d’une commande, etc.)

Sur mon clavier, j’ai décidé de les matérialiser différemment, un peu comme sur le clavier des appareils mobiles de la grosse pomme. Elles ont donc une taille différente et un traitement du clic différent aussi.
Ici, je considère que la touche « espace » est aussi une touche spéciale.

Prenons par exemple la touche Shift. Nous allons décomposer son comportement : au premier clic dessus, elle active la mise en majuscule des caractères. A la saisie du caractère, elle se désactive. Au deuxième clic dessus, elle se désactive aussi. Nous devons donc traiter 2 cas : je clique sur Shift puis une touche alphanumérique ou je clic 2 fois sur Shift.

Nous allons d’abord créer la fonction « addSpecialKey » qui nous permettra de créer des touches spéciales. Cette fonction prend en argument 5 paramètres :

  • La valeur de la touche
  • Sa position en x
  • Sa position en y
  • Sa largeur
  • Sa hauteur
C’est un choix personnel que j’ai fait de différencier les 2 types de touches (alphanumériques et spéciales) afin d’avoir la possibilité de personnaliser au maximum les touches spéciales pour les différencier des autres. Il n’y a aucune obligation à le faire et vous pouvez très bien décider de ne faire qu’une seule fonction pour la construction des 2 types.
public function addSpecialKey( val:String, posX:int, posY:int, w:int, h:int ){
        var mySpecialKey = new Bouton( val, 16, 0x5C5C5C, true, [0xFFFFFF, 0xCCCCCC], [0xCCCCCC, 0xFFFFFF], [0xCCCCCC, 0xCCCCCC], w, h, 15);
            mySpecialKey.x = posX;
	    mySpecialKey.y = posY;
	addChild( mySpecialKey );
	    mySpecialKey.addEventListener( MouseEvent.CLICK, clicSpecialKey);
}

Dans la mesure où nous savons maintenant comment fonctionne les touches, nous allons aussi coder la fonction qui écoutera le clic.

public function clicSpecialKey( me:MouseEvent ){
	trace( me.target.name ) ;
}

Testons notre touche spéciale.

public function KeyBoard() {
	graphics.beginFill( 0x333333, 1 );
        graphics.drawRect(0, 0, 540, 200 );
        addKey( «A», 15, 12 ) ;
        addSpecialKey( "Shift", 20, 105, 70, 35 ) ;
}

Si vous exécutez le fla, voici ce que vous devez obtenir :

Et au clic sur Shift, vous devriez voir apparaitre

Shift

Maintenant que nous savons que nous cliquons sur la touche Shift, nous aimerions que celle-ci affiche un “a” en majuscule.

Nous allons donc créer une variable de classe, de type Booléen, qui va représenter les 2 états de Shift : cliqué ou non-cliqué.

package  {
	import flash.display.MovieClip;
	public class KeyBoard extends MovieClip {
 
		private var isShift:Boolean = false; // Etat de Shift. Par défaut, désactivé.
 
		public function KeyBoard() {
			graphics.beginFill( 0x333333, 1 );  
			graphics.drawRect(0, 0, 540, 200 ); 
		        addKey( «A», 15, 12 ) ;
	                addSpecialKey( "Shift", 20, 105, 70, 35 ) ;
		}
		[]
	}	
}

Maintenant, nous allons traiter les états de Shift dans la fonction « clicSpecialKey ». Nous allons activer Shift si il est désactivé (false) et le désactivé s’il est activé (true)

public function clicSpecialKey( me:MouseEvent ){
	if( me.target.name == "Shift" ){ 	// Je vérifie que j’ai bien cliqué sur Shift
		if( isShift ){			// Shift est activé (true)
			isShift = false;	// Je désactive la touche : false
		} else {			// Elle est désactivée : false
			isShift = true;	// Je l’active : true
		}
	}
}

Et maintenant, nous allons nous intéresser à la valeur de la touche alphanumérique sur laquelle on va appliquer Shift. Reprenons notre touche « A ». Pour l’instant, elle n’affiche que son nom, c’est-à-dire « A ». Mais nous souhaiterions aussi qu’elle s’affiche en minuscule. Il nous suffit donc de modifier la fonction « clicKey ».

public function clicKey( me:MouseEvent ){
	if( isShift ){
		trace( me.target.name );			// Si Shift est activé, j’affiche en majuscule
		isShift = false;				// Puis je désactive Shift
	} else {
		trace( me.target.name.toLowerCase() );	// Si Shift est désactivé, j’affiche en minuscule.
	}
}

C’est un parti que j’ai pris de désactiver la touche Shift après le clic sur la touche alphanumérique.

Rien ne vous empêche d’améliorer la touche afin de créer un capsLock.
Pour la touche espace, on va juste ajouter un espace dans la chaîne. Quant à la touche Suppr, elle va juste supprimer le dernier caractère de la chaîne. Mais nous les reverrons plus tard, lorsque nous aborderons le champ texte avec lequel le clavier va interagir.

Si nous résumons, nous avons 4 fonctions :

  • La création d’une touche normale.
  • La création d’une touche spéciale.
  • La fonction d’écoute du clic sur une touche normale.
  • La fonction d’écoute du clic sur une touche spéciale.

Nous allons maintenant pouvoir créer notre clavier correctement.

Les sous-classes « AlphaKB » et « NumericKB » :

Ces deux classes étendent KeyBoard et ne font que construire les interfaces des 2 claviers. Je n’ai fait que 2 claviers, mais on peut imaginer d’autres types de claviers (par exemple un clavier spécial pour la saisie d’url ou d’adresses mail). Ceci fera surement l’objet d’un prochain chapitre.

La seule chose importante dans ces classes est l’apparition d’une touche de bascule d’un clavier à l’autre. Cette touche va permettre d’appeler le clavier numérique, si vous êtes sur le clavier alphabétique et vice-versa. Cette touche est un peu spéciale car elle n’inscrit aucun caractère. Elle ne fait que dispatcher un évènement à travers l’application.

Pour ce faire, il faut rajouter, dans la classe KeyBoard, les instructions suivantes dans la fonction « clicSpecialKey » :

public function clicSpecialKey( me:MouseEvent ){
	if( me.target.name == "Shift" ){
		if( isShift ){
			isShift = false;
		} else {
			isShift = true;
		}
	}
	if( me.target.name == "123" ){
		dispatchEvent(new Event("callNumericKB",true));
	}
	if( me.target.name == "ABC" ){
		dispatchEvent(new Event("callAlphaKB",true));
	}
}

Nous pourrons alors écouter les évènements « callNumerciKB » et « callAlphaKB » pour basculer d’un affichage à l’autre.

Voilà à quoi ressemble la classe AlphaKB, chez moi :

package {
	import KeyBoard;
	public class AlphaKB extends KeyBoard {
 
		public function AlphaKB() {
			addAlphaKeys();
		}
		public function addAlphaKeys(){
			//Première ligne
			super.addKey( "A", 20, 15 );
			super.addKey( "Z", 70, 15 );
			super.addKey( "E", 120, 15 );
			super.addKey( "R", 170, 15 );
			super.addKey( "T", 220, 15 );
			super.addKey( "Y", 270, 15 );
			super.addKey( "U", 320, 15 );
			super.addKey( "I", 370, 15 );
			super.addKey( "O", 420, 15 );
			super.addKey( "P", 470, 15 );
			//Deuxième ligne
			super.addKey( "Q", 20, 60 );
			super.addKey( "S", 70, 60 );
			super.addKey( "D", 120, 60 );
			super.addKey( "F", 170, 60 );
			super.addKey( "G", 220, 60 );
			super.addKey( "H", 270, 60 );
			super.addKey( "J", 320, 60 );
			super.addKey( "K", 370, 60 );
			super.addKey( "L", 420, 60 );
			super.addKey( "M", 470, 60 );
			//Troisième ligne
			super.addKey( "W", 120, 105 );
			super.addKey( "X", 170, 105 );
			super.addKey( "C", 220, 105 );
			super.addKey( "V", 270, 105 );
			super.addKey( "B", 320, 105 );
			super.addKey( "N", 370, 105 );
 
			super.addSpecialKey( "Shift", 20, 105, 70, 35 );
			super.addSpecialKey( "123", 20, 150, 70, 35 );
		}
	}
}

La classe « NumerciKB » est sensiblement la même à la différence qu’elle n’intègre pas la touche Shift et que la touche de bascule s’appelle ABC au lieu de 123. Reprenez votre fla principal et instanciez un clavier Alpha dedans à la place de l’objet kb.

import AlphaKB;
 
var alphaKB:AlphaKB	= new AlphaKB();
addChild( alphaKB );

Voici ce que vous devriez obtenir, si vous avez fait la même chose que moi, au niveau des placements.

Il commence à être bien maintenant… Non ? On ne peut pas encore basculer d’un clavier à l’autre, mais on va y venir. D’abord nous allons tenter d’afficher notre saisie à l’écran.

Interagir avec un champ texte :

Si nous construisons un clavier virtuel, c’est avant tout parce que nous devons saisir du texte dans un champ de texte mais que nous n’avons pas de clavier physique à disposition. Je pense notamment aux bornes tactiles, Smartphones et autres tablettes tactiles. Donc nous devons interagir avec ce champ. Pour ce faire, nous allons procéder en 2 étapes :

  • Créer un champ texte « tampon » qui va récupérer notre saisie dans la classe KeyBoard.
  • Envoyer le contenu du champ texte « tampon » dans notre champ Input, sur notre scène.

Récupérer la saisie clavier

Reprenons notre classe KeyBoard, puisqu’elle est à l’origine de tout. Nous allons lui créer une variable « tf » qui va correspondre au textField qui nous servira de champ texte « tampon ».

package  {
	import flash.display.MovieClip;
	public class KeyBoard extends MovieClip {
 
		private var isShift:Boolean = false;
		private var tf :TextField = new TextField() ;	 // Champ texte tampon.
 
		public function KeyBoard( aTxtInput:TextField ) {
			tf = aTxtInput;
			graphics.beginFill( 0x333333, 1 );  
			graphics.drawRect(0, 0, 540, 200 ); 
		}
		[]
	}
}

Et n’oubliez pas de modifier le constructeur de la classe « AlphaKB » :

package {
	import KeyBoard;
	import flash.text.TextField;
	public class AlphaKB extends KeyBoard {
 
		public function AlphaKB( aTxtInput:TextField ) {
			addAlphaKeys();
			super( aTxtInput );
		}
		[]
	}
}
Si vous ne faites pas cette modification, Flash vous retournera une erreur.

Maintenant, nous allons modifier les fonctions « clicKey » et « clicSpecialKey » pour y afficher les valeurs saisies au clavier.

public function clicKey( me:MouseEvent ){
	if( isShift ){
		tf.appendText( me.target.name );
		isShift = false;
	} else {
		tf.appendText( me.target.name.toLowerCase() );
	}
}
public function clicSpecialKey( me:MouseEvent ){
	if( me.target.name == "Espace" ){		// J’ai rajouter la touche « Espace »
		tf.appendText( " " );			// telle que vu précédemment, dans une
	}						// fonction « addSpecialKeys »
	if( me.target.name == "Del" ){		// J’ai ajouté aussi la touche « Suppr »
		var tmp:String;			// pour que vous voyiez son
		tmp = tf.text;				// fonctionnement.
		tmp = tmp.substr(0, tmp.length-1 );
		tf.text = tmp;
	}
	if( me.target.name == "Shift" ){
		if( isShift ){
			isShift = false;
		} else {
			isShift = true;
		}
	}
	if( me.target.name == "123" ){
		dispatchEvent(new Event("callNumericKB",true));
	}
	if( me.target.name == "ABC" ){
		dispatchEvent(new Event("callAlphaKB",true));
	}
}

Là encore, rien d’insurmontable. Il suffit juste d’envoyer au textField les valeurs saisies, grâce à l’appendText.

Ici, il est important d’utiliser appendText puisque cette méthode va ajouter les caractères les uns derrière les autres dans le textField et non les remplacer par une nouvelle saisie, contrairement à la méthode « texte ». Pour bien voir la différence, essayez de remplacer « appendText » par « text » et comparez les comportements.

Dans le fla principal, ajoutez ces lignes :

import AlphaKB;
import flash.text.TextField;
 
var tf:TextField	= new TextField();
addChild( tf );
 
var alphaKB:AlphaKB	= new AlphaKB( tf );
    alphaKB.x	= 0;
    alphaKB.y	= 150;
addChild( alphaKB )

A ce stade, vous devez surement voir apparaître les différentes touches cliquées, avec leurs valeurs.

Super !! Nos valeurs s’affichent ! Il ne nous reste plus qu’à les envoyer à un champ Input.

Envoyer la saisie au champ Input

Sur votre scène, dans le fla, mettez un champ Input en plein milieu de la scène et appelez-le « myInput », par exemple. C’est le champ dans lequel nous allons rentrer notre saisie clavier.

Sur ce champ, nous allons placer 2 écouteurs : « FocusIn » et « FocusOut ».

Ajoutez les lignes suivantes :

import AlphaKB;
import NumericKB;
import flash.text.TextField;
 
var tf:TextField	= new TextField();
addChild( tf );
 
var alphaKB:AlphaKB;		// Je crée un clavier alpha
var numericKB:NumericKB;	// Je crée un clavier numérique
 
 
myInput.addEventListener( FocusEvent.FOCUS_IN, myFocus );		// Je pose mes écouteurs
myInput.addEventListener( FocusEvent.FOCUS_OUT, myFocusOut );
Résumons un peu ce qu’il doit se passer : nous devons récupérer la saisie clavier, l’envoyer dans le texte Input pour l’afficher. Histoire de faire un peu joli et de se rapprocher encore un peu des effets d’apparition bien connus du clavier de la célèbre pomme, nous allons aussi le faire glisser de bas en haut.

Pour commencer, et parce que je sens que vous trépignez d’impatience, nous allons, en plus de saisir dans le champ, nous amuser à basculer d’un clavier alpha à un clavier numérique.

import AlphaKB;
import NumericKB;
import flash.text.TextField;
 
[]
 
myInput.addEventListener( FocusEvent.FOCUS_IN, myFocus );
myInput.addEventListener( FocusEvent.FOCUS_OUT, myFocusOut );
 
function myFocus( fe:FocusEvent ){
	fe.target.text 		= "";
	tf 				= TextField( fe.target );	// Je passe ma cible (le textInput) en argument et je transtype pour être sure qu’il récupère mes saisies. 
	alphaKB 			= new AlphaKB( tf );		// je passe mon textField
	numericKB 			= new NumericKB( tf );	// en argument
	alphaKB.x 			= numericKB.x = 0;
	alphaKB.y 			= numericKB.y = 200;
	addChild( alphaKB );
	addChild( numericKB );
 
	alphaKB.visible 	= true;		// Je fais apparaitre mon clavier alpha
	numericKB.visible 	= false;	// et disparaitre mon clavier numérique
 
	addEventListener( "callNumericKB", callNumericKB );	// Je pose mes écouteurs
	addEventListener( "callAlphaKB", callAlphaKB );
}
 
function callNumericKB( e:Event ){	
	alphaKB.visible 	= false;	//Je bascule de l’un à l’autre…
	numericKB.visible 	= true;
}
 
function callAlphaKB( e:Event ){
	alphaKB.visible 	= true;		// Et vice-versa… !
	numericKB.visible 	= false;
}
 
function myFocusOut( fe:FocusEvent ){}

Vous pouvez tester et constater que non seulement nous avons les différentes saisies, mais qu’en plus nous pouvons basculer d’un clavier à l’autre.

Maintenant, il ne nous reste plus qu’à le faire apparaître et disparaître.

function myFocus( fe:FocusEvent ){
	fe.target.text 		= "";
	tf 				= TextField( fe.target );		alphaKB 			= new AlphaKB( tf );
	numericKB 			= new NumericKB( tf );
	alphaKB.x 			= numericKB.x = 0;
	alphaKB.y 			= numericKB.y = 200;
	addChild( alphaKB );
	addChild( numericKB );
 
	if( alphaKB.y	== 400 && numericKB.y == 400 ){	// Apparition !!
		var myTweenAKBY:Tween = new Tween( alphaKB, "y", Strong.easeIn, 400, 200, 1, true);
		var myTweenNKBY:Tween = new Tween( numericKB, "y", Strong.easeIn, 400, 200, 1, true);
	}
 
	alphaKB.visible 	= true;	
	numericKB.visible 	= false;
 
	addEventListener( "callNumericKB", callNumericKB );
	addEventListener( "callAlphaKB", callAlphaKB );
}
 
function myFocusOut( fe:FocusEvent ){
	if( alphaKB.y	== 200 && numericKB.y == 200 ){ // Disparition !!
		var myTweenAKBY:Tween = new Tween( alphaKB, "y", Strong.easeIn, 200, 400, 1, true);
		var myTweenNKBY:Tween = new Tween( numericKB, "y", Strong.easeIn, 200, 400, 1, true);
 
		myTweenAKBY.addEventListener( TweenEvent.MOTION_FINISH, removeKeyBoard );
		myTweenNKBY.addEventListener( TweenEvent.MOTION_FINISH, removeKeyBoard );
	}
}
 
function removeKeyBoard( te:TweenEvent ){
	if( te.currentTarget.obj ){	// Je nettoie derrière moi… !
		removeChild( te.currentTarget.obj );
	}
	stage.focus = null;
}

Et voilà… Il ne vous reste plus qu’à ajouter les touches « retour », « échap » et « entrer » si vous le souhaitez. Mais ça, vous saurez le faire vous-même… !

Conclusion

Nous venons de créer un clavier virtuel avec des fonctionnalités de base. Ce clavier envoie des caractères dans un champ textInput. Il ne vous reste plus qu’à le personnaliser et à vous l’approprier.

Des évolution, telles que l’apparition d’une configuration de clavier selon le type de champ, le capsLock, le maintien de touche enfoncée,etc., feront l’objet d’un prochain chapitre. J’espère que ce premier tutoriel vous aura plus. J’attends vos commentaire et critiques avec impatience.

A bientôt sur Mediabox !

Les sources

clavier_virtuel.zip Voici les fichiers source du tutoriel. Vous pouvez les modifier à volontée et les améliorer selon vos envies.