Sakana labs

[AS3] Design Pattern : Singleton

Ces derniers temps je n'ai pas eu d'autres choix que de me plonger dans l'étude des "design pattern". Projet complexe, volonté de rester flexible et soucieux de l'élégance, j'ai donc commencé à réfléchir à une classe à laquelle je pourrais accéder de n'importe où et qui contiendrait des propriétés et méthodes que je pourrais avoir besoin en permanence. Quelques discussions plus tard (merci Claude), un bon article et finalement je me tourne vers une solution "alternative".

Alternative car en Actionscript 3 on ne peut pas déclarer de constructeur privé, ce qui dès le départ nous empêche "théoriquement" de respecter le pattern Singleton. Mais comme tout le monde le dit, les "design pattern" sont là pour guider, inspirer et non pas pour imposer une manière de développer.

Parmis les alternatives pour réaliser un Singleton en actionscript 3, il y a la méthode que j'ai trouvé dans le livre "ActionScript 3.0 Design Patterns" des éditions O'Reilly. Excellent livre, très bien expliqué, où l'on peut trouver le moyen de déclarer un constructeur privé (en déclarant un second constructeur en dehors du package) dans une classe. Mais comme le dit Peter Elst "you’re still able to pass null as an argument to the constructor and prevent if from throwing an error".

Alors à quoi bon se casser la tête à coder un "pseudo" Singleton si au final on peut le contourner ?
On perds l'objectif de vue  qui est d'empêcher la classe d'être instancié plusieurs fois. Si on a pas de constructeur de privé, il faudra trouver une solution avec un constructeur publique, mais en aucun cas je vais me casser la tête à mettre au point un "pseudo" constructeur privé si de toutes façons l'objectif principale n'est pas respecté...

C'est donc vers la solution de Grant Skinner que je me suis orienté. Simple, propre, lisible, un simple Boolean qui indique si la classe a déjà été instancié ou non. C'est pas un constructeur privé mais ça fait ce qu'on attends d'un Singleton.

Cependant, j'espère quand même que nous aurons bientôt la possibilité de déclarer un constructeur privé dans une classe étant donné que l'argument avancé au départ était le fait qu'actionscript 3 est conforme aux normes ECMAScript (ce dernier n'ayant pas de constructeur privé). Hors depuis peu ce n'est plus le cas, alors pourquoi pas ?

Posted in Actionscript 3 | No Comments »

FITC 2009 à Amsterdam du 22 au 24 février

Après le succès de la première édition du FITC à Amsterdam, les organisateurs remettent ça du 22 au 24 février.

• Les présentations.
• La liste des orateurs.
• Le programme des deux jours.

En ce qui me concerne je serai sur place à partir du samedi 21.
Au plaisir de rencontrer du monde !

Posted in Général | No Comments »

[AS3] Supprimer tous les enfants d’une displayList

Aide mémoire :

while (numChildren > 0) removeChild(getChildAt(0));

Posted in Actionscript 3 | 1 Comment »

[AS3] Classe TimelineController

Parfois j'ai besoin de pouvoir contrôler la Timeline d'un MovieClip autrement que juste play, stop, gotoAnd...
Alors pour raccourcir la longueur de mon code source je me suis inspiré de TweenLite pour développer une petite classe TimelineController.

Trois méthodes statiques :

• TimelineController.to(target:MovieClip, frame:Number) : permet de se rendre à une image précise sur la timeline de la façon la plus rapide. En résumé, si vous être sur l'image 5 et que vous devez aller sur l'image 100 (la dernière de votre timeline dans ce cas), la tête de lecture va partir vers l'arrière et passer par 1 pour atteindre l'image 100
• TimelineController.reverse(target:MovieClip) : permet de lire la timeline à l'envers
• TimelineController.once(target:MovieClip) : permet de lire la timeline "une fois" et s'arrête sur la dernière frame.

Comme pour TweenLite vous pouvez ajouter un objet en paramètre. Pour l'instant je n'utilise que la propriété onComplete et onCompleteParams. Pour déclencher une méthode lorsque l'image cible est atteinte.

TimelineController.as :

