[FMX2004] Animer le dégradé d'un clip avec _alpha

Bonjour bonjour

Alors voilà. J’ai un clip miniature_mc qui contient un autre clip photo_mc (qui contient un jpeg). J’aimerais quand la souris rentre sur la photo et la quitte avoir un bel effet de fade-in/-out.

Alors j’ai ce ptit bout de code-là:

miniature_mc.onRollOver = function() { &nbsp; &nbsp; for (var l=20;l<100;l++) { &nbsp; &nbsp; &nbsp; &nbsp;this.photo_mc._alpha = l; &nbsp; &nbsp; &nbsp; &nbsp;setInterval (function (){}, 100); &nbsp; &nbsp; } }

Ca fait varier l’opacité du clip de 20 (valeur de base définie ailleurs) à 100. Et ça le fait même vachement bien et vachement vite. Trop vite.

D’où le setInterval qui appellerait une fonction pleine de rien tout les (x) temps. Mais j’ai dans l’idée que c’est pas vraiment comme ça que ça marche cette fonction.

Comment puis-je mettre en pause “l’animation” ?

[quote name=‘nolan’ date=’ 24 Nov 2004, 18:49’]Bonjour bonjour
Alors voilà. J’ai un clip miniature_mc qui contient un autre clip photo_mc (qui contient un jpeg). J’aimerais quand la souris rentre sur la photo et la quitte avoir un bel effet de fade-in/-out.

Alors j’ai ce ptit bout de code-là:

miniature_mc.onRollOver = function() { &nbsp; &nbsp; for (var l=20;l<100;l++) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.photo_mc._alpha = l; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;setInterval (function (){}, 100); &nbsp; &nbsp; } }

Ca fait varier l’opacité du clip de 20 (valeur de base définie ailleurs) à 100. Et ça le fait même vachement bien et vachement vite. Trop vite.

D’où le setInterval qui appellerait une fonction pleine de rien tout les (x) temps. Mais j’ai dans l’idée que c’est pas vraiment comme ça que ça marche cette fonction.

Comment puis-je mettre en pause “l’animation” ?
[right][post=“306796”]<{POST_SNAPBACK}>[/post][/right][/quote]
deja y’a une grosse erreur de code ton set interval est une bonne idée mais elle ne doit pas etre dans la fonction for mais en dehors genre :

[code]miniature_mc.onRollOver = setInterval (function (){}, 100);

function() {
    for (var l=20;l<100;l++) {
         this.photo_mc._alpha = l;
         
    }
}
ke temps de set intervalle est en milliseconde donc ne met pas 100 mais un truc du genre 1000 ou 500

voili voilou mais tu as bon je viens de verifier dans mon bouquin

@+
Bussiere[/code]

EDIT Résolu ^^

Je suis désolé, je viens de trouver une solution à ce problème précis.

Alors voilà:

[code] miniature_mc.onRollOver = function() {
this.onEnterFrame = function () {
this.photo_mc._alpha += (100-this.photo_mc._alpha)/3;
};

};[/code]

J’ai trouvé la solution dans ce tutoriel. Ce n’était pas à première vue ce que je cherchais mais en regardant de plus près j’ai remarqué qu’il y avait un effet de fondu sur le texte. J’ai simplement recopié le code et voilà : )

Seulement si cela marche je ne comprends pas très bien comment l’opacité continue de changer pour atteindre 100 même lorsque je ne survole plus la vignette (je retire la souris avant que l’image ne soit entièrement visible). Quelqu’un pourrait-il brièvement m’expliquer? Je ne vois pas très bien comment l’opacité varie progressivement :confused:

Merci d’avance.

Bussière > Désolé ^^ (mais si tu peux m’expliquer pourquoi ça marche je suis preneur :stuck_out_tongue: )

[quote name=‹ nolan › date=’ 24 Nov 2004, 20:04’]EDIT Résolu ^^

Je suis désolé, je viens de trouver une solution à ce problème précis.

Alors voilà:

&nbsp;miniature_mc.onRollOver = function() { &nbsp;this.onEnterFrame = function () { &nbsp; &nbsp;this.photo_mc._alpha += (100-this.photo_mc._alpha)/3; &nbsp;}; &nbsp; &nbsp;};

J’ai trouvé la solution dans ce tutoriel. Ce n’était pas à première vue ce que je cherchais mais en regardant de plus près j’ai remarqué qu’il y avait un effet de fondu sur le texte. J’ai simplement recopié le code et voilà : )

Seulement si cela marche je ne comprends pas très bien comment l’opacité continue de changer pour atteindre 100 même lorsque je ne survole plus la vignette (je retire la souris avant que l’image ne soit entièrement visible). Quelqu’un pourrait-il brièvement m’expliquer? Je ne vois pas très bien comment l’opacité varie progressivement :confused:

Merci d’avance.

Bussière > Désolé ^^ (mais si tu peux m’expliquer pourquoi ça marche je suis preneur :stuck_out_tongue: )
[right][post=« 306821 »]<{POST_SNAPBACK}>[/post][/right][/quote]

