Comme éditeur, j’ai utilisé WebStorm », utilisé par le studio HelloEnjoy ( auteur du fameux Lights d’Ellie Goulding » ). WebStorm propose l’auto-completion, le refactoring… Une bonne découverte et un outil indispensable pour le développement js, si vous en connaissez d’autres, je suis preneur !

Voici donc une première version des curved plane ThreeJS ( non cliquable pour le moment… ):

Oui, mais…. honnêtement, malgré la résolution des problèmes de performances et de batterie, surfer sur un site Flash sur un navigateur mobile, n’était pas des plus simple, l’ergonomie de la plupart des sites ( pour ne pas dire tous ) n’est simplement pas adaptée au tactile et à ce format d’écran ! Bien sur, je ne vais pas renié ma « spécialité », mais la monté en force d’HTML5, et l’entêtement d’Apple poussait vers la décision d’Adobe.

Quel avenir ?

Je ne parlerais pas ici des applications AIR, qui continueront à garder leur légitimité, et j’espère que les équipes utilisées pour le portage mobile seront transférer sur le développement de AIR ( Adobe va supprimer 750 postes » ). Mais pour le développement de site, à l’heure ou l’usage des supports mobiles se démocratisent, comment continuer à proposer un site qui ne sera pas compatible à 100% ? L’internaute attend de retrouver sur sa tablette le même site qu’il peut voir sur son laptop, pas une version dégradé. L’annonce d’Adobe va donc changer pas mal de choses, plus questions de se « planquer » derriere les avancées futures des adaptations du Flash Player pour convaincre les clients de choisir un site full Flash ( oui, oui, ça existe ). Faut-il augmenter les coûts et multiplier les versions d’un site pour qu’il soit compatible ( Flash, HTML5 ), ou ne faire qu’une version ? La réponse me semble ( malheureusement pour les flasheurs ) toute faite…

Est-ce donc l’annonce de la fin de Flash tel que nous le connaissons aujourd’hui ? Ne sera-t-il plus utilisé que spécifiquement sur des applications qu’HTML5 ne permet pas (encore) de réalisé ? Adobe décide de « pousser » HTML5, mais les spécifications ne sont pas définitives, les navigateurs pas tous prêts, et les outils que présentes Adobe ( Edge ), ne sont pas des plus convaincants, pour les flasheurs en tout cas…

L’année 2012 s’annonce comme l’année du HTML5, 2011 l’avait déjà amorcé, mais Adobe a décidé d’accélérer encore plus le mouvement… Une période d’adaptation et de reflexion se prepare donc, pour le confort de l’internaute, notamment utilisteur de produit Apple ( « merci » Steve Jobs !? )…

Il me semble que c’est mon premier post « rédactionnel », soyez donc indulgent sur mon écriture, l’exercice n’est pas facile, le sujet est vaste ( j’aurais aussi pu parler de l’Open Screen Project, et du portage sur les TV, des efforts consentis par Samsung et Google pour suppoter Flash… )
Merci de votre compréhension !

Les réactions de la communauté ( juste une sélection ) :
Grant Skinner – Flash Player Mobile, a Post Mortem »
Peter Elst – Et tu, Adobe? Flash Player homicide »
Stefan Richter – One Day On: Reflections On Adobe’s Flash Announcements »
Lee Brimelow – Flash to Focus on Apps for Mobile »
Marvin Blase – Flash Mobile Died. So What? »
Ben Forta – Some Thoughts On Flash And Devices »

[UPDATE]
Fernando Comet – Flash is dead, Steve Jobs is dead »
Phil Chung – Open Letter to Flash »

FlashPlayer 10 sur Opera / Win XP est 4 fois plus rapide que sur Safari / Mac

Vous trouverez l’ensemble de l’article, dont les résultats comparatifs et les fichiers AS de test, sur le site de Flashgamer : CopyPixels and browser speed limits

A noté qu’une version pour Silverlight devrait sortit l’année prochaine…

