Last weeks lack of posts were primarily due a project on teaching WebAssist users how they can customizing pure CSS layouts generated using SiteAssist 3.0. In a couple of the segments of this tutorial series I really wanted learners to have the opportunity to grab the customized CSS code that we had used to customize the web page layouts but how to do that in Adobe Captivate? Well the simple answer is that in Adobe Captivate alone you just cannot do it the solution was create these in Flash 8 using the Text Area component and add them to my project file.
This is something that I had experimented with in Captivate 1.0 and although I could insert the published text area component (SWF) as an animation when I tried and preview the text area just would not show. Publishing didn’t help that much either. In a published file although the text in the text area box was there, the learner couldn’t see it and asking them to select what appeared to be invisible text and pasting this into a text file just didn’t sit right with me.
In Adobe Captivate 2, the text area component is handled much better, the text area and the text is rendered correctly either when you preview and publish as a SWF or you publish to Adobe Connect Professional.
One thing that you have to bear in mind is that when you publish locally you must include the published text area SWF. Internally I believe that Captivate references the published component the same way the program does with Flash video files. Something I found out when I sent my test Captivate 2 file to my colleague and good friend Joseph Lowery, only to find that Joe could not see the text area / code box I had inserted into my Captivate project file.
Below are two sample files that show this technique in practice. Although the ActionScript code included in the sample Flash file works, I have since found a better way to handle CSS in Flash, which I will make available once I have had the chance to do some more testing.