tag:blog.lilybiri.com,2013:/posts Captivate blog 2019-07-18T15:31:52Z ir. Lieve Weymeis tag:blog.lilybiri.com,2013:Post/1433493 2019-07-17T12:07:40Z 2019-07-18T15:31:52Z Sliding Menu

Intro 

This post is meant as an answer to a thread posted in the eLearning community. "I want to create a menu that slides on and off the screen, like a door that moves to the left and right, when the user clicks a button." I invite you to read the comment by Greg Stager who is posting some links to blogs he wrote where JS is used to create slider solutions. As you know, I often try to use only Captivate features to solve similar use cases instead of JS. This is a new example. You'll find a step-by-step workflow to recreate the example I show. The shape (which I use as 'box') is not having a menu, I invite you to (re-)read my post about Hyperlinks for the creation of a Dropdown menu. They are a great way to avoid creating multiple interactive objects in the 'box'. 

If you don't like creating advanced actions, I have an offer at the end of the post to make your life easier...

Example

Watch this short file, only three slides after the 3 seconds long Title slide. They have two buttons (from the Assets panel in 11.5): a Next button on top, and the Slide toggle button below it. You can use the toggle button as many times as you wish on a slide. To restart, refresh the browser.


Step-by-step workflow

Step 0: Next button on master slide

I used only one master slide in this project, which made it easy to put the Next button on that master slide. I kept the default option 'Pause project until user clicks' (Actions tab). That will result in having each slide paused at its last frame.

Step 1: Sliding assets

Two assets have to be created and put on the first slide where you want to use the sliding box:

  • Sliding Box: I used a rectangular shape, labeled SS_slider. You can add content to it, but make sure that you check the Options tab, because you will need both the size and the exact x/y coordinates. Here a screenshot of my setup, since it was in a non-responsive project you see both size and location in px. If it was a responsive project, it would have been in %. Put the box in the wanted position after sliding in.

  • Toggle button (SB_Slider): will be used both for slide in and out. You need to create an extra custom state for this button, I labeled it Out. Remember that Rollover nor Down state can change when you switch from the Normal to the Out state, hence make those states neutral (I did not add text to them).

Time the Sliding Box and the Toggle button for the rest of the project, with the option 'Always on top'. The Timeline of that slide will look like this:


Step 2: Custom Out Effect

Create a time-based effect to get the sliding box out of the stage. Do not use an Exit effect, but a simple motion path. I added an AlphaFromTo effect as well (100% to 0%), and reduced the duration of both effects to 1 second. 

Workflow to save this effect as a custom effect is described in detail in this post. Do use that method after you have done step 3:

Step 3: Create Guides

Show the Rulers (View menu) and create two vertical guides, through the start and end point of the motion path. See this screenshot:

They will be needed to create the In Effect, to be exactly the opposite of the Out effect. Now you can save the custom effect, and take it out from the slider box.

If you didn't use a horizontal motion path, you'll need also horizontal guides. If you need more information about using Guides and Rulers, look at 'Guides Rule'.

Step 4: Move slider box in Out position

Use the guide in the scratch area to move the slider box to the correct position. I mostly use shortcut key (SHIFT or CTRL combined with left arrow) to keep that movement horizontal. For a non-horizontal movement, you use vertical and horizontal guide. You'll see a screenshot of the new position in step 5

Step 5: Custom In Effect

Create this effect using the two guides (or four if you needed also horizontal guides). In the screenshot you see this effect, where I combined a motion path effect with an AlphaFromTo effect (0 to 100%). Save the effect, same as for the Out custom effect. 

Step 6: Hide Slider box

Use the On Enter action of the slide to hide the Slider box. 


Pause

Now comes the hard work: you could skip steps 7-9 and scroll immediately to the bottom for an offer. 

Step 7: Variable v_slider

Create a user variable, which I named v_slider. It will be used to track the status of the Slider box: in or out? Similar logic you'll be able to see for all the Toggle buttons in this older post.

Step 8: Advanced Action ResetSlide

Create this advanced action (conditional):

The items marked by in this action will be parameters if you convert it to a shared action. Beware: the name of the custom effect cannot be a parameter! I used TestIn and TestOut as names, you can replace them by your names if they are different.

Step 9: Advanced Action ToggleSlider

Create this conditional action. Like with the previous actin, I indicated the 4 parameters if converted to a shared action.

 

Step 10: Attach the actions to events

The action ResetSlide has to be triggered by the Success event of the Next button, whereas ToggleSlider has to be linked to the Success event of the toggle button.

Offer

You can obtain the described actions as shared actions for free, including a short explanation of how to use them. You could skip steps 7 to 9, but still have to do the other steps.

How? Visit my website (lilybiri.com), fill in the contact form with your request, and a small comment on my blogs or website. You'll get everything by mail. I probably will post more offers in the near future, if you don't want to hear about them, you can indicate that as well (I am European, respect the GDPR).

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1426773 2019-07-02T16:53:31Z 2019-07-02T16:53:31Z 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.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1424327 2019-06-25T16:58:30Z 2019-06-25T16:58:30Z Using Copy/Päste Appearance in 11.5.0

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. I have sort of a ‘dual’ feeling about this added feature , Even the simple Format painter in Word can be a ‘two-edged sword'.  Same for Appearance transfer in Captivate: It can be used in a wise way or make your life as developer become a nightmarel.

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 paragraph formatting, seldom for text formatting. When creating courses in Word  (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 I have published several posts about themes.

In this post I will try to explain which situations are suited for using appearance duplication. It is not possible for all object types, 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

Not all object types can be used for duplication of its appearance to another. I checked them out and list up those who do have the options 'Copy Appearance' in their right-click menu.

Static objects

First requirement is that the object type had an object style. This means that images, audio, video, bitmap image as button, SVG used as button do not have the feature. Check the Object Style Manager. That is also the right place to detect the included features in a style. Example:  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. Only text containers:

  • 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 featuure

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 the left 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 shown  in the screenshots. Hence my

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 to reinforce my decision to use only shapes as text containers.

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:

Both buttons have the 4th InBuilt state - Visited - added. Its default look starts 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 related:

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  seem unexpected between shape and shape button, but it IS ALSO 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.

Of course the name of the styles will not be transferred, since a text style has non name. The style will show a +, which means it is overridden. If you decide to keep the text change in the shape, please create a new style.

Using Appearance Duplication

This new feature can be useful, but should never replace Object styles.  I would use it when being in “Draft” mode at the start of a project, when  discussing with the client about style choices. Certainly the easy way to transfer text styles is appealing to me, if followed by creation of an object style. But due to the fact that you can never be sure 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 changes for themes in this new update are also very welcome, but that will be in another article.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1422463 2019-06-21T11:19:05Z 2019-06-21T11:19:06Z Scrolling Text Interaction to replace Text Entry Box

Intro

Although I have already posted about one Submit button for multiple TEB’s, recently users tried to apply that blog to non-validated TEB’s, which was not the goal of that original post. Moreover giving another attempt to a TEB where the Submit has been done has become less easy with HTML5 output. SWF output had so many advantages (rewinding the playhead a couple of frames was simple), but that is the past.

Instead of writing long answers to the most recent thread, to explain why choosing Scrolling Text Interactions was a better choice for non-validated fields, I created a short example file. The workflow explanation will be in this article..

This example was created with version 11.5.0.476, the most recent version of Captivate. I uses some image and button assets from the new Assets panel. However, nothing has changed for interactions in this major update to version 11. I am confident that the solution will work for every version since 8, meant for HTML output.

Example

File has two slides. Only the first slide is relevant for the workflow, the second is meant to test the Continue button (with action "Go to Next Slide").

The first slide has three fields to fill.  If any field remains empty, a textual warning will appear and you can retry. The Continue button appears when all fields have an entry. Project has no poster image, just the default play button. It is not rescalable. Here is the link


Setup

Variables

For three fields you need 3+1=4 user variables, none of them needs a default value in its definition:
  • v_one, v_two and v_three will be used witl be associated with the Interactions
  • v_null is needed for the advanced conditional action to test if the field is blank; more info in ‘Where is Null’

Scrolling Text Interactions

Next to each Text container (used a shape) an instance of the Scrolling Text interaction. Here is a screenshot of the setup of the first of them. Important is to link one of the variables and to uncheck the option ‘Read only’:

You see in the dialog box that I edited the font (used an Adobe font), the font size and attribute.  Just a reminder: it is not sufficient to type in a variable name to define it, you need to define it in the Variables dialog box. 

Although I resized the interactions to the same height as the Text containers with the questions, the height is decreased in the output file. Be careful with copy/paste to duplicate an interaction, prefer the Duplicate functionality within Captivate (CTRL-D).

Advanced Action

This action is triggered by the Submit button. I used the On Enter event of the slide to hide the warning that will pop up if at least one field is empty. This is the Preview dialog box. The operator 'is equal to' is replaced by the JS equivalent needed '=='. The logical operator OR is replaced also by its JS equivalent |  As you perhaps know, an advanced action will be converted to JavaScript on Runtime.

The replacement of the grayscale image by the color image, disappearing items on the slide: all is achieved using  the timeline. For those interested, here is a screenshot of that timeline, I didn't group any items, but their label clearly shows what they are.

Conclusion

As usual I appreciate any comment, whether to add an alternative or to ask questions. You are welcome on my website as well.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1421772 2019-06-19T14:30:50Z 2019-06-19T14:30:51Z Edit SVG 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 favorites. I didn' t mention that you get some editing features within Captivate. Thisat 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 post is meant for those who are rather 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. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

Remember: SVG used as button is only possible for HTML5 output, not for SWF output

.

Example slide

The example uses only included  assets from the Assets panel, to be found in 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£.

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.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1419553 2019-06-12T16:21:36Z 2019-06-19T17:23:49Z 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... 


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1415784 2019-06-04T14:11:47Z 2019-06-04T14:11:47Z Display Time (CP2019)

Intro

Almost 10 years ago I wrote a blog post to answer user question  quote: “…. if there was anyway to insert running time”.
The user wanted a display on all slides of the time information you can find  in the TOC (total duration of the project and elapsed duration).  Total duration can be found also in the panel ‘Project Info’ in Captivate, which shows global project information (number of slides/frames). In this panel you can also check the expected size of the output file.
Total duration is calculated as the sum of slide durations. Similar the elapsed duration:is calculated as the sum of the duration of the slides before the currently viewed slide. I would call that type of duration ‘developer time’. 

Developer time can be very different from the real time spent by the user viewing slides in that project.  You’ll see in this refurbished article how to show both times, developer and real ones. It is a nice use case for System variables.  BTW, if you didn’t get my free table with System variables, maybe it is the right moment .

Contrary to the old post, which was meant for SWF output, I used JS this time instead of advanced actions with the Expression command.  Reason is that for SWF output the formatting of the variable values could be controlled by the number of characters to display when inserting the variable in a text container. That is not working for HTML5 output. Formatting of numbers is a typical use case (like random data) where I tend to use JavaScript.

Example output

Watch this published movie. The described workflow (from the original post) is working only for linear projects. Sorry for the use of TTS, those slides are based on a longe project….in Dutch.



 
The ‘developer time’ is shown in the top left corner: total project time (secs), time of the previously viewed slides (secs) and percentage viewed.

Real time workflow

The real time is visible at the bottom, next to my name. I used the Timer widget for the real time.  You have to be careful: set the maximum time to a high number, to avoid triggering the end of time action. Getting rid of the background is easy, have a look at my setup.:
 
 

Developer's time workflow

As I announced at the start, for several reasons I preferred to use JS instead of Expressions in an Advanced action as was the case for the older blog post. I propose two scripts. The first one is close to the older blog post, because I use the same system variables, and two methods of the JS interface for Captivate. Details can be found in this document.

In the second script I skipped using the known system variables, replaced them by some more methods of the same document.

Script 1

Variables

The system variables used in the first script are:

  • cpInfoFrameCount: its value is the total number of frames in the Project Info panel (see first screenshot in this article)
  • cpInfoFPS: each movie is played at a certaing speed, which defines its qualtiy. It is indicated as Frames per Second. The higher that rate, the higher the quality
  • cpInfoCurrentFrame: indicates the present frame number. Frames are numbered, starting with 0, not per slide but for the whole project. More details can be found in this blog post about Micro-navigation

In Captivate I created these user variables to display the results in the project:

  • v_total: total duration of the project in seconds
  • v_done: sum of the duration of the previous slides in seconds
  • v_perc: percentage of duration viewed, in %

To avoid confusion, variables in JavaScript used these names:

  • frames: will start with the value of cpInfoFrameCount and end after calculation return the total project duration (secs) 
  • start: will start with a frame number (frist frame of the present slide) and after calculation return the alreadu viewed duration (secs)
  • speed: will store the value of cpInfoFPS
  • percent: will return the percentage viewed after calculation

Javascript

This script has to be triggered On Enter for each slide. That can be directly with the command 'Execute JavaScript' as simple action if you don't need any other commands to be done on entering the slide. If no slide nneeds any extra commands, you can select all slides in the Filmstrip and attach the script to all slides at once. If you need more for some slides, it could be a good idea to use the script in an advanced action, where you can add more commands. Even a shared action is possible, but in this example had no real sense.

Have a look at the script:

I am using two methods from the Common JS Interface:

  • getVariableValue to store the values of Captivate's system variables in the JS variables frames, speed, start. (lines 1-3)
  • setVariableValue to return the results to the Captivate variables v_total, v_done and v_perc (lines 6-7,9)

The calculations in lines 4-5 and 8 are straightforward. To control the formatting of the numbers I used the method 'Number.toFixed(x)'. I didn't want to display two decimals for a simple reason: the first frame will be detected on each slide, and that would have led to a duration of 0,03 seconds on the first slide (30 seconds in a frame). It would be possible to split up the results in minutes and seconds as well. I wanted this example to be a simple introduction to JS newbies. I planned to use the formatting in a third article about numbers. The first two were 'Playing with numbers - part 1' and 'Playng with numbers - part 2'. Both were meant as simple intro to JS for newbies. However, since they didn't get a lot of viewers, I gave up spending more time on it.

Script 2

No system variables here, the user variables and variables in JS are the same as in the first script: v_total, v_done, v_perc, frames, speed, start, percent.. Have a look at the script:

I didn't need the method getVariableValue in this case but used three more methods on top of setVariableValue to return the results to Captivate:

  • getPlaySpeed: returns the same value as the system variable cpInfoFPS (line 1)
  • getCurrentFrame: returns the same value as the system variable cpInfoCurrentFrame (line 2)
  • getDurationInSeconds: spares me one calculation, this value doesn't exist as system variable. This time I don't have to divide the total number of frames (exists as getDurationInFrames) by the FPS value. (line 3)

The other lines in the script are similar to those explained in the first script.



]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1412362 2019-05-23T19:14:40Z 2019-05-23T19:14:40Z Audio in Learning Interactions

Why?

A question posted recently pushed me at creating this short post: “....a way to stop the main slide audio when a tab on the interaction is clicked”. I pointed to an older blog where you can find some tips for using learning interactions. It offers a table, tells about their limitations etc. I want to explain why there is no simple solution for this question at all. The audio referred to in the question was slide audio, the used Learning interaction was Tabs. What I explain is also valid for Accordion and Timeline. As I explained in the mentioned blog post, the term ‘Learning Interactions’ was introduced to distinguish the widgets compatible with HTML5 output from the older ‘widgets’ which were created for SWF output. Both have however the same extension ‘wdgt’ and are sometimes both indicated as widget. Terminology can be confusing

Static and Interactive

It seems logical that Learning Interactions are interactive, because they allow the learner to click and interact, and they are listed under the Interactions big button. Indeed, they all have some of interactions internally. However not all are also ‘Interactive object’ in Capativate’s timeline. A Captivate interactive object can be recognized this way:

  • It has an Actions tab
  • Under the Actions tab you find up to two events (Success, Last Attempt)
  • A pausing point is automatically inserted at 1.5secs.

You know the common interactive objects: button, shape converted to button, Text Entry Box, click box. For those objects you’ll see the pausing point immediately on the slide timeline. Moreover the object timeline, when not selected will be green. Look at this screenshot, where I kept the original generic names to clarify the type of objects.