La page des nouvautés de SWFAddress 2.2 »
Télécharger SWFAddress 2.2 »

Voici les possibilités qu’offrent KapInspect :
- Inspection des objets (Bitmap de visualisation, liste des propriétés..)
- Filtrage des proriétés par type ( String, Number, Object…)
- Mémoire utilisée en temps réel
- Modification style
- Ciblage des éléments
- Evènements
- Statistiques
- …

Pour utiliser KapInspect, il faut vous identifier » et ensuite télécharger le package KapInspect.zip.
Copier KapInspect.swc dans le dossier de votre projet, et l’ajouter dans le library Path ( Project > Properties > Flex Build Path > Librairy Path > Add SWC ).
Il faut suffit alors d’instancier KapInspect de cette façon

Vous pouvez instancier KapInspect en code, ou alors ne pas vouloir charger toute la librairie dans votre application Flex, vous pouvez voir de quelle façon sur la page de présentation de KapInspect.

Gage de qualité KapInspect est visible dans l’application AIR : TourDeFlex

Vous pouvez retrouver KapInspect et d’autre applications sur le Lab de KapIt »

La page de KapInspect »
Le guide d’intégration de KapInspect »
Le guide du développeur »

via Flex888 »

Le premier argument (x) est la valeur à décaler, le second argument (y) est le nombre de décalage a effectuer :

Décaler un bit à gauche correspond à multiplier par 2 :

Décaler un bit à droite correspond à diviser par 2 :

Chaque décalage correspond à multiplier / diviser par 2, si augmente le nombre de décalage cela équivaut à :

Nombre de décalage : 1 => Multiplication / Division par : 2
Nombre de décalage : 2 => Multiplication / Division par : 4
Nombre de décalage : 3 => Multiplication / Division par : 8
Nombre de décalage : 4 => Multiplication / Division par : 16
Nombre de décalage : 5 => Multiplication / Division par : 32
Nombre de décalage : … => Multiplication / Division par : …

!!! Attention !!! Le résultat est toujours un entier !

Aller plus loin :
Le décalage binaire »
Représentation des nombres entiers et réels »

Cocomo n’est utilisable que sur Flex 3 ( il n’est pas compatible Flex2 ou Flash), il faut aller sur cocomo.acrobat.com et vous identifier, pour télécharger le sdk (comprenant aussi le pdf Cocomo Developper Guide, ainsi que 15 exemples d’utilisation). C’est sur cette même adresse que vous accéderez à la gestion de votre compte Cocomo et de vos « Rooms ».

Pour installer Cocomo dans Flex Builder 3, créer un dossier com.adobe.cocomo, dans le dossier des plugins de Flex Builder 3. Copier l’ensemble du .zip SDK dans ce dossier.

Pour chaque projet nécessitant Cocomo, il faut ajouter le chemin vers le .swc, dans Project > Properties > Flex Build Path > Library Path cliquer sur AddSWC et sélectionner le « cocomo.swc » se trouvant dans le dossier lib (Sélectionner le sous dossier player9 / player10 suivant la version de votre application).

Il vous faut ensuite créer une room dans votre espace dédié sur le Cocomo Developer Portal, une room équivaut à un espace de réunion de virtuel, tous les messages, fichiers, vidéos… publiés dans cet espace seront visible par les autres utilisateurs :

Après avoir créer un nouveau projet (ne pas oublier d’y ajouter le chemin vers cocomo.swc), vous devez vous connecter à la plateforme Cocomo, il faut obligatoirement une instance de la classe AdobeHSAuthenticator, ainsi qu’une instance d’une des classe étendant l’interface IConnectSession, ie : ConnectSession, ConnectSessionContainer ou SessionContainerProxy.

