Vous le savez surement, la beta de Flash Player 10.1 nous permet maintenant à nous aussi, practiciens de la flash platform, d’entrer dans l’ère de l’expérience tactile. « Pretty exciting »! pourrait-on s’exclamer, mais puisque l’air du temps est plutôt à l’identitaire national, faisons un effort et parlons « franc » : le multi-toucher, çà envoie bien du cervelas en croûte !!!

Bon alors par contre pour profiter dès aujourd’hui du jouet, il est nécessaire de valider une des conditions suivantes :
- posséder un macbook (pro) récent sous snow leopard ( 10.6 ) (je sais pas trop si ca marche avec les magic mouse)
- posséder un pc sous windows 7… avec écran multitouch
- ou encore plus rare, faire partie des betatesteurs du prochain flash CS(x)… et d’une licence de dev iphone… et d’un iphone… ( d’ici quelques mois, les possesseurs de la plupart téléphones/tablettes tactiles et du prochain flash CS(x) pourront eux aussi jouer ).

Installation

Si tu as passé la 1ère épreuve, il te reste l’épreuve pratique : l’installation du SDK et du runtime AIR 2.0 ( beta1 ou beta2 )

Pour une installation « optimale » :
- Flash Builder Beta2 : http://labs.adobe.com/technologies/flashbuilder4/
- une version stable récente du SDK Flex : 4.0.0.13875 datée du 29.01.2010 http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 ( pas mal de choses ont évoluées depuis la version 4.0.0.10485 distribuées avec Flash Builder beta 2 )
- placez le contenu du SDK téléchargé dans : Dossier Flash Builder Beta2/sdks/
- Installez le runtime et téléchargez le SDK AIR 2 beta 2 cf. guide d’installation du SDK
- Dans les préférences de FlashBuilder/Eclipse : Flash Builder / installed Flex SDKs / , ajoutez le SDK modifié pour AIR 2.

Et maintenant, la création du projet :
Nouveau projet Flex : Application Type : Desktop / AIR, SDK version : 4.0 ( celle avec mise à jour du SDK AIR 2 )

AS3 et le multi-toucher, comment çà marche ?

Premièrement, on trouve maintenant dans le package flash.ui une nouvelle classe Multitouch.
Elle permet de tester les compatibilités de l’environnement ( nombre de pressions/doigts gérés, combinaisons tactiles gérés… ) , et de définir le « mode tactile » : Gesture ou TouchPoint.
Ce dernier précise si l’on veut capter les « combinaisons tactiles » classiques : Rotation, Glisser, Zoom et « Grand coup » ( NDLR = Swipe, déplacement de trois pression/doigts ) ou le détail de chaque pression/doigts. Dans la beta actuelle, seul Windows 7 permet la gestion du mode « TouchPoint », les utilisateurs de OSX devront se « contenter » des combinaisons classiques.

trace( 'max touch : ' , Multitouch.maxTouchPoints );
trace( 'supportsGestureEvents : ' , Multitouch. supportsGestureEvents );
trace( 'supportsTouchEvents : ' , Multitouch. supportsTouchEvents );
trace( 'supportedGestures : ' , Multitouch. supportedGestures );
if( Multitouch. supportsTouchEvents )
     Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
// par défaut = MultitouchInputMode.GESTURE

Ensuite c’est l’autoroute :ajout des écouteurs d’événements qui vont bien, et c’est bon… tu peux caresser ton flex. Chaque transformGestureEvent contient, en fonction de son type, un offSetX/offSetY ( pan & swipe ), un scaleX/scaleY ( zoom ) ou une rotation.

// gestures prises en charge par OSX 10.6 avec FP 10.1 b2
interactiveObject.addEventListener( TransformGestureEvent.GESTURE_PAN, onGesture );
interactiveObject.addEventListener( TransformGestureEvent.GESTURE_SWIPE, onGesture );
interactiveObject.addEventListener( TransformGestureEvent.GESTURE_ROTATE, onGesture );
interactiveObject.addEventListener( TransformGestureEvent.GESTURE_ZOOM, onGesture );

public function onGesture( e:TransformGestureEvent ):void
{
     // phase = GesturePhase.BEGIN, GesturePhase.UPDATE ou GesturePhase.END
     trace( 'Gesture :', e.type, ' phase :', e.phase );

     // tu fais des trucs en fonctions du types de toucher
     switch( e.type )
     {
           case TransformGestureEvent.GESTURE_PAN:
                  interactiveObject.x += e.offsetX;
                  interactiveObject.y += e.offsetY;
           break;

           case TransformGestureEvent.GESTURE_SWIPE: // déplace de 50 pixels
                  interactiveObject.x += e.offsetX * 50;
                  interactiveObject.y += e.offsetY * 50;
           break;

           case TransformGestureEvent.GESTURE_ZOOM:
                  interactiveObject.scaleX +=  e.scaleX - 1 ;
                  interactiveObject.scaleY +=  e.scaleY - 1 ;
           break;

           case TransformGestureEvent.GESTURE_ROTATE:
                  interactiveObject.rotation += e.rotation;
           break;
     }
}

Plutôt simple, mais plein de potentiel…

Avec ces 4 gestures on peut quand même « gérer » 8 + 4 + 2 + 2 soit 16 combinaisons si on prend en compte les directions de chaque gesture. Exemple : SWIPE horizontal = 1 fonction, SWIPE vertical = 1 autre, PAN horizontal = 1 fonction…
L’exemple du magazine interactif pourrait par exemple parfaitement bénéficier de ces différentes combinaisons. À ce niveau tout un vocabulaire tactile reste à imaginer/compléter.

Bref, moi je suis bien content de pouvoir me caresser le flex !!!

GestureTracker

Par contre, en vrai novice de la programmation orientée caresse, mes premières touches furent, comment dire… hésitantes; du coup je me suis créé un petit assistant pour m’aider à la tâche, ou à la touche : le GestureTracker, un petit système de notification de gestures. Le but : calculer et visualiser les gestures en cours, leur valeurs et les transformations globales appliquées.

Pour le moment c’est pour les projets AIR 2 sous Flex 4, la version AS3 à suivre…

C’est tout pour le moment, v’là pour l’exemple air ( AIR Runtime 2.0 beta 2 est requis) , le swc du SparkGestureTracker et les sources.

Pour plus d’infos :
Un tuto sur le multitouch , une partie des réponses aux nombreuses interrogations sur les compatibilités actuelles et à venir.

---

Par Erick, Vendredi 19 février 2010 à 18:11
Expériences utilisateur, [Dev] Flash / Flex / AIR...

Tags: AIR, FlashPlayer, Flex, multitouch

---