Blog de Fennecos

Flex-iframe, SWFObject et IE!!!

Fennecös — Fri, 21 May 2010 08:46:24 +0000

Pour plusieurs raisons, j'ai dû ajouter une iframe par dessus mon application Flex, j'ai donc utiliser Flex-iframe (dont j'ai déjà parlé dans un ancien billet).

Cette bibliothèque fonctionne très bien, mais j'ai remarqué que les iframes ne se plaçaient pas comme il fallait dans Internet Explorer!!
En effet, l'iframe prends bien les positions dans flash, mais n'y ajoute pas la position du swf dans la page!

J'ai donc regardé de plus près la fonction FUNCTION_MOVEIFRAME dans IFrameExternalCalls.as

Pour placé l'iframe, la classe utilise l'attribut javascript offsetLeft et offsetTop du swfObject.

"frameRef.style.left = x + swfObject.offsetLeft + 'px'; " + 

 "frameRef.style.top = x + swfObject.offsetTop + 'px'; " +

J'ai donc testé cet attribut sous IE7 et 8 et sous Firefox, Firefox me renvoie tout le temps la bonne valeur alors que IE 0 px...

IE prends en fait la position de l'élément mais en relatif.

Voici donc la solution que j'ai trouvé pour remédier à ce problème :

Dans IFrameExternalCalls.as ajouter le code suivant :

/**

* The name of the JavaScript function that find the position of the swf.

*/
publicstaticvar FUNCTION_FINDXY:String = "FindXY";
/**

* The JavaScript code to call to insert the function that find the position of the swf.

*/

public static var INSERT_FUNCTION_FINDXY:String = 

    "document.insertScript = function () " +

    "{ " +

        "if (document." + FUNCTION_FINDXY + "==null) " +

        "{ " +

            FUNCTION_FINDXY + " = function(obj) " + 

            "{" +

                "var x=0,y=0;" +

                            "while (obj!=null){" +

                                "x+=obj.offsetLeft-obj.scrollLeft;" +

                                "y+=obj.offsetTop-obj.scrollTop;" +

                                "obj=obj.offsetParent;" +

                            "}" +

                            "return {x:x,y:y};" +

            "}" +

        "}" +

    "}";

Nous allons changer lignes qui posent problème dans INSERT_FUNCTION_MOVEIFRAME, ce qui donne :

public static var INSERT_FUNCTION_MOVEIFRAME:String = 

    "document.insertScript = function () " +

    "{ " +

        "if (document." + FUNCTION_MOVEIFRAME + "==null) " +

        "{ " +

            FUNCTION_MOVEIFRAME + " = function(frameID,iframeID,x,y,w,h,objectID) " + 

            "{" +

                "var frameRef = document.getElementById(frameID); " +

                "var swfObject = document.getElementById(objectID); " +

                "frameRef.style.left = x + FindXY(swfObject).x + 'px'; " + //ligne qui a été modifiée

                "frameRef.style.top = y + FindXY(swfObject).y + 'px'; " + //ligne qui a été modifiée

                "frameRef.style.width = w + 'px'; " +

                "frameRef.style.height = h + 'px'; " +

                "frameRef.style.overflow ='hidden';" +

                "var iFrameRef = document.getElementById(iframeID); " +

                "iFrameRef.width = w;" +

                "iFrameRef.height = h;" +

            "}" +

        "}" +

    "}";

puis dans IFrame.as dans la fonction setupExternalInterface() ajouter la fonction :

ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_CREATEIFRAME);

ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_FINDXY); //fonction à ajouter!

ExternalInterface.call(IFrameExternalCalls.INSERT_FUNCTION_MOVEIFRAME);

Et maintenant l'iframe se place bien pour tous les navigateurs! =)

FileStream readBytes et offset

Fennecös — Wed, 12 May 2010 12:40:35 +0000

J'avais besoin de lire les derniers octets d'un fichier en Air. Je me suis donc servi de la fonction readBytes de la classe FileStream. En regardant la signature de la fonction readBytes readBytes(bytes:ByteArray, offset:uint = 0, length:uint = 0):void je me suis arrêté sur le paramètre offset.

La doc disait donc : "offset : The offset into the bytes parameter at which data read should begin."

J'ai donc appelé la fonction readBytes avec un offset pour pointer vers un point précis du fichier.

Cependant, mon ByteArray était de la taille du fichier! En faisant quelques tests je me suis rendu compte que la taille de mon ByteArray était la somme du paramètre offset et length
Je me suis donc rendu compte que ce paramètre offset de la readBytes n'était pas l'offset dans le fichier mais l'index à laquel le ByteArray commence à écrire!

