Exemples et Tutoriaux Animation Flash avec swishmax Clavier virtuel

Clavier virtuel

On se propose de montrer comment créer un clavier virtuel.
Il s'agit d'une étude de cas. je n'ai développé que les éléments essentiels.
Il vous appartiendra de complèter le script, vous verrez ainsi si vous l'avez compris.

Problême :
Possédant un netbook de 9" avec écran tactile (une daube Ar..os), qui a pour OS Windows Seven Ultimate, j'ai remarqué que lorsque j'activais le clavier virtuel au moyen d'un bouton matériel, l'application dans laquelle j'avais un champ de saisie partageait l'écran avec le clavier virtuel mais ne reprenait pas sa taille initiale lorsque je désactivais le clavier.
J'ai pensé alors créer mon propre clavier virtuel qui ne fonctionnerait que dans une application flash.
Je suis parti d'une image de clavier complète telle que celle indiquée ci-dessous :

clavier virtuel

Copiez cette image qui sera insérée dans le swi.
Sachant que le swf du clavier sera appelé par un swf principal ( votre application ), il faudra prendre la précaution d'adresser les variables internes du swf clavier par _parent et les variables de l'application principale par _root.
Vous devez normalement savoir comment utiliser un clavier.
Les différentes étapes vont être décrites maintenant.

Création des Objets

1 - Définissez les dimensions générales 913x262. Couleur de fond quelconque.
Frame rate = 25.

2 - Insérez l'image précédente.

3 - Vous allez créer une led verte au niveau du témoin Caps.
Vous devrez avoir :

properties transform

4 - Vous pouvez procéder pour les autres témoins si vous le souhaitez.

Le script de l'animation

Sachant que chaque touche se comporte comme un bouton, on va créer un ensemble de boutons fictifs et on gérera la majuscule simple, la majuscule verrouillée et Alt Gr par la fonction handleEvent.
Vous prévoirez la gestion des autres touches, ce n'est pas compliqué.
Entrez le script suivant dans Scene_1 :

onSelfEvent (load) 
{  
    _global.locked  = false;  // pour cap_locks
    _global.Maj = false;     //  pour shift
    _global.altgr = false;   // pour Alt Gr
    
    caps._visible = false;   // pour la led Caps
    _global.visible = false;    
     
  MovieClip.prototype.dummy_b = function( x:Number , y:Number, name:String ) 
  {
     const b_width : Number = 35;

var b_mc = createEmptyMovieClip("b_mc", getNextHighestDepth() );
    
    function display( a )
    {
        with (b_mc)
        {        // tracé du rectangle 
            lineStyle(0, 0x000000, 10);  // alpha=0 invisible
            
            moveTo(x, y);
            beginFill(0xFFFFFF,a);  // important sinon le curseur main se limitera au trait du contour !!!
            lineTo(x+b_width, y);
            lineTo(x+b_width, y+b_width);
            lineTo(x, y+b_width);                      
            lineTo(x, y);  
            endFill();             
        }  
    }
    function handleEvent( x )
    {
        switch ( x )
        {
            case "CAPS" :  // Maj verrouillé
                 visible = ~visible;	// inversion de bit
                _parent.caps._visible = visible;  // bascule l'affichage de la led verte de Caps Lock
                locked = ~locked;
            break;

case "AltGr" :  altgr = true;       break;

case "shift" :  Maj = true;       break;
            // je me suis limité aux 2 premières rangées de touches ainsi qu'à la touche du chiffre 4
	    // il vous faudra compléter
            case "q" : case "w" : case "e" : case "r" : case "t" : case "y" : case "q" : case "u" : case "o" : case "p" :
            case "[" : case "]" : case ";" : case "'" : case "#" :
            case "a" : case "s" : case "d" : case "f" : case "g" : case "h" : case "j" : case "k" : case "l" :
            case ";" : case "'" : case"#" : case "4" : 
            if (altgr)
            {
                if ( x == "e" ) x = "é";
                else if ( x == "u" ) x = "ù";
                else if ( x == "o" ) x = "ó";  // alt 0243
                else if ( x == "a" ) x = "à";
                else if ( x == "4")  x = "";// on peut continuer ...
                
                altgr = false;
            }
            else
            if  ( (locked) || (Maj) )
            {
               if ( x == "[" )  x = "{";
               else if ( x == "]" )  x = "}";
               else if ( x == ";" )  x = ":"; 
               else if ( x == "'" )  x = "@";
               else if ( x == "#" )  x = "~";
               else if ( x == "4" ) x ="$";
               else  x = x.toUpperCase(); // passe en majuscule 
               
               if (Maj) Maj = false;  // repasse en minuscule si pas verrouillé   
            }
            // Placez ici le code à envoyer au swf principal  qui va appeler ce swf enfant ( clavier)
            // _root.mon_texte = add(x);  // on s'adresse au swf principal par exemple
                
            trace ( x );  // juste pour tester ici
                
            break;
        }
    }
    b_mc.onPress = function () 
    {        
         handleEvent ( name );
    };
    b_mc.onRollOver = function()
    {
        display(50);// alpha = 50
    };
    b_mc.onRollOut = function()
    {                
           this.clear();
           display(0);  // invisible          
    };
    display(0);  // création du bouton invisible au départ
  }; 
  // fin déclaration objet   dummy
    init();	// création de tous les boutons
    
}

function init()
{
   // x et y dépendent de la position dans l'image clavier,
   // donc voir dans l'éditeur graphique la position exacte
    var x0 : Number = 60; 
    var y0 : Number = 97;
    const delta : Number = 40;
    
	// rangée 1 de lettres
    new dummy_b( x0 , y0 , "q" ); 
    new dummy_b( x0+delta  , y0 , "w"  );
    new dummy_b( x0+2*delta , y0 , "e" );
    new dummy_b( x0+3*delta , y0 , "r" );
    new dummy_b( x0+4*delta , y0 , "t" );
    new dummy_b( x0+5*delta , y0 , "y" );
    new dummy_b( x0+6*delta , y0 , "u" );
    new dummy_b( x0+7*delta , y0 , "i" );
    new dummy_b( x0+8*delta , y0 , "o" );
    new dummy_b( x0+9*delta , y0 , "p" );
    new dummy_b( x0+10*delta , y0 , "[" );  
    new dummy_b( x0+11*delta , y0 , "]" );  
    
    x0 = 12; y0 = 138;
    new dummy_b( x0 , y0 , "CAPS"  );

y0 = 177;
    new dummy_b( x0 , y0 , "shift" );
	// rangée 2 de lettres
    x0 = 68;   y0 = 137; 
    new dummy_b( x0 , y0 , "a"  );
    new dummy_b( x0+delta , y0 , "s" );
    new dummy_b( x0+2*delta , y0 , "d"  );
    new dummy_b( x0+3*delta , y0 , "f" );
    new dummy_b( x0+4*delta , y0 , "g" );
    new dummy_b( x0+5*delta , y0 , "h" );
    new dummy_b( x0+6*delta , y0 , "j" );
    new dummy_b( x0+7*delta , y0 , "k" );
    new dummy_b( x0+8*delta , y0 , "l" );
    new dummy_b( x0+9*delta , y0 , ";" ); 
    new dummy_b( x0+10*delta , y0 , "'" );
    new dummy_b( x0+11*delta , y0 , "#");
    
    x0 = 165; y0 = 57;
    new dummy_b( x0 , y0 , "4"  );
    
    x0 = 408; y0 = 217;
    new dummy_b( x0 , y0 , "AltGr" );
   
   // A vous de continuer !!! 
   
}

Et voilà, c'est ( presque) terminé !
Votre mission, si vous l'acceptez, consiste à définir les boutons qui manquent ainsi que leur gestion dans handleEvent.
Et vous verrez que ce n'est pas impossible !

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Clavier virtuel