Tutoriel: appliquer un blur sur un masque

Bonjour à tous, voici un tutoriel qui vous permettra d'appliquer un effet de blur sur un masque, vous serais capable de créer une animation un masque avec dégradé remplacant le curseur par default

Voici le tutoriel

Pour ceux qui seraient intéressé par ceci, voici quelques modifications concernant le code:

Code:


//import de la classe BlurFilter (pas obligatoire)
import flash.filters.BlurFilter;

//création de la fonction init
function init (){
   //déclaration des paramétres principa&ux
   var rayon:Number = 30;
   var blur = 100;
   var qualite:Number = 1;
   
   //mise en place du masque avec blur
   maskk._height = maskk._width = 2* rayon;
   img.cacheAsBitmap = true;
   blur = new flash.filters.BlurFilter(blur, blur, qualite);
   img.setMask(maskk);
   maskk.filters = [blur];
   
   //remplacement du curseur par default avec le masque
   Mouse.hide();
   maskk.startDrag(true);
}

//appelle de la fonction init
init();


Voici aussi le fichier source:
source_maskBlur.fla

Et le nouveau tutoriel:

Salut, j'ai suivi ton tuto qui m'a plu. J'ai pu le refaire en AS2 :D .

J'ai essayé de le reproduire en AS3 et j'obtiens l'erreure suivante

Code:

TypeError: Error #1006: value n'est pas une fonction.
at AS3codemasquesouris_fla::MainTimeline/init()
at AS3codemasquesouris_fla::MainTimeline/frame1()


Voici le code que j'ai écrit :

Code:

// Appel de la fonction masque
function masque (){
//déclaration des paramétres principa&ux
var rayon:Number = 50;
var blur = 100;
var qualite:Number = 1;

//mise en place du masque avec blur
rond_mc.height = rond_mc.width = 2* rayon;
img.cacheAsBitmap = true;
blur = new BlurFilter(blur, blur, qualite);
img.mask(rond_mc);
rond_mc.filters = [blur];

//cache la souris
Mouse.hide();
// déplace le rond sur la photo
rond_mc.startDrag(true);
}
//appelle de la fonction init
masque();

j'ai les 4 calques suivant

calque fond
calque masque inclus claque photo
calque code AS3

Si tu peux m'aider et m'expliquer où se situe mon erreure, j'en serai ravie.

Merci d'avance

ah oui, j'oubliais de te signaler le lien est mort pour télécharger le code

Salut n'oublies pas de mettre ton code entre les balise adéquates, c'est-à-dire:

Code:

[code][/code]

Sinon pour ton problème, il faut savoir quand as3, il ne suffit pas de copier le code as2 pour que cela fonctionne, en effet tu utilises que des éléments du langage as2, en as3 par exemple tu ne peut pas utiliser "cacheASBitmap", ni le setMask, de même que pour cette ligne :

Code:

blur = new BlurFilter(blur, blur, qualite);

il ne faut pas oublier de déclarer l'objet blur comme ceci

Code:

var blur:BlurFilter =...

Bon aprés, je pense qu'il faudra créer aussi un écouteur (addEventListener(MouseEvent.MOUSE_MOVE,sourisBouge) qui écoutera les mouvement du curseur en continu. Je vais essayer de regarder ça...

Bon ceci devrait marcher, en tout cas chez moi c'est ok:

Code:

//import de la classe BlurFilter (pas obligatoire)
import flash.filters.BlurFilter;
import flash.events.MouseEvent;


//déclaration des paramétres principa&ux
var rayon:Number = 30;
var blurNb = 100;
var qualite:Number = 1;

function init(){
   //mise en place du masque avec blur
   maskk.height = maskk.width = 2* rayon;
   img.cacheAsBitmap = true;
   
   var blur:BlurFilter = new flash.filters.BlurFilter(blurNb, blurNb, qualite);
   
   img.mask = maskk;
   trace ("je suis passé");   
   
   maskk.filters = [blur];
      
   //remplacement du curseur par default avec le masque
   Mouse.hide();
   
   stage.addEventListener(MouseEvent.MOUSE_MOVE, sourisBouge);
   
   function sourisBouge (pEvt:MouseEvent){
      maskk.x = pEvt.stageX;
      maskk.y = pEvt.stageY;
   }
}
init();

Ps: le fichier source à été remis en place

:D
Merci pour ta réponse et ton travail qui me permet d'avoir deux solutions.

Sur mon code il y avait une erreur qui a été trouvé par le formateur, elle se trouve au niveau de mask.
Voici le code corrigé

Code:


//déclaration des paramètres principaux
var rayon:Number = 50;
var blur = 100;
var qualite:Number = 1;

// Appel de la fonction masque
function masque() {
//mise en place du masque avec blur
rond_mc.height = rond_mc.width = 2* rayon;
img.cacheAsBitmap = true;
blur = new BlurFilter(blur, blur, qualite);

img.mask = rond_mc; // j'avais écris img.mask(rond_mc);

rond_mc.filters = [blur];
//cache la souris
Mouse.hide();
// déplace le rond sur la photo
rond_mc.startDrag(true);
}

//Appel de la fonction
masque();


Tu as réussi à corriger, mais par contre il reste encore des erreurs, comme la non déclaration du filtre blur et perso en as3 je préfére utiliser ceci:

Code:


stage.addEventListener(MouseEvent.MOUSE_MOVE, sourisBouge);
 
  function sourisBouge (pEvt:MouseEvent){
      maskk.x = pEvt.stageX;
      maskk.y = pEvt.stageY;
  }


Plutôt que cela:

Code:

rond_mc.startDrag(true);

Même si tu penses le code est plus long, il faut savoir qu'il est préférable de créer un écouteur concernant le drag, en faisant comme je les fais, il est par exemple possible d'arréter l'écoute de l'évenement si le curseur quitte l'animation.

Merci pour les explications :D

salut salut,

d abord, très bon tuto =) sa peux être très utile.

EDIT: mon problème est résolu, je n'ai laissé qu'un frame et j'ai fait le déplacement avec tweenmax.

ensuite, a quoi sert la fonction init? et j'ai remarqué que toute les quelques secondes, mon image saute durant une frame. j'ai enlevé la fonction init, le déplacement à la souris mais sa ne change rien, et mon clip maskk ne suit pas son interpolation qui le ferait aller de gauche à droite (j'avais faite cette interpolation non dynamiquement)

merci et à bientôt