Text caption rotation with variables

[Tara Aukerman]

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:

[TLCMediaDesign]

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

[Lilybiri]

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

[Tara Aukerman]

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]

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

[Lilybiri]

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.

[TLCMediaDesign · Accepted solution]

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.

[Paul Wilson CTDP]

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

[Tara Aukerman]

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]

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. 

[RodWard]

And I am definitely supporting Paul on this issue.

Not long ago I had another developer call me about a problem.  They were trying to use a graphic somewhat similar to the one in the screenshot on this thread where two hands were shown holding a tablet screen tilted at a slight angle.  The problem was that the edges of the tablet always looked slightly 'jagged' and/or blurry because it was not straight on the screen.  Their client was complaining about the appearance of this 'jagged edge'.

I just suggested they forget about using this graphic and instead rotate it back so that it was dead square with the edges of the Captivate stage.  Problem immediately resolved.

Honestly, at the resolutions we often have to work with in e-learning, rotating objects with straight edges, just for the sake of it, is often just going to make your life as a developer more difficult than it needs to be.

[Tara Aukerman]

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]

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]

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