A Flex & Adobe AIR Blog

Un "Hello 3D World" en Blender, animé en Flash avec Papervision3D

scoutant — Fri, 26 Feb 2010 21:35:00 +0100

Démo

Passez la souris sur l'objet 3D ci-dessous...

You need JavaScript enabled!

Ouai, c'est donc un Hello World pour valider l'intégration du modeleur 3D Blender avec la librairie Papervision3D pour application Flash.

Avec aussi animation de rotation 3D et le calcul d'ombres temps réel qui va avec...

Modélisation Blender et export au format Collada

Bon, quelque soit le modeleur 3D qu'on utilise (3ds Max, Maya, SketchUp, Blender), au départ il y a un petit temps d'apprentissage.

Avec blender.org, on est en plein dans le développement durable : logiciel libre, multi-plateforme. Ya plein de doc en ligne et pour n'en citer qu'une : http://en.wikibooks.org/wiki/Blender_3D:_Noob_to_Pro.

Après s'être familiarisé aux divers raccourcis clavier et techniques de modélisation comme l'extrusion, on peut construire sa première scène 3D.

Ensuite on peut exporter au format COLLADA. Un format d'échange standard en XML. Avec Blender, c'est simplement File>Export>Collada 1.4. On cochera les options :

Triangles
Only export selection

Effectivement notre librarie Papervision 3D fonctionne exclusievment par modélisation à l'aide de triangles.

Import dans appli Flash avec librairie Papervision 3D

Mise en place du projet Flex avec Papervision3D

Donc maintenant on est dans Eclipse avec typiquement Flash Builder 4. Enfin moi je préfère Flex Builder 3 / Linux. Ya plus qu'à télécharger Papervision3D : http://code.google.com/p/papervision3d. Au choix directement la librairie .swc ou alors le .zip avec le code source.

Pour explication des concepts de base de papervision3d on pourra juste lire l'article : first-application-with-papervision3d.

Effectivement il faut saisir le pourquoi de la source lumineuse et de la caméra et voir ou les placer par rapport à l'objet cible.

Un modèle de projet évoqué dans la partie "smart programmers use less code", servira de base. Ca peut servir de base, par exemple :

public class LegoWithLightAndShader extends BasicView {
    public function LegoWithLightAndShader() {
      super(0, 0, true, false);
      init();
    }
 
private var model:DisplayObject3D;
    private function init():void {
    opaqueBackground = 0xffffff;
      camera.x = 0;
      camera.y = 400;
      camera.z = -550;
 
      light = new PointLight3D(true);
      light.x =  100;
      light.y = 1000;
      light.z = -700;

Import du modèle .dae

private var model:DisplayObject3D;
		model = new DAE();
		(model as DAE).load("assets/MyLegoSample.dae");

Donc on le voit, l'import est très simple. Suffit de sourcer le fichier .dae.

Annimation de rotation via la souris

private var vpX:Number = stage.stageWidth/2;
    private var vpY:Number = stage.stageHeight/2;
    override protected function onRenderTick(event:Event=null):void {
      var angleX:Number = (mouseY - vpY) * .5;
      var angleY:Number = (mouseX - vpX) * .5;
      model.rotationZ = -angleY;
      model.rotationX = -angleX;
      super.onRenderTick(event);
    }

Oui, on peut choisir d'effectuer une rotation du modèle sur la base de la distance de la souris par rapport au milieu de l'écran. Maintenant, on a une animation correcte, mais le résultat est beaucoup trop médiocre.

You need JavaScript enabled!

Effectivement, on n'a pas de gestion d'ombres : les arrêtes ne se démarquent pas et on ne voit de distinction entre les faces. Alors que les yeux et le cerveau ont l'habitude de reconstituer le 3D justement via des modifications d'intensités lumineuses entre les faces de l'objet...

Gestion des ombres

Matériaux et import Blender -> Papervision

On peut avoir fait une modélisation Blender avec des matériaux présentant réflexion et réfraction. Mais à l'import du .dae, ceci est perdu et le modèle papervision3d instancié ne présente que des matériaux ColorMeterial. Donc sans calcul d'effet de lumière!

Choix des matériaux dans Papervision3D

Au prix d'un surcoût CPU, on peut induire papervision à une gestion fine de la lumière. Au lieu de ColorMaterial, on optera pour :

FlatShadeMaterial
GouraudMaterial
PhongMaterial

Pour le premier, il s'agit d'un calcul global pour chaque face (triangle) de l'objet par rapport à la source lumineuse.

Le dernier est beaucoup plus réaliste (et couteux) avec une approche pixel par pixel. Le deuxième est un compromis : calcul triangle par triangle et interpolation pixel par pixel.

Pour notre Hello 3D World, très cubique, la première approche est parfaite.

Remplacement des materiaux en runtime

Reste à remplacer le ColorMaterial introduit lors de l'import par une instance de FlatShadeMaterial.

model.addEventListener(FileLoadEvent.LOAD_COMPLETE,modelLoaded);
 
	private function modelLoaded(e:FileLoadEvent):void		{
   		model.replaceMaterialByName(  new FlatShadeMaterial(light, 0xFFEEFF, 0x220000), "RED");
	}

Il suffit d'utiliser la méthode replaceMaterialByName(). Et de remplacer le matériaux dans le dictionnaire relatif à l'objet. Tout simplement!

On trouve plusieurs posts qui font état d'un fonctionnement étrange de Papervision (en tout cas jusqu'à 2.1). On peut tenter d'instancier un MaterialList, d'ajouter le matériau cible et de remplacer l'ancien via model.materials = ... Mais ceci n'a pas d'effet. Pourquoi?

Bon, on n'a pas toujours réponse à tout. L'essentiel est d'avoir une solution qui marche.

C'était la démo présentée en introduction.

Avec ce Hello 3D World, on a vu le chemin d'intégration Blender -> Papervision 3D. Incluant animation de rotation et surtout gestion réaliste de la lumière.

Sculpture numérique et visite virtuelle

On pourra maintenant sereinement retourner à Blender et faire un peu de sculpture numérique. On sait qu'on pourra ensuite exposer son chef d'oeuvre dans une simple application Flash, permettant au public une découverte sous tous les angles...

Si on fait une modélisation avec lissage, on préfèrera alors la mise en oeuvre d'un PhongMaterial, pour un calcul pixel par pixel de la lumière et un rendu des plus réalistes.

FlexUnit4 and Flash Builder 4 in action - A FlexUnit4-power TDD Use case

scoutant — Wed, 28 Oct 2009 21:38:00 +0100

FlexUnit4 Use case : a Reverse Polish Notation Calculator

You need JavaScript enabled!

A nice introduction is the Wikipedia page on Reverse Polish Notation ^[1].

In Reverse Polish notation the operators follow their operands; for instance, to add three and four, one would write "3 4 +".

Let's play with the calculator above. It is a live Flash application.

Type some digits and press ENTER so as to push a number to the stack. When you have two numbers in the stack you can hit a binary operator key like '+' or '*'. The 2 operands will be consumed and the result will be push to the stack. As an option you can use keyboard shortcuts.

The requirements are easy to express. And present use case is prone to a test-driven development approach. And in our simple case, it is realy close to feature-driven development.

Test-driven development

Googling, you'll find many references and even books on TDD.

To make it short , the point is to write the test code before the target code.

So we have micro development cycle :

adding a test method and do the least for the test to compile
run the unit test and notice that it fails : RED state in the unit-test report panel
implement the target logic : you are not finised until the unit test succeed : GREEN state.

All the unit test are independent one from each other. So that they can be cumulated in unit-test campain that are to be run before any code is commited.

With that test automation infrastucture, you can now feel confident to refactor often your code : within some seconds you can have feedback in case of any regression.

But what about TDD for AS3 and Flex developpement?

ActionScript and Flex TDD out there?

It's true, there are not that many reference on test-driven development when talking about GUI.

Okay you will find the FlexUnit page @ Adobe Dev Net ^[2]. And some other references.

But FlexUnit is not integrated to Flex Builder, so that very few project have adopted a true TDD approach.

Next generation FlexUnit4 and Flash Builder 4 enabling true AS3/Flex TDD

Compared to Flex Builder 3, Flash Builder 4 comes with a major feature : a true unit testing support. With both :

TestCase class generation wizards and
the possibility to run a TestCase from the IDE without the bowler-plate of defining any test suite nor test app.

Moreover, after (too) many years of FlexUnit 0.90, Adobe has at least decided to put some effort in a next generation unit-test framework. We have a upcoming FlexUnit4 framework ^[3].

As you can see, it's an adaptation of JUnit4, the annotation-driven unit-test java support. Comprehensive illustration following at this post : http://www.insideria.com/2009/05/flashbuilder4-will-support-fle.html .

A true development workflow sample will surely best describe the benefits of the soon to be released tdd support with Flex4 ecosystem.

Today we will use the available releases : Flash Builder 4 beta 2 and FlexUnit4 beta 2 turnkey distribution. I suppose FlexUnit4 will be fully integrated to the IDE, but with beta release, a last step is necessary o set up the environnement.

FlexUnit4 Turnkey distribution is a Flex4 project you can import with Flash Builder 4 Import wizard.

A step by step true TDD sample : writing the AS3 test cases before the target code

Let's write AS3/Flex code meeting the RPN Calculator requirements. Let's create a Flex projet, called rpn. The TDD-style drives us to first write the TestCase. Let's do so using the 2 wizards mentionned above.

Create an AS3 TestCase class using wizard

Let's instanciate a Calculator from the FlexUnit4-powered CalculatorTest class below :

package org.scoutant.rpn {
	public class CalculatorTest {	
		protected static var calculator:Calculator = new Calculator();
		}
	}
}

