Using a button to play a certain length of timeline

[AaronE1962]

Hello All,

I am new to Animate so thank you in advance for your help.

I currently have an animation on HTML5 canvas.  It's a bunch of shape tweens in succession.  There is a base layer with a schematic and the shape tweens are lines that follow certain parts of the schematic.  I can test the movie and it runs just fine, but now I have to create buttons to play only certain parts of the animation.

I am trying to create a button that will play only a certain frame window.  1 - 24,  25 - 50, ...

I can create a button, assign a gotoAndStop (), but that's it.  When I try to test the movie in browser (only choice) the screen comes up blank.

So 2 questions here.  1st about the buttons and 2nd about the testing the movie coming up blank.

Animate CC Version 22.0.5 Build 191. Windows 10.

[JoãoCésar]

Hi.

The basic approach would be to add stop calls to the end of each frame span and then add some click event listeners to multiple buttons that would send the target timeline to the corresponding frame.

But it's a bit vague to explain without an example. Do you mind sharing one or more screenshots or even your FLA?

Regards,

JC

[kglad]

if your default browser screen shows blank while testing from animate, you have an error in your code.

open the developer console in your browser to determine the error.  (ie, google: <your browser> how to open the developers console.

paste the info here.  some of that can be ignored:

all that stuff can be ignored.  any errors in your js file and any errors in your html file cannot be ignored.

as for your question about playing a timeline and stopping at various frames, after stopping at a frame what cause the timeline to play to the next stop point?  do you want to use a button (easy to code) or a timer (more difficult to code)?

[AaronE1962]

Hell JC and kglad.  Thank you for responding.  The fla file is too big.  My fault as I am not efficient so the files are big right now.  Here are a couple screen shots.  The timeline is differrent, but the end goal is the same.  I just have one button.  You may not see ti on one of the screen shots.  I had that layer hidden.

[kglad]

we can't tell much from that (except that your using code snippets) and you have an error which is causing the blank screen.  nevertheless, you should learn how to use the developer's console. 

test your project from animate and in the developers console you'll see something like 

telling you button_1 is not defined.  the line number in your js file where that's occuring is listed in the error message.  in my screenshot, it's line 88.  it's this line in both our files:

button_1.addEventLi...etc

that should be:

this.button_1.addEventL.... etc

anyway, following @JoãoCésar 's suggestion.  add this.stop() to each frame where you want the timeline to stop.  then if your button has instance name button_1, use:

this.button_1.addEventListener("click", playF.bind(this));

function playF(){

this.play();

}

[AaronE1962]

Does it make a difference if I'm using Action Script code in an HTML5 canvas?

[JoãoCésar]

It does make a difference.

You have to use JavaScript.

[kglad]

you can't use any as3 in an html5/canvas project. fortunately, for both of us as3 is heavily influenced by js and so much of the code is similar.  what's not similar is the scope of code.  ie, in html5/canvas everything on stage needs a "this" or some other parent timeline reference.

// ok in as3, but not in html5

stop();  

play();

// in html5

this.stop();

this.play();

and then there's bind() to pass a reference to "this".

[JoãoCésar]

Also, there are no explicitly typed variables/parameters in JavaScript (e.g.: event:MouseEvent).

[kglad]

there are a lot more differences, but the only one, i think, that's a challenge when going from as3 to html5 is the scoping issue.  

[AaronE1962]

Thank you.  I'm still stumped.  The button is named "power" and this is what I wrote:

this.power.addEventListener("click", playF.bind(this));

function playF()
{
this.play();
}

And this is the compiler error:WARNINGS:
** 966 Bitmaps packed successfully into 143 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (7)
Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

It automatically plays.  It doesn't wait for the mouse click.  Do I need a frame number to start at?  I haven't even attempted the this.stop() yet.  I'm trying to get the play to work.  In the parenthesis can I put frame numbers?  this.play(1); this.stop(15)?

[kglad]

you need to add

this.stop();

at each keyframe where you want the timeline to stop.

the warnings (not errors) you see (we all see with everything done in animater canvas).  ignore them.

[AaronE1962]

Thanks again.  I think I got the commands.  It's still auto starting the animation.  Not waiting for the "click".  The stop works, but in a separate action within a scene.  Is there any way to define this.play() and this.stop() in the same function?  Maybe this.play(1) and this.stop(103)?  Currently the actions are defined by frame number, i.e. scene1/action 1 for play, scene1/action 103 for stop.  I tried copying the this.stop() command over to action1 but as I thought it lost it's reference to frame 103.

[kglad]

if you want the timeline to begin stopped at the first frame, add this.stop() in the actions panel on the first frame.

and yes, you can define a button toggle:

var btn_toogle = true;

this.btn.addEventListener("click",f.bind(this));

function f(){

if(btn_toggle){

// do one thing

} else {

// do another thing

}

btn_toggle=!btn_toggle;

}

}