Flash Tutorials

Open the .fla file that comes with this tutorial (you will need Flash CS4).

First let's take a look in the Library to see what are we using in this tutorial.

You will see that the Library contains 2 before and after images that are ready to be used in Actionscript. You can change those images with what images you want.

The code is pretty simple and I will explain it.

var _before:Bitmap = new Bitmap(new Before(0,0));
var _after:Bitmap = new Bitmap(new After(0,0));
var _slider:Slidebar = new Slidebar();
var _mask:Sprite = new Sprite();


function Init() : void  
{  
    _mask.graphics.beginFill(0x000000);
    _mask.graphics.drawRect(0,0,600,282);
    _mask.graphics.endFill();

    addChild(_mask);

    _after.mask = _mask;

    addChild(_before);
    addChild(_after);
    addChild(_slider);

    _slider.x = 50;
    _mask.x = _slider.x;

    _slider.buttonMode = true;  
    _slider.addEventListener(MouseEvent.MOUSE_DOWN, SlidebarEvents, false, 0, true);  

    stage.addEventListener(MouseEvent.MOUSE_UP, StopEvents, false, 0, true);  
}  

function SlidebarEvents($e:MouseEvent):void
{  
    stage.addEventListener(MouseEvent.MOUSE_MOVE, Move, false, 0, true);
}  

function StopEvents($e:MouseEvent):void
{  
    stage.removeEventListener(MouseEvent.MOUSE_MOVE,Move);
}

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

    _mask.x = _slider.x;
}

Init();

The first thing we did is to create the variables for the objects that are used in the project. The objects are taken from the Library.

A mask is applied to the "after" image.

The slider is programmed (with the help of MouseEvent class) to be moved across the stage, and while doing so, the mask is moved also revealing the "after" image and hiding the "before" image.

Yeah, this is it.. quick and simple. Enjoy!