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: https://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.

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

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

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.

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

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

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

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?

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

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?

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

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!

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?