Learning Interactions are internally interactive but as objects in Captivate they also come in the two flavors: static and interactive. You can recognize them by the presence of the Actions tab, with the possibility of scoring and reporting. However the score in the game interactions are not linked with the game results (see article)

Interactive interactions can also be identified, based on the generic name in the Timeline panel. In this screenshot I have inserted two interactions: Tabs (static) and Jigsaw Puzzle (interactive). Look at the generic names:

Look carefully at this screenshot: you see that both interactions also have a colored timeline, but exactly the opposite of what you expect. Please, support me by logging this bug. You may also wonder about the presence of a pausing point? No pausing point for the interactions? The static interaction has indeed no pausing point, you need to add an interactive object like a button, to keep the slide paused. That is needed to allow time for the learner to explore the interaction. However the Interactive Interaction doesn have a pausing point which is not showing in the Timeline panel, you’ll find it in the Timing properties.

Audio Problem

The question was about avoiding having slide audio still playing when the user clicks one of the buttons in the Tabs interaction. That interaction allows  to add audio to a button, which is object audio.  Only object audio allows simultaneously playing of multiple audio clips, either from object audio or, in this case, slide audio. Pausing the slide audio, when a button is clicked in the Interaction would need access to the source code of the widget, which is not available. I can only propose two possible solution to avoid hearing two audio clips at the same time.  I will only explain the first solution in this article. The second solution, with a custom interaction will be explained in a later article.

Interaction available after Slide Audio

This is the easiest workflow. The learner would not be able to use the Interaction while the slide audio is playing. With a normal interactive object that would be easy: disable it for a certain time with and On Enter action for the slide and enable after a certain time corresponding with the audio length. However, even an Interactive Interaction cannot be disabled! You need a workaround.

Steps:

  1. Create a static image of the interaction, either using Captivate or another screen capture app like Snagit. Quality should be good to excellent.
  2. Resize that image to the exact size of the Interaction.
  3. Insert the image on the Timeline and time it for the duration of the slide audio.
  4. Move the learning interaction to appear just after the image.
  5. For a static interaction (like Tabs, Accordion….) you need to insert a button or click box to pause the slide. That is not necessary for an interactive Interaction.

Have a look at this screenshot of the Timeline, which illustrates the described steps:

The timelines from bottom to top:
  • Slide audio, about 3,5secs long
  • Tabs Interaction, starts at 3,4 seconds, extends till end of the slide
  • Image of the Tabs interaction, same location and size, starts from the first frame and ends at 3,8secs; overlap with the Interaction is meant to avoid seeing the transition
  • Click box – duration of the slide –  to pause the slide at its end; it could be a Next button as well.

Custom Interaction

Using shared actions, multistate objects, it is perfectly possible to recreate this interaction on a slide. At that moment you have full control over all objects. To avoid multiple audio clips playing at once, the easiest way is to use only audio started with ‘Play Audio’ command.  If you start a second audio with that command, the first one will be stopped automatically. For this example:

  1. Use Play Audio with the On Enter event to replace the slide audio.  That is possible if you don’t need Closed Captioning.
  2. Use Play Audio in the actions triggered by the Tabs buttons. Clicking the button will automatically stop the previous audio, whether it is the audio started On Enter, or the Audio started with another Tabs button. Object audio would also be possible, if you use the command ‘Stop Triggered Audio’ to stop the first audio clip started On Enter.

Do you want to see the setup for such a custom interaction? Post a comment, please.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1404368 2019-05-09T08:40:59Z 2019-05-22T08:19:07Z Text Entry Boxes: Back to Basics

Intro

Reasons for this article are multiple. I watched a basic tutorial yesterday that skips a very important step and includes a cumbersome unnecessary workflow. Lot of questions appear on social media including Adobe forums and eLearning community. Lot of my tutorials for Text Entry Boxes include example files published to SWF, and were written for older versions. Time to translate everything to the most recent version (11.0.1.266 today) and for HTML output because there are minor differences. This first article is very basic, meant for newbies or for more advanced developers to refresh their memory.

Validated or Not

Text Entry Boxes are Interactive Objects. It may be a bit confusing since CP8 (change of UI) that you have to find them under the Text Button, not on the Interactions button. There are a couple of ways to recognize interactive objets:

  • Their timeline (shen not selected) is green
  • In the Properties panel you have a tab Actions, allowing to trigger one or two actions
  • You can turn on Reporting in the Actions tab. A score attached to the objet (default = 1pt) can be added to the total quiz score.

Text Entry Boxes allow to let the learner enter text, which will be stored in an associated variable. This means that it the value can be used later on. It is one of the two interactive objects that will be automatically inserted when creating a software simultaion in Training or Assessment mode (the other object is the click box), whenever the learner is required to fill in a field. In Captivate tthe only other ways to allow learners to put in text is by using the Notes or the Scrolling Text Interactions.

Text Entry Boxes can be used in two ways:. 

Not Validated

This is the default setup, learner can enter whatever he wants,  any entry is considered to be correct. 

However you can restrain the characters that may be used by clicking the More Options button, and you can set the required number of characters as well. If you activate the option 'Auto Submit' it will be submitted when the lenght of the entry has been reached. You don't need the Submit button in that case, can drag it out to the scratch area. If you don't activate anything in More Options, all characters (numeric as well) will be accepted but that option will (strangely) not be checked.

Let us look at the Actions tab. As with quiz and Knowledge check slides, you have a Success action and - in case of limited attempts - a Last Attempt action. That is a bit confusing, because any answer is considered to be correct for a non-validated Text Entry Box.  and the cause for a question that pops up sometimes in the forums. There is only a Success event, which means the Success action will be done all the time. Look at an example from a recent question:

"I offer 3 attempts to fill in a TEB, but it is only possible to enter once, the playhead moves on after the first submission'. 

Default Success action is set to Continue for a TEB.  This action will be executed after the first attempt, playhead moves on indeed. To avoid that, you could change the Success action to 'No action'. Result: user will have to fill in the field three times, after the third submission the Last Attempt action will be done. Maybe not what you want?  An easy solution is to add a custom button 'Next' to move to the next slide for users who do not want to fill in the field 3 times.

There is no built-in functionality to check if anything has been typed in the field when the Submit button is clicked. You can use the workflow described in this post if you don't want to end up with an empty variable.

Option 'Reporting' will be dimmed for a non-validated TEB, which is logical. 

Sometimes ignored, but worth mentioning: if you expect to have a long text to be entered, please check the option 'Show Scrollbar'. You can see it activated in the most recent screenshot.

The shortcut key is Enter, which is pretty common to confirm an entry in a form field. You can change it to TAB if you have mulltiple TEB's on the slide. 



Validated

A Text Entry Box is validated when you check that option.  WIth the selected TEB a HUD will appear to enter the possible correct answers using the + button.  It is recommended to put the By default the option 'Case sensitive' is not checked, but I did so in this screenshot:

Tip: you can resize the TEB, it is not necessary to put the longest entry on top as is the case for FIB quest

Because you have defined correct answers, the TEB has now two events: the Success event, and the Failure event if you have a limited number of attempts. Success action is only happening if a correct answer is given, the Last Attempt action after the last attempt if that was still a failure. Be sure to turn on the Success and Failure captions. There is no Retry message as you can have for quiz slides, nor multiple Failure messages. I have a workaround for that, but that is outside of the scope of this basic post.

A validated TEB can be scored, the score can be added to the Quiz total (will appear in the Advanced Interaction panel) and be reported. As I mentioned before, when creating a Software Simulation in Training or Assessment mode, you will see that reporting is turned on automatically.

Typical use case for validated TEB's: use multiple TEB's to create a custom Fill-in-the-Blank question, if you want to have each blank field to be scored individually. That is not possible with the default FIB quiz slide.


Associated Variable

A Text Entry Box needs a, associated variable to be functional. That is the reason why a generic variable is created automatically. It has the same name as the Text Entry Box, which is a bit confusing because the general 'law' in Captivate is never to reuse a name for a second item. However there is a very easy workflow to create and associate immediately a user variable with a more significant name. No need at all to open the Variables dialog box and create that user variable (as you can see in other tutorials). Follow these steps, after having inserted the Text Entry Box (validated or not):

  1. Click the X button next to the Variable field which currently contains the generic variable (in the screenshot it is "Text_Entry_Box_3"
  2. Type a name for the user variable. It will be created and associated with the TEB. In the screenshot: "v_name"

You can verify (not necessary) in the Variables dialog box. The original variable with the generic name is still there, but as you can see in the following image, no longer in use. If you are in spring cleaning mode you can safely delete it.

Displaying Variable

This is not specific for a TEB variable, but for all variables. More details in this post.

Do not type in the variable in a text container with the surrounding $$ but use the X button in the Properties panel (consistent, also X button). Not only do you avoid typos that way (variables are case sensitive) but you can check the number of characters that will be displayed. Default length is 50, but that may be too low, in which case you have to edit this length.

Text wrapping

Often overlooked by developers: it is possible to have text wrapping in a TEB. You just have to activate the option 'Show Scrollbar' which is disabled by default:


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1395293 2019-04-09T13:10:48Z 2019-04-09T13:11:37Z Showing Hint with a Delay

Why?

Recently in this thread user asked how to control the appearance of a hint caption.  It was meant to save some frustrations to the learner: hint should appear automatically after some seconds (to be defined), but should not appear when the learner had performed a certain action before that time. This is clearly not possible with the inbuilt Hint messages for interactive buttons. They only appear when the learner is approaching the place where he should click. A custom solution needed to be found. Three solutions were posted, interesting to have a look and compare them. Personally I always bear in mind that someone would like to use this workflow in a fluid boxes responsive project, and that limits the possibilities because stacking is not allowed in normal fluid boxes. We have multistate objects and since a couple of versions a “Delay Next actions….” command.

Example movie

Watch this simple example before reading the explanation:

You will see two slides where a Hint can appear if you are not successful within a delay: slide 2 (arrows) and the Drag&Drop slide (3). I used an almost identical workflow for both slides with a Shared Action triggered with the On Enter Slide event, and a simple advanced action triggered by the arrows (slide 2) or by the object actions (slide 3). Both slides have a hint which is a multistate shape. No variables were used. Slides 4 and 5 show the used actions.

If you prefer to watch the rescalable version, use this link.


Workflow

Hint = multistate object

Both Hints on slides 2-3 are multistate objects. The normal state is the green text bubble, the second state ‘Void’ is completely empty:

On Enter Shared Action

The on Enter action has to perform 4 commands:
  • Hide the Hint shape
  • Wait for a number of seconds
  • Show the Hint shape
  • Apply an effect (I used an emphasize effect).

Only two items needed to be defined as parameters: the Hint shape itself (compulsory parameter) and the literal used for the Delay, to make it possible to have a variable delay if wanted. The Parameter dialog box will look like this:

TIP: although both slides 2 and 3 are pausing at 1,5secs (default pausing point), the command ‘Delay Next Actions by…. ‘ will NOT be paused, timer just continues. That behavior is a big advantage for this particular use case!

Advanced Action ArrowAct

It would have been possible to use a simple action in this case, but the advantage of an advanced action was that I could assign it in one workflow to all the arrows on this slide.

What is the purpose of the Continue command? An advanced action will not release the playhead automatically as is possible with a simple action. On slide 2 a Next button has been added, with a timeline starting after the pausing point of the Arrow shapes acting as buttons. Release of the playhead is necessary to make the Next button visible.

Advanced Action DragAct

Although the advantage of being able to assign the advanced action at once to all the object actions doesn’t exist (could have used a simple action), it was so easy to create a duplicate of the first action that I kept with an advanced action/

It has been assigned to the 4 possible Object Actions in that dialog box, which you find in the Properties panel for the Drop target, under the Format tab. 'Object Actions'.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1395215 2019-04-08T13:14:51Z 2019-04-08T13:14:51Z Character Editing - part 2 (Interactive Video)

In a previous article I described the workflow to edit a Character (from Media) with Photoshop, without damaging the original image. In this interactive video you’ll see the workflow: an inserted character from the Illustrated category will change colors and be flipped. This very simple workflow is suited only for regions with solid colors. The next interactive video will show the workflow to change a color in a photographic image.

Watch this video:

If you prefer watching a rescalable project on any device, use this link: CharacterEditPhotoshop

I used Photoshop CC2019 as editor, but the workflow is pretty much the same in older versions.
]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1391345 2019-03-29T12:59:27Z 2019-03-29T12:59:27Z Audio in Captivate - More Tips

Why?

Recently I answered several questions about Audio in Captivate.  Maybe they can be useful for other Captivate users, decided to write this short blog. Although personally I mostly use Adobe Audition to record and edit audio clips for Captivate, this blog will focus only on the Audio features within Captivate.

In the past I have posted several articles about audio. Some tweaks can be found in this one which I created with CP2017. Tips here were not yet published. 

Merging of Audio clips (slide audio)

For HMTL5 output audio (and video) has to be generated when entering a slide with audio. For long clips (to be avoided, better split up on more slides) that can take a while and could even lead to synchronizing problems. 

In the past (SWF output) I sometimes used Project audio, which was distributed over all the slides, using the Audtion roundtripping. This workflow should be avoided now, because that would mean that the full project audio has to be loaded on the first slide, which will lead to considerably long waiting time.

When inserting slide audio, the slide timeline duration  will be extended to the length of the audio timeline, when the audio duration is longer than the original slide duration. It will start on the first frame of the slide, and end on the last frame. As I read in forum questions like this it happens that the total number of audio clips seems to decrease. Reason is that Captivate ‘thinks’ that audio has been distributed over some slides, and merges those audio clips to one audio clip. This leads to a similar situation as with project audio: it takes a while before that longer clip is loaded and often synchronizing with appearance of slide items is screwed up. 

Here is a simple trick to avoid that merging: increase the slide duration a little bit, move the audio timeline on each slide, to have  small gap before and after the audio. Merging will no longer occur.

Copy/Paste Segment 

In this question user wanted to move a segment from one audio clip on a slide to another clip. Both were also slide audio, this trick will not work with other types of audio.

Opening an audio clip in the Editor, shows that you can select a segment, cut or copy it, then move the playhead and paste that segment in another location. However that is not possible between different audio clips.


My trick: choose Audio, Edit, Project instead of Slide. Even if you have gaps as recommended in the first tip, the whole project audio will open in the editor. You see the slide markers, can use now Copy or Cut for a selected segment, move to another slide and paste the segment there. Watch this short video:

Drawback: as you’ll have seen in the video, Closed Captioning will be turned off and you’ll have to edit them to cope with changes in audio clips.

Library and Audio

Some short tips, related to the Library, which is one of my favorite features in Captivate.
  • If you import audio, you choose best for the uncompressed WAV-format over MP3.  Only wav files can be edited. If you want to edit an imported MP3-file, Captivate has to expand that file to create a WAV file. You will see 2 files with different format in the LibraryAudio folder in that case. Do not worry about size of the WAV files, when published all WAV files will be compressed by Captivate to MP3, and you can set up the compression parameters.

  • When you edit an audio clip, the original clip will not disappear but a new clip will be generated. You can always get back to the original clip in the Library if something went wrong.

  • Want to use TTS to create audio clips to be used as object audio or with the Play Audio command? When generating the audio clip from slide notes or sentences in the TTS dialog box, it will be automatically inserted as slide audio and the slide duration will be increased to match the clip. Since the audio clip will also be in the Library, find it using the right-click menu and eventually rename the clip to make it recognizable. You can safely delete the slide audio, reset the slide duration to its original length. Drag the audio clip from the Library to an object for Object Audio. Use it with the Play Audio command, which presents you with a list of Library clips. 

  • As explained in this blog all assets in any project library can be used as external library in other projects. This is also the case for audio files of course.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1389163 2019-03-23T19:47:56Z 2019-06-10T13:38:57Z Character editing - part 1

Why?

Yesterday a question appeared on the forums: ‘How to save in the Library the edits to Characters’. In this use case it was meant to save the flipped version of the Character. In the Library the original version will always be kept. Result: when you drag another instance of the character on a slide, it will not be flipped. Edits to the character, made with the Edit image functionalities will never be saved to the original image in the Library.

Characters folder

As you probably know, the downloaded characters are stored (for Windows) in Public Documents, under AdobeeLearning Assets. If you have multiple versions of Captivate, you’ll find a subfolder ‘Characters xx’ for each of the versions. Because of that location you are able to edit the characters even without Administrator rights. 

