Create a Before & After Image Viewer
April 3rd, 2011 in Flash | 9 CommentsSee how to create a Before & After Image Viewer that allows you to compare two images with a draggable slider. The viewer can hide and reveal each image. It is useful for highlighting a before/after makeover or untouched/photoshopped image.
1. Create a new flash file (Actionscript 3.0) and save it as before-after.fla.
2. First, resize your “before” and “after” images to the same dimensions so that they are stackable. Set the stage’s dimensions to the images’ dimensions.
3. Create a layer named “before”, import the “before” image and convert it to a Movie Clip.
Above the “before” layer create an “after “layer, import the “after” image and convert it to a Movie Clip with registration point at the top left. Give it an instance name of “after_mc”.
4. Create a new layer named “mask”. With the Rectangle tool, draw a rectangle the same dimensions of the images. Convert it to a Movie Clip with registration point at the top left and give it an instance name of “mask_mc”.
5. Create a new layer named “slider”. With the Line Tool, draw a vertical line the same height of the images with a stroke of 4px. Convert it to a Movie Clip and give it an instance name of “sliderbar_mc”. Position it to the left of the stage.
6. Finally create an “actions” layer and add the following code:
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();
7. That’s it, test your movie to see it in action.
Apr 8th, 2011
Great effect without over coding.
May 3rd, 2011
perfect.. good tut. (It might awesome if u added throwing effects.)
May 9th, 2011
wow thats a fantastic work! well done
May 15th, 2011
It’d be cool to extend this tutorial by how to make a sliding slideshow of such before-after studies, with prev/next buttons.
May 18th, 2011
Hi, could you please show us newbies how the code should be if the area is inside a movieclip?
Jul 19th, 2011
Excellent and interesting effect. The closest I had been able to get to this is a Fade Out with Horiz. wipe on the Before image and Fade-In with Horiz. wipe on the After. I was attempting to show Before & After hair restoration on a male model.
Nov 10th, 2011
I am a complete novice at this. Is there anybody out there who has the patients to give me a step by step guide to creating this effect. It would also be helpful to know which programs that I need.
Jan 6th, 2012
Hi, i just want to know whether you can make the dogs eye follow the cursor in Action Script 2.0 instead of AS 3,0. My reason for asking is that i’ve tried to do this on AS 2,0 but the Events are not loading. Thank you for showing us all these facinating work.
Jan 31st, 2012
Hi,
I followed all of the instructions, but after selecting “publish preview” it gives me the following 4 compiler errors:
TweenLite.as, Line 167 1017: The definition of base class TweenCore was not found.
TweenLite.as, Line 409 1020: Method marked override must override another method.
TweenLite.as, Line 524 1020: Method marked override must override another method.
TweenLite.as, Line 535 1020: Method marked override must override another method.
Did anyone else encounter this problem? My knowledge of Flash is very limited and I would greatly appreciate suggestions on how to correct this.
Thank you!