New Participant

Question

Using a button to play a certain length of timeline

Forum|Forum|3 years ago
October 4, 2022
4 replies
469 views

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.

This topic has been closed for replies.

AaronE1962Author

New Participant

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

kglad

Community Expert

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".

AaronE1962Author

New Participant

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)?

AaronE1962Author

New Participant

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

Community Expert

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ésar17023019 '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();

}

kglad

Community Expert

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)?

JoãoCésar17023019

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded