Best technique for a replay button

[sorciereus]

Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.

 

 

[Carl]

Hi,

 

Do you have particular assets you are trying to animate a particular way?

Are you simply trying to restart() a TimelineLite or TimelineMax?

 

if so this code should work

myTimeline.restart()

It would be best if you could provide an fla or some links to illustrate exactly what you need help with.

[sorciereus]

Hi,

 

Do you have particular assets you are trying to animate a particular way?

Are you simply trying to restart() a TimelineLite or TimelineMax?

 

if so this code should work

myTimeline.restart()

It would be best if you could provide an fla or some links to illustrate exactly what you need help with.

Hi - so I don't have a fla file right now - but all I'm trying to create is "replay" button that would simply replay a series of tweenlite animations.  Could be nested with timelinelite or timelinemax, whichever is better. Does that makes sense?

[jamiejefferson]

It's hard to say what the 'best' way is, it's just adding event listeners to a button... just do it which ever way makes sense to you.
 

replaybutton.addEventListener(MouseEvent.MOUSE_UP, myTimeline.restart, false, 0, true);

pausebutton.addEventListener(MouseEvent.MOUSE_UP, myTimeline.pause, false, 0, true);

// etc...

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

function stageclicked(e) {
  if (e.target == replaybutton) {
    myTimeline.restart();
  } else if (e.target == pausebutton) {
    myTimeline.pause();
  }
}

[sorciereus]

Ok thank you I get it now - thanks!

[mkg14]

Hi Carl,

 

I have the same question about adding a replay button, but I don't understand how to apply the sample code that you've given. The complete code for my animation is below. There is only one frame in the timeline with all of the animation being controlled by AS. I'm a beginner when it comes to AS3, so please excuse my clunky code as I'm sure there's a more streamlined way to write it

//imports
import flash.external.ExternalInterface;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import com.greensock.TweenLite;
import com.greensock.loading.ImageLoader;
import com.greensock.easing.Linear;

//clicktag for invisible button
function getBrowserName():String
        {
            var browser:String;
            //Uses external interface to reach out to browser and grab browser useragent info.
            var browserAgent:String = ExternalInterface.call("function getBrowser(){return navigator.userAgent;}");
            //Determines brand of browser using a find index. If not found indexOf returns (-1).
            if(browserAgent != null && browserAgent.indexOf("Firefox")>= 0) {
                browser = "Firefox";
            }
            else if(browserAgent != null && browserAgent.indexOf("Safari")>= 0){
                browser = "Safari";
            }
            else if(browserAgent != null && browserAgent.indexOf("MSIE")>= 0){
                browser = "IE";
            }
            else if(browserAgent != null && browserAgent.indexOf("Opera")>= 0){
                browser = "Opera";
            }
            else {
                browser = "Undefined";
            }
            return (browser);
        }

function openWindow(url:String, target:String = '_blank', features:String=""):void
{
    var WINDOW_OPEN_FUNCTION:String = "window.open";
    var myURL:URLRequest = new URLRequest(url);
    var browserName:String = getBrowserName();
    switch (browserName)
                {
                    //If browser is Firefox, use ExternalInterface to call out to browser
                    //and launch window via browser's window.open method.
                    case "Firefox":
                        ExternalInterface.call(WINDOW_OPEN_FUNCTION, url, target, features);
                       break;
                    //If IE,
                    case "IE":
                        ExternalInterface.call("function setWMWindow() {window.open('" + url + "', '"+target+"', '"+features+"');}");
                        break;
                    // If Safari or Opera or any other
                    case "Safari":
                        navigateToURL(myURL, target);
                        break;
                    case "Opera":
                        navigateToURL(myURL, target);
                        break;
                    default:
                        navigateToURL(myURL, target);
                        break;
                }
}

function clickedb(e:MouseEvent):void { //function for SIPC
    var sURL: String;
    if ((sURL = root.loaderInfo.parameters.clickTag)) {
        openWindow(sURL);
    }
    //navigateToURL(new URLRequest("#"), "_blank");
}

thisBTN.addEventListener(MouseEvent.CLICK, clickedb);

//objects on stage
imageMC.alpha = 1;
replayBtn.alpha = 0;
ccLogo.alpha = 1;
giftsTF.alpha = 0;
tableTF.alpha = 0;
bedroomTF.alpha = 0;
bathTF.alpha = 0;
everywhereTF.alpha = 0;
finalLockup.alpha = 0;

//begin animation: image begins panning from right to left while logo fades out and gifts type fades in
TweenLite.to(imageMC, 13, {x:-1500, delay:1.5, ease:Linear.easeNone} );
TweenLite.to(ccLogo, .5, {alpha:0, delay:2.5} );
TweenLite.to(giftsTF, .5, {alpha:1, delay:2.8} );
TweenLite.delayedCall(5.25, tweenGiftsOut);

//gift type fades out and table type fades in
function tweenGiftsOut()
{
    TweenLite.to(giftsTF, .5, {alpha:0} );
    TweenLite.to(tableTF, .5, {alpha:1, delay:0.5} );
    TweenLite.delayedCall(3, tweenTableOut);
}

//table type fades out and bedroom type fades in
function tweenTableOut()
{
    TweenLite.to(tableTF, .5, {alpha:0} );
    TweenLite.to(bedroomTF, .5, {alpha:1} );
    TweenLite.delayedCall(2, tweenBedroomOut);
}

//bedroom type fades out and bath type fades in
function tweenBedroomOut()
{
    TweenLite.to(bedroomTF, .5, {alpha:0} );
    TweenLite.to(bathTF, .5, {alpha:1} );
    TweenLite.delayedCall(2, tweenBathOut);
}

//bath type fades out and everywhere type fades in
function tweenBathOut()
{
    TweenLite.to(bathTF, .5, {alpha:0} );
    TweenLite.to(everywhereTF, .5, {alpha:1} );
    TweenLite.delayedCall(2, tweenEverywhereOut);
}

//everywhere type fades out and final call to action lockup and replay button fade in
function tweenEverywhereOut()
{
    TweenLite.to(everywhereTF, .5, {alpha:0} );
    TweenLite.to(finalLockup, .5, {alpha:1} );
    TweenLite.to(replayBtn, .5, {alpha:1} );
}

//need to add the coding for a replay button (replayBtn) here, but not sure how to do it

[Carl]

Hi mkg14,

 

You are not using a TimelineLite instance so it is not going to be so easy to just call restart() as shown in the original post from 4 months ago. 

 

Since you are chaining a series of functions together you are going to have to find a way to reset all the objects that were tweened back to their pre-tweened states. Since you are only tweening the alpha, this shouldn't be too bad. It seems like you already have some code in there that will handle this. You just need to wrap it in a function. In addition you have a handful of loose tweens that fire when the animation first runs.. these should also be in a function so that you can run them again.

//create a function that does EVERYTHING necessary when the animation FIRST runs AND is played again
//The code in this function should ONLY live in this function 

function reset() {
//objects on stage
imageMC.alpha = 1;
replayBtn.alpha = 0;
ccLogo.alpha = 1;
giftsTF.alpha = 0;
tableTF.alpha = 0;
bedroomTF.alpha = 0;
bathTF.alpha = 0;
everywhereTF.alpha = 0;
finalLockup.alpha = 0;


//objects on stage
imageMC.alpha = 1;
replayBtn.alpha = 0;
ccLogo.alpha = 1;
giftsTF.alpha = 0;
tableTF.alpha = 0;
bedroomTF.alpha = 0;
bathTF.alpha = 0;
everywhereTF.alpha = 0;
finalLockup.alpha = 0;


//begin animation: image begins panning from right to left while logo fades out and gifts type fades in
TweenLite.to(imageMC, 13, {x:-1500, delay:1.5, ease:Linear.easeNone} );
TweenLite.to(ccLogo, .5, {alpha:0, delay:2.5} );
TweenLite.to(giftsTF, .5, {alpha:1, delay:2.8} );
TweenLite.delayedCall(5.25, tweenGiftsOut);

}

reset();

replay_btn.addEventListener(MouseEvent.CLICK, replay)

function replay(e:MouseEvent):void {
 reset()
}

If you need more help, please attach a zip of a simplified fla that only has code needed to replicate the issue. 

There is only so much we can do with large chunks of code in a post. Much easier to work with code we can test, edit and return to you in working form.

 

One last note, In the future please create a new post instead of adding to a resolved issue from many months ago.

Thanks and Happy Tweening.

[mkg14]

I'm really sorry about that!!! I'll stick to those guidelines in the future.

 

Thank you for your help. That worked and I only had to make one addition: Everything but the panning image reset, so I had to add the following line of code under the note "//objects on stage" in order to reset the image back to its starting position:

 

imageMC.x = 0;

 

The animation works perfectly now. Thanks again!