blog.geturl.net - pixLib

[lowRA] - Un petit lifting sur le MVC+FC

ali_o_kan — Sat, 12 Jan 2008 18:42:00 +0100

La première chose qui risque de troubler les utilisateurs de pixLib quand ils débarquent dans lowRA, c'est la disparition du MovieClipHelper.

Pas de panique, c'est un mal pour un bien.

Voici en deux mots comment mettre en place une simple structure MVC dans lowRA.

Commençons tout d'abord par un peu de nomenclature.

Pour rappel, une classe dit Abstraite (Abstract) ne peut être utilisé telle quelle, il faut d'abord l'étendre.

Voyons le cas de l'AbstractModel

Pour utiliser la classe AbstractModel nous devons l'étendre.

[actionscript]
public class DrawingModel 
	extends AbstractModel 
{

	public function DrawingModel(owner : Plugin = null, name : String = null)
	{
		super(owner, name);
		Debug.INFO(this + " is CREATE !!!");
	}

Dans un premier temps nous n'allons pas tenir compte de l'argument owner (~~je le présenterait dans le billet suivant~~, [lowRA] - Owner, la notion de plugin ). Ce qu'il faut retenir c'est que chaque modèle reçoit un nom, il s'agit d'un identifiant (unique!) qui permettra de récupèrer l'instance de la classe de n'importe quel endroit de l'application grâce à la classe ModelLocator.

ModelLocator

ModelLocator est un singleton (je ne veux aucun commentaire des puristes :p ), ce qui veut dire qu'il ne peut exister qu'une seule instance de la classe. Cette classe stock en elle l'ensemble des Modèle de l'application, et donc permet de récupérer de façon global n'importe quelle instance d'AbstractModel instancié.

[actionscript]
ModelLocator.getInstance().getModel("nom_de_mon_model");

Pour les vues c'est la même logique avec AbstractView et ViewLocator. Et pour les commandes c'est presque parreil, la seul différence réside dans le fait que c'est le FrontControlleur qui fait office de locator et que l'identifiant est le nom d'un événement.

[actionscript]
monController.pushCommandClass("monEvenement", MaCommandExecute);

Rien de bien nouveau avec pixLib si ce n'est le pushCommandClass. Maintenant nous pouvons choisir d'exécuter à chaque évènement la même instance de la commande ou dans instancier une nouvelle (plus proche du pattern originel).

[actionscript] 
public function pushCommandClass( eventName : String, commandClass : Class ) : void
public function pushCommandInstance( eventName : String, command : Command ) : void

Voilà, avec ces six classes nous avons de quoi déployer une structure MVC + FrontController en AS3.

En bonus, je me suis amusé à porter un petit projet MVC pixLib vers lowRA.

Les sources AS2 (pixLib).
Les sources AS3 (lowRA) - la build utilise iFac pour compiler.

Pour ceux qui veulent savoir un peut plus sur le MVC+FC dans pixLib :

[lowRA] - Un point de la situation

ali_o_kan — Fri, 11 Jan 2008 12:34:00 +0100

Un premier point vient d'être fait sur l'avancement de lowRA.

Benoît vient de mettre en ligne un résumé en français de la discussion.
LowRA est en train de passer à la prochaine étape.

Pour la version complète en VO : lowra_meeting_070111.html

Tout ce que l'on peut dire c'est que Francis et Cédric mettent les bouchés double depuis une semaine et que l'avenir de lowRA s'annonce rayonnant.

cheers,
Laurent

[MAJ] - Francis en parle aussi : LowRA meeting online

[pixLib] - Introduction, application de dessin.

ali_o_kan — Mon, 24 Dec 2007 16:33:00 +0100

Yep,

La semaine dernière j'ai données 4 jours de formation sur pixLib, que du plaisir!

Chose promise, chose due, voici les sources (avec commentaires!) :

Et les slides :

introduction_pixLib.pdf

En résumé pour les personnes qui n'ont pas suivit la formation.
j'avais une petite semaine pour faire découvrir le déploiement d'un projet avec pixLib. Cette découverte c'est fait avec la création d'une application de dessin.

Dans les premières sources se trouve les exemples de code utilisé dans les slides.
Dans le deuxième zip se trouve le projet que l'on a réalisé.

Concernant les slides, il s'agissait du squelette de la formation, pour les détails de chaque partie je renvoi vers des billets écrit précédemment sur le blog.

En bonus, voici la doc généré du projet. -> documentation du projet drawing.

Joyeux Noël!

[airLogger] - adieu LuminicTracer, bonjour airTracer

ali_o_kan — Sat, 22 Dec 2007 15:34:00 +0100

Salut

Depuis une petite semaine maintenant j'utilise la nouvelle mouture de AirLogger. Créé par Cédric Néhémie, AirLogger est à ce jour ce que j'ai vu de mieux en logger externe pour Flash.

Ces points fort

Suivi de plusieurs swf, chacun ayant son propre onglet.
Sortie des logs formaté html.
Stockage des logs dans une pile (buffer), si AirLogger est pas lancé au départ.
Copier-coller, moteur de recherche, affichage avancé (couleurs, mail, url,…), …

Une fois en mains, je n'ai pas pu m'empècher à me lancer dans un portage pour pixLib (AS2). Après quelques heures de prise de tête, à deux doigts de lacher le morceau j'ai prit contact avec Cédric qui a terminé le portage.

Donc une première version, non stable, pour l'AS2 est disponnible, hormis un souci sur les MovieClip (return null dans airLogger) elle semble fonctionnelle. Elle s'utilise comme la classe LuminicTracer (cf. [pixLib] - Comment logguer?) :

[actionscript]
Logger.getInstance().addLogListener(LuminicTracer.getInstance());
Logger.getInstance().addLogListener(AirTracer.getInstance());

com.bourre.utils.AirTracer.zip

J'en profite pour signaler que AirLogger est basé sur lowRA (pixLib to AS3). Un bon exemple pour se faire une idée de son utilisation.

info +

Allez, hop, à la douche avant le champagne,
Bonne soirée

[AS2] - Un petit compte à rebours…

ali_o_kan — Mon, 19 Nov 2007 17:02:00 +0100

Il y était une fois…

Un ami - «Peux tu me faire un compte à rebours pour mon site?»
Moi - «Oui bien sure !:)»
Dans ma tête - «Google est mon ami, je vais lui monté ça en deux coups de copier-coller :p»

