Toggling the visibility of text

[BioME]

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.

[kglad]

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]

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]

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?

[BioME]

No I wasn't so I just tried it.  Unfortunately, no luck. 

What I did was delete every layer with buttons and text.  I also deleted every layer with code except the one with the this.stop(); commands.  I then copied your code, the buttons and text into the first frame of the file.  This was the only keyframe in the layer and it extended to the end of the timeline. 

When I opened the HTML and clicked the button, I got the same results.  It just resumed playback without toggling the text.

[kglad]

working sample, text (kglad.com)

fla, http://www.kglad.com/Files/forums/t/text.fla

[BioME]

Thanks for your example.  I downloaded and tested it, and it is working.  The JavaScript is beyond me and I'll have to research the commands before I can understand it.  I will be able to do so tomorrow afternoon.  It's also not clear to me how to incorporate it into my animations, but I need to understand the code first.  I'm sure I'll have questions.

You know I'm wondering if it would be easier for you if I attached an example of one of my animated lessons.  That might make it easier for you to understand how the code needs to be incorporated.  If you have time to look at an example please let me know and I'll attach the FLA.

[kglad]

i generally don't download and fix files unless i'm hired.

[BioME]

Very well, I've been studying the code and should sent and should have questions later this afternoon.   

[kglad]

ok.

[BioME]

OK, I’ve studied/researched the code you sent and I think I have a working idea how it works.  I don’t understand all of the syntax but I don’t think it’s your job to teach me basic JavaScript, so I won’t ask you to define everything.  However, there is one command that I can’t make sense of, if(!this.alreadyExecuted).  As a conditional statement, this is saying if the condition in parentheses is valid, then execute the following block in brackets.  The condition is this.alreadyExecuted.  The third line of the block, this.alreadyExecuted = true;, defines alreadyExecuted as true.  The ! symbols typically means not.  So, this statement seems to be saying if alreadyExecuted is false then execute the block.  But that doesn’t make sense and I’m sure I’m misinterpreting something.  If you could please explain I would greatly appreciate it.

I also have to let you know there seems to be a funny bug with the file you sent.  When I downloaded and published the file, the test movie worked fine.  However, it didn’t when I closed the test and opened the HTML from File Explorer.  The Next and HideText movie clips were both dead; nothing happened when I clicked either.

Tonight, I will try to incorporate the code into one of my animated lessons, although I foresee problems.  I’ll let you know how it goes.

[kglad]

you correctly described the if(!this.alreadyExecuted) code. it's purpose is to prevent adding listeners more than once. eg, if the frame replays you don't want to add listeners again.

testing locally probably caused a security sandbox error.  (you can check the developers console to confirm.)

either test in animate or upload to a server and test.

[BioME]

Thanks for the explanation kglad.

I’ve spent the last few days experimenting with the code you sent and I succeeded in incorporating it into one of my animated lessons.  However, there’s one serious problem I haven’t been able to resolve.  When I click the next button to resume playback to the next freezeframe, the text remains visible until the that freezeframe is reached.  What should happen is the text should vanish when the playback leaves the first freezeframe.  Text for the next freezeframe should appear when the it's reached.  It’s difficult to explain how bush league this looks, but the problem is that the text covers the animation that plays between the freezeframes, thereby distracting from the display.  So, if you can explain how I can resolve this problem I would be soooooo grateful.

I can’t overstate how much I appreciate your help.

[kglad]

the easiest solution would be to removed empty frames between your freeze frames.  but if you wanted to fade text out and/or in, that can be done too.

[BioME]

Thanks for the suggestion kglad.  Unfortunately no luck.  I removed frames between the freezeframes in the text_mc movie clip, but there was no affect.  The text still doesn't vanish until the next freezeframe is reach.

You there are occasions where I fade the text out as well as move the text between two keyframes.  Not often, but there is an instance of moving text in the sample animation I've been working with.  Getting the text to vanish as soon as the playback leaves a freezeframe is priority, but if you could explain how to get it to fade out and move that would be great.

[kglad]

if there are no frames between your freezeframes, text changes will be immediate.

[BioME]

Are you talking about in the text_mc movie clip, or in the main timeline?  As I explained eliminating gaps between the FreezeFrames in text_mc made no difference.  If you're talking about the main timeline then yes eliminating gaps would make text changes immediate, but it would also eleminate the animated sequences between the FreezeFrames.  These are animated lessons so those sequences are indispensible.  If you're thinking of something else please clarify.  

[kglad]

the main timeline.  the frames between the freezeframes in text_mc are irrelevant because of the gotoAndStop statements.

if you can't eliminate those frames for other reasons, you'll need to change the entire approach to the problem.

for example, don't use a text_mc.  use one textfield (eg, tf) on the main timeline.  when a keyframe is entered assign its text.  when a button is clicked clear the text in the textfield.

[BioME]

Well I absolutely cannot eliminate sequences between FreezeFrames so I will need a different approach.  However, I don't have the expertise to understand what you described.  What do you mean by using one textfield on the main timeline? How do I assign its text when a keyframe is entered, and how do I clear the text when I leave the FreezeFrame?  Moreover the formatting and positioning of the text varies from FreezeFrame to FreezeFrame.  Will I still be able to do that with this method?  

I also still don't understand why the original method doesn't work.  If we could debug that it would solve all the problems.  I've experimented and the problem seems that the original var togText =  false; isn't working.  Is the problem that you can't assign a boolean to a variable with Canvas?

[kglad]

you assign text by using:

this.tf.text = "text for freezeframe 1";

this.tf.text = "";  // will remove text from the textfield

[BioME]

OK, that gives me something to experiment with.  I'll let you know how it goes.  What about positioning and formatting?  How can I customize that for each freezeframe?

[kglad]

create a new layer

in the first frame that you want to display text add a dynamic textfield and assign an instance name, eg tf

add other keyframes where you want to change the properties of tf

plan ahead and do this as described.  if you start futzing around (eg, by removing and then readding or recreating tf), you can cause problems that will be difficult to debug.

[BioME]

Well I finally worked it out, but I'm afraid it wasn't with any of the code you recommended.  I was struggling with the this.tf.text = "text for freezeframe 1"; command when I got an idea.  Instead of declaring a boolean variable like I started with, what if I leapfroged the visibility of the Text Toggle Button.  In case your interested here's the code I came up with.  I don't consider this very eligant, but it works and I can't devote anymore time to this, so I'm going with it.

_this.BTN_tCurrentFrame.visible=_this.BTN_tPreviousFrame.visible;
_this.TX_CurrentFrame.visible=!_this.BTN_tPreviousFrame.visible;

_this.BTN_tCurrentFrame.on('click', function()
{ _this.BTN_tCurrentFrame.visible = !_this.BTN_tCurrentFrame.visible;
_this.TX_CurrentFrame.visible = !_this.TX_CurrentFrame.visible;
event.e.stopPropagation();
});

_this.BTN_hCurrentFrame.on('click', function()
{ _this.BTN_tCurrentFrame.visible = !_this.BTN_tCurrentFrame.visible;
_this.TX_CurrentFrame.visible = !_this.TX_CurrentFrame.visible;
event.e.stopPropagation();
});

[kglad]

excellent (and congrats!)