need help Converting Actionscript to HTML5 in Adobe Animate using random

Community Beginner ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

this is my code for Actionscript:

 

//for creating a hexagon on click

 

stage.addEventListener(MouseEvent.CLICK, addHex);
function addHex(e:MouseEvent):void {
var newHex: hex1 = new hex1
var size:int = Math.round(Math.random()*50+10);
this.addChildAt(newHex, 1);
newHex.x= mouseX;
newHex.y= mouseY;
newHex.width= size;
newHex.height= size;
}

 

How could I convert this to HTML5?

THANK YOU IN ADVANCE

Views

179

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 1 Correct Answer

Adobe Community Professional , Feb 06, 2021 Feb 06, 2021
Thanks. There are multiple instances that are interfering with the mouse click. One solution will be to place an invisible button at the top that covers the entire canvas and then add the click listener to the button instead of adding to the stage. The code would be slightly modified: function addHex(e) { var newHex = new lib.hex1(); var size = Math.round(Math.random() * 50 + 10); newHex.x = stage.mouseX / stage.scaleX; newHex.y = stage.mouseY / stage.scaleY; newHex.scaleX = size ...

Likes

Translate

Translate
Adobe Community Professional ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

Hi.

 

Like this:

function addHex(e)
{
	var newHex = new lib.hex1();
	var size = Math.round(Math.random() * 50 + 10);
	
	newHex.x = stage.mouseX / stage.scaleX;
	newHex.y = stage.mouseY / stage.scaleY;
	newHex.scaleX = size / newHex.nominalBounds.width;
	newHex.scaleY = newHex.scaleX;
	
	this.addChildAt(newHex, 1);
}

stage.on("click", addHex, this);

 

Besides the code, you will need to set the linkage name of your symbol in the Library to hex1 and you will also need to have some shape, bitmap or symbol instance in the background to serve as a hit area so the click event will be fired.

 

image.png

 

I hope this helps.

 

Regards,

JC 

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

Thank you for replying, 

 

The instance of the hexagon that is supposed to appear is called "hex1" and it shows in the linkage in my library. 

Although, the hexagons still don't appear when I click.

The background is called "back_mov" and the instance is called "back" although in my library it shows no linkage.

 

Additional information that might be helpful to solve this problem:

I created a cursor called "mouse" with the instance of "hex3" although in my library it shows no linkage.

 

-Amaris

 

Screen Shot 2021-02-06 at 2.50.28 PM.png

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

It seems like the hexagons do appear, but only on a specific area, this area is called "body_mov"

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

This additional information was not taken into account when I wrote the code.

 

Can you share your FLA?

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

Here is it!

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

Not sure if that went through

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

There's no FLA.

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

The file doesn't exceed the maximum size, is there another way for me to send it?

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

You can upload it to Creative Cloud, Dropbox, Google Drive, OneDrive, WeTransfer or any other file sharing service of your choice and then place the link here.

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

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 ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

Thanks.

 

There are multiple instances that are interfering with the mouse click.

 

One solution will be to place an invisible button at the top that covers the entire canvas and then add the click listener to the button instead of adding to the stage.

 

The code would be slightly modified:

 

function addHex(e)
{
	var newHex = new lib.hex1();
	var size = Math.round(Math.random() * 50 + 10);
	
	newHex.x = stage.mouseX / stage.scaleX;
	newHex.y = stage.mouseY / stage.scaleY;
	newHex.scaleX = size / newHex.nominalBounds.width;
	newHex.scaleY = newHex.scaleX;
	
	this.addChild(newHex);
}

this.hit.cursor = "none"; // hit is the instance name of the invisible button
this.hit.on("click", addHex, this);

 

 

I hope it works.

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 ,
Feb 07, 2021 Feb 07, 2021

Copy link to clipboard

Copied

Hi JC,

I have added the invisible button, how should I input the instance of it in the code?

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 ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

Hi again.

 

I forgot to mention that hit is the name of the Button instance in my code. But you can call yours whatever you want to.

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 ,
Feb 08, 2021 Feb 08, 2021

Copy link to clipboard

Copied

Wow 🙂 thank you so much! 5 stars 

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 ,
Feb 09, 2021 Feb 09, 2021

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