j’aidu mal a comprendre aussi

miniature_mc.onRollOver = function() {

la si on pase dessus alors ca lance la fonction function

this.onEnterFrame = function () {

la aussi

this.photo_mc._alpha += (100-this.photo_mc._alpha)/3;
};

};

je pense que l’astuce vient du fait que vu que tu lance dans une fonction function une autre fonction function ca doit faire une sorte de repeat non dit mais c’est pas tres propre

@+
Bussiere

Ce qu’a fait Busiere est pas mal ( meme si j’aurais fait autrement )

Le probleme c’est que l’objet interval existe toujours apres le “fade”, et ça peut charger à force , puisque l’operation continuera de se produire

Nolan > c’est le onEnterFrame qui est loin d’etre top, ca depanne bien, mais je prefere un setIntervall

En fait tu appelles cette ligne de commandes :
this.photo_mc._alpha += (100-this.photo_mc._alpha)/3;

à chaque “images” de ton animation cette ligne est activée.

donc quand l’alpha est arrivé à 100 des 2 cotés, ca n’augmente plus ( puisque la différence est minime )

Mais le probleme reste le meme, le onEnterFrame() existe toujours , meme à la fin du fading
L’ideal serait donc de tester l’arriver de l’alpha à 100 et ensuite d’evincer le onOEnterFrame en l’annulant comme ceci :
onEnterFrame() = null;

[quote name=‹ Bussiere › date=’ 24 Nov 2004, 20:12’]je pense que l’astuce vient du fait que vu que tu lance dans une fonction function une autre fonction function ca doit faire une sorte de repeat non dit mais c’est pas tres propre
@+
Bussiere
[right][post=« 306824 »]<{POST_SNAPBACK}>[/post][/right][/quote]

En fait pour allouer une fonction à un bouton la vraie syntaxe c’est
Bouton.onRollOver = function(){
//Ce qu’on veut faire }

Il en va de meme pour le onEnterFrame qui s’appelle de la meme façon:
MovieClip.onEnterFrame = function(){
//ce qui va etre repété}

Donc ça n’est pas sale selon moi , contrairement au sexe :stuck_out_tongue:

ca n’est pas du tout un repeat non-dit, le bouton se voit juste alloué une fonction qui s’executera tout le temps de toute façon grace à onEnterFrame, une fois lancée , elle est independante de l’etat du movieclip. Pour l’arreter ( comme dit plus haut) , il suffit de : monClip.onEnterFrame = null;. Là la fonction est annihilée.
Dans ton cas , elle s’arrete « mathematiquement » mais continue d’exister et de se repeter ( ce qui est pour le coup vraiment sale là ).

Donc si je comprends bien la valeur alpha continue d’être upgradée [i]en permanence[i] dans le clip puisque il n’y a qu’une “frame” pour mon clip ? onEnterFrame est un event qui qui se repète tout le temps et c’est en quelque sorte une boucle implicite, c’est ça?

En fait , peu importe le nombre de frames dans ton clip, la fonction lancée par le onEnterFrame se repetera au meme rythme que ton animation ( genre 12 fois par seconde ou 24 ou comme tu veux ).

ps : j’ai edité mon texte au dessus pour etre plus comprehensible ( desolé je me reveille de sieste donc cerveau un peu embrumée )

yop pour la repetition c’est ce qui me semblait aussi c’est pour ca que je l’ai mis en non dit :stuck_out_tongue:

bon je te propose un truc :

[code]miniature_mc.onRollOver = function() {
 this.onEnterFrame = function () {

  this.photo_mc._alpha += (100-this.photo_mc._alpha)/3;
if  (this.photo_mc._alpha  == 100)onEnterFrame() = null;
 };

};[/code]

histoire que ca soit un peu plus propre :stuck_out_tongue:
@+
Bussiere

ah caca la vilaine erreur , ca a chier quelque part : je la refais si tu me permet bussiere !

miniature_mc.onRollOver = function() { this.onEnterFrame = function () { this.photo_mc._alpha += (100-this.photo_mc._alpha)/3; if (this.photo_mc._alpha == 100) { this.onEnterFrame() = null;} }; };
La ca devrait le faire je pense !

Bon là c’est la methode simple et pas prise de tete.
On a aussi la methode setIntervall , plus interessante au final je te la donne si ça peut t’interesser :

[code]//on declare la fonction qui sera répétée par l’intervalle
//et on inclue le destructeur de l’intervalle
function Fade():Void{
this.photo_mc._alpha+= (100-this.photo_mc._alpha)/3;
if  (this.photo_mc._alpha  == 100) {
clearInterval(this.FadeInterval);}
}

//on s’occupe du bouton
miniature_mc.onRollOver = function() {
  var FadeInterval:Object;
   FadeInterval = setInterval(this,« Fade », 100)
};[/code]

Bon à tester , comme ça je suis pas sur à 100% que ça marche ( qui peut pretendre etre sur comme ça :stuck_out_tongue: ) mais la demarche est celle-çi.
Euh avec le recul non ca marchera pas comme ça , j’ai ecrit ça en tenant compte que tout etait programmé en POO et que la function Fade etait une methode de miniature_mc. Pour que ça marche il faut juste modifier la syntaxe du setInterval
( je corrigerais plus tard ! RL time )

[quote name=‹ Monsieur_Max › date=’ 24 Nov 2004, 20:47’]ah caca la vilaine erreur  , ca a chier quelque part : je la refais si tu me permet bussiere !

miniature_mc.onRollOver = function() { &nbsp; this.onEnterFrame = function () { &nbsp; &nbsp; this.photo_mc._alpha += (100-this.photo_mc._alpha)/3; &nbsp; &nbsp; if &nbsp;(this.photo_mc._alpha &nbsp;== 100) { &nbsp; &nbsp; &nbsp; &nbsp;this.onEnterFrame() = null;} &nbsp; &nbsp;}; };
La ca devrait le faire je pense !

Bon là c’est la methode simple et pas prise de tete.
On a aussi la methode setIntervall , plus interessante au final je te la donne si ça peut t’interesser :

[code]//on declare la fonction qui sera répétée par l’intervalle
//et on inclue le destructeur de l’intervalle
function Fade():Void{
this.photo_mc._alpha+= (100-this.photo_mc._alpha)/3;
if  (this.photo_mc._alpha  == 100) {
clearInterval(this.FadeInterval);}
}

//on s’occupe du bouton
miniature_mc.onRollOver = function() {
  var FadeInterval:Object;
   FadeInterval = setInterval(this,« Fade », 100)
};[/code]

Bon à tester , comme ça je suis pas sur à 100% que ça marche ( qui peut pretendre etre sur comme ça :stuck_out_tongue: ) mais la demarche est celle-çi.
Euh avec le recul non ca marchera pas comme ça , j’ai ecrit ça en tenant compte que tout etait programmé en POO et que la function Fade etait une methode de miniature_mc. Pour que ça marche il faut juste modifier la syntaxe du setInterval
( je corrigerais plus tard ! RL time )
[right][post=« 306839 »]<{POST_SNAPBACK}>[/post][/right][/quote]

yop respect :stuck_out_tongue:
@+
Bussiere

Merci tout le monde ^^

Bussiere > yep, je pensais à ce branchement en allant me faire à manger tantôt. Vais ctrl+c ctrl+v pour voir. Merci : )

Monsieur_Max > Merci aussi. Oui, la méthode setinterval m’interresse aussi beaucoup mais c’est parce que je ne sais pas très bien m’en servir et que c’est quand même dommage ça ; ) De plus je ne peux actuellement pas spécifier la vitesse du fading :confused: alors qu’avec un intervalle certainement.

