La digitale, Développement multimédia

Canvas HTML5 : EaselJs en Haxe pour Javasript avec EaselHx

Julien Beaufils — Thu, 10 Feb 2011 00:16:09 +0100

EaselJs

EaselJs est une librairie créée par grant skinner.
Sa principale fonction est de simplifier la gestion de la liste d'affichage, les interactions et les animations simples dans un canvas HTML.
Cette lib déclare des objets bien définis qui seront familliés à certains comme le montre la doc Elle reste cependant relativement fine.
Le petit outil associé zoë permet (en gros) de convertir des anim flash en objets BitmapSequence d'easelJs.

EaselHx

EaselHx est un dépot git des classes "externs" Haxe permettant d'utiliser EaselJs avec ce language. Ce dépot ne supporte cependant que EaselJs 2.1 alors que la v 3.0 vient de sortir. Cependant le "forker" et ajouter les quelques fonctionnalités manquantes ne doit pas prendre longtemps.
Le fait d'utiliser ce dépot avec EaselJs apporte les avantages supplémentaires suivants :

environnement résolument orienté objet relativement propre et évolutif.
typage stricte avec les vérifications d'incohérences associées à la compilation
auto-complétion dans les IDE permettant de coder en Haxe comme FlashDevelop

Exemple

Pour note et tests personnels j'ai fait un petit exemple absolument pas fonctionnel (un pseudo-carousel).
Bien que la version montrée ici utilise la version 2.1 d'EaselJs et que la lib ait déjà évoluée et gagné en performance, l'exemple interactif au survol de la souris donne une idée des possibilités, .
Il montre aussi comment retailler à la volée des images trop grandes avant de les montrer dans un contexte animé.

Remarque : Les images ne sont pas incluses avec les sources, (voir dans la classe "Carousel" pour la nomenclature de nommage)

Sources avec projet FlashDevelop
Exemple en ligne > Passer la souris au dessus du carousel pour l'animer

CS SDK sous flashdevelop en AS3 pure

Julien Beaufils — Wed, 26 Jan 2011 22:17:09 +0100

CS SDK, Q'uest-ce que c'est :

En 2010, Adobe a sorti une version reforgée du CS SDK .
Comme son nom l'indique c'est le kit de développent logiciel de la "creative suite 5".
Il offre un accès profond aux API de la plupart des logiciels CS5 via le language Actionscript 3 en utilisant également le runtime AIR.
On peut ainsi imaginer et développer toute sorte de plugin de la boite de dialogue au tooltip en passant par les panneaux.

Malheureusement :

le guide du CS SDK explique le fonctionnement avec FlashBuilder4 pour un projet de type MXML uniquement.
le SDK doit utiliser une version modifiée du SDK Flex antérieure à spark :
Si je pense pouvoir réellement apprécier les composant spark, je sais que ne supporte pas ceux de l'espace de nom mx. En générale l'AS3 me semble suffisant.

J'ai donc voulu voir si l'on pouvait faire fonctionner ce SDK avec Flashdevelop et ai noté la démarche sur windows 7.

Configuration préalable :

La doc indique qu'il faut faire quelques configs sur son ordi. Elles sont décrites pour les différents windows et mac dans la partie "Running and debugging your extension" du guide du CS SDK

Il faut donc :

