Guillaume André

Silverlight 3 incorpore la gestion de plan 3D  (PlaneProjection) au sein de son plugin et ce nativement. Voici un petit exemple “coding4fun” d’implémentation de plan 3D. Le but de l’exercice est de créer un simili Cube 3D avec un nuage de point puis d’animer le cube en question.

Cube Silverlight en 3D :

Côté code :

L’idée est donc d’avoir une Matrice de point et de créer chaque point du cube 3D à la volée. Pour animer le cube il faudra animer chaque point. Cela est bien entendu du à la gestion de la “3D” dans Silverlight et des projections de plans.

Respectueux des standards j’ai toujours opté pour intégrer mes applications Flash/Flex dans les règles avec une balise OBJECT digne de ce nom en évitant les librairies externes Javascript (bien que très fonctionnelles) et balises embed. Néanmoins voici un petit retour d’expérience pour les intégrateurs.

Lors du déploiement d’une application Flex j’ai obtenu l’erreur Javascript suivante sous Internet Explorer uniquement :

Ligne : 1
Caractère : 102
Erreur : ‘null’ a la valeur Null ou n’est pas un objet.
Code : 0

Le debuggeur incorporé dans Internet Explorer 8 m’a très vite fait comprendre qu’il s’agissait de l’ExternalInterface API d’ActionScript :

3 possibilités pour résoudre cette problématique :

• Utiliser une librairie Javascript type swfobject ;
• Utiliser le JavaScript par défaut généré par les outils Adobe ;
• Utiliser la balise OBJECT suivante, bien que non valide xHTML strict :

<object width=”400″ height=”300″>
     <param name=”allowscriptaccess” value=”always” />
     <param name=”movie” value=”mon.swf” />
     <embed src=”mon.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”400″ height=”300″>
</embed>
</object>

Ce problème a vu le jour avec l’arrivée de Flash player 10.

Après quelques recherches voici mon TOP 10 des Skins / Thèmes Flex que j’ai pu trouvé sur la toile. Orientées design et pro toutes ces skins graphiques sont téléchargeables gratuitement et installables dans vos propres applications AIR/Flex. N’hésitez pas à les télécharger pour les tester. Certaines sont d’ailleurs éditables, je pense notamment aux deux dernières qui pourront servir de bonne base de travail pour créer une Skin totalement personnalisée. Merci aux auteurs !

Yahoo Flex Skin

Yahoo - Voir un aperçu - Télécharger le thème (skin)

Undefined Skin One

Undefined - Voir un aperçu - Télécharger le thème (skin)

Darkroom

Juan Sanchez - Voir un aperçu - Télécharger le thème (skin)

Brownie

Nahuel Foronda - Voir un aperçu - Télécharger le thème (skin)

Summer Sky

Erick Ghaumez - Voir un aperçu - Télécharger le thème (skin)

Vista Remix

Jerry Don - Voir un aperçu - Télécharger le thème (skin)

Aqua

 
Nahuel Foronda - Voir un aperçu - Télécharger le thème (skin)

Kingnare

Jin Xin - Voir un aperçu - Télécharger le thème (skin)

Granite

Dan White - Voir un aperçu - Télécharger le thème (skin)

iCandy

Phil Chung - Voir un aperçu - Télécharger le thème (skin)

Seat a choisi la technologie Silverlight pour venter les mérites de son nouveau modèle de voiture : Exeo. C’est la société Metia au travers de sa plateforme eMagazine qui propose un e-book accompagné d’une technologie pseudo-DeepZoom. Ca se passe par ici : http://www.seat.co.uk/exeo/pagelife/ Voici l’application en image.

Les plus :

• Application réalisée avec Silverlight 2 RTW
• Un contrôle accordeon enrichi
• Un full-screen
• Des vidéos pour enrichir le contenu imagé

Les moins :

• Ne profite pas des avantages de la technologie DeepZoom
• Le pageflip n’est pas fluide et est piloté par un menu plutôt que par Drag & Drop. Cf le très bon contrôle de Mitsu.
• 3 liens : Contact/Brochure/Test Drive sont redondants (apparaissent 3 fois dans l’application sous différentes formes ce qui est déroutant)
• Ces 3 liens lèvent des popups qui mettent fin à l’expérience de l’utilisateur d’autant plus si celui ci profite du full-screen.
• Un Zoom/UnZoom difficile à prendre en main

Introduction à la propagation d’événément

La propagation d’événement est le transfert d’un événement unique au travers de plusieurs objets. Ce concept connu des “développeurs objet” a été introduit avec ActionScript 3. La propagation d’événement est donc un concept accessible au sein des applications Flex, Adobe AIR, et Flash.

La propagation d’événement comment ca marche ?

La propagation d’événement se divise en 3 phases distinctes :

• La capture aussi appelé Capture Phase
• La cible aussi appelé Target Phase
• La remontée aussi appelé Bubbling Phase

Voici un schéma qui illustre les différentes phases de la propagation d’un événement :

Le sprite peut être remplacé par n’importe quel objet affichable.
Pour exemple, lors du clic sur le Sprite l’événement traverse Stage et Root (c’est la phase de capture), arrivé à la cible l’événement remonte via Root et enfin Stage. Ainsi vous aurez pu récupérer l’événement à 5 endroits différents.

Jouer avec les écouteurs d’événement

La méthode addEventListener(”event”, handler, useCapture) admet un paramètre appelé useCapture. Ce paramètre permet de spécifier à votre écouteur d’événement à quel moment vous souhaiter écouter l’événement. Ainsi en renseignant ce paramètre à false votre écouteur sera actif que durant la phase cible et la phase de remontée (c’est la valeur par défaut). En le passant à true l’écoute sera également durant la phase de capture.

Voici un exemple pratique avec une application Flex :

<mx:Panel id=”panel” label=”Conteneur” width=”200″ height=”100″>
     <mx:Button id=”button” label=”Mon bouton 1″></mx:Button>
</mx:Panel>

Ce code renverra donc : Panel > Root > Stage  lors du clic sur le bouton. Pour bien comprendre le fonctionnement de useCapture n’hésitez pas à manipuler ce dernier.