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.


    Curseur avec nuée de particules

    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)

    Curseur avec nuée de particules

    Message par artkabis le Sam 1 Aoû - 15:25

    Bonjour à tous, aujourd'hui je vous propose un tutoriel qui vous permettra de créer des particules suivant le curseur par défaut. Pour ceci, nous utiliserons le langage as3 et plus précisément une classe gérant la totalité de notre application.


    Voici le résultat du tutoriel:


    Le tutoriel vidéo:


    Le script:
    Code:

    package fr.particules
    {
       import flash.display.Sprite;
       import flash.display.MovieClip;
       import flash.display.Shape;
       import flash.display.GradientType;
       
       import flash.filters.GlowFilter;
       import flash.ui.Mouse;
       
       import flash.events.Event;
       import flash.events.MouseEvent;
       
       public class Particular extends Sprite
       {
          private var _particule:MovieClip;
          private var _part:Shape;
          private var _lueur:GlowFilter;
          private var _taille:int;
          
          public function Particular ()
          {
             _taille = 4;
             Mouse.hide();
             stage.addEventListener(MouseEvent.MOUSE_MOVE, initialisation);
          }
          private function initialisation(me:MouseEvent):void
          {
             _part = new Shape();
             _part.graphics.beginGradientFill(GradientType.RADIAL,[0xffffff, 0xC5E8FE, 0x5699FE],[1,1,1],[0,20,150]);
             _part.graphics.drawCircle(0,0,_taille);
             _lueur = new GlowFilter(0xCDCDFF,1,9,9,2,3,false,false);
             
             _particule = new MovieClip();
             _particule.addChild( _part );
             _particule.filters = [_lueur];
             
             _particule.x = mouseX + Math.random()* _taille;
             _particule.y = mouseY - Math.random()* _taille;
             
             this.addChild( _particule );
             _particule.addEventListener(Event.ENTER_FRAME, animation);
          }
          private function animation (e:Event):void
          {
             var p = Sprite (e.target);
             p.alpha -= .05;
             p.scaleX  -=  .1;
             p.scaleY  -=  .1;
             p.y += 5;
             
             if(p.alpha < 0)
             {
                p.removeEventListener(Event.ENTER_FRAME, animation);
                this.removeChild(p)
             }
          }
       }
    }

    Les fichiers sources:
    curseur_particular.zipx

    krysh nar
    Flasheur

    Messages : : 595
    Age : : 32
    Logiciels : Logiciels : : PHPStorm, CS5, CS4, Flash (niveau expert), notepad++, Visual Studio, 3DSMAX (la base), Solid Works, Lotus Notes, ...
    Date d'inscription : 14/05/2009

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

    Re: Curseur avec nuée de particules

    Message par krysh nar le Jeu 3 Déc - 14:46

    merci pour le tuto

    Nairolf
    Nouveau membre
    Nouveau membre

    Messages : : 16
    Age : : 23
    Logiciels : Logiciels : : Tout les logiciel de Adobe CS4 Master Collection
    Date d'inscription : 29/11/2009

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

    Re: Curseur avec nuée de particules

    Message par Nairolf le Jeu 3 Déc - 19:16

    Très belle effet bravo

    death-hurt
    Ceinture blanche
    Ceinture blanche

    Messages : : 58
    Age : : 30
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    La suite Adobe CS3 et CS4 combiné à quelques logiciels open source Wink
    Date d'inscription : 09/12/2009

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

    Re: Curseur avec nuée de particules

    Message par death-hurt le Mar 15 Déc - 13:07

    Assez remarquable comme effet
    Merci, j'adore

    biloute
    Ceinture jaune
    Ceinture jaune

    Messages : : 457
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    j'utilise la suite adobe cs4 , sceenfow, maxon C4D
    Date d'inscription : 19/07/2009

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

    Re: Curseur avec nuée de particules

    Message par biloute le Mar 15 Déc - 13:34

    effectivement je trouve graphiquement reussi
    cool ce tuto

    alexkill
    Nouveau membre
    Nouveau membre

    Messages : : 15
    Age : : 37
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 19/11/2009

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

    Re: Curseur avec nuée de particules

    Message par alexkill le Mar 15 Déc - 15:02

    joli rendu final

    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: Curseur avec nuée de particules

    Message par artkabis le Jeu 17 Déc - 10:54

    Merci à tous !!!!


    _________________
    J'me fais de la pub et na tongue

    allansens
    Infographiste

    Messages : : 1458
    Age : : 54
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    j utilise la suite adobe cs4 Ai, Ps, Fl, Dw, Id et un peut les logiciel 3D C4D
    Date d'inscription : 26/12/2008

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

    Re: Curseur avec nuée de particules

    Message par allansens le Jeu 17 Déc - 14:59

    superbe effet je m en va essayer de le faire merci artkabis

    Lloyd06
    Nouveau membre
    Nouveau membre

    Messages : : 21
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Photoshop CS4 64bits, Flash CS4, Illustrator, Dreamweaver CS4, After Effects CS4
    Date d'inscription : 05/04/2009

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

    Re: Curseur avec nuée de particules

    Message par Lloyd06 le Jeu 7 Jan - 14:05

    Je n'ai pas encore fait le tutoriel, mais je risque de m'y mettre le résultat est Superbe !!

    sylvia
    Nouveau membre
    Nouveau membre

    Messages : : 24
    Date d'inscription : 09/01/2010

    Re: Curseur avec nuée de particules

    Message par sylvia le Dim 10 Jan - 17:23

    bien je commence avec ce tuto qui me plait bien et qui est dit facile eh bien pas pour moi lorsque j ai termine rein ne se passe mon document reste muet .J ai Flash CS3 professionnel .Je pense avoir un probleme a comprendre pour le chemin a donner et voici ce que j ai lorqsque je veux verifier que le chemin mene bien a la classe Particular .capture

    sylvia
    Nouveau membre
    Nouveau membre

    Messages : : 24
    Date d'inscription : 09/01/2010

    Re: Curseur avec nuée de particules

    Message par sylvia le Dim 10 Jan - 17:56



    Les fichiers sources:
    curseur_particular.zipx[/quote]

    j ai voulu regarder le code source mais on demande un mot de passe pour dezipper ...!!! Quel est il ??? svp.

    dgekill
    Nouveau membre
    Nouveau membre

    Messages : : 8
    Age : : 25
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 15/01/2010

    Re: Curseur avec nuée de particules

    Message par dgekill le Lun 18 Jan - 13:36

    Bonjour,

    Je suis en train de finaliser mon portfolio flash dont le style graphique correspond parfaitement à ce curseur animé.

    Malheureusement, j'ai monté mon site en AS 2...

    J'aimerais beaucoup obtenir ce curseur animé, comment puis-je faire?


    J'attends avec hâte vos réponses.


    Cordialement,
    Dgekill.

    nossibe
    Nouveau membre
    Nouveau membre

    Messages : : 46
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 20/01/2010

    Re: Curseur avec nuée de particules

    Message par nossibe le Mer 24 Fév - 10:31

    sylvia a écrit:bien je commence avec ce tuto qui me plait bien et qui est dit facile eh bien pas pour moi lorsque j ai termine rein ne se passe mon document reste muet .J ai Flash CS3 professionnel .Je pense avoir un probleme a comprendre pour le chemin a donner et voici ce que j ai lorqsque je veux verifier que le chemin mene bien a la classe Particular .capture

    Tu as du oublier d'enregistrer ton fichier Particular.as avant le lancement de l'animation.

    ddgekill a écrit:Bonjour,

    Je suis en train de finaliser mon portfolio flash dont le style graphique correspond parfaitement à ce curseur animé.

    Malheureusement, j'ai monté mon site en AS 2...

    J'aimerais beaucoup obtenir ce curseur animé, comment puis-je faire?


    J'attends avec hâte vos réponses.


    Cordialement,
    Dgekill.

    Il existe des dizaines de ressources gratuites pour obtenir un effet similaire en as2, il sera plus simple de les trouver que d'adapter celui-ci...

    nossibe
    Nouveau membre
    Nouveau membre

    Messages : : 46
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 20/01/2010

    Re: Curseur avec nuée de particules

    Message par nossibe le Mer 24 Fév - 10:51

    Il semblerait que la Classe ne puisse être installée sur un document flash ayant un code action en frame 1. voici l'erreur obtenue :
    Code:
    1180: Appel à une méthode qui ne semble pas définie, addFrameScript.

    Voici les raison qui seraient à l'origine de cette erreur :
    La fonction addFrameScript n'est pas définir dans l'aide de Flash. Cette erreur apparait si les conditions suivantes sont réunies:

    * La classe principale du document est situés dans un fichier AS externe
    * Du code AS est placé sur l'image 1 du fichier FLA

    Existe-t-il une solution pour contourner le problème ?

    Merci pour le coup de main Smile

    Kirkoo
    Nouveau membre
    Nouveau membre

    Messages : : 46
    Age : : 64
    Logiciels : Logiciels : : Paint Shop Pro X3
    Photoshop CS4
    Flash CS4
    Dreamweaver CS4
    Date d'inscription : 17/02/2010

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

    Re: Curseur avec nuée de particules

    Message par Kirkoo le Jeu 25 Fév - 13:11

    Merci Artkabis
    Un super bel effet de curseur j'adore
    @+
    Kirkoo

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

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

    Re: Curseur avec nuée de particules

    Message par Tekken le Ven 5 Mar - 19:04

    merci pour ce tuto artkabis, ça donne vraiment un superbe rendu, tu es vraiment trop fort pour nous pondre de si bons tutos

    au debut je me demandais pourquoi cela ne fonctionnait pas, et j'ai recommencé plusieurs fois, en fait cela venait du fait que je n'avais pas inscrit le chemin de la classe dans le panneau des propriétés

    petite question quand même, juste pour information, est il possible de transformer le rond des particules en une autre forme, des étoiles par exemple ?



    _________________

    Mon Site Creation



    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

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

    Re: Curseur avec nuée de particules

    Message par Demeter le Ven 5 Mar - 23:56

    Oui normalement il est possible de donner d'autre forme comme par exemple au lieu d'écrire
    Code:
    _part.graphics.drawCircle(0,0,_taille);

    Tu peux écrire comme ceci pour faire des carrés

    Code:
    _part.graphics.drawRect(0,0,_taille);

    Maintenant pour faire du dessin, je sais que l'on peut faire du dessin

    Si maintenant tu veux dessiner une forme comme plus ou moins la forme Nike

    voici le code :
    Code:
    var commandes:Vector.<int> = new Vectore.<int>(4, true);

    commandes[0] = GraphicsPathCommand.MOVE_TO;
    commandes[1] = GraphicsPathCommand.CURVE_TO;
    commandes[2] = GraphicsPathCommand.CURVE_TO;
    commandes[3] = GraphicsPathCommand.CURVE_TO;

    var donnes:Vector.<Number> = new Vector.<Number>(14, true);

    http://graphicsPathCommand.MOVE_TO
    donnees[0] = 40;
    donnees[1] = 40;

    http://graphicsPathCommand.CURVE_TO
    donnees[2] = 200;
    donnees[3] = 40;
    donnees[4] = 300;
    donnees[5] = 140;

    http://graphicsPathCommand.CURVE_TO
    donnees[6] = 200;
    donnees[7] = 200;
    donnees[8] = 400;
    donnees[9] = 300;

    http://graphicsPathCommand.CURVE_TO
    donnees[10] = 40;
    donnees[11] = 200;
    donnees[12] = 40;
    donnees[13] = 40;

    var conteneur:Shape = new Shape();

    conteneur.graphics.beginFill(0x990000, 1);
    conteneur.graphics.drawPath(commandes, donnees);

    addChild(conteneur);


    Voici un bel exemple de donnée graphiques

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

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

    Re: Curseur avec nuée de particules

    Message par Tekken le Sam 6 Mar - 12:54

    voilà le message d'erreur lorsque je test de transformer la forme en carré :

    Code:

    1136: Nombre d'arguments incorrect.  4 attendus. _part.graphics.drawRect(0,0,_taille);


    _________________

    Mon Site Creation



    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

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

    Re: Curseur avec nuée de particules

    Message par Demeter le Sam 6 Mar - 15:57

    Oui voilà pourquoi il te donne la réponse dans l'erreur nombre d'argument attendu = 4

    Hors se code donne deux argument
    Code:
    _part.graphics.drawRect(0,0,_taille);

    Cette ligne te donne 4 arguments si je ne me trompe pas
    Code:
    _part.graphics.drawRect(0, 0, 1, 1, _taille);

    Voilà essaye sa pour voir ce que ça donne suis pas plus sûr que cela.

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

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

    Re: Curseur avec nuée de particules

    Message par Tekken le Sam 6 Mar - 17:11

    la reponse à l'erreur est :

    Code:

    _part.graphics.drawRect(0,0, 1,_taille);

    tu avais mis un 1 de trop, il comptait 5 arguments Wink

    ça fonctionne mais par contre il a fallu que je modifie les valeurs, notamment la taille car sinon le rendu d'origine n'était pas beau du tout Wink



    merci pour ton aide demeter Wink


    _________________

    Mon Site Creation



    Demeter
    Ancien staff

    Messages : : 4569
    Age : : 45
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Logiciel Adobe Photoshop, flash, dreamweaver, the gimp, blender 3D, visual studio 2010, expression studio 4, Aptana studio 1.5, Illustrator, indesign.

    Date d'inscription : 14/07/2009

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

    Re: Curseur avec nuée de particules

    Message par Demeter le Sam 6 Mar - 17:36

    Oui en effet j’ai oublié de compté l'argument _taille qui fait un élément content que ça fonctionne tekken.

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

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

    Re: Curseur avec nuée de particules

    Message par Tekken le Lun 8 Mar - 22:09

    y a t'il moyen d'intégrer ce curseur dans une animation car lorsque je suis le tuto cela me génère des erreurs, comme à dis nossibe sur la page précédente on dirait que cela ne fonctionne pas lorsqu'il y a quelque chose sur la 1ère image clé.

    j'ai donc essayé d'integrér un "import", là plus d'erreur générée mais rien ne se passe

    si quelqu'un à une solution je suis preneur Wink
    merci d'avance


    _________________

    Mon Site Creation



    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: Curseur avec nuée de particules

    Message par artkabis le Mar 9 Mar - 13:41

    Pour ceux qui souhaiteraient utiliser ce curseur de particules avec d'autre éléments sur la scène, vous pouvez faire ceci:

    Ouvrez la classe Particular et commencer par ajouter une nouvelle variable à la suite des autres:
    Code:
    private var _scene:*;

    ensuite dans le constructeur (la fonction Particular):

    passez un nouveau paramètre:
    Code:
    public function Particular ($scene:*)

    ensuite nous récupérons le paramètre dans la variable:
    Code:
    _scene = $scene;
    puis nous écoutons le mouvement depuis notre variable:
    Code:
    _scene.addEventListener(MouseEvent.MOUSE_MOVE, initialisation);

    Maintenant dans la fonction initialisation, nous allons ajouter les particule non pas à this, mais désormais à _scene:
    Code:
    _scene.addChild( _particule );

    Pour finir dans la dernière fonction nous allons modifier la suppression pour que celle ci se fasse depuis _scene et non pas this:
    Code:
    _scene.removeChild(p)
    au lieu de :
    Code:
    this.removeChild(p)

    Voilà, alors maintenant il vous suffit de créer un rectangle de la taille de votre scène, de le convertir en movieclip et de lui donner un nom d'occurrence: "cont" par exemple.

    Il nous faut ensuite supprimer la liaison que nous avons faite (celle situé dans le panneau des propriétés dans le champ classe), supprimez le.

    Pour en finir, créer un nouveau calque sur la scène principale et ouvrez le panneau des actions pour coder ceci:

    Nous allons commencer par importer notre classe:
    Code:
    import fr.particules.Particular

    Nous créons un nouvel objet particular en n'oublions pas de passer notre nouveau paramètre (le conteneur de particule que nous avons créé précédemment) :
    Code:
    var p:Particular = new Particular(cont);

    et nous l'ajoutons à la liste d'affichage:
    Code:
    this.addChild(p);

    Voilà, vous pourrez désormais utiliser cette application dans toutes les situations Wink


    _________________
    J'me fais de la pub et na tongue

    lola04
    Nouveau membre
    Nouveau membre

    Messages : : 11
    Age : : 47
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? illustrator,Flash,Photosphop,Indesign
    Date d'inscription : 30/08/2009

    Re: Curseur avec nuée de particules

    Message par lola04 le Mer 10 Mar - 21:53

    merci beaucoup pour ce tuto assez simple, en ce qui me concerne, alors que je suis vraiment pas douée côté code..;
    le résultat est vraiment sympa!
    encore merci de partager ton savoir ainsi!

    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: Curseur avec nuée de particules

    Message par artkabis le Mer 10 Mar - 22:38

    Pas de quoi lola, c'est avec ce type de tuto que l'on fini par prendre du plaisir à utiliser Flash. C'est en tout cas le but de cette formation.

    @+


    _________________
    J'me fais de la pub et na tongue

    Contenu sponsorisé

    Re: Curseur avec nuée de particules

    Message par Contenu sponsorisé Aujourd'hui à 17:17


      La date/heure actuelle est Ven 9 Déc - 17:17