Theme Enhancements (version 11.5)

Intro

The most recent update to CP2019, version 11.5.0.476 has several enhancements to Themes. The components of a theme, as I described in this post are still the same: theme colors palette, object styles, master slides, skin, Recording defaults. The most eye catching enhancement is the possibility to use multiple themes in one project, but there are several smaller edits which are less apparent. I will try to summarize them in this article.

Themes thumbnail dialog box

In older versions this dialog box had thumbnails of available themes. The active theme – which always had to be unique –  was highlighted and its name and resolution was visible. The default them was marked by a check mark.

This dialog box now has two parts, separated by a line. This screenshot, and the explanation here is valid for projects with one theme, not with multiple themes:

The top part shows the active theme, including the name and the resolution. For a responsive project that resolution is for the primary view (desktop).

The second part shows all available themes, and you can use the Browse hyperlink to look for more (custom) themes which may be stored on your system. Those themes show name and resolution when hovering over its thumbnail. The default theme is still recognizable at its check mark. In the screenshot it is the Blank theme (which I always set as default theme as start for a custom theme).

To apply another theme to the project, just select it from the second part, or browse to it, and accept the warning. All slides will be converted to the new theme, which will replace the old theme in the top part. This workflow has not changed, but you’ll see below that it is not the case anymore for projects with multiple themes.

Totally NEW is the button ‘Theme Properties’, replacing the former ‘Theme Colors’. You’ll read about this new panel in next point.

Themes Properties panel

Clicking the Theme Properties panel, will open this new panel, which shows you (for a one-theme project) the Fonts used in this theme (new) and the Color palette used:

Fonts may not be totally visible the panel cannot be resized (which is the pity). But clicking the Edit button at the bottom will show you all used fonts and colors, ready for editing.

A new functionality, which can save you many working hours: it is now very easy to replace one of the used fonts by another font. I always recommend to avoid using system fonts, use only websafe fonts or Adobe (formerly Typekit) fonts. That way you’ll be sure that all learners will see the font you had in mind, even when using dynamic text (includes variables) or creating a Fluid Boxes project. In older versions, replacing a font was very cumbersome, because you had to screen all object styles in the Object style manager which included characters, and change them one by one ( see Manage the Object Style Manager ). In this editing panel you cannot see however the Usage of the fonts (feature request) but it is already a big enhancement!

As I mentioned in my first review of version 11.5, the colors in the palette have now simple numbered names. The older names (Title, Subtitle, …) were confusing because they were rarely used for those objects. Editing colors in the color palette is the same as in previous versions.

Theme in Slide Properties

Less important for a course with only one theme, but the Slide Properties have an indicator of the used theme for that slide:

 Multi-theme projects

You can insert slides using another theme than the project theme. Once inserted you’ll see in the Filmstrip an icon, showing two options Use destination Theme or
Keep Source Theme (which is the default choice). Beware: this icon only appears when a slide is inserted. When you insert another slide, the icon will disappear, in favor of the last inserted slide.

Look at this screenshot, taken after insertion of a slide with the “Earth” Theme (one of the Quick Start Project themes). You see that the first slide no longer has the icon, it was in the theme ‘Aspire’ has no longer the icon. This project has now 3 used themes: DemoTheme (my custom theme), Aspire and Earth. What is now the destination theme for the last slide? It is not the original project theme, but the theme ‘Aspire’ of the previous slide. I find this bit confusing.

You can use one of these two workflows to change the theme of a slide (where you no longer have the icon to change to the destination theme):

  • Select the slide, use the Themes button and click the theme you want as destination theme for the slide. If there is no appropriate master slide, it will be added to the destination theme.
  • Select the slide, use the dropdown list in the Properties panel (see screenshot) and choose the destination theme. If there is no appropriate master slide, you will be invited to choose one of the existing master slides.

In the thumbnails under the big button Themes, all the used project themes appear in the top part. The ‘active’ theme shown is the one of the slide selected at that moment. If you select multiples slides, not all using the same theme, it is the theme of the first slide selected who will show its theme as active?