package  {
import flash.display.MovieClip;
import flash.events.Event;
 
public class TimelineController {
	private var _target:MovieClip
	private var _destinationFrame:Number;
	private var _direction:String;
	private var _params:Object;
 
public function TimelineController(aTarget:MovieClip, aDestinationFrame:Number = undefined, aDirection:String = undefined, aObject:Object = null ):void {
	_target = aTarget;
	_destinationFrame = aDestinationFrame;
	_params = new Object();
	if (aObject != null) _params = aObject;
	if (aDirection) {
		_direction = aDirection;
	}else {
		_direction = findQuickPath();
	}
	_target.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
}
 
public static function to(aTarget:MovieClip, aDestinationFrame:Number, aObject:Object = null):TimelineController {
	return new TimelineController(aTarget, aDestinationFrame, undefined, aObject);
}
 
public static function once(aTarget:MovieClip, aObject:Object = null):TimelineController {
	return new TimelineController(aTarget, aTarget.totalFrames, "forward", aObject);
}
 
public static function reverse(aTarget:MovieClip, aObject:Object = null):TimelineController {
	return new TimelineController(aTarget, 1, "backward", aObject);
}
 
private function findQuickPath():String {
	var distance:Number =  _destinationFrame - _target.currentFrame;
	if (Math.abs(distance) > _target.totalFrames / 2) distance = -(distance);
	if (distance > 0) {
		return "forward";
	}else {
		return "backward";
	}
}
 
private function handleEnterFrame(e:Event):void {
	switch(_direction) {
case "forward":if (_target.currentFrame +1 <= _target.totalFrames) {
				_target.nextFrame();
			}else {
				_target.gotoAndStop(1);
			}
			break;
case "backward":if (_target.currentFrame -1 > 0) {
				_target.prevFrame();
			}else {
				_target.gotoAndStop(_target.totalFrames);
			}
			break;
			}
if (_target.currentFrame == _destinationFrame) {
	_target.removeEventListener(Event.ENTER_FRAME, handleEnterFrame);
if (_params.onComplete != null) _params.onComplete.apply(null, _params.onCompleteParams);
	}
	}
}
}

Pour le moment je n'ai pas besoin de plus que ces trois méthodes mais si vous avez des idées...

Posted in Actionscript 3 | 6 Comments »

La vague Adobe

Après la sortie de la Creative Suite 4 Adobe n'a pas perdu de temps pour annoncer les prochaines évolutions de ses technologies, profitant d'ailleurs de l'Adobe MAX du 16 au 19 novembre à San Francisco.

Voici un aperçu des nouveautés :

Flash Media Server 3.5

• dynamic streaming pour diffuser selon la bande passante de l'utilisateur, améliore ou détériore automatiquement la qualité de la vidéo pour éviter des coupures. Cependant il faut prévoir plusieurs versions de la vidéo, ce n'est pas compressé à la demande évidemment  (oui... on peut toujours rêver)
• pause et recherche possible sur un streaming en direct grâce au Digital Video Recorder (DVR). Ce qui permet par exemple de regarder un stream en direct mais légèrement en différé au cas où on aurait raté le début. Mais on peut aussi imaginer des retour en arrière rapide "instant replay" sur des vidéos en directe.

La démonstration du nouveau Flash Media Server sur http://www.streamflashhd.com/

Flash Catalyst (formerly Thermo) :

• L'objectif de Flash Catalyst serait de permettre aux créatifs de facilement et rapidement passer de leur design photoshop/illustrator/fireworks vers une application interactive sans devoir faire de développement.  En résumé ça permet de passer d'une maquette statique vers une application SWF/AIR interactive. Ensuite lorsque le développeur reçoit cette application interactive il peut directement l'importer dans Flex et commencer développer sans devoir faire l'intégration lui même. Evidemment ça à l'air très simple en démonstration mais j'attends de voir sur des projets concrets... je reste perplexe sur ce coup là.
• Démarrer avec Flash Catalyst

Alchemy Project

• Alchemy est un projet qui a pour objectif de permetter aux développeurs de compiler du C et C++ en ActionScript. C'est intéressant en ce qui concerne les performances de certaines librairies en C et C++ qui s'occupent de gérer des manipulations lourdes (crypto, encodage, etc.) pour le processeur. L'idée est que ces librairies seront plus performantes que si on devait recoder cela en ActionScript 3. Attention q'ils mettent l'accent sur le fait que ça ne sert pas à convertir des programmes complets. Aussi ils veilleront à ce que les restrictions de sécurité du Flash Player soient respectés. (à voir)

C'est une avalanche de projet qui viennent d'apparaître sur le labs et le blog d'Adobe.

Cocomo

