Forums Développement Multimédia

Aller au contenu

Echange de position en y

position clip

9 réponses à ce sujet

#1 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 06 April 2019 - 08:01 AM

Bonjour,

J'ai une colonne de 10 clips, lorsque je clic sur un clip je souhaiterais qu'il descende en dernière position et que celui qui est en dernière position vienne prendre sa place et ainsi de suite suivant le clip qui est cliqué.
J'ai monté un fla et un début de code, pouvez vous m'aider ou m'orienter sur comment faire svp, merci.


var tab_clips:Array = [clip_1, clip_2, clip_3, clip_4, clip_5, clip_6, clip_7, clip_8, clip_9, clip_10];
var max_tab_clips:int = tab_clips.length;

for (var i:int=0 ; i < max_tab_clips; i++)

{
  tab_clips[i].addEventListener (MouseEvent.CLICK, act_tab_clips_down);
}
 

  function act_tab_clips_down(me:MouseEvent):void

{
  var indexClip:int = tab_clips.indexOf (me.target);
  me.target.y = 270;
 
}
 

Fichier(s) joint(s)



#2 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1786 messages

Posté 06 April 2019 - 17:21 PM

tu peux essayer

function act_tab_clips_down(me:MouseEvent):void
{
        var clip:MovieClip = me.currentTarget as MovieClip;
        tab_clips.sortOn("y", Array.DESCENDING | Array.NUMERIC);
        var lastClip:MovieClip = tab_clips[0];
        if( clip == lastClip ) return;
        var clipY:Number = clip.y;
        clip.y = lastClip.y;
        lastClip.y = clipY;
}


#3 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 07 April 2019 - 07:22 AM

Bonjour pol2095,

Comme toujours merci pour ton aide, je viens de me rendre compte d'une grossière erreur de ma part, en fait les clips constituent une liste de choses à faire et lorsque je clic sur un clip c'est pour effacer sont contenu et le déplacer en fond de liste pour avoir une liste propre sans espace vide, cela dit si j'effectue un remplacement avec le dernier clip de la liste et que celui-ci ne contient pas de chose à faire, et bien en fait je remplace inutilement un clip que je viens de vider par un autre qui est vide chose que je n'est pas du tout réalisé.


clip_1.txt.text = "Rendez-vous Ophtalmo à 15h";
clip_2.txt.text = "Déménagement Yohann samedi matin";
clip_3.txt.text = "Réparer porte garage";
clip_4.txt.text = "Commander livre le Médecin volant";
clip_5.txt.text = "";
clip_6.txt.text = "";
clip_7.txt.text = "";
clip_8.txt.text = "";
clip_9.txt.text = "";
clip_10.txt.text = "";
var tab_clips:Array = [clip_1, clip_2, clip_3, clip_4, clip_5, clip_6, clip_7, clip_8, clip_9, clip_10];
var max_tab_clips:int = tab_clips.length;

for (var i:int=0 ; i < max_tab_clips; i++)

{
  tab_clips[i].addEventListener (MouseEvent.CLICK, act_tab_clips);
}

function act_tab_clips(me:MouseEvent):void
{
  var clip:MovieClip = me.currentTarget as MovieClip;

  me.target.text = ""; // Supprime le contenu texte

  tab_clips.sortOn("y", Array.DESCENDING | Array.NUMERIC);

  var lastClip:MovieClip = tab_clips[0];

  if( clip == lastClip ) return;

  var clipY:Number = clip.y;

  clip.y = lastClip.y;

  lastClip.y = clipY;
}
 


#4 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 08 April 2019 - 05:34 AM

J'ai résolu le problème, je posterais mon script ce soir car pas de PC sous la main, bonne journée.

#5 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 08 April 2019 - 21:30 PM

J'ai transcris de cette façon qui n'est pas du tout optimisée c'est certain, mais qui fonctionne parfaitement.

clip_1.txt.text = "Rendez-vous Ophtalmo à 15h";
clip_2.txt.text = "Déménagement Yohann samedi matin";
clip_3.txt.text = "Réparer porte garage";
clip_4.txt.text = "Commander livre le Médecin volant";
clip_5.txt.text = "";
clip_6.txt.text = "";
clip_7.txt.text = "";
clip_8.txt.text = "";
clip_9.txt.text = "";
clip_10.txt.text = "";

