Skip to main content
F
Froschloeffel
Known Participant
September 6, 2020
Answered

button only works once because of play backward script?

  • September 6, 2020
  • 20 replies
  • 1597 views

i want to play a mc once forewards, once backwards

unfortunately it only works forwart - stops on the last frame, because there is a this.stop(); then i click on the back-button which works ok - but then after it played backwards - nothing works anymore. the buttons are not active anymore.

does anybody know, where i do the mistake?

my script looks like this

this.stop();
var maxframe = 43;
function playReverse()
{
        maxframe--;
        this.gotoAndStop(maxframe);
}

//button vorwärts-button
this.button_forward.addEventListener("click", nextFrame.bind(this));

function nextFrame()
{
	var frameNumber = this.currentFrame;	
	this.gotoAndPlay(frameNumber + 1);
	this.frameNumber.stop(43);
}

//button rückwärts-button
this.button_back.addEventListener("click", prevFrame.bind(this));

function prevFrame()
{	
	this.addEventListener('tick', playReverse.bind(this))
	this.playReverse();
}

 

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Correct answer kglad

    thank you for your hintch - the console says:

    Uncaught ReferenceError: create is not defined
    backF http://127.0.0.1:8090/test-play-stop-html5_HTML5-Canvas-kglad.js?1599915202140:171
    _dispatchEvent https://code.createjs.com/1.0.0/createjs.min.js:12
    _dispatchEvent https://code.createjs.com/1.0.0/createjs.min.js:12
    dispatchEvent https://code.createjs.com/1.0.0/createjs.min.js:12
    _dispatchMouseEvent https://code.createjs.com/1.0.0/createjs.min.js:13
    _handlePointerUp https://code.createjs.com/1.0.0/createjs.min.js:13
    _handleMouseUp https://code.createjs.com/1.0.0/createjs.min.js:13
    f https://code.createjs.com/1.0.0/createjs.min.js:13

    in backF(),  this has a typo:

     

    if(!create.Ticker.hasEventListener(this.tickF1))

     

    it should be:

     

    if(!createjs.Ticker.hasEventListener("tick"))

     

    but for some reason this is causing a problem so just omit it:

     

     

    // on last frame:

    this.stop();

    this.tickF1 = tickF.bind(this);

    this.button_back.addEventListener("click", backF.bind(this));

    function backF() {
    createjs.Ticker.addEventListener("tick", this.tickF1);
    }

    function tickF() {
    if (this.currentFrame > 0) {
    this.gotoAndStop(this.currentFrame - 1);
    } else {
    createjs.Ticker.removeEventListener("tick", this.tickF1);
    }
    }

     

     

     

     

    20 replies

    C
    ClayUUID
    Legend
    September 8, 2020

    Wth all the effort you've invested in forcing Animate to do something that it doesn't want to do, you probably could have just manually created a version of the movieclip with the animation reversed.

    F
    FroschloeffelAuthor
    Known Participant
    September 11, 2020

    i know, that one could do it in a simple way like copy and paste the movie, add it at the end, turn the pictures and let it play - i am just interested how one could do that via code. because i would like to understand it better. maybe you know, where i could learn it properly ?

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    September 11, 2020

    check your developer's console to see why the last code snippet i suggested failed.  also, you can use console.log("some string") or alert('some string") to debug.

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    September 6, 2020

    if button_forward fails to work after using button_back it's probably because button_forward fails to exist when button_back is clicked.

     

    also this is problematic:

     

    this.frameNumber.stop(43);

     

    i'm not sure what you're intending to do with that but assuming this.frameNumber is an onstage movieclip, it's a poor choice for a movieclip name and likely to cause confusion with var frameNumber. 

     

    in general, for a next and previous button you should be using:

     

    function nextFrameF(){

    this.gotoAndStop(this.currentFrame+1);

    }

    function prevFrameF(){

    this.gotoAndStop(this.currentFrame-1);

    }

     

    along with some limitations on the last frame and frame 0 (eg, making the buttons not visible).

    F
    FroschloeffelAuthor
    Known Participant
    September 7, 2020

    thanks for your help - if i want to use your code on a button - i just do not know how i have to write it. 

    i did it like this - but it only works in one direction

    this.stop();

this.button_forward.addEventListener("click", nextFrameF.bind(this))

function nextFrameF(){

this.gotoAndPlay(this.currentFrame+1);

}

this.button_back.addEventListener("click", prevFrameF.bind(this))

function prevFrameF(){

this.gotoAndPlay(this.currentFrame-1);

}

     

    i find it quite confusing because i can not find any helpful website or forum where i could learn it properly. so i have to do it with try and error and with examples where i do not know if they are old or not.

    i just want to make a movieclip which can play forward and stops at the end and can play backwards with a button to go backwards - and a button to go forward again - and so on. and i wanted to do it for a html5 canvas...

     

    even on the adobe-site there seams to be no way, where someone «new» has a chance to learn it. i am always ending up on old sides of flash. it seams as it would not exist anymore, or not supported anymore. where are all the people who used flash before?

    all this is not very helpful and as i said - quite confusing... years ago i was using flash and as2 - so quite a long time ago....

     

     

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    September 7, 2020

    the code is fine.

     

    but as mentioned previously: if button_forward fails to work after using button_back it's probably because button_forward fails to exist when button_back is clicked.

     

    you can confirm by opening your browser's developer's console when testing.

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices