Skip to main content
BioME
BioME
Known Participant
May 15, 2022
Question

Toggling the visibility of text

  • May 15, 2022
  • 1 reply
  • 2342 views

I need to figure out how to toggle the visibility of text in Canvas.  I had it working with my old SWFs, but I haven’t been able to translate it to Canvas because I’m a JavaScript neonate.  Before I can define what I need, I have to explain how my files are set up.  They are stop action, animated lessons.  They play until a point in the timeline is reached with a this.stop(); command. I call these stop points FreezeFrames.  After the user studies a FreezeFrame , clicking the screen resumes playback until it reaches the next FreezeFrame .  Now at each FreezeFrame explanatory text appears.  What I need is a button that will toggle this text on and off.  Each time the button is clicked it should also toggle itself between a Hide Text Button, which will turn it off, and a Text Button, which turns it back on.  Note, these buttons need to work globally.  If say the Text Button is clicked in one FreezeFrame , the text should remain on unless the Hide Text Button is clicked in a subsequent FreezeFrame.

 

Here’s how I set up my old ActionScript.  I would be happy to show how I revised it for JavaScript, but that isn’t working so I’m not sure how helpful that would be.  In the first frame of the file I define a variable I call togText as so.

 

var togTEXT:Boolean = true;

 

When a FreezeFrame is reached, the Hide Text Button is named BTN_hFrameName; the Text Button is BTN_tFrameName.  BTN_tFrameName is placed in the layer above BTN_hFrameName.  The text is placed in a movie clip called TX_FrameName.  The following code is also written at the FreezeFrame.

 

TX_FrameName.visible = togTEXT;

BTN_tFrameName.visible = togTEXT;

BTN_hFrameName.visible = !togTEXT;

 

BTN_tFrameName.addEventListener(MouseEvent.CLICK, tFrameName);  

function tFrameName(event:MouseEvent):void

{              togTEXT = !togTEXT;

               TX_FrameName.visible = togTEXT;

               BTN_tFrameName.visible = togTEXT;

               BTN_hFrameName.visible = !togTEXT;

}

 

BTN_hFrameName.addEventListener(MouseEvent.CLICK, hFrameName);  

function hFrameName(event:MouseEvent):void

{              togTEXT = !togTEXT;

               TX_FrameName.visible = togTEXT;

               BTN_tFrameName.visible = togTEXT;

               BTN_hFrameName.visible = !togTEXT;

}

 

So that’s it.  If anyone can tell me how to translate this ActionScript to JavaScript, or if anyone could give totally different JavaScript that will do what I need, I would greatly appreciate it.

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    May 15, 2022

    i assume the actual text in each freezeframe varies.  ie, it's not the same text in every freezeframe.

     

    because if your setup, i assume you do this by changing frames in tx_framename.  is that correct?

     

    if so, you should be able to just have code* toggling the visibility in the initial frame, and NOT at every freezeframe using the same buttons and text movieclip throughout your timeline.  you would just need code in each freezeframe to change the tx_framename frame.

     

    *

    var logTEXT =  false;  // or true depending on what you want initially

    this.TX_FrameName.visible = logTEXT

    this.BTN_tFrameName.visible = togTEXT;

    this.BTN_hFrameName.visible = !togTEXT;

     

    BTN_tFrameName.addEventListener("click", tFrameName,bind(this));  

    function tFrameName()

    {              togTEXT = !togTEXT;

                   this.TX_FrameName.visible = togTEXT;

                   this.BTN_tFrameName.visible = togTEXT;

                   this.BTN_hFrameName.visible = !togTEXT;

    }

     

    BTN_hFrameName.addEventListener("click", hFrameName.bind(this));  

    function hFrameName()

    {              togTEXT = !togTEXT;

                   this.TX_FrameName.visible = togTEXT;

                   this.BTN_tFrameName.visible = togTEXT;

                   this.BTN_hFrameName.visible = !togTEXT;

    }

    BioME
    BioMEAuthor
    Known Participant
    May 16, 2022

    Thank you so much for your prompt response kglad; your support is always appreciated. 

     

    I copied your code into the first frame of a file.  To avoid going down a rabbit hole I need to let you know there was an apparent typo in the first two lines of your code that I corrected. I changed logTEXT to togTEXT.  Also, in the first FreezeFrame I made sure the Text Button was named BTN_tFrameName, the Hide Text button was named BTN_hFrameName, the Text was TX_FrameName.  However, when I opened the HTML and clicked the Hide Text Button it resumed the playback without showing the text. 

     

    To experiment I tried changing the togTEXT variable from false to true.   The Text and the Text Button both appeared instead of the Hide Text Button, so that part of the code is working.  However, as before when I clicked the button it just resumed playback without toggling the text.

     

    To debug the problem, I believe we need to be sure we’re communicating. 

     

    Yes, the text in each freezeframe does vary. 

     

    I’m not sure what you meant by “changing frames in tx_framename,” or “you would just need code in each freezeframe to change the tx_framename frame.”

     

    What I have been doing is changing FrameName to the name of each FreezeFrame.  For instance, the name of the first FreezeFrame in the file I’ve been experimenting with is “Heart.”  So, I would perform a find and replace to change the phrase FrameName to Heart throughout the code for that FreezeFrame.  I would also change the name of the Text Button from BTN_tFrameName to BTN_tHeart, the Hide Text Button from BTN_hFrameName to BTN_hHeart, and TX_FrameName to TX_Heart.  Is that what you envisioned?

     

    Understand, I’m really excited by the possibility of using global code in the first frame of the file instead of customizing the code and symbol names in each FreezeFrame, throughout a file.  I tried that with ActionScript and couldn’t get it to work, but if JavaScript will allow it, that would save me a tremendous amount of time.

     

    Any ideas for what I should try now?

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    May 16, 2022

    only the first frame in the layer(s) that contain your buttons and your text movieclip should be a keyframe.  no others.  do you have that?

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