Retour aux sources: Gestions des masques

    Partager

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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 - 18: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 - 15:17, édité 1 fois


    _________________
    J'me fais de la pub et na tongue

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 80
    Age: 29
    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: 22/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Mer 4 Fév - 20: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

    Nombre de messages: 631
    Age: 21
    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 - 20:24

    :p

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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 - 15:18

    La vidéo est arrivée !!!


    _________________
    J'me fais de la pub et na tongue

    rahjuliano
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 80
    Age: 29
    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: 22/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Jeu 5 Fév - 16: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 Sam 7 Fév - 0:55, édité 1 fois

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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 - 15: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

    Nombre de messages: 80
    Age: 29
    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: 22/01/2009

    Re: Retour aux sources: Gestions des masques

    Message par rahjuliano le Lun 27 Avr - 22: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

    Nombre de messages: 142
    Age: 31
    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 - 6:56

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

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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 - 10: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://www.artkabis.net/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

    Nombre de messages: 142
    Age: 31
    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 - 10:32

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

      La date/heure actuelle est Lun 6 Fév - 13:53