J’pensais pas faire ça aujourd’hui…, mais bon… moultes skins Spark à tomber : j’ai décidé de me helper myself et de gagner de l’argent ( enfin du temps pour commencer ). Du coup est née la petite commande Fireworks copyMXMLSelectionToClipboard, qui comme son nom l’indique presque, permet de copier une sélection dans Fireworks directement en MXML dans le ClipBoard. Elle est pas belle la vie ?!

En gros :
1. tu dessines tes trucs dans Fireworks, tu fais tes jolies dégradés, tes reflets, tes subtils petits floutés…
2. tu sélectionnes ce que tu veux mettre dans ta skin
3. tu lances la commande ‘UIGFx/SelectionToMXMLClipboard »
4. t’ouvres ta skinClass et pi t’y colle

5. et pi… tu souris !

Cette 1ère version permet d’exporter les Rect, les Path et des Groups ( de Rect et de Paths ! ),
avec leur SolidColor / SolidColorStroke, LinearGradient ou RadialGradient,
et même quelques filtres : Blur / DropShadow / InnerShadow.

Les positions sont recalculées avec un sélection placée à l’origine xy.

Télécharger l’extension Fireworks (CS3 + )

Et c’est déjà çà de fait !

Edit : et je rappelle qu’on peut mapper des raccourcis pour n’importe quel élément de menu… #jdcjdrAutres articles sur le même sujet

• Digimix : un Air de musique…
• Skiner un composant Flex 3 avec Fireworks CS3 [Tutoriel Vidéo]
• Flex4 : skin et primitives
• uigfx project : Flex4 primitives library / Fireworks extension

Vous vous souvenez peut-être de

Il y a quelques temps, suivant les travaux de Philippe Elsass (@elsassph) sur les algos de dessin, j’ai entrepris de nouveaux travaux sur le sujet. Dans une librairie de primitives pour Flex4 d’abord, avec UIGFX, et puis rapidement pour rendre plus… « fluides » mes skins d’application, façon Neave.

Attention : parcequ’il y a de nombreux exemples, et parceque ce billet est un voyage dans le monde merveilleux de la gelée; votre ordinateur peu subir quelques changements et râler un peu

Ceux qui me suivent sur Twitter auront peut-être vu passer quelques essais.

(Clic pour ouvrir)
Ces tests de skinning flex interactif proviennent d’une extension Fluide de la librairie UIGFX (extension que je n’ai pas encore diffusé, faute de temps…)

BIGA! Nicolas Barradeau (@nicoptere) nous lance une série d’articles impressionnante sur l’art génératif, qui ce termine par une lib d’outils géométrique : Biga. J’ai pas pu me retenir, et repris mes expérimentations.

Des points…

L’idée de l’interaction «fluide» est basé sur les algo de répulsion. Lorsque qu’un point de souris approche d’une zone d’interaction de point de vecteur, il faut calculer une «dispersion» du point.

J’utilise 2 facteurs distincts :

• La viscosité: un coefficient qui donne, comme son nom l’indique, la viscosité du point. En physique des fluides, la viscosité représente la capacité d’un liquide à s’écouler. Plus le coefficient est faible, plus l’écoulement du fluide est rapide (ex: l’eau). A l’inverse, plus le coefficient est élevé, plus le fluide à des contraintes physiques importantes qui réduisent sont écoulement (ex.: la confiture).
• le facteur de gelée: c’est mon coefficient «maison». Un indicateur qui permet de préciser le degré de déformation d’un fluide. Plus ce facteur est élevé, plus le taux de déformation, et donc le mouvement de la forme, sera important.

En AS3, on peut l’écrire comme ceci :

public function update(owner:DisplayObject):void
{
offsetx+=(xref - x) / jelly;
offsety+=(yref - y) / jelly;

var dx:Number=0;
var dy:Number=0;
if (owner.stage)
{
dx=x - owner.stage.mouseX;
dy=y - owner.stage.mouseY;
}

if (Math.sqrt((dx * dx) + (dy * dy)) <= approach * 1.1)
{
var divisor:Number=approach / 10;
var a:Number=Math.atan2(dy, dx);

offsetx+=(Math.cos(a) * approach - dx) / divisor;
offsety+=(Math.sin(a) * approach - dy) / divisor;
}

offsetx*=(1 - viscosity);
offsety*=(1 - viscosity);
if (Math.abs(offsetx) < .001)
{
offsetx=0;
}

if (Math.abs(offsety) < .001)
{
offsety=0;
}

x+=offsetx;
y+=offsety;
}