ouvrir l'éditeur de registre de windows ([touche windows]+R, taper regedit et valider) pour y sélectionner le dossier "CSXS2Preferences" et y ajouter un valeur chaine nommée "PlayerDebugMode" avec pour valeur 1.
ajouter un fichier vide nommé "debug" dans le dossier de l'appli Photoshop dans le cas ou l'on veut faire un plugin pour ce logiciel. (Pour les autres logiciels ce n'est pas nécessaire).
créer un dossier au nom du projet à débugger dans C:\Users\<user>\AppData\Roaming\Adobe\CS4ServiceManager\extensions\ et y copier le dossier 'CSXS' présent dans le sample "HelloCreativeSuite"
ouvrir le fichier manifest.xml présent dans 'CSXS',
- retirer le noeud "ScriptPath" (inutile ici),
- renseigner l'attribut ExtensionBundleId avec un namespace unique pour le plugin (par ex : com.laDigitale.myPlugin)
- renseigner les deux attributs 'id' du champ extension avec le même namespace inspiré du bundleId ( par ex :com.laDigitale.myPlugin.myExtention1 )
- dans le noeud "Lifecycle" ajouter :
```
<StartOn>
    <Event>applicationActivate</Event>
</StartOn>
```
Il faut bien sur également télécharger le CS SDK (lien au pied de la licence.) et le poser dans un endroit cohérent pour y faire référence plus tard.

Configuration de FlashDevelop :

Lancer la dernière release de Flashdevelop (3.3.2 pour cet article)

Sélectionner project>newProject et créer un projet AS3 de type "AIR AS3 Projector"
aller dans project>properties
- dans l'onglet "output" champ "output file", rechecher le dossier dans lequel a été mis le dossier CSXS et nommer le fichier de sortie dans ce dossier "Main.swf" (en cohérence avec le contenu du fichier "manifest.xml")
- dans l'onglet "classpath" cliquer sur "add classpath" et rechercher le dossier contenant la CS SDK téléchargée précédemment pour y sélectionner le sous-dossier CreativeSuiteSDK/libs
- dans l'onglet "compiler options" champs "custom path to Flex SDK" rechercher à nouveau le dossier contenant le CS SDK pour y sélectionner le dossier "CreativeSuiteSDK/CS Flex SDK 3.4.0"
- cliquer sur ok pour valider
dans le pannneau "project" une série de lib doit avoir apparue dans un petit dossier ressemblant à un légo et nommé "libs"
- faire un clic-droit sur "apedelta.swc" et sélectionner "add to library"
- faire un deuxième clique droit et cliquer sur "options" pour passer cette lib en mode "external"
- ajouter également "csawlib.swc" et toute autre lib qui peut être nécessaire (ex : csaw_photoshop.swc pour utiliser les API's de Photoshop) mais en gardant les options par défaut ( inclusion des classes référencées dans le code )

Ecrire un peu de code dans le fichier "Main.as" du projet

package 
{
    import flash.display.Sprite;
    import com.adobe.csawlib.photoshop.Photoshop;
    import com.adobe.photoshop.Application;
    
    /**
     * ...
     * @author Julien BEAUFILS
     */
    public class Main extends Sprite 
    {
        
        public function Main():void 
        {
            //Pour voir si le panneau est affiché correctement
            graphics.beginFill(0x00ff00);
            graphics.drawRect(0, 0, 100, 100);
            graphics.endFill();

            //Récuperer l'app Photoshop et y ajouter un document
            var app:Application = Photoshop.app;
            app.documents.add();
        }
        
    }
    
}

Compiler avec F8 (pas ctrl+Enter)
dans le menu "debug" sélectionner "Start a remote session"
Lancer photoshop et observer le module se lancer immédiatement
fermer le panneau du module (pas Pquand les tests sont terminés
modifier et re-compiler
donner le focus à Photoshop
Le plug se relance en prenant en compte les modification apportées

Prêt à mélanger la plateforme Flash et les outils de la CS

Ce teste fonctionne sous Photoshop 32Bit mais il ne sera pas possible de débugger avec la version 64 bit : le débugger déclenchera systématiquement une exeption.
S'il n'est pas nécessaire de redémarrer Photoshop, des tests similaires avec Illustrator ont fon,ctionné à l'inverse. L'événement d'activation auuto ne sembe pas être reçu non plus par le panneau (tous les logiciels ne le reçoivent pas).

Pour le debugger par contre c'est très chouette :

les traces remontent bien dans la fenêtre output de Flashdevelop,
les Exceptions d'exécution s'affichent correctement :
- on peut cliquer sur les fonctions dans la pile associée à l'erreur,
- on est alors "envoyé" aux lignes de programme associées dans la sourcer.
- on y voit les valeurs courants des variables en passant à la souris au dessus de leur nom dans le code.
- on peut alors inspecter le contenu de ces variables de façon "récursive".

Pour le reste, il y a vraiment beaucoup à faire, je pense :

Automatisations de tout poil,
graphisme génératif,
liaisons entre logiciels (endo ou exo CS5),
utilisations de services web connus (traduction de texte, recherche spécialisée d'images en fonction de couleur : flick...) ou dédiés (process d'export et d'envoi de contenu à l'extérieur...).

AS3 : Tests unitaires Asynchrones

Julien Beaufils — Sun, 16 Jan 2011 17:14:14 +0100

Contexte

Hormis l'ajout API'S, le langage AS3 n'a pas beaucoup évolué depuis FP9.
je crois que j'ai eu assez le loisir de le triturer dans tout les sens, de faire et refaire un certain nombre d'erreurs.

J'ai notamment eu l'occasion :

d'user des design patterns (en particulier les pricipaux GOF) jusqu'au non sens.
de programmer à la mode événementielle et sur-dynamiquement jusqu'à l'indébuggabilité voir l'étouffement du programme
de me retrouver avec des memory leaks de trois mètre de long
de réécrire des centaines de fois (des milliers ?), la même chose façon anti-DRY
de faire de progs nécessitant des configs absolument phénoménales pour afficher 3 images
(CoC)
de coder complètement au feeling ne sachant pas ce que j'allais réaliser : la prog. en écriture automatique.

Ce genre d'erreur influence la manière que l'on a de programmer.
Parfois je tente de fixer le style courrant avec un petit framework utile pour un certain type de projet.
De temps en temps, en fonction du vent, de la mode et de ce que font les autres, ce framework reste, évolue, grossi, se dégraisse, ou disparait.

Après quelques essais je pense que les tests unitaires sont vraiment un très bon outils pour optimiser ce processus.
Je les ai longtemps laissés de coté pour ne pas m'encombrer de lignes de code "inutiles".
Après essais, je sais que ce n'est pas pour tout de suite en mode "production".
Cela change cependant réellement l'approche de la prog et m'est quand même utile dès a présent.

Première expérience pratique avec les tests unitaires

Coder les tests avant le programme lui même, logique non ?

C'est vraiment quelque chose de positif.
Cela force a réfléchir à ce que le programme doit faire avant de l'écrire.
J'ai quand même tendance à écrire au-moins un premier jet d' interface, ensuite j'écris la classe de test en essayant de viser les erreurs types qui peuvent être rencontrées (par exemple pour un "stepper" allant de 0 à n, se retrouver avec un compteur > n ou < 0; modifier la valeur de n et re-tester... )

Les tests dirigent le développement

C'est une phase créative qui donnes des idées :

Si je vois que ça ne colle pas avec la logique d'utilisation que l'écriture des tests fait ressortir, je modifie l'interface
Je lance les tests et je m'assure que tout plante comme prévu (sauf peut-être l'instanciation).
je prog. l'implémentation de la classe testée jusqu'à ce que l'ensemble des test soient "OK".
Le nombre d'erreurs se réduit progressivement.
Pendant ce temps il arrive que je m'aperçoive que je n'ai pas prévu un type d'erreur :
Ce n'est pas grave il faut coder un test permettant de le mettre en évidence et corriger le problème.

Meilleur qualité du code ?

Je ne dirais pas que faire des tests entraine forcément la création d'un code de bonne qualité :

Les tests unitaires ne garantissent pas la performance, ou la lisibilité du code.
il peuvent attirer l'oeil sur des problèmes de conception.
On peut obtenir une classe absolument robuste (dans le cas ou les utilisations sont élaborés finement et les erreurs possibles prévues)

Evolution

Une classe est soumise à différents types d'évolutions, en particulier :

la réutilisation dans un contexte a priori inattendu,
l'ajout de fonctionnalité(s)
la factorisation.

Dans le premier cas avec les tests, on se sent vite à l'aise : ça va marcher c'est sur.
Si une erreur apparaît, on réécris un test et corrige le problème lié au contexte qui si il réapparait sera immédiatement mis en évidence par les tests.
Dans les autres cas, les tests sont la pour alerter si quelque chose se décale au fur et à mesure de l'évolution de ce bloque de programme.

Attention :

Je le répète : les tests unitaires ne garantissent pas la performance, ou la lisibilité du code.
Ils sont eux-même susceptibles de contenir des erreurs.
Il appartient au développeur de distinguer TOUS les comportements attendus et inattendus
Le développement dirigé par les tests fait exploser le nombre de lignes à écrire : cela doit s'inscrire sur le long terme pour que ce soit intéressant, et il est parfois difficile de le savoir à l'avance.

Tests synchrones et asynchrones avec ASUNIT

J'ai choisi d'utiliser ASUNIT, qui fonctionne dans des contextes variés.
Le fonctionnement est assez simple il faut associer les sources (répetoire as3/src) au projet contenant les classes à tester.
En mode synchrone j'ai suivi cet exemple
En mode asynchrone on peut continuer d'étendre asunit.framework.TestCase
Lors du test et avant chaque appel à une méthode asynchrone il suffit de référencer le retour de la méthode addAsync() quelque part (c'est un fonction) : Le déroulement du test est bloqué tant que cette fonction n'est pas exécutée. On peut ainsi utiliser plusieurs fois addAsync() pour tester un cas d'utilisation complet nécessitant plusieurs appels asynchrones (ex : une pile de chargement )

Des exemples de tests : asunit-test.zip
L'archive contient une classe Stepper et le corps de base d'une pile de chargement (LoadingQueue) façon "interface" (ie : pas d'événementiel ni de callback hormis les événements natifs) codées avec cette méthode. j'ai notamment ajouté après coup l'aspect cyclique optionnel du Stepper. A ce moment c'est très sympa d'avoir de quoi tester. les "TestCase"'s la "TestSuite" et la classe principale de lancement des tests sont inclus.
Ce qui a été intéressant ici pour moi ce n'est pas les classes mais la démarche pour les créer.
Maintenant il me faut apprendre à écrire mieux les tests...

AS3 : Mon IPod est un touchpad pour PC

Julien Beaufils — Sat, 15 Jan 2011 16:40:07 +0100

En 2010 il y a eu quelques bonnes nouvelles pour la plateforme Flash :

la modification de la licence d'Apple qui permet l'utilisation du packager for IPhone
de nouveaux API AIR dans avec la possibilité de lancer des processus natifs, de créer des ServerSocket's, et de récuperer des informations sur le réseau
Flash Player 10.1 notamment les API P2P et le Multitouch

J'ai souhaité faire une petite app pour mon IPod permettant de contrôler les ordinateurs connectés à mon réseaux local

Je voulais :

qu'il y ai le moins de configuration possible
ne pas être tributaire d'un service extérieur
ne pas être tributaire de ma connexion à internet
éviter si possible les dangers associés à la transmission

Du coup j'ai utilisé chacune des possibilités pré-citées pour écrire un programme dont voici les sources

Il y 2 dossier :

Un dossier C# qui ne contient qu'un fichier "Main.cs" qui doit être compilé en un EXE nommé "mouseControl.exe". Pour cela j'ai utilisé monodevelop.
Cet EXE fait appel aux API's de user32.dll de Windows pour déclencher des action de souris.
A priori on peut se passer de C# en utilisant rundll.exe, mais ça me semblait plus élégant et pratique de faire ainsi.
De plus, c'est la seule partie du programme général qui ne fonctionne que sur Windows :
Pour décliner sur d'autre plateformes il faudra juste réécrire cette partie spécifique et changer d'executable en fonction de la plateforme dans le programme AS3.

Un dossier AS3 comprenant les sources utilisées pour générer deux app :
- Une pour le PC devant être contrôlé :
  Le fichier principal, com/laDigitale/display/TouchpadListener.as, est un Sprite devant contenir un TextField nommé "txtHistory".
  Il doit être compilé avec AIR en profil bureau étendu avec l'EXE "mouseControl.exe" inclue en ressource à la racine de l'app.
- Une pour le smartphone servant de touchpad :
  Le fichier principal, com/laDigitale/display/Touchpad.as, est un Sprite devant contenir 2 SImpleButton's nommés "leftDisplay" et "rightDisplay" (clique gauche et droit de la souris) et un Sprite nommé "pad" (mouvements de la souris)

L' app. pour Smartphone a été testé avec un IPod touch 4g mais doit marcher sur Iphone/Ipad et Android 2.2+
Une fois les deux app compilées, installées et lancées (peu import l'ordre) tout fonctionne sans configuration.
On peu fermer une app ou l'autre puis la ré-ouvrir, les 2 app se reconnectent et on peu surfer et regarder des vidéos à nouveaux à distance.

Conclusion

Attention ces source sont juste un "proof of concept"
J'ai essayer de tester/simplifier/montrer la démarche de communication entre un mobile et un pC en AS3 via le WIFI locale.
il n'y a notamment pas la moindre gestion d'erreur.
Par contre chaque élément (classe) joue un rôle précis. il y a peu de fichier (1 par app +2 interfaces +4 fichiers pour gérer les communications P2P, server TCP, process, transmission coté mobile)
Chaque fichier fait entre 15 et 100 lignes.

Il y a plein de trucs chouette à faire avec ces API.
Cependant j'espère que les connections P2P en local en mode direct seront implémentées par Flash Player et AIR dans l'avenir et que les API tels que les DatagramSocket marcherons sur les mobiles (voir cette liste).
Cela simplifierais vraiment les choses, avec un fonctionnement vraiment plus rapide et plus de possibilités

Voici un petite video très moche. En attendant mieux on peux y deviner le Multitouch et l'instantanéité du déplacement de la souris :

ipod touchpad with adobe air and c#

Snippet AS3 : intégrer les lib JS de son choix dans un SWF

Julien Beaufils — Sun, 19 Dec 2010 15:56:44 +0100

Par exemple avec la version minifiée de jQuery

/*
* Dans cet exemple le fichier jquery.js est enregistré 
* au même endroit que la source
*/
[Embed(source='jquery.js',mimeType="application/octet-stream")]
var jqClass:Class;
try 
{ 
    ExternalInterface.call
    (
        "function(){" +(new jqClass() as ByteArray).toString() + ";}"
    );
}
catch(e){trace("as3/js error : "+e.toString())}

Exactement de la même manière, pour l'execution de n'importe quelle expression JS sous forme de chaine à la volée, on peut utiliser cette fonction :

private function runJS(expr:String):void
 {
    try { ExternalInterface.call("function(){" + expr + "}") }
    catch(e){trace("as3/js error : "+e.toString())}
}

tip : Le JS peut être écrit "inline" dans le code en l'enveloppant dans un XML avec des CDATA.
De cette manière il peut être mis en forme correctement et la colorisation syntaxique s'exprime (sous flashDevelop)

Avantages :

emporter une lib JS sur tous les sites ou le SWF est partagé (attentions au param "allowScriptAccess")
compression/décompression des JS automatisée et réduction du nombre de requêtes
projet réellement orienté flash (peux de HTML) mais devant utiliser des outils js.
je pense aux SWFAdress, à SWFFit, à quelques nouveautés HTML5 sur lesquels les développeurs Flash louchent parfois comme les webWorkers
Lib's passées de manière "presque" transparente de projet en projet lorsqu'elles sont déjà compilées dans un SWC, ou un autre type de module (ça peut-être un inconvénient : on oublie ce qu'il y a dans les petites boites qui ici ont une dépendance avec le contexte d'utilisation).
* réutiliser des comportements prévus dans un HTML alternatif (en le parsant et en réutilisant les attributs onclick par exemple)

Inconvénients:

pour des SWF partagés, on a pas forcément la mains sur "allowScriptAccess" (par exemple filtres auto de certains CMS)
toujours pour des SWF partagés balancer un JQuery ou un motools dans la nature peut-être intrusif et redondant. (mettre un id unique dans le nom des objets globaux créés par la lib utilisé, developper en mode ninja)
problèmes de sécurité liées au XSS
toute modif du JS doit être re-compilée bien sur.

Cibler Redtamarin avec Flashdevelop

Julien Beaufils — Sun, 19 Dec 2010 11:49:48 +0100

Présentation

L'autre Jour je suis tombé sur un projet sympa :

redtamarin est un projet basé sur tamarin, le coeur de Flash Player.
Il permet d'écrire en as3 des outils en ligne de commande cross-plateform.
L'api (v0.25) est pour l'instant sommaire, mais il promet d'être agrémenté de toutes les fonctionnalités essentielles dans peu de temps avec la version 0.3

Configuration avec Flashdevelop

Le Wiki n'indique pas comment utiliser Redtamarin avec cet IDE alors j'ai fait une extension ajoutant un projet type correctement configuré.

En mode release, (combobox dans la barre d'outils de Flashdevelop) le projet type publie un exe (Windows uniquement) au nom du projet et lance le test en ligne de commande.
En mode debug l'exe n'est pas publié et le lancement du test est donc plus rapide.

Donc pour être près à coder un outils perso télécharger et installer ce fichier redtamarin0.25.fdz pour Flashdevelop

Projet exemple

Créer un nouveau projet :

Si l'installation s'est correctement passé (testé sou windows 7 avec install standard de Flashdevelop). Il doit maintenant être possible de créer un nouveau projet ciblant Redtamarin 0.25

Une fois le projet créé, il est près à être compiler et testé "traditionellement" via la commande CTRL+ENTER. Cependant on ne voit pas grand chose car le programme ne fait rien pour le moment.

coder :

Ouvrir le fichier Main.as dans le répertoire des source "src" :

L'include sur la ligne 1 est utile lorsqu'on utilise différentes classes :
Pour le moment le compilateur ne vas pas aller chercher les imports touts seul
Il faut référencer manuellement les fichier de classe via la directive "include" avant de pouvoir les référencé par "import".
j'ai choisit d'écrire ces références dans le fichier "Includes.as" qui n'est pas utilisé dans cet exemple.
Les classe du projet redTamarin sont cependant déjà référencées à l'appel du compilateur.

Pour tester un premier programme, y coler par exemple le code suivant en ligne 2 (commentaires du fonctionnement dans la source) :

import avmplus.System;
import avmplus.File;
import flash.utils.ByteArray;

//Recupération des arguments dans un tableau
var args:Vector.<String> = Vector.<String>(System.argv);

//Comportement si pas (pas assez) d'argument fournis
// illustre l'entrée sortie standard
if (args.length < 1) 
{
    trace("Fichier compresser ?");
    args[0] = System.readLine();
}
if (args.length < 2) 
{
    trace("Nom du Fichier de sortie ?");
    args[1] = System.readLine();
}

try
{
    /*
     * >Lecteur d'un fichier en argument 1, 
     * >compression "à la flash"
     * >Ecriture du fichier compressé sur le disqaue à l'adresse fournie en argument 2
     */
    var src:String = args[0];
    var dest:String = args[1];
    var b:ByteArray = File.fileToByteArray(src, false);
    b.compress();
    File.writeByteArray(dest, b);
}
catch(e:Error)
{
    //Gestion des erreurs du processus
    trace(e);
    trace("appuyez sur une touche pour terminer");
    System.readLine();
}

Compiler et tester :

Compiler via CTRL +ENTER. Le teste doit se lancer et demander un fichier en entrée à zipper.
Pour simplifier les tests on peu fournir directement les arguments à la commande de test :
Aller dans le menu Project > properties
Dans l'onglet courant (output) fieldset "Test Movie" cliquer sur éditer et ajouter la chaine suivant :
```
-- bin/in.txt bin/out.txt
```
Penser à ajouter un fichier nommé "in.txt" dans le répertoire bin du projet avant de compiler.

Lors des tests ce programme ne posera cette fois pas de question et créera un fichier compressé 'out.txt'

Notes en conclusion

Flashdevelop est un chouette outils qui permet d'intégrer différent styles de développement.
Pour créer mon extension je me suis inspiré de celle d' azoth qui est u super outil pour utiliser les opcode d'alchemy dans un contexte de développement simple (via un e api de manipulation de la mémoire propre et une post compilaton intégrés dans cette extension)
L'extension "fdz" que j'ai créé ne permet que l'export pour Windows, mais Redtamarin permet de cibler d'autres plateformes (linux, OSX...) et les script qui le permettent sont fournis avec le projet à télécharger (c'est celui que j'ai mis dans l'extension)
Dans le prochain billet montrerais (entre autre) une utilisation possible du programme example

flash CS5 XFL tip

Julien Beaufils — Thu, 11 Nov 2010 11:17:12 +0100

Juste un petit billet pour remettre en avant l'évolution du format de fichier FLA sur flash cs5 et les possibilités associées.

Un nouveau format

Désormais, lorsqu'on enregistre un fichier dans l'IDE flash, même si l'extension reste .fla, on crée une archive ZIP contenant :

un fichier XFL
des fichiers XML qui décrivent le doc et la librairie,
fichiers media (jpg, png...).

De plus le FLA est enregistrable comme document non compressé. Le projet passe donc de l'état de fichier à celui de dossier.

Versioning et mise à jours de ressources

Cela me semble très positif, même si ce n'est ni parfait, ni trop tôt.

On peut versioner efficacement les projets (SVN, GIT)
On ne réécrit plus un gros fichier tout neuf à chaque changement,
Le travail à plusieurs peut être optimisé et sécurisé.
La mise à jour des médias utilisés par le projet est simplifiée:
Un graphiste peu aller remplacer une image ou l'éditer directement avec l'outil de son choix sans ouvrir l'IDE Flash.(Au lieu d'aller y chercher dans la bibliothèque l'image correspondante, cliquer sur propriété, puis sur mettre à jour, chercher l'adresse de la nouvelle image car la correspondance n'existe plus...)

Rein de mieux que le texte

Mais le point que je souhaite mettre en avant est qu'on a désormais un projet modifiable avec un éditeur de code classique. On peut rechercher et remplacer une police ou un jeu de couleurs par exemple.

Ci-dessous un exemple de rechercher remplacer sur une couleur.
Dans le cas des couleurs attention cependant au nuancier.

[test.swf]

-------------

[test2.swf]

Bien sur on pouvait déjà rechercher et remplacer des couleurs directement dans l'IDE de Flash, mais ça ne marchais pas avec les filtres. L'outil ne recherchait que les éléments présents sur la scène.

C'est désormais réglé en 2 secondes avec un éditeur de code digne de ce nom.

Proof of concept

Les possibilités qu'offre un format plus ouvert sont claires (notamment en regardant ce que font d'autres logiciels depuis longtemps).
on peut également parcourir les fichiers pour rechercher / agglomérer des infos utiles.
Par exemple extraire les couleurs utilisées dans un document pour en faire une palette disponible dans le nuancier de ce même document.
Pratique pour décliner une charte après une recherche, reprendre un ancien projet, suite à un import d'éléments vectoriels.

Voici un EXE illustratif qui tourne à l'aide du runtime AIR 2.0 et permettant de le faire.

fla_palette.exe

En glissant un dossier de projet flash à l'endroit indiqué, le dossier fourni est modifié de manière à indiquer les couleurs présentes dans le nuancier au sein de l'IDE flash.

Une perte de mémoire est si vite arrivée

Julien Beaufils — Mon, 8 Nov 2010 23:13:04 +0100

J'ai vraiment peur de l'AS3 parfois. J'ai peur que tout explose d'un coup.
Avant de commencer deux liens en rapport direct avec le sujet :

C'est partie...

2 tubes à essais + un témoin; un Bec Bunsen !

Prenons par exemple la classe de document test suivante :

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class MemoryLeaksTest extends Sprite 
    {
        public function MemoryLeaksTest() 
        {
         
        new Sprite().addEventListener
        (
            Event.EXIT_FRAME, 
            new SetTimeoutTest().enterFrame,    
            false, 
            0, 
            true  //on utilise les weak référence
        );
            
        new Sprite().addEventListener
        (
            Event.EXIT_FRAME, 
            new AnonymousFuncTest().enterFrame, 
            false, 
            0,
             true //on utilise les weak référence
        );
        new Sprite().addEventListener
        (
            Event.EXIT_FRAME, 
            new NoLeakTest().enterFrame, 
            false, 
            0, 
            true //on utilise les weak référence
        );
        }
    }
}

et les classes associées qui se ressemblent beaucoup (le tube témoin et les autres tubes à essais) :

NoLeakTest.as

(pas de perte de mémoire)

package  
{
    import flash.events.Event;
    import flash.utils.setTimeout;
    /**
     * ...
     * @author Julien BEAUFILS
     */
    public class NoLeakTest
    {
        public function NoLeakTest() { }
        
        public function enterFrame(e:Event):void { trace(this); }
    }

}

AnonymousFuncTest.as

Déclaration d'une fonction anonyme dans une variable local ou de classe, ou comme propriété d'un objet.
Mauvaise pratique connue, parfois tentante et utilisée en interne de librairies populaires, voir même encouragée par l'exemple.

package  
{
    import flash.events.Event;
    import flash.utils.setTimeout;
    /**
     * ...
     * @author Julien BEAUFILS
     */
    public class AnonymousFuncTest
    {
        public function AnonymousFuncTest() {var func:Function = function() { };}
        public function enterFrame(e:Event):void { trace(this); }
    }

}

SetTimeoutTest.as

Utilisation de setTimeout pour différer légèrement une action / pour séquencer quelque chose...
C'est tellement tentant.

package  
{
    import flash.events.Event;
    import flash.utils.setTimeout;
    /**
     * ...
     * @author Julien BEAUFILS
     */
    public class SetTimeoutTest
    {
        public function SetTimeoutTest() { setTimeout(func, 100); }
        
        private function func():void {}
        
        public function enterFrame(e:Event):void { trace(this); }
    }

}

Résultats de l'expérieance

On verras ces deux lignes se répéter en permanence en sortie :

[object SetTimeoutTest]
[object AnonymousFuncTest]

CE N'EST PAS NORMAL

Les instances ne sont référencées explicitement nulle part dans le code et pourtant elles sont bien là, se nommant en permanence sur la fenêtre de sortie.

On aura beau faire du clearTimeout d'un identifiant référencé, passer des variables à null etc...
Le seul moyen de stopper cette sortie est de supprimer les écouteurs explicitement.

Les objets n'ont pas quitté la mémoire. la suppression explicite des écouteur est indispensable mais absoluement pas suffisante.

La solution finale

Exterminer les fonctions anonyme (bien que les autres les utilisent).
Supprimer du vocabulaire setTimeout et setInterval bien qu'on les utilise parfois également sans en avoir conscience.
Croiser les doigts et tester la mémoire.

AS3 : Vie des Objets graphiques / injection de comportements

Julien Beaufils — Thu, 4 Nov 2010 22:02:09 +0100

3 Evénements utiles pour la gestion de l'affichage :

Il permettent :

d'associer des comportements aux objets graphiques lorsqu'ils sont ajoutés à la liste d'affichage

stage.addEventListener
(
    Event.ADDED_TO_STAGE, 
    onAddedToStage, 
    true, // Utiliser la phase de capture sinon... surprise
    true
);

de gérer les relations entre éléments graphiques regroupés dans un DisplayObjectContainer juste avant son rendu :

displayContainer.addEventListener
(
    Event.FRAME_CONSTRUCTED,
    onFrameConstructed, 
    false, 
    0, 
    true
);

de nettoyer correctement ces comportements lorsque les objets graphiques sont retirés

stage.addEventListener
(
    Event.REMOVED_FROM_STAGE, 
    onRemovedFromStage,
    true,  // Utiliser la phase de capture sinon... surprise
    0,
    true
);

Un assemblage réfléchi donne une classe utilitaire pour injecter / associer du code aux objets graphiques au bon moment de leur vie.
Des interfaces permettent d'injecter proprement la dépendance logique spécifique à chaque projet (ou au conteneur graphique qui peut-être autre chose que le stage).

package displayListener
{
    import displayListener.interfaces.IDisplayControler;
    import flash.display.DisplayObject;
    import flash.display.DisplayObjectContainer;
    import flash.events.Event;
    /**
     * ...
     * @author Julien BEAUFILS
     */
    public class DisplayListener
    {
        private var displayContainers:Vector.<DisplayObjectContainer> = new Vector.<DisplayObjectContainer>();
        private var displayControler:IDisplayControler;
        public function DisplayListener(displayContainer:DisplayObjectContainer, displayControler:IDisplayControler) 
        {
            this.displayControler = displayControler;
            displayContainer.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage, true, 0, true);
            displayContainer.addEventListener(Event.FRAME_CONSTRUCTED, onFrameConstructed, false, 0, true);
            displayContainer.addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage, true, 0, true);
        }
        
        private function onAddedToStage(e:Event):void 
        {
            var display:DisplayObject = e.target as DisplayObject;
            displayControler.ini(display);
            if (display is DisplayObjectContainer) 
                displayContainers[displayContainers.length] = display as DisplayObjectContainer;
        }
        
        private function onFrameConstructed(e:Event):void 
        {
            for each (var displayContainer:DisplayObjectContainer in displayContainers) displayControler.run(displayContainer);
            displayContainers.splice(0, displayContainers.length);
        }
        
        private function onRemovedFromStage(e:Event):void 
        {
            displayControler.del(e.target as DisplayObject);
        }
    }
}

Attention :

Les objets du type SimpleButton ont un comportement inattendu du fait que ce ne sont pas des DisplayObjectContainer . Du coup, si un objet (par ex un TextField) créé dans l'IDE FLash à la racine d'un bouton doit absolument être traité, il faudra l'imbriquer dans un clip.

projet Illustratif:

Les fichiers ci-joints montrent un même faux projet codé selon trois approches pour illustrer l'utilité de cette technique :
behaviours-ctrl.zip

FromScratchDesign.as

Le programme est écrit d'un coup en une classe sans utiliser le snippet.
Il est très peu évolutif, bien que ça reste vite fait et fonctionnel.
le générateur de spaghetti se trouve sur cette ligne (Que ce passe-t-il lorsque "day" deviens "morning" + "afternoon" ):
```
if (id == "night") var btName:String = "bt_day" else btName = "bt_night";
```

BetterDesign.as

Toujours en une classe mais en utilisant les événements décrits dans cet article .
Le code en lui-même reste peu évolutif (voir les switches).
Cependant les données et le graphisme associés peuvent sensiblement évoluer sans toucher au code.

OODesign.as

Le nombre de classes associées est complètement sur-dimensionné pour ce petit projet virtuel.

Cependant :

Un cadre est "posé" par l'intermédiaire d'interfaces.
Le couplage entre chaque classe est faible (interfaces + classes de bases de type DisplayObject/Event...).
Toutes les créations d'instances (sauf pour un vecteur privé) se font dans cette classe principale.

Il en résulte que :

Le code est "bidouillable" à souhait .
L'ajout de types de comportement est simplifié.
La réutilisation des codes dans des contextes différents est simplifiée.

la-digitale.com

Julien Beaufils — Sun, 17 Oct 2010 15:43:08 +0200

Qui

Julien BEAUFILS
Expert ActionScript 3
Développeur multimédia pour le compte de SUPERSONIKS
Un peu n3rd, un peu geek
Ni technophile, ni No life

Quoi

Principalement du contenu lié directement à la plateforme flash.
Cependant Flash n'étant pas une prison fermée, j'espère partager sur tout autre aspect du développement multimédia.
Les billets de ce blog ne représentent pas la philosophie du développement au sein de l'agence SUPERSONIKS.

Comment

Il existe des outils de gestion de contenu reconnus (Drupal, Wordpress, Joomla..)
Cependant je souhaitais aller voir un peu ailleurs.

Ayant aimé jouer avec le méta-language Haxe.
j'ai souhaité qu'il soit à la base de ce blog, pour aller plus loin avec cet outil.
il n'y a donc pas une ligne de php ici, mais ce langage compilé vers js, flash et neko
La partie serveur(neko) tourne à l'aide ce petit module apache mod_neko

Comme dit plus haut je ne suis pas un no life donc, je suis parti de cette base intéressante
(Le code est incomplet. il faut le modifier un peu, recréer la base à la main... pour commencer à le personnaliser un peu)

Je le répète ! Le but n'est pas de faire un blog de compète, mais de voir/essayer un peu autre chose.

La digitale, Développement multimédia

Canvas HTML5 : EaselJs en Haxe pour Javasript avec EaselHx

EaselJs

EaselHx

Exemple

CS SDK sous flashdevelop en AS3 pure

CS SDK, Q'uest-ce que c'est :

Configuration préalable :

Configuration de FlashDevelop :

Prêt à mélanger la plateforme Flash et les outils de la CS

AS3 : Tests unitaires Asynchrones

Contexte

Première expérience pratique avec les tests unitaires

Coder les tests avant le programme lui même, logique non ?

Les tests dirigent le développement

Meilleur qualité du code ?

Evolution

Attention :

Tests synchrones et asynchrones avec ASUNIT

AS3 : Mon IPod est un touchpad pour PC

Conclusion

Snippet AS3 : intégrer les lib JS de son choix dans un SWF

Cibler Redtamarin avec Flashdevelop

Présentation

Configuration avec Flashdevelop

Projet exemple

Créer un nouveau projet :

coder :

Compiler et tester :

Notes en conclusion

flash CS5 XFL tip

Un nouveau format

Versioning et mise à jours de ressources

Rein de mieux que le texte

Proof of concept

Une perte de mémoire est si vite arrivée

2 tubes à essais + un témoin; un Bec Bunsen !

NoLeakTest.as

AnonymousFuncTest.as

SetTimeoutTest.as

Résultats de l'expérieance

CE N'EST PAS NORMAL

La solution finale

AS3 : Vie des Objets graphiques / injection de comportements

3 Evénements utiles pour la gestion de l'affichage :

Attention :

projet Illustratif:

FromScratchDesign.as

BetterDesign.as

OODesign.as

la-digitale.com

Qui

Quoi

Comment