Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: [Résolu] Animation masque  (Lu 6735 fois)

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
[Résolu] Animation masque
« le: septembre 09, 2008, 20:35:33 pm »

Bonjour à tous je bosse sur une petite banniere pub et j'ai trouver un script sur sympa pour du texte animé.

Je voudrais que mon texte ne soit visible qu'à l'intérieur des limites de mon contour blanc.
Et je voudrais que l'anime sop au bout de 10 seconde pour passer à autre chose.
J'ai tenté de mettre un masque mais rien n'y fait.
Je pose le swf et le fla si quelqu'un peu m'aider un petit peu.
Merci

http://
« Modifié: septembre 18, 2008, 06:59:04 am par Yorigami »
IP archivée

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
Re : masque
« Réponse #1 le: septembre 10, 2008, 08:32:20 am »

Eh bien personne ne peut venir à mon secours????
IP archivée

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
Re : masque
« Réponse #2 le: septembre 10, 2008, 11:34:13 am »

Que de message, que de gens impliqué..
Dommage. Merci
IP archivée

kriztho

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 1490
    • Voir le profil
    • La veille techno du web
    • E-mail
Re : masque
« Réponse #3 le: septembre 10, 2008, 12:48:30 pm »

Pas eu le temps de m'y plonger...
Mais une piste de travail : gère tout en clip (pas de graphisme pour ton masque) et utilise la méthode setMask()...
A tester
IP archivée
______________________________________________________________
Je ne connais pas grand chose, mais je progresse...
[La veille techno du web] - [Histoire d'écrire de l'informatique]

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
Re : Re : masque
« Réponse #4 le: septembre 10, 2008, 13:09:00 pm »

bonjour,

J'ai pas le temps maintenant. Mais je te donne une explication dans la soirée.

En attendant la solution en pièce jointe.

Merci c'est sympa mais ton fla ne change rien si ce n'est que je ne vois plus dans mon cadre mais que ne dehors de celui-ci.

Pas eu le temps de m'y plonger...
Mais une piste de travail : gère tout en clip (pas de graphisme pour ton masque) et utilise la méthode setMask()...
A tester

Merci aussi à toi mais même si je mets mon masque en clip rien n'y fait et pour moi l'actionscript c'est du chinois.
IP archivée

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
Re : masque
« Réponse #5 le: septembre 10, 2008, 14:29:28 pm »

Bonjour,

Le fichier final dans le post suivant. Explications aussi....
« Modifié: septembre 10, 2008, 18:11:28 pm par RMistral »
IP archivée
Savoir mal est pire qu'ignorer

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
Re : masque
« Réponse #6 le: septembre 10, 2008, 16:47:31 pm »

Encore moi,

Donc pour reprendre ton problème le code original n'est pas clean  >:(

Il faut être méfiant vis à vis de code ramassé n'importe ou sur le Web et ne respectant pas les règles élémentaires de la programmation.

Il y a du code dans un movieclip, les éléments sont en vrac sur la scène avec du code sur un calque contenant un MC. Pas bon çà......


Pour résoudre ton problème j'ai recommencé à zéro.

Pourquoi tu n'arrive pas à faire un masque devant les mots ?

Dans flash sur la scène il est possible de faire des calques. Le calque le plus haut contient le MC le plus proche de l'observateur. Le calque le plus bas le plus lointain.

Si tu ajoute des MC par programmation avec createEmptyMovieClip (création d'un nouveau MC) ou attachMovie (création d'une occurrence d'un MC de la bibliothèque) ou duplicateMovie (copie d'un MC déjà présent sur la scène), tu fabrique en réalité des calques virtuels qui sont obligatoirement au dessus du plus haut calque de la scène d'ou le problème que tu rencontre.

En effet dans le fichier original nous avons sur la scène des clips et par programmation (duplicateMovie) l'ajout des clips contenant les mots.

Quand tu essaye de rajouter sur la scène un masque tu es forcément derrière les mots donc ton masque est inopérant.