Clicking the Theme Properties panel will bring you to the properties of the active theme. If you want to see the Properties for another theme used in the project, do NOT click that theme in the top part of the thumbnails, because you would change the used theme for the active slide!. You need to leave the thumbnails dialog box, select a slide in the filmstrip with that other theme to make it active in the thumbnails, in order to be able to access its theme properties.

Master slides

In a multi-theme project, the master slide panel will show only the master slides belonging to the theme of the selected slide, not all the master slide used in the project. Just a warning: if you have both the Filmstrip and the Master slide panel open, which is only possible in the Expert UI, not in the default UI, the master slide panel will not refresh automatically if you choose a slide with another theme than the one showing at this moment. You have to leave the master slide panel and come back to force it to refresh.

If you change the theme of an inserted slide to the destination theme, and it uses a master slide which is not available in the destination theme, an extra master slide will be created. It will use the destination theme colors palette and its object styles.

If that happens, you may have to use the button ‘Reset master slide’ to enforce the use of the new object styles. It is not always happening automatically, if an extra master slide was needed.

Object Styles

Opening the Object Style Manager will show the object styles of the theme used by the selected slide. The logic is similar to the one I explained for the master slides. If an object style used in a slide (or master slide), which is not available in the theme to which you convert the slide, it will be added to that theme.

Skin editor?

When i explored the skin, I found that only one skin exists. In the example I used for the screenshots, the skin designed for the custom theme ‘DemoTheme’ was always applied. Even when I have changed all the slides to another theme, or applied another theme to the whole project (where the message appears that skin is updated). Not sure what is going on, will update this post when I have more information.

I did not check out Recording defaults, last component of any theme.

The post Theme Enhancements (version 11.5) appeared first on eLearning.

Using QSP – Button tutorial

Intro

Maybe you have read my two articles with explanations about the 6 existing button types in Captivate and when to use them:

Older Button Types

Newer Button Types

I planned to create a Captivate tutorial for those who don’t like reading. Why not use a Quick Start Project (acronym QSP) for that purpose?  You will be able to see the result (a Fluid Boxes project, based on the QSP ‘Aspire’) and I will add some quick tips learned during this experiment.

Tutorial Button Types

Watch the tutorial using this link:

Play

QSP tips

You can use a QSP 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?

Sure, have edited several slides quite a lot. Here I listed up only some simple tips, not the full explanation of all changes. If you want to know more, post a comment.

The post Using QSP – Button tutorial appeared first on eLearning.

Replace fonts in recent upgrade?

I recently updated to the latest version of Captivate, but now it tells me when I open a project that two of my standard fonts are missing and it wants to replace them with Tahoma.  Our standard is Gotham, so I try to change to that, but it still applies the Tahoma.

Is anyone else experiencing this with the  upgrade?

The post Replace fonts in recent upgrade? appeared first on eLearning.

Assets Panel – Tips

Intro

Do not expect a complete overview in this article. The user interface is really simple, intuitive. You can open the panel either with the big button Assets in the right part of the Big Button Bar. In the expert UI it will be the only button in that part, in the newbie UI the Assets button will be before the Properties and Library button. Alternative to the Assets button is the option ‘Asset Library…’ under the big button Slides on the left side of the bar.

At this moment the stored  assets can only be those available with Captivate ( under Assets tab ) or downloaded assets ( under Downloads tab ), you cannot add custom assets for reuse. For those custom assets remember that you can use external libraries.

The center tab – Discover – gives you the choice to find ‘Templates’ (confusing term, not the cptl template files) or ‘Characters’, all on the site of the eLearning Brothers. Once downloaded, they’ll appear in the Downloads tab.

Tip 1: Projects/slides

First option under the Assets tab, opening by default with Slides option which allows you to choose individual slides to insert in an existing project. Under Projects you will see 6 Quick Start Projects (QSP). First one is the Branching file for those who hate variables and actions, and 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 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 have been added, and object styles but I’ll leave that for another blog post.

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

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 be able to launch the Assets panel. If you now choose a QSP to open as new project, it will have the same type as the already opened project. You can then delete the first project, do not need it anymore.

Tip 2: Characters