For each character in the folder you’ll have a Thumbnails and an Images subfolder. The Thumbnails show all what is available for that character, the Images only the downloaded image, both in a High and a Low version.  Although you can always choose for 3 ways of inserting a character: Full, Half and CloseUp, there is only one image in Low and High version, real images for those who were downloaded, placeholders for the others. 

When you insert a character in a Captivate project, it will appear on the stage and in the Library. The file showing up in the Library can be one of the 6 possible versions: High/Low in CloseUp, Half or Full version. 

Editing Characters

On the stage

You can edit the Character  on the stage with the set of editing possibilities provided by Captivate:

  • Resizing, flipping, rotating using the Options tab in the Properties panel (inspector). 
  • Using the Edit Image button in the Properties.  It is a limited set of editing functionality but could be sufficient in some circumstances. In this image you’ll see some edited instances of the same character.

This workflow will not change the original image in the Library. However if you need to use the same edited image multiple times, you’ll have to use the copy/paste workflow. The editing is not saved in the Library.

In the Library

Eidting on the stage will keep the original image save. If you want to reuse the edited image multiple times in your course it can be a good idea to use the ‘Edit with….’ option on the image in the Library. You have to be careful not to change the original image as it is stored on your system. 

Do NOT Rename

Renaming the image in the Library is not a solution: when using Edit with… the original name will appear in the editing application. Have a look at these screenshots: renamed the image in the Library, opened it in Photoshop with ‘Edit with…’ and you’ll see the original name in PS.

If you save it that way that particular instance of the image will be changed also for future project. Bit confusing, but the other 5 instances remain untouched. In this example I edited the Low, Half version of Sarah01 (Illustrated category). As you can see in this screenshot, the other instances keep their original look, although you’ll find only one image for Low on your system.

Do Duplicate

What is the correct way to preserve the original image? You have to duplicate the image in the Library and edit the duplicate. You can see the result on this screenshot for the Sticky Woman, low resolution, Half instance:

Roundtripping in Photoshop with the duplicate image is not happening the first time as you are used to for normal images. It will get a generic name in PS, and you’ll have to export it to a PNG file, to a wanted location after the first editing. Later on roundtripping will happen in the usual way. I will show the workflow step-by-step in a future interactive video.

Multiple edited characters

If I need multiple edited characters in a course, to be reused over and over again I would prefer to create a layered Photoshop file and use the Import functionality. You did see that I created an extra folder for Characters under the Images folder in the Library in the last screenshot. With an Imported PS file that would be unnecessary.  Do not forget that it is always possible to use edited characters in the Library in any other project, by using the External Library workflow.

How?

Watch this interactive video to see how you can realize the simple edits I showed in the screenshots in this blog.   You ‘ll also get an interactive video explaining the creation and use of an imported Photoshop source file. This post was meant as an introduction.
]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1372527 2019-02-10T17:11:53Z 2019-02-10T17:11:53Z Responsive Projects: Object styles

Intro

This is the last blog in a sequence of 3. In the first article I explained meaning of Object Styles when creating a custom theme, terminology and how to create a custom object style based on an example on the stage.

The second post explored in depth the Object Style Manager, for creation and management of Object Styles.

In this last article the focus is on Responsive projects: tips and tricks to keep in mind for Object Styles in a responsive theme. Since CP2017 Captivate offers two workflows for responsive projects: first is using Fluid Boxes, second older using Breakpoint Views. Tips will be specific for each of those workflows. If you want to re-read the advantages/limitations of both workflows, may I recommend reading this post. I also mention the workflow of  Rescalable HTML project as alternative for responsive projects.

Fluid Boxes project

For such a project I recommend to use real fluid boxes whenever possible. It is the only way of having a real fluid layout. If you demote (use that negative word on purpose) a Fluid box to a static fluid box to circumvent some limitations like stacking of objects, you lose the real fluidity and the layout can look very weird on smaller browser resolutions.  A static fluid box keeps the width/height ratio, and that may cripple other real fluid boxes on the slide, even when you control the exact position.

Objects not allowed in normal Fluid Boxes

What are the limitations of real fluid boxes? Many objects cannot be used. For the Object styles, that means you don’t have to bother about styling those objects. They all are in the category of the Standard objects:


  • Highlight Box cannot be used because it is meant to be stacked over the object to want to highlight. If outer fill is selected, it is covering up the rest of the slide which is breaking the stack rule..
  • Rollovers are not possible in any fluid box (not even in a static fluid box): Rollover Area, Rollover Slidelet, Slidelet.

  • Zoom object cannot be used for the same stacking rule: Zoom Source and Zoom Destination

Font size in Fluid Boxes

The font size which you define in the Object style, will be used for the highest browser resolution. In the default setup, it is indicated as Desktop (default = 1024x627px). If you have set up a higher resolution for the desktop, maybe for a 1280px wide resolution, you could prefer a slightly larger font size.

No need to bother about the other browser resolutions. After publishing fonts will decrease in size smoothly until the minimum font size is reached. At that moment the famous ‘icon’ will appear to indicating text doesn’t fit in the available text container (shape or caption). Just one tip: set the minimum font size to 10p if you expect to have learners on small browser resolutions.

Breakpoints

To have complete control over the layout in different resolutions, you need to switch to Breakpoint mode workflow, using an option in the Project menu.

Objects not allowed in Breakpoints

All objects allowed for HTML output can be used in Breakpoint mode.  When you check the HTML5 tracker under Project menu, you’ll see warnings about unsupported items like Slide transitions, Text animations. The warning also points to Rollover objects. However they will be functional on desktop/laptop screens when a trackpad or a mouse is used. On Mobile screens, the rollovers will not be functional. I would not recommend to use the Rollover slidelet because it is no longer actively supported and can be buggy.

Font size in Breakpoints

In a Breakpoint views project, the font size will not decrease smoothly when you decrease the resolution of the browser. You have to set up the font size for all the Breakpoints you want to use in your project: from 3 (minimum) to 5 (maximum). Between those breakpoints the font size will remain fixed, equal to the setup for the  higher of the two breakpoints the browser resolution is situation: you’ll keep the font size of the Desktop view until the resolution of the landscape Tablet (if you activated it) or the Portrait Tablet is reached.

It is no secret that the Adobe team is promoting the Fluid Boxes workflow over the Breakpoints (which mean more work but offer more control to the developer). For that reason, there are no real Breakpoint views themes packaged with Captivate 11 (CP2019) anymore. A responsive project will always start with a Fluid Boxes, where you can use a packaged or custom theme. When switching to Breakpoints that theme loses all fluid boxes, but the object styles for fonts are not changed: all breakpoint views keep the same font size which is the maximum font size set up for Desktop (or higher Custom size) in the Fluid Boxes.

This is a situation where I use the Object Style Manager to start with the tedious work, eventually to be edited later on while designing the master slides. The OSM will now have a dropdown list for the activated Breakpoints, whenever font size is needed. That is the case for the Captions and Shapes under Standard Objects and for most of the Quizzing Objects. Of course, you don’t have to bother about Captions if you only use shapes and vice versa. Look at this screenshot, for the Title shape, common style in most themes:

When you check the font size for the 4 Breakpoints below the Desktop, you’ll see that the size is fixed. You need to decrease the size gradually. Minimum font size is 10pt. It is a bit guessing at the start to find a good distribution between the maximum and that minimum font size (which is for Mobile Portrait). My workflow:

  • I look for the smallest used font size on Desktop, that will have to be 10pt for the Mobile Portrait.

  • Once you have chosen Mobile Portrait in the dropdown list, that resolution will remain for the other styles until you change again. Edit all mobile font sizes at once, related to that smallest size.

  • Landscape Tablet doesn’t have to be much smaller than Desktop, unless you use a really big resolution for the desktop breakpoint. So I’ll set up all the font sizes for that breakpoint.

  • etc.

Here is a check list of the objects I usually edit. Know that I never use captions, only shapes as text containers. As for the buttons, only shapes and transparent buttons (compulsory for quiz slides) are used.  They appear in the same sequence as in the OSM.

  • Buttons: I edit the style(s) for the Transparent button and for the Quiz button here (both will also appear for Buttons in the Quizzing category)
  • Text Entry Box: edit only one style which I set as default style.
  • Text Entry Box button switch to Transparent button whose default style has already been edited
  • Smart Shape: for use as text container.
  • Title: often start with 16p for the lowest breakpoint
  • Subtitle: often start with 14p for the lowest breakpoint
  • Success/Failure/Hint Shape: all need same font sizes. Beware some included themes use same style (Success), you’ll want different styles but with same font size in breakpoints.
  • Quizzing Partial Correct Shape: all other shapes use a default style which has been edited under the Standard objects.
  • Quizzing Progress indicator
  • Quizzing Review Area: is only used on the score slide to store the text about passing/failing
  • Short Answer

IMPORTANT:  Do not forget to save the theme when you have finished. Indicate clearly that it is a Breakpoint Views theme. That way you will be able to apply the theme when you have converted another project to a Breakpoint views workflow. If you change the design a lot throughout , it may be worthwhile to create a Blank project with edited font sizes for Breakpoint Views projects.

If you do use Breakpoint views because you have learners using a lot of devices and want to have a simple look for the smallest screens instead of having the same layout fluidized, please log feature requests. It should be possible to choose which workflow to prefer when creating a responsive project: Breakpoints or Fluid Boxes. Fluid Boxes should not be imposed by default  as is the case at this moment in CP2019.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1370006 2019-02-03T21:29:09Z 2019-06-30T13:39:48Z Manage the Object Style Manager!


Copy/Paste Appearance, new feature in version 11.5: how does it fit with Object styles? Have a look at this post:

Copy/Paste Appearance

Intro

In a first introductory post I explained the importance of Object Styles in any Theme, the terminology and how you can create a custom style based from example object (created on a normal slide). In that article I already posted some screenshots taken from the Object Style manager, but didn’t really provide an in-depth explanation of that window.  Do you need to use it? Read this blog if you want to know the answer to that question.

Object Style Manager

You can open the OSM directly from the Welcome screen, without opening any project. The option is available under the Edit menu, or by using the shortcut key SHIFT-F7. Similar to Preferences, which can also be opened from that location (SHIFT-F8) any changes made that way to object styles are global changes, which means they will be applied to all future projects. If you open the OSM within a project, the changes will be applied only to that project. Of course, since Object Styles are part of a theme, if you save the customized theme you can applied it later to any other project as well.

There are some alternatives to open the OSM:

  • In Preferences, Defaults you can set up some General items like slide duration, color of guides … but also the default duration of a bunch of object types. You’ll get a hyperlink to the object style which is the Default style, which will open the OSM. In this screenshot you see this for the Highlight box; where the default style is the Blue Highlight box.:
  • Under Preferences, Recording you can set up the styles used during the creation of software simulations. You also find a button ‘Create new Style’ which will open the OSM.
The Object Style Manager has 2 main categories: all Quizzing objects/styles are in the second  category “Quizzing Objects”, the other objects/Styles in the first category “Standard Objects”. The triangle button is as usual meant to expand a category or a subcategory. There is one special object ‘runtime dialog box’.  Selecting an object in the top left part will show to the right to available styles for that object, and in the second half of the dialog box all the elements of the style. Down left you see a small ‘preview’ which is not always very WYSIWYG. These are the parts of the OSM dialog box. 
  1. Objects: I have selected the Quiz button ‘Submit’ in the screenshot. 

  2. Styles: a button has 4 InBuilt states, but only 3 are included in the style (Visited is missing). I selected the Normal state for the button. This is the default style, but you are free to choose one of the other styles in the list, and you could set it to be the default as well.  You can add a custom style (Clone button is highlighted in yellow) by duplicating an existing style and reformatting it. However it is not possible to have a shape button for this quiz button, because there is no original shape button style available in the style list. 

  3. Components: shows all the components of the style. In this case that is the Button type (here Transparent button, you can change to Text button or Image button), the formatting of the text (font, font size, attribute, faux attribute, color) and Fill/stroke settings for this button. If you switch to a Text or Image button, that will be a lot more limited.  The label on the button is not part of the style, you can only change it after insertion on the slide in the Properties panel.

  4. Under the Objects window you see a Preview. To be able to see it, the default Label ‘Submit’ is used here.

  5. At the bottom you find two buttons Import which allows to import styles that have been exported. The Export button has options which I expanded. The resulting file will have the extension cps.

Workflows

Creating a Custom Object Style

In the first post I explained how to create a custom style based from an example on the stage. Alternative is to create it  in the OSM, That workflow is the only way create Global styles (before opening any project).  The step-by-step workflow to create a custom Highlight Box will be used as an example. 
  • In the creation of a theme you  use only colors from the Theme Colors palette (step 1 for a custom theme). It is not possible to change the default theme, nor the color palette from the welcome screen (for global changes). That choice is missing in the Preferences. For that reason, you need to have the proper theme set as default theme, have the correct Theme Colors palette applied to it. For the example workflow here I set Windswept (packaged with CP2019) as default theme, and kept the custom Color palette linked with that theme. That color palette looks like  in this screenshot (only the main colors):
    The bright red (color 6) would be excellent as stroke color for the custom Highlight Box.

  • In the Object Style Manager, I find the object ‘Highlight Box’ in the category Standard Objects.  This object has 6 default styles. The first labeled ‘…Blue’ is set as default style, but nothing is blue :).  In some other themes this highlight box has a light blue stroke. That is not the case in the Windswept theme, because backgrounds are mostly blue: stroke is white; fill is also white but with opacity = 20%. There is no transition. 
    I expanded the style (with the triangle) and it shows two states: Normal and Rollover. For highlight boxes however the Rollover state is not functional (yet). Same styles can be used for Rollover area (and Zoom area), where a defined Rollover state will be visible. For the Highlight box we focus on the Normal state only.

  • Although I could edit this default style, I prefer to create a style with a more meaningful name. Use the Clone button to create a new style, and rename it to RedHighlight. In the screenshot see the changes. The color dialog box will always show the Theme Colors panel (highlighted first button) since we start from an existing Theme:
    Stroke width is increased to 3px, the option 'Fill Outer Area' is checked and set (visible in the Preview) to a 20% dark gray from the tints in the Theme Colors palette.

  • If you want this custom style to be used whenever a highlight box is inserted, check the option ‘Set as Default’. The Style will get marked in bold (Style box). You still have the previous 5 styles available to be used manually.

Tip: Same styles are also available for Zoom area and for Rollover Area, as well as  the new custom style, which will however not be the default style for those objects. 

Promoting style to Default style

In the screenshot Default styles are indicated by the Bold attribute. You can change that default style using the checkbox ‘Set as Default’ which was my action for the new custom style. Be sure to put the style you suppose  to use most as Default style. I often see themes where a lot of new custom styles are created, either on the stage from example, or by cloning an existing style, but the original styles are left as default styles. Themes are meant to save time, not to increase the amount of work by having to change the styles for individual objects. 

No panic needed when you forgot to save the theme under a custom name, but have edited a default packaged theme. You can always re-install the original themes from the original Gallery/Layouts folder to the duplicate folder in Public documents (Windows).

Promotion to default style can be done globally (as above) or project-based within an open project.

Cleaning up Styles

No one likes cleaning up! Sometimes the Styles list can become very long, and there is no way to rearrange its sequence (to have the most used styles on top). 

When a style is selected in the Style box, the Delete button will become active(look at the last screenshot where the RedHighlight is selected as style). Don’t hesitate to delete what you’ll never use. That may be default styles from the original theme as well (you did see how to restore the theme above).  

It is not possible to delete states (as for the Highlight box, where the Rollover state is unused), nor objects. You always have to keep at least one style for each object, and that will be the default style. If you try to delete a custom default style, you will be asked which style you’ll prefer to use as default style before the style is deleted.

When do I use OSM?

To check style components

OSM is the only place where you can see exactly what is included in an object style. That was the reason I mentioned it in my first post, and showed screenshots of different types of Objects. Remember: sometimes the Transition of an object is included, which is not to be found in the Properties panel, but in the Timing Properties panel. 

Set a global object style

