How to embed QSP-slides in your course?

Intro

Recently I posted this article about ‘Destination/Source Theme’  I warned for using the switch button to the Destination theme after insertion of a QSP slide.  Logically you expect now an alternative workflow?  A general scheme for both responsive and non-responsive projects is however not possible. Reason: the present QSPs have a beautiful design but the technical setup is very different, no rules. 

I will try to offer some tips here to make it possible to blend the inserted QSP-slides into your project design which is probably based on a custom theme. Due to the big variation in technical setup, this first post will be limited to:

  • non-responsive projects
  • Quick Start projects which use master slides in a consistent way

The second condition excludes the project Wired which only uses the Blank master slide.

In a future post I will try to offer similar tips for responsive (Fluid Boxes) QSP-projects

Start situation

The workflow with its screenshots is based on insertion of one QSP slide from the project Aspire.  The receiving project is the DemoProject I mentioned in the previous blog post. Both projects have rather different color palettes:

The DemoProject uses three fonts: Termina, Filson Soft and Trebuchet (rarely), whereas the Aspire project only uses Tahoma.

The inserted slide was the Exit slide of the Aspire project was inserted in the DemoProject as you can see in the screenshot. It really needs branding. If you want to follow along, you can add that Exit slide to one of your projects.

Branding workflow step-by-step

Step 1: Master slide

Open the Master slide panel with the inserted Aspire slide ‘Exit Layout’ selected. You will see all the master slides of the Aspire project, but the used master slide is automatically selected. You see that it is labeled ‘Welcome w/o Sub + CONTENT’. Have a close look at that master slide and its components on the Timeline:

You see from bottom to top: an image placeholder,  a Title (shape) placeholder, a caption placeholder and another shape placeholder meant for a shape button.  Sorry, but the styles used in the master slide are mostly overridden styles, and replaced by other styles on the slide itself. Just for your information, don’t bother about it.

Step 2 Copy master slide

You will copy and paste that master slide to the original course theme (DemoProject) using these steps:

  • Use right-click menu (or Edit menu) to copy the selected Aspire master slide described above.
  • Return to the Filmstrip
  • Select any slide from the original project
  • Open the master slide panel again, it will refresh and show the master slides of your project (here the DemoProject).
  • Paste the copied master slide from the Aspire master slide panel.

