[Résolu] Flash à la maniere de MSN

Marsh Posté le 26-09-2008 à 11:50:32

Salut,
Voici ce que l'on voulait faire : http://video.msn.com/?mkt=fr-FR (le menu de videos en haut)
J'ai essayé de retrouver le sujet sur lequel vous appreniez à faire ceci.
Abais ou quelqu'un d'autre je crois avait commencé à balancer un fla avec un code et Zed a modifié ce code pour l'alléger un peu.
Bref, je ne retrouve pas le sujet ... il a du être supprimé par l'auteur (ce qui n'est pas très intelligent).

Alors voilà vos fichiers :
Abais (ou quelqu'un d'autre) --> http://amorissard.free.fr/hfr/ques [...] eMSN_2.fla
Zed --> http://amorissard.free.fr/hfr/ques [...] eMSN_3.fla

et le mien --> http://amorissard.free.fr/hfr/ques [...] PROMO2.fla

Seulement voilà, je voudrai placer des masques à la place de ces dégradés et avoir des images derriere mes masques car j'ai l'impression que ce vous avez réalisé redimensionne les rectangles dégradé au lieu de jouer réellement un rôle de masque (à la maniere de MSN).

donc j'ai tenté de faire ça mais du coup je n'ai plus que 2 masque sur mes 4 qui fonctionnent et j'aimerai comprendre pourquoi ....

le voici --> http://amorissard.free.fr/hfr/ques [...] _PROMO.fla

avez vous la solution à mon soucis ?
merci à vous deux du temps que vous m'accorderez

Message édité par liverpowen le 30-09-2008 à 10:58:14

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 11:50:32

Reply

Marsh Posté le 26-09-2008 à 12:36:02

J'avoue que c'est tres bizarre.

Dans ton anim les masques 1 et 3 ne prennent plus d'action de boutons. Si tu fais :
this.masque_3.onRelease = function(){
}
ou avec le 1, ca ne marche pas. Alors qu'avec 2 et 4 oui...

Completement dingue Je cherches et je te tiens au jus.

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 12:42:01

ouaip je ne comprends pas non plus
merci mon piti

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 12:45:30

Mais bordel de merde, je retourne ce fichier dans tout les sens et y'a pourtant rien qui cloche :fou:

Message cité 1 fois

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 12:45:50

Au tiens, bonjour liverpowen, comme on se retrouve zed !
Je vais voir mais je crois que Zed a plus de capacité dans le domaine...

Sinon : http://forum.hardware.fr/forum2.ph [...] w=0&nojs=0

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 12:47:58

ah mais quel boulet !
moi qui croyait avoir poster là bas ... je cherchais le topic dans mes favoris
merci abais :jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 12:48:25

Zedlefou a écrit :

Mais bordel de merde, je retourne ce fichier dans tout les sens et y'a pourtant rien qui cloche :fou:

bah non :lol:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 12:49:17

mais si tu as une autre idée pour présenter de la maniere que je voudrais le faire ... n'hésite pas :whistle:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 12:51:01

Putain, le debuggueur marche pas....
Flash player ou vista64 ?

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 12:53:43

what ? :sweat:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 12:53:43

Reply

Marsh Posté le 26-09-2008 à 12:58:47

Mon débogueur ne marche plus, je vois plus les variable et tout...
Je sais pas d'ou ça vient... mais ce qui ai sure c'est que c'est la 1ere fois que je le lance sur ce PC : Flash CS3 et Vista SP1 64bit

Message édité par abais le 26-09-2008 à 12:59:34

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 13:01:08

Bon j'ai pas vraiment résolu le probleme mais je l'ai contourné.

