Forums Développement Multimédia

Aller au contenu

Effet dynamique pour slider un clip

slider android air

17 réponses à ce sujet

#1 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 03 March 2018 - 12:42 PM

Bonjour,
Je cherche une solution pour améliorer le déplacement de mon clip pour me rapprocher un tant soit peu de l'effet dynamique d'android, j'ai bricolé un code qui donne un semblant défait mais c'est pas vraiment ça, je suis preneur pour toute solution ou suggestion.
Merci àvous.

Ma bidouille:

var posi_Down;  
var posi_Up;
var vitesse:int = 5;
var my_x:int=stage.stageWidth  - page.width;
var my_y:int=stage.stageHeight - page.height;
var myWidth: int = 0 - my_x;
var myHeight: int = 0 - my_y;
var oblong:Rectangle=new Rectangle(my_x, my_y, myWidth ,myHeight);

page.addEventListener(MouseEvent.MOUSE_DOWN, drag);
function drag(event:MouseEvent):void {

  posi_Down = page.y;
  page.startDrag(false,oblong);

}
page.addEventListener(MouseEvent.MOUSE_UP, drop);

function drop(event:MouseEvent):void {

var timer_slider_Y:Timer = new Timer(300, 1);
timer_slider_Y.addEventListener(TimerEvent.TIMER_COMPLETE, stop_slider);
function stop_slider(e:TimerEvent):void {
  removeEventListener(Event.ENTER_FRAME, power);

}

  posi_Up = page.y;

  page.stopDrag();

  addEventListener(Event.ENTER_FRAME, power);

          function power(e:Event):void {
 
        if(posi_Up > posi_Down){ page.y += vitesse;  timer_slider_Y.start(); }
        if(posi_Up < posi_Down){ page.y -= vitesse;  timer_slider_Y.start(); }
        if(page.y >= -1){       page.y = -1;   }
        if(page.y <= -778){   page.y = -778;   }
   }
 
}
 

Fichier(s) joint(s)



#2 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 10 March 2018 - 22:18 PM

Bonsoir,
J'ai plus ou moins réussi à élaborer un code pour simuler un déplacement suivant la vitesse de balayage, cela dit ça fonctionne dans le mauvais sens concernant la vitesse, en effet je me base sur la variable "chrono" que j'obtiens entre le temps du "MOUSE_DOWN & MOUSE_UP" qui me donne alors une valeur que j'utilise pour la vitesse de déplacement, donc évidemment plus la valeur est grande plus le déplacement est rapide et je souhaiterais trouver la formule inverse à savoir plus la valeur est grande plus la vitesse est petite et vice versa, pouvez m'aiguiller sur comment procéder.
Merci à vous.


var chrono:int;

function startchrono(e:Event):void {

chrono ++; trace(chrono);

}

page_tp.clip_tp.addEventListener(MouseEvent.MOUSE_DOWN, drag_tp);
function drag_tp(event:MouseEvent):void {

page_tp.clip_tp.startDrag(false,oblong_y);

addEventListener(Event.ENTER_FRAME, startchrono);

}

page_tp.clip_tp.addEventListener(MouseEvent.MOUSE_UP, drop_tp);

function drop_tp(event:MouseEvent):void {
removeEventListener(Event.ENTER_FRAME, startchrono);
 
timer_slider_Y.addEventListener(TimerEvent.TIMER_COMPLETE, stop_slider);
function stop_slider(e:TimerEvent):void {
removeEventListener(Event.ENTER_FRAME, power);
chrono = 0;

}

page_tp.clip_tp.stopDrag();
addEventListener(Event.ENTER_FRAME, power);

function power(e:Event):void {
 
if(posi_Up > posi_Down){   page_tp.clip_tp.y += chrono;  timer_slider_Y.start();   }
if(posi_Up < posi_Down){   page_tp.clip_tp.y -= chrono;   timer_slider_Y.start();   }

if(page_tp.clip_tp.y >= -5){      page_tp.clip_tp.y = -5;     } // Butée Haute
if(page_tp.clip_tp.y <= -658){  page_tp.clip_tp.y = -658; } // Butée Basse
         
}
}
 