One example: I don’t like the default Highlight Box style, which is too ‘bland’. The line is very thin, light blue, with an inner light fill (20% Alpha). I prefer to have a striking color, from the Theme Colors palette, wider stroke and have the outer area dimmed by another semi-transparent color of the Theme Colors palette. I always create that palette before starting with the Object Styles. You have to apply the color palette to the default theme. Before opening a project I will create this global style and set it as default style.  

Change Font for all styles

If the company has a style sheet,it will often include one or more specific fonts. There is no quick way to replace the used font in the theme (often Trebuchet in CP2019's packaged themes) by a company font. In that case I use the OSM and browse through all objects using text. Captions and Shapes do need the change, but if you only use Shapes as text containers, you can of course skip the Captions.  Some other objects use text as well: buttons, TEB’s, and quite a lot of Quizzing objects. Some styles with text will appear both under Standard Objects and Quizzing objects. 

Beware: if you use Learning Interactions, do not forget that they do not ‘obey’ to the OSM! You will have to change the fonts there as well. Some interactions offer the possibility to switch to the Theme Colors, but that is not available for other components of styles.

What is different for Responsive projects?

In a last post I will specify what is different in Responsive projects, both for object styles and the Object Style manager. Both workflows: Fluid Boxes and Breakpoint Views will be treated in that third article.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1368562 2019-01-30T16:47:23Z 2019-01-30T16:47:23Z Theme mysteries?

Why?

This short blog is meant for newbies,  and is (again) due to what I hear/read on the forums, during (intermediate) training and consultancy job. Recently I tried to answer users in two threads concerning themes:

Change color in theme

Main Master Slide

The last one reports a serious bug in the Help documentation, the first one is more a lack in that documentation. It is a pity that the Help is not something you can cout on, a problem which is not new at all.  I started blogging about 10 years ago because of lacks and bugs in the Help.  An “amazing application which is Adobe Captivate” (a quote of a fellow ACP who is not present in this portal) deserves better!

I’ll try to answer those two questions here, and offer extra tips for Themes..

1. Theme Colors

Editing or developing a theme start with the colors which will be used consistently in that theme.  Each theme  packaged with Captivate  has a Theme Colors palette which is labeled with the same name as the theme.  As described in an old post, that palette has 10 colors + 5 extra tints for each color. It is always available in the Color Dialog box as first button, A well designed theme will use only those colors: backgrounds, fill and stroke colors, font color etc. Most Learning interactions have a button to apply the Theme Colors as well.

If you want to change one color in the palette, as asked in the mentioned forum thread:

  • Rename te original theme (see screenshot: orignal was WindSwept, I renamed to MyWind) in the box with the Palette
  • Click the Customize button: the 10 colors will appear in a dialog box.
  • Click the color you want to change, you can use the Swatches palette, or the Color Wheel (where you can type in the hexadecimal code of the color or the RGB numbers).
  • When finished, confirm using the Save button

Warning!

I already mentioned that the theme has to be well designed, only theme colors should have been used (is not always the case). Moreover no object style can be overridden (+ sign in the Style field) because for those the style will not change.

Another problem are the backgrounds. In the screenshot you see one of Captivate’s default themes, using several bluish colors (first three in the palette).  Those colors appear also in the backgrounds of several master slides: Title slide, Blank slide, etc You’ll find those backgrounds in the Library as…. images! That means they will not change automatically when ou change one of those bluish colors. That will only happen for the colors when they are used in object styles: fill of a shape, stroke of a shape etc….

As I wrote already multiple times: do not rely on names of the colors, they nave no meaning. In the theme mentioned above, the first color (Title) is never used for any title.

2. Main and other Master Slides

User did read this in the Help documentation, quote

The main master slide is the first slide in the Master Slide panel. The name of this slide is the same as the name of the theme. Objects and background color of this master slide appear on all other master slides. Each theme has one main master slide.”

This is indeed not fully correct, text obviously was never upgraded since version….6. First, second and last sentences are OK, but not the one with the bold text.

2.1 Color Main Master Slide

Have a look at this screenshot, where I show the Master Slide panel in front of the Main Master slide:

The name of the main master slide is indeed the name of the Theme (it is a custom theme based on WindSwept). The main master slide has a solid white color as background. There is NO global project background, the used background is ‘Custom’, and that means that you can have a solid color, a gradient, or a custom image/texture. Those are the same options as for a shape fill.

You will see that the label is not appearing in the Properties panel. You can add a label but it will be added to the original name (MyWindSwept), not replace it.

None of the daughter master slides has the white color as background. It may not be very clear, but Content02, Conter07, Conclusion and the Quizzing Master slides also have a solid color background, however it is light grey, not white. All master slides in this theme  use a  ‘Custom’ Background. Look at the Properties of the MyContent master slide

You see that the Background is Custom, which means that the color of the Main Master slide is not inherited. In this case the background is fille with an image from the Library.

To inherit the color of the Main Master slide background, the Background has to be set to ‘Master Slide Background’. Here is a screenshot of the Pearl theme (default theme if you didn’t change it), which has originally a gray scale Color palette. I changed the background of the Master Slide (which is also set to Custom) to a Solid color, light green. You see here the Properties panel of the Title master slide, which inherited that color. It could also have been a gradient or even an image/texture, would have been inherited as well for master slides set to ‘Master Slide Background’.

Conclusion

Summarizing about background color main master slide::

  1. Project Background is always an image which can be imported from the Library or from another location.

  2. Master Slide: where it will inherit the background of the Main Master slide. That can be the Project Background or a Custom Background (solid color, gradient, image/texture). It if is the Project Background, the result of ‘Master Slide’ and ‘Project Background’ is the same for a daughter master slide.

  3. Custom: which can be a solid color, a gradient or an image/texture.

It is clear that this sentence in the  Help text ‘background color of this main master slide appear on all other master slides’   is iwrong.

Warning: identical to the one under Theme Colors. If you use images as background, you’ll have to edit them separately when changing the Theme Colors palette, their colors will not change automatically.

2.2 Objects on Main Master slide

In the first screenshot you see two system variables on the main master slide: at bottom left the name of the author, bottom right the slide number. Those objects are not part of the background, since they have to be generated on runtime.  You could also have shape button (like a Next button) on the main master slide.

They will be inherited on master slides, which have the option ‘Show Main Master Slide Objects’ checked off. In the screenshot of the master slide ‘MyContent’ you see those objects appearing, and the option (highlighted) is checked. On the contrary, the Title master slide for that same theme is not showing those objects:

Usually in the packaged Captivate themes both Title master slide and Blank master slide will not show the Main Master slide objects. Quizzing master slides can show them, but in many instances it would be better to turn them off. Be careful with the Blank master slide: it is meant to be used for PPT import, and for Software simulations.  It is not recommended to have extra main master slides on them.  In the WindSwept theme the Blank master slide has an custom image background, which is very strange, not at all the case in most themes.

Conclusion: 

About the objects on the main master slide, the Help text “Objects …. of this master slide appear on all other master slides” is wrong.

Themes and project types

Be careful when editing/creating themes because you have 3 different types of projects and you need a theme of that type:

  • A non-responsive theme cannot be used for responsive projects with Fluid Boxes, nor for responsive projects with Breakpoint Views.

  • A responsive theme with fluid boxes (as are most included themes in Captivate, can be used for a non-responsive project, the fluid boxes will be ignored. However be careful: if you edit that theme and save it, you’ll not be able to use it for a responsive project anymore.

  • A responsive theme with Breakpoint views is not included with Captivate. You need to check  at least the object styles where text is used, because they need a font size for each breakpoint. You can use it for a non-responsive project, with the same restriction as above when saving the theme.

Some more links for Themes:

Themes and Templates

Fluid-boxes and master slides

Fluid Quiz Slides

Editing/Repairing Themes

Object Styles in Themes


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1368518 2019-01-30T15:00:36Z 2019-01-30T16:12:16Z Object Styles in a Theme

Intro

A while ago I posted a blog comparing the use of a Theme for consistent design of a project, with the older Template workflow (which is buggy in the recent versions):

What's in a Theme/Template?

I always start any project by the  creation of  a custom theme, starting mostly from the Blank theme (has the minimum amount of master slides needed for a theme). More recently I offered some tips in Themes Q&A

Due to my past as civil engineer, I see a theme as the structure of a building :

  1. Theme colors palette (see Theme Colors) is the foundation. Palette is independent on type of theme: whether iit is non-responsive, responsive with fluid boxes or with breakpoint views.
  2. Object styles, the topic of this blog are the pillars (vertical structural elements). For Breakpoint views you need slightly different styles for objects containing text.
  3. Master slides are the beams (horizontal structural elements). As in a building there is a lot of interaction between beams and pillars, together they are the structure You will often going back and forth with object styles while creating the master slides. Master slides depend on type of theme.
  4. Can be considered as optional: Recording defaults and Skin, depending on the project if you need them

Now you are ready to complete the building by filling in the walls, floors…. In Captivate we call them slides.and objects.

Captivate’s Object Styles

Contrary to a word processor, Captivate has no Text styles as you know from MS Word:   a bunch of paragraph styles (includes leading, space before and after paragraph, indents, bullets….) and word/character styles. I will post a future blog about the Object Style Manager where you’ll find all object styles used in Captivate’s themes. This blog will show some screenshots taken from the OSM, because you can see what is included in each style:

  • Caption style: includes indeed the font, font size, eventually attributes (bold, italic, light), font color and leading, alignment but also the type of caption, margins within the caption, and the transition type. In the themes packaged with Captivate the caption type is mostly set to transparent, but that was not always the case in older versions and doesn’t need to be always transparent. It comes closes to what you know as text styles, but still... transition is unknown in MS Word..
  • Text Entry Box style: has the formatting of the text but also the Fill (color and transparency) and Transition setting. You cannot edit the stroke, not included.
  • Button style: is more complicated, includes formatting of 3 Inbuilt states (Visited, 4th state is not included).  In the screenshot, which shows a so-called 'Default style' (see later)  you see that when you insert a button (Interactions, Button) in these settings a Transparent button will be inserted. For each state  the text formatting of the label is defined (in case of a Text or a Transparent, button. That setting will not appear for an Image button which cannot have a label. For the transparent button , style includes also the fill (here a gradient, with full opacity), stroke (color, width and style) and the corner radius. Formatting for the two other types is much more limited.
  • Smart Shape style: the most versatile object in Captivate can be a text container, hence the text formatting similar to captions. SInce it can also be used as a button, you can define the formatting of  the same InBuilt states as for the Transparent button. The corner radius is missing  You can choose a rounded rectangle as start for a shape button, and it has a yellow handle to edit the corner radius.

Terminology

It seems useful to list up some important terms concerning Captivate's Object Styles:

Default Style: Previous screenshots showed styles set as ‘Default style’. The checkbox to mark a style as default,  is automatically dimmed in that case.  When you insert an object of that type, it will automatically be inserted with that default style. The other styles, not marked as default style, can be used but you’ll have to change them manually after inserting the object. Here is an OSM  screenshot showing the presence of 3 possible TEB styles. In a previous screenshot I had the Yellow Fill set as default style, this is one of the other styles that can be used:

Overridden Style: If you edit some formatting after inserting an object with its default or manually changed style on the stage, a + sign will precede the style name as you can see in this screenshot (I changed the transparency of the fill and the font size). This is labeled as an ‘overridden style’.

Using overridden styles is considered bad practice in any style-based application. Why? It means that if you have to make changes later on, this object will not be touched anymore. Maybe your client/boss wants to have another font for the TEB? If this is the only TEB in the course, you can find it and edit this TEB in place, thus creating an overridden style. When dealing with more TEB’s it is much easier to edit the object style itself (see later). The edited style will be applied automatically to all TEB’s in the course, exception are those with an overridden style.

Style menu in Properties panel : many sections in the Properties panel have a so-called ‘hamburger’ (or hotdog) menu button. The Styles part has such a mneu button. In this screenshot you see the style menu expanded for theTEB with the overridden style (previous screenshot). You  can choose to create a New style (if I want to keep the default style for later to be inserted TEB’s) or Save the changes to the existing style if you want all the TEB’s in this project to have this edited style. There is also a Reset Style to revert to the original style in this menu.

The option Apply this style to…. is a bit confusing for this situation. Suppose you have another TEB using the Default TEB Blue Fill Style you can use ‘Apply this Style to all objects with Style Default TEB Blue Fill, but it will be the original Yellow style that will be applied, not the overridden style. I would prefer to save first the edited Yellow style.

Creation of a Custom Style

You can create a style in the Object Style Manager, as I will explain in a later blog,  but it is easier to use the ‘from example’ workflow. Step-by-step:

  1. Have a quick look at the Object Style Manager to see what is included in the style for your object type. I showed several screenshots above. It is not always clear from the Properties panel which features are included in the style. Example: Transition is included in some styles, not visible in the Properties panel but in the Timing Properties panel.

  2. Insert an object of that type on the stage. It will be inserted with the style set as Default style.

  3. Edit the features which you detected under 1. until you have the wanted look. That is easier to verify on the stage than with the tiny Preview window in the OSM..  Do not forget the states (Normal, Rollover, Down) for interactive objects. The style field (Properties) will show the +sign to indicate the overridden default style.

  4. Open the Style menu (hamburger) and choose the option ‘Create New Style’

  5. Give the style a significant name and confirm with OK

The style will appear in the Object Style Manager. But you don’t have to use the OSM for these actions

  • Set the style as Default style: is possible from the same Style Menu. Beware: for the example of the shape button, I would not set this as the default style because all shapes would take on that style. Really hope that we can have a default shape button style which is different from the default smart shape style in a future release.

  • Apply this style for all objects with a specific style. This is a workaround I sometimes use: for shape buttons I don’t use the default smart shape style, but one of the other styles (like a hint shape style if I don’t use it in the project) as long as I am not sure about the wanted button style. When I decide to create the definite style for all shape buttons, I can use the Apply this style to replace all those ‘hint’ shape styles by the new shape button style.

This problem only exists for shape buttons. Most other object types are not used for two different goals.

If you want to include features which are not part of the style in a quick way, use the duplicate functionality (CTRL-D). It will keep not only the same style in the copy, but all features, including eventually attached advanced actions.

Third element of your theme (structure) will be the master slides. Advantage of defining object styles before the master slides is that the inserted objects on the master slides will have the new default styles. That can save time.  Just one example: if you use shape buttons on master slides, you will not be able to use 'from example' workflow to create a style for those shape buttons. Reason: the State view cannot be opened when on a master slide, and you need to set up the states. For object styles with a Transition feature, you'll not be able to define them on the master slides neither, because you miss the Timing Properties panel for them.



]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1363289 2019-01-14T17:33:33Z 2019-01-14T17:33:33Z Shared or Advanced? Use case: Hide/show custom navigation

Why this use case?

I have been writing multiple articles about Shared actions (and Advanced actions), have presented webinars, trained developers.. Someone even labeled me as ‘Empress of Shared Actions’ but I still see this feature ignored by the big majority of even advanced Captivate users.  I will create a list of resources in another blog for those who want to learn more about them. This short showcase is an answer to a question posted recently in the portal. A typical use case for shared, actions, but the user tried to do it with one Advanced action. Since I couldn’t ask him for permission to use his question (being European I am respectful of his privacy), I will not point to the thread but explain the use case:
  • The navigation in the course is not accomplished by a default playbar but by custom navigation buttons. To make it simple, I will use only three buttons in my example: SB_Next,  SB_Back and SB_Home.

  • On some slides the navigation buttons have to be hidden, maybe because  dedicated buttons will appear at the end of the slide, thus forcing viewing the slide.

  • Because of that request, it is not possible to have the shape buttons on the master slide because they wouldn’t have an ID, which means you cannot control their visibility.

  • The Shape buttons have to be on the first slide, Timed for the rest of the project, always on top. This is only possible with shape buttons not with the three old types of buttons. Beware: if you use a responsive project developed with Fluid Boxes, objects timed for the rest of the project are not allowed.

One Advanced Action? Possible but tricky

The user proposed a solution where the value of the system variable cpInfoCurrentSlide was checked, and based on that number the buttons would be hidden or shown.  One great advantage of this system variable: the index starts with 1, which is exceptional because all the other incrementing system variables start with 0. Hence the Expression needed to restart a slide from its first frame (index of cpCmndGotoSldie starts with 0):

Expression  cpCmndGotoSlide = cpInfoCurrentSlide – 1

To make the use case specific: if I have  50  slides, and I want to hide the buttons on slides 5, 10, 15, 20, 25, 30, 35, 40 and 45 that could be done with one Advanced action like this:

IF cpInfoCurrentSlide is equal to 5     OR
    cpInfoCurrentSlide is equal to 10   OR
    cpInfoCurrentSlide is equal to 15   OR
    cpInfoCurrentSlide is equal to 20   OR
    cpInfoCurrentSlide is equal to 25   OR
    cpInfoCurrentSlide is equal to 30   OR
    cpInfoCurrentSlide is equal to 35   OR
    cpInfoCurrentSlide is equal to 40   OR
    cpInfoCurrentSlide is equal to 45   

  Hide Gr_Buttons
  Continue

ELSE

  Show Gr_Buttons
  Continue

You see that I grouped the three buttons in Gr_Buttons, contrary to the user who had several Hide commands.

Whiy is this tricky?  First of all, if you change the sequence of slides, add or delete slides, you’ll have to check the advanced action and change the literals (slide numbers). Moreover this long condition has to be attached On Enter for each slide, has to be evaluated on each slide, I don’t like that type of long conditions.  If you need to use this action for another course, you have to edit the condition, take into account the number of slides where you have to hide, and the exact slide numbers. Copying an advanced action from one course to another course is always a pain if the action is attached to a slide event, which is the case here .

Shared action

I have already blogged a lot about the advantages of shared actions. The action I designed for this use case, may seem bit complicated but it needed a lot of testing and understanding of the use of parameters which are literals. You can have a look at this published file. There is no content on the slides, I just indicated in the title if the buttons had to be visible or invisible. The used master slides is different as well. Reason: when you hide all buttons, there is no pausing point on the slide anymore. That is the reason why I added a transparent shape button covering the slide, and the mention ‘Click the slide to go to the next slide. A shape with two variables is inserted to follow the changes

I used three variables in this action:

  • v_show: has a default value of 1, because in the default setting the buttons are visible. This value is the only non-compulsory parameter, can be changed to 0 if the buttons have to be hidden.
  • v_visib: one of my popular variables which I import with a shared action as described in my recent post.
  • v_null: because I had to avoid double use of the literal 0, I used this variable with a default value of 0, it is also described in the same post.

The only variable that will be changed is the first one, you don’t have to bother about the other two variables.

The Shared Action, filled in with the two parameters looks in the Preview window as follows:


You have to add this shared action On Enter for each slide. This cannot be done for all slides at once. I’m sorry, but you always have to define the Button group as parameter, my request to be able to promote a non-variable/literal to the status of being always the same is not yet heard. The other parameter (value of v_show) has to be 0 for the slides where the buttons have to be hidden, and 1 for those where you want them visible. Here is an example for a slide where they have to be invisible.

In the Library you can check the usage of the action, 10 instances were used:


Extra

As a gift for 2019 you can grab this shared action:

NavShowHide

Import it into your course, the variables will be created automatically. You have to create only what you want to hide/show on the slides, group those objects and name them. Now you are ready to use that action On Enter for each slide. The group to be hidden/shown can have any objects, not only buttons. It is only necessary, that the group is displayed for the rest of the project.

Developing this shared action took a lot of exploring and testing because of two reasons:

  • If you use a lot of literals you have to choose carefully which one can be come a parameter to avoid issues with the action. That is very important if the same literal is used in multiple decisions. It led to my choice of having an empty variable. This kind of problem never happens for advanced actions. You need a different mindset, but that is of course my personal opinion based on lot of testing since shared actions appeared years ago.

  • Sequence is very important in any action, same as for advanced actions. Lot of consultancy jobs where I had to debug actions were due to ignoring this, combined with the typical behavior that you cannot break out of an advanced/shared action as is possible with programming languages.

I would like to explain this in depth, but not with a blog post. A webinar/training or live presentation is the only way to get this done. I expect this to remain a daydream…. very frustrating.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1357311 2018-12-27T13:14:04Z 2019-03-26T19:26:24Z Random Questions; Do's and Don'ts

Intro

It may be a coincidence but recently multiple questions appeared s about using random question slides

  • :Why is it impossible to control custom objects on slides in question pools like Show/hide for a custom feedback in Review mode?
  • How can you create and use a timer for a quiz which has random questions,, and have actions done when a certain time has elapsed? Or show warnings when time has almost elapsed?
  • How can I use remediation for random slides?

There are of course the usual questions like: can I use random question ir Pretest, as Knowledge Check slides (now also in Interactive video), or quiz slides on hotspots  in a VR project?  Can I have a new subset of random ausetions at a new attempt...

In this post I want to explain why some of those workflows are impossible. For some use cases I have a workaround, will mention it but not offer it for free.

Tips for Question pools

You are for sure aware of the fact that all quiz slides, whatever the type, are based on the quizzing master slide (4)s, and the results slide on another master slide. Whether you are working with a responsive or a  non-responsive project, make sure to set up those master slides fully before creating the pools. That means; checking the object styles and edit them when necessary, check the sizes of the embedded objects. One example: if you expect to have long answers, make the answer area as big as possible, maybe by decreasing the height of the feedback messages and other objects. Do never delete an embedded object (they have no individual timeline). If you can uncheck some in the Quiz Preferences, that is fine. Do not forget to check the Default labels under Quiz Preferences. Please do never override object styles. This is eve more important for pools than for normal quiz slides. once I had to edit the master slides quite a lot in consultancy job because the developer has deleted embedded objects. Several pools were connected with the project. Updating the course after having edited the master slides took quite long, needed kot of coffee breaks.

I also prefer to use GIFT files (or the new CSV files) over editing all quiz slides individually. RE-importing a GIFT file is a lot less work than having to edit each individual quiz slide. It is even more important if you need the course in multiple languages.

You probably want all learners to have the same possible total score? In that case you'll need to give the same max score to each question in the pool.  Or use multiple question pools, each with a different score. I feel a T/F question is not 'deserving' the same score as a complicated MCQ  question. Keep the easier questions with a lower score in one pool, the more complicated in another pool.

Examples with (eventually) workarounds

1. New subset of random questions for new attempt in same session

As I understand the workflow with random questions generated from question pools on runtime: each random question placeholder will be replaced by one question from the associated pool based on a random number. That random number will then be excluded for the next random question. At the end all the random question have been generated and are treated like normal quiz slides, based on the setup in Quiz Preferences. They become static, the generating process will not be repeated when a new attempt on Quiz level is started. To confirm my suspicion I added a custom object to the pool questions, that object only appears when you insert new random questions, not on existing questions: there is no dynamic link between the pool and the inserted questions.

Workaround: you need to close the session, and restart the course. If you are transmitting to a LMS with bookmarking (Resume data), the number of attempts will be taken into account.

2. Random questions for Pretest/Knowledge Check slides

There is no possibility to use question pools for these slides, at this moment (log a feature request please) 

Workaround: use normal random quiz slides for them. For Pretest slides you'll not be able to store the data in the Pretest quizzing variables. If you have real quiz slides in the course, you have to be careful. You can convert the imported random slide in a Survey question (could be used of KC slides), or you can uncheck the option 'Reporting'. In both cases the score and percentage on the results slide will be correct, but some quizzing systerm variables will still take into account all questions as you coudl read in my blog about Quizzing System variables. 

3. Random questions in VR projects

You cannot use random questions on hotspots in a VR project. 

Workaround: insert 360 slides i a normal cptx project. Insert random question slides in that project. Use a  Guided status for the hotpsots which show content. The last hotspot can be used to navigate to the random question slides. Beware: when inserting 360 slides in a normal cptx-project the opion to have Overlay  Question slides attached to hotspots disappears. More info in this article.

4. Random questions in Interactive Video

Overlay Knowledge Check slides are supported for Interactive Video. But like normal KC slides, they cannot be random.

Workaround: Use norma random slides which cannot be used as overlay slides. However, you can use bookmarks to navigate to the slides, then navigate back to the video. I will post a blog about this workflow in the near future. 

5. Controlling custom objects in random slides

You can add custom objects to pool questions or even to the master slides, but be careful: for HTML output the stacking order will always be respected (I had a workaround for SWF output). That means that the embedded Quizzing objects will always be on top of the custom objects. Embedded objects do not have an individual timeline, not on the quizzing master slide nor on the quiz slide. You should never delete those embedded objects,  Some  can be unchecked in the Quiz Properties panel (examples: Clear button, Back button, Feedback messages), others not (Question title, Question, Submit button...).

You can have an Advanced/Shared action on a pool question for the On Enter event (quiz slides never have an On Exit event).  A user wanted to use that action to make a custom object visible only in Review mode, using the quizzing system variable cpInReviewMode. That is a workflow which works perfectly on normal quiz slides. The variable is available for pool questions as well, but.... you cannot reference custom objects on the quiz slide. The added custom objects will never appear in the dropdown list for Show, Hide, Disable, Enable.... The user thought this to be a bug, but I don't agree and will try to explain my intuition.

When you add a random quiz slide to a project, as I mentioned it will be generated from the associated question pool. I suspect this to be a copy/paste act.: based on a random number a copy of a pool question is placed in the Captivate project. You probably have experienced in the past the effect of copy/paste to labels? Since every object needs a unique name, the names of the objects on the inserted random question will have a name 'similar' to the name in the original pool question but not the same name.  The advanced action should have been self-edited to reflect that name change. That seems not to be possible, hence the fact that custom objects do not appear in dropdown lists for pool questions. Same happens when you copy/paste a normal slide which has Advanced  attached to the slide events: in most cases those actions will be broken.  It is one of the reasons I always recommend to use Shared actions whenever possible, especially for slide event actions. It is a lot easier to repair the action in that case. However, for random questions that is not possible, you cannot attach a Shared action to a random question, you have to rely on the actions in the pool questions. 

Workaround: I do have a workaround which works perfectly, but I will not offer that one for free. 

6. Using Timer for random slides.

Captivate has a TImer and Hourglass interaction with similar features. You can also time using system variables and advanced/shared actions or JS. 

To use them for random slides, you need to insert the interaction before the first random slide on a normal slide which can be very short. However those interactions are not working very 'exactly', hence I always combine them with system variables.  No details about my workflow. 

7. Remediation workflow

A user asked if remediation would work for random slides, and there my answer is No. It looks very logical to me why this is an impossible workflow using question pools and random questions. Remediation means you have to link to a content slide from the quiz slide on Failure. The content slide needs to have the special command 'Return to Quiz' on a custom Next button. That action will only work when the learner gets to that content slide from a quiz slide, in other situations the Next button will proceed to the Next slide.

Why is this not possible with random questions? A question pool can be used in many files, how ca you exactly define the name or the slide number of the content slide to link to?  You need an absolute navigation link to that content slide, which is totally impossible.

Workaround: do not use a pool, but insert all the questions (with link tot the content slides) in the course. Navigate to a question based on a random generated number (with JS). Make sure that you don't reuse the same random number twice, nor that the non-selected questions can be visited. Turn on Branch Aware in the Quiz Preferences to have a correct value for the quizzing variables on the score slide. A lot of work!

 

 


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1355073 2018-12-19T15:38:35Z 2018-12-19T16:04:16Z 4 Tips for Interactive Video

Intro

Interactive video is one of the new features in CP2019 (version 11). Over 10 years ago I did choose for Captivate because it had a lot of possibilities for interactivity in any cptx-project, Some users do think that 'interactive video' is the way to go, but to me it is a nice addition especially to make existing passive video a little bit more engaging. To avoid confusion, because already did see a lot of theoretical posts here that talk about normal interactive projects, not about interactive videos, I will continue to point at published cptx- projects as ‘interactive movies’ to show the difference with less interactive 'interactive video'. A standalone interactive video can be nice. However I honestly believe that the combination of interactive video slides with static interactive  slides in a cptx project is more powerful. Later on I will try to show with use cases what I mean. These tips are for 'interactive video' only. 

The first version of interactive video offers the possibility to insert:

  • Bookmarks: which out of the box can be used with the new command ‘Jump to bookmark’ to realize some branching often based on answer to  knowledge check slides.

  • Overlay content  slides: which appear at certain frames of the video on top of the video (can take up part of the screen, with  in a dimmed version of the video in the background). Most Captivate features can be used on those content slides, including advanced/shared actions.

  • Overlay Knowledge Check slides: which are based on the quizzing master slides.  Their appearance is the same as for the content overlay slides. Scored quiz slides are not possible.Contrary to the overlay Quiz slides in a 360 slide, these Knowledge Check slide do honor the used theme, their style can be full controlled. However, you cannot use scored Quiz slides in overlay (which is possible in a 360 slide). 

I will post lin the future a full description of the timeline of interactive video slides, and line up the differences with a normal video. An interactive video is always a slide (synchronized) video, never an event video. Consequence: interactive video is not possible in a fluid box which can only support event video, nor in the state of a multistate object.

In this blog post, I’ll offer some tips for using and enhancing the present functionality of interactive video. I posted an interactive video, as illustration in this article . Explanation of the tips is based on that example, I recommend to watch it if you didn't had time yet.

Tips

Tip 1: Prepare Master Slides for Overlay slides

Interactive video supports two types of Overlay slides; Content overlay slides and Knowledge Check  overlay slides. Both types can have the same size as the project size, but I prefer to have a smaller size for the overlay slides, so that the video itself remains visible in the background (dimmed). That can be done by using a duplicate of the Blank slide, on which you insert a shape with a smaller size than the slide, as background for your content or questions. As with normal content master slides, you can create as many as you need.  Have a look at the 3 master slides used for the example video mentioned before:

Next to the Blank master slide you see two content master slides :

  • OverlayTip: has a bubble shape, semi-transparent as background; the white space surrounding the shape will be ignored in the overlay and show the dimmed video.

  • OverlayWarn: has a different shape, less transparent and also white surrounding space.

The Quiz master slide which I used is a duplicate of the MCQ... master slide. It is necessary to use such a duplicate because you need all the embedded objects with their functionality. I used a rectangular shape as background, not transparent.
Beware: 

  1. use a non-responsive theme, because the Quizzing master slides in a Fluid Boxes theme have a setup with fluid boxes. 

  2. when creating a slides based on this master slide, you need to choose Knowledge Check slides, because normal Quiz slides cannot be used as Overlay slides for an interactive video.

After insertion of 5 overlay content slides and one KC slide, the Filmstrip looks like this (watch the hierarchy symbolized by the smaller size of the overlay slides, and by the icons at the bottom). :

Tip 2:  No fixed duration but a Close button

To me Interactivity means to offer as much control as possible to the learner. Some need more time, some want to proceed quicker. That is why I don’t like the fixed duration for Overlay content slides - which is the default setting.  No problem for the Knowledge Check slides,  the Submit button (with a pausing point at 1,5secs) takes care of keeping the slide available as long as wanted. Same would be the case for a slide with a D&D interaction or when using an interactive learning interaction.

For the static content slides however you need to pause the slide. To achieve that with minimum effort,  I used a shape button on the two master slides OverlayTip and OverlayWarn.:Look at this screenshot, where the Close button is at the bottom left:

For shape buttons on a master slide, the pausing point visible at the end of the Timeline is just an indicator. It will not appear in the Timing Properties because smart master objects have no timing. However, in the default setup, the shape button will pause at the end of each slide, hence the indicator. Look under the Actions tab for the shape button on the master slide. 

The action triggered by the Success event of that button is very simple: ‘Continue‘, to release the paused playhead. Since the pausing point is at the end of each overlay content slide, it will close immediately and the video continues.

Tip 3: Information button

That button is available for the full duration of the project, from the second (video) slide on. . I described the workflow in an older post, which dates from  CP2017: Interactive Video Buttons but is still valid for the present version. It is a simple click/reveal button, which pauses the video and has a close button. That close button takes care of hiding the information and releasing the video playhead.

Tip 4: Navigation Menu

With the Menu button the learner has a TOC to bookmarks available, to review only parts of the video. I described my workflow in this post.

The menu button has a custom state, which is used to close the menu (similar to the Pause/play button of the example video). It triggers this action:

The menu items are hyperlinks triggering advanced actions, which jump to the wanted bookmark and close the menu. As mentioned in the past, for some weird reason the option 'Execute Shared Action' is not available for hyperlinks, or I would have used a Shared action instead of duplicate Advanced actions.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1354677 2018-12-18T14:22:05Z 2018-12-18T14:22:05Z Custom Play/Pause button - version CP2019

Intro

Several years ago I have already created a blog about this topic.

Meanwhile Captivate has added a lot more features: multistate objects, changes in system variables, easier commands etc. Since that question often appears on social media and the old post is also still visited daily, time to offer an easier way. It is also a use case illustraing use of a system variable, following to my recent posts about system variables.  Here you'll discover how you can use an Interactive Video to as training asset for a workflow. It is up to you: video or step-by-ste textual instructions with screenshots.

Why do I prefer a Shape Button?

Buttons have InBuilt states and can have supplementary custom statesI. You can find more info in this  article: States and State Commands

Captivate has 4 types of buttons, which  have 4 InBuilt states: ‘Normal’, ‘Rollover’, ‘Down’, and ‘Visited’. They can all have extra custom states, which allows to create nice toggle buttons showing the situation at that moment. Examples: TOC open/closed, Audio playing/muted, CC visible/invisible etc (have a look at: 1 action = 5 toggle buttons).  The three first states are included in the object style of the button or the shape, the Visited state is not included. Custom states are neither included in the button style.

Text buttons, Transparent buttons (which are not necessarily transparent), Image buttons can NOT be used on master slides, can NOT be timed for the rest of the project.  A shape button can be used on master slides, can be timed for the rest of the project. For a toggle button Play/oause this is a big advantage: you need only one shape button for your project. If you prefer one of the older button types, you would need a button on each slide.

Workflow - Interactive Video

The movie is based on a Video Demo. The CPVC-file was captured at 1280x720. It is embedded as interactive video in a cptx-rpoject with a resolution of 1024x627. The ratio widht/height is not the same because the synchronized interactive video has a top control bar. I extended the functionality of Interactive video, you'll find some tips in my next post.

I will not embed the video in this post, it would be too small. I offer you two links: the first is to the unscaled published movie, where you'll have the best quality which is important to watch the sometimes very tiny features of the Captivate UI. If you want to see it oscaled to your browser resolution, you can use the second link, which is to a rescalable version. It may look more blurry on a very big screen, but you need to use this version if you want to watch on mobile devices:

Fixed resolution: Custom Play/Pause

Rescalable: Custom Play/Pause


Workflow Step-by-Step

Step 1: Creation of the Shape button

You have to know the  situation at the start of the  course. By default (after having launched the course) this will be 'Play’ situation. Consequence: the start look of the Shape button has to be ‘Pause’.  It is not possible n Captivate to create states for a shape button on a master slide . You have to create that button on a normal slide,.
  • Create a shape and check off the option ‘Use as Button’.
  • Open the State panel, using the button ‘State View’ in the Properties panel.
  • In the Normal state, fill the shape with an image and/or text you want to show when the course is playing, to pause the course.
  • Delete the InBuilt states ‘Rollover’ and ‘Down’, using the right-click menu on those states (you cannot use a simple Delete key).
  • Add a Custom State, and name that state  (I use 'Play' as label)
  • In this custom state fill the shape with an image and/or text you want to show when the course is paused, to resume Playing.

Here is a screenshot of the states I created in the video:

Step 2: Location Shape button

Once the button is ready, you have to decide where to put it, and take out the Pausing point. Reason: you want this button to be available all the time, but not a pausing point like you need for a Submit or a Next button. There are two possibilities for its location;

1. On Master slides

If you want to use the Play/pause button on all slides, and you are creating a non-responsive project or a responsive project with breakpoint views, the easiest way is to copy/paste the button to the Main master slide. The daughter master slides can inherit the button. Careful: in some themes the Title master slides is not using the main master slide objects, you’ll need the button also on that master slide in that case.

For a fluid boxes responsive project, you cannot use the main master slide (cannot have fluid boxes). You will need to insert the button on each used master slides where you want that functionality.

To turn off the pausing point: open the Actions tab of the button, and uncheck the option ‘Pause project until user clicks’.

2. Timed for the rest of the project

The alternative for the master slides, is to have the Play/pause button on the first slide, and time it for the rest of the project, always on top. That has to be done in the Timing Properties of the button. At that same place you can also turn off Pausing:

For a Fluid Boxes project: object timed for the rest of the project is normally not possible. I explored and found it iw possible but with the requirement that you use the same master slide for all content slides.

Step 3: Create Advanced Action

The success event of the button has to trigger a rather simple advanced action. Check the ‘Conditional Tab’ and create this action:

Explanation: I am checking the value of the Boolean variable cpCmndPause (see article). If that value = 0, the course is playing.

In that situation I will use the command ‘Pause’ (‘Pause’ is exactly the same as ‘Assign cpCmndPause with 1) and change the state of the button SB_PausePlay to the Play state.

If the course is paused however, that variable would not have the value = 0 (but = 1) and the ELSE commands are done: the state of the button is reset to Normal, and the playhead is released by the command ‘Continue’ (which is the same as Assign cpCmndResume with 1, which is also setting cpCmndPause back to 0).

Warning: not everything is ‘paused’!

As I explained more in detail in my sequence of blogs about the timeline, even an absolute pause (‘Pause’) will not pause everything.  Here in short the most important:

  • Animations of all type (animated GIF, SWF, OAM….).
  • Event video if it is playing
  • Audio which was started with the command ‘Play Audio’

For more information:

Pausing Captivate's Timeline

Pausing Timeline and Audio

You would have the same  situation  with the Pause button on default Captivate playbars. It is not due to the fact that this is a custom button.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1349622 2018-12-04T10:45:11Z 2018-12-10T09:55:44Z Discover/Use Captivate's System Variables - Part 2

Intro

In a first blog about System variables I offered a free table with description an references for all system variables. If you didn't get that table yet, please get it from that article. That older post described shortly all caregories. It had focus on the variable categories s which are read only, and how they can be used to show information in a course and/or for editing/debugging reasons (like cpInfoCurrentFrame).  Not treated in that first part was the Quizzing category because I already had a detailed explanation in this blog post.

Here the focus is on that very special category 'Movie Control'. It is special because those variables cannot be inserted for viewing in a course.  More important is that they can be controlled, changed by the developer on runtime which is not possible for any variable for the other categories. Learning how to control these variables can be a good step up to getting started with advanced or shared actions: more complicated actions than the simple actions which you find in the dropdown list on the Actions tab of an interactive object.

Terminology

Since this post is meant for users starting with variables, I want to explain some terms that are important expecially when working with system variables of the Movie Control category. You can skip this part is it sounds familiar to you.

Slides versus Frames

In questions on the forum I often see confusion between those two terms. A normal cptx project is slide-based. That leads many users to suppose that Captivate is functioning like Powerpoint, but that is not true. Essentially Captivate will lead to a movie, not to a sequence of slides which is typical for a presentation. That movie is more than a simple video, because interactivity is based on offering control to the user and to do so you need to  pause the movie. This is not the case with a video: the learner can pause the video, but the developer has no influence of therm with the exception of the interactive videos. I use the term interactive movie for a fully interactive published Captivate file. An interactive video is not better at all, more of a hype at this moment, because is interactivity is more limited. Although a PPT can have animations with some duration and seqeuence, it is not a real movie unless you capture it as a movie. 

Any video/movie is played at a certain 'speed'. The speed is defined in frames per second or FPS. The default speed of a published cptx file is set to 30FPS (but a video demo at 15FPS). If you keep the default length of a slide in CP, which is 3 seconds, that means that you have 90 frames in that slide. 

I explained these terms already many times. As you can see in the table, several system variables in the Movie Control category are linked to navigation between slides or frames. Understanding the difference is required.

Boolean variable

A variable can have any value in Captivate: a text (often called string) or a number. When you look in the table you will see the typical values of the system variables. Many of them also aren:  from the 'Boolean' type. That is a variable that will have only two possible values: 0 or 1, true or false. You can interchange them easily, I prefer using the numbers 0/1 because it is less typing.  In the Movie control category many variables are indicated as Boolean: cpCmndCC, cpCmndMute, cpCmndNextSlide, cpCmndPause, cpCmndPlaybarMoved (pretty useless, internal), cpCmndPrevious, cpCmndResume, cpCmndShowPlaybar, cpCmndTOCVisible and cpCmndLockTOC.

Like other variables Booleans have a default (or start) value which you find also in the table. Often it is 0, which means the situation described by the variable is turned OFF. But there are exceptions. Some examples:

  • cpCmndMute: default value = 0, which means that audio is playing
  • cpCmndPause: default value = 0, which means the course is not paused
  • cpCmndShowPlaybar: default value = 1, which means that the playbar is visible
  • cpCmndTOCVisible: default value = 0, which means that the TOC in overlay is not visible

Toggle

When used as a verb, this means 'switch between two situations'.  I didn't use the word 'state' to avoid confusion with states in a multistate object. You can toggle a playbar between the visible and hidden situation, audio between muted and not muted, a TOC in overlay between expanded and collapsed, any object or group between visible and invisible. There is a close relation between Boolean variables and toggling. For that reason a couple of versions ago the new command/action Toggle' appeared in the dropdown list of the Actions tab, and in the advanced actions dialog box. 

Some people also use Toggle to indicate a Toggle button. That is a button which allows to switch between two situations£. Several buttons on the Captivate playbar are toggle buttons: turning CC on/off, play or mute audio, pause or continue the movie. 

Use Cases

Toggle buttons

CC on/off

If you use custom buttons instead of a playbar, which is recommended for any non-linear project, you can create a toggle button to turn Closed Captioning on/of. Beware: in versions before CP2017, Closed Captioning was always turned off when the course started. That is the reason why the default value of cpCmndCC  is still indicated as O. With the new more elaborated features for CC, you also have the possibility to turn CC on for a project. In that case the variable will have the value 1.  To create a toggle button for this feature you can use a shape button on the main master slide (no need for pausing) if you are in a non-responsive project. For a responsive project with fluid boxes, using the main master slide is a bad idea (no fluid boxes possible), you'll have to use the other master slides. Use guides for the creation of the footer fluid box, so that it is consistent for all the master slides.

Create this simple action to be triggered by the Success event of the button:

Since you don't need this button to pause the slide, you have to uncheck the option 'Pause Project until user clicks'.

Audio on/off, Playbar on/off, Overlay TOC expand/collapse, TOC lock/unlock

The workflow is exactly the same as for the CC toggle button. In the screenshot you see that the appropriate system variables show up and can be selected.

It is of course possible to replace a toggle button by two  buttons. Example: a button to show the overlay TOC  and another one to hide it. In that case you could use the commands 'Show TOC' (same result as Assign cpCmndTOCVisible with 1) and 'Hide TOC' (same result as Assign cpCmndTOCVisible with 0). This is  an alternative for the tiny expand/collapse buttons attached top left of the slide. A toggle button saves space on the slide, easier to manage. 

Two buttons are also possible for Playbar on/off  (Show Playbar/Hide Playbar) and for locking/unlocking the TOC for navigation (Lock TOC/Unlokc TOC). 

For Audio on/off you do NOT find such simple actions in the Actions tab.  'Play Audio' is meant only to play an audio clip, but has no effect on slide audio, object audio, nor background audio. Similar with 'Stop Triggered Audio' which can only stop clips started with the command 'Play Audio'. If you want two buttons, you will need to use the system variable cpCmndMute, with the Assign command:

  1. Assign cpCmndMute with 1    will mute audio
  2. Assign cpCmndMute with 0     will have it play again

To create a toggle button with a different look when the situation is toggled, you'll need an advanced or shared action. Have a look at: 

1 action = 5 toggle buttons

Shape category ‘Buttons’ – Challenge

Being a tutorial for newbie (no advanced/shared actions, I will not explain using the navigation system variables for two reasons:

  1. You probably never will use the slide navigation variables  for navigation between slides. It is intuitive to use ‘Go to Next Slide’, muc more than ‘Assign cpCmndNextSlide with 1’
  2. The navigation variable cpCmndGotoFrame is  very important in micro-navigation but that is a more advanced topic that needs the use of advanced/shared actions. If you are interested, have a look at: Intro to Micro-navigation

However I have a challenge for you! The shape dialog box has a special category labeled ‘Buttons’.

Typical for these shapes: the option ‘Use as button’ is checked off (no pausing point by default). They will trigger an action, which for most buttons is a simple action. You will see that the Mute button  is assigning “1” to the system variable cpCmndMute. The three buttons marked in the screenshot trigger an advanced action: the Home button and the Start button (both marked in red) use the advanced action ‘startSlide‘, the End button (marked in green) uses ‘endSlide‘.  You can open th action in the Advanced Actions dialog box,  by clicking the Browse icon:

Look at the use of the system variables in startSlide :

  • Assign cpCmndGotoSlide with 0          this means: go to the first slide (index starts with 0)
  • Assign cpCmndResume with 1              is the same as Continue

Can you explain the script ‘endSlide’?

More?

A lot more is possible when using the movie control variables in advanced or shared actions. I already posted some links before. Here is a link to a blog post about ‘Replay Slide‘ where you’ll find different scenarios. It will help to understand the importance of frames: if you only get back to the first frame of the slide, reset will not happen if this is done by an On Enter action, or if you have Text Entry Boxes/Drag&Drop slide.

For newbies I plan a third article about user variables and simple use of them (still without advanced/shared actions). Would love to get some comments.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1347324 2018-12-04T10:32:26Z 2019-03-05T18:03:52Z Discover/Use Captivate's System variables - Part 1

Intro

Many years ago I did write out some tutorials explaining how to use variables. They are still available in Adobe's Knowledge base, but of course the screenshots are outdated since they were created in Captivate 4 and 5. Inspired by a recent thread in the forums, where it took a while to explain the use of variables, I want to write out some posts about Variables. This first article will focus on System variables and include a downloadable table which you can use as reference for them.

What is a Variable?

If you 'google' to find a definition of a variable you will get thousands of results. I would say that it is a container identified by a name and the content can change or be changed (is variable). It is a term used in programming languages and applications. It makes them more flexible, powerful. If you are a maths lover, compare this equation: 5 + 6 = 11 with  a + b = c. The a, b, c are variables, and the second equation allows you to create tons of small sums. The first equation uses 'literals', and you have only one sum.

Captivate has by default 6 categories of System variables and 2 automatically defined user variables. This article is only about system variables, they are available for your use in any project. All the system variables start with the characters 'cp'. Lables are, as usual in Captivate, unique for each variable and they are case sensitive. It may be confusing that the two  user variables,  created for each new project (cpQuizInfoStudentName and cpQuizInfoStudentID) also start with the same characters..  When you open the dialog box  Project, Variables the type 'user' is automatically selected, and you see only those 2 variables. Be sure: those are NO system variables, they are necessary for the workflow of Internal Server reporting, but can also be used with many LMS's. The certificate interaction uses  cpQuizInfoStudentName as well.

 

Categories of System Variables - table

You can download the table from this link.

Captivate has 6 categories of system variables. To see them switch to System type in the dialog box:

  1. Movie control: is a very special category, which I will explain in a second post.  They offer a way to control your course by changing a system variable. This is not a normal behavior of variables, and can be considered as a, add-on to more complicated advanced/shared actions. These system variables are also different from those of category 2-5 because their value cannot be displayed in Captivate output.

  2. Movie Information: typical for this movie are the number of slides/frames, the speed (FPS), which frame/slide you are at this moment, etc… All variables of this category are read only. Their value can be used by the developer, they can be displayed in a Captivate file, during Preview and after publishing. I will point out some examples later on that could save you time while developing. In the table you’ll find some references as well.

  3. Movie Metadata: you can add metadata to a course, lot of it can be done using File, Project Info.  The behavior and usefulness are similar to the previous category. More tips below the examples below.

  4. System Information: data about present Date, Time, or which OS you are using if watching on a mobile device are in this category. Like 2-3 these variables are read only but can be used in the same way as those from Movie Information and Movie MetaData. Look in the table for examples.

  5. Quizzing: will not expand on this category because I already posted a blog about using Quizzing System variables

  6. Mobile: has only one system variable which is exceptional because it stores 3 numbers. It cannot be displayed in a course, only be used in actions.

This blog has focus on categories 2-3: they are very useful when you insert them in a course, either during debugging or to be able to show their value in output.  The workflow is the same for all variables that can be displayed (not category 1n nor 6).

Display a Variable

The best way to insert a variable to be displayed is this workflow:

  • Create a text container: either a caption or a shape on the slide
  • Go into edit mode, by double clicking or using the function key F2.
  • You’ll get the Character part in the Properties panel. Find tesee three buttons

    First button inserts a symbol, last button a hyperlink, but you need to click the second button to insert a Variable
  • Switch from the default User type, to System.
  • Choose a category under the dropdown list which has by default ‘All’ as choice
  • Select the wanted variable.
  • The ‘length’ is set by default to 50 characters, but you can edit this number. It is essential to do so if you expect the value to be greater than 50 characters (spaces included).
  • Confirm the insertion with the OK button.
  • While editing the variable will appear as in this first screenshot, between double $$. When previewing or after publishing that placeholder is replaced by the value (second screenshot)

Edit and Runtime view 

Some Examples

1. Slide counter: Slide X/Y

You use two system variables from the category Movie Information: cpInfoCurrentSlide and cpInfoSlideCount. Insert this text on the first slide of your course, and display it for the rest of the project.  Do not forget to check off ‘Always on top’ for the text container.

2. Author name in Theme

You will use the variable cpInfoAuthor from the category Movie Metadata. While creating a custom theme to be used in multiple courses, insert this variable in a text container on the main master slide. Master slides are part of the theme. Do not forget to warn your colleagues to fill in the fields under File, Project Info.

3. Course name in Theme

If you use a Title master slides, you can insert the variable cpInfoCourseName on that master slide as title. That variable also blelongs to the category Movie Metadata. Same comment: Project Info has to be defined by the developer. You can also use this variable in a footer of course.

4. Debugging Timeline

As I mentioned many times, understanding how to pause the timeline, and its consequences on objects is very important. I always recommend to insert a text container with the variable cpInfoCurrentFrame to watch pauses while Previewing the project. It is a variable from the category Movie information. You can see that I apply this recommendation myself in this movie:
Captivate’s Timeline

You’ll certainly find more examples. When used in combination with advanced or shared actions, lot more is possible but that is beyond the scope of this introduction.  One example: to show the elapsed time on the course (the real time spent, not the developer’s time based on slide durations), you cannot just insert the variable cpInfoElapsedTimeMS (from Movie Information) because it is defined in milliseconds. You need to do some simple maths to make it readable to the learner, and that means …. advanced action.

What Now?

Have a look at my next blog post, where you'll start to take control of your courses with the system variables of the Movie Control category. It is a good 'step up' to challenge your next goal: using advanced/shared actions.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1344832 2018-11-18T17:05:09Z 2018-12-07T05:15:28Z About State Commands and a Progress Bar

Intro

Recently a user posted a question about using the 'Go to Next State' command used in Advanced actions. You can read our discussions in this thread.

Time to write out some tips for multistate objects. This blog wants to give an answer to the user, and has its focus only on that solution. I plan to publish more about the basics of states and their commands later on.  To me personally the introduction of multistate objects is in the list of my favourite features in Captivate, closely following Shared/Advanced actions and Shape buttons.

Example movie

Watch this published rescalable interactive movie. The second slide has three shape buttons, navigating to three slides where you can read and confirm reading, or click hotspots, or answer questions. Each of your actions will result in changes to the progress bar on that second slide. Beware: whenever you have clicked an interactive object it will be disabled!


Terminology Multistate objects

InBuilt States and Custom States

You can add custom states to any object, static or interactive.  In those states you can have many object types: graphics, video, audio... but no interactive objects nor hyperlinks.  The Normal state is the default state, which will always appear unless you have changed to a custom state using a command (in a simple or an advanced/shared action). You have a lot of freedom for custom states: contrary to the InBuilt states, nothing is locked tto the default normal state. You can have objects in a custom state that are in a totally different position from the Normal state. Custom states are always controlled by commands, not by a situation. If you want a custom state to remain for future visits to the slide where the multistate object is sitting, you need to check the option 'Retain state on slide revisit'.

Inbuilt States exist for these object types:

  • All types of buttons Shape buttons, Image buttons, Transparent buttons and Text buttons.  You have four of those styles: Normal, Rollover, Down and Visited. The first three are part of the button style.  You don’t have the same freedom for location of those states, they are locked to the Normal state (look for the Lock indicator).
  • Drag sources and Drop targets on a D&D slide. For more information see: InBuilt states for D&D

I will only talk about shape buttons here. Contrary to custom states Inbuilt states appear automatically in a situation: when not hovering over button (Normal), when hovering over button (Rollover), when pressing button (Down) and when after clicking/tapping (Visited, if it has been created). You can only control Normal and Visited by a commandif necessary, not the Rollover/Down states.. 

State commands

These commands are available both in a simple action (dropdown list in Actions) and in the Advanced Actions dialog box, to be used in advanced or shared actions:

  • Change State of …. to 
  • Go to Previous State  …..
  • Go to Next State ….

When you use these commands as a simple action, from the dropdown list inthe Actions tab, they can only be applied to multistate objects on the same slide as the event triggering the action (Slide event, interactive button events) The Hypelink even thas only the first command (Change State). 

If you insert one of the commands in an advanced/shared action they seem to be able to apply also to multistate objects on other slides. That is indeed the case for the ‘Change State’ command, but is NOT functional for the commands Go to Next/Previous States. I have logged this as a bug, because you are able to choose multistate objects on other slides, however without any effect. That was the reason of the question in the forums, described in the Intro. 

You could see in the Example movie that I have a workaround. How?

Solution with variable and While loop

YOu will need one user variable v_counter,  to track the number of clicks while being on other slides than slide 2 with the Progress indicator SS_Progress (a multistate object). This progress indicator starts with a Normal state which is a shape with Alpa and Stroke = 0.

That variable starts with a default value = 0. The clicks on the OK buttons in slide 3, on the hotspots in slide 4 and on the correct answers in slide 5 do increment the variable, besides other commands. 

When returning to slide 2 (which has the progress indicator) using the shape button ‘Back to….’ (is on the used content master slide) an advanced action On Enter for that slide is launched, using the While loop:

Example: if the user has performed 3 actions on any slide, v_counter would be 3. The while loop will then be done 3 times, which means the 4th state of the progress indicator will appear. At the same time, the variable will be set back to 0 at the end of the loop. The learner can continue to visit another slide, and the variable is ready to track again.

This is just an example, many variations are possible. Maybe you want to allow visits and actions to consecutive slides before returning to the main slide, this can easily be achieved. Or have feedback appearing on the main slide after all slides have been visited, based on the obtained progress.. 

More?

I didn’t explain all actions in this post. The slide with the hotspots is based on a recent article about Hotspots in a 2D image.

Maybe you are wondering if I used the Visited state or a custom state for the OK buttons (slide 3) or the hotspots? What the quickest workflow is to create the states for the Progress bar? Did I use shared actions or advanced actions, and why did I choose that way? Why did I disable the buttons? If you are interested, I can explain… on demand. 

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1339241 2018-11-09T11:12:54Z 2018-11-12T22:16:42Z Hotspots in non-VR project? Workflow 1

Why?

This is not a blog post for intermediate or advanced users. Since CP2019 is released, with the hotspots for 360 images and videos in a VR project or a normal project, I see the same question appearing regularly: why cannot we have that feature for a 2D image? Hence my idea to offer you some possible workflows with a step-by-step explanation and a free downloadable project file. This first post shows a project where the functionality of VR hotspots is being duplicated as close as possible:

  • When user clicks a hotspot, text, image and/or audio will appear, and automatically disappear after a specified time (here you can also use video, which is not possible in a VR project)
  • The hotspots get a checkmark after having been clicked.

However only the status ‘Exploratory’ is used, not the ‘Guided’ status. I would be able to reproduce that as well, but the workflow will be more complicated.

Example movie

Watch the result in this movie with 3 slides. After the title slide you’ll see the hotspot slide. The last slide lists up the steps explained below, if you want to create the workflow from scratch. I will also offer you the project file, you can also copy/paste the hotspot slide to your project, thus allowing to skip some steps.

Copy/Paste Slide

You can download the project file (created in version 11.0.1.266) from this link.

You can copy/paste the hotspot slide (slide 2) to your project. Replace the image. You can edit the design of the hotspots (names start with HS_), change the content of the states in the Multistate object labeled SS_Info.

Have a look at the Library, folder Shared Actions. You’ll see that it has been used 6 times, once for each hotspot. If you change names of the states in the multistate object, you will have to edit that parameter. Same for the duration. The other parameters are always the same for each hotspot: the name of the multistate object and its Normal state.

Steps, from scratch

Create hotspot

I used a shape button as hotspot. It has several advantages over the older type of buttons. You can choose any shape or create a custom shape (here I used just a circle), you can fil it with any color from your Theme Colors as solid color or in a gradient (I used a gradient) or even fill the shape with any image. Moreover you can type text in the shape. I kept the hotspot very simple: just a question mark. But you can replace the text or the fill as you like. It is important that the shape button – hotspot has at least two InBuilt states: the Normal and the Visited state. You could also use the Rollover and Down state, which I deleted in the example file/movie. This is the state panel of the hotspot:

Duplicate hotspot

I labeled the used style as ‘Hotspot’. However, the Visited state is not part of the style (which I regret a lot). For that reason I did duplicate the hotspots (CTRL-D). In the project the names start with HS_.  In the example movie you’ll see 6 hotspots.

Contrary to the hotspots in a VR project, these hotspots have a timeline. I kept the default setup: duration of  3 seconds and pausing at 1.5secs. That pausing point is where where the playhead will pause, exactly like for the hotspots on a VR slide.

Multistate object for popups

I put all the popups in one multistate object which is also a shape: it has 1 state more than the number of hotspots. The Normal state has to be ‘invisible’ by setting the Alpha for Fill = 0 and the stroke width = 0. Each of the following states has the assets for one popup. You will see that I have states with only a text container (background in any color, partially transparent), but some have also an image, audio and one even has an event video (which is not possible on a 3D slide).  You can choose any location, it is not locked to the Normal state location. In the example file, the Object states for this shape looks like this:

Import Shared Action ‘HotspotWorkflow1’

Use File, Import, External Library and open the file you downloaded. Find this shared action in the floating Library panel which will be opened. Drag that action to the Library of your project in the folder Shared Actions. More info about external libraries in this post.

Add shared action to hotspots

Select a hotspot. In the Actions tab of its Properties panel, for the Success action choose ‘Execute Shared Action’. Click on the tiny button {p} to define the parameters which are:

  • Multistate object with the popups (labeled SS_Info) in my example file. That parameter is the same for all hotspots.
  • State: having the info to pop up for that particular hotspot
  • Time you want to leave the popup on screen, can be different for each hotspot
  • Normal state of the multistate object, is same for all hotspots.

Here is one example screenshot for the hotspot referring to the Virtual Reality project:

Conclusion

Maybe you’ll already feel that this workflow could be optimized. I would prefer to give the learner control over the time he needs to watch the popups by adding a close button. Or maybe cover up the distracting background in a lightbox style? What about the next button only appearing when all hotspots have been clicked? Or a warning if not every hotspot has been visited when the learner clicks the Next button? Lot more workflows are possible, let me know which one you would prefer?

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1340102 2018-11-09T11:12:17Z 2018-12-07T05:15:22Z Hotspots in non-VR project - workflow 2

Intro

A week ago I published a first showcase, explaining how to replicate the hotspot workflow for VR projects on a 2D image. This second article about using hotspots for a 2D image is not duplicating as closely that same feature: instead of showing the popups for a duration defined by the developer, this workflow will offer a close button for the popups. The learner decides when to close a popup and proceed (eventually) to the next hotspot. I also used a technique, often labeled as 'lightbox': to have the popup stand out of the rest of the content, it will have a semi-transparent cover in the background dimming the rest of the slide.

Example movie

I used the same image (welcome screen) and content for the popups as i the first workflow. Only  some small color changes and changes in the location have been applied . Watch this 3-slide movie: after the title slide (doubles as poster image) you can test the new hotspot slide, and the last slide gives a short Step-by-step list if you want to use this slide in your project. 

Try it out: quick workflow

You can download the project file from this link

If you do not need to have more than 6 hotspots, and you are happy with the resolution of the project (1024x627) and its Theme (Pink Icing), you can quickly use the hotspot slide using these steps:

  1. Create a blank project, with that resolution and theme. Create your title slide, and eventually a poster image as explained in his older article
  2. Copy the hotspot slide from the sample project and paste it into your project. The object names will get an extra number, but you don't have to bother about that. The advanced and shared action is automatically adapting to the new names.
  3. Select the Image..  'WelcomeScreen.png' and replace it by your image (Properties panel).
  4. Move eventually the hotspots to the right location. If you need less than 6 hotspots you can hide some of them in output. Deleting is also possible. Start by hiding or deleting the last hotspot(s). The sequence of the hotspots is starting with HS_Responsive (first in first row), going to the right and then to the second row. Last hotspot is for the PPT.
  5. Open the multistate object SS_Info.. which is just on top of the 'Cover' (needs to be there). Click the State view button in the Properties panel to open the Object State panel.
  6. Leave the Normal state alone. Replace the content in the other states by your content (follow the sequence described under 4.)  You don't need to rename the states, nor to delete the last unused ones (just leave them as they are).
  7. Start testing with 'Preview HTML in Browser' (F11).

 

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1339237 2018-11-02T11:27:31Z 2019-05-27T16:01:08Z How to use Custom Effect in Actions?

Intro

Almost 8 years ago I posted this article on my personal blog: Editing Motion Paths and Using Custom Effects. 

Since that time Effects have been improved a lot, advanced and shared actions can make life much easier. Time to upgrade that blog post, meanwhile testing the behavior of effects in HTML output in CP2019. While Flash was always to be trusted, that is not the case for HTML output. And indeed, I bumped onto a problem with the Scale effect, and sometimes the Rotate to effect. When those problems are solved, I will post a published movie. The workflow to use Custom effects in a shared or advanced action is however still the same since many versions. It is a bit complicated, I have answered many questions about it in the forums. I will write it out now step by step.

When do you need  a custom effect?

Effects have been improved in some ways. Some parameters can be defined in the Advanced Actions dialog box. Look for the start time of an effect, its duration and more numeric fields (alpha, rotation, ease in/out, alpha….). However when using a combination of effects over and over again, you can create one custom effect which saves that combination and can applied in one step including the sequence and duration of the different effects. Another practical example are the motion effects, where you need to edit the motion path, which is certainly the case for more complicated custom motion paths.  This screenshot shows an example of a complicated combination of effects on the Timeline. It was meant to be applied to simulate a swimming fish:

Step by Step

Step 1:  Create and save effect

Create the effect or combination of effects on any object as a ‘Self)time based animation and test it out thoroughly (Preview HTML in Browser for a non-responsive project) in several browsers before saving it with a custom name.

You don’t need to save it in a specific folder. I use to save it with the project I am working on as is the case in the screenshot above. Effects are stored in XML-files.

Step 2: Apply the custom effect as time-based animation

If you would try to use the saved effect in a shared/advanced action it will no be available. If this is the first custom effect you ever created, there will not even be a Custom category to choose from You need first to delete all the individual effects applied to the object (above it was to the object SV_Fish (a SVG image). Then apply the custom effect as a (Self) time based animation again, but now with ‘one’ effect chosen with the browse button.

When looking at the timeline you’ll see exactly the same result as in the screenshot at the beginning: all the effects in the correct sequence and with the duration you had chosen.

The result of this second application is that the Category ‘Custom’ will now have been created, and it will have the new custom effect ‘Swimming’.

Step “: use in advanced or shared action

If you only wanted to apply this action using an interactive object, you could use a simple action. The field Category will now have the Custom category.

However often effects are used in Advanced or Shared actions in combination with other commands. In this example the Fishes are originally hidden, so I need to Show them and apply the effectn eventually also have an audio clip playing separately.

The two buttons on this example will trigger the same shared action. Both fishes are hidden in output at the start. When creating the advanced action, the category Custom can now be used, and the available parameters (start, duration) could be edited, but mostly you’ll not want to do that.

Because I needed to use this action twice, maybe also later in other projects unchanged or as template for other actions, I preferred a shared action which will have only one parameter: the object itself. An effect cannot be a parameter. However, the effect can not only be applied to one object, but also to a group. I can replace one fish by a group of fishes.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1336943 2018-10-29T18:09:32Z 2019-07-10T00:01:43Z Timeline for 360 slides (static/video)

Intro

A while ago I published several blogs and interactive movies (created with Captivate) about the ins and outs of the Timeline in Captivate, which is still the feature that causes most frustrations because of lack of understanding. With CP2019 some new features are added to that timeline, for the VR projects (360 slides) and for interactive video. Looks like it is time to explain those new features. This blog has focus on the timeline in 360 slides inserted in a non-responsive project.  Those slides are not able to have overlay Quiz slides as is possible in a full VR project. In a future post I will talk about the overlay Quiz slides and their timeline. I published recently a short post with some tips for a VR project.

360 slides

In a non-responsive project you can use the big button Slides to insert a slide which has a centered button to choose either a 360° static image or a 360° video. It is not possible to drag a 360 item to the slide from the Library, you need to use that button.

The 360 image is inserted as background, whereas a normal image inserted on a slide will have an individual timeline. In the Library you will see the images in the Background folder, and you have to use 'Find Background'.

Static 360 image

Editing a 360 slide is more limited than editing a normal slide. You will not have an Actions tab in the Properties panel, which means that you cannot use the On Enter/On Exit events for the slide. The Big Button Bar is mostly dimmed. There are only two assets that can have a timeline as you are used to:

  • Audio (under Media button) can be added as slide audio, which will have its timeline as expected under the slide timeline. Slide audio can be paused on a 360 slide by a hotspot, just like by any interactive object: you find the feature 'Stop Slide Audio' on the Options tab of the hotspots (including Character which is also inserted as hotspot). 
  • Label (under Text button): can be added, formatted and timed. It can be used for titles or for instructions that need to be available even if the playhead moves. Labels can be moved and will be 'distorted' to fit in the spherical image if necessary. IT is not possible to apply an effect on the labels. 

You will see 'Characters' available' under the Media button as well. However inserting a character will create a hotspot where the character is used as custom image.  It is not possible to resize the image, only the location. In most cases the characters will be very big due to that lack of editing.

The functionality of a 360 image is mainly in the so-called  'HOTSPOTS' to be inserted from the big button with that name. Referring to existing terminology, a hotspot is a new type of  interactive object similar to click boxes, (shape) buttons. However hotspots have a timeline with zero duration. In the timeline the visual representation of a hotspot is  either a half circle (brownish) if the hotspot is on the first frame of the slide, or a full circle (when on a later frame).  A selected hotspot has a blue circle surrounding the normal icon. In the following screenshot Hotspot2 is selected. The generic names were kept, but I have changed the stacking order by dragging hotspot 2 on top of Hotspot3.  Each hotspot is marked on the stage and after publishing by one of the SVG's, a custom image or a character as mentioned above. 

Default setting for each hotspot is to keep the timeline paused. For simple actions triggered by buttons in normal slides, the default setting is 'Continue playing the project'. For the hotspots, that setting is unchecked by default (if you trigger 'Play Audio' with a hotspot it will change as expected to Continue movie after audio is finished).

If you leave that option unchecked, the playhead will remain paused. If you use the option 'Explanatory', this means that all hotspots sharing that frame will be visible to the learner. In some cases you'll have only hotspots in the first frame (look at the sample project), but to avoid overload in a complicated image, you could choose to have groups of hotspots in a later frame. You see an example in the screenshot of the timeline inserted earlier: two hotspots are in the first frame and 3 more in frame 45(1,5secs). In that case you have to release the playhead, which can be done in two ways:

  1. By checking the option 'Continue playing the project', not so interesting if you have set up the image in 'Explanatory' mode where the earner can choose the sequence of clicking the hotspots. But it can be a solution in 'Guided' mode.
  2. By adding a hotspot with the action 'Continue', which is available in the dropdown list. That was the case for the screenshot above: it has a character hotspot (with attached audio) and a second Continue hotspot. One of the hotspot icons is clearly recognizable as a 'Play' icon.
  3. By showing the playbar (and maybe instruct the learner to click the Play button). Both commands 'Hide Playbar' and 'Show Playbar' are available to be triggered by a hotspot, but I was never able to use them using a hotspot in a slide. However you can show the playbar by default or use a slide event on a previous static slide.

As I explained in previous articles, the Timeline panel is also a Layers panel, defining the stack order of objects. In a 360 slides the stacking order is not always respected: even if you put a label on top of the stack, it will always be covered by any hotspot in the same location.

However for the hotspots it also has a third functionality, only for Guided mode. The stacking order will define the sequence in which the hotspots are presented to the user: starting from the bottom. In the example screenshot, at frame 45 hotspot 2 will be presented before hotspot 4.  You can change the order by switching the layers.

The dropdown list with actions to be triggered by the hotspots is more limited than for another interactive object. I already mentioned the command 'Continue' and its possible use. There are several navigation commands (previous, next slide, jump to slide and to last visited slide). There is the Exit and No Action commands which are self-explanatory. The most useful  commands are :

  • Display Image:  the image will be displayed for a duration specified in the Properties panel, Actions tab. You cannot choose an image in the Library, and once the image is imported it will not appear in the Images folder of the Library but in the Backround folder. Images folder only has the SVG icons of the used hotspots, whereas the SVG folder remains empty. Once the image has been displayed for the chosen duration,  the hotspot is converted to a visited state but remains active.  It is possible to click another hotspot before the duration of the first has ended. If you want all displayed assets to remain you have to choose a long duration for each of them.
  • Display Text: behaves the same way as Display image, you need to specify the duration. Very little formatting is possible, hence a suggestion in a previous blog post to replace Text b: y images with text in the wanted font and with controlled colors for the background. Hotspot will also have a visited state.
  • Play Audio: you can import a clip, or get it from the Library (they are stored in the Audio folder). No need to define a duration, once an audio clip is started it will continue playing unless you launch the command 'Stop Triggered Audio' from another hotspot.  If you have several hotspots using the Play Audio command and the learner clicks next hotspot before the first audio is finished, that first audio will automatically be stopped. That is the normal behavior of those audio clips as I explained in 'Pausing Timeline and Audio Clips'

360 Video slide

When you insert a 360 video in a 360 slide, it will end up in the correct folder 'Video' in the Library (under Media). I couldn't find a 'Find in Library' option. The video is represented the same way as a Video Demo slide or a FMR slide in a software simulation, it is merged into the background of the slide (mention for Usage in the Library uses also 'Background of slide).

Of course, the location of the playhead is now more important than for a 360 image. You can have an image where only the first frame is used to stack all the needed hotspots. However that makes no sense for a video, where movement is crucial. It will not be easy to create an engaging experience if the video has already audio embedded, because each hotspot will pause the video, which means also the embedded audio. Adding slide audio is possible the same as for a static 360 slide. However synchroniang will not be easy neither.  I need more exploration of this type of slides, but here are some first tips:

  • Try to offer audio only by using hotspots. I start the video with an inserted character that is set up to play audio, and have the video continue immediately after the audio is finished.
  • If you have only one hotspot in a frame, activate also the option 'Continue playing the project' whether you use Display Image/Text or Play Audio.
  • If you have more than one hotspot in the same location, and you use the Guided status, keep that setting only for the last hotspot to be presented. For the Explanatory status, you probably will need the playbar or a hotspot with the Continue command.

In the screenshot you see the video slide in its first frame. That frame has a character (selected) as hotspot which will play auio. The label indicates what the learner has to  do, but cannot be put on top of the character. When the audio is finished the video starts playing. It will pause again at 4.3 seconds which has two hotspots. The last hotspot has also Continue selected, status was here Guided.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1333343 2018-10-19T08:14:02Z 2018-10-19T08:14:03Z Available Events in Adobe Captivate

Intro

Over 6 years ago I published a blog post explaining the importance of Events in the application. I also offered for free a table describing all the possible events. Meanwhile new features have been added, the User interface has changes. It is time to update that old post and table. You will be able to download the table at the end. It is a protected document, you can print it at a low resolution, but no permission for editing. You can find workarounds, but please I beg you to show some respect for my work.

When training/helping users to start with advanced or shared actions, I often detect that newbies are not aware of the process needed to trigger an (advanced/shared) action: each action, whether a simple, shared  or advanced has to be linked to an 'Event', and that is the subject of this article. 

Events - out of the box

Lot of events to trigger an action are linked with interactivity, requiring  the user to act. That  is the case for Success/Last Attempt  events for (Shape) Buttons, Click Boxes, Text Entry boxes, interactive Learning interactions, Drag&Drop but also for Question/Knowledge Check slides. 

Less known are the actions that can be triggered when a Quiz is completed (Passed/Failed).

In that older blog post I mentioned the  Rollover slidelet which had  two events: on Rollover, and on Click. Since that object is no longer supported for HTML5 output, I took it out of the table. 

Object actions can be triggered by each drag event in a Drag&Drop slide and offer a lot of possibilities. Have a look at all the posts I published about Drag&Drop

Ignored by most users are the Hyperlink events. Such an event is not limited to 'hyperlink', but can trigger all sorts of actions, including Advanced actions. Find a example here.

Events that are not linked with interactivity are the slide events: when entering or when exiting a slide, you can have a simple, advanced or shared action to be executed. Have a look at the table to see possible limitations.

Often I get the question if an action can be triggered by time or by a frame. Not possible out of the box, but with micro-navigation, eventually the Delay Next actions command and/or the Timer/Hourglass interaction this limitation can be overridden. 

Overlay slides in Interactive Video, both the content and KC slides have similare events to those in a normal project. However the events for the hotspots in a VR project or 360 image/video are more limited as are the overlay Quiz slides in a VR project.

Widget to extend events

InfoSemantics developed a HTML5 widget that is one of my favourites: the CpExtra Widget. Adding events to objects is only one of its multiple features. It is not free but if you are plunging really into advanced/shared  actions, please try it out because it can add as many events as you want to any object. A trial version is available.

InfoSemantics used to have a SWF widget (EventHandler), worked great, but with the EOL of Flash player for all browsers, not so useful anymore.

List

You can download the list from this link

First column (Event) identifies the event, second column (Assign action) shows in which Properties panel (PI) you can indicate the action to be triggered, third column is A Description. When necessary you’ll find some comment/use cases in the last column, which also mentions the possible limitations for the event. 

There are two  tables. First table shows events able to  trigger only one simple, shared or advanced action/ The second smaller table summarizes the events which can trigger one out of two possible actions based on a condition: validated TEB, question slides, scored Drag&Drop slides  and Quiz.

I would appreciate if you left some comment in case you find this list useful. If you find this list useful, I could offer some other tables as well.

]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1332833 2018-10-17T16:32:31Z 2019-04-24T17:44:32Z Tips and Tricks for VR projects.

Intro

The ability to embed 360 images/video in an eLearning course is an enhancement (CP2019) which can be used in a lot of eLearning courses. As a civil engineer I think about the organisation of a construction site, detection of lack of safety in a building etc. The most recent release of Captivate allows to use those assets in two different type of projects: either a full VR project, or on individual slides in a normal cptx project.  You will have to use a normal (blank) project, as far as I know it is not possible in a responsive project with fluid boxes.

A VR project will be created right from the welcome screen. It can only have slides with a 360 Image or Video. All other Slide types except 360 slide are dimmed under the big button Slides, and the menu Insert is completely dimmed. You can add hotspots to trigger several possible actions,to the 360 slides, and overlay Question slides (not KC slides) where two types are possible: T/F and MCQ). The score slide is available but will not show up as overlay for the 360 slide, you’ll have to define a background slide for it.  I will offer some tips for the overlay Quiz slides, and for the Quiz Preferences.