Seulement voilà, Google a pas été très généreux avec moi. Quelques ressources en AS1, rien de vraiment propre ou de personnalisable. :s

J'en ai donc profité pour monté un petit exemple d'implémentation de pixLib, avec en plus l'usage d'un hack qui n'est pas très connu pour intégrer et manipuler les fonts facilement dans Flash (cf. build.xml).

Pour ceux qui ont FDT, Il suffit juste de lancer la build.xml pour compiler.

infos +

Apprenez à utiliser des polices partagées dynamiquement en AS2.

++
Laurent

MAJ - 27/12/07.
J'ai fixé un bug sur le gestion du compte à rebours quand on ne précise pas l'année.

[traduction] - Comprendre les bases du framework PixLib

ali_o_kan — Fri, 16 Nov 2007 08:36:00 +0100

Salut,

Je viens de tomber sur la traduction d'un article d'introduction à pixLib.

Originale de Xavier MARTIN.
Traduction de Grégory Dumas.

[MotionPlayer] - La maitrise des animations

ali_o_kan — Wed, 14 Nov 2007 16:09:00 +0100

Salut

Je ne sais pas vous, mais je suis régulièrement confronté au problème de devoir gérer les animations (transitions) que les créas ont fait, enfin surtout gérer les événements de fin d'animation.

Voici ma solution :

Dans un premier temps, je plaçais un appel de méthode global sur la dernière image clé de l'animation, que je récupérai au sein de mon application (cf. [pixLib] - communication entre un graphiste et un développeur).

Mais dans ma quête du «plus de code pour les graphistes!» je n'étais pas satisfaits. J'ai donc opté pour une deuxième solution qui est de jouer l'animation à partir d'une Tween! Cette solution apporte en plus la possibilité de gérer le temps des animations sans tenir compte du FPS.

La semaine dernière, je me suis enfin décidé à créer une classe qui automatise la deuxième solution, au lieu de chaque fois créer une Tween par animation. :p