var tab_clips:Array = [clip_1, clip_2, clip_3, clip_4, clip_5, clip_6, clip_7, clip_8, clip_9, clip_10];
var max_tab_clips:int = tab_clips.length;

for (var i:int=0 ; i < max_tab_clips; i++)
{
  tab_clips[i].addEventListener (MouseEvent.CLICK, act_tab_clips);
}

function act_tab_clips(me:MouseEvent):void
{
  var indexClip:int = tab_clips.indexOf (me.target);
  var posi_en_cours:int;

  // Récupération Y du clip cliqué
  posi_en_cours = me.currentTarget.y;

  var posi_clip_1 = clip_1.y;
  var posi_clip_2 = clip_2.y;
  var posi_clip_3 = clip_3.y;
  var posi_clip_4 = clip_4.y;
  var posi_clip_5 = clip_5.y;
  var posi_clip_6 = clip_6.y;
  var posi_clip_7 = clip_7.y;
  var posi_clip_8 = clip_8.y;
  var posi_clip_9 = clip_9.y;
  var posi_clip_10 = clip_10.y;

  // Tout les clips supérieur à la position Y du clip cliqué remontent d'un cran
  if ( posi_clip_1 > posi_en_cours ){clip_1.y = (posi_clip_1 -30);}
  if ( posi_clip_2 > posi_en_cours ){clip_2.y = (posi_clip_2 -30);}
  if ( posi_clip_3 > posi_en_cours ){clip_3.y = (posi_clip_3 -30);}
  if ( posi_clip_4 > posi_en_cours ){clip_4.y = (posi_clip_4 -30);}
  if ( posi_clip_5 > posi_en_cours ){clip_5.y = (posi_clip_5 -30);}
  if ( posi_clip_6 > posi_en_cours ){clip_6.y = (posi_clip_6 -30);}
  if ( posi_clip_7 > posi_en_cours ){clip_7.y = (posi_clip_7 -30);}
  if ( posi_clip_8 > posi_en_cours ){clip_8.y = (posi_clip_8 -30);}
  if ( posi_clip_9 > posi_en_cours ){clip_9.y = (posi_clip_9 -30);}
  if ( posi_clip_10 > posi_en_cours ){clip_10.y = (posi_clip_10 -30);}

  // Renvoi du clip cliqué en bas de la liste et suppression du contenu texte
  me.currentTarget.y = 270;
  me.target.text = "";
}
 


#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 09 April 2019 - 19:25 PM

Salut,

Une classe serait plus pratique pour gérer tes clips.
Sinon, tes clips sont dans un tableau, pourquoi ne pas l'utiliser pour les positionner ?
Il te suffit d'envoyer le clip sur lequel on clique en dernière position du tableau et de le vider (le clip, pas le tableau).
Puis tu boucle sur le tableau et tu repositionne chaque clip à son index * la hauteur d'un clip.

Tu peux essayer la chose suivante :

Classe ClipAgenda

package {
 
        import flash.display.MovieClip;
        import flash.events.Event;
 
        public class ClipAgenda extends MovieClip {

                // Constructeur  
                public function ClipAgenda(myText:String):void {
                        txt.text = myText;
                        // ajouter le code voulu pour gérer les clips de type Agenda
                };       

        }
}
 


Code du FLA :

var textes = ["Rendez-vous Ophtalmo à 15h", "Déménagement Yohann samedi matin", "Réparer porte garage", "", "", "", "", "", "", ""];
var stockage = [];
for (var i=0 ; i<textes.length; i++){
        var monClip:ClipAgenda =  new ClipAgenda(textes[i]);
        monClip.addEventListener(MouseEvent.CLICK, ordreClips);
        stockage.push(monClip);
        addChild(monClip);
}
afficheClips();

function afficheClips():void{
        for (var i=0 ; i<stockage.length; i++){
            stockage[i].y = i*30;
        }
}

function ordreClips(me:MouseEvent):void{
        var currentIndex:int = stockage.indexOf(me.currentTarget);
        stockage.push(stockage.splice(currentIndex, 1)[0]);
        me.target.text = "";
        afficheClips();
}
 

Fichier(s) joint(s)



#7 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 09 April 2019 - 19:33 PM

Et si on veut être logique, autant que le clip sache de lui même ce qu'il a à faire quand on le détruit, et permettre de modifier la tâche en cours du même coup :

Classe ClipAgenda

