Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Tutoriel: appliquer un blur sur un masque

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Tutoriel: appliquer un blur sur un masque

    Message par artkabis le Mer 24 Sep - 14:28

    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




    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par artkabis le Jeu 8 Jan - 15:29

    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:

    Gb1963
    Nouveau membre
    Nouveau membre

    Messages : : 33
    Age : : 53
    Logiciels : Logiciels : : Photoshop, Illustrator, Flash, Dreamweaver, PhotoFiltre Studio
    Date d'inscription : 20/01/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par Gb1963 le Mer 21 Jan - 20:49

    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 scratch Sad Question

    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. Smile

    Merci d'avance

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

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par artkabis le Jeu 22 Jan - 9:56

    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...

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par artkabis le Jeu 22 Jan - 9:58

    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

    Gb1963
    Nouveau membre
    Nouveau membre

    Messages : : 33
    Age : : 53
    Logiciels : Logiciels : : Photoshop, Illustrator, Flash, Dreamweaver, PhotoFiltre Studio
    Date d'inscription : 20/01/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par Gb1963 le Jeu 22 Jan - 13:52

    :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();

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par artkabis le Jeu 22 Jan - 14:53

    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.

    Gb1963
    Nouveau membre
    Nouveau membre

    Messages : : 33
    Age : : 53
    Logiciels : Logiciels : : Photoshop, Illustrator, Flash, Dreamweaver, PhotoFiltre Studio
    Date d'inscription : 20/01/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Tutoriel: appliquer un blur sur un masque

    Message par Gb1963 le Jeu 22 Jan - 15:14

    Merci pour les explications :D

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Tutoriel: appliquer un blur sur un masque

    Message par megalex le Dim 17 Mai - 15:04

    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

    Contenu sponsorisé

    Re: Tutoriel: appliquer un blur sur un masque

    Message par Contenu sponsorisé Aujourd'hui à 12:10


      La date/heure actuelle est Mar 6 Déc - 12:10