Alors voilà :

[actionscript]
import com.bourre.log.PixlibStringifier;
import com.bourre.transitions.ITweenListener;
import com.bourre.transitions.TweenEventType;
import com.bourre.transitions.TweenMS;

/**
 * @author [ali_o_kan] - Laurent Deketelaere
 */
class org.triptyk.components.MotionPlayer 
{
	public static var onStartEVENT : TweenEventType = TweenEventType.onStartEVENT;
	public static var onStopEVENT : TweenEventType = TweenEventType.onStopEVENT;
	public static var onMotionFinishedEVENT : TweenEventType = TweenEventType.onMotionFinishedEVENT;
	public static var onMotionChangedEVENT : TweenEventType = TweenEventType.onMotionChangedEVENT;

	private var _mcMotion : MovieClip;
	private var _tPlayer : TweenMS;

	public function MotionPlayer( mcMotion : MovieClip, nSec : Number, fE : Function)
	{
		_mcMotion = mcMotion;
		_tPlayer = new TweenMS(this, _play, _mcMotion._totalframes, nSec * 1000, 1, fE);
	}

	private function _play( nKey : Number ) : Void
	{
		_mcMotion.gotoAndStop(Math.round(nKey));
	}

	public function start() : Void
	{
		_tPlayer.start();
	}

	public function stop() : Void
	{
		_tPlayer.stop();
	}

	public function revert() : Void
	{
		_tPlayer.yoyo();
	}

	public function setDuration( nSec : Number ) : Void
	{
		_tPlayer.setDuration(nSec * 1000);
	}

	public function setEasing( fE : Function ) : Void
	{
		_tPlayer.setEasing(fE);
	}

	public function getView() : MovieClip
	{
		return _mcMotion;
	}

	public function addListener(oL : ITweenListener) : Void
	{
		_tPlayer.addListener(oL);
	}

	public function removeListener(oL : ITweenListener) : Void
	{
		_tPlayer.removeListener(oL);
	}

	public function addEventListener(e : TweenEventType, oL) : Void
	{
		_tPlayer.addEventListener.apply(_tPlayer, arguments);
	}

	public function removeEventListener(e : TweenEventType, oL) : Void
	{
		_tPlayer.removeEventListener(e, oL);
	}

	public function toString() : String 
	{
		return PixlibStringifier.stringify(this);
	} 
}

Et son utilisation :

[actionscript]
var _animIntro : MotionPlayer = new MotionPlayer(resolveUI("mcIntro"), 1);
_animIntro.addEventListener(MotionPlayer.onMotionFinishedEVENT, this, _onFinishIntro);
_animIntro.start();

Un autre avantage non négligeable de cette solution est qu'en période de dev on est plus obliger de se taper toutes les transitions en temps réelle, vous avez celle qui vous ne pouvez plus voir en peinture après une nuit de charrette. :p

++
Laurent

[pixSWX] - Une alternative au remoting

ali_o_kan — Wed, 24 Oct 2007 17:18:00 +0200

english version translated by Gilles Bertand

Salut

Tout d'abord pour les personnes qui ignore ce qu'est SWXformat une petite video s'impose :

[MAJ] - Pour la version Française : beflash.be

Maintenant que tout le monde sait ce qu'est SWXformat, voyons ce qu'est pixSWX. :p

C'est tout simplement l'API qui permet d'utiliser SWX dans pixLib.

SWXCall

Il s'agit de la classe principal, c'est elle qui va envoyer et recevoir les informations.

[actionscript]
// -- Basic usage
var swx : SWXCall = new SWXCall("http://www.geturl.net/services/swx_php_1/php/swx.php", "Simple.addNumbers");
swx.addListener(this); // implements ISWXListener
swx.load(18, 32);

ISWXListener

Est une interface déclare l'ensemble des méthodes qu'un écouteur doit implémenter.

[actionscript]
public function onFault(e : SWXFaultEvent) : Void;
public function onResult(e : SWXResultEvent) : Void;
// extends ILibListener
public function onLoadInit(e:LibEvent) : Void;
public function onLoadProgress(e:LibEvent) : Void;
public function onTimeOut(e:LibEvent) : Void;