Notice how our test case does not need to inherit any test case base class (as with FlexUnit 0.90). Obviously, it won't compile :

We need to define the Calculator class.

Create now the target class

JUnit4 integration within Eclipse is somewhat more powerfull : the quick-fix feature suggest the Java developer the generation of corresponding class. With Flash Builder 4 beta2, we'll have to do it manually. But this is not a big deal.

package org.scoutant.rpn {
	public class Calculator {
		public function Calculator() {
		}
	}
}

Okay, now it compiles. We can begin the the iterative tdd workflow at method level.

Create a FlexUnit4 test method

Writing unit-test method code

Let's consider the single following feature : pressing the digits composing a number and when done : validating with an enter action. And notice how the number is now on top of the stack. An AS3 represnetation of that could be :

[Test]
public function enteringAnOperand(): void {
  calculator.enter( 3);
  Assert.assertEquals( 3, calculator.peak());
}

The test method name does not matter. With FlexUnit4 it does not need to be prefixed by test. What matter is the Test metadata. Just like JUnit 4 is based on Java annotations.

Now we have the unit test. It does not compile :

If needed adding the API code for the test to compile

Let's just define the mentionned enter(.) and peak() method.

public function enter(operand : Number) : void {
}
public function peak(index:int = 0) : Number {
  return NaN;
}

Now it compile. We can run the test. To do so with beta2 release, we need to select the test case in the explorer view : the contextual menu, with right click, shows Executes FlexUnit Tests. Of course the test fails. But we have bow the test infrastucture up and we can focus on implementing the target logic.

Implement the logic meeting that small piece of requirment.

A little bit of design : the Calculator requirement are somewhat similar to a Last-in first-out stack:

pushing items,
popping the two top-most items so as to operate them

Hence, our Calculator class may be based on an AS Array. Yes, the Array API comes with push(.) and pop() methods.

private var stack : Array = [];
public function enter(operand : Number) : void {
	stack.push( operand);
}
public function peak(index:int = 0) : Number {
	return stack[ index ];
}

Now we run the test and it turns to GREEN.

We are done with the feature. BUT a unique test for a feature may not be enough a validation.

a second unit-test method for same feature

[Test]
public function enteringTwoOperandsAndReadin(): void {
	calculator.enter( 3);
	calculator.enter( 6);
	Assert.assertEquals( 6, calculator.peak());
}

The test above test that the number that is pushed last, is actually retrieved by peak() method. The test compiles, let's run it to verify that the test passes.

Fixing the bug

It is not expected, the test fails! we have the RED bar. We must fix that before considering any other feature.

Notice the advantage of our tdd approach and it's micro cycles. The bug introduced by the implementation above is discovered with a minute of time!

We know that the cost of a bug is exponential to the time elapsed since it was intoduced. Here our tdd approach will minimize that cost.

public function peak(index:int = 0) : Number {
	return stack[ stack.length -1 - index ];
}

Yes the AS3 Array has a stack API : push(.) and pop(). But no peaking feature. Our first implementation was not LIFO-consistent.

After refactoring the index as above. We can run the test-case. We can see how the last test turns GREEN.

We can now consider next feature, for instance adding two operands.

TDD of next feature : adding two operands

implementing a test method

Let's enter 2 operands and hit the "+" operator. We want the 2 last operands to be consumed and the sum to be push into the stack. A test may be :

[Test]
public function addingTwoOperands():void {
	calculator.enter( 3);
	calculator.enter( 6);
	calculator.add():
	Assert.assertEquals( 9, calculate.peak() );			
}

For the test to compile we need to define the methode add() .We can begin with an empty method body. The test compiles.

We run it and we have the RED state.

! implementing the logic 
public function add():void {
	stack.push( stack.pop() + stack.pop() );
}

With the above implementation our test turns to GREEN.

Expressing an espected Error with FlexUnit4

As in previous cycle we'll add more test to validate the target add() method.

The "+" operator is assuming to find two operands in the stack. If none or only one is available we want the calculator to raise an error.

The GUI shall give an error feedback the the user.

