Embed Software Simulations (Knockout slide)

Intro

Over 10 years ago I posted a blog 'Create/Use a Knockout Master slide'. At that moment SWF was the only way to publish a Captivate project, and in versions 5 and 5.5 Themes were not ‘grown up’ yet to their present power. Meanwhile I have pointed many users to that old article, and many claimed it was still useful. However time to clarify the slight differences and offer updated tips., Of course I will use a HTML example. 

Example Tutorial: 'Shared actions as Template'

This is a Captivate tutorial explaining how you can use a Shared action to create variables and as template for advanced actions. There are two versions. Here is a screenshot showing the difference in sim slides between version 1 (Full-size) and 2 (Embedded)

Version 1: Default software simulation

Personally I never use a software simulation in Demo mode, because it is better replaced by a Video Demo for its quality and advanced editor. I created a Training simulation, meant to learn about this Captivate topic. The UI of Captivate is rather complicated, hence my choice of a resolution 1600x900px. The ratio is important, here the common 16:9. In the limited space here, I don't want to embed the simulation because that would be almost useless. I published it as a HTML rescalable project. You can watch it using this link:

Full-size tutorial

In this first version, instructions are given using Audio. The captured Backgrounds (see Library) are filling the slides. Although this tutorial is rescalable, you will realize that using this on the limited space of a smartphone with a phone browser is not appropriate. It may be used on tablets (no incompaté:ible features), but the preferred devices are laptop/desktop. 

Version 2: Embedded in a content slide

I used the workflow explained below to create a second version, where the software sim slides are rescaled and embedded in content slides (1280x720px). On those slides there is space for a logo and more. The narration was replaced by text instrutions on the same slide as the software sim. Published project is also rescalable HTML. Even a tablet will probably be impractial in this version. Use this link:

Embedded tutorial


Setup for Embedded sim slides

For this example the simulation slides need to be embedded in a project  with a resolution of 1280×720 pixels. The captured slides were created with a resolution of 1600x900pixels, which is larger than the final resolution.  

To embed the sim slides, they need to be rescaled. If the original simulation slides have the correct resolution ready for embedding, you can skip Step 0.

Step 0 in Captivate (only if captured resolution is not correct)

Rescaling the software simulation to 2/3, which leads to a resolution of 1066x600px. You choose the resolution needed for your project, but keep 'Maintain Aspect Ratio' and 'Rescale all objects'.  Those are the default settings.

Step 1 (in Photoshop or other app) – create the Knockout image

In Photoshop I created images on two layers: the first one (FullTexture' will be used for normal content slides, the second one is the 'Knockout' image which has a transparent part.  Size of the file is same as the end resolution (1280×720). I used one of the provided textures in Photoshop as Fill. In the second layer I deleted a rectangle of 1066x600px to create a ‘knockout’ part in which the sim slides would fit. You see the size of the margins (with texture) in the screenshot: to the left – a vertical bar with a width of 200pixels, to the right one with a width of 14px; at the top another with a height of 90 pixels and a the bottom a bar with a height of 30 pixels. 

You can import the Photoshop file, and will have both layers as PNG images. See 'Roundtripping with Photoshop'.
You can use another graphics application if you cannot use Photoshop. You could also create a freeform filled shape in Captivate, start with the hexagon, which has 6 points.

Step 2 (in Captivate) 

Some maths to start with:
  1. calculate the difference between the widths of the vertical bars:     200 – 14 = 186 pixels
  2. new width project will be 1066 + 186 = 1252 pixels
  3. calculate the difference between the heights of the horizontal bars:   90 – 30 = 60 pixels
  4. new height project will be 600+ 60 = 660 pixels
Rescale the project using these settings:
  • deselect ‘Maintain aspect ratio’ and introduce the new dimensions

  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Bottom Right; I choose this because the bottom bar and the right bar have the smallest dimension; you can choose another option if your smallest margins are elsewhere.

The result will look like this:


Step 3 (in Captivate)

 Rescale now to the final size, for this example to 1280x720 pixels, with settings:
  •  deselect ‘Maintain aspect ratio’ and introduce the final dimensions
  • under ‘New Size is Larger’, select ‘Keep project the same size and position project Center

After this rescale of the project it will look like this:

Step 4 (in Captivate): Master slides

 In the original blog post it was possible to create a master slide which is partially transparent, but that is no longer possible in the present versions with the Themes (new since Captivate 6).  Here is the master slide panel, where you see some master slides of the custom Theme 'Knockout' which I created:

I used the two imported PNGs from the Photoshop file to create:

  1. The Main master slide, where the FullTexture image is set as background image. You see the setup in the Properties panel:

  2. Based on that Main master slide, I created some content master slides. You see acouple of them in the master slide panel above (Title, Light). The Blank master slide always has to remain Blank, it is not using the Main master slide.
  3. The Knockout master slide. You cannot use the KnockoutTexture image as was done in the Main master slide, it needs to be a separate image as you can see in the Timeline and in the Properties panel. I added some objects and placeholders:

Step 5: Apply Knockout to simulation slides

Up till now the simulation slides used the Blank master slide. Change the master slide to the Knockout Master slide. It is very important that you do NOT check the option 'Master slide objects on top', because you'll lose the textured parts of the image.