Highlighted

var Total:int=0 from AS3 to HTML5 Canvas

Explorer ,
Feb 05, 2019

Copy link to clipboard

Copied

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!!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

237

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

var Total:int=0 from AS3 to HTML5 Canvas

Explorer ,
Feb 05, 2019

Copy link to clipboard

Copied

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!!

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

238

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 05, 2019 0
Adobe Community Professional ,
Feb 05, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 0
Explorer ,
Feb 05, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 0
Adobe Community Professional ,
Feb 05, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 0
Explorer ,
Feb 05, 2019

Copy link to clipboard

Copied

Thank you SO much for this helpful content. I did actually encounter one issue that I'm not sure how to solve. When I navigate away from and return to the frame which holds that code you helped me with (the html file not reloaded, I am just cycling through the main timeline frames which hold different javascript code on each frame), it seems that the 'var totalButtons = 0;' is not being executed again. The function does not work the second time around. I have tried adding 'totalRButtons == 0;' to each "if" statement in the button function, but it did not work:

var totalRButtons = 0;

this.red1.redboxclick.addEventListener("click", Red1Button);

this.red2.redboxclick.addEventListener("click", Red2Button);

function Red1Button(e)

{

    if (e.currentTarget.clicked)

        return;

    totalRButtons++;

 

    if (totalRButtons == 2)

        exportRoot.redwords.gotoAndStop(1);

    exportRoot.red1.gotoAndStop(1);

   totalRButtons == 0;

    e.currentTarget.clicked = true;

}

function Red2Button(e)

{

    if (e.currentTarget.clicked)

        return;

  

    totalRButtons++;

  

    if (totalRButtons == 2)

        exportRoot.redwords.gotoAndStop(1);

    exportRoot.red2.gotoAndStop(1);

   totalRButtons == 0;

    e.currentTarget.clicked = true;

}

'

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 0
Explorer ,
Feb 05, 2019

Copy link to clipboard

Copied

JC,

I have done some testing and I actually believe it is my buttons which are not working on the second try. Thanks in advance...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 0
Adobe Community Professional ,
Feb 05, 2019

Copy link to clipboard

Copied

A major difference you need to remember between AS3 and Canvas is that when symbols leave the timeline in Canvas they are NOT destroyed, and when they return they are NOT re-instantiated. Instead they just have rendering turned on and off as needed. This causes many issues, discussed here:

https://forums.adobe.com/message/8715712?tstart=0#8715712

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 05, 2019 2
Adobe Community Professional ,
Feb 06, 2019

Copy link to clipboard

Copied

Wow. This info is pure gold.

I had the suspicion of some things you pointed out but now I'm pretty sure.

Thanks. I'll save it for future references.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 06, 2019 0