Sujet Précédent Sujet Suivant

Bouton Sur un carrousel chargé dynamiquement

Dylancozian Messages postés 3 Date d'inscription vendredi 2 septembre 2011 Statut Membre Dernière intervention 10 septembre 2011 - 2 sept. 2011 à 21:57
Dylancozian Messages postés 3 Date d'inscription vendredi 2 septembre 2011 Statut Membre Dernière intervention 10 septembre 2011 - 10 sept. 2011 à 17:50
Bonjour ami flasheur 
Je viens vers vous car j'ai un problème avec un carrousel en flash.
Un ami m'a passé une source qu'il a récupérait sur internet pour son carrousel. 
Ce dernier se charge en XML. Jusque là tout va bien, tout marche.
Mais j'aimerais ajouter une fonctionnalité et malgré des jours de test je ne parviens pas a trouver comment faire.
Voilà, j'aimerais que pour chaque image qu'il y aura dans mon carrousel, qu'il y est un bouton qui se créer sur un coté de ma scène qui, lors ce que je cliquerais dessus, me ramènerais l'image correspondante au premier plan. Je ne sais pas si je m'exprime bien donc je vais le représenter par des petit dessin pour que se soit plus clair :).



Donc les boutons sur le côté n'aurons pas de style particulier. Je n'arrive pas à trouver comment faire cette fonction à partir du thème que l'on ma donné.... Auriez-vous des idées pour me guider ou des suggestions à m'apporter ou un exemple de source ?
Je vous laisse mon code là : 

//Auteur Céline Mornet @ 2008
//http://www.lutincapuche.com
//si ce script vous plait, vous pouvez cliquer sur les bannières adword en bas de mon blog, ca vous coute rien et ca me paye un café ! Merci :)

////////////////////////////////////////////////////////////////
//import de la classe external interface qui permet d'appeler un script externe
import flash.external.*;

//déclaration des variables
var numOfItems:Number;		
var clipLegende:MovieClip;	

//chargement du xml
function load_xml(path:String,type:String){
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad=function(){		
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
//je genere le caroussel quand tout est chargé.
genereCarousel(nodes);	
}
xml.load("xml/"+path);		
}


function genereCarousel(nodes){

level = hote_carousel_mc.getNextHighestDepth();	
//creation de l'hote du carousel
hote_carousel_mc.createEmptyMovieClip("carrousel",1);	
clipHote = hote_carousel_mc["carrousel"];		
//si l'option légende est coché a true, j'attache la légende sur la scene
if(isLegende==true){
hote_carousel_mc.attachMovie("legende_mc","legende_mc",2);		
clipLegende= hote_carousel_mc["legende_mc"];		
clipLegende._alpha=0
}
//je parcours tous les objets du xml, et jeleur attribut leur propriété
for (var i=0;i<numOfItems;i++){						
var myItem=clipHote.attachMovie("item","item"+i,i+1);		
myItem.angle = i* ((Math.PI*2)/numOfItems);		
myItem._y=Math.sin(myItem.angle)*radiusY +centerY;			
var s:Number = (myItem._y - perspective)/(centerY + radiusY - perspective)
myItem._xscale=myItem._yscale=s*50;
myItem._x=Math.cos(myItem.angle)*150+centerX;									
myItem.icon.inner.loadMovie(nodes[i].attributes.image);		
//chargement de l'image dans icon.inner
myItem.icon.onEnterFrame = function(){
if(this.inner._width>2){
//quand l'icone est chargé, je lui met la largeur fixe correspondant à la variable largeurIcons
this.rapport = this.inner._width/this.inner._height;
this.inner._width=largeurIcons;
//puis je lui applique la hauteur proportionnelle
this.inner._height=largeurIcons/this.rapport;
//centrage du clip
this._x=-this.inner._width/2
this._y=-this.inner._height
//tres important on kill l'enterFrame
delete this.onEnterFrame;
}
}		
myItem.icon.smoothing=true;			
//on charge l'image dans son reflet
myItem.ref.inner.loadMovie(nodes[i].attributes.image);
myItem.ref.onEnterFrame = function(){
if(this.inner._width>2){
//quand l'image est chargé, on la met à la bonne dimension
this.rapport = this.inner._width/this.inner._height;
this.inner._width=largeurIcons;
this.inner._height=largeurIcons/this.rapport;
//on replace le reflet
this._x=-this.inner._width/2
this._y=this.inner._height;
this._parent.masker._width = this.inner._width;
this._parent.masker._height =hauteurReflet;
this._parent.masker._x =-this.inner._width/2;				
//tres important on kill l'enterFrame
delete this.onEnterFrame;
}
}				
myItem.swapDepths(Math.round(myItem._xscale) + 100 +i);	
//j'applique la fonction mover a l'enterframe
myItem.onEnterFrame = mover;		
//j'associe les attributs lien,tooltips et grandeImage du xml au clip
myItem.lien=nodes[i].attributes.lien;
myItem.grandeImage=nodes[i].attributes.grandeImage;
myItem.tooltip=nodes[i].attributes.tooltip;
//action au clic qui ouvre le lien de celui ci
myItem.onRelease = function(){						
//si l'option lightbox ets active
if(this.grandeImage!=undefined){				
//j'arrete le carousel quand la ligthboox s'ouvre
var my_timedProcess:Number = setTimeout(stopSpeed, 500);
//j'appelle la fonction dans le js
ExternalInterface.call("SWFDelegate", ""+this.grandeImage+"",""+this.tooltip+"");
}else{
//sinon je fais un lien classique dans une nouvelle fenetre
//si le lien est renseigné. Sinon, je ne fais rien
if(this.lien!=undefined){				
getURL(this.lien,"_blank")
}
}
}
//si la légende est active, je l'affiche au rollOver
myItem.onRollOver = function(){
if(isLegende==true){
afficheLegende(this)				
}			
}
//si la légende est active, je la masque au rollOver
myItem.onRollOut = function(){
if(isLegende==true){
masqueLegende(this)
}			
}
}	
}