If you use a 360 slide in a normal (blank) cptx-project (tp be inserted from the big button Slides), you’ll have the same hotspot functionality but will not be able to have overlay question slides. However you can use normal quiz slides and KC slides in the project. You’ll find more information about 260 slides in a future blog post.

In this article I will only talk about VR Projects using 360 Image slides. You can use multiple slides of that type, also 360 video slides, but no static slides.

VR project

Overlay Quiz slides – tips

Quiz Preferences

Quiz Preferences are available for the graded Overlay Quiz slides. But lot of the options are dimmed. Reporting setup is the same as in any other project with a quiz. In Settings options are limited to:

  • add the Clear button
  • add the Review navigation buttons if Review is allowed for the learner
  • hide or show the Score slide
  • allow Review

As usual for all Quizzes in Captivate, I strongly recommend to keep the Required field set to the default ‘Optional’ to avoid problems. You have same control over Quiz Result Messages and Quiz Review Messages as in any other quiz.

In Pass or Fail you can set the passing score (in % or points). But for the number of attempts on quiz level, you have only th choice between 1 or Infinite Attempts. In the last case you should activate the Retake button on the Score slide. There are no actions possible for Passing or Failing grade. No advanced actions are possible in a VR project, not only here for the Quiz, but also for the hotspots, for the On Enter events of any slide.

