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:
You can use a QSP in two ways:
Open the project, and delete or hide the slides you don’t want to use in your course.
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:
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
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:
Select the image.
Click on its name in the Properties panel
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.
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.
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?
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:
Non-responsive project (Blank project in Welcome screen)
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.
Copy/paste appearance is a new feature in the most recent release 184.108.40.2066 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
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.
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.
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:
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!
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.
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.
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.
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.
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£.
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.
This summer just got a lot hotter! The latest update to Adobe Captivate is out now, it is free to Captivate users who either own Adobe Captivate 2019 or are on a subscription plan, and it is chock full of fresh, sensational new features and resources. The clear headliner is the new built in Assets and the associated search tool. Adobe has found a delightful way to accommodate the needs of developers who are new to eLearning while simultaneously including a serious speed and performance upgrade for more experienced users.
The Adobe Captivate 2019 Free Update Announcement Video – includes a short overview.
Quick Start Projects
At the heart of the improvements are a set of beautiful, professionally designed Quick Start Projects. These ready to go slide collections remove the traditional barriers to entry for eLearning developers by providing easy to modify, simple to edit slides that align to virtually every form of online instruction, interaction, quiz, scenario & more. The new search tools in the asset panel make it easy to go shopping for sample slides of virtually every time. But the jaw dropper here is the way Adobe has improved the simplest aspects of working with slides in Captivate 2019.
You just drag and drop – and image replacement is a reality. You can grab those images from your system folders, or from the Captivate library. All of the text elements and shapes are instantly editable, and new copy/paste appearance tools make it a breeze to clone new formatting. The new system is smart enough to allow multiple themes – so you can mix and match themes within a single course / project. And it even anticipates your most likely preference with shortcut menus to let you quickly specify whether to adopt a new theme for a pasted / inserted slide or to stick with the original.
Check out the getting started video for a more visual introduction to the enhancements and new features.
I’m completely obsessed with the new image swap feature and I’m guessing that you will be too. It’s cool to be able to quickly swap an image for something else, but the bit that blew my mind was that Captivate 2019 Update 2 let’s me do this virtually anywhere there is an image. I’ll explain… I use images as backgrounds all of the time. I honestly didn’t think image swap would work for things like that. Imagine my delight the first time I dragged to replace the background of a fluid box and ‘BOOM’ instant background swap. It works with shapes too! You just drag and hover, when you see the powder blue glow, let go – Captivate will do the rest.
Here’s my video overview of the image swap feature for those who prefer it in images rather than words.
Image Swap Feature Explained
Theme Enhancements Galore
Themes have had some major overhauls in this update. Now you can mix and match slides with different themes – using multiple themes within the same course. As you add each new slide you can easily decide whether to retain its source theme or to adopt one of the themes of the new project. This really expands what you can do with themes, and it doesn’t stop there. The Captivate engineers have also added fantastic new tools to make the day-to-day work of an eLearning developer – a lot easier. Now themes include shortcuts to the fonts that you used. So it is easier than ever to identify the themes used in a course, and to replace them all at once if you like.
There is even a new tool to identify when a font used in a project is missing on your computer. This can help you sort out font problems with legacy content, and even makes suggestions about fonts that you can use to replace the missing ones, with a simple click.
Theme fonts help you speed your course creation process
Yeah, sure, that’s a button
We’ve all heard it – the boss comes around the corner, glances at a layout for 2 seconds and solves all of the worlds problems by saying – well can’t you just make that thing a button? Not everything is a button, we would typically reply. Well – now it’s really just as simple as checking a box. Shapes have been enormously popular thanks to their ability to be converted to buttons with the tick of a checkbox in Adobe Captivate. Now the same multi-state, rollover aware smart button solution can be applied to any image in Adobe Captivate 2019. Just select your image, and check the ‘Use As Button’ option in the properties inspector. It even works with SVG images!
This great video summary demonstrates how simple it is to make a button from an image.
Yes, Icons! Yes, right there in the Assets Panel. Why yes they can be recolored right on the stage. I’m probably a little to excited about this, but Icons are an incredible time saver for me. A nice big library of icons has been included in this update, and Adobe provides the bonus tools that we’ve all come to expect. Just drop your icon in, double click and voila’ the icon is now ready for color swapping. You don’t even need Adobe Illustrator, just select the shape are that you want to recolor, and use the color picker from the property inspector to swap those colors in an instant. (And if you really wanted to do something more, round trip editing with Adobe Illustrator is just a checkbox away too.
Think format painter, but more powerful. This nifty little productivity enhancement allows you to copy/paste the visual formatting of text and shape elements, INCLUDING all of the states of those objects. Just right click (control click) on the object with the right appearance and select copy appearance. Then select all of those pesky future twins and find ‘paste appearance’ in the context menu. That’s it – you get instant formatting across groups and sets. This one new tool saves me incredible time formatting buttons and text elements.
Copy / Paste appearance saves valuable time – giving you a powerful tool to quickly format your text and shapes
Virtual Reality VR Gets another boost
Creating 360 Virtual Reality courses keeps getting easier. In this update several enhancements have been added that make it even easier to create virtual reality courses. A new action trigger allows you to launch videos from a hotspot in a a VR / 360 project. In addition, the popups, including text areas, images and videos now all have close boxes – so your learners can control how long the popup item is visible in the project. There are hint and rollover enhancements for the hotspots, and you can now edit the hotspot SVG images by double clicking. It is also now possible to adjust the size of a hotspot – using control handles that appear upon selection.
VR text elements got a substantial makeover in this update as well. Now you can see the text elements on screen while editing, and you can alter the font, the formatting, color and even the opacity of the background. This let’s you really polish the look and feel of your VR courses. Perhaps my favorite VR enhancement is the option to include hotspot interactions as reported quiz interactions. You can now set the score, name the interaction ID, and chose whether to report the interaction as part of a quiz.
An overview of the VR/360 feature.
Branching without Advanced Actions or programming
Yes, you better believe it. Now the most common branching workflows, including forced navigation and in-course branching are easier than ever to accomplish. You can download examples from the Asset panel and simply swap the images and content to use your own, or by following a simple naming convention – Captivate 2019 will do the work for you. The most common course navigation pattern is to provide a menu page for your learners, where they can select from several available topics. Usually you want to give learners the freedom to decide the order of learning, but also want to verify that each section of content has been visited. This workflow can now be accomplished without programming. You just name the menu slide ‘branching’ and ensure that the buttons on the menu slide follow a simple naming convention, and Captivate will figure out the branching logic for you.
Overview of the automatic navigation and branching feature
Similarly, Captivate can now automate navigation of multi-state objects on a single slide – creating a forced navigation workflow that will hide the button to navigate to the next slide until all of the buttons on the slide have been explored. The method for both the course branching and the forced navigation of multi-state objects on a single slide handle all of the common interactions and can save you a lot of time while completely bypassing the need for advanced actions. (If you are a power user – don’t worry – you can still use advanced actions, and as a special bonus – you can even combine them.)
There are so many incredible enhancements and new features in this major free update you absolutely won’t want to miss it. If you are already a Captivate 2019 user, you can get the update right now, simply by following these steps:
In Adobe Captivate 2019,
Select Help Menu: Check for Updates.
The Adobe Captivate Updater dialog will appear and guide you through the remaining update process.
If you aren’t a Captivate customer yet, you can download the free trial here.
If you just want to learn more, check out these additional resources: