Skip to main content
Participant
July 20, 2020
Answered

Learning from Scratch

  • July 20, 2020
  • 1 reply
  • 639 views

Hi All!

 

I used to dabble in a little Adobe Flash back in AS2.0 days but very basically and now really want to learn as much as possible about Adobe Animate for making games/interactive pages in HTML5 Canvas. 

I'm really struggling to find many resources about coding in Animate as the main focus seems to be on animation. I wondered if any veterans could point me in the direction of how I can learn to code from the ground up. 

My specific questions are what language should I be working with? I'm not sure on the differences between Action Script and JS - isn't AS defunct now? Or can it be used in HTML5 projects?

 

Something I've been trying to do but was struggling with is controlling the camera with some hover over buttons I.e. every frame that you stay hovered over it adds 10 pixels to the X value and then stops adding once you hover out - would be great if anyone could help me with this, please?

 

I really look forward to hearing your responses and being a part of the community!

 

thanks a lot,

 

Ross

    This topic has been closed for replies.
    Correct answer JoãoCésar17023019

    Hi.

     

    Glad to know that you are so eager to learn how to code in Adobe Animate.

     

    Answering your questions:

    - In Animate CC you have two coding languages to use: AS3 and JavaScript.

     

    * AS3 is used to create games and apps for Windows, Mac OS, Android, and iOS targeting the Adobe/Harman AIR runtime and also the Flash Player (for desktop and offline usage). AS3 is an amazing language although it's not so popular these days. If you're not planning to publish content to the web, then you can still use it.

     

    * JavaScript is the default scripting language for the web and it is what Animate uses for HTML5 Canvas, WebGL Standard, WebGL Extended, and VR Panorama documents. If you're targeting the web, then certainly JavaScript is the best option. You can also target desktop computers using something like Node.js and Electron and also target mobile devices using something like Adobe PhoneGap and Apache Cordova.

     

    - You cannot use AS3 in HTML5 projects. Well, unless you come up with a very hacky approach. Hehe

     

    - The code for the camera could be something like this:

    var root = this;
    var button = root.yourMoveCameraButton;
    var camera = AdobeAn.VirtualCamera.getCamera(root);
    
    root.hovering = function(e)
    {
    	e.currentTarget.hovering = true;
    };
    
    root.notHovering = function(e)
    {
    	e.currentTarget.hovering = false;
    };
    
    root.moveCamera = function(e)
    {
    	if (button.hovering)
    		camera.moveBy(camera.offsetX, 0, 0);
    };
    
    root.start = function()
    {
    	// stage.enableMouseOver(); // uncomment this line if your button is not actually a Button symbol but a Movie Clip instance, for example
    	camera.offsetX = 10;
    	button.on("rollover", root.hovering);
    	button.on("rollout", root.notHovering);
    	root.on("tick", root.moveCamera);
    };
    
    root.start();

     

    And here are some suggestions for learning materials:

     

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

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

    - Official Flappy Bird clone tutorial: https://theblog.adobe.com/building-a-html5-flappy-bird-game-clone-with-adobe-animate-cc/ ;

    - Martin Melendez's YouTube channel;

    - My repo on GitHub that contains the source codes and files of some games and other stuff;

    - I also have a YouTube channel that you may find useful.

     

    I hope these help.

     

    Regards,

    JC

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    July 20, 2020

    Hi.

     

    Glad to know that you are so eager to learn how to code in Adobe Animate.

     

    Answering your questions:

    - In Animate CC you have two coding languages to use: AS3 and JavaScript.

     

    * AS3 is used to create games and apps for Windows, Mac OS, Android, and iOS targeting the Adobe/Harman AIR runtime and also the Flash Player (for desktop and offline usage). AS3 is an amazing language although it's not so popular these days. If you're not planning to publish content to the web, then you can still use it.

     

    * JavaScript is the default scripting language for the web and it is what Animate uses for HTML5 Canvas, WebGL Standard, WebGL Extended, and VR Panorama documents. If you're targeting the web, then certainly JavaScript is the best option. You can also target desktop computers using something like Node.js and Electron and also target mobile devices using something like Adobe PhoneGap and Apache Cordova.

     

    - You cannot use AS3 in HTML5 projects. Well, unless you come up with a very hacky approach. Hehe

     

    - The code for the camera could be something like this:

    var root = this;
    var button = root.yourMoveCameraButton;
    var camera = AdobeAn.VirtualCamera.getCamera(root);
    
    root.hovering = function(e)
    {
    	e.currentTarget.hovering = true;
    };
    
    root.notHovering = function(e)
    {
    	e.currentTarget.hovering = false;
    };
    
    root.moveCamera = function(e)
    {
    	if (button.hovering)
    		camera.moveBy(camera.offsetX, 0, 0);
    };
    
    root.start = function()
    {
    	// stage.enableMouseOver(); // uncomment this line if your button is not actually a Button symbol but a Movie Clip instance, for example
    	camera.offsetX = 10;
    	button.on("rollover", root.hovering);
    	button.on("rollout", root.notHovering);
    	root.on("tick", root.moveCamera);
    };
    
    root.start();

     

    And here are some suggestions for learning materials:

     

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

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

    - Official Flappy Bird clone tutorial: https://theblog.adobe.com/building-a-html5-flappy-bird-game-clone-with-adobe-animate-cc/ ;

    - Martin Melendez's YouTube channel;

    - My repo on GitHub that contains the source codes and files of some games and other stuff;

    - I also have a YouTube channel that you may find useful.

     

    I hope these help.

     

    Regards,

    JC

    Participant
    July 20, 2020

    Amazing response! Thanks so much for your help! I look forward to delving in to some of these resources later! 😁 

     

    Will be sure to drop you a subscription!

    JoãoCésar17023019
    Community Expert
    Community Expert
    July 20, 2020

    Awesome! You're welcome!

     

    I wish you an amazing learning adventure! 😄