//rotation du caroussel
function mover(){		
this.swapDepths(Math.round(this._xscale) + 100);				
this._x=Math.cos(this.angle)* radiusX + centerX;
this._y=Math.sin(this.angle)* radiusY + centerY;
var s:Number = (this._y - perspective)/(centerY + radiusY- perspective);		
this.s=s;
this._xscale=this._yscale=s*100;		
this.angle += nSpeed;		
}
//mise a jour de la vitesse du caroussel quand la souris bouge
this.onMouseMove = function(){
nSpeed=(this._xmouse-centerX)/15000;
}

//fonction d'affichage de la légende
function afficheLegende(cible:MovieClip){	
clipLegende.onEnterFrame = function(){
if(this._alpha<100){
this._alpha +=10;
}		
this._x = cible._x - this._width/2;
this._y = cible._y - cible.s*100 * 3;		
this.label_txt.text=cible.tooltip;
this.label_txt.autoSize = true;
this.bg_mc._width=this.label_txt._width+10;
this.bg_mc._height=this.label_txt._height+10;		
}
}

function masqueLegende(cible:MovieClip){	
clipLegende.onEnterFrame = function(){
if(this._alpha>0){
this._alpha -=10;
}else if(this._alpha==0){
this._alpha =0;
delete clipLegende.onEnterFrame
}
}	
}

function stopSpeed(){
nSpeed=0;	
}



//je lance le chargement du xml
load_xml("icons.xml");

//vars to edit
var wScene:Number = 800; 		//largeur du clip flash
var hScene:Number = 600;		//hauteur du clip
var radiusX:Number=300;			//rayon horizontal du carousel
var radiusY:Number=70;			//rayon vertical du carousel
var centerX:Number=wScene/2;	//centre horizontal du clip
var centerY:Number=hScene/2;	//centre vertical du clip
var nSpeed:Number=0.05;			//vitesse de rotation
var perspective:Number=70;		//perspective visuelle du carousel
var largeurIcons:Number=200;	//largeur des images à afficher dans le carousel
var hauteurReflet:Number=80;	//taille du reflet
var isLegende:Boolean=false;	//activation de l'affichage de la légende au rollOver, true ou false



Je vous remercie d'avance.

3 réponses

Réponse 1 / 3
pegase31 Messages postés 6138 Date d'inscription dimanche 21 décembre 2003 Statut Modérateur Dernière intervention 4 septembre 2013 12
2 sept. 2011 à 22:51
Bonsoir, as-tu pensé à contacter l'auteur de cette source qui a justement laissé ses coordonnées dans la source à cet effet ?
Elle serait la plus apte à répondre à ta question, car la source est d'elle à la base ...

Peg'
0
Réponse 2 / 3
Dylancozian Messages postés 3 Date d'inscription vendredi 2 septembre 2011 Statut Membre Dernière intervention 10 septembre 2011
3 sept. 2011 à 14:54
Bonsoir, as-tu pensé à contacter l'auteur de cette source qui a justement laissé ses coordonnées dans la source à cet effet ?
Elle serait la plus apte à répondre à ta question, car la source est d'elle à la base ...

Peg'