Contrary to previous versions, the characters packaged with Captivate are only installed as thumbnails. You can find them under the eLearning assets in the Content folder. Each character has a folder with 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:

Screenshot is taken on a Windows system. If you download a extra character for the eLB site, it will be stored undeer Characters_11_5.

You still cannot download multiple all characters in one set in one download action (please log a feature request). However, if you like the Illustrated category, here is a tip. Those characters are based on one drawing file, which you can download as well. You have some choices for the format, but I prefer AI (Illustrator). If you are comfortable with that application, you can extract all characters from that file and export them as PNG, but also as SVG (smaller file size and vector based, crisp look whatever the resolution). Those drawing files are always labeled ‘Name: Illustrated work files’. You can also use it as a reference file, when downloaded it will be stored in the subfolder ‘Others’ under eLearning assets, not under Content, nor Characters. You can move it of course.

Tip 3: Icons

Those icons are SVG’s. This means that once inserted you can convert them to a button. Editing the colors is very easy as I explained in a previous article.

Where are those icons stored? The Contents folder in eLearning assets has an Icons subfolder. The icons stored here are exactly the same as the SVG’s present in the Assets panel, but here they 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 types of buttons available in Captivate, 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, you’ll get a PNG image (bitmap) with the option ‘Use as button’ checked. The three InBuilt states (Normal, Rollover, Down) are the same image. You have the possibility to edit the image. However I was bit astonished at the name of the image. Look at this screenshot:

That name ‘Deep-download_up.png’ seems to point to the needed name convention for an (old) image button. For those buttons you need to create three images in the same size, with the same name followed by _up (for normal state), _over for rollover state and _down for the down state. I had a look at the Buttons folder in the already mentioned Content folder.  It has has a similar structure as Characters and Icons subfolders, with numbers as folder names. Each folder has indeed only an ‘up’ state.

Of course you can edit the states in the project, using the Object state panel, but you will not be able to reuse that button with the edited states in a future project.  I followed my intuition:

  • I duplicated the _up file in the ContentButtons fokler for the button 5751 ‘Bubbly_downloads,
  • renamed the duplicate to _over and _down with the same name,
  • edited the duplicates in Photoshop, you see result in this screenshot:

This was successful: I did insert the button and it had the 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, but this opens another way to re-usability  (where Captivate excels over other authoring tools). One drawback: only on the present device.

More about buttons in a future blog as promised.

The post Assets Panel – Tips appeared first on eLearning.

Copy/Paste Appearance = Two-edged Sword

Intro

Copy/paste appearance is a new feature in the most recent release 11.5.0.476 of Captivate. Many call it a Format Painter like in MS Word, but I do not agree with that statement at all as you will read in this blog post. It is not only my ‘dual’ feeling about this added feature, but it is not acting as the very simple Format painter in Word which is also a ‘two-edged sword’ in the sense that it can be used in a wise way or make your life as developer convert into a hell.

Do I use the Format Painter in Word? Sure, when I have to write a quick short document, which I’m sure I will never have to edit later on. Even in that case I mostly use it for alinea formatting, seldom for text formatting. When creating courses in Captivate (which happened if they were mostly text-based, switched to Framemaker when I could get a license in college, because it handles graphics and other assets lot better) I would NEVER use the format painter. Even Word has Styles for a professional workflow. Captivate is style-based as well, in the sense of Framemaker and InDesign.  Object styles are part of the theme you are using in a course, and have published several posts about it.

In this post I will try to explain which situations are suited for using appearance duplication. It is not possible for every item, as you will discover, and has a hidden gem which you may not have discovered (yet). Let me know if my guess is wrong.

Objects supporting Copy/Paste Appearance

Static objects

