Skip to main content
Tara Aukerman
Tara Aukerman
Inspiring
March 9, 2017
Answered

Text caption rotation with variables

  • March 9, 2017
  • 5 replies
  • 1248 views

I want to display the contents of a text variable in a rotated text box. All formatting works on the dynamic content, but not the text box's rotation - the text comes through in the right font, size, etc., but at 0 degrees rotation instead of at a tilt like I want.

This is something that folks said was a problem in v 5/5.5 (Caption formatting problems when inserting variables ) - I'm in version 9 now. Is this still a known issue? If so, is there another way to do what I want to do?

Here's a simple example. The slide design:

vs. the rendered output:

This topic has been closed for replies.
Correct answer TLCMediaDesign

Maybe there is some confusion?

At this moment, you don't need JS to have a text caption with inserted variables rotated if your aim is HTML5. Captivate manages the rotation. Since the OP needs SWF output, it has to be done with another method. David, are you telling that JS cannot rotate the object for SWF output? I didn't test the JS myself, I just mentioned (too short probably) that it works perfectly for HTML5 output when rotating in Captivate.

For SWF output (Preview in Browser), I also tried to replace the caption by a shape, but in that case the variable value doesn't even show up. For a caption the value appears but horizontally, not rotated.


Lieve, no, you cannot rotate the object with JS. Initially I was under the impression that it was HTML5 so I just developed a solution. Never tried to rotate myself, so I wasn't aware that it would work natively in CP.

For swf you would need to create a widget or animation in Flash that could get the variable value and populate a dynamic text filed that is in Flash. The would need to be inserted above the image.

5 replies

Tara Aukerman
Tara AukermanAuthor
Inspiring
March 10, 2017

I appreciate your time and good advice.

I agree, boys, that it's not worth the effort to achieve this particular result. But there are other cases where rotation + dynamic text can be useful - like in radial/process diagram designs, etc. with user-created variables. The example I gave above was a very simple illustration of the issue for discussion's sake.

It's not something to spend hours on as a developer, but I still would like to know IF I can do this in a SWF on my own. (And if not, why not? Why does this work in HTML5 but not SWF output?)

Lilybiri
Lilybiri
Legend
March 10, 2017

Tara, at this moment there is a lot not working in SWF output anymore, I suspect that focus is more and more on HTML5 output. Try some complicated effects like motion paths combined with rescaling: works perfectly in HTML5 output, is a total mess in SWF output.

Tara Aukerman
Tara AukermanAuthor
Inspiring
March 10, 2017

*sigh* Thanks for the warning. For now (LMS) I'm stuck with SWF output.

Paul Wilson CTDP
Community Expert
Paul Wilson CTDPCommunity Expert
Community Expert
March 10, 2017

Instead of rotating the text caption or shape, why not rotate the character and her sign so that the text will be straight?

Paul Wilson, CTDP
Tara Aukerman
Tara AukermanAuthor
Inspiring
March 10, 2017

I could, but that wouldn't solve my issue for other similar uses. Might

have to go that route, but was hoping for folks here to work some magic.

Paul Wilson CTDP
Community Expert
Paul Wilson CTDPCommunity Expert
Community Expert
March 10, 2017

I agree that the angled text would make it seem as if the person is actually holding the placard with your text on it, however in the interest of rapid development I personally wouldn't spend too much time on something that doesn't directly contribute to the learning. 

Paul Wilson, CTDP
Tara Aukerman
Tara AukermanAuthor
Inspiring
March 9, 2017

Yes, Lilybiri -  thank you for the quick and great solution, TLCMediaDesign​ -- but I should have specified at the start. This works perfectly for HTML5 but I have to produce SWF output for this project. Is there something like this that will work for SWF?

TLCMediaDesign
TLCMediaDesign
Inspiring
March 10, 2017

You would need a widget of some sort if it can't be done in a swf.

Lilybiri
Lilybiri
Legend
March 10, 2017

Maybe there is some confusion?

At this moment, you don't need JS to have a text caption with inserted variables rotated if your aim is HTML5. Captivate manages the rotation. Since the OP needs SWF output, it has to be done with another method. David, are you telling that JS cannot rotate the object for SWF output? I didn't test the JS myself, I just mentioned (too short probably) that it works perfectly for HTML5 output when rotating in Captivate.

For SWF output (Preview in Browser), I also tried to replace the caption by a shape, but in that case the variable value doesn't even show up. For a caption the value appears but horizontally, not rotated.

Lilybiri
Lilybiri
Legend
March 9, 2017

I just double-checked: output will be rotated for HTML5 in Captivate  but not for SWF output. Are you aiming at SWF output?

TLCMediaDesign
TLCMediaDesign
Inspiring
March 9, 2017

Try executing this on slide enter of the slide. You will need to put the name of the text caption in the bolded name in the code below.

var elem = document.getElementById("Text_Caption_1");

elem.style.transform = "rotate( -2deg )";

elem.style.webkitTransform = "rotate(-2deg)";

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