Visuellement :

…Des lignes…

2 points définissent une ligne… C’est la règle.

Projection

Pour obtenir une ligne «fluide», il faut avoir un point de vecteur intermédiaire sur la ligne.
Une méthode simple et efficace est de projeter le point de la souris sur la ligne. Les mathématiciens on depuis longtemps résolu le problème, et l’implémentation AS3 d’un algo de projection ressemble à ça :

public static function projection(p:Point, a:Point, b:Point):Point
{
var len:Number = length(a, b);
var r:Number = (((a.y - p.y) * (a.y - b.y)) - ((a.x - p.x) * (b.x - a.x))) / (len * len);

var px:Number = a.x + r * (b.x - a.x);
var py:Number = a.y + r * (b.y - a.y);

return new Point(px, py);
}

Avec les outis géométriques proposés par @nicoptere dans la lib Biga, le point de projection contraint dans la ligne, peut se calculer comme suit :

var mousePoint : Point = new Point(mouseX, mouseY);
var projection : Point = GeomUtils.project(mousePoint, point1, point2);
var constraintProjection : Point = GeomUtils.constrain( projection, point, point2);

La projection du point de souris sur notre ligne molle nous permet d’obtenir une interaction intéressante :

Si les points d’origine sont fixes, vous obtenez une espèce de corde de guitare. Rigolo.

…Et des formes

Avec encore plus de points on commence a avoir des formes, façon gateau anglais :

Un autre exemple intéressant qui reprend la simulation de Philippe Elsass :
(Clic pour ajouter un point, Ctrl/Cmd + click pour supprimer un point)

Encore plus de gelée

Comme je le disais au début de cette article, nous travaillons depuis quelques temps sur une librairie de primitives pour Flex4 : UIGFX. L’idée est de proposer une suite de primitives bien utiles, qui n’existent en standard dans le SDK Flex4 (lignes pointillées, arc, camembert, ….).

Dans cette librairie, nous avons mis en place une primitive de représentation graphique de path SVG, qui, à la différence de la primitive Path standard du SDK Flex, permet de placer les vecteurs dans le modèle de contraintes top, left, bottom, right. Cette primitive permet aussi d’importer un chemin SVG, et de le convertir au format propre à cette primitive.

En modifiant un peu le parseur SVG de UIGFX, nous pouvons facilement parcourir un path SVG et extraire les points de vecteur clefs de la forme. L’idée, vous vous en doutez est de gélifier la forme

Sources et ressources

• Vous trouverez l’ensemble des sources dans ce zip
• Biga, geometric tools library
• La série d’articles de Nicolas Barradeau
• « Parametric path drawing » de Philippe Elsass
• Et bien sur le site web de Paul Neave, … et l’ancien

Have fluid’s fun !Autres articles sur le même sujet

• Dessine moi Final Fantaisy…
• La manette Wii sur mac / pc… enfin presque
• Librairie lafabrick : parce que je le vaut bien
• et le 9ème jour il créerent le volume … 2.0

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.

Autres articles sur le même sujet

• L’erreur est humaine… debuguer un projet Flex distant via Flex Builder
• Interfaces tangibles : le futur du multitouch
• MAX 09 – Le multitouch
• RollingFileTarget pour AIR 2.0 : let’s roll !

Voilà un résumé de la première journée : une énorme keynote, quelques conférences plus ou moins intéressantes…

La Keynote

La volonté d’Adobe d’être présent sur tous les écrans, quelque soit leurs tailles et leurs résolutions. Ça ressemble presque à une déclaration universelle. On se rappelle de l’annonce en mai 2008 de l’open screen project qui, à l’époque, laissait pas mal de place à la spéculation. Aujourd’hui, les choses se mettent en place… Pas moins de 42 partenaires dont Google, RIM, HTC, Docomo… et des annonces qui permettent de mieux comprendre où Adobe veut aller.

Le flash player 10.1.

Quelques nouvelles fonctionnalités comme le support du Multitouch, un meilleur support du P2P mais surtout un énorme travail sur les performances du player afin que ce dernier puisse tourner sur les mobiles et les notebook.