• Plate-forme qui permet d'ajouter des fonctions "social networking" (chat, VoIP, Webcam, partage de fichier,..). Cela se présente sous la forme de librairie pour Flex et donc on peut par exemple créer un chat en quelques minutes.
• Point important vous pouvez utiliser les serveurs d'Adobe (Acrobat.com) gratuitement.

Et en bref vous pouvez découvrir :

• Stratus - Service qui permet d'établir des communications entre Flash Player
• Durango - un framework pour développr des applications AIR qui peuvent être personnalisé par le client
• Bolt - Adobe IDE basé sur Eclipse pour le développement ColdFusion
• Centaur - Prochaine version majeure de ColdFusion

Que de nouveaux jouets à maîtriser... !

Posted in AIR (Apollo), Actionscript 3, Flash, Flash Media Server, Général | No Comments »

PNG ou FLV, quel est le meilleur rapport poids/performances ?

Réaliser un 360° d'un produit en flash n'est pas quelque chose de rare sur internet, par contre multiples sont les méthodes possibles pour y arriver.  Niveau matériel, j'ai reçu des vidéos au format Quicktime (*.mov) en 640x480, d'une durée approximative de 6 secondes. L'objectif étant juste de permettre à l'utilisateur de naviguer "facilement" et "rapidement" dans la vidéo pour voir le produit tourner sur lui même.

Après avoir fait une conversion du fichier quicktime (*.mov) en *.flv on pourrait être tenté de simplement charger la vidéo dans Flash et de naviguer dedans mais on remarque vite que l'utilisation processeur (53%) est assez importante et ça rame pas mal (parce que lorsque vous atteignez une image précise, flash doit recalculer toutes les images pour faire le rendu), dommage car c'est vraiment léger comme fichier 600kb.

Du coup je me suis tourné vers un export du fichier original *.mov vers une séquence PNG, importé dans Flash sur la timeline. De là je charge mon swf et je peux naviguer sur la timeline avec une utilisation quasi nul du processeur, c'est rapide, fluide, mais lourd 2.5 mb le swf.

Dilemme poids/performances, qu'un collègue m'a aidé à résoudre en me proposant deux solutions.

• Convertir le MOV en FLV, insérer le FLV sur la timeline de flash, exporté en SWF. Ensuite chargé le SWF et faire un BitmapData de toutes les frames de la vidéo pour pouvoir naviguer dedans.
  Avantages : Je garde le poids du FLV 600kb, je navigue dans la vidéo sans utiliser trop de ressources de la machine client
  Désavantages : Pour la vidéo de mon exemple 640x480 6 secondes, ça prends 220mb en mémoire (presque autant que charger le swf avec la séquence PNG de 2mb, qui en mémoire prends 250mb) . Ce qui pourrait faire planter le Flash player sur certaines configurations. Le flash est figé lorsqu'il capture les images.

• Convertir le MOV en FLV en spécifiant "ajouter une image clé à toutes les images". Ensuite insérer le FLV sur la timeline de flash, exporté en SWF et chargé dans l'application.
  Avantages : Poids inférieur à la séquence PNG et navigation dans la vidéo super fluide. Utilisation processeur quasi nul. Utilisation mémoire 16mb.
  Désavantages : Plus lourd que le poids du FLV à la base. 600kb on passe à 2mb.

Finalement j'ai opté pour la deuxième alternative à l'exception que lors de la conversion de mon fichier Quicktime (*.mov) en *.flv j'ai ajouté une image clé toutes les 5 images.  Du coup mon FLV pèse 660kb au lieu de 600kb. Ce qui est raisonnable et les performances restent bonnes.

Cependant pour répondre à une question de Seb Lee-Delisle, lorsque vous utilisez une séquence PNG vous pouvez faire une boucle parfaite "invisible". Par contre avec un FLV on ressent une légère saute à chaque fois que le swf boucle. Aucune idée d'où ça provient mais il y a plus d'informations à ce sujet sur le blog de Seb Lee-Delisle.

Posted in Flash | No Comments »

Flash Player 10 debug version, disponible !

Suite à mon dernier sujet sur la sortie du Flash Player 10 voici la version "debug" du Flash Player 10. Elle est disponible sur la page : "Archived Flash Players available for testing purposes".

Posted in Debug !, Flash | No Comments »

Flash Player 10 est disponible !

Lorsque vous allez sur le site d'adobe pour télécharger le flash player vous verrez que c'est la version 10.0.12.36 qui est disponible depuis hier. C'est assez logique étant donné la sortie de Flash CS 4.

