A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: great before/after effect

  1. #1
    Junior Member
    Join Date
    Oct 2008
    Posts
    4

    great before/after effect

    Hi all, there's this cool site

    http://www.abc.net.au/news/events/ja...eforeafter.htm

    it has great image views, was wondering, how do they do that scrolling before and after effect?

    am not too great at scripting, but would like to learn, seems great for portfolio presentation.

    Please advise!

    Thanks!

  2. #2
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    Pretty straight-forward. A few different ways to do it, but I'd create a layer with one image and a layer with the other image and put a mask over one of the layers.

    Using CS3 and AS2, I'd put an onEnterFrame on the mask layer to have it slide with the mouse. And, to make it look more like the example, put a black line and have it follow it as well.

    I attached a sample clip.

    If it was going to be used in a larger program, I might come up with a way to avoid using the onEnterFrame, maybe a transparent layer or something. Also, looks like they're using some easing as well to give some physics to the mask.

    Lots of other ways to do it as well. Would definitely do it differently in AS3, but the concept is the same.

    Hope that helps!
    Attached Files Attached Files
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  3. #3
    Junior Member
    Join Date
    May 2015
    Posts
    4
    Hello there!! wow..god knows how i was looking for this example!! could you please make an example with clicking and draging the black line to the left to reveal the other image? how can i make this? please hope you can help me! my mail juandrhc@gmail.com
    thanks in advance!!!

  4. #4
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    Just change it to use drag and drop functions instead of enterFrame...

    Something like:

    Code:
    line_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
    stage.addEventListener(MouseEvent.MOUSE_UP, drop);
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
    
    function drag(e:MouseEvent):void
    {
    	e.target.startDrag(false, new Rectangle(0,0,550,0));
    	
    }
    
    function drop(e:MouseEvent):void
    {
         stopDrag();
    }
    
    function onEnterFrame(e:Event):void
    {
    	mask_mc.x=line_mc.x;
    }
    Hope that helps!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  5. #5
    Junior Member
    Join Date
    May 2015
    Posts
    4
    flashpipe1 first of all thanx a lot for your response!! it didn't worked. I placed your code on the first keyframe, just as the old one. but I got this:error.jpg

  6. #6
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,930
    Ah, the code I sent was AS3...my original file was AS2. You'll have to go into Publish setting and change the Script to ActionScript 3.0.
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  7. #7
    Junior Member
    Join Date
    May 2015
    Posts
    4
    flashpipe1 THANK YOU a lot!! works very fine!!! thank you!!

  8. #8
    Junior Member
    Join Date
    May 2015
    Posts
    4
    Hey @flashpipe1 just a little more!! what if i only want the slide to work on the green area of the stage? here is the example
    Attached Files Attached Files

  9. #9
    Junior Member
    Join Date
    Aug 2015
    Posts
    1

    Hi FlashPipe1

    Quote Originally Posted by flashpipe1 View Post
    Pretty straight-forward. A few different ways to do it, but I'd create a layer with one image and a layer with the other image and put a mask over one of the layers.

    Using CS3 and AS2, I'd put an onEnterFrame on the mask layer to have it slide with the mouse. And, to make it look more like the example, put a black line and have it follow it as well.

    I attached a sample clip.

    If it was going to be used in a larger program, I might come up with a way to avoid using the onEnterFrame, maybe a transparent layer or something. Also, looks like they're using some easing as well to give some physics to the mask.

    Lots of other ways to do it as well. Would definitely do it differently in AS3, but the concept is the same.

    Hope that helps!
    I was hoping to use the file you send but unfortunately with the version I have it won't read AS2. It simply deletes the code so I can't use it and couldn't find it anywhere else. Could you please send me the file in AS3! Thank you so much in advance!

    This is the type of result I'm hoping to get: http://www.buzzfeed.com/lorynbrantz/...up#.quEYLeYmX5

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center