SWXResponder

Cette classe permet de définir où l'on soit récupérer la réponse du serveur, basé sur la même logique qu'un Delegate.

[actionscript]
var swx : SWXCall = new SWXCall("http://www.geturl.net/services/swx_php_1/php/swx.php", "Simple.addNumbers");
var swxResponder : SWXResponder = new SWXResponder(this, onResult, onFault, onProgress);
swx.addListener(swxResponder);
swx.load(18, 32);

Dans cette exemple, ce sont les méthodes onResult, onFault, onProgress déclarer sur this qui seront utilisé.

SWXProxy

Cette classe permet de regrouper l'ensemble des méthodes d'un service.

[actionscript]
class pixswx_first.net.SWXSimpleService	
	extends SWXProxy
{
	public static var echoDataMETHOD : SWXMethod = new SWXMethod("echoData");
	public static var addNumbersMETHOD : SWXMethod = new SWXMethod("addNumbers");
	
	public function SWXSimpleService( sURL : String, serviceName : String )
	{
		super(sURL, serviceName);
	}
	
	public function echoData( swxlistener : ISWXListener, o ) : Void
	{
		super.callMethod(echoDataMETHOD, swxlistener, o);
	}
	
	public function addNumbers( swxlistener : ISWXListener, nFirst : Number, nSecond : Number ) : Void
	{
		super.callMethod(addNumbersMETHOD, swxlistener, nFirst, nSecond);
	}
}

[actionscript]
// -- SWXProxy Usage
var sGateway : String = "http://www.geturl.net/services/swx_php_1/php/swx.php";
var swxService : SWXSimpleService = new SWXSimpleService(sGateway, "Simple");
swxService.addNumbers(swxResponder, 100, 31);

SWXProxyLocator

Il s'agit d'une map qui permet de récupérer de façon global les différents service d'une application, basé sur le fonctionnement du FrontController -> http://blog.geturl.net/post/2006/10/27/63-pixlib-vues-modeles-controleur .

[actionscript]
class pixswx_first.net.SWXLocator 
	extends SWXProxyLocator
{
	private static var _oI : SWXLocator;
	public static var simpleSERVICE : String = "Simple";

	public static function getInstance() : SWXLocator 
	{
		if (!_oI) _oI = new SWXLocator();
		return _oI;
	}

	private function SWXLocator()
	{
		super();
	}

	public function init( remotingURL : String ) : Void
	{
		gatewayURL = remotingURL;
		Debug.INFO(toString() + " initialization with '" + gatewayURL + "' gateway url.");
		push(simpleSERVICE, new SWXSimpleService(gatewayURL, simpleSERVICE));
		// push all services
	}
}

à l'initialisation du site :

[actionscript]
SWXLocator.getInstance().init("http://www.geturl.net/services/swx_php_1/php/swx.php");

Ensuite :

[actionscript]
var swxService : SWXSimpleService = SWXSimpleService(SWXLocator.getInstance().getService(SWXLocator.simpleSERVICE));
swxService.echoData(new SWXResponder(this, onSWXResult, onSWXFault), "Hello World!");

Voilà pour ce tour d'horizon.

Je me suis très largement inspiré de l'API remoting que Francis a écrit, donc ce que j'ai écris au dessus est valable à peut de chose près pour les services en remoting (AMFPHP par exemple).

+ infos :

bye,

Laurent

[pixLib] - Je tween, tu tweens, nous multi-tweenons…

ali_o_kan — Thu, 11 Oct 2007 15:11:00 +0200

Aujourd'hui, petit tour du côté des transitions de pixLib.

Avec l'arrivé de Flash MX2004, on a vu apparaître les classes de transitions dans le dossier mx de Flash, pour beaucoup l'utilisation de la classe Tween est devenu quelque chose de courant, pour les autres petits cours accéléré.

Qu'est ce qu'une Tween ?

La classe Tween permet de réaliser une interpolation (modification dans le temps) sur une propriété numérique.

Exemple basic :

var tw:Tween = new Tween(obj, "nProp", null, 0, 100, 2, true);

