SoundManager

SoundManager est un Singleton qui contient de nombreuses methodes permettant d’ajouter très simplement du son dans vos applications. Il a une dépendance à TweenLite pour les fading sur les sons.

Active Window Blur

Permet de mettre un effet Blur en background (MovieClip or Sprite) derrière une fenêtre transparente.

TweenMax

TweenMax hérite de la classe de base TweenLite et de son grand frère, TweenFilterLite, pour vous permettre de faire simplement des Tween spécifiques et beaucoup plus …

YouTube

Une classe légère pour connecter l’API YouTube et récupérer des playlists ou des vidéos.

Pulse Particles

Pulse Particles est une classe general proposant de gérer un système de particule en AS3.

Animated Bitmap

La classe AnimatedBitmap fournit des fonctionnalités pour les objets Bitmap anomées par une série d’images. Lorsque vous créez une nouvelle AnimatedBitmap, vous fournissez un objet BitmapData qui consiste en une ’single-frame’ image pour l’animation.

QueueLoader

Le QueueLoader est uen librairie Actionscript pour le chargement et le monitoring séquentiel de données. QueueLoader est fait pour être utilisé avec Actionscript 3.0 et est devenu un projet Open Source. Si vous voulez contribuer, il faut contacter le responsable du projet.

Prioritization

La classe Prioritization fonctionne avec les classes Loader, URLLoader et Sound Objects (et peut être NetStream bientôt). Elle nous permet de définir une priorité pour les requêtes en les executant dans le bon ordre,  en gardant les reqûetes s’executant et les requêtes de chargement.

DistortImage

Une version mise à jour de la classe originale DistortImage pour AS2, qui permet de programmer des effets de distortion sur des images.

Layout

Cette classe - ou plutôt ces 3 classes : Layout, LayoutConstraint et LayoutManager - ajoute une fonctionnalité aux différents Objets ActionScript 3 à l’aide d’une API (en ActionScript seulement, sans interface). En utilisant ces classes, vous pouvez placer vos Objets dans un layout (haut, droite, gauche, bas, centré). Il y a aussi des contrôles utilisés pour la hauteur et la largueur pour maintenir le ratio de l’application.

Color Sampler 

Un moteur de coloration pour les DisplayObjects. Prenez une zone définies (width, height, x, y) d’un objet BitmapData et définissez une couleur moyenne dans cett zone. Il est possible de définir les valeurs de RGB, hue, saturation et transparence.

2D Character Rigging 

Les classes AS3 rigging pour la conception et le skin de personnages en 2D. Cette librairie de classes est organisé grâce à un développement très modulaire et spécifique à l’articulation de personnages 2D. L’accent est mis actuellement sur un personnage humain bipède appellé … Homme

XML Loader Class

Un loader de XML pour AS.

StyleCollection

La classe StyleCollection vous permet de créer des groupes de styles qui sont appliqués à des composants et mettent à jour automatiquement les composants. Elle supporte aussi bien les instances que les renderer de styles (setStyle et setRendererStyle respectivement), et utilise l’introspection de composants pour appliquer les bons styles sur chaque composant. StyleCollection possède une interface robuste, y comprisune interface statique qui fournit une accès global aux styles nommés.

Easing

Le Singleton Easing qui vous permet de faire de des tweening dynamiques entre deux points. Il permet de manipuler virtuellement les propritétés des objets sur ou en dehors de la scène.

CSSLoader

Cette classe vous permet le chargement de fichiers CSS dans votre application Flex durant l’exécution, une fonctionnalité manquante à Actionscript3.0.

Autocomplete Text Field

Pour la création d’un champs texte autocomplété en Flex et dans vos projets AS 3 !

fZIP

Une petite classe Actionscript 3 qui permet le chargement d’archives au format ZIP et l’extraction des fichiers contenus pendant le chargement du fichier.

Reflection Class

Génère des effets de reflections pour les images.

Source : FlashEnableBlog

Vous pouvez maintenant me proposer vos classes indispensables ActionScript 3

La dernière interview est celle de Ely Greefield, qui nous parle de Flex 4 et du futur de Flex.

Vous trouverez le même contenu sur tv.adobe.com, mais l’avantage avec AMP est que vous pouvez sauvez votre contenu et le regarder plus tard en mode “offline”.

Aller donc voir AMP et appréciez ADC.

Si vous voulez faire un Portail Flex, ou si vous avez une application composé de nombreux SWF dont il faut la dernière version … ou si vous avez juste beaucoup de temps devant vous, le lien suivant pourrait être intéressant pour vous : The Marshall Plan.