Pour mon exemple, j’ai utilisé le composant ConnectSession, prenant en paramètre roomURL le chemin vers la room crée précédemment, ce chemin correspond à l’adresse de votre compte (« http://connectnow.acrobat.com/tsoin » en l’occurence), puis la nom de votre room : roomURL = http://connectnow.acrobat.com/tsoin/Cocomo001.

Le composant AdobeHSAuthenticator permet plusieurs scénarios :
- Authentification par AdobeID (paramètres userName & password)
- Connexion en invité (paramètre userName)
- Authentification externe (paramètre authenticationKey )
…

L’exemple suivant utilise le composant SimpleChat, permettant aux utilisateurs lançant l’application de se connecter sous le pseudo Guest XXX, et de pouvoir discuter entre eux :

Pour la beta, les restrictions sont les suivantes :
- 25 utilisateurs simultané
- 15 000 minutes de connexion utilisateur par mois
- 250 000 messages publié pas mois
- 3 Go de bande passante par mois

La version beta est en version gratuite, mais il n’y a pas encore de coût d’utilisation pour la release…

La page Cocomo sur le labs »
Forum Cocomo »
Exemple Cocomo : ConnectNow »
Blog Collaborative Methods »

Présentation et exemple de Cocomo par Ryan Stewart :

Flex in a Week raquo;

Keyboard Keys and Key Code Values »

Voici donc les versions testées :
- Papervision3D : Public Beta 2.0 – Great White / 2008.09.09 (revision 804)
- Away3D : 2.2.0 / 2008.09.27
- Alternativa3D : 5.5.0 / 2008.10.25

Je ne reprendrais pas les 3 premiers points du comparatif précédent, les différence étant minimes, surement du à la machine plus qu’au améliorations ( les différences de temps de créations sont inférieures à 0.5ms ). LE point important étant la mémoire, et la formidable amélioration de Papervision, qui vient changer la donne…

Alternativa3D reste le moteur qui gère le mieux la mémoire, mais Papervision3D vient coiffer Away3D au poteau… Même si la différence reste peu importante, le retard rattrapé par Papervision3D est remarquable, vous pouvez retrouver les explications de la fuite moiré sur ce post de Seb Lee-Delisle »
Vous retrouvez dans les graphes ci-dessous l’évolution de l’usage mémoire par chacun des trois moteurs 3D :

Alternativa3D

Away3D

Papervision3D

Les conclusions sont donc différentes, et pouvoir assigner une « vraie » première place, me semble impossible.
- Away3D : temps de création et mémoire utilisé à la création les plus bas, mais mémoire globale plus haute
- Alternativa3D : temps de création au plus haut, et mémoire à la création dans la moyenne, mais mémoire globale la plus basse
- Papervision3D : temps de création, mémoire à la création, et mémoire globale dans la moyenne.

Autant il est était facile de prendre une décision avec l’ancien comparatif, autant avec celui-ci, les écarts sont infimes, les choix difficiles, je dirais match nul…
Reste à voir graphiquement lequel est celui qui s’en sort le mieux…

Mise à disposition des sources :
- Alternativa3D » (le framework n’est pas inclus, n’étant pas en open-source)
- Away3D »
- Papervision3D »
- Sandy3D »

Ma méthode fut la suivante :
- Implémentation au plus simple et identique pour chacun des moteurs.
- Mécanique identique de création des objets, instance unique.
- Une seule instance des materials ( filaire et texture )
- Utilisation de calcul asynchrone afin de ne pas avoir de valeurs faussés ( la création de l’objet est faite quand le processeur le permet )
- Test à la création de 1000 objets, avec différentes variables ( filaire ou bitmap, lissage de l’image ou non)
- Stockage des données dans un tableau, les résultats utilisés sont les moyennes de temps de création et de mémoire utilisés par objet.
- Vérification de la mémoire initiale, du pique de mémoire, ainsi que de la mémoire utilisé après les tests.

Version :
- Papervision3D : Public Beta 2.0 – Great White / 2008.09.09 (revision 731)
- Away3D : 2.1.0 / 2008.05.23
- Sandy3D : 3.0.2 / 2008.02.25
- Alternativa3D : 5.3.0 / 2008.08.12

Comme vous pourrez le remarquer les résultats sont très disparates suivant les moteurs, et même si les objets n’ont pas les mêmes caractéristiques (le nombre de segments d’un cube ne peut pas être augmenté dans Away3D & Sandy3D, contrairement à Alternativa3D & Papervision3D), les différences parlent d’elles mêmes… Vous le verrez dans les 4 points suivants :

1. Poids SWF
L’exportation du fichier swf et le poids de celui ci (non négligeable au moment de l’accès au site, notamment pour les petites connexions) montre les premières différences entre les moteurs.
Le premier cas importe les package de camera, vue et scene.
Le second cas importe en plus les pacakge de Cube, Plane, Cone et Sphere.

2. Mémoire à l’initialisation du moteur:
Voyons maintenant l’espace mémoire pris lors de l’implémentation du moteur 3D. On test la mémoire sans lancer aucune création d’objet, et les moteurs montrent déjà que certains sont plus optimisés et d’autres, beaucoup, beaucoup moins :

1. Papervision3D – 167 ko
2. Away3D – 199 ko
3. Alternativa3D – 202 ko
4. Sandy3D – 1 136 ko

Sandy3D part donc déjà avec un gros handicap, on verra par la suite que ce n’est pas le seul…

3. Mémoire Globale:
L’écart se creuse encore, Papervision3D et Sandy3D ont une très mauvaise gestion de la mémoire, en effet malgré la suppression de l’objet sur la scène et de son instance, il est toujours en mémoire. L’application monte donc en mémoire, sans jamais redescendre, ce qui peut s’avérer extrêmement dangereux… Il est à noté que Away3D & Alternativa3D gèrent par contre très bien la mémoire, et suppriment les éléments comme il faut. Après la création de plusieurs milliers d’instance de plusieurs objets, on se retrouve avec une mémoire :

1. Away3D – 700 ko
2. Alternativa3D – 876 ko
3. Papervision3D – 50 784 ko
4. Sandy3D – 175 552 ko

Les graphes ci-dessous montre bien la gestion de la mémoire par les 4 moteurs 3D, on remarque sur Alternativa3D & Away3D, la mémoire qui évolue suivant les suppressions d’éléments et le lancement du Garbage Collector, alors que pour Papervision3D & Sandy3D, ca monte, ca monte, ca monte….

Alternativa3D

Away3D

Papervision3D

Sandy3D

4. Création d’objet :
Question de logique, plus l’objet à créer est compliqué, plus il faudra de temps pour le créer, et plus la mémoire utilisé par cet objet sera importante… Comparer les temps de création et d’espace mémoire entre chacun des moteurs objets est assez compliquer. En effet, malgré des valeurs identiques, les moteurs créer des objets plus ou moins complexes, je ne comparerais donc pas la forme de ces objets, le nombre de triangle étant assez identiques, l’appréciation de la qualité de l’objet est spécifique à chaque utilisateur…

4.1 Temps
De manière globale, Away3D est le plus rapide.
Sandy3D a des performances équivalente voire meilleure pour la création de Box ou de Plane, mais est très très loin d’être aussi performant dans la création de Cône ou de Sphère, une fois de plus celui ci se démarque par sa singularité.
Quelque soit le type de texture utilisé, Alternativa3D a des temps de création quasi similaires, il est donc moins performant lors de création d’objet filaire, mais cet handicap se réduit donc lors de la création d’objet « texturé ».
Les temps de création d’objet par Papervision3D se situe dans la moyenne de celle d’Away3D et Alternativa3D, excepté pour les Box, ceci étant du aux nombres de segments crées par Papervision3D.

1. Away3D
2. Papervision3D
3. Alternativa3D
4. Sandy3D

4.1 Mémoire
Comme pour les temps de création, Away3D est le moins gourmand en général :
- Sandy3D consomme moins de ressources lors de la création de Box ou de Plane, mais explose littéralement lors de la création de Cône et de Sphère
- Papervision3D, consomme beaucoup moins de ressource lors de la création de Sphère, mais utilise presque 6 fois plus de mémoire qu’Away3D lors de la création de Box ( notamment du, comme pour le temps de création, au nombre de segments crées par Papervision3D )

Alternativa3D est quant à lui dans la moyenne haute des autres moteurs, sans pour autant être catastrophique.

1. Away3D
2. Papervision3D / Alternativa3D
4. Sandy3D

Différence de temps de création entre un objet filaire et un objet texturé :

Ces écarts de temps de création sont à corrélés avec la mémoire utilisés par la création de cet objet :

On peut remarquer que ces écarts sont quasi idem pour chacun des objets crée par chaque moteurs 3D, Alternativa3D ayant un delta proche de zéro, on peut conclure que la gestion de texture filaire ou bitmap se fait de la même façon. On remarque aussi les différences de delta pour Sandy3D entre les objets Box/Plane et Cône/Sphère.

5. Conclusion
Les tests effectués ne sont peut être pas représentatifs de la création d’une application, ou d’un site internet, mais ils nous montrent comment réagissent ces moteurs 3D dans des cas extrêmes, et si certains cas semblent dangereux (notamment la gestion de la mémoire), il faut garder en mémoire que tout le monde n’a pas de machine surpuissante, et qu’il faut toujours penser à qui est destiné le développement que l’ont fait (et pas se dire, si ca marche sur ma machine, y’a pas de raison que ca marche pas ailleurs, comme je l’entend assez souvent…).

De plus, ce comparatif ne prend pas en compte les différentes possibilités offertes par certains moteurs 3D (réélections…), il faut donc choisir judicieusement le moteur en fonction de ces possibilités ainsi que de ces performances.

Concernant les performances, venons en donc aux conclusions.

4. – Sandy3D et la mémoire, ce n’est pas un histoire d’amour, et ce, dès l’initialisation du moteur, et même si les performances lors de la création de Box et de Plane sont parmi les meilleures, la gestion de la mémoire (pas de suppressions des instances), les performances « catastrophiques » pour la création de Cône et de Sphère (donc d’éléments complexes), montrent les lacunes de Sandy3D. Au vue des résultats, c’est le seul moteur qui ne réagit pas de façon homogène, si vous l’utiliser il faut rester dans des formes simples, et peu nombreuses…

2. ex aequo – Les temps de création de Papervision3D se situe dans la moyenne, c’est au niveau de la mémoire que ça se gâte, malgré une bonne gestion lors de la création de Sphère, il est bien plus gourmand lors de la création de Box et de Plane. Nous avons pu voir que Papervision3D ne supprime pas ces instances et rencontre donc le même problème que Sandy3D, sans pour autant cumuler au même sommet mais c’est à surveiller lors de création et suppression de nombreux éléments…

2. ex aequo – Alternativa3D, dernier venu dans le monde des moteurs 3D, gère extrêmement bien (ou plutôt normalement !?) la mémoire, il est cependant plus gourmand en temps de création (entre 2 et 5 fois plus) que les autres moteurs. Malgré son coup de licence qui peut freiner, ces performances en font un des meilleurs moteurs 3D actuels.

1. Et pour finir, Away3D. Temps de création les plus bas du comparatifs, mémoire nécessaire à la création les plus bas aussi, excepté sur quelques points (Box et Sphère), mais qui reste excellents, et gestion de la mémoire globale excellente aussi. Bref le moteur 3D que je conseillerai (en terme de performance, encore une fois, et pas de possibilité de rendu graphique ).

Merci à Philippe, dit « Papa », pour sa relecture !

NB:
- Comparatif réalisé avec le Flash Player 10
- J’ai utilisé le terme Box de façon générale, la classe exacte pour Away3D et Papervision est Cube, il en est de même pour Plane3D dans Sandy3D

L’explication complète en vidéo :

En effet, dans le Flash Player 10, l’appel à Filereference.browse ou FileReference.download n’est accepter que lorsque qu’il y a une action utilisateur (MouseEvent, KeyboardEvent…), si cela pose quelques problèmes pour les nouveaux projets à venir (utilisation d’un framework utilisant les notifications, donc appel indirect…), cela en pose encore plus pour les anciens projets, qui pourront ne plus fonctionner suivant la méthode de développement utilisés.

Je me suis confronté au problème sur un projet Flex / PureMVC, suite à un clic utilisateur, j’appelle à un webservice qui me renvoi l’adresse d’un fichier à télécharger, je lance alors un FileReference.download(), mais Flash10 ayant « perdu » l’action de l’utilisateur dans les notifcations de PureMVC, il fait une alerte :

Pour l’utilisateur ayant Flash10, rien ne se passe, et malgré de nombreuses tentatives ( ce que ferait n’importe quel utilisateur dans ce cas) l’utilisateur ne pourra jamais effectuer l’action voulu. Donc tous vos développement antérieurs faisant appel à une méthode de FileReference indirectement ne fonctionera plus sur Flash10, il vous faudra reprendre vos anciens projets, se replonger dans le code, et résoudre ce problème !

La solution étant la suivante :

On test si l’appel à la méthode download de FileReference fonctionne (Flash 9), si ce n’est pas le cas (Flash 10), on ouvre une popup proposant le lien à l’utilisateur, qui valide en cliquant sur un bouton.
Flash 10 détectant l’appel à la méthode download de FileReference par une action utilisateur, le téléchargement fonctionnera…

Upload et Download requert un action utilisateur ( Adobe Flash 10 security changes ) »

Vers Adobe Bug System »

Les sources sont téléchargeables ici »

Il faut tout d’abord permettre le debbugage du swf compilé, pour celà, il faut :
- Sous Flash CS3 /CS4, dans les paramètres de publication, cocher l’option « Autoriser le débogage » / « Permit debugging »
- Sous FlashDevelop, il faut configurer son projet en « Debug » (menu déroulant, dans la liste d’icônes)

Une fois le swf compilé, il faut activer la vue Flex Profiling ( Window > Perspective > Flex Profiling )

Dans l’onglet « Profile », cliquer sur la flèche descendante à droite, et sélectionner « Profile External Application »

Cliquer sur « New », et entrer le chemin vers votre application, une fois valider, sélectionner l’adresse dans la liste des applications, et cliquer sur Launch.

!!! Attention Flash Player Debug Obligatoire !!!

Flex lancera alors votre application, et vous proposera de configurer le profiler, une fois valider (« Resume »), vous aurez accès aux données du Profiler sur votre application !

Bon Profile à tous !

Guide de référence, classant par ordre alphabétique l’ensemble des API native de Flash, Flex et AIR

Guide RIA sur Adobe Developper Connection »

Pour accéder aux paramètres du filtre « smudge », il suffit de passer par la propriété data de la classe Shader. Le filtre smudge n’a qu’un seul paramètre : amount. On peut le modifier de cette façon :

Le filtre ayant changé, il ne faut pas oublier de le réaffecter à la propriété filters de l’élément à modifier, au risque de ne voir aucun changement, malgré le changement de valeur des paramètres….

Ci-dessous un exemple, la valeur du paramètre est modifiée suivant la position de la souris en x ( Flash 10 ) :

Il faut tout d’abord exporter son filtre en .pbj, fichier qui sera loader en as3. Une fois cette première opération réaliser, il faut charger le pbj :
- Méthode 1, avec un fichier externe au swf :

- Méthode 2, avec un fichier intégré au swf :

Quelque soit la méthode du chargement, la méthode d’utilisation est ensuite la même :

On peut alors utiliser le ShaderFitler sur tous les enfants héritant de la class DisplayObject, avec la propriété filters :

On peut donc appliquer un filtre Pixel Bender sur un champ texte, sur une vidéo, sur une image, sur un bitmap, un Sprite, un UIComponent etc…

Ci-dessous un exemple de différent filtre sur une vidéo…. ( Flash 10 nécessaire, bien sur )