Blog de Fennecos Un blog Flex!!

24mar/100

Integration video Dailymotion dans Flex

Voilà un petit moment que j'essayais d'insérer une vidéo dailymotion dans Flex!

Le problème étant que l'api dailymotion pour flash est codé en AS2, il donc est impossible de mettre une vidéo dans son application Flex comme on peut très simplement le faire avec l'api youtube...

Il y a tout de même une solution! Pas très élégante, mais qui fonctionne!
La solution est créer une iframe au beau milieu de l'application et de la faire pointer vers la vidéo dailymotion.

11mar/101

Ajout de sous-titres sur Video

Voilà comment ajouter simplement dans Flex des sous titres à un VideoDisplay grâce à la classe CuePointManager.

Nous avons donc au départ un vidéo display ayant pour id "video"

<mx :VideoDisplay id="video" />

Il nous faut ensuite un tableau associatif dans lequel il y aura tous les sous-titres

private var _subs:Array/*de sous-titres*/ = new Array();

On utilise maintenant la classe CuePointManager pour ajouter des cuepoints à notre VideoDisplay

9mar/100

contentPane de Container et MouseEvent

Voilà un autre problème bien étrange que j'ai rencontré.

J'ai donc un Canvas dans lequel j'ai de nombreux composants cliquables.
Sous ce Canvas j'ai d'autre boutons... Mon souhait est donc qu'aux endroits ou il n'y a pas de composant cliquable sur le canvas, les boutons en dessous le soient! Mais pour une raison inconnue ce n'était pas la cas...
Ma première idée a donc été de mettre mouseEnabled = false sur le Canvas comme je le fais d'habitude.

Mais là, en affichant l'objet qui dispatchait l'événement souris, je me suis rendu compte que c'était en fait le contentPane du Canvas qui était à l'origine du MouseEvent... Le contentPane étant un conteneur supplémentaire de la classe Container où les objets sont réellement placés. En effet, l'osque l'on appelle la methode addChild d'un Container, l'enfant est placé dans le contentPane et non dans le Container lui-même.

8mar/100

Le Challenge, le proces du petrole en Amazonie

Je présente Le Challenge, le procès du pétrole en Amazonie diffusé sur le site de canal+.

C'est un web-documentaire de Honkytonk Films (où je suis développeur Flex) sur l'exploitation du pétrole en Amazonie pour faire le lien avec la diffusion à l'antenne, le 3 mars, d'un documentaire "Une idée simple et révolutionnaire" sur une proposition originale de l'Equateur.

Pendant 30 ans, la compagnie pétrolière Texaco, devenue par la suite Chevron, a exploité la région de Lago Agrio sans respecter l'environnement, y déversant l'équivalent de 30 fois la cargaison de l'Exxon-Valdez.

Sur ce projet j'ai donc était en charge de l'amélioration du player, faisant suite à celui de "L'obésité est-elle une fatalité" diffusé sur curiosphère, mais aussi du logiciel Klynt qui est l'éditeur du webdoc.

8mar/100

SpaceBar, Button & focus!

Suite a mon précédent post sur le mise en pause avec le la touche espace voici une petite astuce...

Par défaut, lorsque l'on appuie sur la touche espace dans une application, flex déclenche le dernier bouton sur lequel l'on à appuyer car le focus est dessus.
Mais dans mon application, je veux que la vidéo se mette en pause et c'est tout! et qu'il ne déclenche pas un autre bouton.

Donc voici la solution, il suffit juste de remettre le focus sur le bouton pause dans la fonction de gestion de clavier :

8mar/101

Bug FullScreen et SpaceBar

J'ai récemment rencontré un bug étrange dans un player vidéo en Flex.

Dans cette application, l'utilisateur avait la possibilité de mettre en pause et reprendre la vidéo en appuyant sur la touche espace (spacebar). L'utilisateur avait aussi la possibilité de mettre l'application en plein écran (fullscreen) via un bouton prévu à cet effet.

Cependant, à chaque fois que l'on mettait l'application en plein écran, la vidéo se mettait en pause!

Après plusieurs essais, je me suis rendu compte que la mise en plein écran déclenchait un évenement clavier sur la touche espace.

7mar/100

Réduire une image en AS

Façon simple de réduire une image en AS afin de l''enregistrer dans sa nouvelle taille :

/*On a un Bitmap bmp de départ que l''on veut réduire*/
//On crée un nouveau BitmapData de la nouvelle taille
var bmpData:BitmapData = new BitmapData(targetWidth, targetHeight);
//On crée une matrice de transformation
var mat:Matrix = new Matrix (targetHeight/bmp.height, 0, 0, targetWidth/bmp.width, 0,0);

//enfin on déssine dans le BitmapData!        
bmpData.draw(bmp,mat);

Et si on veut passer l''image en jpg afin de l''enregistrer

var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(bmpData);
Remplis sous: AS3, Image Aucun commentaire
7mar/100

Drag&Drop de fichier dans Air

Voici comment faire simplement un drag&drop de fichier dans une application air :

Tout d''abord il faut ajouter les écouteur dragEnter et dragDrop

component.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
component.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

Ensuite les fonctions onDragEnter et onDragDrop

private function onDragEnter(e:NativeDragEvent):void
{
        //On vérifie qu''il y a bien des fichiers
        if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT))
        {
                //On récupère le tableau de fichier
                var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
               
                //On regarde si tous les fichiers on bien la bonne extension (ici jpg)
                var dragable:Boolean = true;
                for each(var file:File in files)
                {
                        if(file.extension != "jpg")
                                dragable = false;
                }
       
                //On accepte le drop
                if(dragable)
                        DragManager.acceptDragDrop(mediatheque);
       
        }
}
       
private function onDragDrop(e:NativeDragEvent):void
{
        //On récupère le tableau de fichier
        var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
       
        var f:File;
        //On crée un FileStream pour travailler sur les fichiers
        var fs:FileStream;

        //Pour chaque fichiers dans le tableau
        for each(f in arr)
        {
                //On ouvre le fichier
                fs.open(f, FileMode.READ);
                /* Opérations sur le fichier */
                fs.close();
        }
}

Et voilà =)

4mar/100

Optimisation du contenu du player Flash

Thibault Imbert vient juste de finir d'écrire un livre sur l’optimisation du contenu mobile pour Flash/Flex/Air.

Ce livre est disponible en anglais ici : Optimizing Mobile Content for the Adobe Flash Platform
Il nous apprend comment optimiser au mieux l'utilisation de la mémoire dans le player Flash grâce a plusieurs astuces faciles à implémenter! ce qui est bien sûr aussi valable pour des applications web.

Je vais donc dès à présent prendre note de toutes ces informations et les utiliser pour mes prochains projets! =^)

4mar/100

TextArea two-way databinding et CDATA

Lorsque l'on bind une propriété a un TextArea ou un TextInput, le databinding ne se fait que dans un seul sens, c'est à dire

<mx :TextInput text="{source}" />

Lorsque source change, le TextInput est automatiquement mis à jour, cependant, lorsque l'on écrit dans le textInput "source" n'est pas modifié.

L'une des solutions décrite dans ce blog est :

<mx :TextInput id="example" text="{source}" valueCommit="{source = example.text;}" />
//Ou pour chaque lettre entrée
<mx :TextInput id="example" text="{source}" change="{source = example.text;}" />

Mais un problème auquel j'ai était confronté est de binder le contenu d'un noeud XML contenant des balises CDATA afin de garder la mise en page.