La bonne méthode pour lire un des octets précis d'un FileStream et de placer l'attribut position du FileStream et de faire un readBytes (mais avec un offset de 0 ;^) )

Air Amazon’s S3 et metadata

Fennecös — Tue, 04 May 2010 11:28:13 +0000

Amazon S3 est une solution d'hébergements offert par Amazon que j'utilise pour un logiciel devant sauvegarder des medias en ligne.

Pour ce faire, j'utilise donc la bibliothèque as3awss3lib de google permettant d'uploader et de downloader mes fichiers très simplement sur mon espace S3.

Très rapidement, j'ai donc eu besoin de comparer les fichiers locaux et les fichiers en ligne afin de vérifier leurs intégrités. Je ne pouvais pas simplement comparer leurs dates de modifications car les fichiers présents sur le serveur ont comme date de modification la date d'upload bien sûr.

La solution a donc été d'enregistrer cette information dans les metadatas du fichier sur S3.

En effet Amazon S3 offre la possibilité d'héberger un fichier jusqu'à 5Go accompagné de 2 ko de metadatas.

Pour ce faire j'ai donc dû modifier as3awss3lib en offrant la possibilité d'enregistrer la date de modification du fichier local dans les metas.

Voici donc la fonction pour retrouver le metadata "last-modifed" d'un fichiers donner dans le fichier AWSS3.as

public function getObjectProperties(bucketName:String, objectName:String):void

{

        var stream:URLStream = getURLStream();

        var contentType:String;

        stream.addEventListener(HTTPStatusEvent.HTTP_RESPONSE_STATUS,

                function(e:HTTPStatusEvent):void

                {

                        //on ferme le stream car utilisation de GET au lieu de HEAD...

                        stream.close();

                        var obj:S3MetaObject = new S3MetaObject();//S3MetaObject étant une simple classe contenant un attribut name et lastModified...

                        obj.name = objectName;

                        trace("HTTP_RESPONSE_STATUS", objectName);

                        for each (var h:URLRequestHeader in e.responseHeaders)

                        {

                                // Can get other headers like ETag and Content-Length to add to the S3Object...

                                if (h.name.toLocaleLowerCase() == "x-amz-meta-last-modifed"){

                                        obj.lastModified = DateUtil.parseW3CDTF(h.value);

                                        break;

                                }

                        }

                        if(!obj.lastModified)

                                obj.lastModified = new Date(1900);

                        var aee:AWSS3Event;

                        aee = new AWSS3Event(AWSS3Event.OBJECT_METADATA);//En ayant au préalable ajouter le type d'évenement OBJECT_METADATA dans AWSS3Event

                        aee.data = obj;

                        dispatchEvent(aee);

                });

        //Air ne semble pas autoriser les requêtes HEAD... (seulement dans la version compilé)

        var req:URLRequest = getURLRequest("GET", "/" + escape(bucketName) + "/" + escape(escape(objectName)));

        //var req:URLRequest = getURLRequest("HEAD", "/" + escape(bucketName) + "/" + escape(objectName));

        stream.load(req);                       

}

Et voici comment enregistrer ce metadata au moment de l'upload du fichier!

- Il faut ajouter le paramètre "lastmodif:Date = null" fans la fonction getURLRequest
- toujours dans la fonction getURLRequest ajouter les lignes suivante avant le return :

if(lastmodif){

        var dateString2:String = DateUtil.toW3CDTF(lastmodif); 

        var metaHeader:URLRequestHeader = new URLRequestHeader("x-amz-meta-last-modifed",dateString2);

        req.requestHeaders.push(metaHeader);

}//end SBNOTE

-enfin ajouter le metadata dans l'authentification de la requête dans la fonction getAuthenticationString en ayant ajouter le paramètre "lastmodif:Date = null"

//code juste après "toSign += dateString + "\n";"

if(lastmodif)

{

        var dateString2:String = DateUtil.toW3CDTF(lastmodif); 

        toSign += "x-amz-meta-last-modifed:"+dateString2 + "\n";

}

Et voilà! maintenant il est possible d'enregistrer un metadata et de le retrouver pour faire la comparaison.

Pour une meilleur comparaison il est bien sur aussi possible d'enregistrer le checksum du fichier et de le mettre à la place de "last-modified"

=^)

API Dailymotion AS3

Fennecös — Tue, 13 Apr 2010 13:14:31 +0000

Il y a quelques semaines ou je présentais une technique pour inclure une vidéo Dailymotion dans Flex avec la bibliothèque de google flexiframe.

Il n'y a plus a utiliser cette méthode car Dailymotion vient de mettre à jour son API en AS3!