#3 pol2095

  • Members
  • PipPipPipPipPipPipPipPip
  • 1746 messages

Posté 12 March 2018 - 09:27 AM

ton code est illisible, essaie de l'indenter avec des espaces plutôt que des tabulations (il serait bien que ce site supporte les tabulations pour le code).
essaie de ne pas mettre des fonctions dans des fonctions.

#4 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 12 March 2018 - 19:07 PM

Ok, j'en prends note, je vais remagner le code.

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 12 March 2018 - 19:19 PM

Citation

(il serait bien que ce site supporte les tabulations pour le code).

C'est le cas ;)


function tester(){
        // test de tabulation
        for(var i=0; i<10; i++){
            // double tabulation
        }
}


#6 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 12 March 2018 - 19:41 PM

Puisque j'y suis, petite info à propos des écouteurs d’événement.
Quand tu utilise un écouteur et que l'événement est déclenché, tu peux récupérer beaucoup d'infos concernant l'événement dans le paramètre "event" de la fonction concernée. Dans beaucoup de cas cela permet de créer des fonctions uniques pour un lot d'objets, il suffit de regarder la cible concernée. Par exemple :

page_tp.clip_tp.addEventListener(MouseEvent.MOUSE_DOWN, drag_tp);
function drag_tp(e:MouseEvent):void {

        trace(e);// l'événement et ses infos
        trace(e.target); // la cible globale
        trace(e.currentTarget); // la cible courante (si plusieurs clips imbriqués)

        e.target.startDrag(false,oblong_y);
        addEventListener(Event.ENTER_FRAME, startchrono);
}


#7 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 13 March 2018 - 19:24 PM

Voici une remise en forme de mon code, j'ai dans un premier temps j'ai retiré les fonctions dans les fonctions, reformaté le script et trouvé une solution pour la vitesse de mon pseudo slide, le test est assez semblant et repond bien, pour info je précise que je suis au maximum de mes capacités mais volontaire pour faire mieux :smile: !, de ce résultat ce code est à appliquer sur environ 6 autres pages(à importées) y a t-il encore possibilité de remanier le script dans ce sens pour évitez de coder à nouveau pour chaque page ? paralellement une question m'inquiète un peu sur la fluidité de l'animation qui commence à peiner dès que la page contient une certaine quantité de texte, visuellement ça pique les yeux.
Merci d'avance pour vos conseils.


var posi_Down;   // Position "y" fenêtre départ
var posi_Up;  // Position "y" fenêtre arrivée

var chrono:int;  // Valeur incrémentée entre le Up & Down
var speed:int= 20; // Vitesse maximal de déplacement

page_tp.clip_tp.addEventListener(MouseEvent.MOUSE_DOWN, drag_tp);
page_tp.clip_tp.addEventListener(MouseEvent.MOUSE_UP, drop_tp);

// Timer

function stop_slider(e:TimerEvent):void {
  removeEventListener(Event.ENTER_FRAME, move_page);
  chrono = 0;

}

// Chrono

function startchrono(e:Event):void {

  chrono ++; //trace("Chrono = " + chrono);

  if(chrono >= 20){

   chrono = 0;
   speed = 0;
   removeEventListener(Event.ENTER_FRAME, startchrono);

  }
}

// Déplacement de la page

function move_page(e:Event):void {
 
if(posi_Up > posi_Down){
  page_tp.clip_tp.y += speed - chrono;  timer_slider_Y.start();
}

if(posi_Up < posi_Down){
  page_tp.clip_tp.y -= speed - chrono; timer_slider_Y.start();
}

if(page_tp.clip_tp.y >= -5){ // Butée Haute
  page_tp.clip_tp.y = -5;
  }

if(page_tp.clip_tp.y <= -658){ // Butée Basse
  page_tp.clip_tp.y = -658;
  }  
}

// Drag

function drag_tp(e:MouseEvent):void {

  speed = 20; // Remise de la valeur à 20
  posi_Down = e.currentTarget.y;
  e.currentTarget.startDrag(false,oblong_y);
  addEventListener(Event.ENTER_FRAME, startchrono);

}

// Drop

function drop_tp(e:MouseEvent):void {
  removeEventListener(Event.ENTER_FRAME, startchrono);
 
  timer_slider_Y.addEventListener(TimerEvent.TIMER_COMPLETE, stop_slider);

  posi_Up = e.currentTarget.y;
  e.currentTarget.stopDrag();
  addEventListener(Event.ENTER_FRAME, move_page);
  move_page(null);

}
 


#8 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 13 March 2018 - 22:19 PM

Hello,

Une piste de réécriture possible :

// penser à modifier le nom des clips...
var slider = page_tp.clip_tp;
var timerSlider = timer_slider_Y;

// variables
var posStartDrag;
var posStopDrag;
var chrono:int;
var speed:int = 20;
var activateSlider = false;
var activateChrono = false;

// Ecouteurs
slider.addEventListener(MouseEvent.MOUSE_DOWN, drag);
slider.addEventListener(MouseEvent.MOUSE_UP, drop);
addEventListener(Event.ENTER_FRAME, updateSlider);

// mise à jour de l'appli
function updateSlider(e:Event){
    if(activateSlider) movePage();
    if(activateChrono) updateChrono() else chrono = 0;
}

// Drag
function drag(e:MouseEvent):void {
    speed = 20;
    posStartDrag = e.currentTarget.y;
    e.currentTarget.startDrag(false,oblong_y);
    activateChrono = true;
}

// Drop
function drop(e:MouseEvent):void {
    e.currentTarget.stopDrag();
    posStopDrag = e.currentTarget.y;
    timerSlider.addEventListener(TimerEvent.TIMER_COMPLETE, stopSlider);
    activateSlider = true;
}


// gestion du chrono
function updateChrono():void {
    if(++chrono >= speed){
        speed = 0;
        activateChrono = false;
    }
}

// arrêt du slider
function stopSlider(e:TimerEvent):void {
    activateSlider = false;
    activateChrono = false;
}

// Déplacement de la page
function movePage():void {
    var sens = 0;
    if(posStopDrag < posStartDrag) sens = -1;
    if(posStopDrag > posStartDrag) sens = 1;
    if(sens) {
        slider.y += (speed - chrono)*sens;
        timerSlider.start();
    }
    limitesY(slider,-658,-5);
}

// limiter un mouvement sur Y
function limitesY(ob,haut,bas):void {
    if(ob.y <= haut) ob.y = haut;
    if(ob.y >= bas) ob.y = bas;
}

Après j'ai pas testé, ch'ais pas c'que ça fait, t'façon j'ai pas tout l'code....

#9 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 14 March 2018 - 20:52 PM

Bonsoir,
J'ai monté le code sur une maquette pour exposer le résultat cela dit je n'arrive pas à remettre en place le timer, je n'ais pas encore tout saisi ton script sur certains points mais retenu quelques formes d'écritures qui paraissent plus simple car effectivement pertinente, je vais les tester indépendement pour mieux les assimiler et les utiliser dans mes prochains code.

Fichier(s) joint(s)



#10 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 15 March 2018 - 09:32 AM

Hello,

Le problème de ton timer viens de ces lignes :

var timerSlider = timer_slider;
var timer_slider:Timer = new Timer(300, 1);

Tu crée d'abord une variable "timerSlider" que tu valorise avec "timer_slider" qui n'existe pas encore.
Puis tu crée "timer_slider", ça ne sert à rien et ça ne marche pas, donne directement le bon nom à ta variable.

var timerSlider:Timer = new Timer(300, 1);


#11 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 15 March 2018 - 18:35 PM

Bonjour,
Oui, désolé je n'avais pas corrigé le code avant de publier le fla hier, j'avais effectivement corrigé la variable