Cependant, il est tout de même possible d’obtenir un très bon référencement…

Tout d’abord, en créant des fichiers XML qui seront parcourus par les robots lors de l’indexation de votre SWF.

Grâce à Ted, voici un exemple d’implémentation du Flex Directory faite pour être référencée comme un site Web classique.

• 1) Regardez la source du fichier index.html dans le Flex Directory. Toutes les sociétés sont listés dans des fichiers XML.

• 2) Notez le XSL embed à la ligne 2
• 3) Pour ouvrir ce XSL, on voit que lors de l’appel du SWF avec SWFObject, il passe en paramètre une variable FlashVar “xmlurl” avec comme valeur document.location. Le fichier index.html charge donc l’application comme un fichier XML. Les robots vont parcourir le site et ignorer le XSL mais parcourir index.html. Ils vont donc indexer toutes les sociétés. Et le site pointe seulement son index comme des données XML. Simple, rapide, impressionnant.

Retrouvez la suite de son article ICI.

Space150 propose une approche différente basée sur XHTML avec Faust. L’idée est de réaliser le site en xhtml/css puis de rajouter la couche Flash par la suite. Le swf parse ensuite les données depuis la description xhtml pour afficher le contenu de façon plus riche (son, photo, video, animation). Cette approche permet d’une part d’optimiser le référencement Flex / Flash, mais également de rendre le site accessible à tous (reader, sans javascript, sans flash).

N’hésitez pas à laissez vos impressions sur ces techniques pour le référencement Flex.

Lors d’Adobe MAX 2007 à Barcelone, Michael Chaize a développé une application AIR …

Son application Adobe AIR communique avec un fichier PDF. L’idée est de se baser sur un pont JavaScript du conteneur mx:HTML et de communiquer avec une couche de JavaScript Acrobat.

Cliquez ici pour voir la vidéo de présentation de l’application

Cliquez ici pour installer et tester l’application. Vous devez installer au moins l’Adobe Reader 8.1.

Cliquez ici pour parcourir les sources du projet (Flex builder 3).

Source : Blog de Michael

Prenons un exemple : Imaginons qu’un Web service nous renvoie une liste d’utilisateur et qu’on veuille récupérer cette liste dans une classe nommée “UserArray” qui est en fait un tableau d’objets de type “User”. Il nous suffira de déclarer l’association avant l’appel du Web service en faisant :

