Retour aux sources: Gestions des masques

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":

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

:p

La vidéo est arrivée !!!

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

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. 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 (je t'embete, 2eme édition)

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;
   
}

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.

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

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.

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