• Réduction de l’empreinte mémoire du player
• Meilleur gestion de la consommation électrique
• Amélioration du rendu et des performance vidéo

Tout porte à croire qu’on assiste à la fin de FlashLite… On va enfin avoir le même player partout et tout le monde pourra avoir la même expérience quelque soit le terminal.

AIR 2.0

Adobe semble avoir écouté un peu la communauté. Pas mal de nouveautés et d’améliorations concernant l’intégration et la communication avec le système. Avec cette version, un développeur AIR va pouvoir facilement développer de l’application native Mac, PC, ou Linux, en fonction de son système.

• Possiblité de lancer et discuter avec des process natifs
• Support des unités de stockages (et de leur branchement)
• Prise en charge du multiTouch
• Accès au données du microphone.

Les outils de la Flash Platform

FlashBuilder se positionne comme un éditeur de code avancé pour ActionScript, y compris quand on développe en flash. Adobe a donc amélioré les liens entre ces IDE pour faciliter les aller-retour. Idem avec Flash Catalyst qui se positionne comme un outils à deux faces.

Faciliter l’intégration d’un design provenant d’un produit Adobe et faire le pont entre designer et développeur (avec un format de projet commun)

Permettre de faire du prototypage rapide d’interactions (l’équivalent de ce qu’offre Fireworks en terme de prototypage de site web)

L’iPhone

Un des grands absents de l’Open Screen Project est en effet Apple. Adobe ouvre enfin la porte du temple de l’iPhone à ses développeur en permettant d’exporter ses application flash au format iPhone. On est encore loin du flash dans l’iPhone mais c’est quand même un premier pas. (Bientôt) fini donc, XCode et Mac pour faire des applications iPhone… En ça aussi, c’est plutôt une bonne nouvelle. Concrètement, Adobe est parti sur LLVM (qu’il utilise déjà pour Alchemy). Pour plus de détails voir cet article.

Et la Creative suite dans tout ça…

Comme l’année dernière à Milan, on nous parle vite fait de la Creative Suite.

Le producteur d’Avatar, le prochain film de James Cameron, présente comment les différents outils de la suite interviennent lors de la création d’un film comme Avatar, de la création des textures 3D sous Photoshop à la post production avec AfterEffects.

Et parce qu’on a été sage, on a droit à quelques scènes d’avatar en 3D… Ca promet !

Conclusion

Un mot-clé : « multi » ;

• multi-écrans (Open Screen),
• multi-cast (P2P),
• multi-touch,
• multi-langues (TLF),
• multi-disciplines (création, développement).

Le tout en se donnant les moyens de faire fonctionner tout ça : AIR 2.0, Flash Player 10.1 et amélioration des outils vers plus de productivité.Autres articles sur le même sujet

• Live from MAX Milan : hands on thermo…
• MAX 09 – Le multitouch
• MAX 09 – Où est passé le Text Layout Framework ?
• MAX 09 – Sneak Peeks !

Ah oui, au fait, juste avant de commencer : un mot sur les Awards. Nous avons eu droit à une présentation des MAX Awards par Mark Hamil juste avant la session Sneak Peeks. On ne reviens pas dessus tellement nous avons trouvé ça pauvre en information. Nous sommes certains que les projets choisis sont effectivement géniaux, mais nous n’avons vraiment pas eu l’occasion d’en voir suffisamment et d’en entendre parler leurs concepteurs pour se faire une quelconque idée de la chose.

Voici plutôt un aperçu de ces Sneak Peeks particulièrement intéressants sur les innovations en cours chez Adobe. Le principe est simple : prenez Mark Hamil (Luke Skywalker pour les intimes) comme présentateur qui ne comprend rien aux technologies montrées, déguisez les ingénieurs Adobe en chevaliers de l’empire, Chewbacca ou princesse Leïa et vous obtenez un show de geek vraiment sympa et impressionnant.

Principe

Chaque équipe passe présenter son projet et doit rivaliser d’idées innovantes pour obtenir les clameurs de la foule en folie. Ca va vite, ils font souvent des blagues et vont parfois jusqu’à scénariser la présentation. C’est vraiment excellent ! Les infos passent très bien, on ne s’ennuie pas… Voyons voir.

Mobile