SchemaTypeRegistry.getInstance().registerClass(new QName(”http://www.flex-info.fr/”, “userArray”), UserArray);
SchemaTypeRegistry.getInstance().registerClass(new QName(”http://www.flex-info.fr/”, “user”), User);

Le resultat retourné par le ResultEvent contient alors une classe UserArray contenant des classes User.

L’image ci-dessous illustre le procédé :

Comme le souligne Matsiya, dommage qu’il n’y ait pas plus de communication sur cet aspect du mapping des données entre des Web service SOAP et Flex (Flex 3 uniquement !). En espérant que ce post y participe…

Mise à jour : Afin d’être plus complet, les classes objets en AS3 doivent être écrites avec au minimum leurs propriétés comme de simples objet et peuvent contenir des fonctions propres au objets. Exemple de la classe User :

package {
public class User
{
public var IDUSER:Number;
public var login:String;
public var mail:String;
public var name:String;
public var password:String;
}
}

La classe UserArray dans l’exemple est en fait une extension de la classe ArrayCollection, mais n’est pas nécessaire si un simple ArrayCollection est suffisant.

A quand un système de mapping et de synchronisation des classes Java, PHP ou autre vers des classes AS3 ?? Il ne manque plus que ça… non ?

Ajout : il semblerait que le mapping ne fonctionne pas bien avec des Web services de type “document/litteral” générés par Axis 1. Le passage en “RPC/encoded” résout le problème…

Le petit exemple ci-dessous permettra surement d’y voir un peu plus clair…

- création du tooltip avec un skin personnalisé
- ajustement du tooltip en hauteur comme en largeur (9-scale)
- positionnement global du tooltip

Les sources ici

Tout d’abord vous pouvez télécharger ici BlazeDS. Notez que les sources sont aussi disponibles

Configuration serveur

1 - Dans votre répertoire Blazeds, ouvrez le fichier WEB-INF/flex/messaging-config.xml dans un éditeur de texte. Si vous utilisez BlazeDS avec le serveur Tomcat intégré, l’application Web BlazeDS est situé ici : “install_dir/tomcat/webapps”. Le fichier messaging-config.xml contient les paramètres de configuration pour le Messaging Service. Si vous ouvrez le fichier services-config.xml du même répertoire, vous verrez que le fichier “messaging-config.xml” est inclue par référence dans ce fichier. Le fichier “services-config.xml” permet une configurationhaut niveau de BlazeDS. Généralement, on référence dans ce fichier des fichiers de configuration pour définir des services spécifiques, comme le messaging. On défini aussi des paramètres systèmes comme les “messaging channels” et les contraintes de sécurité dans ce fichier.

2 - Dans le fichier messaging-config.xml, juste avant l’élément </service>, ajoutez l’élément suivant et sauvegardez le fichier :

<destination id=”chat”/>

3 - La destination sur le serveur définie l’endroit où les clients Flex vont être publiés et quels clients Flex vont pouvoir recevoir les messages ayant été publiés. Notez qu’il y a un channel par défaut nommé my-polling-amf configuré dans le fichier messaging-config.xml. BlazeDS utilise les “channels” pour envoyer et recevoir les données entre les clients Flex et le serveur. Le channel par défaut est défini dans le fichier services-config.xml et il est seulement référencé dans le fichier messaging-config.xml. Ce channel particulier utilise le Action Message Format (AMF) and sonde le serveur pour obtenir les nouveaux messages qui arrivent à destination. En plus de channels de “sondage”, BlazeDS fourni aussi des channels qui maintiennent la connexion entre les clients et le serveur et permet de diffuser des flux de données (streaming) entre eux.

4 - Démarrez ou re-démarrez vos application serveur BlaseDS.

Développement du côté Client en Flex

1 - Dans le Flex Builder 3, créer un nouveau projet BlazeDS comme décrit ici : http://learn.adobe.com/…

2 -Nommez ce projet chat1.

3 - Dans le fichier chat1.mxml que le Flex Builder a créé, vous allez créer l’application cliente en Flex qui pourra publier des messages vers le chat de destination et aussi recevoir les messages provenant de la destination.

4 - Juste avant l’élément <mx:Application> dans le fichier chat1.mxml, ajoutez un élément <mx:Script> vide. Vous pouvez faire cela en copiant le code suivant :

<mx:Script>

<![CDATA[

]]>

</mx:Script>

5 - Juste avant l’élément </mx:Script>, ajoutez le code MXML suivant. Ce code créé un Producteur de message et un Client. Le Producteur envoie les messages vers la destination et le client souscrit et reçoit les messages qui sont envoyés à la destination. Dans cette application, on créé les objets Producteur et un Client en MXML, mais comme la plupart des objets Flex, vous pouvez éventuellement les créer en ActionScript.

<mx:Consumer id=”consumer” destination=”chat” message=”messageHandler(event.message)”/>
<mx:Producer id=”producer” destination=”chat”/>

6 - Juste en dessous de l’élément <mx:Consumer>, ajoutez le code MXML suivant. Ce code créé l’interface utilisateur pour saisir les messages, les envoyer, et voir les messages reçus. Le Panel organise les objets enfants qu’il contient. La ControlBar est aussi utilisé pour la disposition. La TextArea sert à afficher les messages reçus dans la destination. Le contrôle TextInput permet de saisir les messages. Vous utilisez ensuite le contrôle Button pour envoyer les messages vers la destination.

<mx:Panel title=”Chat” width=”100%” height=”100%”>
<mx:TextArea id=”log” width=”100%” height=”100%”/>
<mx:ControlBar>
<mx:TextInput id=”msg” width=”100%” enter=”send()”/>
<mx:Button label=”Send B” click=”send()”/>
</mx:ControlBar>
</mx:Panel>

7 - Copier ensuite le code ActionScript suivant sous la section CDATA de l’élément <mx:Script> :

import mx.messaging.messages.AsyncMessage;
import mx.messaging.messages.IMessage;

private function send():void{
var message:IMessage = new AsyncMessage();
message.body.chatMessage = msg.text;
producer.send(message);
msg.text = “”;

private function messageHandler(message:IMessage):void{
log.text += message.body.chatMessage + “n”;
}

Ce code permet de :

• Importer la classe AsyncMessage et l’interface IMessage, qui sont utilisé dans la méthode send().
• Créer la méthode send() qui est appellée lors du clic sur le contrôle Button. Ce méthode créée un nouveau AsyncMessage et lui assigne une variable message qui est du type IMessage . Cela défini la valeur de la propriété message.body.chatMessage avec la valeur de msg.text - le texte du contrôle TextInput. Cela appelle ensuite la méthode send() du Producteur pour envoyer le message, et vider la propriété Text du contrôle TextInput.
• Créé la méthode pour récupérer l’évènement messageHandler(). Cette méthode récupère l’évènement “message” quand l’objet Client reçoit le message de la destination. Cette méthode affiche le texte de message.body.chatMessage dans la propriété log.text - du contrôle TextArea.
• Note: Parce que la méthode send() prend un IMessage comme argument dans cet exemple nous allons explicitement typer AsyncMessage vers l’interface IMessage qui est implémentée. Si vous ne voulez pas faire cela, appelez producer.send() avec un AsyncMessage, la conversion s’effectuera automatiquement.

8 - Ajoutez les attributs MXML suivants à l’élément <mx:Application> pour que le Client Flex souscrive à la destination lors du démarrage de l’application :

creationComplete=”consumer.subscribe()”

9 - L’élément mx:Application devrait maintenant ressembler à cela :

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
creationComplete=”consumer.subscribe()”>

Le code MXML est maintenant terminé !

10 - Assurez-vous que le serveur BlazeDS est en marche.
11 - Compilez et lancez l’application client avec le Flex Builder en faisant “Run > Run” dans la barre de menu.
12 - Ouvrez la même URL dans un second navigateur.
13 - Entrez un message dans une des deux fenêtres et il devrait apparaître dans l’autre fenêtre.

Et voilà pour notre première application Adobe Flex utilisant BlazeDS !

Bientôt je mettrais un nouveau tuto en ligne pour vous montrer comment générer des web services avec BlazeDS…

Source : Adobe Learn

RicoOnFlex a développé un clone de Tetris en AS3. C’est un jeu complet fait avec 600 de lignes de code AS3. Il utilise principalement 2 tableaux dimensionnels pour représenter les masques pour les briques et pour permettre une détection des collisions simplifié. Le rendu est simplement des données bitmap remplies avec des “shape object”.

On pourrait ajouter un peu de son, des graphiques plus beaux et une soumission des meilleurs scores et cela pourrait devenir un jeu online vraiment sympa.

Le jeu s’appelle TINT pour Tint Is Not Tetris.

Jouer à TINT

Voir le Code Source

Source : RicoOnFlex 

Exemple disponible ici avec les sources. Les explications se trouvent dans la suite de l’article…Je me suis inspiré de ce tutoriel sur la création d’une scène générique et sur son initialisation pour créer une nouvelle classe PV3DScene.

J’ai ajouté principalement 4 choses :

• L’extension de la classe Canvas plutot que Sprite dans les projets AS3
• La possibilité de ne pas calculer le rendu à chaque frame avec la variable needRender et l’ajout d’une méthode invalidateScene (qui permet d’économiser pas mal de CPU dans le cas d’une scène statique !)
• Le redimensionnement de la scène en fonction de la taille du canvas
• La création des objets dans la scène au moyen de méthode comme add3DObject et remove3DObject et l’ajout d’un Array childrenObjects

J’ai ensuite créer une classe PV3DObject qui permet de gèrer l’interactivité des modèles importés type Collada entre autres.Le résultat c’est la possibilité de définir des objets 3D de cette manière :

public class FxCube extends PV3DObject{
public var faceWidth:Number = 500;
public var quality:Number = 20;

public function FxCube() {
super();
}

override protected function createChildren():void {
var ml:MaterialsList = new MaterialsList;
var mat:BitmapFileMaterial = new BitmapFileMaterial(’fx.jpg’);
ml.addMaterial(mat,’all’);
addChild(new Cube(ml,faceWidth,faceWidth,faceWidth,quality));}
}

Et leurs ajouts dans le composant 3D au sein d’un composant MXML de cette manière :

<mx:Panel>
<pv3d:PV3DScene id=”scene3D” width=”90%” height=”90%”>
<pv3d:childrenObjects>
<objects:FxCube faceWidth=”400″ id=”cube” />
</pv3d:childrenObjects>
</pv3d:PV3DScene>
</mx:Panel>

Les sources complètes du projet (incluant papervision3D) sont disponibles ici. A savoir qu’il est nécessaire pour la compilation de disposer des sources de Papervision.

Cette opération est décrite dans ce tutoriel, mais afin de vous simplifier la tâche, j’ai inclut dans le projet une copie de ces sources et il est juste nécessaire d’ajouter ces sources dans le Source Path du projet en faisant : Menu Project > Properties > Flex Build Path > Onglet Source Path > Add Folder… et sélectionner le dossier nommé PV3D_GreatWhite_rev428.

Un deuxième exemple sur l’utilisation d’objet au format Collada est en préparation. On verra comment ajouter un objet issu de 3DSMax dans papervision et comment interagir à la souris avec lui.