C'est pour cela qu'il vaut mieux tout faire soit en code soit sur la scène.


Le principe:

Une fonction animation gère le déplacement des mots, la transparence etc... Un moteur génère des MC contenant les mots pris de manière aléatoire dans une liste et les passe à la fonction d'animation à la cadence de la scène.

Les éléments constituant le décor de l'animation (image de fond et masque) sont appelés dynamiquement, à partir de la bibliothèque, par ActionScript sur la scène.

Comme te le propose judicieusement Kriztho il faut par programmation mettre le calque virtuel contenant le masque le plus haut possible puis utiliser setMask qui est l'équivalent en programmation du masque sur les calques de la scène.

Suis-je bien clair ?  :P

L'organisation

Sur la scène............ Rien  ;D puisque nous faisons le travail uniquement par le code.

Dans la bibliothèque un MC contenant la photo de fond news.png. Le MC possède un identifiant de liaison* (fond) pour qu'il soit possible de l'appeler par ActionScript sur la scène.

Toujours dans la bibliothèque, un MC nommé particule contenant une zone de texte dynamique nommé zntexte. Le MC particule possède lui aussi un identifiant de liaison* (particule) pour pouvoir l'appeler à la volée sur la scène par programmation ActionScript.

Enfin un MC nommé Masque contenant une forme vectorielle blanche. Le MC Masque à lui aussi un identifiant de liaison *(Masque).

Le code

Sur ta scène un seul calque avec une seule image clé. Le calque nommé ActionScript.

Sur cette image clé le code suivant :
//animation des mots sur la scène
animationParticule=function(Void):Void{
//Incrementation des coordonnées x et y pour déplacer le MC
this._x += this.trajectoirex;
this._y += this.trajectoirey;
//augmentation de la taille et de l'opacité de manière constante pour donner l'effet de rapprochement vers l'observateur
this._xscale = this._yscale = this._alpha += this.increment;
//Si le mot sort de la scène
if (this._x-this._width/2>Stage.width || this._x+this._width/2<0 || this._y-this._height/2>Stage.height || this._y+_height/2<0) {
//Rend invisible le MC le temps de modifier les réglages
this._visible=false
//Alors tirage d'un nouveau mot dans le tableau mots
this.zntexte.text = mots[random(mots.length)];
//Changement des propriétés perso
this.trajectoirex = Math.random()*10-Math.random()*10
this.trajectoirey  = Math.random()*10-Math.random()*10;
this.increment = Math.random()
//Remise à l'échelle 1 du MC
this._xscale = this._yscale = 100
//Position sur la scene pour un nouveau départ
this._x = 86;
this._y = 107;
this._alpha = 30;
//Rend visible à nouveau le MCle MC
this._visible=true
}

}
//======================================== corps du programme ===========================================
//Initialisation
var scene:MovieClip=this
//Variable tableau contenant les mots à afficher
var mots:Array = new Array("","maison", "boulot", "dodo", "sommeil", "audit", "contact", "sensibilité");

//----------------------------- Canon a particule
//Generation d'autant de MC sur la scène que de mot dans la variable tableau
for (var i:Number=0;i<=mots.length;i++){
//Mettre sur la scene une copie (occurrence) du MC particule et le nommer particule0, particule1 etc...
scene.attachMovie("particule","particule"+i, i);
//Facilité d'écriture
var partActuelle:MovieClip = scene["particule"+i];
//Remplir le MC particule avec l'un des mots de la variable tableau pris au hasard
partActuelle.zntexte.text = mots[random(mots.length)];
/*Ajout des propriétés perso : deplacement horizontal, vertical et increment pour la taille et la transparence
Calcul à partir pseudo aléatoire pour une plus grande variété*/
partActuelle.trajectoirex = Math.random()*10-Math.random()*10
partActuelle.trajectoirey  = Math.random()*10-Math.random()*10;
partActuelle.increment = Math.random()
//Position initiale sur la scene
partActuelle._x = 86;
partActuelle._y = 107;
partActuelle._alpha = 30;
//Appel a la fonction d'animation à la cadence de x image par seconde (cadence de la scène)
partActuelle.onEnterFrame=animationParticule
}
//----------------------------- Mettre sur la scène le MC de fond et le masque
//Mise sur la scene du fond en profondeur 0 (calque virtuel le plus bas)
scene.attachMovie("fond","fond",0)
//Ajout du masque sur la scene au niveau le plus haut c'est à dire devant les MC contenant les mots
scene.attachMovie("Masque","Masque",mots.length+1)
//Position du MC sur la scène
scene.Masque._x=(Stage.width-scene.Masque._width)*.5
scene.Masque._y=(Stage.height-scene.Masque._height)*.5
//Utilisation du MC comme masque sur la scène
scene.setMask(Masque)