Par contre j'ai pas trouvé de version "debug" pour cette version du Flash Player 10. (J'ai mal cherché ?)

Il ne reste plus qu'à espérer que le taux de pénétration sera rapidement élevé.
Je suis impatient de voir le nouveau moteur de rendu des textes et toutes les autres améliorations de cette version.

Posted in Flash | No Comments »

Lovely Charts : Création de diagramme en ligne

Un collègue du boulot m'a récemment fait découvrir lovely charts alors que je cherchais désespérement un outil gratuit et efficace avec lequel je pourrais faire un diagramme pour l'analyse d'un projet. Malheureusement je n'avais pas pu tester directement ce site étant donné qu'il faut s'inscrire pour recevoir un accès à la version beta que je viens de recevoir aujourd'hui (ça a mis du temps...).

L'interface ne trompe pas, Lovely Charts est développé avec Flex et se révèle vraiment pratique et simple d'utilisation dès les premières minutes. D'ailleurs vous avez la possibilité de visionner une vidéo de 90 secondes pour avoir un aperçu global des fonctionnalités de l'application.

Page d'accueil :

lovelycharts : page d'accueil

J'ai rapidement fait un exemple de "flowchart". Concrètement il faut drag&dropper des composants depuis une librairie vers la scène. Ensuite vous passez en mode "connection" qui va vous permettre de lier les éléments. On peut personnaliser les couleurs, la taille de la police, etc. A noter aussi qu'il y a pas mal de raccourcis clavier qui mettent vraiment à l'aise comme une application desktop (molette pour le zoom, ...).

lovelycharts : interface

lovelycharts diagramme

On peut aussi verrouiller/déverrouiller des éléments, ce qui est très pratique si on travail sur des grands schéma. La sélection multiple aussi est très intuitive... ça vient naturellement. (CTRL / POMME)

lovelycharts verrouillage

Il est aussi possible d'exporter son schéma en JPG/PNG, la compression minimum est à 80% par défaut et on ne sait pas augmenter... je suppose que c'est parce que c'est une version bêta. Le PNG exporté à un fond transparent. La qualité est satisfaisante.

lovelycharts exporter en png/jpg

A long terme j'aimerais bien voir une version AIR de cette application, c'est le genre d'outil qui est très pratique, manque juste un moyen d'exporter en vectoriel. Mais c'est peut-être volontaire...

Certes ça ne rivalise pas avec les grosses applications professionnels, mais pour quelqu'un qui cherche à rapidement faire un schéma, le plan d'un site, le plan d'un réseau ou autres diagrammes de base, ce sera parfait. Dommage qu'on ait pas une application UML comme ça...

Conclusion Lovely Charts est une application très intéressante, pratique et qui plus est c'est une excellente idée d'avoir créé cela sous forme d'application en ligne... affaire à suivre !

Posted in Flex, Général | No Comments »

Adobe Flash CS4

Impatient j'ai regardé ce matin le lancement de la Creative Suite 4 d'Adobe. Comme d'habitude je suis resté sur ma faim, personnellement ça m'a vraiment énervé d'attendre une heure pour ne rien voir d'intéressant qu'un show commercial dans lequel on peut compter le nombre de fois où le présentateur dit :

"et vous avez fait ça avec la Creative Suite 4 ?"
"oui tout à fait, d'ailleurs ça aurait été impossible à réaliser sans la Creative Suite 4 d'Adobe"
"donc vous continuez à utiliser la Creative Suite 4 d'Adobe"
"oui bien sûr, d'ailleurs nous allons devoir en (la Creative Suite 4 d'Adobe) acheter pour toute notre équipe, sans quoi nous ferons des jaloux..."

Ok, peut-être que j'exagère un peu, mais si on tient compte que la majorité du public qui va regarder le lancement de ce produit est constitué de professionnels du milieu ont se demande à quoi perdre son temps à essayer de nous vendre un produit qu'on a déjà adopté !

Heureusement, il y a quelques chanceux qui ont reçu une version beta de Flash CS4, comme Keith Peters qui n'hésite pas à partager sur son blog ses découvertes. Quelques screenshots de la nouvelle interface.

Les designers, animateurs, illustrateurs, devraient être assez satisfait de cette nouvelle version de Flash CS4 et j'ai hâte de tester l'axe Z dans l'IDE.

Pour finir, je dirais que la seule chose à retenir aujourd'hui c'est que Flash CS 4 sera normalement disponible courant du mois d'octobre.

Posted in Flash, Général | No Comments »