Question

I have this set of codes to create a simple before and after image revealer:

import com.greensock.*;
import com.greensock.easing.*;

function init() : void  {
    sliderbar_mc.buttonMode = true;
    sliderbar_mc.addEventListener(MouseEvent.MOUSE_DOWN,moveSliderbar);
    stage.addEventListener(MouseEvent.MOUSE_UP,stopSliderbar);
    mask_mc.alpha = 0;
    after_mc.mask = mask_mc;
    TweenLite.to(sliderbar_mc,4,{x:stage.stageWidth/2,ease:Elastic.easeOut});
    TweenLite.to(mask_mc,4,{x:stage.stageWidth/2,ease:Elastic.easeOut});
}  

function moveSliderbar(event:MouseEvent):void {
    stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}  

function stopSliderbar(event:MouseEvent):void{
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}

function mouseMoveHandler(event:MouseEvent):void{
    sliderbar_mc.x = mouseX;
    if (sliderbar_mc.x > stage.stageWidth){
        sliderbar_mc.x = stage.stageWidth;
    }
    else if(sliderbar_mc.x < 0){
        sliderbar_mc.x = 0;
    }
    mask_mc.x = sliderbar_mc.x;
}

init();

But now I need to put the revealer area into a movieclip of its own somewhere on the stage, for the life of me I can’t figure out how to use globalToLocal to make this work… Here is my attempt:

import com.greensock.*;
import com.greensock.easing.*;

function init():void  {
    area_mc.sliderbar_mc.buttonMode = true;
    area_mc.sliderbar_mc.addEventListener(MouseEvent.MOUSE_DOWN,moveSliderbar);
    stage.addEventListener(MouseEvent.MOUSE_UP,stopSliderbar);
    area_mc.mask_mc.alpha = 0;
    area_mc.after_mc.mask = area_mc.mask_mc;
    TweenLite.to(area_mc.sliderbar_mc,3,{x:stage.stageWidth/2,ease:Elastic.easeOut});
    TweenLite.to(area_mc.mask_mc,3,{x:stage.stageWidth/2,ease:Elastic.easeOut});
}  

function moveSliderbar(event:MouseEvent):void {
    stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}  

function stopSliderbar(event:MouseEvent):void {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
}

function mouseMoveHandler(event:MouseEvent):void {
    var topLeft:Point = area_mc.localToGlobal(new Point(0, 0));
    var bottomRight:Point = area_mc.localToGlobal(new Point(width, height));
    area_mc.sliderbar_mc.x = area_mc.mouseX;
    if (area_mc.mouseX > topLeft.x) {
        area_mc.sliderbar_mc.x = topLeft.x;
    }
    else if(area_mc.mouseX < bottomRight.x){
        area_mc.sliderbar_mc.x = bottomRight.x;
    }
    area_mc.mask_mc.x = area_mc.sliderbar_mc.x;
}

init();

Obviously it’s not working properly, I know it’s all in the mouseMoveHandler function, can someone please give me some pointers?

Answer 1

Ok, I played around with this a bit and I think I was able to get it to do what you want. It still has quite a few kinks to work out and the code is ugly but I’ve tried to keep with the methods you were trying to use. To do this I created all the necessary clips on the stage. I assume area_mc is the clip you’re trying to work within and everything else is inside of it.

I might work on it a little more tomorrow, but here it is; tell me if it’s doing what you needed:

var maxlenX:int = area_mc.x+area_mc.width;//calculate the maximum x area of our clip. I     do this outside the function
// Because the width will change as you move the slider. There are more elegant ways to do this, but I think this is sufficient
// for now. This will be used to stop the slider when it moves all the way to the right of our clip.
function mouseMoveHandler(event:MouseEvent):void {
    var topLeft:Point = area_mc.localToGlobal(new Point(0,0));//Translate the top   left of the clip into global coords.
    var bottomRight:Point = new Point(maxlenX,area_mc.y);//Use the maxlenX variable created above to get the bottom right point. (no need for a point here TBH).
    area_mc.sliderbar_mc.x = area_mc.mouseX;
    if (mouseX <= topLeft.x){//If the mouse is to the left of the top left point...
        area_mc.sliderbar_mc.x = area_mc.globalToLocal(new Point(topLeft.x,topLeft.y)).x;//keep the slider from moving left.
    } else if (mouseX >= bottomRight.x){//if the mouse is to the right of the bottom right point...
        area_mc.sliderbar_mc.x = area_mc.globalToLocal(new Point(bottomRight.x,bottomRight.y)).x;//keep the slider form moving right.
    }
    area_mc.mask_mc.x = area_mc.sliderbar_mc.x;//move the mask.
}