L’équipe mobile nous a présenté un jeu multi-joueurs utilisable depuis différents terminaux mobiles (Palm, Google Android, Nokia…), une application AIR sur portable et en mode web sur PC. Le principe technique est que ce jeu s’exécute côté serveur et que les images du jeu sont envoyées en streaming sur les terminaux (un peu comme une vidéo YouTube). Chaque commande est également envoyée au serveur pour lui permettre de calculer le comportement attendu pour le joueur.

Même si la technicité est certainement élevée et innovante, la pauvre bande passante du Wi-Fi disponible a montré les lacunes de l’outil. L’intérêt reste à notre sens assez limité, bien que nous ne soyons pas des spécialistes du jeu en ligne. On salue quand même la performance (faut le faire non ?)

Flash

La démo Flash est assurée par Chewbacca en personne. Il nous montre comment la future version de Flash Professionnel permettra de générer des animations de formes à l’aide d’un moteur physique pour leur donner un aspect particulièrement réaliste. L’exemple ci-après est réalisé à partir de dessins de formes vectoriel et d’activation de quelques cases à cocher…

On vous laisse imaginer les possibilités offertes au designer pour réaliser des animations réalistes et relativement complexes en quelques clics, c’est vraiment intéressant pour le monde de la création.

Flex pour mobile

Cette fois, c’est princesse Leia qui procède à la présentation d’un développement en environnement Flex avec le framework mobile. Concrètement, il/elle utilise des composants liste et champ de recherche, compile et lance une application ressemblant plus que fortement à une application iPhone de recherche et affichage d’informations.

Le résultat, affiché sur un iPhone (forcément…), est particulièrement réussi, très réactif. C’est impressionnant, en tant que développeurs Flex de voir la simplicité du développement Flex apportée sur un environnement de ce type !

Photoshop

On ne sait plus à quoi s’attendre sur Photoshop. Le logiciel vit depuis un certain temps, et pourtant cette présentation nous a laissé sur le c… pardon, pantois.

Concrètement, l’équipe a travaillé sur une fonctionnalité de gommage intelligent (mathpatch), interprétant la globalité de l’image pour remplacer le contenu supprimé par un contenu particulièrement réaliste. Le résultat est absolument hallucinant. Vous pouvez supprimer le fameux fil électrique qui rature le beau bâtiment à présent.

Ce fonctionnement a carrément été appliqué à des parties d’images : la démonstration montre le conférencier supprimer une usine de la vue de la photos. 20% de l’image est recomposée automatiquement. On constate déjà un peu plus l’intervention de la machine, mais en faisant attention. Bluffant !

Fireworks

L’équipe Fireworks a présenté une fonctionnalité de retour arrière sur ses actions de manière ciblée. Concrètement, vous travaillez sur une partie de votre image, puis une seconde et ne voulez annuler que les changements effectués sur la première partie, mais pas sur la seconde, vous pouvez sélectionner ladite première partie et annuler uniquement ces changements : particulièrement pratique pour les designers habitués à ce genre d’outils !

Dreamweaver

Nous n’avons pas particulièrement l’utilisation de Dreamweaver habituellement, mais on retient cette démonstration, particulièrement intéressante pour l’utilisation de la nouvelle norme HTML 5.

En l’occurrence, une nouvelle spécification est sortie (HTML 5) intégrant notamment un notion de Canvas, des interactions et animations pouvant être définies pour ce canvas. Adobe montre une forte volonté de tirer partie de cette nouvelle solution en permettant un copier coller depuis Flash dans Dreamweaver d’une animation Flash, Dreamweaver la transformant en animation native Canvas.

L’intérêt ? Pas de Flash Player, des performances excellentes, et une adéquation parfaite aux standards. Une excellente initiative pour tenter de se rapprocher du standard plutôt que chercher à l’évincer.

AIR : Rome

Attention, énorme application. Le conférencier nous présente un outil à l’ergonomie particulièrement réfléchie et léchée regroupant en quelque sorte le principale de chaque outil d’Adobe. Vous pouvez dessiner en vectoriel (Illustrator / Fireworks), ajouter des animations (Flash), importer des calques Photoshop, ajouter des écrans et créer une interaction type navigation entre écrans (Flash Catalyst).

Enfin, vous pouvez exporter votre travail en SWF, AIR, SVG, image, page HTML, PDF… Tout cela étant, également fonctionnel en mode Internet : il y avait de la bave sur les sièges…

Pour nous, c’est le vainqueur. C’est absolument impressionnant à voir ! Ca montre notamment les capacités offertes par AIR et confirme son positionnement sur une application Internet mêlée à une application de bureau.