First requirement is to have an object style. This means that images, audio, video, bitmap as button, SVG as button can never have their appearance transferred to another item of the same type. You can find all the possible items in the Object Style Manager. Have also a look at the included features in the style. The Transition (Fade in/out with its duration) is part of the object style, when using the Appearance feature it will be transferred as well. The supported objects for appearance pasting are a minority. You cannot use it for Highlight box, zoom object, rollover items although they have an object style:

  • Captions: in the themes packaged with the present versions, all used captions are transparent captions. But the older not-transparent captions are still available. They always come with the Callout pointer in several directions, the used pointer will not be transferred. Have a look at the screenshot below. You can transfer the style of the left caption (pastel orange) to the right caption (default style). top left pointer will not be transferred. But color, font, font size and attribute, alignment, margins, leading (space between lines) and transition will be pasted.
  • Shapes: can also be a text container, but that is not compulsory. Fill, Stroke, Transition and Text properties will be transferred. The shape itself is not part of the style and will not be changed.

After using the Copy/paste feature:

Look at the style names. For the shape the style has been taken over on the second shape, which is great!. However the style of that search caption has been applied but shows a + sign to indicate an overridden style.  I have tried this for quite a lot of captions, it seems to be always the case  and that is bad news! When later on you want to change something in the applied style (here MyCaption), that change would not be applied to the right caption in the screenshots.

Warning

If you use Copy/paste appearance on text captions, and you have decided on the final look you will need to double-check the styles and avoid all overridden styles. If you forget to do so, the slightest edit you’ll have to apply in the future to that style will become a nightmare.

This problem doesn’t exist as you can see for shapes used as text containers. Double-checking at least some never harms of course. Another reason why I rarely use captions as text containers, prefer to use shapes.

Interactive Objects

Text Entry Box, Text Button, Transparent Button, Image button have object styles but you cannot use the Copy/Paste Appearance for those objects, you need to apply object styles. A click box is invisible, so it doesn’t have an object style.

The only interactive object to accept Appearance duplication is the Shape button, my favorite Captivate object! Its object style includes the look of the Inbuilt Styles Normal, Rollover and Down (not Visited).  What is the result of a Copy/paste Appearance. Here are two shape buttons, and their Object States panels. The left button has a custom style MyShapeButton, the right button uses the Default Smart Shape Style of this theme:

You see that I added the 4th InBuilt state, Visited for both buttons. Its default look would be the same as the Normal state but I edited the style. After copy/paste appearance from the left to the right button, you expect to see this:

The good news is that the second button has now also the style MyShapeButton applied to it, same as for a non-button shape. Have a look at the new Object State panel of the right button:

As expected, the Visited state didn’t take on the look of the original MyShapeButton style, except …. for the font and its size! This observation leads me to the last topic:

Hidden Gem

Captivate has no individual Text Styles (no Character styles, no Paragraph styles), they are included in the object styles of the text containers (like shapes and captions, text entry boxes). Up till now I used Copy/Paste appearance to transfer styles between objects from the same type: caption to caption, shape to shape, shape button to shape button. However it is possible to copy/paste the text style between objects who are not the same type. That may not expected between shape and shape button, but it IS possible between Caption and Shape or Shape button!

Workflow:

  • Go into Edit mode for the Caption, and select all the text if you want also to transfer the leading (F2, CTRL A)
  • Right-click, Copy Appearance
  • Go into Edit mode for the Shape, select all text (see above)
  • Right-click, Paste Appearance

If the shape is a shape button, the text style will appear in all the InBuilt states.

Use of Appearance duplication

This new feature can be useful, but should never replace Object styles.  I would use it when being in “Draft” mode and discussing with the client about style choices. Certainly the easy way to transfer text styles is appealing to me. But due to the fact that you can never be sure that object styles will not be overridden (as is the case for captions) there is no way to create the custom theme before double-checking all styles. I start each project with a custom theme, because it can save so many hours of work in the future. The add-ons for themes in this version are also very welcome, but that will be in another article.

The post Copy/Paste Appearance = Two-edged Sword appeared first on eLearning.

Free SVGs From Google For Your Images As Buttons

As I continue to contemplate the implication of images as buttons, I start realizing that some of the more difficult things I used to do are no longer necessary. For example, I used to download font-based icon sets and edit my Index.html file in my published Captivate project to display these fonts to show the icons I used for navigation purposes in my elearning course. Not a hugely tricky thing but still, it required extra steps that I would prefer I didn’t have to take. Now, of course, I can use the SVG-based icons that are in the new Assets Window in Adobe Captivate 2019 (Update 2). Unfortunately, this isn’t a long list, so it got me to thinking, what resource do I know of that includes hundreds of SVG based icons?

I thought of the Material Design Icons that Google maintains for developers looking to use material design in their apps. Of course, these are entirely free, and there is nothing to suggest that they are only for Android apps. I downloaded one or two to test them, and they work great. You can even use the color replace feature, which is excellent if you want to have different rollover and down states for your icons. Click on any of these icons and can choose to download them in SVG or PNG format, although I recommend SVG. You even get to select the color white or black.

Icons – Material Design

The post Free SVGs From Google For Your Images As Buttons appeared first on eLearning.

Edit SVG’s in Captivate 11.5

Intro

If you have read my first blog about this major update, you will know that the extended functionality of SVG’s for use as buttons is one of my favourites. Moreover you get some editing features within Captivate (new as well). That means that you don’t have to do a roundtripping with Illustrator (or use another vector editing application) if you just want to change some colors. This blog is meant for those who are bit new to vector images, and the way paths are used.  Next post will be about roundtripping with Illustrator for more complicated editing.

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. Same for the hotspots used in 360 slides. All SVG’s in your project end up in a dedicated folder of the project Library.

Example slide

I used only assets in this slide from the audio and icons part. All icons have edited colors (not meant as a design example) to illustrate the workflow I will explain in this post (and later on in an interactive video). The biggest SVG in the center of the slide is configured as a button. You can click it as many times as you want, you’ll be able to listen to some of the audio assets. There is no poster image in this example, just the default Play button.

Play

Step-by-step ‘Edit colors’

I will explain this for the Normal state of the big SVG which you clicked in the example slide.

1. Insert SVG and resize

As I explained in the intro, this SVG is one of the Icons in the new Assets panel. Insert it from that panel (name ‘Cover’). You can resize either by using the Options tab of the Properties panel for the SVG, or by dragging a corner with the mouse while keepoing SHIFT pressed to preserve the width-height Ratio. Since this is a vector image, you’ll see that it remains crisp even when enlarged considerably.  The original icon uses a uniform dark grey. I check the option to use it as a button, and uncheck the option to make the whole bounding box clickable (Enable Click in Bounding box). You can see that the bounding box extends above the image. There is an option to ‘Fit to Bounding box’ but it would have distorted the SVG.

Step 2: Edit mode

To enter edit mode for the SVG double click the SVG. You find the tooltip when hovering over the Fill in the Properties panel. Do not use the button ‘Edit SVG’, which would let you choose an editing application on your system, nor the option Edit with Illustrator.

Step 3: Select a ‘path’

A vector image is composed mostly from several paths, which can have a width (may be variable) and/or a Fill. The image I used as example has 3 paths, all closed and with a fill. You select a path by clicking it. Selected path will have a blue surrounding line as you can see in this screenshot:

Step 4: change color

Click the Fill icon in the Properties panel to open the Color dialog box. For this simple demo slide I used the color wheel to select a color. In a normal project I would have used the Theme Colors palette of course. Click OK to confirm the color change. Repeat that workflow to the remaining shapes.

SVG button states

When you convert a SVG to a button, the InBuilt states Rollover and Down are added automatically. You can use the edit workflow described above for each of those states. I added also the Visited state (with a speech bubble) and the custom state ‘Done’ which appears after you have listened to the 5 available audio clips. Here is the Object state panel of the big SVG button:

The Visited state is selected in this screenshot. Look at the Properties panel: you see that the opacity is reduced to 50%. This always applies to the full SVG, but in this case only to this state of course. You see a user variable inserted in the added speech bubble. That bubble has no reduced opacity, it is not part of the original SVG but an added shape£.

More?

Main topic is finished, you may stop reading if you want. But for the curious fans,  the audio clips are attached to a state in a second multistate object, which is a shape to which I added an icon in the Normal state (no audio) and an audio clip with its name to the other states.

The Advanced action triggered by the big SVG buttone:

No need to trigger the Visited state, it appears automatically after the first click on the SVG button.

The post Edit SVG’s in Captivate 11.5 appeared first on eLearning.