package {
       
        import flash.display.MovieClip;
        import flash.events.Event;
       
        public class ClipAgenda extends MovieClip {

                // Constructeur
                public function ClipAgenda(myText:String):void {
                        txt.text = myText;
                        // ajouter le code voulu pour gérer les clips de type Agenda
                        // couleur en fonction de la tâche
                        // typo du texte selon l'importance
                        // icone devant pour identifier le type de tâche
                        // ...
                };     
               
                // change task
                public function changeText(texte:String = ""):void{
                        txt.text = texte;
                }
               
                // kill Task
                public function kill():void{
                        this.changeText();
                }              

        }
}



Code du FLA :


var textes = ["Rendez-vous Ophtalmo à 15h", "Déménagement Yohann samedi matin", "Réparer porte garage", "", "", "", "", "", "", ""];
var stockage = [];
for (var i=0 ; i<textes.length; i++){
        var monClip:ClipAgenda =  new ClipAgenda(textes[i]);
        monClip.addEventListener(MouseEvent.CLICK, ordreClips);
        stockage.push(monClip);
        addChild(monClip);
}
afficheClips();

function afficheClips():void{
        for (var i=0 ; i<stockage.length; i++){
            stockage[i].y = i*30;
        }
}

function ordreClips(me:MouseEvent):void{
        var currentIndex:int = stockage.indexOf(me.currentTarget);
        stockage.push(stockage.splice(currentIndex, 1)[0]);
        me.currentTarget.kill();
        afficheClips();
}


#8 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 10 April 2019 - 18:27 PM

Bonsoir Monsieur Spi,

Mon script plus haut montre mon niveau en as3 et donc pas très élévé comme tu as dû le constater mais j'arrive cependant à faire du bricolage qui fonctionne... ou pas, le problème en lisant les 2 modèles de script que tu as réalisés, mème après plusieurs lectures je n'arrive pas à garder le fils du script je ne sais plus qui fait quoi et ce à mon grand regret, je n'ai même jamais crée de classe en fichier as externe.

#9 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7012 messages

Posté 10 April 2019 - 19:58 PM

Salut,

C'est donc l'occasion de s'y mettre, prendre un peu de temps pour comprendre comment ça marche te fera gagner énormément de temps dans tes développements.

1 - Télécharge le fichier ClipAgenda.as et le FLA
2 - met les deux dans un même dossier
3 - ouvre le FLA et regarde dans la bibliothèque les propriétés du clip ClipAgenda

Comment ça marche :

