Go to and play frame javascript in Animate CC

[Daniel_9185]

Hi!

I have a timeline inside Animate as a canvas-doc.

There's 40 frames on the timeline.

When the playhead reaches frame number 40 I want it to go back to frame number 20 and play it and continue to play until reached frame 40 and so on.

I just want the playhead to follow the timeline and automatically play the right frames.

It used to be called something like "goto.play(20)" i actionscript, but what is the javascript for this?

[Colin Holgate · Accepted solution]

this.gotoAndPlay(20);

Note that although you see the timeline going from 1 to 40, in Javascript the frames count from zero. If you want to jump back to the frame with 20 by it, that would be this in Javascript:

this.gotoAndPlay(19);

[Daniel_9185]

That worked great, thanks!

The "old" Flash was a bit more complete when it came to getting suggestion for codesnippets in the behavior pallette.

Can I get the same thing in Animate CC for javascript and maybe download some extra snippets?

Or is there any easy tutorial on how to get to understand javascript used on for instance objects and timelines?

[Colin Holgate]

The Code Snippets panel does include examples for both html5 canvas and html5 webgl.

HTML5 Canvas is using CreateJS, and there are a lot of resources for that online.

[madathilm64672234]

I have a movie clip inside a keyframe. I have put a button in one of the layers of the movie clip. When the movie clip works, the button shows up.

1 when i press the button I want to go to a key frame in the mane time layer. May I get the java script for that.

2. Secondly May I get the code for exit button from the animate CC

3. Instead of using mouse click if someone wants to use "tap" while using mobile how do I write the code for that ?

[Colin Holgate]

1. this.parent.gotoAndStop(123); should work. It's worth using frame labels too, so that if the keyframe moves the code will still work. Like: this.parent.gotoAndStop("main menu");

There is a complication though. The function attached to the button needs to understand "this". Also, if you are going to go to a frame where the movieclip doesn't exist anymore, you should remove the button listener. This would do all of that:

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

function btnClicked(){

    this.btn.removeEventListener("click",btnClicked);

   this.parent.gotoAndStop("main menu");

}

2. When is there a case where you would be exiting?

3. The "click" listener will work for tap actions from the user. There will be HTML and CSS things you need to do to stop the web page from scrolling or highlighting.

[madathilm64672234]

Thank you so much. I have not tried your suggestions. But will get back to you once tried. Regarding the "exit" : I would like to put a main menu button in the first frame from where there will be options to exit from the tutorial or going for chpaters one by one.

Please help me until I solve this problem.

My tutorial is a simple one.

A small movie clip at one corner of the HTML5 canvas, forward, backward, main menu, exit and an audio button for the narration. Knowing the code for all these buttons will solve my problems and thats all what I want to know regarding the programming.

[avid_body16B8]

Hey Colin,

Can you make an array of symbol names and call them?

Example:

howmany = -1;
var points = [point1,point2,point3,point4];
this.submitBtn.addEventListener("click", submit.bind(this));
function submit() {
    howmany++;    
    if(condition..){
        this.points[howmany].gotoAndStop("correct");
    } else{
        this.points[howmany].gotoAndStop("incorrect");
   }
}

[Colin Holgate]

That looks like it should work, other than the line where you made the array. If it doesn't work like you have it, try:

var points = [this.point1,this.point2,this.point3,this.point4];

[avid_body16B8]

OK, cool. It seems if I use "this." in the condition, it would be repetitive? In Animate CC, I would put a quote in the array and the code would be:

howmany = -1;
var points = ["point1","point2","point3","point4"];
sym.$("submitBtn").bind("click", function(){
     howmany++;    
    if(condition..){
        sym.getSymbol(points[howmany]).stop("correct");
    } else{
        sym.getSymbol(points[howmany]).stop("incorrect");
    }
}); 

So basically I could also make functions like this:

var points = [point1,point2,point3,point4];
var question = [P1,P2,P3,P4];
function callCorrect(q, c){        
    this.question + Problem.visible = false;
    this.question + Reveal.visible = false;
    this.question + Info.visible = false;
    this.submitBtn.visible = false;    
    if(c == 0){
        this.incorrect.visible = false;
        this.question + Correct.visible = true;
        this.points[howmany].gotoAndStop("correct");
    }
    if(c == 1){
        this.incorrect.visible = true;
        this.question + Correct.visible = false;
        this.points[howmany].gotoAndStop("incorrect");
    }
}

[Colin Holgate]

In CreateJS symbols don't have a name property. this.mcinstancename would point to the symbol ok, but this["mcinstancename"] is likely to fail.

I don't understand this line:

this.question + Correct.visible = false;

[avid_body16B8]

My symbols are

P1Correct      P2Correct     P3Correct     P4Correct

P1Reveal     P2Reveal     P3Reveal     P4Reveal

P1Info     P2Info     P3Info     P4Info

so this.question + Correct.visible = false;

would for example call

this.P1Correct.visible.false;

I guess I could have made one symbol with 4 frames  for each instead. Maybe it would be more logical that way since I could just call the frame labels instead of calling different symbols.

But as you expected it did not work. So I will try the symbols instead.
Just trying different things so I can switch to Animate CC from EA.

[Colin Holgate]

Edge Animate still works ok, if you want to carry on using it!

If you're trying to set two things to be invisible, this might be more correct:

this.question.visible = Correct.visible = false;

[avid_body16B8]

Yes, I know about EA still working but one of our partners decided to use Animate CC and she does not know EA so I am thinking that it would be more logical for our workflow to align with her.

Also, I have created probably 800 plus EA educational games in EA and I am worried that some day something might brake. I am not sure you followed EA since the preview but we had a problem once with FF throwing a wrench into EA compositions(maybe preview 2?). I can't remember what it was but it was serious. We alerted the dev team and they got an update pretty fast but there is no dev team for EA any more as you know.

[avid_body16B8]

OK. Works perfect with one symbol each with a frame for each question. Makes a lot more sense actually.

[ClayUUID]

https://forums.adobe.com/people/Colin+Holgate  wrote

this.mcinstancename would point to the symbol ok, but this["mcinstancename"] is likely to fail.

Incorrect. object.property and object["property"] are functionally identical in both ActionScript and JavaScript. This has nothing to do with the .name property that the Canvas exporter refuses to populate.

Property accessors - JavaScript | MDN

Also...

I don't understand this line:

this.question + Correct.visible = false;

What she was going for was something like this:

var question = ["P1", "P2", "P3", "P4"];

function callCorrect(q, c) {       

     this[question + "Problem"].visible = false;

     this[question + "Problem"].visible = false;

etc...

[avid_body16B8]

Interesting. I will have to go back to my first file and see if I can make it work that way.

Addressing symbols in Animate is different from Edge Animate and I am just trying to see what will work best for me.

[Alama.be]

Bonjour à tous, et tester la position image genre if (this.currentFrame == 10) {....} ?? parce que là, je galère ..

[JoãoCésar]

Hi.

I'm not sure of what you want. I think the automatic translation isn't helping me here.

Do you want to check the current frame of a Movie Clip using JavaScript? And if so, what you want to happen?

Because your syntax is correct.

if (this.currentFrame == 10)

{

    // do something

}

[Alama.be]

I use animate for create html5/oam animations files for integrate in muse because muse is buged and have somes mal functions. But yes it'work, I made a mistake of syntax
Thanks JoaCésar and sorry for my bad English..