var timerSlider:Timer = new Timer(300, 1);
 
mais le slide répond très mal et je ne sais pas trop si c'est le timer qui n'agit pas ou mal. ou une autre partie du code.

#12 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 15 March 2018 - 18:53 PM

En placant un arrêt du chrono dans la fonction drop

activateChrono = false;
 
ça fonctionne déjà beaucoup mieux, mais la vitesse semble être unique et non variable.

#13 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 19 March 2018 - 18:54 PM

Bonsoir Monsieur Spi,
Je me remet sur mon appli ce soir car pas eu beaucoup de temps c'est derniers jours, j'aurais 2 questions à soumettres, la première concerne l'écriture de la fonction "limitesY" que tu à écrit plus haut, je pense avoir compris le fonctionnement mais pourquoi ne trouve t'on pas cette façon de coder dans les tutos ?

Deuxième question, y a t-il un moyen d'optimiser la fluidité des textes ou images lors du Slide des fenêtres, sachant que j'ai déjà testé et réglé les I/S, le poids des images et l'Anti-alias pour les textes.

Merci d'avance pour tes réponses.

#14 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 19 March 2018 - 22:26 PM

Citation

pourquoi ne trouve t'on pas cette façon de coder dans les tutos ?
Chacun sa manière de coder, certains disent en 12 mots ce que d'autres disent en 3 ou en 24...
L'essentiel est de comprendre le concept, puis de l'écrire à ta sauce, un tuto est avant tout fait pour comprendre, il est donc souvent "développé" en ce sens.

Dans mon cas j'évoque cette manière de faire dans ce tuto : http://forums.mediab...rcice_-_le_pong

Il me semble plus simple de factoriser ce genre de fonctions qui peut servir à plusieurs objets dans beaucoup de cas.

Citation

y a t-il un moyen d'optimiser la fluidité des textes ou images lors du Slide des fenêtres
Sûrement, il faut chercher du côté de l'optimisation du code, du chargement dynamique et ce genre de choses.
Un bon exemple est celui du lazy loading (chargement paresseux).

#15 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 20 March 2018 - 21:33 PM

Merci pour tes réponces Monsieur Spi, je vais m'intéresser d'avantage à la factorisation en espérant ne pas m'y noyer.
Sinon pour rendre plus fluide le Slide j'avais pensé à une solution simple qui est peut-être est stupide mais bon, donc, lors du déplacement pourquoi ne pas modifier le "StageQuality.HIGH" en "BEST" histoire de moins soliciter le GPU et espérer une meilleure fluidité le temps du déplacement, je repasse ensuite en "HIGH" en supprimant l'écouteur.

#16 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 24 March 2018 - 14:25 PM

Bonjour,
Concernant le problème de défilement sacadé du texte lors du Drag, j'ai fait d'autre test en convertissant le texte en Bitmap, le résultat est mitigé car la fluidité est parfaite mais le texte est assez grossier dommage, je vais voir pour trouver un autre solution à ce problème.

#17 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 24 March 2018 - 15:26 PM

Regarde du côté de cacheAsBitmap :
http://www.republico...3cacheasbitmap/
https://help.adobe.c...04db9-7ffc.html

#18 cortoh

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 403 messages

Posté 24 March 2018 - 19:40 PM

Bonsoir Monsieur Spi,
J'avais déjà consulté le premier lien mais je n'avais pas tout saisi, dans mon cas j'importe dans ma scène un clip nommé "page_texte_1" qui contient un texte statique assez long (c'est là que l'optimisation devient nécéssaire lors du Drag), étant donné que l'on ne peut pas nommer un texte statique faut t-il alors cibler le clip et non le texte pour utiliser la "Mise en cache sous forme de bitmap" et dans ce cas faut-il juste déclarer "page_texte_1.cacheAsBitmap = true;" ? tout cela reste assez confus pour moi, peut-tu me donner plus d'infos sur le sujet car je sèche malgrés tout mes efforts, merci à toi.



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