HTML5 Generate Random Number and Countdown

Community Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

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

Views

134

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
community guidelines

correct answers 3 Correct answers

Adobe Community Professional , Jan 22, 2022 Jan 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 

Likes

Translate

Translate
Adobe Community Professional , Jan 22, 2022 Jan 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:Movi...

Likes

Translate

Translate
Adobe Community Professional , Jan 23, 2022 Jan 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 ment...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

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 

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
community guidelines
Community Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

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!

 

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
community guidelines
Adobe Community Professional ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

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.

 

 

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
community guidelines
Community Beginner ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

Thank you Colin.

 

  1. Yes, there are some code snippets and the wizard, however they appear to be only for the more basic of code. Not Random Numbers or Countdowns.
  2. So you are saying that 'this' is actually part of actionScript, we just never see it?
  3. What "Console" are upi referring to? The "Output" window in Animate doesn't seem to do anything with HTML5 like it did with ActionScript. For example, I used the 'Trace' function quite a bit. But if the code is wrong in HTML5 it just doesn't run, I get no error or explination anywhere. However, I woule love to know where I could see errors. (BTW, I've been using 'alert' for testing, which is kind of annoying, but I couldn't see anything when I did 'console.log')

 

Sorry for all of the questions, but until someone does a video on how to transfer FROM an ActionScript user to an HTML user, more in depth that what I've been able to find, I have to ask someone.

 

Thank you for your answers!

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
community guidelines
Adobe Community Professional ,
Jan 22, 2022 Jan 22, 2022

Copy link to clipboard

Copied

By "leverages", he means almost everything HTML5 Canvas documents do is via the CreateJS library.

 

In AS2/AS3 documents, "ActionScript" refers to two distinct things: The language, and the API.

 

In Canvas documents, the language is JavaScript, and the API is CreateJS. Everything on the stage is a CreateJS object (Except UI components. The less said about them the better).

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
community guidelines
Adobe Community Professional ,
Jan 23, 2022 Jan 23, 2022

Copy link to clipboard

Copied

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.

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
community guidelines
Community Beginner ,
Jan 23, 2022 Jan 23, 2022

Copy link to clipboard

Copied

THANK YOU!!!!

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
community guidelines
Adobe Community Professional ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

LATEST

You're welcome!!!

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
community guidelines