Preview options
I opened a Captivate file from Pooja’s Mastering Adobe Captivate 2019 book chapter 5.
How do I know what type of file this is? If I see File > Save As Responsive is not grayed, then can I assume it is a Flash file? In Project > Information I see the resolution. Is that all I know about what type of file it is and how it was initially created?
Then, File > Save As Responsive.
Doesn’t this turn it into an HTML5 file since a responsive file can only be published in HTMl5?
Then, Toolbar > Preview
The only options available on the Preview menu are Live Preview on Devices, Project, Play Slide, From this Slide, Next 5 slides, and Preview in SCORM Cloud.
I do NOT see HTML5 in Browser as an option. Why?
How am I supposed to preview it in HTML5?
Publish > Publish for Devices is available. Is that my only option to see what I’m working on in HTML5 and not Flash?
I thought the default for a responsive project was breakpoint since the breakpoints show at the top of the Captivate window (HTML5 media queries) and then you add fluid boxes (CSS Flexboxes) within it? I figured if I did not add in a fluid box that it would behave as in breakpoint? (Is breakpoint going away, I remember seeing that it’s not mentioned much now.) But you are saying that when I create a responsive project that it is essentially one large fluid box and then I have the capability of adding additional fluid boxes within it? Or is it just a blank HTML page and then I add in fluid boxes?
Would you mind telling me in non-Adobe terms what is going on in HTML and CSS in a responsive Captivate project, after creating a new responsive project both before adding fluid boxes and after?
Concerning Preview, I’m still unclear. Forget about F12 and SWF, I’m not using them. Let’s talk about HTML5 output in Preview:
You say: “Whether it is with Fluid Boxes or with Breakpoints, the Publishing can ONLY be done to HTML5. For that reason all real Preview methods (Play Slide is not a preview) will lead to the creation of a temporary HTML5 output, which has of course to be opened IN Browser. It doesn’t matter what you choose: Project, From this slide… you ALWAYS get Preview HTML5 in Browser.”
Pooja’s book page 28 indicates that Project, From This Slide, and Next 5 Slides create Flash output, and doesn’t mention that if you are in Responsive mode that it creates an HTML5 output anyway (maybe because she hasn’t gotten to responsive projects yet). But your paragraph seems to be saying that Captivate is creating HTML5 and not SWF previews when in Responsive projects? I want to make sure I am understanding this properly before I write a note about this clarification in my book.
When I choose Preview > Next 5 slides it IS opening my browser, and it is using a player in an index.html file. So if it loads in my browser then can I assume that it is outputting HTML5, not SWF, always? I just want to make sure, since you can play SWF in the browser on an html page. Just want to make sure that’s not what it is doing.
When I created a SWF project and chose Preview > Next 5 Slides it did NOT open my browser, but the player looks similar to the one in my browser.
If I am creating any type of responsive project (breakpoint or fluid box) then Captivate will always output HTML5 in Preview except if I choose Play Slide? And will what I see be a GOOD indication that when I publish it will work as well as it did in the Preview? Or must I use Publish (not Preview) if I want to know that my HTML5 creation will work?
Does all Captivate output always play in a player, regardless of project type? Is there any type of project or scenario that doesn’t play in a player?
Lot of confusion….
The dropdown list in a Fluid Boxes project are NO breakpoints at all. Look at my blog where I compare Fluid Boxes with Breakpoints (was written for C2017).
Whether you have a fluid box on a slide in such a project depends on the master slide you are using. None of them has only one fluid box.. The Blank slide has no fluid box.
Maybe you understand now why I recommend to start with non-responsive projects? When Fluid Boxes appeared it took me about 3 months to feel comfortable with them, and I had 10 years of experiences with Captivate. Do not believe the marketing people when they tell that Captivate is so easy….
It’s just because HTML and CSS flexbox take a while to understand, Adobe isn’t doing anything unusual. All Adobe is doing is using the HTML5, CSS3 JSON, and Javascript; typical. ALL my projects will work on multiple devices. I have no use for a non-responsive project.
The hard part is the lack of documentation, which is why I want to figure it out and contribute to the community. Looks like I’ll have to continually publish and see what output I get in HTML to obtain answers instead of asking the community or looking in documentation.
I looked at the code behind the Preview. It absolutely is using break points – but it is for the outer container – nice. It’s using standard jQuery, HTML, CSS, and JSON and it’s loading a Captivate movie. It’s using some deprecated code, and has a note to the developer to take a look at the code – interesting for a release version. It also has some code for Geo, which I am not using, which I didn’t see in the published version. The Preview may be slower than Published, to be expected.
I then published the project and looked at the code in a real editor, not the browser. I initially chose Captivate over an excellent competitor because I liked Captivate’s HTML5 output better than the competitor. This time I looked at the code and found JSLint errors, and they are using innerHTML, but I think is used in a safe manner, without the chance of introducing malware through cross scripting injection, but I’m not positive. The code is pretty similar to what I saw in the Preview, so I’m expecting the Preview and Published versions will work the same, although not sure since I didn’t look very deep into the Preview.
I’m not seeing any reference to Flash in either the Preview or Published versions, so I think the Preview is only HTML, not Flash, so Preview should be predictive of how well the Published output performs.
Adobe, if you’re listening (or someone forward this to the right person). Please go back and improve your code rather than adding new features. I’m looking forward to the 2020 code which should only be HTML5 output, no Flash, and hopefully is much cleaner code. And clean up your interface and ease of use on common features used in creation, so you at least get closer to your competitor. New features aren’t half as important as no corrupted files, clean user interface, and quality code. Please please no new features, spend your time on the features you already have first.
Here’s a reference to innerHTML issues: https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/
If someone has the time to look and see if the innerHTML in Captivate published HTML5 code is a danger or not, I’d really like to know. Either way, they might want to consider something other than innerHTML.
You may have no need to non-responsive projects (although rescalable HTML5 is also an option to show a course on all devices), but it is easier to understand the functionalities and first in non-responsive projects. Misuderstanding like confusing breakpint views with fluid boxes can be coped with later.
If you want to reach the Adobe team, please log fearure requests or bug reports. I can only try to help you with Captivate’s features.
Thanks.
You could contact Pooja…. although I try to give explanations about missing Help documentation with Captivate, don’t have access to that book.
Two tips. if it is a responsive project, it will be with Fluid Boxes because the Adobe team never menitions Breakpoints workflow anymore. In the UI you should see to the top left of the stage a Layout Preview’ with drop down list starting with ‘Desktop’…. followed by the resolution of that desktop, a + sign and a play button which allows a preview with shrinking resolution. See attached picture.
Another way: under Preview you’ll not have Preview HTML5 in Browser, but will see Live Preview on Devices… All preview methods here (except Play Slide which is not a preview) use temporary HTML output, contrary to non-responsive projects.
Attachment 
You should ask Pooja for the book! It’s the best Captivate 2019 book published that I’ve found. I gave it 5 stars out of 5 on Amazon. Others only gave it 4 stars because it doesn’t go into advanced topics as well as some would like. Really, none of the books do, most far less than hers – you should write one!
FYI, Pressing F11 works and shows the whole course in HTML5 even though the Preview > HTML5 option is not available.
Pamela, that is true, but the reason is elsewhere. I suspect this to be a Fluid Boxes project, which means all Preview methods are HTML5 output, which is not the case for non-responsive projects where most Preview methods use SWF output except F11. You’ll see in a fluid boxes project that F12 will not be functional, which is Preview in Browser (SWF).
Can you confirm that the confusion was due to working in a Fluid Boxes project, please?
No, sorry, I don’t think there is confusion about Fluid Boxes or I don’t understand your question.
I am working in a Responsive Project and the Preview > HTML5 in Browser is missing, instead I must press F11 (not F12).
I’m not seeing anything indicating that I am using Fluid Boxes, and do not see the Fluid Box label above sections anywhere in the project.
Hope I answered your request for confirmation. Thank you for your support.
Trying again. If you created a Responsive project in CP2017 or CP2019 the default workflow will be Fluid Boxes, You need to switch to the other workflow Breakpoint views using Project menu.
Whether it is with Fluid Boxes or with Breakpoints, the Publishing can ONLY be done to HTML5. For that reason all real Preview methods (Play Slide is not a preview) will lead to the creation of a temporary HTML5 output, which has of course to be opened IN Browser. It doesn’t matter what you choose: Project, From this slide… you ALWATS get Preview HTML5 in Browser.
In a n on-responsive project (Blank in the Welcome screen) you are able to publish to SWF and/or HTML5. For such a project, all Preview methods except one do create a temporary SWF output, because that does’t beed a browser. Preive in Browser (F12) will open that SWF output in your default browser. The only Preview method which uses a temporary HTML5 output is Preview HTML5 in Browser (F11).
You cannot use F12 for any responsive project, since it can never be a SWF, and F12 is meant to view SWF output in Browser.
Hope this is now clear? Since you are still pretty new, I would recommend to leanr the basics for a non-responsive project before tackling a Fluid Boxes project which adds a level of complexity.
You must be logged in to post a comment.
