Converting ActionScript to HTML5 Canvas

[johnleggett]

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

[kglad]

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.

[johnleggett]

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

[kglad]

you're welcome (and good luck).

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

[johnleggett]

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

[kglad]

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.

[johnleggett]

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

[kglad]

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