Default Labels are stripped out as you can see in this screenshot. It is impossible to change a style, only the Feedback messages, Clear and Submit button labels are available:

Styling the Quiz and Score slides

In a VR project, Themes are not available. Moreover the Object Style Manager cannot be used (as you did see in Quiz Preferences, Default Labels).  That seems to be a show stopper if you want to implement the font and colors that are part of your company’s default styles. However it is possible, manually,  to change the font and other features of the different text containers on quiz and score slides. You can even use Typekit fonts. It is of course more work than just applying another style, which is a pity. Maybe launch a feature request?

Score slide

Since the score slide needs a background slide, I tried to add slide audio to that background slide. However that audio played, but only for 1,5sec. As usual the pausing point for the sore slide (as for quiz slides) was set at 1,5secs.  You can move that pausing point and increase the length of the slide. But I did not succeed to make the audio play in combination with the score slide showing up.

Hotspots and actions

A hotspot is similar to a click box, but without a duration. It shows in the Timeline up as a brown circle. If you just add a number of hotspots without touching the timeline, they will all show up on the first frame of the slide, which means they’ll all be available to the learner at the same time, when in ‘Exploratory’ mode. If you prefer to use the ‘Guided’ mode, the sequence used to show a hotspot is following the stacking order: bottom hotspot shows up first, top hotspot last:

You can also scatter the hotspots over the timeline. But I will dedicate a separate article to the timelines of the 360 image and video slides in a near future:

Possible actions triggered by clicking hotspots are limited:

  • Show/Hide Playbar
  • Navigation commands: Go to Previous Slide, Go to Next Slide, Jump to Slide, Go to Last Visited Slide
  • No Action, Continue, Exit
  • Play Audio/Stop Triggered Audio.  There are more ways to have audio playing in a VR project:
    • You can add slide audio.  There is no way to pause that slide audio however with a custom action triggered by a hotspot (Pause is lacking in the commands). The only way to pause or mute the audio is with a playbar that has the appropriate buttons.
    • Hotspot audio: you can add audio to a hotspot like with any object. Be aware of the fact that this audio will play when the object becomes visible. This means that if the hotspots are all in the first frame, all audio clips start playing immediately (maybe even parallel with slide audio). If you scatter the hotspots, this is a way to combine a Display Text or Image command with audio. More info later in an article about the Timeline of a 360 Slide.
    • I mentioned above that adding
  • Display Text: the text will always be in Times New Roman, no way to change the style at all. The only possible workaround I see at this moment is to create an image with text in the appropriate font, size and color. Beware: you need to have a background for the text, or it will not show up. You also have to take care of eventual have a lower opacity, which means you will be limited to PNG  images, because JPEG doesn’t support transparency. Here is an example of a simple text image which I created in Word (text box, not simple text), captured with Snagit and lowered the opacity to 80% (this is not visible here, but shows well up in the VR project.:
  • Display Image: can also be combined with audio as explained before, and is probably the most versatile way of adding information. I mostly use it also for Text display?

Zooming?

The question has appeared a couple of times in the forums. It is not possible to zoom in on the 360 image, hoping this will make it in a future release. At this moment, a possible workaround is to take a 2D enlarged image and insert it on a hotspot that displays that image. Not the real stuff of course. I used it to display a full shot of my kitchen appliances in a 3D image of my kitchen.

]]>
ir. Lieve Weymeis