Have you ever forced your learner to watch a youtube url and once closed the next button appears?
When I play the slide in the time line it works, but when I preview in HTML the button does not appear after closing the video.
Have you ever forced your learner to watch a youtube url and once closed the next button appears?
When I play the slide in the time line it works, but when I preview in HTML the button does not appear after closing the video.
I have some problems with many of my e-learning projects:
Everything works fine in preview, but after publishing to html the e-learning seems to react only slowly on action buttons (especially “go to next slide” or “jump to slide”). I’ve created my own navigation bar at the bottom and every button is displayed right at the beginning. When I play the e-learning in explorer or chrome (both the same issue) I click the “next” button and only after some seconds I get to the next slide. It works, but veeeery slowly.
No matter which content is displayed, this issue seems to destroy the e-learning because colleagues have to wait and it gets boring…
I’m using CP 9, 22 slides in this project, slide audio on every slide, advanced actions for CC and play/pause.
Does anyone have the same problem or a solution to improve the performance?
Ideas on where to troubleshoot?
I already tried:
– changing the margins on the button
– trying to adjust the position of the shape in the fluid box. It reads -1% which is maybe the issue, but I can’t get it to change. See picture
The post Why is this button hanging off the bottom of the page? (see image) appeared first on eLearning.
Another blog and example output, due to a question by a user today.
“I have groups of slides. Each group consists of a handful of slides that has event video on each slide and nothing else. The videos autoplay. The user can enter these groups at any point and must watch each video before being redirected back to a main menu. ”
After I had gotten all details, I created this example file. The assets panel in 11.5 was very useful as you can see. Only Chapter 1 has been worked out with 4 slides containing event videos. For Chapter 2 and 3 only one slide is available with a back to menu button. Try it out: you can start with any video, but then the sequence will be linear: 1-2-3-4, 2-3-4-1, 3-4-1-2 and 4-1-2-3 are all possible. You can use the Chapter 1 button on the main menu as many times as you wish. It should be foolproof. However… you have to watch the videos from start till end.
Four Boolean variables were created: v_one, v_two, v_three, v_four. They are meant to track each if a video has been viewed completely. Only when all variables are toggled to 1, will the learner being returned to the main menu slide. The default value is 0 and will be set by a shared action (see later).
This event is used to trigger an advanced action which will check the value of the 4 variables. If they have all the value 1, the learner will be navigated back to the menu slide. Have a look at the Preview of this action:
For the first three video slides this event is used to trigger a simple action, similar to this one for the first slide:
Assign v_one with 1
Only the variable is different for the second and third slide. Since the sequence is linear, after that event the playhead will continue to the next slide. There is no pausing point on the slide, which makes it possible to use this event.
The action is now more complicated, because two situations are possible:
The first situation means that the learner will be navigated to the main menu slide, the second that he still has to view video 1 and maybe more. This means we need a conditional advanced action. Here is the screenshot:
Since the exit event has also to toggle the variable v_four, I used two decisions. The first one ‘Always’ is toggling that variable. The second decision is the conditional one described above.
You would expect them to trigger a simple ‘Jump to Slide’ action. However, since the learner will return to the menu slide, and can restart viewing Chapter 1, there is a need to reset the variables. This event was used for that purpose as well. It is a perfect example of an action where a shared action can save a lot of time, because it will have only one parameter: the slide to jump to. All variables, and the literal ‘0’ do not have to be parameters. Here is the screenshot of a filled in action for the first video button:
Since both remaining chapters will have a similar group of video slides, this approach can be used there as well, to reuse the same variables. The advanced actions described before, can be duplicated and edited. The shared action can be used as it is without any change.
Twilight Zone moment here: Anytime I add a 4th button interaction on the first slide of my presentation, whether they’re on the Slide Master or on the slide itself, the Slide Master elements do not load when I Preview in Browser. (Captivate 10.0.0.192). 3 buttons, I’m good to go… add the fourth, and I have a white space where my slide master elements should be. If that 4th button doesn’t appear until the 2nd slide or later, everything works fine. I lost about 4 hours of my life just figuring that much out, but don’t have a clue what’s behind it (or some bug that ‘s been fixed in a later version, possibly?)
Anyone got a clue?
Maybe you have read my two articles with explanations about the 6 existing button types in Captivate and when to use them:
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.
Watch the tutorial using this link:
You can use a QSP in two ways:
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:
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:
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.
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:
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.
Switching to another image is mostly very easy:
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.
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.
Captivate ‘s most recent release, 220.127.116.116 added two types to the button treasure chest. You all know that the button is perhaps the most used interactive object. If you are only creating non-responsive projects, you may sometimes replace it by a click box, but that is not a possibility for Fluid Boxes projects. In this post you’ll find an overview of all button types, with their advantages and disadvantages.
Here is a short list of what you’ll find in any button, whatever its type:
The 6 types can be divided in two groups of 3:
Those are Text buttons, Transparent buttons and Image buttons. They can be added using the Interactions button, option Button. You will always get a Text button. If you want a Transparent or an Image button, you have to open the dropdown list under Style Name in the Properties panel. Image button is the second choice, Transparent the third. In this screenshot (same for most included themes) two more styles are visible, both for quiz buttons (which are also transparent buttons).
Some features are common for those three older types:
This type is always rectangular. Fill nor stroke can be edited. You can only make the button transparent, which results in only the Label showing up (see screenshot with dropdown list for the checkbox ‘Make Transparent’. Look at this screenshot for a possible ‘look’ of the states:
The text on the button needs to be typed under ‘Caption’ in the Properties panel, not in the button itself. The text can be formatted: font, font size, font color and attribute.
Since Captivate 6 I have never used this type anymore. Not being able to use theme colors for its style is a show stopper for me. Using the option ‘Make transparent’ is not very appealing since it still keeps the bounding box as clickable area. Personally I regret that this button type is the default type when using the Button option under Interactions.
This type can be a rectangle or a rounded rectangle. Fill can be edited, offers the same options as shapes: Solid color, gradient, texture or image fill. The button text needs also to be typed in the Properties panel (same as for Text button). Font styling has same features as with text button. There is no ‘Make Transparent’ option, but you can edit the Opacity for the fill and the width of the stroke. Setting both to 0 will result in transparency. The name of the button type is bit confusing, don’t you think. Usually that button is not transparent, but the most flexible of the old types. Have a look at this example:
Since quiz and score slides need an old type for the embedded buttons, this one is my preferred type. That is due to its better styling options, which makes it possible to give the transparent button exactly the same look as a shape button (which is still more flexible). You may wonder: why not an Image button? Read below why.
Before shapes appeared with version 6 I have created a lot of image buttons. You need a graphics application to do so:
Since shapes became available, which can be filled with an image (see Turn an image into a button) I never used image buttons. Now, with 11.5 you can use both bitmap images and SVG’s directly as buttons. In my series about Tweaking Quiz slides, I mentioned them as only solution for a Fluid Boxes project to Tweak a Results slide. As you can read in that post, I used it exactly because it was possible to make an image button totally transparent, which is not possible for a Text Button nor a Transparent button because of the label. That is the only exceptional situation where I recommend an Image button?-.µ
The second trio of button types will be described in the next blog.
None of the button types described in this post can be found in the new Assets panel.
Text buttons and Transparent buttons are based on object styles, which are part of the Theme.
Image buttons also have an object style, and the image buttons packaged with Captivate have their graphics in GalleryButtons under the installation folder. They are not in the eLearning assets. You can create graphics for custom Image buttons, and store them wherever you want.
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.
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:
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.
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.
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.
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:
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.
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.
Usually I will not talk about a new version immediately after its release. However I am very excited about this intermediate release which is much more than just a patch. ‘Voor elk wat wils‘ (interesting features for each developer whatever her/his level) is Flemish proverb fitting in this case. Do not expect a full review in this post, I will talk exclusively about some of my preferred features Of course they 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., I may overlook some little gems which I couldn’t dig out yet, but will continue the search. You’ll find already three of those small gems at the end of the post.
It has been possible to fill a shape with an image since version 6. Converting the shape to a button was much easier to create nice buttons than the older workflow with Image button. For those image buttons you needed a graphics application and you couldn’t add a label. . Shape buttons also can have custom states on top of the InBuilt states which they share with the old button types (Normal, Rollover, Down, Visited) . Personally never use the legacy button types anymore. One exception: embedded buttons on Quiz/Score slides cannot be shape buttons, so I use transparent buttons for those..
However, those shape buttons were limited in two ways:
In version 11.5 it is possible to use SVG’s directly as buttons, no need to fill a shape. And you can limit the clickable area to the image itself! This is a big step forward. File size of SVG’s tend to be smaller, compared with bitmap images, and moreover they are excellent for responsive project due to their vector nature. The SVG, activated as button, has all the features of shape buttons: 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 in 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.
Similar to SVG’s, bitmap images can directly be used as button, no need to fill a shape. Same for the clickable area: can be limited to the image itself (provided you have an image with transparent pixels of course – no JPEG but GIF or PNG). Depending on the type of images this extends the functionality which I explained in the first point. I will show a use case of custom hotspot questions with partial scoring like 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, Themes
Themes have now a dedicated Theme Properties panel. The only way to access this panel is from the dialog box under the big button Themes. You cannot open it with the Windows menu, nor from the Themes menu. That last menu still has to be used to save a customized theme. Here is a screenshot of that panel:
This was a new feature in the first release of CP2019 which I really like a lot. The patch doesn’t add a lot (was well designed from start). On demand from many developer, you now are not only limited to videos on your system or from YouTube, but Vimeo videos are possible as well..
Another improvement is the possibility to insert a sequence of overlay slides (content or KC slides) on a frame of the video.
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.
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…