Autres articles sur le même sujet

• Du HTML dans mon Flex…
• Live from MAX Milan : hands on thermo…
• MAX 09 – Le multitouch
• MAX 09 – Ça annonce !

Un conférence sur le multitouch, un thème qui nous tenait à coeur pour cet événement !

MAX a été l’occasion pour Adobe d’aborder le multitouch de manière plus détaillée. En effet, le matériel commence à devenir disponible pour le grand public et le succès de l’iPhone montre déjà l’intérêt des utilisateurs pour ce type d’interactions et la nécessité d’anticiper cette composante dans la conception des nouvelles Interfaces Homme Machine.

Nous résumerons ici deux conférences auxquelles nous avons pu assister : la première « officielle » assurée par une personne du groupe Cynergy, relativement générale et montrant quelques exemples intéressants. La seconde, appelée « unconference », assurée par une personne d’Adobe, en charge de la prise en compte du multitouch au niveau du Flash Player 10.1, celle-ci plus technique et orientée sur les bonnes pratiques, particulièrement intéressantes.

Essayons de ressortir les principales idées et conclusions de tout cela.

La présentation s’articule autour des axes suivants :

• Matériel et principaux environnements de prise en charge, à disposition du grand public
• Types de mouvements reconnus nativement sur ces matériels
• Implémentation avec AIR 2.0 et bonnes pratiques

Matériel et principaux environnements

Aujourd’hui, le multitouch est accessible au grand public via :

Types de mouvements et informations reconnus

• Natifs
  • Zoom,
  • Swipe (action de faire glisser à deux doigts),
  • Rotation
  • Taille d’appui sur l’écran
• Personnalisés (permet d’implémenter ses propres interprétations de mouvement)

C’est peu mais suffisant pour la plupart des actions connues.

On regrettera le fait que seul un mouvement natif est reconnu par le système à la fois, impliquant qu’on ne peut zoomer et faire pivoter un élément en même temps. Il faut dans ce dernier cas se débrouiller.

On appréciera aussi le fait que le « standard » établi par l’iPhone se retrouve dans les mouvements reconnus et pris en charge pour tous ces systèmes. A savoir que les mouvements natifs ne peuvent être utilisés en concurrence avec les événements personnalisés. Aussi, soit vous faites du natif, soit vous vous démerdez… Why not !

Implémentation avec AIR 2.0 et bonnes pratiques

La nouveauté est que AIR 2.0 écoute les événements envoyés par les systèmes multitouch et offre une API assez simple permettant d’y réagir. nous ne rentrerons pas dans les détails, mais plusieurs choses doivent être prises en compte avec attention pour produire une « bonne » application multitouch :

• Il est important de pouvoir gérer les événement Souris et les événements Touch de manière unifiée pour que l’application reste compatible avec un système standard. N’oublions pas que le multitouch est loin d’être encore accessible à tous
• Il faut penser à la taille des doigts : un bouton sera certainement plus gros dans une application multitouch, l’homme étant moins précis que la souris (désolé pour la blague de geek).
• De ce fait, il faut idéalement être capable d’adapter son application à des résolutions différentes : certaines applications multitouch prennent tout leur sens sur des écrans très grands (table type Microsoft Surface), mais peuvent être amenées sur des écrans plus petits (tablet PC par exemple). Selon la résolution cible, un pixel n’aura absolument pas la même taille et l’application pourra devenir totalement inutilisable
• Utiliser un gestionnaire personnalisé d’interprétation de mouvement en ActionScript (type touchLib) se révèle être une solution généralement plus flexible voire performante que l’usage de la détection native de mouvements simples. D’autant plus quand on repense à la restriction de non parallélisation de mouvement natifs simples (zoom + rotation).

Conclusion

Nous arrivons à un moment où les outils se présentent pour proposer des interface apportant réellement quelque chose en terme d’innovation et d’interactivité. C’est donc naturellement qu’Adobe s’insère dans cette voie et propose de reprendre la main sur les technologies déjà existantes dans ce domaine (type TUIO, touchLib…) et se tient prêt pour le matériel de demain !

A quand les éléments tangibles dans les boutiques Adobe ?

À noter : vous pouvez retrouver  les conférences sur le multitouch, sur Adobe TV :