En fait au lieu de faire les masques a la bourin comme toi, je les appliques en code (j'ai du mettre des images en clip) avec setMask.

Et ca marche. J'ai aussi changé un poil le code pour que le onEnterFrame ne tourne pas en permanence.

http://dl.free.fr/rSFhmDjFF

Message cité 1 fois
Message édité par Zedlefou le 26-09-2008 à 13:01:59

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 13:03:45

MDR, j'ai fais la même chose mais tu m'a grillé !

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 13:07:31

[:svone]

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 13:08:12

Pourquoi :

Code :

this.onEnterFrame = null;

et non :

Code :

this.delete onEnterFrame

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 13:12:13

Je sais pas, j'ai pris l'habitude comme ca

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 13:16:06

wé, j'ai bcp de chose a comprendre/apprendre....
Mais le coup du bug de liver, j'abandonne !

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 26-09-2008 à 13:43:54

Zedlefou a écrit :

Bon j'ai pas vraiment résolu le probleme mais je l'ai contourné.

En fait au lieu de faire les masques a la bourin comme toi, je les appliques en code (j'ai du mettre des images en clip) avec setMask.

Et ca marche. J'ai aussi changé un poil le code pour que le onEnterFrame ne tourne pas en permanence.

http://dl.free.fr/rSFhmDjFF

je regarde ça et je te tiens au courant.
mais pour le moment je vais mangé

merci à vous deux ! je savais que je pouvais vous faire confiance :jap: :jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 15:27:26

Zed, bon c'est magnifique ce que tu as fait hein ... t'es vraiment un chef !
mais je n'y comprends rien du tout

Code :

this["prod"+i].setMask(ref);

ça c'est pour créer un masque sur le calque this ?

Code :

ref.onRollOver = function() {
select = this.id;
this._parent.onEnterFrame = blop;

mais ça ? c'est pour faire quoi ?

et pourquoi tu changes :

Code :

onEnterFrame = function () {
masque_1_x = 0;
masque_2_x = 60;
masque_3_x = 120;
masque_4_x = 180;
//

par :

Code :

function blop() {
masque_1_x = 0;
masque_2_x = 60;
masque_3_x = 120;
masque_4_x = 180;
//

et :

Code :

if (((this["masque_"+select+"_width"]-this["masque_"+select]._width)/ease) == 0) {
this.onEnterFrame = null;
}

à quoi ça sert ?

:jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 16:49:42

et imaginons que je veuille mettre un link sur chacune des images, un link de redirection ...
je mets ça comment ?
dans le code ?
ou je mets des boutons transparents sur chacun de mes clips qui contiennent une image avec un "on release" ?

Message cité 1 fois

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 26-09-2008 à 18:15:18

Citation :

Zed, bon c'est magnifique ce que tu as fait hein ... t'es vraiment un chef !

[:hakansukur] ??

Citation :

Code :

this["prod"+i].setMask(ref);

ça c'est pour créer un masque sur le calque this ?

J'ai renommé tes clips prod1, 2, 3, 4. Et comme les masques respectifs sont masque_1, etc ... dans la boucle tu appels ton clip (["prod"+i]) et tu lui attributs "ref" qui fait référence au masque (["masque_"+i]). Ca revient a this.prod1.setMask(this.masque_1);

Citation :

Code :

ref.onRollOver = function() {
select = this.id;
this._parent.onEnterFrame = blop;

mais ça ? c'est pour faire quoi ?

Ca veut dire qu'a chaque fois que tu passes au dessus d'une image, tu déclenches un onEnterFrame sur la scene principale qui va lire la fonction "blop". Ce qui est mieux que d'avoir un enterFrame en permanence. Bon la c'est pas indispensable mais sur les gros projets c'est vital parfois.

Citation :

Code :

function blop() {

Ca c'est la fonction qui est appelé par ton onEnterFrame.

Citation :

Code :

if (((this["masque_"+select+"_width"]-this["masque_"+select]._width)/ease) == 0) {
this.onEnterFrame = null;
}

à quoi ça sert ?

C'est pour arrêter le onEnterFrame quand le déplacement s'arrete. (deplacement = 0)

Bon j'ai un peu chipotter mais quand les projets prennent de l'envergure et que du dois ajouter plein de fonction, c'est mieux d'etre rigoureux et d'avoir un code propre.

Message édité par Zedlefou le 26-09-2008 à 18:17:57

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 26-09-2008 à 18:16:47

liverpowen a écrit :

et imaginons que je veuille mettre un link sur chacune des images, un link de redirection ...
je mets ça comment ?
dans le code ?
ou je mets des boutons transparents sur chacun de mes clips qui contiennent une image avec un "on release" ?

La tu peux faire simplement :
prod1.onRelease = function(){
patincoufinGetURLtruc ...
}

Et pareil pour les autres.

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 30-09-2008 à 09:52:43

merci beaucoup Zed, je vais essayé tout ça :jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 30-09-2008 à 10:27:11

Zed, je ne comprends pas (encore une fois) pourquoi ça ne fonctionne pas ...
j'ai essayé plusieurs choses mais prout ...

Code :

// On met tout le code au meme endroit
//
var select = 1;
var ease = 4;
// le nombre d'image dans ta galerie
var nbImg = 4;
// Actions de rollOver sur les 4 images masque_n
for (i=1; i<=nbImg; i++) {
var ref = this["masque_"+i];
ref.id = i;
this["prod"+i].setMask(ref);
ref.onRollOver = function() {
select = this.id;
this._parent.onEnterFrame = blop;
};
}
function blop() {
masque_1_x = 0;
masque_2_x = 60;
masque_3_x = 120;
masque_4_x = 180;
//
for (k=1; k<=nbImg; k++) {
prod1.onRelease = function(){
getURL("url de mon produit" );
}
prod2.onRelease = function(){
getURL("url de mon produit" );
}
prod3.onRelease = function(){
getURL("url de mon produit" );
}
prod4.onRelease = function(){
getURL("url de mon produit" );
}
// Attribution des largeurs
// Si l'image n'est pas selectionné on lui mets 59 sinon 299
this["masque_"+k+"_width"] = (k == select) ? 299 : 59;
// On decale toutes les images suivantes de 240 pour laisser la place
this["masque_"+(select+k)+"_x"] += 240;
// Animations
this["masque_"+k]._x += (this["masque_"+k+"_x"]-this["masque_"+k]._x)/ease;
this["masque_"+k]._width += (this["masque_"+k+"_width"]-this["masque_"+k]._width)/ease;
}
if (((this["masque_"+select+"_width"]-this["masque_"+select]._width)/ease) == 0) {
this.onEnterFrame = null;
}
}

:sweat:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 30-09-2008 à 10:49:32

Bon, oui je me suis un peu gourré Bizarre pourtant je pensais que ca marcher.
Bref, c'est pas sur l'image qu'il faut mettre une action mais sur le calque.
Donc masque_1.onRelease etc ...
De plus tu ne mets pas ca dans la fonction mais direct a la racine du code.

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 30-09-2008 à 10:57:29

yes !
ça fonctionne !

merci infiniment ! :jap: :jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 30-09-2008 à 10:59:14

voilà le code qui fonctionne

Code :

// On met tout le code au meme endroit
//
masque_1.onRelease = function(){
getURL("url" );
}
masque_2.onRelease = function(){
getURL("url" );
}
masque_3.onRelease = function(){
getURL("url" );
}
masque_4.onRelease = function(){
getURL("url" );
}
var select = 1;
var ease = 4;
// le nombre d'image dans ta galerie
var nbImg = 4;
// Actions de rollOver sur les 4 images masque_n
for (i=1; i<=nbImg; i++) {
var ref = this["masque_"+i];
ref.id = i;
this["prod"+i].setMask(ref);
ref.onRollOver = function() {
select = this.id;
this._parent.onEnterFrame = blop;
};
}
function blop() {
masque_1_x = 0;
masque_2_x = 60;
masque_3_x = 120;
masque_4_x = 180;
//
for (k=1; k<=nbImg; k++) {
// Attribution des largeurs
// Si l'image n'est pas selectionné on lui mets 59 sinon 299
this["masque_"+k+"_width"] = (k == select) ? 299 : 59;
// On decale toutes les images suivantes de 240 pour laisser la place
this["masque_"+(select+k)+"_x"] += 240;
// Animations
this["masque_"+k]._x += (this["masque_"+k+"_x"]-this["masque_"+k]._x)/ease;
this["masque_"+k]._width += (this["masque_"+k+"_width"]-this["masque_"+k]._width)/ease;
}
if (((this["masque_"+select+"_width"]-this["masque_"+select]._width)/ease) == 0) {
this.onEnterFrame = null;
}
}

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 09:17:34

Suite a nos messages privés:
Tu pourrais poster le dernier fla ?
si tu peux pas (confidentialité, tout ca ...) en gros moi sur ton anim pour que ce soit fluide, j'aurai mis un nombre d'image seconde a 30.
Et changé la variable: var ease = 10;

Et sur le voile blanc que tu mets sur l'image non survolé, j'aurais mis une action qui le fait apparaitre et disparaitre progressivement plutot que d'un coup.

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 15-10-2008 à 09:35:48

je peux te le poster en MP si tu veux
mais pour des raisons de confidentialité, et non de refus de partage de savoir faire, je ne peux pas me permettre de le donner à tout le monde.
après, avec tout ce que l'on a dit avant (enfin surtout toi et abais), il y a moyen d'obtenir des choses sympas.

et tu pourras mettre le bout de code pour régler l'opacité progressivement si tu veux

je te l'envoie ? :love:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 09:40:41

oki

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 15-10-2008 à 11:32:27

... je suis jaloux ...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 15-10-2008 à 11:34:31

de ? :??:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 12:02:00

tu peux m'envoyer le résultat pour voir ? sur la tête de Zed, je ne le diffuse pas...
Je n'étais pas au courant que vous développiez une version top secrète en MP...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 15-10-2008 à 12:11:22

il ne m'a pas encore renvoyé la derniere version
mais je t'envoie le fichier que j'ai retravaillé moi

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 12:37:49

Donc comme je disais, j'ai changé le FPS a 30. Et mis la variable 'ease' a 10. C'est plus smooth.

Pour le code, il faut que tu remplaces la partie entre les onRelease et la fonction blop par ceci :

Code :

import mx.transitions.Tween;
//
var select = 1;
// vitesse
var ease = 10;
// le nombre d'image dans ta galerie
var nbImg = 4;
// Actions de rollOver sur les 4 images masque_n
for (i=1; i<=nbImg; i++) {
var ref = this["masque_"+i];
ref.id = i;
this["prod"+i].setMask(ref);
ref.clip = this["prod"+i];
ref.onRollOver = function() {
select = this.id;
this._parent.onEnterFrame = blop;
for (m=1; m<=nbImg; m++) {
// on ramene tout les clips a 60 d'alpha
alphaTo60(this._parent["prod"+m]);
}
// on ramene le clip sous la souris a 100 d'alpha
alphaTo100(this._parent["prod"+this.id]);
};
}
function alphaTo100(clip) {
var myTween:Tween = new Tween(clip, "_alpha", mx.transitions.easing.Elastic.easeOut, clip._alpha, 100, 10, true);
}
function alphaTo60(clip) {
var myTween:Tween = new Tween(clip, "_alpha", mx.transitions.easing.Elastic.easeOut, clip._alpha, 60, 10, true);
}

Et tu compares les 2 versions

EDIT : je l'ai mis sur la premiere version pour montrer
http://dl.free.fr/qBy4eYF7Z

Message édité par Zedlefou le 15-10-2008 à 12:40:36

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 15-10-2008 à 12:47:39

Rooooooooh c'est beau [:hysafe]

J'ai du boulot pour le moment mais à la fin de ma journée ou demain je regarde tout cela attentivement [:charlest]

merci merci merci Zed :jap: :jap: :jap:

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 12:52:29

tien ! j'ai pas fais comme ça !
Je viens d'apprendre le Tween, merci Zed !
(Je me suis compliqué la vie avec un compteur de 0 à 100 moi !)

Message cité 1 fois

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le 15-10-2008 à 13:03:35

abais a écrit :

tien ! j'ai pas fais comme ça !
Je viens d'apprendre le Tween, merci Zed !
(Je me suis compliqué la vie avec un compteur de 0 à 100 moi !)

Le probleme des Tweens, c'est que c'est assez mal documenté. Mais sinon c'est tres pratique.

De rien :jap:

Message cité 1 fois

---------------
Jeu de simulation Boursière - Version BETA - https://www.facebook.com/wildstocks

Reply

Marsh Posté le 15-10-2008 à 14:23:47

Zedlefou a écrit :

Le probleme des Tweens, c'est que c'est assez mal documenté. Mais sinon c'est tres pratique.

De rien :jap:

aaaaaaaah ça c'est clair !
super mal documenté !
depuis le temps que je veux les essayer, je n'ai jamais rien compris

d'ailleurs, si tu as un lien qui explique assez bien l'usage des tweens ...

Message cité 1 fois

---------------
OUAIB | FLICKR | HFR | 500 PX

Reply

Marsh Posté le 15-10-2008 à 16:01:01

liverpowen a écrit :

d'ailleurs, si tu as un lien qui explique assez bien l'usage des tweens ...

Message édité par abais le 15-10-2008 à 18:19:26

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Reply

Marsh Posté le

Reply

[Résolu] Flash à la maniere de MSN

Sujets relatifs:

Leave a Replay