Bussiere> merci :stuck_out_tongue: je suis content de voir qu’ActionScript devienne un vrai language OO reconnu comme tel. ca me fait plaisir de voir que le forum WebDev ait été crée !

Nolan > j’essaye de te faire ça bien ( je veux dire ,corriger le setInterval ) pour ce soir !

Edit: seInterval en folie !

Bon le probleme avec setInterval c’est que au sein de la fonction appelée, tous les chemins repartent de la racine, pas possible de faire un pointage par this par exemple. ( enfin si c’est possible , mais en l’appelant comme methode d’un objet. Ca n’est pas le cas ici , c’etait ce que j’avas ecrit dans mon premier exemple, le code valide serait plutot celui-çi en fait :

[code]//on declare la fonction dans la racine qui sera répétée par l’intervalle
//et on inclue le destructeur de l’intervalle
function Fade():Void{
_root.miniature_mc.photo_mc._alpha+= (100-_root.miniature_mc.photo_mc._alpha)/3;
if (_root.miniature_mc.photo_mc._alpha== 100) {
clearInterval(_root.FadeInterval);}
}
//on déclare l’objet interval
var FadeInterval:Object;
//on déclare la variable qui sera utilisée pour regler la frequence de répetition de l’interval
var vitesseFading:Number;
_root.vitesseFading = 100;

//on s’occupe du code du bouton
_root.miniature_mc.onRollOver = function() {
_root.FadeInterval = setInterval(Fade, _root.vitesseFading)
};[/code]

Voilà là ca devrait vraiment fonctionner , tu colles tout cela dans la racine.
Je suis parti du postulat que ton objet minaiture_mc etait lui aussi dans la racine du scenario… si ca n’est pas le cas , il faudra juste corriger les chemins d’acces :stuck_out_tongue:

A votre service !

Merci, merci ^^

Je vais essayer ça dés que possible : )

Nolan> hésite pas à me contacter sur msn ou IRC. Je leve un peu le pied sur mes projets informatiques ( un peu soulé ) donc j’ai du temps à te consacrer si tu patauges!