Forums Développement Multimédia

Aller au contenu

Slider comparatif entre deux images ✔

comparaison images CODE Actionscript

2 réponses à ce sujet

#1 Xari

    Ceinture Blanche

  • Members
  • Pip
  • 14 messages

Posté 17 October 2012 - 21:49 PM

Bonjour !

J'ai réalisé un petit slider très simple qui me permet de comparer deux images.
Le seul problème c'est que les images se superposent et ce n'est donc pas très pratique pour vraiment voir la différence entre les deux.

En gros je déplace une des deux images sur l'autre en fonction de la position de mon curseur grâce à une "barre" de défilement.

Le seul problème c'est que lorsque que ma barre est au milieu de mon slider. Je me retrouve avec à gauche de la barre la partie gauche de l'image 1 et à droite de la barre, la partie gauche de l'image 2.

Ce que je voudrais c'est avoir la partie gauche de l'image 1 à gauche de ma barre et la partie DROITE de l'image 2 à droite de ma barre.

Si vous avez des idées je suis preneur !

Voilà un petit schéma pour mieux comprendre :

Image IPB


et mon code actuel :

import flash.events.MouseEvent;
import fl.motion.MotionEvent;
stage.addChild(s1);
stage.addChild(s2);
stage.addChild(barre);

barre.addEventListener(MouseEvent.MOUSE_DOWN, enfoncé)
barre.addEventListener(MouseEvent.MOUSE_UP, relaché)

function relaché(ev:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE, drag);
}

function enfoncé(ev:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE, drag);
}

function drag(me:MouseEvent):void {
s2.x=mouseX;
barre.x=mouseX-3;
}
 


Merci d'avance :) !

#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7015 messages

Posté 17 October 2012 - 22:30 PM

Salut,

Pourquoi tu ne joue pas tout simplement avec un masque ?
Tu superpose tes images, tu masque celle du dessus et tu déplace le masque avec la souris.

Ça donnerai Ça :

var s1:S1 = new S1();
var s2:S2 = new S2();
var masque:Masque = new Masque();

stage.addChild(s1);
stage.addChild(s2);
stage.addChild(masque);

s2.mask = masque;

stage.addEventListener(MouseEvent.MOUSE_DOWN, enfonce)
stage.addEventListener(MouseEvent.MOUSE_UP, relache)

function enfonce(e:MouseEvent):void{
        masque.x = mouseX;
        masque.startDrag(false, new Rectangle(0, 0, 384 ,0));
}

function relache(e:MouseEvent):void{
        stopDrag();
}




- Afficher le SWF -
Fichier joint  split_image.swf   26.95 Ko   7 téléchargement(s)

Fichier(s) joint(s)



#3 Xari

    Ceinture Blanche

  • Members
  • Pip
  • 14 messages

Posté 17 October 2012 - 23:15 PM

Ah oui, je n'avais pas pensé au masque d'écrêtage alors que je l'utilise tout le temps sur Photoshop :P !

Merci bien, c'est parfait !



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

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