Announcement Announcement Module
Collapse
No announcement yet.
Controlling Cross-Fade with Buttons Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Controlling Cross-Fade with Buttons

    Dear SpringCommunity Users

    I need a button initiated cross-fade.

    I applied two of my own images to the snippet below (found on the web).

    This link is what I have so far:

    well ... I'll add with my second post, I hope.

    The code I found on the web being [my needs are explained below the code]:-

    import fl.transitions.Tween;
    import fl.transitions.TweenEvent;
    import fl.transitions.easing.*;
    var bg1Tween:Tween = new Tween (beforeD1, "alpha", None.easeInOut, 0 , 1 , 1 , true );
    bg1Tween.stop();
    bg1Tween.addEventListener(TweenEvent.MOTION_FINISH ,fadeOutbg);
    var bg2Tween:Tween = new Tween (beforeD1, "alpha", None.easeInOut, 0 , 1 , 1 , true );

    bg2Tween.stop();
    var bg3Tween:Tween = new Tween (afterD1, "alpha", None.easeInOut, 0 , 1 , 1 , true);
    bg3Tween.stop();

    beforeD1.nextTween = bg2Tween;
    beforeD1.nextTween = bg3Tween;
    afterD1.nextTween = bg1Tween;

    setTimeout (bg1Tween.start, 1000);

    function fadeOutbg(event:TweenEvent) {
    event.target.removeEventListener(TweenEvent.MOTION _FINISH, fadeOutbg);
    event.target.addEventListener(TweenEvent.MOTION_FI NISH, startNextbg);
    event.target.begin = 1;
    event.target.finish = 0;
    setTimeout (event.target.start, 6000);
    }
    function startNextbg(event:TweenEvent) {
    event.target.removeEventListener(TweenEvent.MOTION _FINISH, startNextbg);
    event.target.obj.nextTween.addEventListener(TweenE vent.MOTION_FINISH, fadeOutbg);
    event.target.obj.nextTween.begin = 0;
    event.target.obj.nextTween.finish = 1;
    setTimeout (event.target.obj.nextTween.start, 1000);
    }

    I would like users who go to the above link to be able to initiate the cross-fade between the before and after images by clicking on the "before" and "after" buttons. I've named the button stage instances "before" and "after". I want the page to load with the boy sitting alone [the "before" state]. And for users to be able to click between "before" and "after".

    Whilst I'm passionate about getting my AS3 skills to this level, they're not there yet. Could you, or any readers, please edit the above code so that it works as a button initiated cross-fade between two images?

    Due to image sizes, I'm going to apply a pre-loader. Is it kosher to use a simple AS2 pre-loader in conjunction with this, or should I stick to AS3 for the pre-loader as well? And if so, a link to a robust, simple AS3 pre-loader would also be very gratefully appreciated.

    Many thanks for your help, oh wise AS ones!

    Thanks again.
    XtraNighter
Working...
X