Converting ActionScript to HTML5 Canvas

Community Beginner ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

Hi,

 

I wonder if anyone can suggest any tips or suggestions in relation to my issue? I've read previous posts on this subject and have looked at resources such as https://helpx.adobe.com/uk/animate/kb/as-to-html5.html.

 

I have a legacy Flash Project (Actionscript 3.0) which I've opened in Adobe Animate 2021 and converted to HTML5 canvas.

 

I understand that the Actionscript will be commented out as Animate uses JavaScript. The code is approx 400 lines long (so I haven't posted it).

 

Are there any guides or online training available on converting Actionscript 3.0 to JavaScript for use in Animate? I know that there is no automatic way of doing this.

 

Cheers,


John

Views

105

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 ,
Nov 30, 2020 Nov 30, 2020

Copy link to clipboard

Copied

you'll need to learn, at least, enough as3 to understand the code used in your as3 file and you'll need to learn some basic easeljs/javascript.  then when converting each functional block of as3, search for help with accomplishing the same task with easeljs/javascript. 

 

trying to create one tutorial would be a mess even if it only covered 1/2 the as3 commands, and too simplistic to help most people if it only covered the basics.

 

 

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 ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied


Many thanks for replying - I'll start this interesting journey today!

 

I'm not quite a novice in scripting (but not far off!) but I'll immerse myself in Actionscript and easeljs/JavaScript, and give it a go. At least I know the Actionscript version works, so this gives me a grounding to, hopefully, rewrite section by section.

 

Cheers,

 

John

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 ,
Dec 01, 2020 Dec 01, 2020

Copy link to clipboard

Copied

you're welcome (and good luck).

 

oh, and for snippets of as3, you can also get help here converting if you get stuck.

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 ,
Dec 03, 2020 Dec 03, 2020

Copy link to clipboard

Copied

Many thanks!

 

I've spent the past 48 hours slowly going through the ActionScript code (400 lines) and I'm determined to give it a go in relation to converting this to JavaScript for use in HTML5 Canvas.

 

However, some of the sections seem quite daunting to me - for instance, I've chosen three random original ActionScript code examples below:  

 

-----------------------------------------------

function rotateUp(event:MouseEvent):void {
switch (currentState) {
case "hot1" :
dialMC.hot1.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.hot1,dialMC.cold2)) {
dialMC.hot1.rotation+=3.75;
} else {
dialMC.hot1.rotation+=-3.75;

if (dialMC.hot1.timeValue==24) {
dialMC.hot1.timeValue=0.5;
} else {
dialMC.hot1.timeValue+=0.5;
}
}
break;
case "hot3" :
dialMC.hot3.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.hot3,dialMC.cold4)) {
dialMC.hot3.rotation+=3.75;
} else {
dialMC.hot3.rotation+=-3.75;
if (dialMC.hot3.timeValue==24) {
dialMC.hot3.timeValue=0.5;
} else {
dialMC.hot3.timeValue+=0.5;
}
}
break;
case "cold4" :
dialMC.cold4.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.cold4,dialMC.hot1)) {
dialMC.cold4.rotation+=3.75;
} else {
dialMC.cold4.rotation+=-3.75;
if (dialMC.cold4.timeValue==24) {
dialMC.cold4.timeValue=0.5;
} else {
dialMC.cold4.timeValue+=0.5;
}
}
break;
case "cold2" :
dialMC.cold2.rotation+=-3.75;
if (_collisionTest.complexHitTestObject(dialMC.cold2,dialMC.hot3)) {
dialMC.cold2.rotation+=3.75;
} else {
dialMC.cold2.rotation+=-3.75;
if (dialMC.cold2.timeValue==24) {
dialMC.cold2.timeValue=0.5;
} else {
dialMC.cold2.timeValue+=0.5;
}
}
break;
case "time" :
dialMC.rotation+=7.5;
time+=0.5;
if (time==24.5) {
time=0.5;
}
break;

default :
trace("None of the above were met");
}
}

-----------------------------------------------

var feedbackText:TextField = new TextField();
feedbackText.multiline=true;
feedbackText.wordWrap=true;
feedbackText.defaultTextFormat=feedbackTextFormat;
feedbackText.embedFonts=true;//added
feedbackText.antiAliasType=AntiAliasType.ADVANCED;
//feedbackText.autoSize="left";
feedbackText.selectable=false;
feedbackText.x=50;
feedbackText.y=455;
feedbackText.width=500;
addChild(feedbackText);

-----------------------------------------------

function submitAnswer(e:MouseEvent):void {
/*trace("start");
trace(dialMC.hot1.timeValue);
trace(dialMC.hot3.timeValue);
trace(dialMC.cold2.timeValue);
trace(dialMC.cold4.timeValue);*/
trace(time);
if (dialMC.hot1.timeValue==5&&dialMC.hot3.timeValue==18&&dialMC.cold2.timeValue==8&&dialMC.cold4.timeValue==23&&time==20&&heatingSlide.x==475) {
feedbackText.text="Correct";

} else if (dialMC.hot1.timeValue==5&&dialMC.hot3.timeValue==18&&dialMC.cold2.timeValue==8&&dialMC.cold4.timeValue==23&&time==20) {
incorrectAttempts+=1;
feedbackText.text="You've correctly set the time and tappets, but you need to select the correct heating setting";
} else {
incorrectAttempts+=1;
feedbackText.text="That's not right, please try again";
}
if (incorrectAttempts>=3) {
feedbackText.text="You may want to go back to the previous screen for an explanation on how the programmer works";
incorrectAttempts=0;
}
}

-----------------------------------------------

 

I have looked around for resources/information in relation to converting Actionscript to EaselJS/Javascript but at the moment I am wondering whether I am out of my depth in trying this rewrite?

 

Really would like to try mind!

 

Cheers,

 

John

 

 

 

 

 

 

 

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 ,
Dec 03, 2020 Dec 03, 2020

Copy link to clipboard

Copied

it may be difficult. 

 

the first snippet hinges on complexHitTestObject which is a method of _collisionTest (which may be a class instance with a class file where that method is delineated).

 

easeljs has a hittest (EaselJS Tutorial: Using hitTest (createjs.com)) but it's not likely to do the same thing as a "complexhittesthobject" which sounds like it may be a shaped-based hittest.

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 ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

Many thanks for the kind reply.

Having a working legacy ActionScript version, I had hoped that I could have used this as a template to work from to convert to JavaScript.

But, as you say, it is complex and I seem to have come to a brick wall in knowing how to proceed.

Cheers,


John

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 ,
Dec 06, 2020 Dec 06, 2020

Copy link to clipboard

Copied

LATEST

if the project's important enough to hire help, send me a message (by click my forum name > send message).

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