A noté que les fonctions et événements ont les même noms que ceux de l'API Youtube. Ce qui simplifie largement les chose!

Integration video Dailymotion dans Flex

Fennecös — Wed, 24 Mar 2010 09:02:41 +0000

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.

Le truc est donc d'utiliser cette petite bibliothèque de google, flex-iframe, qui permet de créer une iframe via du code javascript exécuté depuis flex.

voilà donc un code tout simple pour intégrer une vidéo dailymotion dans son application Flex :

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                xmlns:flexiframe="com.google.code.flexiframe.*"

                                layout="absolute">
                <flexiframe:IFrame id="googleIFrame" width="800" height="600"

                                source="http://www.dailymotion.com/swf/video/VIDEO_ID"/>        

mx:Application>

Il est à noter que ça ne fonctionne pas en plein écran, l'iframe se retrouvant derrière...

J'espère cependant que Dailymotion aura bientot une api as3 après la sortie de son nouveau player...

Ajout de sous-titres sur Video

Fennecös — Thu, 11 Mar 2010 09:38:23 +0000

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

//sous-titre à la 12ème seconde
vartime:Number = 12;
//ayant pour nom subtitle01
varname:String = subtitle01;
//Texte du sous-titre
var texte:String = "Voici un exemple de sous-titre";
//on assigne un nouveau CuePoint à notre FLV

CuePointManager(video.cuePointManager).addCuePoint({name:name, time:time});
//Et enfin on rentre le texte dans un tableau associatif                              

_subs[name] = texte;

On ajoute ensuite un texte qui se placera en bas du vidéo display, ainsi qu'un écouteur sur le cuePoint

 >

         id="video" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="onCuePoint(event)"/>
         id="sub" width="100%" bottom="0"

                paddingLeft="20" paddingRight="20"

                fontWeight="bold" fontFamily="Arial"

                textAlign="center" color="#fFFF00" fontSize="12"

                selectable="false">

                >

                         id="shadowFilter"

                                        angle="45"

                                        blurX="2" blurY="2"

                                        distance="1" alpha="1"

                                        quality="1" strength="6"

                                        color="#000000" knockout="false"/>

                >

        >

>

Et au final on renseigne le champs texte par le sous-titre correspondant dans l'écouteur onCuePoint

private function onCuePoint(e:CuePointEvent):void

{

        sub.text = _subs[e.cuePointName];

}

Et c'est tout! =^)

contentPane de Container et MouseEvent

Fennecös — Tue, 09 Mar 2010 07:28:56 +0000

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.

La seul solution que j'ai trouvé à été de monkeyPatché la classe Container
Et voilà ce que j'ai rajouté a la fin de la fonction createContentPane():void :

contentPane.mouseEnabled = false;

Je ne sais pas si c'est la meilleure solution mais en tout cas ça marche! =^)

Je ne sais pas pourquoi j'ai eu ce bug, mais surement parce que j'utilisais l'attribut clipContent à true...

Le Challenge, le proces du petrole en Amazonie

Fennecös — Mon, 08 Mar 2010 09:40:30 +0000

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.

SpaceBar, Button & focus!

Fennecös — Mon, 08 Mar 2010 09:32:47 +0000

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 :

privatefunction keyPressHandler(e:KeyboardEvent ):void
{
        // if the spaceBar est appuyé on déclenche le bouton play/pause

        if( e.keyCode == 32 )

        {

                 if( this.focusManager.getFocus() != Pause_btn ) {

                        this.focusManager.setFocus( Pause_btn );
                onClickPause();

        } 

}

Bug FullScreen et SpaceBar

Fennecös — Mon, 08 Mar 2010 08:05:39 +0000

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.

La solution que j'ai trouvé (peut être pas la meilleure...) est donc de désactiver le clavier au moment de la mise en plein écrant, puis de le réactiver après un Timer.

private var _timerFullScreen:Timer = new Timer(100,1);

puis dans la fonction de passage en fullsreen :

stage.removeEventListener( KeyboardEvent.KEY_DOWN, keyPressHandler );

stage.displayState = StageDisplayState.FULL_SCREEN;

//timer pour éviter bug sous firefox (fullscreen qui déclenche un événement spacebar...)

timerFullScreen.addEventListener(TimerEvent.TIMER_COMPLETE, onFullScreen);

timerFullScreen.start();

Et enfin la fonction onFullscreen :

private function onFullScreen(e:Event):void

{

        timerFullScreen.stop();

        timerFullScreen.removeEventListener(TimerEvent.TIMER_COMPLETE, onFullScreen);

        stage.addEventListener( KeyboardEvent.KEY_DOWN, keyPressHandler );

}