Le clip dans la bibliothèque est lié en AS via un nom de classe "ClipAgenda" qui correspond à la classe "ClipAgenda.as"
Cette "classe" décrit simplement le code propre aux clips que tu utilise et qui sont de type "ClipAgenda".
Cette façon de faire permet d'isoler le comportement et le code qui concerne un "objet" (ici ton clip) dans cet objet.
En fait il suffit de regarder autour de toi, tout ce qui t'environne est composé d'objets plus ou moins complexes.
Ta chaise, ton bureau, ton grigo, ta télé, ton ordinateur, ....
Chaque objet est conçut pour répondre à un besoin, par exemple ta TV est "programmée" pour t'afficher une image quand tu appuye sur ta télécommande, tout ce qui est dans la TV concerne la TV, pas ton programme principal (toi qui veut regarder la TV).
Tu communique avec ta TV à l'aide d'une "interface", ta télécommande qui envoie un signal à la TV pour qu'elle fasse ce que tu veux.
La manière dont la TV fait les choses la concerne (code de l'objet), et ne te concerne pas toi (le programme principal).

L'intérêt de coder en "objets" est donc de créer des "moules" (la classe) qui te permettent de fabriquer autant d'objets que tu veux à partir du même "moule".

Donc, je crée un clip (il se range dans la bibliothèque), il contient les éléments graphiques de mon objet (ton texte, le fond de couleur, etc...).
Dans la bibliothèque, je modifie les propriétés du clip pour l'"exporter pour AS", ça permet de le relier à une classe (ici écrite dans un fichier externe) qui va contenir le code propre à cet objet.

Si tu as du mal avec les mots et les concepts, remplace "classe" par "code interne" et "objet" par "ma tv", ça sera plus simple à comprendre, ce ne sont que des mots, ce qui importe c'est l'idée qui est derrière et c'est plus simple de "voir" avec des objets qui t'entourent.

L'écriture de classes doit répondre à une structure précise (nom de la classe, fonction constructeur, etc...) un peu de lecture sur le Wiki à ce sujet (tu en as pour 2 heures max) : http://forums.mediab...ases/classesqqc

Tu n'as pas besoin de comprendre le code que j'ai écrit pour voir que ça simplifie énormément ton propre code.

Bien, voyons ce que fait notre objet "ClipAgenda" :

// "package" indique où se trouve le code de la classe, ici à la racine de ton projet
package {
         
        // import permet d'importer des objets utiles utilisés par l'AS3
        // ici ce qu'il faut comprendre c'est tout objet est composé d'autres objets
        // ta TV est composée d'un objet "écran" qui se charge de l'affichage
        // mais aussi d'un objet "tuner" qui réceptionne les flux de programmes
        // d'un objet "capteur infrarouge" qui réceptionne les actions de ta télécommande
        // etc....
        // puis selon le modèle de la TV on va modifier ces objets de base pour y ajouter des options
        //
        // puisque nous allons travailler avec un clip dont on cherche à augmenter les capacités
        // on a besoin de l'objet de base, donc on l'importe     
        import flash.display.MovieClip; // objet de type "MovieClip"
        import flash.events.Event; // objet de type événement
 
        // ici commence le code de l'objet
        // la classe porte le nom du fichier où elle est écrite "ClipAgenda"
        // elle est "publique" donc visible par tout le monde (le reste de ton programme)
        // et elle "étend" (ajoute des options) à l'objet de base "MovieClip"
        // ceci lui permet de posséder toutes les propriétés d'un clip (x,y, width, height, ...)
        // et on va donc lui ajouter des fonctionnalités, c'est le but ici
        public class ClipAgenda extends MovieClip {

 
                // la première fonction à écrire dans la classe est le constructeur
                // il porte bien son nom, il permet de "construire" ton objet
                // en gros lorsque tu fera var monclip = new ClipAgenda();
                // c'est cette fonction "constructeur" qui sera appelée
                // il permet d'initialiser ton objet
                // comme n'importe quelle fonction on peut lui passer des paramètres
                // donc ici on lui passe le texte que ton objet va afficher

                // Constructeur
                public function ClipAgenda(myText:String):void {
         
         
                                // dans ton clip tu as créé un champ texte dynamique
                                // tu l'as appelé "txt", comme il fait partie de ton clip
                                // il est accessible directement, on peut donc le remplir                                
                                txt.text = myText;

                                // tu peux ajouter tout ce que tu veux pour initialiser ton objet
                };     
         
         
                // ton objet à besoin à présent de nouvelles fonctionnalités
                // comme par exemple ta TV qui comprend que si tu appuye sur 1 tu veux TF1
                // on écrit donc les fonction propres à notre objet
                // elles sont "publiques" pour qu'on puisse y accéder de l'extérieur
                // encore une fois comme ta TV, elle a des fonctions "privée"
                // dont tu n'as même pas conscience et qui lui permettent de fonctionner
                // et des fonctions "publiques" que tu peux déclencer avec ta télécommande
         
                // on a besoin de deux fonction pour ton objet
                // une qui permet de changer son texte
                // une qui permet de réinitialiser l'objet
         
                // change task
                public function changeText(texte:String = ""):void{
                        txt.text = texte;
                }
         
                // kill Task
                public function kill():void{
                        // ici "this" fait référence à "cet objet"
                        // il permet de dire "dans cet objet lance la fonction cahngeText"
                        this.changeText();
                }                      

                // voilà ton objet est à présent autonome
                // il a appris à faire son boulot
                // son code est isolé ici car ça ne concerne pas le programme principal
        }
}

Maintenant que ton clip qui est dans la bibliothèque à appris à se comporter comme il faut, regardons le programme principal :

// on commence par créer un tableau qui contient les textes
var textes = ["Rendez-vous Ophtalmo à 15h", "Déménagement Yohann samedi matin", "Réparer porte garage", "", "", "", "", "", "", ""];

// et un pour stocker les objets que tu aura créé
var stockage = [];

// on fait une boucle sur le tableau des textes
// ceci pour créer les objets depuis la classe
for (var i=0 ; i<textes.length; i++){

        // "monclip" est du type de la classe
        // c'est pareil que lorsque tu type "MovieClip"
        // sauf que tu type avec ton "MovieClip" étendu, ta classe
        // on lui passe le texte qu'il attend pour le constructeur
        var monClip:ClipAgenda =  new ClipAgenda(textes[i]);
       
        // on y ajoute un écouteur d'événement pour le clic
        monClip.addEventListener(MouseEvent.CLICK, ordreClips);
       
        // on le range dans le tableau de stockage
        stockage.push(monClip);
       
        // on l'ajoute à la liste d'affichage du programme
        addChild(monClip);
}

// les clips sont créés avec la boucle ci-dessus
// il faut maintenant les positionner correctement
// on va faire une fonction pour ça, on l'appelle tout de suite
afficheClips();

// cette fonction permet de positionner chaque clip correctement
// elle parcours le tableau de stockage
// et modifie la position Y de chaque clip qui s'y trouve
// la formule est simple : index dans le tableau * hauteur d'un clip
// i=0 donc 0*30=0
// i=1 donc 1*30=30
// i=2 donc 2*30=60
// ...
function afficheClips():void{
        for (var i=0 ; i<stockage.length; i++){
                stockage[i].y = i*30;
        }
}

// quand on clique sur un clip il faut à présent le repositionner
// on va utiliser une fonction qui fait ce travail
function ordreClips(me:MouseEvent):void{

        // on récupère la position (index) du clip dans le tableau de stockage
        var currentIndex:int = stockage.indexOf(me.currentTarget);
       
        // on ajoute ce clip à la fin du tableau
        // tout en le retirant de son index actuel
        // on le déplace donc tout simplement à la fin du tableau
        stockage.push(stockage.splice(currentIndex, 1)[0]);
       
        // on indique au clip ce qu'il doit faire
        // c'est comme avec la télécommande de ta TV
        // quand tu appuie sur 1 la TV fait sa tambouille pour afficher TF1
        // ici c'est pareil, on appelle la fonction "kill" du clip
        // c'est codé dans l'objet (la classe "ClipAgenda")
        // le programme principal ne s'occupe pas de ce que ça fait
        // l'objet sais le faire lui même, on lui donne juste l'instruction
        me.currentTarget.kill();
       
        // ton clip est vidé et repositionné en fin de tableau
        // il reste à repostionner tous les clips, on a déjà fait une fonction pour ça
        afficheClips();
}

Voilà, il n'y a rien de compliqué ou complexe à comprendre, c'est juste un souci de vocabulaire.
Si les mots "classe", "objet", "methode", "constructeur", etc... te dérangent pour comprendre, remplace les par des mots connus.

Objet = ma TV
Classe = code interne de ma TV
Methode = fonctionnalités de ma TV
Constructeur = celui qui construit ma TV et lui donne ses paramètres

Si tu comprend ça tu as tout gagné.
Tu pourra à présent créer des objets complexes et en fabriquer autant que tu veux sous le même modèle (classe).

C'est exactement ce que tu fais quand tu crée un nouveau clip via l'interface de Flash.
Ce clip est un "objet" dont la "classe" à été écrite par Adobe pour AS3.

Donc quand tu fais :

var monclip:MovieClip = new MovieClip();

Tu crée un "objet" de type MovieClip qui dépend de la classe (code interne) "MovieClip" écrite par Adobe.
Avec ce que je viens de t'expliquer tu crée aussi un objet de type "MovieClip", mais tu l'a personnalisé pour qu'il fasse ce que tu veux.

var monclip:ClipAgenda = new ClipAgenda();

Tu ne pourra progresser que si tu prend le temps de comprendre comment coder des "objets".
Voilà, j'ai pris un moment pour essayer de t'expliquer simplement comment ça marche, à toi de jouer.
J'espère que tu feras cet effort, ça m'ennuierai d'avoir passé du temps à tout décrire pour rien.

Voici enfin un dernier lien pour t'aider à comprendre comment utiliser des objets.
Le code de cet exercice permet de gérer des particules et un générateur, c'est assez simple à comprendre.
http://forums.mediab...iche_particules

#10 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 471 messages

Posté 10 April 2019 - 20:58 PM

Enorme merci Monsieur Spi, et pas d'inquiétude pour faire des efforts à progresser surtout avec ce genre d'aide et d'encouragement, c'est plus qu'encourageant, je reste tout de mème un peu gêné de ta sollicitude, c'est tout à ton honneur comme d'autres d'ailleurs qui répondent présent en cas de difficulté (merci pol2095), je vais prendre le temps de lire et relire pas à pas tes explications pour bien tout assimiler et réécrire les scripts jusqu'a bien comprendre ce que j'écris.
Merci et bonne soirée.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP