HTML5 Generate Random Number and Countdown

[shawns45366351]

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

[Joseph Labrecque · Accepted solution]

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 

[shawns45366351]

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 · Accepted solution]

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.

[shawns45366351]

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!

[ClayUUID]

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).

[JoãoCésar · Accepted solution]

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.

[shawns45366351]

THANK YOU!!!!

[JoãoCésar]

You're welcome!!!

[mentalcase129]

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ésar]

Hi.

How exactly do you want your interactivity to happen?

[mentalcase129]

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ésar]

Supposing that you have a Movie Clip instance for the dice in the main timeline called "yourDice" and that it contains all the frames for each face of the dice, you could write something like this:

var root = this;
var dice = root.yourDice; // change 'yourDice' to the instance name of your dice

root.rollDice = function(target)
{
	target.gotoAndStop(Math.floor(Math.random() * target.totalFrames));
};

root.onClickDice = function(e)
{
	root.rollDice(e.currentTarget);
};

stage.enableMouseOver();
dice.mouseChildren = false;
dice.cursor = "pointer";
dice.stop();
dice.on("click", root.onClickDice);

[mentalcase129]

Awesome!  Thank you!  It took me a while to come back to this to try it out but this was exactly what I needed.  

Follow up question though!

How would I go about adding a variable so that if the dice landed on a specific number it would trigger something.  Like play a movie clip or something.  

Or even if it's like a specific number or higher that action happens.

Thanks!

[JoãoCésar]

You're welcome!

There are several ways to accomplish what you want, but for ease of understanding, I think you can store the current face in a variable and a switch statement. Like this:

var root = this;
var dice = root.yourDice; // change 'yourDice' to the instance name of your dice
var face;

root.rollDice = function(target)
{
	face = Math.floor(Math.random() * target.totalFrames);
	target.gotoAndStop(face);
};

root.onClickDice = function(e)
{
	root.rollDice(e.currentTarget);
	
	switch (face)
	{
		case 0:
			console.log("•");
			// do something else
			break;
		case 1:
			console.log("••");
			// do something else
			break;
		case 2:
			console.log("•••");
			// do something else
			break;
		case 3:
			console.log("••••");
			// do something else
			break;
		case 4:
			console.log("•••••");
			// do something else
			break;
		case 5:
			console.log("••••••");
			// do something else
			break;
	}
};

stage.enableMouseOver();
dice.mouseChildren = false;
dice.cursor = "pointer";
dice.stop();
dice.on("click", root.onClickDice);

[mentalcase129]

Awesome!  Thank you!  So is the case number referring to the frame numbers that it's randomly picking from the dice movieclip?  Or is it the dots that are referring to the numbers?  I'm a bit confused on which ones I should be editing to match what I need if that makes sense.

Thanks

[JoãoCésar]

The case number is the frame number. In the HTML5 Canvas document, the first frame index is 0.