Dans l'exemple ci-dessus on fait varier la propriété "nPop" de l'objet "obj" de 0 à 100 sur une durée de deux secondes. Sur cette classe vient se greffer, une série d'options, cf. l'API de la classe Tween de Adobe/Macromedia.

// fin du cours

Voyons maintenant ce que nous offre pixLib.

Commençons par le commencement, l'interface ITween < IBasicTween < Command.

Voici liste des méthodes que doit posséder une classe qui implémente ITween :

public function execute( e: IEvent ) : Void;
public function setEasing(f:Function) : Void;
public function start() :Void;
public function stop() :Void;
public function addListener(oL:ITweenListener) : Void;
public function removeListener(oL:ITweenListener) : Void;
public function addEventListener(e:TweenEventType, oL) : Void;
public function removeEventListener(e:TweenEventType, oL) : Void;

Cette interface est implémenté par cinq classes, chacune ayant un but différent : TweenFLV, TweenFPS, TweenMS, MultiTweenFPS, MultiTweenMS.

TweenFPS < BasicTweenFPS < AbstractTween

Hormis le changement d'ordre des paramètres, TweenFPS se construit de la même manière que la classe Tween de Penner (Adobe).

var t : TweenFPS = new TweenFPS(mc, '_alpha', 0, 30, 100);
t.start();

TweenFPS( oT, sP, nE:Number, nMs:Number, nS:Number, fE:Function);

oT - Objet cible.
sP - methode ou propriété qui serra modifié.
nE - valeur finale (but).
nFps - durée de la transition en images clés.
nS - (facultatif) valeur de départ (origine).
fE - (facultatif) fonction de transition (easing).

TweenMS < BasicTweenMS < AbstractTween

Cette classe peut-être comparé à une Tween de Penner qui prend true comme dernière paramètres, en fait la seule différence avec TweenFPS est que la durée est donné en mili-seconde et non pas en nombre d'image clés, ce qui en théorie évite d'avoir la durée de la transition lié au framerate de l'animation. Personnellement c'est le système que je privilégie.

TweenFLV < BasicTweenFLV < AbstractTween

Cette classe n'a pas d'équivalence dans le package d'Adobe, elle a pour particularité d'utiliser un VideoDisplay comme métronome. Ce qui peut-être utile pour synchroniser des animations avec un fichier vidéo.

var _video : VideoDisplay = VideoDisplay.buildVideoDisplay( video );
var t : BasicTweenFLV = new BasicTweenFLV(_video, 0, mc, '_alpha', 0, 2000, 100);
t.start();
_video.load( "video.flv" );

TweenFLV( vd:VideoDisplay, offset:Number, oT, sP, nEnd:Number, nMs:Number, nStart:Number, fE:Function);

vd - VideoDisplay utiliser comme métronome.
offset - offset :p
oT - Objet cible.
sP - methode ou propriété qui serra modifié.
nE - valeur finale (but).
nMS - durée de la transition en mili-seconde.
nS - (facultatif) valeur de départ (origine).
fE - (facultatif) fonction de transition (easing).

Voilà pour ce qui est des transitions basic. :)