Voilà en pièce jointe le fichier FLA.

Bon courage ....


*Un identifiant de liaison permet de créer des occurrences (copie) d'un MC, présent dans la bibliothèque, par programmation ActionScript. Cela revient au même que de faire un glisser déposer d'un MC de la bibliothèque sur la scène puis dans la case propriétés de lui donner un nom sauf que là le MC est mis sur un calque virtuel (profondeur) au dessus du plus haut calque de la scène.

Pour créer un identifiant il faut lors de la création du MC cliquer sur le bouton avancé de la boite de dialogue créer un symbole (pomme F8 sur MAC ou ctrl F8 sur PC) puis cocher la case exporter pour ActionScript. Le nom du MC est automatiquement reporté en tant qu'identifiant de liaison. Il est possible de le changer si besoin.

Ensuite dans le code lorsque qu'il est nécessaire de créer à la volée une occurrence (copie) du MC il faut utiliser cet identifiant pour indiquer à Flash quel symbole nous souhaitons dupliquer.

Exemple : scene.attachMovie("identifiant du MC à dupliquer","nom que nous lui donnons sur la scène", profondeur)
« Modifié: septembre 11, 2008, 05:48:29 am par RMistral »
IP archivée
Savoir mal est pire qu'ignorer

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
Re : masque
« Réponse #7 le: septembre 11, 2008, 09:23:09 am »

Merci bcp, impressionnant tout ce que tu a pris le temps de faire, je viens de faire une copie papier pour une lisibilité correct.

Je teste le fla et je me rend compte que rien n'a changé sauf le code les mc.

Mes mots ne sont plus centré , il ne partent plus du centre de mon élément, celui ci est partiellement caché, mais les mots eux continu de dépassé le cadre blanc, alors que ce que je cherche à faire c'est justement qu'il ne sorte pas de mon cadre.

Merci à toi et ta patience.
IP archivée

RMistral (Wisi)

  • Global Moderator
  • Wisi Comment on décroche
  • *****
  • Hors ligne Hors ligne
  • Messages: 659
    • Voir le profil
    • Aexpmil Studio - Aexpmil Formation
Re : masque
« Réponse #8 le: septembre 11, 2008, 10:38:17 am »

Bonjour,

Pour centrer les mots tu rentre dans le MC particule par un double clic sur le symbole particule dans la bibliothèque puis tu positionne la zone de texte dans les propriétés à x = -200.5 y=-30

Je croyais que les mots ne devais pas sortir de la scène ce qui est actuellement le cas. Si tu souhaite que les mots reste dans le cadre blanc il faut rajouter devant le masque un calque supplémentaire contenant l'encadrement dont l'intérieur est transparent.

Voilà le résultat en fichier joint.

Bonne journée....



« Modifié: septembre 11, 2008, 11:45:51 am par RMistral »
IP archivée
Savoir mal est pire qu'ignorer

agreu

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 198
    • Voir le profil
Re : masque
« Réponse #9 le: septembre 16, 2008, 08:15:01 am »

Merci bcp à toi. Tout roule j'ai modifier deux trois trucs encore et tout est cool.
IP archivée
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum