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.


    Retour aux sources: Gestions des masques

    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)

    Retour aux sources: Gestions des masques

    Message par artkabis le Mar 3 Fév - 17:36

    Salut les loulous, voici un tutoriel qui risquerait d'être le premier d'une longue série, en effet, j'ai décidé de revenir un peu aux sources et donc de vous expliquer différentes techniques utilisés pour la création d'animation bruts.

    Voici un exemple de masque, que vous pourrez créer à la fin de ce tutoriel:


    Voici donc le premier tutoriel de la série, laissez place au tutos: "Gestion des masques":



    Dernière édition par artkabis le Jeu 5 Fév - 14:17, édité 1 fois


    _________________
    J'me fais de la pub et na tongue

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Messages : : 80
    Age : : 34
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Photoshop CS4, illustrator CS4, flash CS4, Dreamweaver CS4, mais aussi Accessoirement Encore CS4, Première CS4, indesign CS4, Bridge CS4, blender :p
    Date d'inscription : 21/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Mer 4 Fév - 19:22

    super, j'allais justement te demander quand est ce que tu allais nous faire un beau tuto sur les masques en AS3 ! :p Wink

    Lilwarre A.K.A. Prod
    Ceinture verte
    Ceinture verte

    Messages : : 631
    Age : : 26
    Logiciels : Logiciels : : Adobe Master Collection CS4!
    Date d'inscription : 31/12/2008

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

    Re: Retour aux sources: Gestions des masques

    Message par Lilwarre A.K.A. Prod le Mer 4 Fév - 19:24

    :p

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Jeu 5 Fév - 14:18

    La vidéo est arrivée !!!


    _________________
    J'me fais de la pub et na tongue

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Messages : : 80
    Age : : 34
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Photoshop CS4, illustrator CS4, flash CS4, Dreamweaver CS4, mais aussi Accessoirement Encore CS4, Première CS4, indesign CS4, Bridge CS4, blender :p
    Date d'inscription : 21/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Jeu 5 Fév - 15:53

    super merci, je vais me la faire aujourd'hui je pense... Smile

    EDIT:
    arfff, je suis un peu déçu (je t'embete) en fait je pensais que tu utiliserais tout simplement la fonction ".mask" en AS3.
    En AS2, ca devait etre "setmask" je crois d'ailleurs. Razz J'ai utilisé tellement de fois cette façon là, que jla connais parcoeur.
    Bien évidement, merci pour le tuto!
    Jme
    suis dit qu'il fallait que je maitrise les masques en AS3 absoument
    pour pouvoir les réutiliser! Mais comme tu le dis, c'est exactement
    pareil qu'en AS2 alors?
    Remarque, il te reste plus qu'à expliquer comment faire suivre un mask à un guide Laughing (je t'embete, 2eme édition)


    Dernière édition par rahjuliano le Ven 6 Fév - 23:55, édité 1 fois

    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)

    Prechargement d'image distante avec masque

    Message par artkabis le Sam 7 Mar - 14:11

    Je viens seulement de voir ton message, en fait, tu souhaites utiliser les masques en as3 ?

    Voici une petite application qui charge une image distante et qui lui applique un masque aprés que le chargement soit totalement effectué. Tous les éléments (sauf le masque ont été créés dynamiquement: dégradé,texte,preloader,chargement et affichage de l'image,etc).



    Voici le comment j'ai codé ceci:
    Attention il faudra que précise l'adresse de ton image et que tu créé toi même un clip contenant ton masque(il faudra cocher "exporter pour actionScript" et choisir "Maskk" comme nom de classe) pour que tout fonctionne correctement
    Code:

    var adresse:URLRequest = new URLRequest("adresse de ton image");
    var chargeur:Loader = new Loader();
    var jauge:Shape = new Shape ();
    var pct:TextField = new TextField();
    var sceneW:int=stage.stageWidth;
    var maskk:Maskk = new Maskk();
    var bg:Shape = new Shape();
    var type:String = GradientType.LINEAR;
    var couleurs:Array = [0x222222, 0x000000];
    var alphas:Array = [1, 1];
    var ratios:Array = [0x00, 0xFF];
    var matr:Matrix = new Matrix();
    var method:String = SpreadMethod.PAD;

    matr.createGradientBox(250, 250, -100, 100, 100);
    bg.graphics.beginGradientFill(type, couleurs, alphas, ratios, matr, method); 
    bg.graphics.drawRect(0,0,500,500);
    chargeur.load(adresse);
    jauge.graphics.beginFill(0x00FFFF);
    jauge.graphics.drawRect(0, 0, 1, 3);
    jauge.x = 0;
    jauge.y = (stage.stageHeight - jauge.height) /2;
    pct.width = 26;
    pct.height = 20;
    pct.textColor = 0x00FFFF;

    addChild (bg);
    addChild(chargeur);
    addChild (maskk);
    addChild(jauge);
    addChild (pct);

    var dist:int = sceneW-pct.width;
    chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementValide);
    chargeur.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressChargement);
    chargeur.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,erreur);

    function chargementValide(pEvt:Event) {
       removeChild(jauge);
       removeChild(pct);
       var imgLarg:Number = pEvt.currentTarget.width;
       var imgHaut:Number = pEvt.currentTarget.width;
       chargeur.width = imgLarg;
       chargeur.height = imgHaut;
       chargeur.x = (stage.stageWidth - chargeur.width) /2;
       chargeur.y = (stage.stageHeight - chargeur.height) /2;
       chargeur.mask = maskk;
       
    }

    function progressChargement(pEvt:ProgressEvent) {
       var loaded:Number = pEvt.bytesLoaded;
       var total:Number =  pEvt.bytesTotal;
       var pourcent:Number = loaded/total
       jauge.scaleX = pourcent* dist;
       pct.text = Math.floor(pourcent * 100) + "%";
       pct.x = (pourcent* dist)+jauge.x ;
       pct.y = jauge.y - (pct.height/2) ;
    }
    function erreur (pEvt:IOErrorEvent):void{
       removeChild(jauge);
       pct.width = 120;
       pct.text = "Erreur de chargement...";
       pct.x = (stage.stageWidth - pct.width)/2;
       pct.y = (stage.stageHeight - pct.height)/2;
       
    }

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Messages : : 80
    Age : : 34
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? Photoshop CS4, illustrator CS4, flash CS4, Dreamweaver CS4, mais aussi Accessoirement Encore CS4, Première CS4, indesign CS4, Bridge CS4, blender :p
    Date d'inscription : 21/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Lun 27 Avr - 21:41

    super, merci encore artkabis, je viens de finir le tuto sur la galerie dynamique (que j'ai un peu de mal à comprendre d'ailleurs); celui-ci, sera le prochain je pense. Smile

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Mar 28 Avr - 5:56

    Oupss j'ai pas fait attention à la taille de mes fichier !! désolée :-)

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Mar 28 Avr - 9:20

    Caliche, il faut vraiment que tu arrêtes de poster n'importe où, car là je viens de supprimer ton précédent post (ici) où tu déposais tes créas, ça fait quand même trois fois le même poste dans trois endroits différents, donc je ne vais pas non plus m'amuser à supprimer tous les jours tes messages, si tu veux exposer tes créations, ce que je comprends tout à fait et tu peux le faire en créant un nouveau sujet à cet endroit: http://artkabis.forumactif.org/galeries-des-membres-f31/

    Essaies de faire attention où tu postes, car ceci nous donne plus de taff ce qui laisse par exemple moins de temps pour aider d'autres membres.


    _________________
    J'me fais de la pub et na tongue

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Mar 28 Avr - 9:32

    Désolée, gros plantage pc hier soir et donc pour moi je pensais que ce n'était pas partis.

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Mer 6 Mai - 15:58

    Bonjour, je voudrais savoir comment et où mettre le script pour stoper une animation faite uniquement avec des masques...

    Merci d'avance pour la réponse :-)

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Mer 6 Mai - 16:02

    En fait tu veux stopper quoi ? une interpolation avec des masques ? c'est bien ça? Si c'est le cas, tu places ton stop à l'endroit ou tu souhaites que ton anim se stoppe.


    _________________
    J'me fais de la pub et na tongue

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Mer 6 Mai - 17:03

    Ben en fait j'ai 3 calques images et 3 calque masque (1 pour chaque correspondant).
    Donc quand je regarde ma page je n'ai qu'une image pour chaque calque.
    Dois-je mettre le stop dans chaque calque, dans chaque masque, dans le dernier masque uniquement?

    Je veux qu'une fois mon animation terminée, elle ne se répète pas indéfiniment en fait.

    Et puis je ne connais rien du tout en action script ...donc je ne sais pas ce que je dois écrire pour stopper...j'imagine un truc du genre "stop ()"....mais bon c'est que de l'imagination là mdr

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Mer 6 Mai - 18:37

    En fait il faut que tu place ton "stop();" à l'endroit ou la time line est la plus grande, si ton animation fait 10 image clés, alors tu créais un nouveau calque, puis en image clé 10 tu ajoute une image clé vide, tu fais "F9" pour ouvrir le panneau de actions et tu écris:
    Code:
    stop();


    _________________
    J'me fais de la pub et na tongue

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Jeu 7 Mai - 9:41

    Merci artkabis...je vais tester ça :-)

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Jeu 7 Mai - 10:53

    J'ai pas compris Mdr! C'est pas toi qui ne sait pas expliquer mais plutôt moi qui n'y comprend rien lol

    Donc voici mon scénario où je n'ai qu'une image à chaque calque et dans les calque de masque là je vais juste que 170 dans chacun.



    Donc je voit pas trop où je dois mettre mon stop...il doit s'arrêter à la fin du 170 de mon masque 2...donc je créer un calque au dessus de mon masque 2 mais je n'ai qu'une image vide, est-ce que c'est là que je met mon stop?

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Jeu 7 Mai - 12:40

    Perso, moi je prolongerais tout les calques j'usqu'en image 170, puis je créais en nouveau calque au-dessus des autres, dans ce calque, je me place en image 170 puis je fait "F6" puis "F9", le panneau action est ouvert et il me suffit de taper:
    Code:
    stop();

    Deuxième solution tu entres dans le masque, puis dans un nouveau calque en image 170, tu créer une image clé vide (raccourcie "f6") et tu ouvres le panneau des actions pour insérer un :
    Code:
    stop();
    . Attention car si tu veux que tout tes calques s'arrêtent en image clé 170, il faudra faire la même chose...


    _________________
    J'me fais de la pub et na tongue

    caliche
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    photoshop cs4
    flash cs4
    Date d'inscription : 21/04/2009

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

    Re: Retour aux sources: Gestions des masques

    Message par caliche le Jeu 7 Mai - 13:27

    Hummm tu vas dires que je suis stupide lol mais lorsque je prolonge mes calque jusque 170 et puis que je crée une image clé (en faisant bien un calque action) dès que je fais 'f9' pour coder, il me dit "pas d'action selectionnée".... est ce que je suis une vrai patate ou bien j'ai encore pas compris ou oublier quelque chose?

    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: Retour aux sources: Gestions des masques

    Message par artkabis le Jeu 7 Mai - 16:56

    Il faut que tu créais une image clé vide en 170( avec f6) puis ensuite que tu sélectionnes l'image clé vide pour insérer le stop


    _________________
    J'me fais de la pub et na tongue

    lp177
    Nouveau membre
    Nouveau membre

    Messages : : 32
    Age : : 25
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 15/06/2009

    Re: Retour aux sources: Gestions des masques

    Message par lp177 le Mar 16 Juin - 5:27

    Merveilleux tuto une fois de plus =) je voyais pas bien en lisant le titre l'utilité des masque dans la flash mais la ... Sa ma donné des idées tous sa ^^ merci art!

    Natescala
    Nouveau membre
    Nouveau membre

    Messages : : 30
    Age : : 47
    Logiciels : Logiciels : : Photoshop cs5,
    Flash cs5,
    Dreamweaver, corel paintshop photo x3.

    Date d'inscription : 11/05/2010

    Re: Retour aux sources: Gestions des masques

    Message par Natescala le Sam 15 Mai - 11:19

    Coucou,
    Mon problème est quand je visionne mon animation sur flash tout va très bien, ensuite je la garde et quand je veux la visionner mon texte n'apparait pas mais le reste oui.
    Pourquoi?

    Contenu sponsorisé

    Re: Retour aux sources: Gestions des masques

    Message par Contenu sponsorisé Aujourd'hui à 19:52


      La date/heure actuelle est Mar 6 Déc - 19:52