Skip to main content
S
shawns45366351
Known Participant
January 22, 2022
Answered

HTML5 Generate Random Number and Countdown

  • January 22, 2022
  • 3 replies
  • 3200 views

Hi everyone,

I'm trying to move from ActionScript to HTML5. but I am having a hell of a time finding good resources or clear instructions on how the HTML5 Actions work. I've been doing some simple games and using the Generate a Random Number (like a dice roll) as well as a Countdown (to make an event occur).

 

in Action Script it used to be:

 

// Generate a Random Number

function fl_GenerateRandomNumber(limit:Number):Number
{
var randomNumber:Number = Math.floor(Math.random()*(limit+1));
return randomNumber;
}
//The Number here is "out of how many?"
var theNumber:Number = (fl_GenerateRandomNumber(10));

//Paste in Output
trace(theNumber);

//This is how many changes to Red. Anything greater than 8 will make the red button visable.
if( theNumber >= 9) {
trace("Higher");
Red_Button.visible = true;
}else {
trace("Lower");
Red_Button.visible = false;

}

 

and for Countdown:

 

//This is the Countdown Code
var fl_SecondsToCountDown:Number = 10;

var fl_CountDownTimerInstance:Timer = new Timer(1000, fl_SecondsToCountDown);
fl_CountDownTimerInstance.addEventListener(TimerEvent.TIMER, fl_CountDownTimerHandler);
fl_CountDownTimerInstance.start();

function fl_CountDownTimerHandler(event:TimerEvent):void
{
trace(fl_SecondsToCountDown + " seconds");
//if the countdown reaches 1 then you go to the alien page
if (fl_SecondsToCountDown == 1) {
gotoAndStop(10);
}
//This code places the Countdown on the screen
countdownNumber.text = fl_SecondsToCountDown.toString();

//This code subtracts one from the countdown
fl_SecondsToCountDown--;
}

 

Does anyone have an idea how to create these two pieces of code OR a tutorial on how to go about it?
AND

Does anyone have a link to solid HTML foundations like we used to have with ActionScript so that I can parse the new Actions panel for HTML5. Like the old "ActionScript® 3.0 Reference for the Adobe® Flash® Platform" pages? https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html

I would really like to be able to learn this code better, but I cannot find any decent resources that don't simply stop at simple buttons and banner ads.

Thank you for your help!!

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

    Hi.

     

    I would like to suggest some references to learn coding in the HTML5 Canvas document:

     

    - The official help has lot of articles, tutorials, and examples: https://helpx.adobe.com/support/animate.html;

    - Animate CC also ships with great learning content. Just go to the start screen and select the LEARN option in the top-left corner of the screen;

    - Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

    - LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

    - Pluralsight also have some great video courses: https://www.pluralsight.com;

    - General tips and tricks in the comment that starts with "Excellent!";

    - Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

    - Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

    - CreateJS official samples on CodePen: https://codepen.io/createjs; 

    - CreateJS blog: http://blog.createjs.com; 

    - Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

    - This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

    - Adobe Animate's official YouTube channel;

    - Martin Melendez's YouTube channel;

    - My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

    - I also have a YouTube channel that you may find useful.

     

    I hope these help.

    3 replies

    M
    mentalcase129
    Known Participant
    July 31, 2023

    Did you eventually get your dice rolling game to work with HMTL5?

     

    I'm trying to do what I think is the exact same thing you're describing.  My coding prowess is much more limited though and I tend to rely primarily on the snippets, so simply applying HMTL conventions to the actionscript you posted is throwing me off.

     

    It looks like the responses are primarily pointing towards other resources which for the moment isn't helping me a ton as I'm on a bit of a time crunch.  If you got it working, would you be able to  post the HTML5 version of the dice roll code here?

    Thanks!

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    July 31, 2023

    Hi.

     

    How exactly do you want your interactivity to happen?

    M
    mentalcase129
    Known Participant
    July 31, 2023

    I made a dice graphic and hoping to click on it and then have the number randomly generate on top of the graphic.

    Might look into creating some animation to incorporate into it but that's not crucial, so the priority is just getting the numbers to appear at random.

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    January 23, 2022

    Hi.

     

    I would like to suggest some references to learn coding in the HTML5 Canvas document:

     

    - The official help has lot of articles, tutorials, and examples: https://helpx.adobe.com/support/animate.html;

    - Animate CC also ships with great learning content. Just go to the start screen and select the LEARN option in the top-left corner of the screen;

    - Basic AS3 to HTML5 reference: https://helpx.adobe.com/animate/kb/as-to-html5.html;

    - LinkedIn Learning has some great video courses (special mention to Joseph Labrecque): https://www.linkedin.com/learning;

    - Pluralsight also have some great video courses: https://www.pluralsight.com;

    - General tips and tricks in the comment that starts with "Excellent!";

    - Official demos developed by the CreateJS team: https://github.com/CreateJS/AdobeAnimateDemo;

    - Other samples from the CreateJS official account on GitHub: https://github.com/CreateJS; 

    - CreateJS official samples on CodePen: https://codepen.io/createjs; 

    - CreateJS blog: http://blog.createjs.com; 

    - Lanny McNie, from the CreateJS team, samples on JSFiddle: https://jsfiddle.net/user/lannymcnie/fiddles; 

    - This old talk by Grant Skinner, the author of CreateJS: https://www.youtube.com/watch?v=QHudJJLRp-c; 

    - Adobe Animate's official YouTube channel;

    - Martin Melendez's YouTube channel;

    - My repo on GitHub that contains the source codes and files of some games, apps, and other stuff;

    - I also have a YouTube channel that you may find useful.

     

    I hope these help.

    S
    shawns45366351Author
    Known Participant
    January 23, 2022

    THANK YOU!!!!

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      January 24, 2022

      You're welcome!!!

      Joseph Labrecque
      Community Expert
      Joseph LabrecqueCommunity Expert
      Community Expert
      January 22, 2022

      There is basic JS documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 
      And specific docs for CreateJS, which Animate leverages: https://createjs.com/docs 

      S
      shawns45366351Author
      Known Participant
      January 22, 2022

      Thank you for the link to the JavaScript docs, that's exactly what i was looking for. I believe I've seen your tutorials on LinkedIn Learning (previously Lynda)

       

      Stupid Questions (if you have a second):

      1. So, I have to learn and use JavaScript in the Actions panel to be able to do simple ActionScript like coding in HTML5 Adobe Animate?
      2. There is no CodeSnippets for more complex Actions in HTML5 like there is in ActionScript 3?
      3. The code "this.whatever" is JavaScript? "this.stop();" is JavaScript?
      4.  Do you have any idea why you have to start so many commands with "this."? What's the reasoning behind that usage?

       

      Thank you for your time!

       

      Colin Holgate
      Colin Holgate
      Inspiring
      January 22, 2022

      There are components and code snippets for HTML5 Canvas. There is also now a scripting wizard inside the Actions panel.

      In ActionScript, the 'this' is implied, but you could add this.whatever, and so long as it's something that makes sense, it would work in ActionScript and JavaScript. In JavaScript it isn't optional, hence having to say this.stop(); or refer to this.variablename;

      One big difference is that variables don't have types in JavaScript. In ActionScript you might say this:

      var mc:MovieClip = new Widget() as MovieClip;

      That would create a new Widget from your library, and treat it as a MovieClip from then on. In JavaScript you would say:

      var mc = new lib.Widget();

      The compiler won't check to see that you are using the object correctly, and not trying to get it to do something it's not capable of.

      The browser's JavaScript tools are a big help, in the Console you should see most errors that are happening.

       

       

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