Effectivement ta remarque était judicieuse :). Je lui est envoyé un mail. Si l'auteur peut m'aiguiller, je reviendrais sur le forum pour y partager ses conseils! On ne sais jamais ça servira peut être à quelqu'un d'autre :).
0
Réponse 3 / 3
Dylancozian Messages postés 3 Date d'inscription vendredi 2 septembre 2011 Statut Membre Dernière intervention 10 septembre 2011
10 sept. 2011 à 17:50
BOnjour, je reviens vers vous car je ne m'en suis toujours pas sorti. J'ai simplifié le code pour que les items soient en statique.. Donc je fais le carrousel en statique. Créer un bouton pour le l'associer à l'un de mes items. j'ai mis un trace dessous tout ce passe bien. Mais pour la fonction j'ai essayer plusieurs possibilité mais rien ne fonction.. Je veux juste que lors ce que je clique sur le bouton l'item associé viens se mettre au premier plan du carrousel... Voilà mon code 
var rotX:Number = 120;
var rotY:Number;
var Centre:Number = Stage.height/2;
var vitesse:Number = 0.4;
var sceneW:Number =Stage.width;
var sceneH:Number = Stage.height;
var nbI:Number=5;
var angle:Number=1;
var i:Number;
var marg:Number=05;


for(i=0;i<nbI;i++)
{
//_____________________&#9675;&#9675;&#9675;---lier les clips à la scéne____
this.attachMovie('Icone'+i,'Ic'+i,i);
//_____________________&#9675;&#9675;&#9675;---clic sur les images____
this['Ic'+i].onRelease=function(){
trace (this);
}
//_____________________&#9675;&#9675;&#9675;---positionnement des clips au centre de la scéne____
this['Ic'+i]._y = sceneH /2;
}

//_____________________&#9675;&#9675;&#9675;---rotation des clips____

onEnterFrame=function(){
//_____________________&#9675;&#9675;&#9675;---Rayon de rotation de l'axe y (en pixels)
rotY = ( Centre - this._ymouse );
if (rotY <= -5) {
rotY = -5
}
else if (rotY >= 50) {
rotY = 50;
}
 //_____&#9675;&#9675;&#9675;---remise a zero de l'angle aprés tour complet
 if (angle > (2*Math.PI))
 {
 angle = 0;
 }else{			 
 	for(i=0; i<nbI; i++){
//_____________________&#9675;&#9675;&#9675;---rotation des clips sur l'axe x
this['Ic'+i]._x=rotX*Math.cos(angle+2*Math.PI*i/nbI)+sceneW/2;
//_____________________&#9675;&#9675;&#9675;---angle des clips sur l'axe y
this['Ic'+i]._y=rotY*Math.sin(angle+2*Math.PI*i/nbI)+sceneH/2;
//_____________________&#9675;&#9675;&#9675;---mise a jour de la taille du clip (60%->premier plan, 40%->arriere plan)
this['Ic'+i]._xscale=60/2*(Math.sin(angle+2*Math.PI*i/nbI)+ 1)+50;
this['Ic'+i]._yscale=this['Ic'+i]._xscale;

//_____________________&#9675;&#9675;&#9675;---gestion de la profondeur (en pixels);
this['Ic'+i].swapDepths(rotX*Math.sin(angle+2*Math.PI*i/nbI));
 	}
//_____________________&#9675;&#9675;&#9675;---Gestion de la rotation en fonction de la souris(x)
if(this._xmouse < (sceneW/2+rotX+120) && this._xmouse > (sceneW/2-rotX-120))
{
//_____________________&#9675;&#9675;&#9675;---Gestion de la rotation en fonction de la souris(y)
if(this._ymouse < sceneH && this._ymouse > 0)
{
//_____________________&#9675;&#9675;&#9675;---Gestion de la vitesse 
angle=angle+(this._xmouse-sceneW/2)/sceneH*vitesse;
}
}if(_xmouse>Stage.width-marg || _xmouse<marg || _ymouse>Stage.height-marg || _ymouse<marg){vitesse= 0;}else{vitesse=0.4};
 }
 }
 
 
 _root.btn1.onRelease=function(){

this.IcO._x = Math.cos(0); 

trace('maJoie');
 }



La dernière fonction 
 _root.btn1.onRelease=function(){

this.IcO._x = Math.cos(0); 

trace('maJoie');
est une des solutions auxquelles j'avais pensé. Il y avait aussi celle là 
 _root.btn1.onRelease=function(){

this.IcO._x = sceneW /2;
this.Ic0._y = sceneH /2;

trace('maJoie');


Lors ce que je trace "this.Ic0" et que je clique sur l'item auquel est associé Ic0 le trace s'effectue bien...

Pouvez-vous m'aider ?? Merci d'avance
0

Discussions similaires

Activer un bouton de commande
Faya49 -
Faya49 -

2 réponses
faire grisé un bouton
poomen -
billou_13 -

19 réponses
un bouton rechercher
kanabinch -
kanabinch -

5 réponses
[->Javascript] Griser ou éteindre un bouton
agentmorris -
agentmorris -

4 réponses
Cahier de charge d'un site web !
cs_hassane86 -
nawara7034 -

1 réponse
Rejoignez-nous