Skip to main content
Sharpe D
Sharpe D
Known Participant
December 6, 2021
Answered

Animate support Canvas mode developing e-learning content

  • December 6, 2021
  • 1 reply
  • 198 views

I am back working in Flash/Animate after several years to develop e-learning content for online courses. I have not worked in Canvas Mode until now and was failrly comfortable working in AS3. In working in Canvas mode I am having trouble with MovieClips and variables. I am having trouble communicating from MovieClip to MovieClip. I am also trying to set variables and text fields and having trouble setting a text field from a variable. For example, two Movie clips on the main timeline. One Movie Clip has a text field and the other has a button. Press the button in the second Movie Clip sets the text field in the first Movie Clip form a global variable set on the maine timeline. Anyone have easy answers? Or better yet are their any good new resources for learning scripting in Animate Canvas mode. I realize its JS, but it also has unique IDE. Any good lessons, tutorials for targeting Movie Clips. and passing variables would be great.

    This topic has been closed for replies.
    Correct answer kglad

    canvas uses javascript and the createjs library (EaselJS v1.0.0 API Documentation : EaselJS (createjs.com)) which is very similar to actionscript.

     

    referencing objects is almost identical between canvas and as3. the most important exceptions in canvas, you must explicitly

     

    1. reference the timeline (ie, on the current timeline mc1 is ok in as3, but you need to use this.mc1 in canvas)

     

    2, any variable declared with "var" only exists in the frame of declaration during that frames code execution. prefix variables with a timeline reference to have it persist.  ie

     

    var var1= "foo"; //var1 does not exist in the next frame

    this.var1="foo";  // this.var1 exists after this code executes.

     

    3.  functions lose reference to the current timeline unless it's explicitly passed in the function call (using bind() ).

     

    4.  in javascript explicitly type no objects.

     

    so, assuming all your code is on the main timeline:

     

    this.mc1.button1.addEventListener("click",f.bind(this));

     

    function f(e){

    this.mc2.textfield1.text = yourvariable;

    }

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    December 6, 2021

    canvas uses javascript and the createjs library (EaselJS v1.0.0 API Documentation : EaselJS (createjs.com)) which is very similar to actionscript.

     

    referencing objects is almost identical between canvas and as3. the most important exceptions in canvas, you must explicitly

     

    1. reference the timeline (ie, on the current timeline mc1 is ok in as3, but you need to use this.mc1 in canvas)

     

    2, any variable declared with "var" only exists in the frame of declaration during that frames code execution. prefix variables with a timeline reference to have it persist.  ie

     

    var var1= "foo"; //var1 does not exist in the next frame

    this.var1="foo";  // this.var1 exists after this code executes.

     

    3.  functions lose reference to the current timeline unless it's explicitly passed in the function call (using bind() ).

     

    4.  in javascript explicitly type no objects.

     

    so, assuming all your code is on the main timeline:

     

    this.mc1.button1.addEventListener("click",f.bind(this));

     

    function f(e){

    this.mc2.textfield1.text = yourvariable;

    }

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices