-->

Modifier les paramètres d’un filtre PixelBender en AS3

28 octobre 2008

Pour illustrer le changement de valeur d’un paramètre dans un filtre Pixel Bender, j’ai utilisé un filtre de Frank Reitberger », ce filtre est téléchargeable sur le Pixel Bender Exchange ».

Pour accéder aux paramètres du filtre « smudge », il suffit de passer par la propriété data de la classe Shader. Le filtre smudge n’a qu’un seul paramètre : amount. On peut le modifier de cette façon :

[Embed("pb/smudger.pbj", mimeType="application/octet-stream")]
private var _pbjFilter:Class;
private var _shader:Shader = new Shader( new _pbjFilter() as ByteArray );
private var _filtre:ShaderFilter = new ShaderFilter( _shader );

_shader.data.amount.value = [ 5.0 ];

Le filtre ayant changé, il ne faut pas oublier de le réaffecter à la propriété filters de l’élément à modifier, au risque de ne voir aucun changement, malgré le changement de valeur des paramètres….

Ci-dessous un exemple, la valeur du paramètre est modifiée suivant la position de la souris en x ( Flash 10 ) :

[kml_flashembed movie="http://tsoin.com/asblog/tutoriel/PixelBender/003/Pixelbender003.swf" height="370" width="600" /]

Utiliser un filtre Pixel Bender en AS3

28 octobre 2008

Après avoir vu comment créer un filtre pixel bender, nous allons maintenant voir comment utiliser ce filtre en as3…

Il faut tout d’abord exporter son filtre en .pbj, fichier qui sera loader en as3. Une fois cette première opération réaliser, il faut charger le pbj :
- Méthode 1, avec un fichier externe au swf :

package {
   
   /**
   *
   * Auteur: Vincent Helwig
   * Date: 27.10.2008
   * Website: http://www.tsoin.com
   * Description: Chargement d’un fichier PBJ Pixel Bender
   *
   **/

   import flash.display.Sprite;
   import flash.events.Event;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.net.URLLoaderDataFormat;
   import flash.display.Shader;

   [SWF(width = "600", height = "400", backgroundColor = "#000000", framerate = "30")]

   public class Main extends Sprite {

      private var _loader:URLLoader;
      private var _shader:Shader;

      public function Main():void {
         _loader = new URLLoader();
         _loader.dataFormat = URLLoaderDataFormat.BINARY;
         _loader.addEventListener(Event.COMPLETE, onLoadComplete);
         _loader.load(new URLRequest(« bleu.pbj »));
      }

      private function onLoadComplete(event:Event):void {
         _shader = new Shader( _loader.data );
      }

   }

}

- Méthode 2, avec un fichier intégré au swf :

package {

   /**
   *
   * Auteur: Vincent Helwig
   * Date: 27.10.2008
   * Website: http://www.tsoin.com
   * Description: Embed d’un fichier PBJ Pixel Bender
   *
   **/

   import flash.display.Sprite;
   import flash.display.Shader;
   import flash.utils.ByteArray;

   [SWF(width = "600", height = "400", backgroundColor = "#000000", framerate = "30")]

   public class Embed extends Sprite {

      [Embed("bleu.pbj", mimeType="application/octet-stream")]
      private var _pbjFilter:Class;

      private var _shader:Shader;

      public function Embed():void {
         _shader = new Shader( new _pbjFilter() as ByteArray );
      }

   }

}

Quelque soit la méthode du chargement, la méthode d’utilisation est ensuite la même :

private var _filtre:ShaderFilter;
_filtre = new ShaderFilter(_shader);

On peut alors utiliser le ShaderFitler sur tous les enfants héritant de la class DisplayObject, avec la propriété filters :

private var _display:DisplayObject = new DisplayObject();
_display.filters = [ _fitltre];

On peut donc appliquer un filtre Pixel Bender sur un champ texte, sur une vidéo, sur une image, sur un bitmap, un Sprite, un UIComponent etc…

Ci-dessous un exemple de différent filtre sur une vidéo…. ( Flash 10 nécessaire, bien sur ;) )

[kml_flashembed movie="http://tsoin.com/asblog/tutoriel/PixelBender/001/Pixelbender001.swf" height="450" width="600" /]

Seo