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!!
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.currentTarge
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):
Regards,
JC
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.
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:
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:
Please let me know if you still have any further questions.
Regards,
JC
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;
}
'
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...
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:
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.