Compared to FlexUnit 0.90, FlexUnit4 provides an interesting feature. The possibility to express that a test is supposed to raise an error.

[Test (expects="Error")]
public function addingButNoOperand():void {
	calculator.add();			
}

We are mentionning that we expect an error: the test case will be green if we actually have the error. Let's run the test.

Fixing the bug

We expect our add() method to raise an error. But corresponding assertion (expects="Error") is not validated.

We need to refactor our add() implementation. Looking att the AS3 Array reference documentation, we discover that popping an empty array does raise an Error but silently returns null.

We are not happy with that so let's add an applicative precondition and raise an ArgumentError if the stack has less that 2 operands.

public function add():void {
	if (stack.length < 2) {
		throw new ArgumentError();
	} 
	stack.push( stack.pop() + stack.pop() );
}

Now , running the test, yes it is GREEN. Let's add a second test, just to be sure that if we none operand, we do have an error too:

[Test (expects="Error")]
public function addingButNoOperand():void {
	calculator.add();			
}

The test case is still GREEN.

More tests for same feature

Lets add a test case with negative number and mixing integrer and Numbers...

[Test]
public function addingNegativeOperand():void {
	calculator.enter( -3);
	calculator.enter( -6);
	calculator.add();			
	Assert.assertEquals( -9, calculator.peak() );			
}
[Test]
public function addingIntegerAndNumberOperand():void {
	calculator.enter( 3);
	calculator.enter( 6.1);
	calculator.add();			
	Assert.assertEquals( 9.1, calculator.peak() );			
}

Still GREEN. we can can confidently consider implementing next feature.

TDD of similar feature (multiply operand) : copy and paste both the test fixture and the business logic

We can feel that the "*" operator is very much similar to the "+". Both are binary and symetrical. The code can be very similar. We can copy and paste both the test methods and the target logic.

But to prevent any mismatch, best is to abide to the RED before GREEN principle. So we can copy and adapt the test fixture. And verify the no compilation or the RED state.

TDD of next feature (substract operand)

Operating as above, we first provide the test fixture mentionning a substract(). Compile error. And by similarity we provide following implementation :

public function substract():void {
	if (stack.length < 2) {
		throw new ArgumentError();
	} 
	stack.push( stack.pop() - stack.pop() );
}

We just replaced "+" by "-" in the implementation. We can run the test.

Fixing the bug

It's NOT green. We must correct the implementation! The Substract operator is not symetrical ; and obviously the add template has to be adapted : Let's replace with :

public function substract():void {
	if (stack.length < 2) {
		throw new ArgumentError();
	} 
	stack.push( - stack.pop() + stack.pop() );
}

Now it turn to green. Thanks to our TDD approach we corrected the bug no later that 30 seconds after the bug was introduced.

Let's go on with division operator.

Next feature ( division operator)

The operator is not symetrical and we'll take care.

[Test]
public function divideTwoOperands():void {
	calculator.enter( 8);
	calculator.enter( 2);
	calculator.divide();
	Assert.assertEquals( 4, calculator.peak() );			
}

Let's implement the missing divide() method. It is a binary and orientated operator like the substract one. Let's take it as template :

public function divide():void {
	if (stack.length < 2) {
		throw new ArgumentError();
	} 
	var dividend:Number = stack.pop(); 
	stack.push( stack.pop() / dividend );
}

Here no surprise, it's GREEN.

Next feature ( unary square root operator)

unit-test fixture and target implementation

[Test]
public function squarreAnOperand():void {
	calculator.enter( 1024);
	calculator.sqrt();
	Assert.assertEquals( 32, calculator.peak() );			
}

Not compiling. We add en empty sqrt() implementation. RED state.

We may consolidate with following implementation.

public function sqrt() : void {
	if (stack.length < 1) {
		throw new ArgumentError();
	} 
	stack.push( Math.sqrt( stack.pop() ));
}

Now it turns GREEN.

Additional fixture for square root of negative number

Let's add an additional test fixture. For a negative number we want an error (we are not onsidering complex number).

[Test (expects="Error")]
public function squareRootNegativeNumber():void {
	calculator.enter( -1);
	calculator.sqrt();
}

Result.

Fixing the expectation

It is NOT green. We expected an Error.

But diving into the AS3 doc, we can see that Math.sqrt() calculation actually does not raise an error for negative nymbers : it just returns NaN...

Let's manually raise the expected Error.

public function sqrt() : void {
	if (stack.length < 1) throw new ArgumentError();
	if ( this.peak() < 0 ) throw new ArgumentError();
	stack.push( Math.sqrt( stack.pop() ));
}

Now it's GREEN.

Now our Calculation logic seems to be finished.

Next step is to wrap it with the GUI components.

GUI wrapping

We can now develop the GUI against our unit-test Calculator class. Not only the Calculator class is tested but moreover the feature are clear. We have a somewhat a feature-driven approach.

Now we can take advantage of one of Flex4 main feature : the FXG skinning architecture. We can first develop a squetch GUI based on simple buttons.

Micro architecture

We have the Calculator.as logic.

We'll implement a rpn.mxml application. Our RPN Calculator mostly has a sreen representing the stack and buttons : digits and operator.

Bas practice is to consider all the GUI stuff in a single .mxml file. Even more when targetting Flex4 FXG skinning feature.

We'll at least consider Digit.mxml an Operator.mxml files.

Component layout

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:rpn="org.scoutant.rpn.*"
  >
<s:layout>
  <s:VerticalLayout/>
</s:layout>
<fx:Script>
  <![CDATA[
  [Bindable] public var calculator:org.scoutant.rpn.Calculator = new org.scoutant.rpn.Calculator();
  [Bindable] public var line:String = "";
  ]]>
</fx:Script>
. . .
<s:SkinnableContainer width="100%">
  <s:layout>
    <s:HorizontalLayout/>
  </s:layout>
  <rpn:Digit id="_7" label="7"/>
  <rpn:Digit id="_8" label="8" />
  <rpn:Digit id="_9" label="9" />
  <rpn:Operator id="DIVIDE" label="/" operator="{calculator.divide}" />
  <s:Button label="1/x" />
</s:SkinnableContainer>
. . .

Connecting the logic to the GUI : with method inection

<rpn:Operator id="DIVIDE" label="/" operator="{calculator.divide}" />

The line above is instanciating a component (named Operator.mxml here). And we are injecting an AS3 method : {calculator.divide}.

The operator.mxml component is a normal Flex Button : the click handler will execute the operator.

The operator may be defined as a AS 3 variable of type Function. So that the function maybe injected as seen above.

<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:s="library://ns.adobe.com/flex/spark" 
  click="execute()"
  >
  <fx:Script>
    <![CDATA[
      [Bindable] public var operator:Function;
      public function execute():void{
        operator();
      }
    ]]>
  </fx:Script>
</s:Button>

Above we could he logic beeing invoqued with a user gesture : hiting the "DIVIDE" button invoques the Calculator divide() method.