The result in this case is visible on this part of the master slide panel. The new master slide is still selected, and kept its original name. This was possible because that name didn’t exist in the DemoProject theme (more about importance of master slide names in next blog . If the same name exists in the receiving (Destination) project, you need to rename the master slide before the copy/paste

Of course the object styles are not what you want. In the screenshot above, the Title shape placeholder is selected, and you see that the style was overridden (+ sign). If that had not been the case, the Default Title Smart Shape style of the DemoProject would have been applied automatically. Another example of the lack of rules for the QSPs

Step 3: Replace styles

Still on the master slides, apply styles for the original project DemoProject theme to the objects. In this case:

  • There is  a Default Title Smartshape Style in the DemoProject theme, needed only to use ‘Reset Style’ for the title. Because the style was centered, changed it to left-aligned but the font (Termina) and the color were applied automatically.
    You see a + sign, because after resetting the style I added the alignment change, didn’t create a new style for this alignment change. It will only be used on the inserted slide, all other titles in the original project are centered.
  • Same workflow is used for the caption, since a Default Caption style exists (Filson Pro and light color)
  • For the shape button placeholder, another shape button style was chosen from the DemoProject theme.

Step 4: Apply Master slide

Open the Filmstrip, and select the inserted Aspire slide. In the Properties panel choose the theme DemoProject and the list with master slides will appear. Choose the ‘Welcome w:o sub…..’ master slide and you should get this result:

You see some remaining problems: the placeholder for the shape button was not used in the QSP, probably deleted and replaced by another button. Either you edit that original button or you keep the placeholder button.

The background has of course not changed. You may need a last step:

Step 5: Final touch

Two more tasks need to be done to have a fully branded slide fitting in your project design:

  1. Replace the image. Changing the Hue with the Edit Image features could work in some situations, but not for an image with a blue sky. Of course, editing in Photoshop while masking the sky is possible.

  2. Replace the blueish gradient at the bottom. It is not a gradient created in Captivate but another image. However it could be possible to use Edit Image, and move the Hue slider for this gradient.

Conclusion?

This workflow may seem cumbersome, but it is safe contrary to the switch to Destination theme.  It is only one example slide, of course. Just hoping you would try this out. It may even lead to improving practice for your custom themes.

Tips for using Quick Start Projects (11.5)

Intro

The most recent version, 11.5.0.476 includes the new Assets Panel which I presented in this post.

You are able to use Quick Start projects, or slides taken from those projects to avoid having to design and to work out interactions for your project from scratch. Those projects/slides are available in a responsive (Fluid Boxes) and non-responsive version. I tested it out for a tutorial which you can watch using this link (it is a responsive fluid boxes project):

Button Types

If this topic, also related with 11.5, seems interesting, I will post a more detailed description in the near future. But today you'll get some tips from what I learned creating this tutorial.

QSP tips

You can use a Quick Start Project in two ways:
  1. Open the project, and delete or hide the slides you don’t want to use in your course.
  2. Open a non-responsive or a Fluid boxes project, and insert slides from the Assets panel.

I used the second approach for the tutorial, for a logical reason: I didn’t use even half of the provided slides in the Aspire project. Project has only 17 slides, including a lot of duplicate instances of slides. I used these slides from Aspire:

  • Welcome layout
  • Timeline Interaction 02
  • Main Menu layout 02
  • Subtopic Header layout (used 6 instances)
  • Tab Interaction 01 (used 3 instances)
  • Related Content Interaction (used 3 instances)
  • 3 Column layout
  • Exit Layout

Tip 1 Duplicate slides

If you need the same slide multiple times do NOT insert it multiple times in your project, because that will corrupt the Advanced actions (most slides use them). To avoid this you need to follow this workflow:
  • Insert one instance of the needed slide
  • Go into the Filmstrip, slide will be active (surrounded by a blue rectangle)
  • Duplicate that slide, either with the right-click menu or with the universal shortcut for duplicate: CTRL-D.
  • Move the slide by dragging in the filmstrip to the wanted location.

You can repeat this workflow as many times as needed. Due to Captivate’s smart labeling, the advanced actions will not corrupt in most situations. Why not always? See next tip.

Tip 2: Check Navigation commands

In a slide like the Main Menu Layout, the topic buttons point to another slides in the total project. On insertion of that slide only, without the target slides, all commands will revert to the default navigation command ‘Go to Next Slide’. You have to replace it by ‘Jump to….’ while indicating the correct target slide (in the project the slides of the Subheader Topic layout). This will prove easier if you use the next tip:

Tip 3: Rename slides

Labeling is always a good practice, but for sure in this type of project. Multiple instances of the same layout slide will have the same name (and are very long as well). Taking the time to give them a custom name will save time when you need to find a slide. Moreover, if you want to use the Table of Content, the names will be meaningful.

Tip 4: Replace image

Switching to another image is mostly very easy:
  1. Select the image.
  2. Click on its name in the Properties panel
  3. Choose another image from the Library dropdown list, or use the Import button to find it on your system.


However, on many slides an image is used as Fill for a Fluid Box. Look at the Subtopic Header slides (there are 6 in the example): having the image as fill allows to add an image on top of the fluid box. Normally you cannot stack two images, this is a useful solution for that limitations.

If you want to replace the fill for a Fluid box, you need to select that fluid box, you cannot just click the image. After selecting the FB you see that the fill is set to Image, click the second Fill button, use the Browse icon to find an image to replace the image. Be careful to check the Position properties if the new image doesn’t have exactly the same size as the original one.

Tip 5 Multistate objects

The layout slides use a lot of multistate objects.  That is the case for all the Click to Reveal slides (labeled ‘Tab Interaction’ and ‘Related Content Interaction) and probably for many other interactions. You really will need to learn how to use them. Click the State view button in the Properties panel, to open the Object State panel.

More questions?

You may have seen that I have edited some slides quite a lot. This post has only simple tips, not the full explanation of all changes. If you want to know more, post a comment to this blog.

4 Tips - Assets Panel

Intro

Do not expect a complete overview of the Assets Panel in this article, may be later. The user interface is rather simple, intuitive. Opening  the panel is possible  with the big button Assets in the right part of the Big Button Bar. For he expert UI this will be the only button in the right part, fo the newbie UI the Assets button will be with the Properties and Library button. Opening is also possible using the Slides button,  option ‘Asset Library…’ on the left side of the bar.

At this moment the stored  assets are restricted to those available with Captivate (under Assets tab  or to downloaded assets (under Downloads tab). You cannot add custom assets fto the panel. For those custom assets remember that you can use external libraries.

The center tab – Discover – has two choices,  ‘Templates’ (confusing term, not the cptl template files) with a submenu or ‘Characters’. Both link to the site of the eLearning Brothers. Once downloaded, they will appear in the Downloads tab.

Tip 1: Projects/Slides

This is the first option under the Assets tab, opening by default with Slides selected. It allows you to choose individual slides for insertion in an existing project after the active slide. Under Projects you will see 6 Quick Start Projects (QSP), first of them is the Branching file. That file is meant for developers disliking variables and actions. It is based on the last QSP, labeled ‘Aspire’. 

All projects and slides are available in two formats:
  1. Non-responsive project (Blank project in Welcome screen)
  2. Responsive project with Fluid Boxes (none available for Breakpoints)

If you insert a slide in an existing project created in one of those types, the inserted slide will automatically be of the same type. A master slide may be added, and object styles but I’ll leave more details for another blog post about using QSP's

However, some users asked me "how do you open a full QSP in the wanted type"? There is no choice available after selecting a project.

Workaround which works for me: open first a project in the wanted type, either a blank project or a responsive project. Anyway you need an open project to launch the Assets panel. Selecting a QSP to open as new project, will open it in the same type as the already opened project. You can then delete the first project..

Tip 2: Characters

Contrary to previous versions, the characters packaged with Captivate are only installed on your system as thumbnails. You can find them in the Content folder under the eLearning assets. Each character has a folder bearing a number as name, and a subfolder Children, where you find all the thumbnails. When you insert a character in a project, the image is downloaded and stored in another subfolder with the name of the character (in this screenshot David), either in the High or the Low subsubfolder, depending on the chosen quality (Normal or High resolution):

Screenshot is taken on a Windows system. If you download a extra character from the eLB site, it will be stored under Characters_11_5, not in the Content folder.

It is still not possible to download more than one or all characters from a set at once (please log a feature request). However, if you like the Illustrated category, here is a tip. Characters in that category are based on one drawing file, which you can download as well. You have some choices for the format, I prefer AI (Illustrator). If you are comfortable with that vector image application, you can extract all characters from that file and export them not only as PNG, but also in other formats inclucing SVG (smaller file size and vector based, crisp look whatever the resolution - interesting for responsive projects). Those drawing files are always labeled ‘Name: Illustrated work files’. You can also use that file as reference file. After download it will be stored in the subfolder ‘Others’ under eLearning assets, (not in Content, nor Characters).

Tip 3: Icons

The files in this assets category are SVG’s. Once inserted you can convert them to a button. Editing the colors is very easy as I explained in a previous post.

Those icons are stored in a subfolder under the Contents folder in eLearning assets. When screening that folder you'll see that the 'icons' are in JPEG format. However when you insert an icon, the SVG is created in the same folder as the original JPEG image.

Tip 4: Buttons

I am finalizing another blog about the 6 button types available in Captivate 11.5, including advantages and disadvantages of each type. Which type of buttons do you insert from the Assets panel? That was bit of a mystery at first. When you insert a button from this asset category, it is a PNG image (bitmap) with the option ‘Use as button’ checked off. The three InBuilt states (Normal, Rollover, Down) which are normally included in a button object style, are identical. You have of course the possibility to edit the image for the other states once the button is inserted. However I was bit curious when watching the name of the image. Look at this screenshot of a button:

That name ‘Deep-download_up.png’ reminded me of the name convention needed for an (old) image button. For image buttons you need to create three images in the same size, with an identical name followed by _up (for normal state), _over for rollover state and _down  for the down state. Looking in the Buttons folder (under already mentioned Content folder) taught me that all the buttons had a similar name structure ending on _up.  The folder has is similar to the Characters and Icons subfolders: numbers as folder names. Each folder contains only one image file for the ‘up’ state.

Of course you can edit the states in the project, using the Object state panel and copy/paste the button if you need more instances.  But you will not be able to reuse that button with the edited states in a future project.  I tried out a workflow based on my CP-intuition:

  • I duplicated the _up file in the Content\Buttons fokler for the button 5751 ‘Bubbly_downloads_up'
  • renamed the duplicates to Bubbly_downloads_over and Bubbly_downloads_down,
  • edited the duplicates in Photoshop, watch the result in this screenshot:

Success! When inserting the 'Bubbly....' button in a project, it had three InBuilt states. Not only when inserting in the same project, but also in other projects. You cannot have an object style for Images used as buttons, as is possible for shape buttons, text buttons, image buttons and transparent buttons. However this workflow opens an alternative for re-usability  (one domain where Captivate excels over other authoring tools). One drawback: Assets are only edited on the used device, they are not in the cloud.

More about buttons in a future blog as promised.

Version 11.5 Released!

Intro

If you are a fan of my blog, you know that usually I will not talk about a new release on the day it is released (although I have explored it in a beta test group). This time however I am so excited about this intermediate release. It has 'Voor elk wat wils' (interesting features for each developer whatever her/his level) to use a Flemish proverb. Do not expect a full review here, want to talk only about some of my preferred features which do appeal to my level of expertise. My apologies if you don't like that 'egocentric' approach. Be sure I will write more in the future, need some time to explore in-depth. As in the past, I may overlook some little gems which I couldn't dig out yet, will continue the search. You'll find three small gems at the end.

SVG as Button

It has been possible to fill a shape with an image since version 6. Converting the shape to a button was a much easier way to create nice buttons than the older workflow with Image buttons where you needed a graphics application (and had to create several images) Shape buttons also can have custom states besides the InBuilt states which they share with the old button types (Normal, Rolllover, Down, Visitedà. I never use those legacy types anymore, except for Quiz/Score slides where they cannot be used as embedded buttons.

However, those shape buttons have two lmitations:

  • You can only fill with Bitmap images, the much sleeker vector images like SVG were not possible.
  • The clickable area of the shape button is the bounding box, not the image itself.

WIth 11.5 it is possible to use SVG's directly as buttons without the need for a shape. And you can limit the clickable area to the image itself! This is a big step forward. File size of SVG's tends to be small compared with bitmap images, and moreover they are excellent for responsive project due to its vector nature.  The SVG has all the features of a shape button: can be used on master slides, can be timed for the rest of the project (not in Fluid Boxes), can be added to quiz and score slides as extra button. A setup with 3 buttons like this screenshot was not possible in previous versions, because the bounding boxes are overlapping: The screenshot may look blurry (has been converted to bitmap here) but the original SVG's in Captivate are really crisp. Size of the SVG: about 75Kb.

In the default setup, the clickable area is still the bounding box, you have to uncheck that option:

Bitmap images as Buttons

Similar to SVG's, they can now directly be used as button, no need to fill a shape button. Same for the clickable area: can be limited to the image. Depending on the type of images this extends the functionality which I explained in the first point. I dream of custom hotspot questions with partial scoring as described in this older post. Watch out for use cases in future blog posts. Not only are you now rid of the cumbersome workflow which I described here, but if you use a bitmap format which supports transparency (GIF, PNG24) you can uncheck the same feature to reduce the clickable area as for SVG'S.

Themes 

Themes have now a real Properties panel, which can access from the dialog box under the big button Themes. It is the only way, the panel is not to be found in the Windows menu, nor under the Themes menu (which still has to be used to save a customized theme). 
For sure will write more about this in the future, Themes is one of the underrated features, which I like to promote. I am really excited about the easy way to replace fonts (in ALL object stylesà. You can see in the screenshot that I replaced the original fonts in the Windswept theme by three different fonts (all Typekit). It is a smooth process: all object styles which have text related features will be updated for you. That can be a big time saver! I will have to edit this blog, where I complained about the cumbersome workflow to replace one font in a theme.
Of course, you need to avoid any overriding of object styles, and the danger that this will happen with the new copy/paste appearance feature is very real. I will talk about that new feature in another blog post, which will have some warning.
It is now possible to have slides with different themes in the same project, which will then lead to more than one Theme Colors palettes as well. I need some more exploration time to prepare a more complete overview of all the changes related to themes. Please, be patient.

Interactive video

One of the new features in the first release of CP2019 which I really like a lot. Not so much changes after this patch. It is interesting that you now are not only limited to videos on your system or from YouTube, but that you can also use Vimeo videos.

Another improvement is the possibility to insert a sequence of overlay slides (content or KC slides) on a frame of the video. 

VR project/360 slides

Several enhancements:

  • To the actions which can be triggered by hotspots the much asked for 'Play Video' was added.
  • The hotspots are now very customisable, black and white (minstrels?) are over and out: edit the colors as much as you want.
    Double click on the hotspot when inserted, select one of the paths and choose a color.
  • If you trigger Text, you will like the new formatting possibilities. Just a pity that Typekit fonts cannot be used....
  • No need to guess a duration for the popups anymore. Default setting is now a close button in the top right corner as you can see in the previous screenshot.

Small gems

Theme colors: in the screenshot of the new Themes panel inserted earlier, you see that the main theme colors are now named 'Color1.... Color10. This fits better the use of the colors, because in previous versions there was a Title color, which was not always used for titles, a Subtitle colors which was rarely used for subtitles etc...

Drag&Drop:  when selecting Infinite attempts in the Actions tab, the 'Failure action' will disappear, very logical since it will never happen in that situation. Regret however that the wording 'Failure' is still not replace by 'Last Attempt'. The action doesn't occur On Failure, but only at the last attempt, same as for quiz slides.

Preview menu: for non-responsive projects, the option 'Preview HTML5 in Browser (F11)' is now the first option which is great! The death of Flash player for all browsers will soon be a fact, every developer has to switch to HTML5 output. The other Preview methods are all still based on a temporary SWF output (except Play Slide, which is NOT a preview method). To check the future output only the mentioned Preview HTML5 in Browser should be used.

...sure will find more of those.

More...

This was not a complete overview at all. As I explained, need more time for features like the new Assets panel, use of Quick Start Projects, Branching setup, multiple themes, copy/paste appearance etc...