Voyions maintenant les multiTweens : MultiTweenFPS && MultiTweenMS (Attention: la doc pour les multiTweens n'est pas à jour).

Basé sur le même principe que les tweens précédentes, les multiTweens peuvent recevoir un tableau d'éléments à modifier, Ce qui est très pratique lorsque par exemple on veut déplacer un élément sur la scène en _x et en _y.

exemple :

var t0:MultiTweenMS = new MultiTweenMS( mc, ["_x", "_y", "_alpha"], [600, 500, 0], 1200 );
var t1:MultiTweenMS = new MultiTweenMS( [mc0, mc1, mc2], ["_x", "_y", "_alpha"], [600, 500, 0], 1200, [0, 0, 100] );
var t2:MultiTweenMS = new MultiTweenMS( this, "arrayProperty", [600, 500, 0], 1200 );

Voilà pour le petit tour d'horizon concernant les Tweens dans pixLib.
bye

Pour aller plus loin :

[pixLib] - métronome et temporisation, les tweens utilise comme système de temporisations les Beacons.
[pixLib] - Une programmation événementielle typée, pour mieux comprendre le système événementielle de pixLib.
Introduction à Kairos et au temps réel, Kairos est une extension de pixLib permettant de développer des applications dites temps réel.

[Clermont] - Une ville de sportifs…

ali_o_kan — Tue, 22 May 2007 00:05:20 +0000

Si j'avais su !?

Je me serais entraîné plus sérieusement!

3 jours/nuits de folies! Je vous le fais version télégraphique.

Dimanche soir stop

Petit chinois arrosé de saké pour se mettre en jambe. stop

Lundi stop

7h30, prêt à l'attaque!!! stop
9h30, petit tour de table, présentation générale stop
10h00, installation de l'environnement de travail (sous windaube :s ) stop
12h00, manger pizza stop

13h30, café stop
13h31, découverte MVC Global, pixLib AS2, lowRA AS3 !stop
16h30, fin du 1er round stop

17h00, arrivé au 24 stop
17h01, fermé stop
17h07, visite guidé de périscope stop
17h30, arrivé au 24 stop
17h31, fermé stop
17h35, bière en terrasse stop
19h00, arrivé au 24 stop
19h01, ouvert, chouette stop
19h16, photo de groupe stop
19h17, 1er Mojito stop
…
22h30, restauration stop
23h00, 1er B52 stop
2h00, goto('home'); stop

Mardi stop

7h30, prêt à l'attaque! stop
8h45, café stop
9h00, Test Unitaire - AS3 stop
12h00, pizza 2° stop

13h30, café++ stop
13h32, Ant, Antelope&co stop
16h30, fin 2e round stop

17h00, Apéro en compagnie d'une partie de la prizeeTEAM. stop
19h00, goto 24; stop
…
21h00, débat politique (I'm a troll) stop
…
2h00, goto L'Atelier stop
…
4h30, goto Francis stop
…
7h30, petite sieste stop

Mercredi stop

8h15, Toujours vaillant stop
9h00, Café + H20 + café stop
9h05, IOC introduction stop
12h00, pizza 3° stop

13h30, café + H2O + café stop
13h31, IOC création d'un plugin stop
16h30, débriefing

17h-18h30, adieu :s stop
19h, sieste stop
20h30, petit indien en charmante compagnie ( Mick, merci pour ce repas ) stop
22h, goto 24; stop
…
2h00, goto Le Velvet stop
…
5h00, goto The MCdo stop
…
7h00, goto Francis home stop

Au premier abord on ne ressent pas bien le coté humain de ce séjour, pourtant s'il y a bien une chose que je retiendrai de cette formation ce sont les rencontres que j'y ai fait.

Christophe, François, Jérôme, SkewMan, Julien, St3F, Francis,… Quand vous voulez pour la revanche.

D'autre billets plus concret suivront sur le contenu de la formation. C'est Caroline qui va être contente.

[workshop] - pixLib – pixIoC / LowRA

ali_o_kan — Wed, 11 Apr 2007 10:35:26 +0000

Une annonce qui est tombé la semaine dernière sur la mailing-list de pixLib.

Prizee organise mi-mai une formation de 3 jours sur pixLib, pixIoC et LowRA donné par Francis.

J'en serrais

info +

[Pixlib] Formation F.Bourre

Attention

Les dates ont changé, donc la formation aurra lieu du 14 au 16 mai 2007.

[Recherche] - Freelance Dev Flash

ali_o_kan — Mon, 26 Mar 2007 11:10:06 +0000

Salut,

Depuis plusieurs semaines je croule sous le boulot, et je recherche désespérément des développeurs Flash pour m'alléger la charge de travail. :p

Profile recherché :

Utilisateur de MTASC, FDT, SVN (trac).
La connaissance de pixLib est un plus.

Sinon les classiques :

Maîtrise AS2.
Notion avancé de POO.
Sensibilisé aux Design Patterns.

Si vous n'avez pas encore fuit à la lecture des ces lignes et que vous êtes intéressé :

sendTo( cv + prix_horaire, "laurent@VIVE_LE_SPAMget-url.net");

Bonne journée.

[MAJ] - La demande n'est plus aussi urgente. Mais n'hésitez pas à m'envoyer vos coordonnées, je les garderait précieusement. Merci à toutes les personnes qui m'ont répondu.