Highlighted

Learning How Javascript Works With Animate/HTML5 Canvas?

Participant ,
Sep 19, 2019

Copy link to clipboard

Copied

Hello,

I'm sorry to be a pain, as I'm asking to kindly be pointed in the right direction.  My problem is that I need to learn Animate-HTML Canvas and Javascript (my applications are all AS3-based), and the learning process is massively disjointed.

  • In the past, when I learned Flash and AS3, I bought a book, read it cover-to-cover, and figured stuff out.  No problem.
  • It seems like there is no single book for Animate-HTML Canvas and Javascript, however.
  • I've read the entire Javascript tutorial at w3schools.com .  I've also scoured this forum and the web for tips on writing Javascript in Animate.  But, it's all tips/obscure questions/quick answers... no central source of A-Z learning, like with the plethora of AS3 books.
  • It seems that writing straight-up Javascript in Animate isn't that straightforward... one has to know some things that are unique to Animate (for instance, you can't write stop(); and instead, you must write this.stop(); ... OR, I had to scour multiple places just to write a simple drag-and-drop script).

1) Is there a book or a comprehensive source of learning Animate/HTML Canvas?  I've looked, and I cannot find it.

2) When I try examples, such as https://community.adobe.com/t5/Animate/Load-dynamic-external-image-in-animate-cc-canvas-javascript/m... , and even download the .ZIP file, it doesn't work -- no external images load.  I've monkeyed with the code endlessly, and nothing works.

3) Can I locally-test my work with CTRL-ENTER, as before, or do I have to upload the content to the web for testing, each and every time?

4) When I search for information on loading external .SVG files from a server location (similar to the old way of loading external .SWF files for vector graphics), I can't find an example.  I also don't know if I need to have an .SVG parser, or if the .SVG will display just like a vector graphic without a parser.

My apologies if I seem like I'm complaining... it's just that I need to rewrite my applications, and I'm doing my best to figure this out, given seemingly inadequate education sources.  Thank you for any guidance!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

start here, https://www.createjs.com/easeljs

 

make sure to check the documents link.   the createjs api is there.

Views

638

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

Learning How Javascript Works With Animate/HTML5 Canvas?

Participant ,
Sep 19, 2019

Copy link to clipboard

Copied

Hello,

I'm sorry to be a pain, as I'm asking to kindly be pointed in the right direction.  My problem is that I need to learn Animate-HTML Canvas and Javascript (my applications are all AS3-based), and the learning process is massively disjointed.

  • In the past, when I learned Flash and AS3, I bought a book, read it cover-to-cover, and figured stuff out.  No problem.
  • It seems like there is no single book for Animate-HTML Canvas and Javascript, however.
  • I've read the entire Javascript tutorial at w3schools.com .  I've also scoured this forum and the web for tips on writing Javascript in Animate.  But, it's all tips/obscure questions/quick answers... no central source of A-Z learning, like with the plethora of AS3 books.
  • It seems that writing straight-up Javascript in Animate isn't that straightforward... one has to know some things that are unique to Animate (for instance, you can't write stop(); and instead, you must write this.stop(); ... OR, I had to scour multiple places just to write a simple drag-and-drop script).

1) Is there a book or a comprehensive source of learning Animate/HTML Canvas?  I've looked, and I cannot find it.

2) When I try examples, such as https://community.adobe.com/t5/Animate/Load-dynamic-external-image-in-animate-cc-canvas-javascript/m... , and even download the .ZIP file, it doesn't work -- no external images load.  I've monkeyed with the code endlessly, and nothing works.

3) Can I locally-test my work with CTRL-ENTER, as before, or do I have to upload the content to the web for testing, each and every time?

4) When I search for information on loading external .SVG files from a server location (similar to the old way of loading external .SWF files for vector graphics), I can't find an example.  I also don't know if I need to have an .SVG parser, or if the .SVG will display just like a vector graphic without a parser.

My apologies if I seem like I'm complaining... it's just that I need to rewrite my applications, and I'm doing my best to figure this out, given seemingly inadequate education sources.  Thank you for any guidance!

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

start here, https://www.createjs.com/easeljs

 

make sure to check the documents link.   the createjs api is there.

Views

639

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
Sep 19, 2019 1
Adobe Community Professional ,
Sep 20, 2019

Copy link to clipboard

Copied

start here, https://www.createjs.com/easeljs

 

make sure to check the documents link.   the createjs api is there.

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
Reply
Loading...
Sep 20, 2019 1
Participant ,
Sep 20, 2019

Copy link to clipboard

Copied

Yes, and thank you -- I've checked out createjs.com . It's possible that I haven't delved deep enough into createjs.com, so I'll look further.

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
Reply
Loading...
Sep 20, 2019 0
kglad LATEST
Adobe Community Professional ,
Sep 20, 2019

Copy link to clipboard

Copied

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
Reply
Loading...
Sep 20, 2019 0