Skip to main content
SSSSSSBenay
SSSSSSBenay
Known Participant
February 5, 2019
Answered

var Total:int=0 from AS3 to HTML5 Canvas

  • February 5, 2019
  • 1 reply
  • 879 views

Hello everyone,

I am making the transition from Flash AS3 to Flash HTML5 Canvas. I have been creating interactive children's educational games using Flash and AS3 for years, and I am now trying to do the same with Flash HTML5 Canvas. I am very stuck on how to achieve this same interactivity in Flash HTML5 Canvas. Here is the code I used in AS3:

var totalButtons:int = 0;

button1.addEventListener(MouseEvent.CLICK, Press1Button);

function Press1Button(e:Event):void

{

  totalButtons++;

  if (totalButtons == 3)

  {

  MovieClip(root).takeoff.gotoAndPlay(2);

  }}

button2.addEventListener(MouseEvent.CLICK, Press2Button);

function Press2Button(e:Event):void

{

  totalButtons++;

  if (totalButtons == 3)

  {

  MovieClip(root).takeoff.gotoAndPlay(2);

  }}

button3.addEventListener(MouseEvent.CLICK, Press3Button);

function Press3Button(e:Event):void

{

  totalButtons++;

  if (totalButtons == 3)

  {

  MovieClip(root).takeoff.gotoAndPlay(2);

  }}

I can successfully control Button behaviors using Javascript directly in the timeline, however adding variables with Javascript is still confusing me.  I have been trying to manipulate some code that I learned in an HTML5 Edge tutorial, however it is not working in my Flash HTML5 Canvas document and that is platform I will be using (it seems to be most similar to Flash as far adding and animating artwork).

Thanks in advance!!

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

Giving you a really straight forward answer, your code would look something like this:

var totalButtons = 0;
function press1Button(e)
{
    if (e.currentTarget.clicked)
        return;
   
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
function press2Button(e)
{
    if (e.currentTarget.clicked)
        return;
   
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
function press3Button(e)
{
    if (e.currentTarget.clicked)
        return;
       
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
this.button1.addEventListener("click", press1Button);
this.button2.addEventListener("click", press2Button);
this.button3.addEventListener("click", press3Button);

Please notice that added some checks because the way things were, the user would be able to play the takeOff instance by only clicking the same button three times.

A more compact a dynamic way of achieving the same result would be placing all buttons inside of a single container and coding like this:

this.count = 0;
this.check = function(e)
{
    // this is how we get the total of children no matter if the advanced layers mode is on or ff
    var total = Math.max(e.currentTarget.children[0].children.length, e.currentTarget.children.length);
    
    if (e.target.clicked)
        return;
        
    if (++exportRoot.count === total)
        exportRoot.takeOff.gotoAndPlay(1);
    
    e.target.clicked = true;
}
this.buttons.on("click", this.check);

For more info, please check this cheat sheet (comment #3):

Re: Keep button state

Regards,

JC

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
February 5, 2019

Hi.

Giving you a really straight forward answer, your code would look something like this:

var totalButtons = 0;
function press1Button(e)
{
    if (e.currentTarget.clicked)
        return;
   
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
function press2Button(e)
{
    if (e.currentTarget.clicked)
        return;
   
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
function press3Button(e)
{
    if (e.currentTarget.clicked)
        return;
       
    totalButtons++;
   
    if (totalButtons == 3)
        exportRoot.takeOff.gotoAndPlay(1);
   
    e.currentTarget.clicked = true;
}
this.button1.addEventListener("click", press1Button);
this.button2.addEventListener("click", press2Button);
this.button3.addEventListener("click", press3Button);

Please notice that added some checks because the way things were, the user would be able to play the takeOff instance by only clicking the same button three times.

A more compact a dynamic way of achieving the same result would be placing all buttons inside of a single container and coding like this:

this.count = 0;
this.check = function(e)
{
    // this is how we get the total of children no matter if the advanced layers mode is on or ff
    var total = Math.max(e.currentTarget.children[0].children.length, e.currentTarget.children.length);
    
    if (e.target.clicked)
        return;
        
    if (++exportRoot.count === total)
        exportRoot.takeOff.gotoAndPlay(1);
    
    e.target.clicked = true;
}
this.buttons.on("click", this.check);

For more info, please check this cheat sheet (comment #3):

Re: Keep button state

Regards,

JC

SSSSSSBenay
SSSSSSBenayAuthor
Known Participant
February 5, 2019

Thank you SO much for this helpful code. I hope to one day be as fluent as you are in Javascript...I feel quite inept at the moment. I have one question to help me better my understanding:

Why are we using 'exportRoot' instead of 'this' in the line of code:

'exportRoot.takeOff.gotoAndPlay(1);'

I experimented also trying

'this.takeOff.gotoAndPlay(1);'

but alas it did not work.

Thanks for this clarification so I can understand better the scope in Javascript.

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
February 5, 2019

Excellent!

You're welcome!

exportRoot is a global reference to the main timeline that Animate CC automatically creates. So no matter where you are in the code, you can always reference the main timeline like exportRoot.someProperty or exportRoot.doSomething().

In JavaScript, the this keyword behaves differently from AS3 because the way context works in JavaScript.

Please check this document for a very detailed explanation:

this - JavaScript | MDN

But giving you a short and not so technical explanation based on our example, if you use the this keyword inside of the this.check method, this will actually be a reference to the buttons container that is the object that actually received the event listener not the main timeline.

You could use binding, but as you're making the transition, I think you should let this technique for a later opportunity.

Anyway, don't forget to have a look at the links from the thread I suggested, specially this one:

Button within Movieclip

Please let me know if you still have any further questions.

Regards,

JC

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