• Multitouch Development with flex
• Multitouch and the flash plateform

Autres articles sur le même sujet

• MAX 09 – Où est passé le Text Layout Framework ?
• MAX 09 – Sneak Peeks !
• MAX 09 – Ça annonce !
• Caresse-toi le flex : FlashPlayer 10.1 et Multi-toucher

Alors le multitouch remplaçant de nos bons vieux claviers / souris ? Pas si sûr ! Pour certains acteurs cela ne fait pas de doute. Pour d’autres en revanche, ces interfaces ne sont que des périphériques supplémentaires, un moyen différent de « consommer ».

Imaginez manipuler un fichier Excel en multitouch… Ça risque d’être assez pénible ! Pour peu que l’on soit un accro des macros ! (bon moi je m’en fou je fais pas d’Excel). Et puis pour l’instant ça fait mal aux doigts ! A force de gesticuler autour de sa table 50 pouces, on prend des crampes…

D’accord mais c’est bien le multitouch ! LA solution ? Les pseudo claviers / souris comme périphériques physiques de la table. Imaginez un clavier souple ou une souris transparente en plexiglas : pas d’électronique dedans, et tout de même repérés par la table. Un peu comme les tables tangibles, reconnaissant des périphériques électroniques (appareils photos…), ou des périphériques de soirée (un verre…) ou n’importe quoi qui possède un tag RFID. RFID ou bien par une forme particulière : on peut imaginer des objets de formes différentes, qu’une analyse d’image peu détecter.

slap widgets demo

Plusieurs groupes travaillent sur ce type d’interfaces tangibles : le MIT avec le groupe Tangible Media Group, le Media Computing Group, un groupement de recherche des universités allemandes, avec le projet SLAP : Silicone Illuminated Active Peripherals.

Et ce n’est qu’un début ! Le monde de la musique dispose déjà d’interfaces tangibles.

[update] Do you want more ?
Pattie Maes, du Fluid Interface Group – MIT, à présenter en février dernier leur dernier jouet : « the SixthSense » : Minority Report en vrai. Pourquoi avoir un périphérique alors que ses doigts c’est si bien ?!

Ils sont aussi à l’origine du projet fou Siftables

Je vous invite vivement à découvrir l’ensemble des projets de ce groupe : il y a là de quoi rêver sur l’avenir des interfaces !
[/update]

Et là oui ! J’imagine mieux Excel en multitouch !
A suivre de près donc… A quand un docteur maboul virtuel tangible ?
Et vous, des idées ?Autres articles sur le même sujet

• Un curseur… des curseurs ???
• MAX 09 – Le multitouch
• Caresse-toi le flex : FlashPlayer 10.1 et Multi-toucher
• BarCamp interfaces riches, Lyon, 23/06

On dirait que les rotations 3D de FP10 arrivent à point… ;-p

Et vous ? vous z’en connaissez des exemples d’interfaces « utilement » en 3D ???

Plus d’info sur BeeDocs

Autres articles sur le même sujet

• Flex Active Desktop : le webGadgetOS qui fait de l’effet !
• TileUI : un bureau « réaliste » en AS3
• Le design déclaratif à un nom : Degrafa
• JavaFX et Open Screen Project, ou la naissance des applications universelles…

Pour JavaFX par contre, cette démonstration nous montre au moins une fonctionnalité inimaginable via le plugin Flash ou Silverlight …

Bon ca bug un peu, mais ça promet…

Avec le projet Open screen d’Adobe, l’environement JavaFX + JFX mobile et les versions mobiles de silverlight, une même application pourra être utilisée sur mobiles ou ordinateur ( voire console de jeux ). Il me semble que le terme de RDA ( Rich Desktop Application ) deviens déjà obsolète, je propose celui de R.U.A : les « Rich Universal Applications » ou même plus sobre : UA – Universal Application . Via the universal desktopAutres articles sur le même sujet

• Apollo… ca avance !!!
• Crée ton navigateur perso avec 5 lignes de code !
• Developing with AFCS a.k.a Cocomo – Introduction
• BarCamp interfaces riches, Lyon, 23/06

via http://blogs.adobe.com/jnack/Autres articles sur le même sujet

• Insatiable Google…
• Games 3.0 : des jeux dont vous êtes le héros… ou l’auteur
• Design d’applications riches : les objectifs de Thermo ?
• Souriez vous allez être modélisé