As a feedback we expects now the "sreen" to be updated with the new stack content. Flex data-binding is the best friend for that!

Connecting the GUI to the logic : with data-bindig

We cannot use the peak() method for the data-binding. We need to bind to a specfic property or accessor. It could be :

<s:Label textAlign="right"  text="{''+calculator.stack[calculator.stack.length-1]}" />

Here the compiler warns us.

I would say an other way : the Array class is not an EventDispatcher.

Hence we may refactor the Calculator class. We can wrap the Array with an ArrayCollection that is an EventDispatcher.

public class Calculator {		
  [Bindable] public var lifo:ArrayCollection = new ArrayCollection();
  private var stack : Array = lifo.source;

Now we can express the data-binding with getItemAt(.) expression. Just like the compilatior Quick Fix suggested.

<s:Label width="100%" textAlign="right" text="{''+calculator.lifo.getItemAt( calculator.lifo.length-1)}" />

Now the user has the desired feedback. HP 28 S Calculator ^[4] has a 4-line screen, in a bottom up fashion. Could be :

<s:Label width="100%" textAlign="right" text="{''+calculator.lifo.getItemAt( calculator.lifo.length-4)}" />
<s:Label width="100%" textAlign="right" text="{''+calculator.lifo.getItemAt( calculator.lifo.length-3)}" />
<s:Label width="100%" textAlign="right" text="{''+calculator.lifo.getItemAt( calculator.lifo.length-2)}" />
<s:Label width="100%" textAlign="right" text="{''+calculator.lifo.getItemAt( calculator.lifo.length-1)}" />

Now we have a functionnal RPN Calculator.

You need JavaScript enabled!

It was not the point in present post, but all the components used here inherits from Flex 4 Spark SkinnableComponent. In next post, we'll see how to write Skin mxml components. That can be referenced to as to have a nice RPN Calculator. With very few changes to our application, only specifying the skinClass property for our Skinnable Compoents...

Notes

[1] Reverse Polish Notation : http://en.wikipedia.org/wiki/Reverse_Polish_notation

[2] FlexUnit : Unit testing and Test Driven Development (TDD) for Flex and ActionScript 3.0

[3] FlexUnit4 : Major New Features of FlexUnit 4

[4] HP 28 S Calculator : photos

Hosting a PHP proxy and enabling Flash app to talk cross-domain

scoutant — Mon, 27 Apr 2009 21:46:00 +0200

FlashPlayer and cross-domain policy file

FlashPlayer offre une politique de sécurité rassurante : une application Flash chargée depuis un domaine A ne pourra consommer des services web depuis un autre domaine B.

Il est possible de configurer cette politique de sécurité. Considérons que le domaine cible B juge qu'il est opportun de servir les requêtes issue d'une appli Flash téléchargée depuis le domaine A. Alors il suffit que B expose, à la racine, un fichier crossdomain.xml qui alloue les droits correspondants.

Pour exemple, Delicious expose un fichier qui donne accès à toutes les appli Flash téléchargées depuis n'importe où : http://feeds.delicious.com/crossdomain.xml. Si vous suivez le lien, il faut éventuellement Afficher le code source.

<cross-domain-policy> 
  <allow-access-from domain="*" /> 
</cross-domain-policy>

C'est ce qui a permis de faire l'animation Flash d'un nuage de tags Delicious, DeliSphere, a Flash 3D-animation tagcloud for your Delicious bookmarks .

Google, Youtube, Fickr et d'autres exposent également une politique Flash-friendly : par exemple : http://api.flickr.com/crossdomain.xml .

Un Proxy !

Maintenant, si le provider de service n'est pas aussi accueillant pour les application Flash, on a la possibilité d'implanter un service de proxy qui prendra en charge de relayer les requêtes avec une autre technologie de client. On implante un tel service dans le même domaine qui sert l'application Flash : vis-à-vis de la VM FlashPlayer, on n'est plus dans une situation de cross-domain.

Proxy en Java avec BlazeDS

Adobe propose pour cela une solution toute prête. BlazeDS ^[1], la solution open-source de remoting AMF3, intègre un service de proxy.

Coté développement Flex, il suffit alors tout simplement de positionner sur les divers objets de communication la propriété useProxy en conséquence.

<mx:HTTPService url="" useProxy="true" />

BlazeDS est la meilleure solution que l'on retiendra dans tous les cas industriels. Techniquement, il s'agit d'une librairie Java, ce qui suppose donc un hébergeur en Java...

Proxy en PHP pour les hébergements restreint au PHP

Ce présent blog est hébergé chez OVH et comme c'est souvent le cas l'hébergeur propose du Php mais pas du Java. Une solution, consiste alors à écrire un service de proxy en PHP.

C'est ce qui est mis en oeuvre par le démonstrateur Velib en Flash

<mx:HTTPService id="phpProxiedService" 
  url="http://flex.scoutant.org/php/proxy.php" method="GET"
  resultFormat="e4x" useProxy="false" 
  result="doLoad(event)" fault="faultHandler(event)"/>

public function start( marker:StationMarker):void {
    phpProxiedService.request.url = this.url + marker.station.num;
    var token:AsyncToken = phpProxiedService.send();
    token.marker = marker;
 }

Ici l'objet de communication, le HTTPService, pointe vers le service de proxy, en l'occurrence : http://flex.scoutant.org/php/proxy.php. Ce service fait maison propose l'API simpliste suivante : la requête doit présenter un paramètre url indiquant l'url cible.

Voici ci-dessous le code du service proxy, avec utilisation d'un client curl, pour lequel on positionne l'url cible via le paramètre de requête $_REQUEST['url'].

<?php
$ch = curl_init();
$timeout = 30;
$userAgent = $_SERVER['HTTP_USER_AGENT'];
 
curl_setopt($ch, CURLOPT_URL, $_REQUEST['url']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
 
$response = curl_exec($ch);     
 
if (curl_errno($ch)) {
    echo curl_error($ch);
} else {
    curl_close($ch);
    echo $response;
}
?>

On pourra se référer au billet Using a PHP Proxy with Flex to talk Cross Domain , pour un peu plus de détails.

Proxy en BlazeDS sur hébergement GoogleAppEngine?

Le service d'hébergement GoogleAppEngine a été étendu à la technologie Java ^[2].

Du coup, on peut utiliser BlazeDS? Je n'ai pas fait le test, mais le billet suivant fait un constat négatif : GoogleAppEngine and BlazeDS : la package java.lang.management n'est pas autorisé...

Notes

[1] Adobe open Source : BlazeDS

[2] Google App Engine : The new language on App Engine

Velib en Google Maps API For Flash - un MakerManager pour des performances!

scoutant — Thu, 05 Feb 2009 21:38:00 +0100

Vous cherchez un vélo en libre service? velib.paris.fr vous présente les stations avec la disponibilité des vélos et la disponibilité des emplacement libre pour le retour. C'est une appli JavaScript qui utilise l'Api historique de Google Maps.

On peut faire l'équivalent en Flex en utilisant Google Maps API For Flash.

You need JavaScript enabled!

On peut aussi en faire une version full screen, voir la démo.

Dans ce cas, il faut faire attention aux performances : on n'ap as envie d'avoir d'à-coups quand on déplace la carte. Mais a Paris il y a plus de 1000 stations Velib ; et une grande Google Maps avec 1000 markers c'est saccadé!

Pour ca, la solution est l'utilisation d'un MarkerManager disponible dans une librairie complémentaire à la Google Map API. Il s'agit de la Google Maps Utility Library également disponible en version AS3 : gmaps-utility-library-flash.

Ce gestionnaire accroit fortement les performances, car seuls les markers qui sont dans la viewport sont réellement gérés.

L'utilisation est très facile, on instancie un Manager attaché à la map et ensuite les markers on les ajoute au gestionnaire plutôt que directement à la Google map.

mgr = new MarkerManager(map, null);

Quand on dé-zoom, on a naturellement plus de marker dans la zone visible. Le MarkerManager permet de se protéger de ceci : quand on ajoute un marker à la map, on précise à partir de quel zoom il devient visible.

L'exemple suivant parle de lui-même : pour une carte météo nationale, une seule icone soleil suffit pour une région et c'est seulement quand on zoom dans une région qu'i lest intéressant d'afficher les marqueurs relatifs à une météo plus locale. L'idée d'un nombre constant d'informations quel que soit le niveau de zoom est intéressante.

Justement quand on ajoute un marker, on est amené à préciser l'intervale de zoom pour lequel le marker est visible, parexemple :

mgr.addMarker(marker, 16, 17);

Vois avez sans doute cliqué sur l'un des markers : ca vous affiche la disponibilité de la station. Dans un prochain billet, un focus portera sur l'invocation du service web qui permet d'optenir les infos de disponibilité.

Ouai, mais on voit déja poindre les intérrogations sur comment est alors traité la politique de cross-domain. Vous pouvez déja lancer un sniffer réseau sur la démo ou aussi attendre le prochain billet.

SharedObject to persist your Flash app state - A Design canvas sample

scoutant — Tue, 30 Dec 2008 16:02:00 +0100

You need JavaScript enabled!

Move some figures arround, press Save, Close app, Re-open and notice how figure location is persisted... View source code ^[1]

Shared Object

Une application Flash a accès au file-system de façon très restreinte, via la technique des SharedObjet. A l'image des Cookies pour les applications web.

Dans le cas de l'application Flash, on dispose d'un espace de stockage, in fine, orienté objet : tout objet (ou grappe d'objet) AS3 peut être sérialisé en AMF3 pour être stocké sous forme de SharedObject. Pour que la dé-sérialisation opère correctement il convient d'enregistrer les classes, typiquement avec le meta-tag RemoteClass.

package model {
	[RemoteClass( alias="model.ImageVO")]
	public class ImageVO {
		public var source:String;
		public var x:Number;
		public var y:Number;
        }

Write

Ensuite, comme le monte la doc ^[2], il convient d'obtenir un SharedObject pour une nom donné, de lui adjoindre des données, et de réaliser l'écriture avec la méthode flush().

var mySO:SharedObject = SharedObject.getLocal("chessboard");
mySO.data['figure'] = new ImageVO('King.gif');
mySO.flush();

Read

Pour la lecture, c'est tout a fait similaire, sauf que l'on opèrere un down-cast pour promouvoir le typage fort.

var mySO:SharedObject = SharedObject.getLocal("chessboard");
var figure:ImageVO = mySO.data['figure'] as ImageVO;

Serializing UIComponents?

Notre exemple d'échiquier, est un simple Canvas qui contient des Images. L'exemple illustre également le déplacement d'image via Drag & Drop, explicité dans le post ^[3].

L'approche naïve, consiste dans un premier temps à tenter de sérialiser le Canvas ou les images. Cela ne fonctionnera pas. Un UIComponent comporte des centaines de propriétés et en générale on veut juste stocker quelques propriétés : dans notre exemple le positionnement x et y et la source pour une Image...

D'où la classe ImageVO, vue ci-dessus. C'est cette classe qui sera persistée. Il s'agit alors de prévoir l'instantiation d'une mx.controls.Image à partir de notre ImageVO. Plusieurs approches sont possibles ; on peut prévoir une sous-classe de Image qui ajoute simplement les accesseurs à la ValueObject correspondante :

public class ImageUI extends Image {
		public function get vo() : ImageVO {
			return new ImageVO( source, x, y, width, height);
		}
		public function set vo(ref:ImageVO):void {
			source = (ref!=null ? ref.source : null) ;
			width = ( ref!=null ? ref.width : 0);
			height = ( ref!=null ? ref.height : 0);
			x = ( ref!= null ? ref.x : 0);
			y = ( ref!= null ? ref.y : 0);
		}
       }

Pour bien faire, on aimerait bien ajouter un constructeur d'Image sur la base de son VO correspondant. Mais l'AS3 ne permet pas d'avoir plusieurs constructeurs, on peut en alternative opter pour une méthode statique de fabrication. Par exemple :

public static function newImage( vo:ImageVO, mouseDownCallback:Function=null) : ImageUI {
			var ref:ImageUI = new ImageUI();
			ref.vo = vo;
			return ref;
		}

Muni de cette classe l'instantiation d'un UIComponent à partir du SharedObjet correspondant est très simple. Reste simplement à voir comment se présente la persistance pour une collection d'instance.

Array of data

Comme on a affaire à une vrai sérialisation AMF3, on peut aussi sérialiser directement un tableau d'objets. Par exemple :

private function doSave():void {
            	mySO.data['figures'] = board.getChildren().map( function( item:ImageUI, index:int, arr:Array):ImageVO { 
                     return item.so
                 } );
            	mySO.flush();
            }

Notes

[1] http://flex.scoutant.org/download/s...

[2] SharedObject : http://livedocs.adobe.com/flex/3/langref/flash/net/SharedObject.html

[3] flex.scoutant.org/post/2008/10/No-Move-API-for-Flex-Falling-back-Drag-Drop-API

Adobe MAX 2008 Milan - FlexBuilder 4 Early Access

scoutant — Sat, 13 Dec 2008 17:56:00 +0100

L'Adobe MAX Europe 2008, à Milan, à été l'occasion de nombre d'annonces et de démonstrations.

Ci-dessous quelques-unes d'entre-elles. Avec, à la fin, un focus sur les nombreuses nouveautés de l'environnement de développement FlexBuilder 4.

Flash Catalyst est un outil de design RIA anciennement connu sous le nom de projet Thermo.

Flash Catalyst est pour l'instant uniquement disponible sur Mac avec une version pour Windows à venir prochainement . Le but de Flash Catalyst est de de faire le pont entre les designers (Creative Suite, PhotoShop) et les développeurs (FlexBuilder).

Flash Catalyst va de paire avec la nouvelle version du Sdk Flex. Flex 4, avec sa nouvelle architecture Gumbo, introduit une nouvelle approche pour skinner les composants Flex, via un fichier xml : c'est le format FXG.

Ce design spécifié en FXG peut ainsi être intégré au projet Flex. Et est consolidé en parallèle au traitements plus métier de l'application RIA

FlashPlayer 10. La nouvelle version du runtime est sortie en octobre. Avec son lots d'améliorations ^[1].

Je ne mentionnerai ici que l'ajout qu'est le nouveau protocole : RTMFP ^[2]. Ce protocole permet de faire des communications pear-to-pear directement entre deux instances de FleshPlayer10, sans passage par le moindre serveur. Notamment du streaming video avec une grande qualité video comme audio (son HD) et une faible latence.

Pour mémoire, le protocole mis en avant jusqu'ici pour le streaming video (depuis un serveur) est le RTMP, basé sur un transport TCP. Le RTMFP, lui est basé sur un transport UDP, très adapté pour le p2p.

Plus d'informations, à travers les annonces ^[3], ^[4]

Open Screen Project ^[5] L'OpenScreenProject est une initiative visant l'implémentation de FlashPlayer10 sur les petits petits terminaux tels les téléphones mobiles. Malheureusement, il n'y a pas eu de grande annonce lors de cet Adobe MAX à ce sujet. C'est encore une phase projet et il faudra attendre 2010 pour avoir un nombre conséquent de terminaux équiper de FlashPlayer10.

FlexBuilder 4 Early Access apporte de très nombreuses améliorations.

Il est vrai que la version 3 présente beaucoup de manques au vu de ce qu'offre Eclipse pour le dévelopement en langage Java. Ainsi FlexBuilder 4 comble ce décallage.

Heidi williams, ^[6] et Tim Buntel ^[7] nous ont présenté les principaux ajouts.

Package explorer

On a maintenant un vrai explorateur de package. Avec la possibilité de n'afficher que les packages présentant des fichiers. Pour chaque classe, on peut voir les propriétés et les méthodes la composants. On peut cliquer sur une méthode pour y positionner le curseur dans l'éditeur de texte...

Comme pour l'explorateur en Java, on une croix rouge qui apparait si un fichier contient une erreur de compilation ; cette croix est également présente dans l'intégralité de la chaîne de packages conteneur.

Reference librairies

Pour chaque librairie référencée par le projet, on peut "ouvrir" la librairie et faire apparaître les classes la composants et ensuite ouvrir celles-ci pour faire apparaître les propriétés et les méthodes. Si on a pris soin d'associer à la librairie le chemin d'accès au code source, alors un clic amène au code source... navigation dans les .swc et si source attaché "vie source"

File templates

Avec FlexBuilder 4 on peut customiser des modèles pour la création de nouveaux fichiers. Des modèles différent en fonction du type ciblé : Css, .mxml, interface .as, classe .as...

Getter and Setter generation

Très pratique, la possibilité, enfin, de pouvoir générer les accesseurs à partir des propriétés. Le comportement par défaut est de rendre privée une propriété publique et de générer les deux accesseurs correspondants. En mettant en oeuvre les mots clés get et set du langage AS3.

Rename refactoring

La fonctionnalité implémentée dans FlexBuilder 3 est plus que minimaliste. Enfin avec la version 4, quand on change de nom ou quand on déplace de package une classe, toutes les références sont correctement mise à jour. C'était le minimum, on aura quand le même attendu longtemps!

Debbuging enhencements

- Conditional breakpoint : quand on a un point d'arrêt dans une boucle et on veut voir ce qui se passe à la cinquantième boucle seulement...

- Run to line

- Expression valiation enhanced

FlexUnit integration

La aussi, vous me direz, c'était pas trop tôt. L'intégration, enfin dans l'IDE, du principal framework de tests unitaires : FlexUnit. Ouvrant la voie au test-driven development application Flex.

On a ainsi, dans un premier temp, un wizard New > FlexUnit > TestCase, qui permet de préciser quelle est la classe ciblée par le test. Ensuite on peut invoquer unitairement de test. Sans avoir à produire explicitement une application Flash mettant en eouvre un TestRunner et une TestSuite...

Network Monitor

Si votre application consomme des services web SOAP, Xml/Http, ou AMF3/Http, c'est toujours intéressant de pouvoir consulter de près les requêtes et les réponses.

Avec FlexBuilder 4, plus besoin d'utiliser un Sniffer de requête -tel Charles-, Il suffit d'ouvrir le Network Monitor. Ce dernier sait afficher dans le détail les réponses, y compris pour les réponse en AMF3...

Notes

[1] http://labs.adobe.com/technologies/flashplayer10

[2] Real Time Media Flow Protocol http://en.wikipedia.org/wiki/Real_Time_Media_Flow_Protocol

[3] Adobe Makes P2P Flash Video Available to Developers http://newteevee.com/2008/12/04/adobe-makes-p2p-flash-video-available-to-developers/

[4] Try RTMFP and Client-to-Client Direct Streaming, With FP10 and Cocomo, Today! http://blogs.adobe.com/collabmethods/2008/12/try_rtmfp_and_clienttoclient_d.html

[5] Open Screen Project http://www.openscreenproject.org/

[6] Heidi williams, Flex Builder, project Manager

[7] Tim Buntel , Senior Product Manager http://www.buntel.com/blog/index.cfm/2008/11/21/Max-wrapup-not-really

Closures AS3 a la Groovy with Array.forEach() and Array.map() support

scoutant — Sat, 22 Nov 2008 16:26:00 +0100

Dans nombre de langage de programmation fonctionnel, il est courant de manipuler des collections et d'appliquer des closures aux membres de la collection.

Un exemple avec Groovy ^[1] , un langage ciblant la JVM Java :

[ 1, 2, 3, 4, 5 ].each { x -> println x*x }
[ 1, 2, 3, 4, 5 ].collect { x -> x*x }

La dernière ligne produit très naturellement la collection :

[1, 4, 9, 16, 25].

En AS3 on a un support équivalent. Quoi qu'un peut moins elliptique.

Array.forEach() ^[2]

[1, 2, 3, 4, 5].forEach( traceSquare);
private function traceSquare( x:*, index:int, arr:Array):void {
  trace( "" + x*x);
}

Ceci produit vient la même sortie que la ligne groovy avec each{}.

Array.map() ^[3]

[1, 2, 3, 4, 5].map( square);
private function square( x:*, index:int, arr:Array): * {
  return x*x;
}

Quand le traitement est court comme ci-dessus, on peut aussi opter pour une définition inline, comme suit :

[1, 2, 3, 4, 5].map( function( x:*, index:int, arr:Array):* { return x*x } );
}

Solution de un-marshalling JSON avec closure Array.map()

Nombre de web services offrent un format Json. Le service de feeds de delicious en est un exemple : http://feeds.delicious.com/v2/json/tags/coutant .

{ "flex": 120, "blazeds": 8, . . .}

Il peut être intéressant de convertir cette réponse Json directement en un array d'objets AS3 représentant un tag (avec son nombre d'occurrence comme propriété). Ceci peut être fait simplement :

tagsAsJson.split(",").map( function( item:*, index:int, arr:Array):Tag { return new Tag(item) } );

Notes

[1] http://groovy.codehaus.org/Quick+St...

[2] AS Doc Array.forEach(.) : http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Array.html#forEach()

[3] AS Doc Array.map(.) : http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/Array.html#map()

DeliSphere, a Flash 3D-animation tagcloud for your Delicious bookmarks

scoutant — Sat, 08 Nov 2008 22:40:00 +0100

Visit the demo page to see the animated tagcloud for your delicious.com ^[1] account.

You can view the source and if you want to insert the DeliSphere tagcloud in your site, you can download the delisphere distribution.

The Delesphere tagcloud is an adaptation of the famous WordPress ^[2] Cumulus plugin.

The WordPress Cumulus plugin

WP-Cumulus ^[3] is a WordPress plugin providing a Flash 3D animation displaying the tags related to the WordPress-powered blog. You can visit Roy Tanck's site at http://www.roytanck.com.

If you are using DotClear-powered blog, you can use the TagFlash ^[4] adaptation.

WP-Cumulus is a WordPress plugin, hence a PHP script that will request the MySql database for tags hosted by the blog. A click on a tag will then open up the posts related to the tag.

Delisphere architecture - Delicious API

DeliSphere Flash animation uses Delicious web services to get the tag cloud. Consider for example the bookmarks for delicious account : http://delicious.com/coutant.

Delicious provides an API ^[5]. But to use those web services you need to be authenticated with targeted delicous account.

When you are just reeding public data like bookmarks or tags, the smartest approach is to use the feeds ^[6] services. Choosing RSS ot Json format. Json is just fine, for example the tag feed for above account is http://feeds.delicious.com/v2/json/tags/coutant .

{ "flex":135, "blazeds":7, "dnd": 8, "jee5":23 ... }

Delisphere architecture - cross-domain policy

FlashPlayer cross domain policy will not enable a Flash application downloaded from domain A to be requesting services from an another domain B. Unless domain B is actually exposing a cross-domain friendly policy file.

Delicious.com is not exposing such a friendly policy file. But since V2, the feeds service does! Here is the file : http://feeds.delicious.com/crossdomain.xml .

<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

See post crossdomain.xml now on feeds.delicious.com ^[7]

That way the delisphere app can be downloaded from anywhere onto a brower and from that location be connecting to Delicious feeds web service.

Last step is the randomizing of spherical coordinates ^[8]

Notes

[1] Social bookmarking delicious.com

[2] WordPress http://wordpress.org

[3] WP-Cumulus : a WordPress plugin to display your site's tags in a flash movie, http://wordpress.org/extend/plugins/wp-cumulus/

[4] tagflash, Dotclear plugin, an adaptation to Dotclear of WP-Cumulus http://plugins.dotaddict.org/dc2/details/tagflash

[5] Delicious API V2 : http://delicious.com/help/api

[6] Delicious data feeds http://delicious.com/help/feeds

[7] crossdomain.xml now onf feeds.delicious.com http://tech.groups.yahoo.com/group/ydn-delicious/message/1999 ,

[8] Distribution points on a sphere, in ActionScript3, randomizing sperical coordinates : http://blog.massivecube.com/?p=9

Using BlazeDS proxy service behind a firewall proxy

scoutant — Sat, 08 Nov 2008 20:48:00 +0100

In general, such a friendly crossdomain.xml file is not exposed by targeted service provider. In such case we can use BlazeDS proxy service.

We first need to configure the HTTPService to be using a proxy :

<mx:HTTPService useProxy="true" url=". ." />

Second, we need to install and launch BlazeDS. With trunkey BlazeDS^[1] distribution it's straitforward. Obviously you need a Java-powered server : a sole Php-server will not help.

Consider you install the BlazeDS server in an intranet and a firewall has to be used to access the service provider B. You will need to configure BlazeDS so as to use the firewall proxy. If you just unzipped the turnkey distribution and launch BlazeDS, i guess you did not read corresponding 1000-page doc.

But it's just Java, you will try the general JVM-based approach, and you will be lauching BlazeDS with JMV args :

-DhttpProxyHost=<you-fire-wall> -DhttpProxyPort=3128

you will still fall in connection timeout. It's a pity. Even more when you know that BlazeDS is using Jakarta HttpClient support ; which actually honor above-mentionned configuration...

BlazeDS overrides that feature. The only way is to refer to documentation and to find out where firewall proxy can be configured. Not so easy, keyword proxy hardly allways refer to the proxy service...

Config file proxy-config.xml has to be customized :

<service id="proxy-service" class="flex.messaging.services.HTTPProxyService">
   <properties>
        . . .
        <allow-lax-ssl>true</allow-lax-ssl>
        <external-proxy>
                <server>your-firewall</server>
                <port>3128</port>
        </external-proxy>

Notes

[1] BlazeDS : http://opensource.adobe.com/wiki/display/blazeds/Release+Builds

No Move API for Flex : falling back to Drag & Drop API

scoutant — Sat, 25 Oct 2008 18:44:00 +0200

Yes, i just want to let the user move an image arround its container canvas. Flex does not provide you a direct API for that. You need to fall back to Drag & Drop API. Right-clic below to see source code

You need JavaScript enabled!

Ci-dessus, vous pouvez déplacer les images qui réprésentent les pièces d'échecs : un échec et mat évident en un coup... Pour ce qui est du code Flex, commençons par le début du Drag & Drop.

Drag & Drop with Flex DnD-enabled controls

Ok, prenons les choses depuis le départ. Flex offre un bon support de Drag & Drop, ce qui permet une mise en oeuvre simple pour les composants tels List, DataGrid et Tree.

You need JavaScript enabled!

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> 
  <mx:Array id="fruits">['Orange', 'Apple', 'Blackberry', 'Cranberry', 'Banana']</mx:Array>
  <mx:Panel title="Available" width="50%" height="100%" >
    <mx:List dragEnabled="true" dataProvider="{fruits}" width="100%" height="100%" />
  </mx:Panel>
  <mx:Panel title="My selection" width="50%" height="100%" >
    <mx:List dropEnabled="true" width="100%" height="100%" />
  </mx:Panel>
</mx:Application>

Bref il suffit d'activer les propriétés dragEnabled et dropEnabled.

Moving an image

Flex DnD API is straitforward for those DnD-enabled controls. But in order to move arround an image, a DragManager will need to be used.

Dragging an image

Nous allons voir comment, dès qu'on sort du cadre des composants Dnd-enabled, il faut utiliser explicitement le DragManager ^[1]. Pour qu'une image soit éligible au Drag, on a typiquement, ceci.

<mx:Image mouseDown="dragging(event);" />

private function dragging(event:MouseEvent):void {                
  var dragInitiator:Image = event.currentTarget as Image;
  var ds:DragSource = new DragSource();
  ds.addData(dragInitiator, "img");
  DragManager.doDrag(dragInitiator, ds, event);
}

A partir de là, on peut effectivement déplacer l'image en maintenant le bouton gauche de la souris. Mais le rendu n'est pas terrible, car au moment du déplacement, notre image cible est alors simplement matérialisé par un rectangle. On peut vérifier avec l'extrait suivant :

Dragging with custom feedback proxy

Mais on peut préciser au DragManager une image à utiliser pendant le déplacement et qui sera affichée comme feedback pendant le drag. On peut valoriser le 4-ième paramètres (optionnel) de la méthode doDrag().

private function dragging(event:MouseEvent):void {                
  var dragInitiator:Image = event.currentTarget as Image;
  var ds:DragSource = new DragSource();
  ds.addData(dragInitiator, "img");
  var imageProxy:Image = new Image();
  imageProxy.source = event.currentTarget.source;
  imageProxy.width= dragInitiator.width;
  imageProxy.height= dragInitiator.height;
  DragManager.doDrag(dragInitiator, ds, event, imageProxy);
}

Et là, autant prendre l'image sur laquelle on veut précisément agir: oui, enfin..., on prendra une copie pour que ca marche.

Dropping

Reste à finaliser le déplacement de notre image, pour cela il faut que notre conteneur, ici un Canvas, accepte le Drop. Pour cela, on peut se contenter de ceci :

<mx:Canvas dragEnter="DragManager.acceptDragDrop( event.currentTarget as Canvas);"
  dragDrop="dragDropHandler(event);" />

private function dragDropHandler(event:DragEvent):void {
  var image:Image = event.dragInitiator as Image;
  var container:Canvas = event.currentTarget as Canvas;
  image.x = container.mouseX; 
  image.y = container.mouseY;
}

Là, on y est presque. Sauf que vous l'avez vu quand on lâche l'image, elle ne se pose pas à l'endroit naturelle. En fait c'est un peu se qui se passe aussi dans l'exemple de DnD d'image à la fin du billet de Xebia ^[2]. Le problème le voici : quand on initialise le Drag, on clique n'importe où dans l'image et quand on relâche la souris, le coin supérieur gauche de l'image prend la position de la souris. Mais pour compenser, il suffit de compléter comme suit :

<mx:Canvas dragEnter="DragManager.acceptDragDrop( event.currentTarget as Canvas);"
        mouseDown="recordPosition(event)"
        dragDrop="dragDropHandler(event);" />

private function recordPosition(event:MouseEvent):void {
  fromX = event.localX;
  fromY = event.localY;
}
private function dragDropHandler(event:DragEvent):void {
  var image:Image = event.dragInitiator as Image;
  var container:Canvas = event.currentTarget as Canvas;
  image.x = container.mouseX - fromX; 
  image.y = container.mouseY - fromY;
}

Ouf, là on y est!

Comme quoi le Drag&Drop est immédiat en Flex pour les composants List, DataGrid, Tree : activer les propriétés dragEnable et dropEnabled.

Par contre pour déplacer une image, il n'y a pas d'API direct et il faut mettre en oeuvre un Drag & Drop avec DragManager et là ce présent tutorial peut guider pour les quelques 15 lignes de code nécessaires.

Pour le code source : un simple clic droit sur l'échiquier en début de billet.

Notes

[1] Flex 3 DragManager : http://livedocs.adobe.com/flex/3/langref/mx/managers/DragManager.html

[2] Xebia, billet Drag & Drop : http://blog.xebia.fr/2008/06/19/drag-and-drop-flex

A Flex & Adobe AIR Blog

Un "Hello 3D World" en Blender, animé en Flash avec Papervision3D

Démo

Modélisation Blender et export au format Collada

Import dans appli Flash avec librairie Papervision 3D

Mise en place du projet Flex avec Papervision3D

Import du modèle .dae

Annimation de rotation via la souris

Gestion des ombres

Matériaux et import Blender -> Papervision

Choix des matériaux dans Papervision3D

Remplacement des materiaux en runtime

Sculpture numérique et visite virtuelle

FlexUnit4 and Flash Builder 4 in action - A FlexUnit4-power TDD Use case

FlexUnit4 Use case : a Reverse Polish Notation Calculator

Test-driven development

ActionScript and Flex TDD out there?

Next generation FlexUnit4 and Flash Builder 4 enabling true AS3/Flex TDD

A step by step true TDD sample : writing the AS3 test cases before the target code

Create an AS3 TestCase class using wizard

Create now the target class

Create a FlexUnit4 test method

Writing unit-test method code

If needed adding the API code for the test to compile

Implement the logic meeting that small piece of requirment.

a second unit-test method for same feature

Fixing the bug

TDD of next feature : adding two operands

implementing a test method

Expressing an espected Error with FlexUnit4

Fixing the bug

More tests for same feature

TDD of similar feature (multiply operand) : copy and paste both the test fixture and the business logic

TDD of next feature (substract operand)

Fixing the bug

Next feature ( division operator)

Next feature ( unary square root operator)

unit-test fixture and target implementation

Additional fixture for square root of negative number

Fixing the expectation

GUI wrapping

Micro architecture

Component layout

Connecting the logic to the GUI : with method inection

Connecting the GUI to the logic : with data-bindig

Notes

Hosting a PHP proxy and enabling Flash app to talk cross-domain

FlashPlayer and cross-domain policy file

Un Proxy !

Proxy en Java avec BlazeDS

Proxy en PHP pour les hébergements restreint au PHP

Proxy en BlazeDS sur hébergement GoogleAppEngine?

Notes

Velib en Google Maps API For Flash - un MakerManager pour des performances!

SharedObject to persist your Flash app state - A Design canvas sample

Shared Object

Write

Read

Serializing UIComponents?

Array of data

Notes

Adobe MAX 2008 Milan - FlexBuilder 4 Early Access

Notes

Closures AS3 a la Groovy with Array.forEach() and Array.map() support

Array.forEach() [2]

Array.map() [3]

Solution de un-marshalling JSON avec closure Array.map()

Notes

DeliSphere, a Flash 3D-animation tagcloud for your Delicious bookmarks

The WordPress Cumulus plugin

Delisphere architecture - Delicious API

Delisphere architecture - cross-domain policy

Notes

Using BlazeDS proxy service behind a firewall proxy

Notes

No Move API for Flex : falling back to Drag & Drop API

Drag & Drop with Flex DnD-enabled controls

Moving an image

Dragging an image

Dragging with custom feedback proxy

Array.forEach() ^[2]

Array.map() ^[3]