tag:blog.lilybiri.com,2013:/posts Captivate blog 2017-02-19T18:19:10Z ir. Lieve Weymeis tag:blog.lilybiri.com,2013:Post/1121706 2017-02-19T18:19:10Z 2017-02-19T18:19:10Z Captivate Timelines: color coding and shortcut keys

Intro

This last article about the Timeline is sort of a bonus for those who want to know 'everything' about the timeline panel. The color codes can be a quick visual help to recognize object timelines, and I personally use the shortcut keys quite a lot to avoid the many mouse movements to the different tabs in the Properties panel. 

If you have problems with the used terminology, maybe you missed some information from this articles, already published:

Captivate's Timelines demystified - Intro

Video Timeline demystified (cpvc)

Captivate's Timelines cptx-project

Pausing Captivate's Timeline (cptx)


Color coding

The color coding is the same for master slide timelines and slide timelines.  The hexadecimal code is just an indication because a lot of the timelines have a gradient fill..

  • Audio timeline: dark grey (about #4E5156)
  • (Master) slide timeline: beige (about #DBD7CE)
  • Placeholder objects: orange (about #DCC399) with some exceptions (Content/Rollover Caption/Rollover Image)
    • Content Placeholder: light blue (about #AFD7FF)
    • Placeholders for Rollover Caption/Image: green (about #BFDD8B)
  • Static objects: light blue (about #BEE8FB). Static objects are Text Captions, Text Animations, Shapes (not used as button), Highlight Boxes, Web objects, SVG's, Images, Videos, Animations, Characters, HTML animation. There are some exceptions
    • Rollover Caption/Image have the green color like for the placeholder (about #BFDD8B)
    • Rollover Slidelet is sort of a hybrid, between static and interactive: is also green (about #BFDD8B)
    • Zoom object: also green (about #BFDD8B)
    • Static widget/interaction: also green (about #BFDD8B)
  • Mouse object: beige like the slide timeline (about #DBD7CE)
  • Interactive objects: green (about #BFDD8B). Those include the buttons, click boxes, Text Entry Boxes, Shapes used as buttons, Learning interactions (static and interactive)
  • Effect timelines: light red (#FBDAE1), turning to darker saturated red (#F584A7) when selected

  • A selected timeline, with the exception of the slide audio  at the bottom, and effect timelines will always be blue (about #99BCBF)

Shortcut keys

I love shortcut keys, once published my favorites for moving/resizing objects (which are still functional). The timeline panel has also several shortcut keys, which can save time because you don't have to switch to the Properties panel all the time. Some of the shortcut keys also work for Effect timelines, but not all.
 

Zooming : Zooming in/out has to be done with the slider at the bottom of the Timeline panel. No shortcut keys are available.  

Spacebar or F3: alternative shortcuts for the play button on the timeline panel or the option Play Slide (confusingly stored under the big button Preview). This method (no Preview) can be used for editing timing, for synchronizing. Use this 'Play slide' (or scrub) to position the Playhead, and you can then easily synchronize start times of objects with this Playhead position. Inserting an object when the playhead is at a certain frame will result in having the object timeline starting with that frame.

HOME/END: moves the playhead to the start/end of the slide timeline

CTRL-E: to extend the duration of a selected object till the end of the slide.
This shortcut key is not valid for individual Effect timelines

CTRL-L: to move the start of an object timeline to the Playhead position, a great way to have multiple objects appearing on the same moment  (still waiting for CTRL-R to align end of timeline with playhead)
This shortcut key is not valid for individual Effect timelines but they'll move automatically with the object timeline   

CTRL-P: to move the start of an audio timeline to the Playhead position

LEFT/RIGHT arrow: moves start of an object timeline 0,1sec in the indicated direction. Applied effect timelines move with the object timeline. Shortcut keys also work for audio timelines
This shortcut key is valid for individual Effect timelines, after selecting they can be moved independently from the object timeline

CTRL-LEFT/CTRL-RIGHT arrow: moves start of an object timeline 1sec in the indicated direction (also audio timelines), applied effect timelines will move along.
This shortcut key is valid for individual Effect timelines, after selecting they can be moved independently from the object timeline

SHIFT-LEFT/SHIFT-RIGHT arrow: decrements/increments duration of slide timeline or object timeline with 0,1sec. Applied effect timelines will not be changed. This means that an effect timeline could end up being outside of the object timeline; in that case the effects will play but not with the intended duration or start.
This shortcut key is valid for individual Effect timelines, after selecting you can increase/decrease the duration of the effect timeline independently from the object timeline

SHIFT-CTRL-LEFT/SHIFT-CTRL-RIGHT: decrements/increments duration of slide timeline or object timeline with 1sec; same behavior for the effect timelines as described above.
This shortcut key is valid for individual Effect timelines, after selecting you can increase/decrease the duration of the effect timeline independently from the object timeline

Conclusion

This was the last article in the (long?) sequence about Captivate's Timelines.

I learned from the contacts with Captivate users, as forum moderator, trainer and consultant, that the Timeline is the most important stumbling block for starting Captivate users. For that reason I spent quite a lot of hours trying to assemble this 'soap' about it. Based about that same experience, and the statistics of my blog posts, I see two other similar issues causing problems to Captivate newbies. In the next article I will try to elaborate on those 'big' 3 and offer links to tutorials/articles that explain them in depth.  
]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1126004 2017-02-01T19:28:32Z 2017-02-13T19:04:39Z Pausing Captivate's Timeline

Intro

This is the fourth post in a sequence of 5. The first post introduced features of all timelines, the second is focused on the specific aspects of the Video Demo Timeline, the third on the aspects of the normal/responsive projects (cptx) both for master slides and normal slides. To understand this article - perhaps the most important - I recommend to  read at least the first and the third article as a preparation. 

This topic is more suited for a live event: a real or a virtual training session. I expect a lot of questions, and those are easier to answer in a live event. I have presented several webinars for Adobe in the past (most about advanced and shared actions), but that practice seems to be discontinued since a while. If you want to participate in a meeting (Connect room), I'm prepared to organize it. Send me a note: either by mail (info@lilybiri.com), in the comments on this post, or use Twitter (my handle is @Lilybiri). In case of sufficient requests, I'll propose a date/hour (probably am PT, for users in USA) and will need an e-mail address for the invitations. As a bonus, will offer you some files.

Pause and Pausing points

Pausing the timeline means stopping the Playhead. However that can be done in in two ways, and they do not affect the items in the same way. Let me first explain what I mean by 'Pause' as opposed to 'Pausing Point'. You'll see that I compare them with two traffic signs: Pause with the red light, Pausing point with the Stop sign. But also in traffic, some 'items' do not respect those signs, legally or illegally. 

Pause 

This strict way of pausing can be achieved by one of these methods:

  1. With the pause button on one of the default playbars.

  2. By choosing the command 'Pause' to be triggered On Enter for a slide (doing it On Exit is not a good idea, because it will happen after the last frame, see previous post about events).  It can also be a (last) command in an advanced/shared action.

  3. By using the Success event an interactive object (like a shape button) with the command 'Pause' either as a simple command or within an advanced/shared actions. Usually it will be the last command. 

  4.  Alternative for 'Pause' command is to assign 1 to the system variable cpCmndPause (its default value is 0). This system variable controls the pause.

If you use a playbar, you'll see that the progress bar is stuck when Pause is encountered. To understand even better, I recommend to insert the system variable cpInfoCurrentFrame in a text container, displayed for the whole project (on top). 

UnPause?

You can use the Play button on the playbar, or need the command Continue, which is available as simple action and in the dropdown list in advanced actions.

Pausing point

Pausing points exist on some special slides, or you can add them by inserting an interactive object for which Pause the slide is activated in the Timing Properties panel. In many cases the pausing point will be visible on the Timeline (see previous articles), but not always. Contrary to the absolute pause, here the timeline is 'waiting' for an action by the user. For that reason the STOP sign is a better metaphor than the red light. Here is an overview of the pausing points, which will be visible on the Timeline:
  1. Quiz or question slides: the pausing point is visible on the slide timeline, but not in the Timing Properties panel. Only way to move is by dragging. Default timing is at 1,5secs, and pause cannot be unchecked. Pausing point is linked with the two-step process triggered by the Submit button. However when selecting the Submit button, you'll not see the pause in the Timing Properties panel (as is the case for the D&D Submit button). Waiting is here for the user to click the Submit button, then to press Y or click on the slide
  2. Score slide: same situation as for the quiz slides: visible in the slide timeline, not in the Timing Properties. Default timing is at 1,5secs. Pausing point is linked with the Continue button, but will not show in the Timing Properties panel of that button. Waiting here is for the user to click the Continue button.

  3. Drag&Drop slide: is pausing at 1,5secs but the point is not visible on the timeline. You will not see it in the Timing Properties for the slide, but in the Actions tab of the D&D panel. It is linked with the Submit button, when selecting that button the Timing properties panel will show the timing of the pausing point. Waiting for the user to click the Submit button, or in case of Auto Submit waiting for a correct answer.

  4. Interactive objects (click box, button, shape button, Text Entry Box) can have a pausing point, to be defined in the Timing Properties panel. That pausing point will be visible in the Timeline, and the part before the point is indicated as 'Active', part after the pausing point as 'Inactive'. Since a click box is invisible to the user, it has not inactive part, its pausing point will always be at the end of its timeline. Waiting is for the user to click either on or outside of the interactive object (click box, shape or normal button) or to confirm the Entry in a TEB. You can edit the pausing point by dragging in the Timeline or in a precise way by editing the Timing Properties panel. It is also possible to uncheck the Pause (see screenshot 3 in the Gallery).

  5. Shape button on a master slide can have a pausing point. Since objects on a master slide have no duration, no Timing Properties panel, you have to indicate that you want it to pause, in the Actions tab of the Properties panel (see screenshot 4 in the Gallery). You can uncheck the pause there as well. The pausing point will be at the end of each slide, based on that master slide. It will not be visible in the timeline
  6. Interactive widgets or learning interactions have a pausing point at 1 sec. It will not show up in the Timeline, you can find it in the Timing Properties.  Pause can be unchecked, but you'll not want to do that for this type of interactions.That is the place to edit or uncheck the Pause (see screenshot 5 in the Gallery). Static widgets/interactions do not have a pausing point. More info about difference  between interactive and static in: Widgets and Interactions

Bonus: You can download a (watermarked) pdf with this overview from PausingPoints.

UnPause?

It depends on the kind of pausing point:

  1. For Question slides: the playhead is released after the second step of the Submit process and the actions defined in Question properties will be done.

  2. For Score slide: similar, but after clicking the Continue button.

  3. For Drag&Drop: exactly the same as for the Question slides, after clicking the Submit button.

  4. For interactive objects on master or normal slides: if an advanced action is executed (Success/failure) the playhead is not released automatically. If you want this to happen you have to include a Continue or a navigation command like Jump to as last command in the action. If you use a simple action, the playhead will be released by default, but in CP9 it is possible to uncheck that default setting 'Continue playing the Project' (not done in this screenshot).
     

What is Paused?

Not everything is paused by the absolute Pause command, nor the Pausing points. Watch the interactive movie to understand better. Some items are never paused, some are paused by both Pausing points and the Pause command, some are only paused by the Pause command, not by the pausing points although there may be a workaround. 

The position of the playhead when pausing is important: objects for which the object timeline starts later than the pause will not appear until the playhead is released.

Same is the case for Effects which have a duration, a timeline: if the pause occurs while the effect is not finished, it will stall in the last position and continue only when the playhead is released.

Animations however are never paused, not even when you use the Pause command triggered by the On Enter event of a slide. They will always play.

Video clips inserted as Event video are totally independent: if they are playing when pausing, they'll continue to play. If a pause is occurring and the video is not yet started, the user will be able to use the Play button of the video control panel to watch the video. Video clips inserted as Multisynchronized video however will be paused by the Pause command and by a pausing point.

The situation is a lot more complicated for audio:

  • Background audio is totally insensitive to Pauses or Pausing points: it will continue to play.

  • Slide Audio: will automatically be paused by the Pause command, but not by a pausing point. It is possible to pause slide audio at a pausing point, to resume when the playhead is released if you check 'Stop Slide Audio' on the Options tab in the Properties panel of the interactive object.
  • For the default pausing points on quiz slides, score slide, D&D slides you cannot pause the slide audio however. This seems confusing, and can lead to a problem. Slide audio clips automatically will increase the duration of the slide. You learned that the default pausing point of this type of slides is always set to 1,5seconds. If the playhead is released with the command 'Continue', it will have to visit all the remaining frames on the slide, those frames in the 'big' inactive part of the slide. To avoid that, I recommend that you change the default pausing time and make it just a little bit smaller than the slide duration. This is not necessary if the actions when releasing the playhead from its pausing point are a navigation to another slide, because the inactive part of the slide will just be skipped.

  • Object audio: will be paused by the strict command Pause, but not by a pausing point! There is no workaround for this behavior for a Pausing point.

  • Audio started with 'Play Audio' cannot be stopped not by Pause nor by a pausing point, the only way to stop it is by launching the command 'Stop Triggered Audio'. 

Why pausing?

This blog post has become very long, for which I apologize. For that reason I will write out some use cases, to illustrate the just described theory in later posts. You're welcome to post some ideas as well. Here are some appetizers:

  • Instead of creating very long slides to fit the narrations, use the Play Audio command and have a pausing point on the slide. That can be a Next button, which offers total control to the user.

  • Question slides with narration as slide audio: you need to move the pausing point.

  • Create custom navigation: use shape buttons on the main master slide, only one of them needs a pausing point to give each user all the time needed to watch the slides.

  • Create a slide with light boxes.

  • Have multiple TEB's on one slide with a unique Submit button.

  • Create a dashboard with buttons to display multiple vodcasts, images, podcasts.
]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1124670 2017-01-20T13:11:13Z 2017-01-30T17:44:45Z Custom Failure Messages/Attempts - Drag&Drop

Intro

This article is written as an answer to a question on the forums: Drag&Drop with Advanced Action

For quiz slides you have the option to show more than one Failure message, linked to the attempts. That functionality is not available for Drag&Drop slides. As you can read in the thread, another user posted a solution using the Object actions which are executed after each drag action.  The solution I describe here is more similar to what happens on other quiz slides: the messages will appear after clicking the Submit button. This work flow is only valid for Knowledge Check slides, which was the goal of the user on the forum. As you can read in one of my former blog posts, a D&D slide which is not scored, is reset automatically when leaving the slide. This functionality is used here. You'll also see that I used the InBuilt states for the drop target, which i described in this post.

Example 

Watch this interactive movie to see the result. It is Flash-based, do not watch from a mobile device, please.

Setup D&D Slide

The Drag&Drop slide's Timeline looks like this screenshot:

From Bottom to Top you find these object timelines:

  • DragOne, DragTwo and DragThree which are the 3 Drag sources. Those objects have only one extra InBuilt state: the transparent DragOver State. D&D is set up so that the drag sources disappear behind the drop target.

  • DropContainer which is the unique Drop Target. It has 3 states as you see in this State panel
  • Text Tx_Question which has the Question

  •  Gr_Feedback with several objects; the whole group is hidden in Output
    • I_Fail and I_Success are the two sticky images
    • Shape button SB_Continue with a pausing point at 2 secs, which is later than the (default) pause of the D&D (1,5secs)
    • FB_One, FB_Two and FB_Three are the failure feedback messages for the 3 possible failures. The first two have an inserted variable v_attempt.

You don't see a Success feedback on the timeline, because I kept the default Success message for the D&D slide (unchecked the Failure message)? That Success message has just be edited (freeform shape).

The D&D panel, tab Actions has been set up as visible in this screenshot. Although the user provides 3 attempts, you see that I set the attempts to 1 in this panel:

Variable, Events and Actions

I used only one variable: v_attempt, with a starting value of 3. If you want to have more attempts than 3, just change that starting value. You can see its value in the example movie, center of the bottom bar. That variable is also inserted in the first two Failure messages.

SubmitAct, triggered by the Failure event of the D&D (see panel above)

This conditional action has 4 decisions, can easily be edited to have more than 3 attempts

  1. Decision 'Always' is a mimicked standard action, decrements the value of v_attempt by 1
  2. Decision 'First' checks if v_attempt is equal to 2, which means the first attempt (because the original value has been decremented in the first decision). If that is the case 3 objects out of the feedback group are shown: the first feedback message (FB_One), the image I_Fail and the continue button SB_Continue
  3. Decision 'Second' checks if v_attempt is equal to 1, which means the second attempt. The actions are identical to 'First', with the exception of the feedback message (now FB_Two)
  4. Decision 'Third' checks if v_attempt is equal to 0, which means the third and last attempt. It has similar actions to the previous two decisions. 

Here is a screenshot of the complete action:

SuccessAct, triggered by the Success event of the D&D (see panel above)

This standard action will set the variable v_attempt to 0 (necessary to have the last action ContAct executed correctly), shows the image I_Success and the Continue button. The success message appears automatically, since it is de original embedded message.

ContAct, triggered by the Success event of the Continue button

Here is the 'trick'! After each attempt I want the D&D slide to reset automatically. This is only possible when you leave and re-enter the slide. To achieve this, I used a similar (but easier) approach as explained in the blog post ReplaySlide. I inserted a dummy slide before the D&D slide, with a very short duration (0,1secs). Have a look at the script triggered by the Continue button, which is a one-decision conditional action:

When there are attempts left (v_attempt > 0), these commands are executed:

  • Expression cpCmndGotoSlide = cpInfoCurrentSlide - 2
    The first system variable cpCmndGotoSlide has an index starting with 0, whereas cpInfoCurrentSlide starts with 1. That is the reason why 2 is subtracted. In human language this command means Go to Previous Slide.You can replace it by 'Go to Previous slide' as well, but I like to repeat explanations like this. Sorry!
    Alternative: Go to Previous Slide

  • Continue: is necessary so that the playhead is released. It will quickly speed over that dummy slide (0,1 sec) and you'll see the D&D slide almost immediately, freshly reset because it was re-entered and not scored.

When no attempts are left the user is navigated to the last 'End' slide.

Tips

If you want to allow the same scenario for this slide, when the user revisits the slide, you have to reset the variable v_attempt to its original value, which can be done with the ELSE part of the action ContAct. It will have 2 commands in that scenario:

  • Assign v_attempt with 3
  • Go to Next Slide

To change the number of attempts, for example from 3 to 4:

  • Change the default value of v_attempt to the new literal
  • Create an extra Feedback message FB_Four and include it in Gr_Feedback (select both new message and group, followed by CTRL-G)
  • in SubmitAct
    • Duplicate the last decision 'Three', and label it 'Four'
    • Edit 'Four', replace 'FB_Three' by 'FB_Four'
    • Edit 'Three': replace the literal '0' in the condition by '1'
    • Edit 'Two': replace the literal '1' in the condition by '2'
    • Edit 'One': replace the literal '2' in the condition by '3'

No other changes are necessary.


]]>
ir. Lieve Weymeis
tag:blog.lilybiri.com,2013:Post/1121435 2017-01-12T12:10:46Z 2017-01-17T19:40:23Z Captivate's Timelines (master slide/normal slide cptx) demystified


Intro

After this introductory post, and the post about the typical Video Demo timeline this article will explain the specific features of the timelines in a cptx project: both for master slides and normal slides. The common features for cpvc- and cptx projects were explained in the introduction, if you missed it please take a look at that blog post.

Timelines CPTX project

Timeline panel in a cptx project is shared by Master slides and Normal slides (Filmstrip), depending on which panel is active at that moment. There are differences in look and features between Master slide timelines and Slide timelines. 

Contrary to the Timeline in a cpvc project, each  'track' in a cptx project can have only one item:the (master) slide has its timeline, audio has a separate timeline stacked under the slide timeline, each object, whether static of interactive has its own timeline. Result is that the Eye/Lock buttons will affect only one object, that each track can have the name of the object on that track.

The vertical arrangement of the timelines, also called the 'stacking order', is important when you have overlapping objects. Be careful with covering interactive objects by static objects: depending on the output, the interactive objects will remain active even though they are not visible. 


    Master slide Timeline 

    The timing of a master slide has no real meaning, master slides nor objects on master slides have any timing. The Timing Properties panel is not available neither. The timeline will show the default duration (normally 3 secs), which is necessary to show and edit the stacking order (vertical positioning of the object timelines). Here is a screenshot of the timeline of a Master slide:

    Objects on master slides never have an ID, which explains why you seen only icons in the first column to identify the object  type. That type is also visible inside the object timeline itself. The icons for Placeholders usually are included in square brackets [], to differentiate them from normal objects (no brackets). There are some exceptions (look at the Rollover Caption/Image in the screenshot).

    The only interactive object allowed on master slides,  is a shape button (shape used as button). If Pause Project  is checked in the Actions tab, the pause will be visible at the end of the timeline. This is the case for the uppermost object in the screenshot: look at the Pause symbol, the pause itself is at the location of the end of that timeline. This shape button is an object, the shape two tracks below is a placeholder (brackets). 

    The tiny icons between the control panel (with play button etc) and the zoom slider do not have any value because Time has no meaning for a master slide.

    Slide Timeline

    If you create a slide, based on a master slide, not all objects inserted on the master slide will be visible in the Timeline; have a look at this screenshot:

    • Placeholder objects (beige timeline) will appear in the timeline panel (I renamed them); if you don't use them (example: you don't add text, content, image), they will not appear in output. The icons are in square brackets.
    • Content placeholder (blue timeline) acts the same way.
    • Rollover caption/image (green) if inserted as Placeholders, will appear but they'll move to the bottom of the stack as you can see on the screenshot which shows a slide based on the Master slide shown above.
    • Static objects on the master slide, will be visible on the stage, but not in the timeline. They will be visible in output, with their formatting on the master slide (there is no such object in this case)
    • Shape buttons on the master slide will be visible on the stage, but not in the timeline. They will be visible and keep their interactivity in output. In the screenshot you see that the topmost object, the shape button on the master slide, is missing in the Slide timeline.

    The stacking order of the objects on the timeline can be changed by dragging the timeline or by using the Arrange option under the Right-click menu. Objects can be staggered on the timeline to appear at in sequence or overlapping partially. Contrary to the typical video timeline for a CPVC-project, all objects will be visible on the stage, independent of the time they'll appear. For people used to avideo work flow this can seem confusing, but it is very helpful for arranging objects on the stage. You can always check the sequence of appearance by Playing the slide (which is not a Preview). You'll see the playhead moving, and can stop it with the space bar or the Pause button to edit/synchronize (see also Shortcut keys later on).

    The specific indicators that can appear in the timelines for a cptx project on normal slides are:

    • Audio icon : if you attach audio to an object, a similar audio icon as you had for video clips with audio in a cpvc-track,  will appear in the timeline

    • Pause indicator: consists of two parts, the pause symbol (double vertical lines) and the exact location of the pause (thin vertical line) to the right of the symbol. You'll see this indicator in
      • Question slide timeline: mostly at 1.5secs for a default slide duration of 3 secs - pause is linked to the Submit button
      • Score slide timeline: identical setup as for question slides - pause is linked to the Continue button
      • Interactive object timeline:  if you insert a pausing Click box, the pause will be at the end of its timeline; for buttons, shape buttons, Text Entry Boxes, the pausing time is by default 1.5secs after the start of the timeline, it can be changed by dragging the thin vertical Pausing line or with the Timing Properties panel. That same panel can be used if to uncheck the pause.

        Other timeline pauses that are NOT visible on the timeline, only to be found in the Timing Properties panel:
      • A pausing shape button on the master slide. The pause is at the end of each slide timeline, but not visible on any slide timeline
      • Drag&Drop slide is by default pausing at 1,5secs (under Actions tab in D&D panel), but that pause is not visible on the timeline (linked to the Submit button, playhead will be released by either the Success or the Failure action)
      • Interactive widgets/interactions: do have a pause at 1 sec (check the Timing Properties panel). Beware: most widgets/interactions are static, not interactive. Examples of interactive widgets are the games. For a complete overview of interactions, have a look at two older articles on my blog: Learning Interactions  and  Widgets
    • Group  indicators: if you group objects, you can collapse the group with the collapse button and expand with the expand button.
      Tip: never group objects having effects, because the effects will be deleted without warning. You can apply an effect to a group.       

    • Effects: if you apply effects to an object the indicator 'fx' will appear on that timeline (and on the stage).  You get the same expand/collapse buttons as for groups. 

    • (Sticky) triangle: red triangle at the end of an object timeline means that this timeline is linked to the end of the slide; if you increase/decrease the slide duration the object timeline will move to keep the end glued to the end of the slide, without changing the duration of the object timeline.
      Do not confuse with an object timeline that is set to Display for the rest of the slide (CTRL-E): such an object timeline will have a fixed start point, its duration will change when the slide duration is changed. It has no special indicator.

    • Double arrows at the end of an object timeline: this object is set to Display for the rest of the project. You'll see its timeline only on this first slide, on following slides the object will be visible on the stage but not in the Timeline panel.

    • A Zoom object has a very thin vertical line in its timeline: this indicated the end of the zoom movement.

    • FMR (Full Motion Recording, created in a software simulation for mouse movementsslides: red line in the center of the slide timeline
    • CPVC slides: identical look to the FMR slide, but editing functionality in the Properties panel is different (will open the Video editor)

    Tips 

    You can see the slide timeline as one video clip in your course 'movie'. Whether the user will be aware of a transition between those slides depends on your setup. The playhead will continue seamlessly from the last frame of a slide to the first frame of the next slide (which is another video clip) if these conditions are fulfilled:

    1. No slide transition between slides
    2. Keep the default actions On Enter for the second slide, and On Exit for the first slide (No action)
    3. No pausing on the slide (look above for presence of pauses)

    Captivate could have put all those 'clips' on one long timeline, but believe me, it is much easier to manage and edit objects on the shorter slide timelines and the learner will never know this.

    The default duration of a slide is set to 3 seconds. There are (only) two possible valid reasons to increase that duration:

    1. If you add a Voice Over audio clip to the slide (slide audio).  The slide duration will have to match or be superior (allowing small gaps before and after audio) to the duration of the audio clip.

    2. If you want objects to appear in a certain sequence, staggered on the timeline, even if you don't have slide audio.

    What is NOT a valid reason to increase the slide duration: to give the user time to see/read everything, or in case of object audio to listen to everything. Captivate is meant to create interactive courses! Give your learner control, by pausing the slide. In that case he can take as much time as he wants to listen, watch the slide. This subject (about adding pauses) is so important that I'll treat it more in detail in a later post.

    In that case, give the user control over the movie, by adding Pause(s) to the timeline. 

    ]]>
    ir. Lieve Weymeis
    tag:blog.lilybiri.com,2013:Post/1121434 2017-01-10T10:32:29Z 2017-01-10T10:32:29Z Video Demo Timeline demystified (cpvc-project)

    Intro

    In a first article about timelines, I described the common features: timeline ruler, playhead, eye button, lock button, control panel and the tiny icons at the bottom of the second column of the Timeline panel. This post will explain the more specific features of the Timeline panel in a Video Demo project (cpvc file).

    Timeline in a CPVC or Video Demo Project

    CPVC-files are created with the Video Demo application packed with Captivate. Those projects are pure video files, they can only be published to a video format (MP4 - H264 codec).  It has a dedicated video editor, which has some panels similar to those in a cptx-project. One of those panels is the Timeline panel, which is not hidden when entering the Video editor, contrary to the newbie UI for cptx-projects.. Here is a screenshot of a typical timeline of a video demo in the Video editor:

    Similar to other video applications, you'll see one continuous timeline for the whole movie. I will use the word 'track' for each horizontal line in the Timeline panel. Immediately after creating a video demo only one track will be visible in the panel, the bottom track labeled as 'Video/Audio'. This label is automatically attributed to the first track.

    The bottom track in the screenshot pointed at with the name 'Video/Audio' because contrary to a cptx project, the audio has no separate timeline, but is included in the video track. Another difference is that the bottom track can have several video clips. In the screenshot you see two full video clips and the start of a third clip.  

    The video clips can be in sequence (clip 1 and 2) without a gap, or separated by one or more static objects. Clip 2 and 3 have a text and an image inserted between them. Those objects were added manually, and they appear in new tracks. Only non-interactive, static objects can be added to a video demo. Similar to the multiple video clips for the Video/Audio track, the other tracks can have multiple objects (which is not possible in a cptx project). New tracks are only added when necessary, when two or more objects overlap in time. In the screenshot you see multiple objects in three tracks. This explains the generic name 'Objects' for the tracks (first column). The names of the tracks cannot be changed, customized which is another difference with the object/style timelines in a cptx project. The Properties panel has not field 'Name'. 

    Due to the possible presence of multiple items on a track, clicking a dot linked to the Eye and Lock button will affect all the objects on that track. It is not possible to lock or hide one object timeline (or one video clip). That is another big difference with the Timeline in cptx projects. 

    More specific features are:

    1.  Just below the time ruler in seconds, you'll see diamond icons (and a half icon at the start). Those diamonds indicate the start/end of a video clip. Their color is grey by default. You can click such a diamond, and the color will be green. You can add a transition from the Video Effects panel that will appear automatically in the right docking station.After adding a transition the diamond's color changes to orange. You can add a transition to the start of the first clip, hence the half-diamond appearing at the start of the Video/Audio Track.
    2. The orange In/out markers are the same vertical position as the playhead. You'll find them at the beginning and the end of the Video/audio track. If you want to focus on one video clip, you can drag the In marker to the start of that video clip, and the Out marker to its end. When you use the Play button from the Control panel (or the shortcut key Space bar), the playhead will move only within that video clip. You can also use the Trim command to delete the darkened part by dragging the In/Out markers. If I did that for the situation in this screenshot, only the second video clip would be preserved.
    3.  In the Pan/Zoom status (which is the default status of the timeline, visible in the Screenshot images so far) the track with the video clips can have Zoom indicators (loupe icon). They appear when you add a zoom and/or pan effect. The duration of the zoom/pan transition is visualized by the width of the shadow triangle before the zoom indicator.
      In this Pan/zoom status you'll find under the timeline tracks the buttons 'Split', 'Pan and Zoom' and 'Trim' to be active.

    4. The second status, Mouse status can be made active with Edit, Edit Mouse points (use the same work flow to return to the Pan/Zoom status). The 'Pan and Zoom' button will be dimmed, inactive but 'Split' and 'Trim' buttons remain available. In this status the start of mouse trails are visible on the video/audio track as mouse icons(screenshot below): you can select them individually and edit or delete the mouse object.
    5. To trim away part of a video clip, you have to position the playhead near the location that you want to delete. When clicking the Trim button two black triangles, the Trim markers (In and Out) will appear. The gap between them will be greyed out and will be deleted when you click on the Trim button again. You can drag both Trim In and Trim out markers to select precisely the part to be trimmed. You'll end up after the trim action with two video clips, and a transition point (diamond marker) separating them.

    The objects in the CPVC timeline have no real color coding (for cptx projects, this will be explained in a later blog post): everything is blue, the Video/Audio track is bit different but still blue. A selected video clip or object will be in a more saturated blue.

    CPVC or Video Demo slide

    You can embed a Video Demo in a normal cptx-project. This can be done either by recording directly from within the cptx-project with the big button, Slides, Video Demo or by inserting an exisiting (raw) cpvc project using the menu Insert, CPVC-slide. The look of such a slide, in the filmstrip and in the Timeline panel is identical to the look of the (old) FMR-slides (Full Motion Recording) that are created in a software simulation for movements that cannot be captured in static slides (like dragging, moving objects). The only way to recognize a cpvc slide is by the presence of the button 'Edit Video Demo' in the Properties panel.

    Next post?

    Soon I'll publish a longer article about the ins and outs of the Timeline(s) in a cptx-project: master slides, normal slides, effects....


    ]]>
    ir. Lieve Weymeis
    tag:blog.lilybiri.com,2013:Post/1119996 2017-01-08T14:17:01Z 2017-01-17T18:10:03Z Captivate's Timeline(s) Demystified - Intro

    Intro

    Happy New Year 2017 to all Captivate users!

    Quite a few years ago I wrote an article about Timeline secrets in Captivate 5: Tiny Timeline Tidbits

    Since the change in the UI with Captivate 8 , the newbie User Interface minimizes the Timeline panel by default which is a pity IMO. Some of the questions I read, at least partially due to that decision to hide the Timeline: 

    •  'I want to get rid of the timeline, don't need it at all'
      (user thinking that Captivate is just a Powerpoint clone).
    •  'Why is the timeline not showing the whole project, so user unfriendly'  
      (user supposing Captivate is a mini video application)

    •  'Why do I see all the objects on the slide, even when the playhead is in a part where some objects shouldn't be visible, not intuitive'  
      (user with  an Animation background)

    For those reasons I suspect it is Time to update that old article, to explain the ins and outs of the Timeline panel with its latest additions like CPVC-projects and slides, Effect Timelines, Drag&Drop. 

    Timeline panel, in collaboration with the Timing Properties panel is at the core of the Captivate applications. Personally I'm persuaded that it should be a top priority in the skillset of any Captivate developer, whatever its level.

    Since I cannot offer you a 'digestive' (limoncello, grappa, schnapps, single malt;;;) I will split up this (broad) subject in several articles. You are reading the introduction. Following posts will treat topics like 'Timeline in a cpvc-project', 'Timelines in a cptx-project, master slides and normal slides', 'Color coding and Shortcut keys for Timelines', 'Why/how to pause a timeline?'. 

    Why a Timeline?

    Many users talk about the output of a Captivate project as 'a movie'. Although this is only completely true for a file published to a video format (MP4), this indicates well that Captivate is related to video applications like Premiere Pro and After Effects.

    No one will have doubts about the importance of 'time' for video. A movie has a playhead, which moves at a certain speed. That speed is usually indicated by the term 'frames per second', or FPS.

    Frames remind me always of the traditional way of producing cartoon movies: each frame, drawn by a graphic artist, was slightly different from the previous and the next frame. By playing those frames at a certain speed,  movement could be simulated: the slowness of our eye/brain made it possible to see fluid movements from those frames.

    Captivate has two types of 'raw' files: the cptx-files (slide-based) and the cpvc-files (less-known, Video Demo files). Both types have a Timeline panel but with some differences as I will try to explain in this sequence of posts. Let us start with those features that can be found always in the Timeline.

    Common features

    You can either read the following text, or watch this interactive Captivate slide:

    Some items are available in all Timeline panels: for cptx and cpvc projects:
    1. Contrary to some video or animation applications, the Timeline ruler in Captivate is always in Time units (seconds), cannot be changed to frames (look at the horizontal ruler in the top of the Timeline panel). The smallest increment in the timeline is 0,1 seconds. With a default rate of 30FPS (which can be changed) 0,1seconds = 3 frames

    2. The Playhead is represented by a red rectangle. When you use the play button in the control panel (see 4), you'll see its movements. You can also drag the Playhead to a certain position on the timeline. The size of the rectangle is bit different between a cptx and a cpvc project as you can see in the screenshot.

    3. In the first column of the panel, on top you find the Eye button, and each track (horizontal line in the panel) in the Timeline has a (blue, filled with orange) dot under this button. See the screenshots:
      When clicking the Eye button on top of the column, all objects in all tracks will be hidden on the stage. This is only meant for editing reasons, it will not affect the published course.To hide items after publishing you need to click that 'other' Eye button in the Properties panel of the objects (hidden in Output). When clicking on a dot under the Eye button, next to a track, all objects on that track will be hidden. In the exampled on the screenshot, the second tracks from the top have been hidden.

    4. Next to the Eye button is a Lock button, also with dots next to each track. When you click the button itself all objects on all tracks will be locked: not available for selection nor for editing properties. However, if you click a dot next to a track, there are two states. On the first click only size and position will be locked. In that state you can still select /style the objects. The blue Lock icon is surrounded by 4 arrows, as you can see in the screenshot: for the cpvc it is the track immediately above the Video/Audio track, for the cptx project the uppermost timeline. Clicking twice on a dot results in full lock: no selecting/editing is possible. This is the case for the uppermost Objects track in the cpvc-screenshot and for the image I_topics in the cptx project. Watch the different look of the lock icons.

    5. The Control panel at the bottom of the first column (see screenshot above) has the classical (video) buttons:  'Move Playhead to start', 'Stop', 'Play', 'Move Playhead to the end'. Play and Stop can also be activated with the space bar if the timeline panel is active.
      Warning: Play Slide under the button Preview has the same function as Play in this control panel. Although it is under the Preview button it is NOT a preview at all! It is just meant to be used for editing, will not show how the slide will look after publishing. This is a common misunderstanding.
      The last button on the control panel: 'Audio' is a toggle, will mute/unmute Audio when watching using the Play button. Like the Eye button, this will not affect audio when publishing. The state of this button will apply to all open projects.

    6. In the second column at the same vertical position as the control panel described under 6 and the horizontal scrollbar, you'll find 4 tiny icons in all normal slides (they have no sense for the Master slide which has no real duration)

      1. Hourglass icon: indicates the location of the playhead from the start of the track; its tooltip is 'Elapsed Time'; this indicator is always available, even when no track nor object is selected.
      2. Vertical line + right arrow (Selected Start Time) will only have a value when a video clip or a static object is selected; it will indicate the start time of the selected video/object. In the screenshot the Smartshape on top is selected.
      3. Vertical line + right arrow + vertical line (Selected duration) will show the duration of the selected clip/object, is only available when a video/object is selected on a track.
      4. Chrono icon: Total duration of the slide 

        The Zoom slider to the right of this total duration,  allows the timeline to zoom in/out. 

    Next post

    The next article will be about the specific features of the Video Demo timeline (cpvc-project) and the cpvc-slides. You'll not have to wait long, neither for the third article about the specificity of timelines in a cptx-project (master slides and normal slides). 


    ]]>
    ir. Lieve Weymeis
    tag:blog.lilybiri.com,2013:Post/1116229 2016-12-18T17:51:29Z 2017-01-20T01:29:51Z Playing with Numbers - part 2

    Intro

    In the previous blog post I introduced you to the common JS API, and you used the method 'setVariableValue' to populate a variable defined in the Captivate project. That value was a random number generated in the JS window, using the Math.random() and the Math.floor methods. The values were integers, between fixed numbers 10 (included) and 100 (not included). In this second article you'll learn to know a new method 'getVariableValue' from the JS API, which lets you transfer a value to JS. We started with the mathematical operation 'Sum', now we'll switch to 'Subtractions' needing again the command 'Expression'. Because CP cannot handle well negative values, we'll have to take care of that as well.

    The progress bar introduced with the Sum exercises, will be continued. You'll see that it is possible to change the state of an object, displayed for the rest of the project, from a slide where that object is not inserted. 

    Scenario Subtract Slide

    Subtraction will be with two terms, always integers. Whereas in the Sum slide I decided that all terms would have to be between 10 and 100, on this slide the user will be able to choose a Maximum number, and if he wants a Minimum number. The minimum number has already a default value of 10, which can be changed by the user, the maximum number is empty. The Max value needs to be bigger than the Min value, if that is not the case, the Max value will automatically be set to 'Min + 200'.
    The same sticky figure (with states) and OK button (with state New) are used as described in the previous post for the Sum slide.
    This Subtract slide can only be visited when 5 correct Sum exercises have been done, hence the 5 stars on the progress bar are in place on entering this slide. The progress bar is set to display for the rest of the project, and you can change the state (to 6 or more stars) from this Subtract slide, although the progress bar is not visible in the Timeline. New stars can be added after a correct subtract exercise, and after 10 stars, the Next scenario is executed (same as on Sum slide).
    Here is a slide preview, after answering the first correct subtract question:

    Used objects

    The same multistate objects are used as on the Sum slide (see state panels on previous post):

    • Sticky figure with its states and a motion effect for the minus sign
    • OK button, which changes to a New button after the first exercise
    • Progress bar, which has been displayed for the rest of the project.

    In this slide I only used TEB's, which I can control due to the presence of the CpExtra widget (InfoSemantics). The consequence is that this description is only valid for HTML output. For SWF output the TEB can be replaced by a Scrolling Text Interaction:

    • TEB_max accepts only numbers and is empty when starting - associated variable is v_max
    • TEB_min accepts only numbers and has a default value of 10 (changeable)  - associated variable is v_min
    • TEB_result accepts only numbers - associated variable is v_result (reused from sum slide)

    Two shape buttons, that are alternatively enabled/disabled:

    • SB_Number is the OK/New button, triggers the advanced conditional action SubtractTerms
    • SB_CheckSubtract is the Check button, triggers the advanced conditional action CheckSubtract
    To make the next state of the sticky figure interactive, it is covered by a Click box CB_Next2.

    This is the Timeline of the slide:

    Variables

    Some variables created for the Sum slide are reused:

    • v_one, v_two, v_three, v_four: are reused for the values of the two terms, which will end up in v_one (first term) and v_two; those variables will be reset by the On Enter action of the Subtract slide
    • v_result: will store the result value typed in by the user in TEB_result, has to be reset as well.
    • v_check: will be calculated and used to validate the result given by the learner. 
    • v_progress: is a counter for the correct answers, will be used to change the state of the progress bar; this variable is not reset but starts with the value 5 (end value after the Sum slide)
    • v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)
    • xprefTEBUpdateFromVariable:  for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear TEB_Result.

    New variables are:

    • v_max associated with TEB_max will store the maximum value for the terms

    • v_min associated with TEB_min will store the minimum value for the terms

    Advanced Actions

    Shared actions were not possible. One Standard advanced action was needed (to reset vars) and two Conditional actions.

    EnterSubtract

    This very simple standard action, triggered by the On Enter event of the slide, clears several variables that are reused from the Sum slide:

    SubtractTerms

    This conditional action is triggered by the OK/New button SB_Number. It has 3 decisions:

    1. "CheckCorrect" will compare the values stored in v_max en v_min. If the maximum value is not exceeding the minimum value, the maximum value will be calculated by adding 200 to the minimum value.

    2. "RandomNum" will generate two random numbers and store them in the variables v_three and v_four. Reason is that the last decision will have to put the largest number into v_one and  the smallest in v_two. This could have been checked in the JS script window as well, but I wanted to keep the JS as simple as possible and checked with the last decision. 

    3. "CheckMax" compares the values in v_three and v_four. The largest value will be assigned to v_one, the other to v_two. This decision also calculates the result of the subtraction to be stored in the variable v_check (will be used to check the user's entry).

    CheckSubtract

    This conditional action is triggered by the check shape button SB_CheckSubtract and has 6 decisions

    The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Number is changed to another state and enabled again, while the button SB_CheckSubtract is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

    The 5 other decisions 'ProgressXxxx' check the value of v_counter and show the appropriate state for the progress bar. The last decision 'ProgressTen' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Multiply exercises).


    Javascript 

    In the previous post you learned to use 'window.cpAPIInterfaceSetVariable (x,y)' method to populate a variable x (to be entered as a string between quotes) with a value y. You calculated y by using a combination of two Math methods in JS: 

    • Math.random() which generates a random number between 0 and 1 (not included)
    • Math.floor() which will convert a decimal number to an integer by rounding it down (cutting off the decimals).

    For the sum slide we used a combination of those two methods, to end up with a random number between 10 and 100 (not included):

    Math.floor(Math.random()*(100-10)+10))

    For the Subtraction, the maximum and minimum values are not fixed, but stored in Captivate variables v_max and v_min. Due to the first decision in SubtractTerms action, we are sure that v_max > v_min. Those value will be transferred to JS variables with the method 'window.cpAPIInterfaceGetVariable(x)' where 'x' is the name of the Captivate variable, entered as a string (between quotes). Example:

    var max = window.cpAPIInterfaceGetVariable("v_max");       stores value of v_max in JS variable max

    Instead of the fixed values 100 and 10, used for the sum slide, you use this time min and max to generate a random number between min and max. The two random numbers are stored in variables v_first and v_second. Since they are random, we do not know yet which one has the largest value:

    var first = Math.floor(Math.random()*(max-min)+min);

    var second= Math.floor(Math.random()*(max-min)+min);

    You are already familiar with SetVariableValue to store the result of first in v_three - Captivate variable, and second in v_four. 

    window.cpAPIInterface.setVariableValue("v_three",first);
    window.cpAPIInterface.setVariableValue("v_four",second);


    Conclusion

    You earned a second star, soon a third part will be ready, up to multiplications and bit more of randomness.

    ]]>
    ir. Lieve Weymeis
    tag:blog.lilybiri.com,2013:Post/1108071 2016-12-05T20:32:57Z 2016-12-18T17:52:28Z Playing with Numbers - part 1

    Intro

    How to use Adobe Captivate to create a course for simple calculations, has been popping up on the forums several times. You can use Text Entry Boxes, MCQ's to reach that goal, but that is pretty limiting. Some examples can be found in this older blog post where the real goal was to have the score being linked to the attempts.

    I started using JavaScript in Captivate projects since the release of the common API for JS (version 8) whenever the advanced actions did lack the wanted functionality. For those who want to start using JS, I wanted to explain some very simple use cases in a sequence of 4 articles that will focus on the 4 basic operators that are available in the Expression command: sum, subtract, multiply and divide. Each of the posts will introduce a JS example. The Expression command is not available as a simple command from the dropdown list in the Actions tab, it is only available in advanced/shared actions. 

    This article will focus on the Sum operator, and introduce JS to make it possible to generate random numbers. You'll also see how to assign that generated number to a Captivate variable with the function setVariableValue from the API. That will allow to use the same slide for several sum questions. I will use the Multi-state object feature of Captivate 9 several times as well. In the next parts you'll also learn about retrieving a Captivate variable value with getVariableValue, how to format a number to specific number of decimals, how to avoid dividing by 0 (zero).

    Scenario Summing slide

    User will be allowed to choose for sums consisting of 2 up to 4 terms. The number of terms can be changed after completion of one exercise.

    For a correct answer, the stick figure will change to another state, and a star will be added to the progress bar (also a multi-state object). For an incorrect answer the stick figure also changes to a state but no star will be ended to the progress bar.

    After completion of 5 correct sums, the stick figure will change to a Next button. The user could still add more questions, but no more 'stars' will be added to the progress bar. 

    In this screenshot, from HTML output, you'll see the situation after one successful answer, second sum has been created with 4 terms:

    Used objects

    Multi-state objects

    Stick Character: see image Object States in Library below

    OK/New shape button: see image Object States in Library below

    Progress bar: see image Object States in Library below 

    Special objects

    Radio buttons - works perfectly for SWF output but formatting is not preserved for HTML output; labeled "Wd_TermNumber"

    Scrolling Text interaction for SWF output, labeled "Wd_SumResult". It is possible to change the shown content in this interaction by changing the associated variable (v_result). However that functionality only works for SWF, not for HTML output. For that reason I needed an alternative which is a  

    Text Entry Box, labeled "TEB_result" combined with the CpExtra widget and a specific command variable for HTML output. Since there is a bug in Captivate 9, which prevents using a TEB multiple times on a slide, I used a workaround. The default Submit button was deleted. It was replaced by a custom shape button (SB_CheckSum in the timeline) to trigger an advanced action. In this case an easy workaround, since I used that same shape button for the Scrolling Text Interaction for SWF output. The associated variable for the TEB is the same as for the Scrolling Text Interaction (v_result). Nothing had to be changed to the advanced action 'CheckSum' when replacing the Scrolling Text Interaction by a TEB.

    Variables

    v_one, v_two, v_three, v_four: will get the values for the (possible) 4 terms of the sum which are generated by the advanced action 'SumTerms'

    v_result: will store the result value typed in by the user in the Scrolling Text interaction (SWF) or the TEB (HTML)

    v_check: will be calculated and used to validate the result given by the learner in the advanced action 'CheckSum'

    v_progress: is a counter for the correct answers, will be used to change the state of the progress bar

    v_null: empty variable used to clear the content of the displayed result for a new sum (see Where is Null?)

    xprefTEBUpdateFromVariable: only for HTML output, one of the CpExtra variables. When assigning the value 1 to this variable (with CpExtra widget loaded either in the file, or headless) it is possible to change the associated variable of a TEB by an action, and it will be reflected immediately in the TEB. I used this to clear the result when defining a new sum.

    Advanced Actions

    In this particular case it was not possible to use shared actions. Two advanced actions, both conditional, were needed:

    SumTerms, triggered by the OK button (SB_Terms) after choosing the number of terms

    This conditional action has 4 decisions, the first 'Always' is a mimicked standard action (will always be executed), prepares for a new sum by clearing the result and the terms. It also resets the state of the sticky character.
    The three other decisions will show the correct number of terms, based on the choice made by the user. In these decisions, a Javascript command is used to generate random numbers (see later).

    CheckSum, triggered by the Check button (SB_CheckSum) to validate the answer

    This conditional action has 6 decisions.

    The first decision 'Checker', will check the entered value (v_result) with the correct value (v_check). It is the only decision with a Then and Else part. For correct answer, the state of the sticky character is changed, the counter (v_progress) is incremented,  the state of the button SB_Terms is changed to another state and enabled again, while the button SB_CheckSum is disabled. For an incorrect answer, the counter is not incremented, and the sticky character is changed to another state.

    The 5 other decisions 'ProgressXxxx' check the value of v_progress and show the appropriate state for the progress bar. The last decision 'ProgressFive' will also change the sticky Character to its state GoNext and enable the click box to proceed to the next slide (subject of the next blog post, with Subtract exercises).

    JavaScript for random numbers

    In the documentation provide by the Captivate team about using the common JS interface, you'll find a description of creating random numbers:

    Common JS Interface

    In this example I wanted to generate a random number between 10 included) and 100 (not included). The script window for the decision 'TwoTerms' of the action SumTerms (see above) had to generate two random numbers, to be stored in v_one and v_two; for the decision 'FourTerms' 4 variables had to get a random number:

    Short explanation of this code:

    The JS method Math.random() generates a decimal number between 0 (included) and 1 (not included).

    The multiplication Math.random()*(100-10) will result in a random (decimal) number between 0 (included) and 90 (not included).

    The sum Math.random()*(100-10) + 10 will result in a random (decimal) number between 10 (included) and 100 (not included).

    The JS method Math.floor(e) will cut off the decimals of the argument e, round iit down to the nearest integer. As a result the full expression used in the JS window  Math.floor(Math.random()*(100-10) + 10) will result in an integer between 10 (included) and 99 (included). 

    The method from the common API setVariableValue(x,y) allows to assign the value from the second argument to the variable indicated in the first argument. Beware: the variable name has to be identified as a string (text) by putting it between single or double quotes. For the value, which is a number, you can use the expression explained above. It is a method of the cpAPIInterface which is in the window object. That explains the total line of code, which in JS always ends with a semicolon:
    window.cpAPIInterface.setVariableValue("v_one", Math.floor(Math.random()*(100-10) + 10));

    Conclusion

    You will be able to download the published files - both for SWF and for HTML, when the 4 articles are ready. If you succeeded reaching  this conclusion, you have won your first star!  Three more to go :)











    ]]>
    ir. Lieve Weymeis
    tag:blog.lilybiri.com,2013:Post/1097537 2016-10-12T20:04:46Z 2016-10-14T10:34:32Z Knowledge Check Slides - tips

    Intro

    Knowledge Check Slides have been introduced as one of the new quizzing features with version 9. The Help documentation is 'spartan' as usual. You can read this as Features (quote from the Help):

    • Knowledge check slide imbibes similar features of question slide without any results, reporting structure and interaction ids. 
    • Knowledge check slides do not participate in reviews. 
    • Random questions are not applicable to this knowledge check slide. 
    • Master slide and controls usage is similar to question slide. 
    • Knowledge check slides can be used to impart the learning on specific topics. 

    I explored those KC slides in preparation for a workshop about new Quizzing features, and want to give you some more tips. Since the KC slides are very similar to normal quiz slides, I'll start with 'Recognizing KC slides'. Then I'll show the differences in default setup, and in some other aspects not mentioned in the Help,  the relationship with the quizzing system variables and - what did you expect? - a tweaking tip.

    Recognizing KC slides

    This is possible in different locations:
    • in the Filmstrip, KC slides get a special indicator at the bottom right, which the Quiz slides do not have; in this screenshot slides 1&3 are KC slides and have that indicator:
    • in the Quiz Properties panel you see more differences with normal quiz slides, most are due to the fact that KC slides are not scored by default:
    • The mention (KC) next to the type of question
      The lack of the possibility to choose between Graded and Survey (because KC slides are not scored)
      No partial scoring for MCQ slides with multiple correct answers 
      No points
      No penalty

    • in the Advanced Interaction panel you don't see a specific indicator. The score of the KC slides is set to 0,  they are not set to be reported but... contrary to what the Help tells, the KC slides have an individual Interaction ID. This is probably not used. Look at this screenshot:

    There is no way to convert a KC slide into a question slide, nor a question slide into a KC slide!

    Default setup KC slide

    The default settings for a KC slide are bit different from those for a question slide:

    1. For a KC slide only the Incomplete feedback message is activated, not the Correct message as for Quiz slides
    2. For both KC and Question slide only the Submit button is checked off. The Back, Skip and Clear buttons can be activated, but they are not by default.
    3. Attempts are set to Infinite, with the Retry Message enabled. For question slides by default Attempts is set to 1. Because the attempts are set to infinite, you don't have a Failure message enabled for KC slides. You can decrease the attempts and in that case you can provide up to 3 Failure message, same as for Question slides.

    You read in the Help that KC slides will not be visited during Review, they are not in the Quiz scope, except of course if they are nested in between normal quiz slides. Contrary to Pretest slides, the KC slides will not prevent navigation by playbar or TOC.

    It is not possible to use question pools (see Help), random questions but it is also not possible to use GIFT format to import KC slides. 

    Some options in the Quiz Preferences do work for KC-slides: if you check the option to Hide Playbar in Quiz, this will be valid both for question slides and KC slides. Unchecking the option 'Allow Backwards Movement' will only prevent backwards movement on question slides, not on KC slides. However, KC slides do not get a Progress indicator! IIf you want a progress indicator (question X of Y) you can have a look at this older blog post..

    When you leave a KC slide, it is reset immediately which is not the case for question slides which are frozen until a new attempt on Quiz level is started. In that way a KC slide behaves like a Drag&Drop slide that is not set to be reported, had no score. There is no possibility to freeze the answer on a KC slide, which may be a game stopper sometimes.

    As the Help mentioned, design of the KC slides depends on the same master slides as the normal question slides, with the exception of the new Review buttons which will never appear on KC slides. For navigation on KC slides you can use the Back/Skip buttons or add custom shape buttons.


    System variables 

    Contrary to the Pretest slides, there are no specific system variables available for Knowledge Check slides. I have been looking for quizzing system variables that do get a value from a KC slide. Here is an overview of the variables that are not used by KC slides:

    • cpInQuizScope and cpInReviewMode, both Booleans will not be toggled from the default 'false' to 'true' when you enter a KC slide. If the KC slide is in between normal question slides, it can be 'true' but that is not due to the KC slides.
    • Variables linked with scoring are not used: cpInfoPercentage, cpQuizInfoLastSlidePointScored, cpQuizInfoNegativePointsOnCurrentQuestionSlide, cpQuizInfoPassFail, cpQuizInfoPointsPerQuestionSlide, cpQuizInfoPointsscored, cpQuizInfoPartialScoringOn, cpQuizInfoTotalProjectPoints, cpQuizInfoTotalQuizPoints 
    • cpQuizInfoAttempts: gives the attempts on Quiz level, as specified in 'Quiz Preferences, Pass or Fail'. Those attempts have no sense for KC slides, since the user can come back as many times as he wants to retake the KC question which is always reset when leaving the slide.
    • cpQuizInfoPassPercent and cpQuizInfoPassPoints: since KC slides have no score, those settings of the Quiz Preferences have no meaning for KC slides.
    • cpQuizInfoTotalQuestionsPerProject: contrary to the Pretest questions which are counted in this variable, as are the normal Question slides, the KC slides are not included in this variable. Same for the variables cpQuizInfoTotalCorrectAnswers, and cpQuizInfoTotalUnansweredQuestions

    As you see not many variables are used by KC slides, but some are used! Moreover they can be very useful if you want to do more with KC slides:

    • cpQuizInfoAnswerChoice: one of my favorites as you could read in this old blog postIt can be used to tweak the work flow with KC slides as you'll read more later on. One exception: it is not populated when you use Advanced Answer option.
    • cpQuizInfoMaxAttemptsOnCurrentQuestion: can be useful as well, although having a similar system variable to cpQuizInfoAttempts for current attempt on question level would be even better. You need a user variable as a counter for attempts on question level. If you keep the default setting of Infinite attempts, this variable will have the value 32767 (no idea why?).
    • cpQuizInfoQuestionSlideTiming and cpQuizInfoQuestionSlideType are available for KC slides as well.

    Tweaking tips

    Here are some tips, which I tried out with success but will not explain in detail.

    1. If you do not want to keep the Attempts set at Infinite, but to a limited number it would be possible to count the number of correctly answered KC slides. Create a user variable v_counter with a default value of 0. Use the Success action of the KC slides to increment that counter. Later on you can show the obtained value for v_counter, and even use that value in a conditional action to offer feedback or navigate the user back to content slides.

    2. There is no Review possibility for KC slides as mentioned. If you offer limited attempts on question level, you could show a custom feedback message on the KC slide for the questions answered correctly, something like 'You have answered this question correctly'. When simulating a 'Review' situation, the user will be invited to answer only the KC questions that do not show that message. Be careful: all embedded question slide objects are always on top of the stack, you don't want the feedback to be hidden by those objects. That can be done by having a shape before the KC slide, timed for the rest of the project and always on top. This tweaking work flow was described in this article: Buttons on Question/Score slides?

    3. The use case described in this thread of the Captivate forums could be solved using the same system variable cpQuizInfoAnswerChoice in conditional actions, combined with a counter to track the number of attemptsl. You cannot leave a normal question slide to a content slide for remediation unless you follow the strict rules for remediation. If you want to limit the attempts to get a correct answer, remediation rules are broken. With a KC slide, the answers are reset every time, which allows a lot more freedom. However: if you need a real score for the slide, you'll have to use the workaround I described in this blog post: Report Custom Questions - part 2









      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/1079250 2016-08-23T15:35:52Z 2016-08-23T15:35:53Z More is in a... hyperlink - Dropdown Menu

      Intro 

      In my last blog post I demonstrated how a hyperlink can overcome the limitation of states in Captivate, not allowing to add interactive objects to states.
      In older versions of Captivate the widget 'Go to Slide' was available: a dropdown menu with slide names, useful to jump to those slides. That widget has disappeared, is not replaced by a Learning interaction (compatible with HTML5). 
      Although this widget can be reproduced, using the Dropdown interaction, that solution has several drawbacks. The formatting of the interaction is limited (maximum font size is 14pt), and you would need a variable and a conditional advanced action with as many decisions as you have slides in the dropdown list.
      A much easier solution can be found in this article, using hyperlink events. For a consistent behavior of the dropdown effect,  I also used Micronavigation

      Hyperlink commands

      The list with commands, opening the dropdown list in the Hyperlink dialog box is much shorter than the list with simple actions under the Actions tab. 
      Of course the Web page is the first command, since that is what you expect to happen with a hyperlink. 
      These commands are not available for a hyperlink event:
      • Continue: since the hyperlink event has no way to prevent 'Continue Playing Project' as is the case for simple actions, this is not that important
      • Return to Quiz: is meant for remediation, normally to be triggered by a Next button
      • Play Audio/Stop Triggered Audio: can always be done using an advanced action
      • Execute Shared Action: which is really a pity :(
      • Pause: can always be done using an advanced action
      • Exit: can always be done using an advanced action
      • Toggle: can always be done using an advanced action
      • Show/Hide TOC: can always be done using an advanced action
      • Show/Hide Playbar: can always be done using an advanced action
      • Lock/Unlock TOC: can always be done using an advanced action
      • State commands: Go to Next State/Go to Previous State cannot be done by advanced action, Go to State is possible.

      For hyperlink events some commands have been put together in one dialog box, which is the case for the Slide command:


      Example

      Watch the movie: after the title slide the dropdown menu 'Go To' appears. When you click on that shape button, another shape wlll drop down. It has 6 hyperlinks, I left them underlined to emphasize their type.

      When clicking on a hyperlink you'll be navigated to another slide which has a Back button to return to the Menu slide. The content slides are about the same subject as the previous blog post about popups and Close button. Of course it would be possible to have multiple slides in each 'chapter', and have only selected slides in the dropdown list.


      Setup, variables and actions

      Objects on Dropdown menu slide

      The objects on the slide with the Dropdown menu are visible in this screenshot of its Timeline:

      User variable v_start

      The shape button SB_Menu (Caption 'Go To') is on top of the originally hidden Smart Shape SS_DropDown, and pauses at 2,6 secs, after all effects have been accomplishedTo mimick the behavior of a dropdown the Effect 'Stretch From Top' is applied to that shape. The effect starts at time 0 and has a duration of 1 sec. The arrow shape ArrowGoTo has some explanation and the effect EaseInFromLeft is applied. The second arrow ArrowDropDown has a similar effect, starting bit later, but that shape is not visible until the button SB_Menu is clicked.

      One user variable was created: v_start. It will be used to store the frame number of the first frame of the slide with the dropdown menu. I learned from experience that effects are much more consistent when you use micronavigation instead of applying the effect by an advanced action. The content of the variable will be used to send the playhead back to the first frame of the slide, to have the time-based effect being played.

      Events and Actions

      1. On Enter (Dropdown menu slide): standard advanced action EnterDropDown

      The back button on the content slides send the user to this DropDown slide, and the On Enter event of the slide is used to reset everything as it appeared first time: hiding the shape SS_DropDown, the arrow shape ArrowDropdown, and showing ArrowGoTo. Moreover the number of the first frame of this slide is stored in the variable v_start. This is the script:

      2. Success event of the shape button SB_Menu: standard advanced action DropAct

      This action will hide the arrow shape ArrowGoTo, show the shape SS_DropDown and its arrow ArrowDropdown and return the playhead to the first frame of the slide with the system variable cpGotoFrameAndResume which has 'Continue' built in. That way the effects for the dropdown menu and the arrow with explanation will appear as they are timed from the start of the slide.


      3. Hyperlink events

      Contrary to the situation explained in the previous blog post where the hyperlink event was used as Close button, in this case it doesn't matter that the playhead is always released when executing a command by a hyperlink because of the navigation to another slide. The command Slide was used, which opens the dialog box slide. Here the LInk is set to point to the correct content slide. In this screenshot you see the hyperlink setting for the navigation with the item 'Decor':

      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/1082735 2016-08-21T14:11:14Z 2016-08-22T18:43:37Z More is in a...hyperlink - Close button

      Intro

      A while ago I published a list with events able to trigger an action, whether it is a simple, advanced or shared action. Most commonly used events are the slide events, Success/Failure events for interactive objects, Question slide and Quiz events, D&D events. Both the hybrid rollover slidelet events (now deprecated because it is not supported for HTML output) and the Hyperlinks are 'outsiders' but can be very useful as I want to point out with this article (Closing popup or lightbox) and the next article (creating a dropdown list with Jump to actions, equivalent of the former 'Goto Slide' widget). 

      Example movie

      Watch this two-slide example.

      1. The title slide has a text hyperlink 'Next' to proceed to the next slide.

      2. The second slide has six shape buttons, each opening a popup (it could have been a lightbox as well, work flow is identical). In the popup information you'll find  the text 'Close X' which is a hyperlink  to close the popup.


      States and Hyperlink

      It is not possible to add interactive objects to a custom state: button, click box, shape button, Text Entry Box, all are greyed out. However it is possible to have a hyperlink within a text container, that will be active for all states of that container. This can be a welcome workaround. It is however not possible to have different actions for the hyperlinks in different states. Since the goal here was to close the popup, I created a shape as text container with 7 states as you can see in this screenshot:

      The 'Normal', or default state looks invisible: there is no text in the text container with the exception of the text hyperlink 'Close X'. This was achieved by giving the text hyperlink the color of the background, the text container a Fill with Alpha=0% and no stroke. The other states have a Fill (Alpha=100%), they have information text with a visible color (also for the Text Hyperlink) and an image.

      Actions

      1. Next Hyperlink - Title Slide

      The commands for Hyperlinks look a little bit different than the dropdown list in the Actions tab. For hyperlinks commands 'Go to Next Slide', 'Go to Previous Slide' and 'Jump to Slide' are in one dialog box:

      2. Shape buttons to open popup - Second slide 'ActionProcess'

      Look at the timeline of the second slide: all shape buttons (name starts with SB_) pause the slide at the same time, 15,5 secs. When triggering an action, the playhead should not be released, to allow clicking as many times as wanted, in any sequence on those shape buttons. The number of attempts is left at Infinite.

      The only command to be triggered is to change the state from the default 'Normal' state to one of the custom states. The choice is yours: 

      • you can use a simple action (be sure to uncheck the option 'Continue Playing the Project'
      • you can use a one-line advanced action, create duplicates for each button; playhead will not be released
      • you can use a one-line shared action with two parameters (text container and state).

      3. "Close X" hyperlink - in text container second slide

      Beware: there is NO option to prevent 'Continue Playing the Project' when you assign a command to a hyperlink. That means that you cannot use a simple action, but have to use a standard advanced in this case.It is again the action 'Change state...to Normal.' 

      Another difference for hyperlink events: the command Excecute Shared Action is missing. That is too bad, because if it had been available, one shared action would have been able to achieve both showing popup (with the 6 shape buttons) and close the popup (with the Hyperlink).

      Conclusion

      Hyperlink makes it possible to have an action in a state for an object, although it has to be the same action for each state of the object. You learned about the differences between hyperlink events and other events to trigger an action:

      • There is no way to prevent the playhead from being released if you trigger a simple action; use a standard advanced action.
      • You cannot trigger a shared action with a hyperlink.
      • Some commands have a different look: example is the Slide command (see screenhot in this article).





      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/1068954 2016-07-01T19:33:16Z 2016-08-22T18:50:43Z Navigation Help Slides

      Intro

      In this thread on the Captivate forums, a user asked how to configure navigation in a course with content slides and two help slides. The Help slides should be accessible from each content slide using a button. There is navigation possible between the two Help slides, and the user should be able to return to the content slide from where he started, from each of the Help slides.

      Although there is a system variable cpInfoLastVisitedSlide, this cannot be used for this use case, because the user can navigate between the two Help slides. I explained shortly a possible work flow with a user variable and a couple of standard actions in the thread. Since the user told that he is a newbie concerning variables and advanced actions, I promised to write out a more detailed tutorial. This is certainly not a complicated use case! If you are an 'expert' in advanced actions, this is not a post to your taste.

      Example project

      This project has a Title slide, 3 Content slides and ends with two Help Slides.

      Instructions are in the movie, try out the buttons.  You don't have a Back button on the content slides, but you can always refresh the browser to restart playing. Click on the Title slide to start playing:

      Interactive objects/events

      • Slide 1 (Title) which uses the master slide 'Title', has a click box covering up the slide. It has the default action
         'Go to Next Slide'. 

      • Master slide 'Content' has the Help button (with the question mark): it is a shape button (no states at this moment in CP9) which triggers a standard advanced action 'ToHelp'. This master slide is used for the content slides.

      • Slide 2 (Content1): has a shape button for Next which pauses the slide at 2.5secs. This shape button is timed for the rest of the project, so that it will show up in all following content slides. A shape button on the master slide is excluded because this Next button has to be hidden on the last content slide. You cannot show/hide an object on the master slide, because it has no ID, no name. This Next button has been labeled 'SB_Next'. For this small example, it can look easier to have a Next button on each slide where it is needed, but if you have a lot of content slides, this approach will save on time and file size.

      • Slides 2,3 (content slides): to be sure that the Next button is visible, even when coming back from the Help slides, the On Enter event of these slides is used for the simple action 'Show SB_Next'. 

      • Slide 4 (last content slide): the Next button has to disappear, which is done with an On Enter action 'Hide SB_Next'.

      • Master slide 'Help': this slide has no interactive object, is used by the Help slides

      • Slide 5 (Help slide 1): has another instance of the Help button (SB_Next_Help) with the action  'Go to Next Slide'.
        This slide has a special shape button 'SB_Back1' to allow going back to the content slide. This button triggers a standard action 'BackToSlide'. This shape button has a bubble added in the Rollover state, which functions as Tooltip.
        The On Enter action for this slide is used to hide the button 'SB_Next' (from slide 2), same way as on the last content slide. Why? That button will already been hidden if the user comes from the last content slide, but not when he is getting here from one of the previous content slides.
      • Slide 6 (Help slide 2): has no need for a Next button, but needs a pausing Back button (to navigate back to the first Help slide) with the action 'Go to Previous Slide'. It has another instance of that special button ''SB_Back2'. I didn't opt to time that button for the rest of the project, because there are only two Help slides and having to hide/show them would have been more work than using two instances.


      Variables and advanced actions

      Variables

      Two system variables are used in this example:

      1. cpInfoCurrentSlide: gives the slide number of the current slide. The index starts with 1, which means that for slide 1 this variable is 1.

      2. cpCmndGotoSlide: will be used to navigate the user back to the content slide. Beware: for this variable the index starts with 0. That means that slide 1 has to be indicated as 0, slide 2 as 1.

      One user variable has to be created: v_last.  This variable will be used to store the value of cpInfoCurrentSlide when the user leaves the content slide to go to the Help slides. You do not have to define a default value for that user variable.

      Standard actions

      ToHelp triggered by the shape button on the master slide 'Content'

      In the first statement, the slide number of the current slide is stored in the user variable v_last. Then the user is navigated to the first Help slide (slide 5), and I added Continue which is not always necessary, depends on the set up of the slides.

      BackToSlide triggered by the buttons SB_Back1 and SB_Back2 on the Help slides

      For the first statement an Expression was needed, because of the different index for the system variables cpInfoCurrentSlide and cpCmndGotoSlide. Example: if the user came to the Help slides from the third content slide, the variables would be:

      • cpInfoCurrentSlide = 4   because the third content slide is slide 4
      • v_last = 4   because the action ToHelp stored the value of the previous system variable in this user variable
      • cpCmndGotoSlide = 3  because this is the indicator for slide 4, since the index starts with 0; for that reason I needed to subtract 1 from the value stored in v_last

      Overview

      In the Advanced interaction you'll find a great overview of all the actions, events of the slides. Too bad: you'll not see the shape button on the master slide, nor its action.



      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/1050912 2016-05-16T17:09:12Z 2016-05-16T17:09:12Z What's in a Theme - a Template?

      Intro

      When trying to help Captivate users, I often bump onto confusion between themes and templates. Same confusion can be found in many training schedules and books. There has been a lot of evolution in Captivate since versions, slowly but steadily. Those are not the big hype features that were emphasized everywhere. You know that I often appreciate more the hidden gems, which help any developer to save time and frustration. This article will explain how I am creating custom Themes, and also why I am using Templates a lot less than in earlier versions of Captivate (before version 6). 

      Theme versus Template

      The goal of a Captivate theme is to keep a consistent design throughout your project. It can be 'applied' to any project, even after creation. Although most themes will be created for a certain resolution, when designed carefully it is not necessary to apply it only to projects with the same resolution. When you apply a well designed theme to a project, the 'look' will change immediately and you'll not have to edit the design a lot afterwards. A theme is saved in a file with extension cptm. You can have themes for a normal (blank)  or for a responsive theme. Captivate 8 and 9 both have several themes in the box, most of them being responsive themes. They show up as thumbnails when you click on the Big Button 'Themes'. Those Captivate themes are stored in the Public Documents, under the subfolder 'Layouts' of the 'eLearning Assets', at the same level as the Theme Colors palettes.

      You can store your custom themes in this folder or wherever you want. The Thumbnails view (under Themes button) has a Browse button which allows you to navigate to any folder. I will mostly save a custom theme in the project folder when working for a client. But you see in the screenshot that I have a custom theme (CP8Theme) in the default folder. That folder is a copy of the original Layouts folder in the Gallery under the Captivate installation folder. If you ever have messed up one of the themes in the Public documents, you can restore it from that original folder. If you delete the whole Layouts folder in the Public documents, while Captivate is closed, on restarting the application a new copy of the original folder will be installed in the Public documents (see also my article: Keep your Customisation).

      To save a theme you need to use the Themes menu, not the big button 'Themes'. Use the option 'Save Theme as' if you started from an existing Captivate theme.

      template in Captivate has to be chosen before you create a project. You have to use the option File, New Project, Project from Template. This means that a template needs to have exact the same resolution as you want for your project. As for a theme, there is a difference between a template for a responsive, and one for a normal (blank) project. A template file has the extension cptl. When you create a project from a template, it will get the normal extension cptx. You can edit a template, and that will the only reason why you would save it again as a cptl. It is also possible to create a template from a normal cptx-file with the option 'File, Save As'. There is no 'reserved' folder for templates, Captivate has no included 'templates'. The term is often wrongly used: most Captivate 'templates' that you can find on the web, are just cptx-projects, not templates in the Captivate language. 

      When a template is saved, the used theme, preferences etc are saved with the template. However you can always apply another theme later on. 

      Components of a Theme

      It is rather important to know what exactly will be saved in a custom theme. . Remember: if you ever want to use that theme in a responsive project, be sure to create the theme in such a project. I will list up the components in the logical sequence to be followed when editing or creating a custom theme :

      1. Theme colors palette

      The start point for design consistency in a project is guaranteed by the consequent use of a Theme, which starts with the creation of a palette with 10 colors that will be used for object styles, master slides, skin, and within learning interactions. I have written some articles about the creation of a Theme colors palette:  Colorful 2015  and   Theme Colors. Beware: it is no longer possible to save an ASE file with Adobe Color (as described in the first article): that means that the Swatch Manager is not very useful anymore. My recommendation is to ignore the Swatch Manager and focus on the Theme Colors Palette, which is available in any Color Dialog box.
      When saving a theme (using the Themes menu), the used theme colors palette will be saved with the same name. In the mentioned articles you'll find a way to save a theme colors palette independently from a theme as well.

      2. Object Styles - Object Style Manager

      Most design-oriented applications have a work flow for creation and use of styles (Word, InDesign, Framemaker). All experts and good trainers will tell you to use styles, and to avoid overridden styles. Captivate is no exception in that world: it has a great Object Style Manager to be found under the Edit menu (or by using the the shortcut key SHIFT-F7). Object styles can be saved individually, have the extension cps, only useful in case you want to export/import such an individual style. In most use cases you'll save all the object styles necessary for a project in a custom theme, no need to export/import styles anymore as was the case before themes appeared in Captivate.

      If you are working on a responsive theme: first define the breakpoint views you want in the theme, before launching the Object Style Manager. In the styles you will be able to define the look for the breakpoints that are available in the project.
      Make some decisions about which objects you'll be using in the theme as well. Just an example: if you prefer using shapes instead of captions for feedback messages, capture messages etc you do not need to change all the caption styles. A similar situation exists for normal buttons vs shape buttons. 

      Some tips:

      • Use only colors from the palette defined in Step 1.
      • Do not hesitate to change one of the (grayed out) styles between brackets [Default...]. You can overwrite those styles, since you are working on a custom theme. Those are the styles that will be applied immediately when you insert an object. Another approach is to clone a style and set it as Default style. The problem is that you'll end up with tons of custom styles, which makes selecting the proper style in dropdown lists not easier. That is why I always change existing default styles. 
      • For buttons: the InBuilt states Rollover and Down are available together with Normal  for change in the OSM, do not forget to check/edit those states. This is valid for Text Buttons, Image Buttons and Transparent buttons.
      • For shapes: you cannot define a default style for text and another default style for buttons (too bad), but any shape style that you define should include InBuilt states (Normal, Rollover, Down) because any shape can be converted to a button.
      • Quizzing objects are in a separate category. Quiz buttons cannot be replaced by shape buttons (yet), but you can define an individual object style for each quiz button. Feedback captions can be replaced by shapes.
        Feedback captions and shapes not always use theme colors in the default Themes included with Captivate. Be careful: if you want to have consistent colors in your project, you'll need to check those styles.
      • It is not possible to define real Effects in an Object style. Only the 'old' Transitions can be defined.

      3. Master slides

      The Object styles defined in step 2 - at least the default styles - will immediately be applied to the objects on the Master slides.  If it doesn't look well, you can edit the object style and redefine it, while working on the objects in the Master slides (It can be done with the Properties panel). Be sure to make all added objects responsive (check all the breakpoint views) on the master slides. 
      Each theme needs at least 6 master slides (Blank Master slide, 4 Quiz master slides and a Score master slides), besides the main master slide, but you can create as many master slides as you want. You can add different type of placeholders on master slides, but be careful with the 5 master slides for Quiz: the embedded objects (without individual timeline) have a lot of functionality built in!

      Some tips

      • Use the new Rulers to assist you for designing master slides: Guides Rule!
      • If you ever will use the theme for software simulations: keep a real Blank master slide, because it is used both for software simulations and for PPT import. You don't want those slides covered up with other stuff.
      • Remember that shape buttons can be used on master slides, they can have actions. This can be a big time saver for custom buttons like the ones from these posts: Toggle buttons   and Replay slide button
      • Do not forget to label the master slides

      4. Skin

      Use the theme colors palette to customize the skin: playbar, borders and Table of Contents. You can even insert a logo on the TOC and eventually custom expand/collapse icons.

      5. Recording defaults

      This is only necessary for themes (also) to be used for software simulations. Although you have set up Default object styles in step 2, you still have to indicate which styles have to be used when capturing simulations. Just one example:
      • Create a default style for the highlight box in step 2: with a big bright red stroke and outer fill. Set it to display as default highlight box style.
      • Open Preferences, Recording, Defaults and check the default Highlight box style: it will still be set at the original default style in the original theme. Bit annoying, but it also allows you to save two different sets of object styles within a theme: one for normal slides, and one for software capture slides.

      Do not forget to save the theme (using the Themes menu)!


      Do you need a Template?

      I ask this question often everywhere: with all the design power and flexibility of a custom theme, why would you still need a template? Before themes existed, I used templates to be able to reuse variables and advanced actions (see: Template for reusing script). With the present version of Captivate, we have shared actions which I store in a separate project to be used as external library in any project. Variables, used in those shared actions, get copied automatically when the shared action is dragged into the Library of the new project.  When you copy an object, that triggers an advanced action, the action will be copied along when pasted into another project. 

      I used templates to have footnotes on each slide, pointing to the name of the project, showing the slide number and the total amont of slides. But now you can put them on master slides, using system variables or user variables that can be populated later on. 

      When would I use a template in Captivate 9? For courses that have several modules, where you want to have some slides in common, maybe have custom navigation/control buttons that cannot be put on the master slide, but need to be timed for the rest of the project. I would rarely use it to have placeholder slides, unless some team members need to have that assistance. Lot of placeholders have fixed object size, which can just be annoying. If you do have a lot of advanced actions (maybe variables), that cannot be replaced by shared actions, identical entries in Project Info, variables not included in shared actions: those would be situations where I would think about creating a template.


      Conclusion

      I hope this post did clarify the difference between a theme and a template. If you ever see somewhere my question 'Do you need a template', this will no longer be a mystery, right? 





      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/1036660 2016-04-26T20:06:36Z 2016-04-27T17:00:17Z Guides Rule!

      Intro

      Did you hear me yelling 'Finally' when the last patch for Captivate was released to version 9.0.1.320? We have now Rulers in Captivate and real (Adobe) guides. I am using that name because they are quite different from the existing Smart Guides which are useful when aligning objects. Moreover the implementation of the Rulers and Guides is really very nice,  Kudos to the Captivate engineers!  Just one example: in responsive projects you can choose to have rulers in Percentages instead of pixels, which is the most logical choice! In this article I want to explain you the reasons for my joy, showing you how I use Rulers and Guides.

      Grid

      Maybe you don't remember that old grid, which is still present in Captivate 9. It consisted of tiny points, with a default distance of 16 px. You cannot change color of those points (black), which makes that grid useless on dark backgrounds. You can change the default distance between points from 16px to another value, but always the same horizontally and vertically. Personally I remember that distance mostly because it will define how much an object will move or resize when you use CTRL in combination with arrows as shortcut keys (see my old blog post: Shortcut keys for moving/resizing objects). Since many years I didn't use the feature for what it was meant to be used: as a 'grid'. If you just now discover its exitence: turn on the 'old' grid, using View, Show Grid.There is a snapping linked to it as well, which you can turn on/off.

      A grid can be very useful in some circumstances!  With the new Guides you have now a powerful alternative: create a custom grid, with lines instead of points, maybe with different distances in horizontal/vertical direction, and use a custom color that stands out from the background. It can be especially useful for responsive projects because percentages instead of pixels  I recommend to lock the guides after creation of the grid. Your grid will be saved with the file, you can show/hide the grid whenever you want.

      Here is an example of such a grid, created with the option Multiple Rulers in a blank, normal project:

      You can see that the guides were used to have identical symmetrical arrows to the left/right side, to define a space to be left for CC later on, and a top margin. The settings in Multiple Rulers can be seen in this screenshot:

      For a responsive project, I would mostly limit the grid to vertical guides, because it is the width that is most important for the design of such a project. Here is a screenshot for a responsive project, with guides in increments of 10%, extra guides at the left and right side at 45% (margins). Only one horizontal guide at 50%. I dragged out an extra guide to 10% for the title.

      Theme/Template design

      A grid, as described in the previous section, will help a lot when designing master slides - third step in designing a custom theme (after the color palette and the object styles). Of course you can add extra guides, as I showed already in that same section: to indicate margins, to show the center lines etc, space to keep free for custom navigation, control panel, CC etc.
      Sometimes you'll need a template on top of a custom theme (which provides all necessary design features) because you need a fixed resolution and custom content: recurrent information, variables, advanced actions, assets in the Library, placeholder slides. For such a template rulers and guides can help as well to create a consistent look for all the future modules that will be based on that particular template.

      Motion Paths

      If you ever created custom motion paths, which has become much more interesting in Captivate 9 where we have three types of custom motion paths, you know how difficult it is to adjust start and end points to a specific location. I remember the example that I created for this blog post:

      Reset Effects

      All the cards followed a custom motion paths but had to end up in a stack. My work flow was bit cumbersome:

      • create a "cross hair" using a horizontal and a vertical line object in a group
      • position that group on the exact location, using the X coordinate of the vertical line and the Y coordinate of the horizontal line
      • adding a motion path (no curved, I used the zigzag motion path) to each card, and drag the end point carefully over the crosshair
      • saving that motion path as a custom path
      • applying it in the necessary advanced action

      Now I can use a horizontal and a vertical guide, which I can exactly position without using the Options tab with coordinates. Just double-click on the ruler on the exact coordinate that you want.

      Watch this screenshot: the thee shapes move each along their individual motion path, but they end at the same location (and paths cross at another location). 

      Custom shapes

      SVG are a big new feature, but they don't have (yet) the flexibility of shapes which can be used as text container, as button and filled with a texture, and image, a gradient all on the fly. Although Captivate is not meant to have all the editing features of a vector graphics application like Illustrator, you can create pretty nice custom shapes. Any included shape can be converted to a freeform shape, you just have to edit the points and tangent points. 

      How can guides help with this process? Have a look at this screenshot. The creation of this symmetrical shield (or highway sign) was lot easier with the help of the rulers when editing the points and tangent points.:




      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/962013 2016-01-04T11:14:10Z 2017-02-02T21:07:15Z Drag&Drop in 2016 with Captivate 9

      Intro

      As promised in a previous article, I explored the enhancements to Drag&Drop in Captivate 9, more specifically added InBuilt States. In previous versions only buttons and shape buttons had those states. Captivate 9 added multistates to all objects and provided InBuilt states for all objects in a Drag&Drop slide: drag sources and drop targets. Custom states can be added as well. Both InBuilt states and custom states have some limitations similar to the Inbuilt states for buttons. Drag&Drop objects have also limitations for added custom states.

      Example Movie

      Watch this movie, I left the default play bar active to allow you free navigation. You'll find two Drag&Drop slides with different use cases on slides 4 and 5:
      1. The first use case has only two drag sources, one of them being correct, the other incorrect. There is one drop target, the cup. Watch the different InBuilt states both for the two drag sources which have identical states and for the drop target. All states are introduced on slides 2-3. All objects have also one custom state. Because of my manipulation of the states on Submit, the default Reset button will not return you to a fresh start if you have used the Submit button. You'll have to use the custom 'My Reset' button in that case. 

      2. In the second use case you'll see 7 drag sources and 2 target objects: the box and the trashcan. You are supposed to drag all sources to the appropriate target. You'll find the 'My Reset' button here as well.

      Drag Sources: states

      The Drag Sources have 5 InBuilt States (see slide 2 in movie). Common to all those states and to the custom states is that you cannot add any object in a state. All the options on the Big Button Bar (horizontal toolbar) are dimmed with the exception of the Record button (for audio): no Text objects, no Shapes, no Higlight boxes (under Objects), no Media can be added to any state. Here is a short description of each state, of its functionality and limitations. As a visual reminder have a look at the Gallery, which shows those states for the first use case
      1. Normal state (InBuilt): is the Default state. This state will appear before dragging, and will re-appear if a drag source is sent back to its original position as well (for an incorrect object). The size of this state is important, because several states are locked to the same size. You can rotate the Normal state (watch the rotate handle at the top), which will also lock some of the states to the same rotation.
      2. Dragover state (InBuilt): this state appears when the drag source is over a drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
      3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state and become permanent. It is totally locked (watch the lock symbol bottom right): will keep the same size as the Normal state, cannot be rotated. Be careful: if you allow all drag sources, both correct and incorrect, to be dropped on the target, the DropAccept state will also appear for correct and incorrect objects! If you only allow the correct drag sources to be dropped, this state will only appear for them.
      4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. When the incorrect object is sent back to its original position, the DropReject state is replaced by the Normal state. Like the DropAccept state this state is totally locked: no resizing, no rotation possible
      5. DragStart state (InBuilt): this state appears when you start the dragging movement until you are over a drop target, where it will be replaced by the DragOver state. The state is not locked, it can be resized and rotated.
      6. Custom state: this state is also fully locked to the rotation and size of the Normal state. As written before, you cannot even add objects in this state (which is possible for buttons). That is a limitation, in many cases you'll want to revert to the old method of hide/show objects. For this example it seems as if I added the image of the wings, but I'm just cheating: for all states I used smart shapes. That way I was able to change the form of the shape (Replace shape), to change its fill and stroke. For the InBuilt states I used gradients or solid colors as Fill, for this custom state I used Image Fill. Since a shape can also be used as Text container, it was possible to change the labels of the states as well. If you are not yet member of the Smartshape fan-club, maybe... :)


      Drop Targets: states

      The Drop Targets have 6 InBuilt States (see slide 3 in movie). Three of those states have a name that is identical to an existing state for the drag sources: DragOver, DropAccept and DropReject. For Drop Targets you can add objects to all states, both InBuilt and custom states. Some states appear immediately, other states only appear after Submitting the exercise. Here is the overview, again with a visual reminder from the first use case in the example movie.

      1. Normal state (InBuilt): is the Default state. This state will be the main state before the Submit button is clicked. It can be replaced by another state but that will only be for a short duration. The size of this state is important, because several states are locked to the same size. You can rotate the Normal state, which will also lock some of the states to the same rotation.
      2. Dragover state (InBuilt): this state appears when a drag source is over the drop target and will remain so until the object is dropped on or moved away from the target. This state is not locked, it can be resized and rotated.
      3. DropAccept state (InBuilt): will appear after dropping a drag source on the drop target, it will replace the Dragover state. However this state will remain visible only for a short duration. Then the Normal state will re-appear. The reason is that a drop target can accept multiple drag sources, and has to be ready to 'accept' or 'reject' the next drag source.  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
      4. DropReject state (InBuilt):  will appear after dropping an incorrect drag source on the drop target if the target is not set to allow All objects to be dropped. It will replace the Dragover state. The state will appear for a short duration before reverting to the Normal state. State is  It is totally locked: will keep the same size as the Normal state, cannot be rotated. But, as told, you can add objects, which was the case in the example movie (adding the wings).
      5. DropCorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
      6. DropIncorrect state (InBuilt): this state will appear after Submit if the drag source(s) dropped on the target are not all correct. It will replace the Normal state permanently. The state is fully locked (to the Normal state): no rotation nor resizing is allowed. You can add objects.
      7. Custom state: this state is also fully locked to the rotation and size of the Normal state which is limiting even though you can add objects.  

      Reset - My Reset

      The default Reset button has been added to both use cases (slide 4-5). This button can only be used to reset before submitting the result. I added an extra button 'My Reset', which is really the Replay2 button described in a previous blog post. If a D&D slide is not included in a quiz, has not score it will be reset when you re-enter the slide. This is what I'm doing, getting back to the last frame of the previous slide, then continue. That may result in some flickering, depending on the bandwidth, but the D&D will be totally reset. The mentioned blog post explains the need for a user variable v_enter to store the first frame number of each slide with an On Enter action. 

      Setup Use Case 1

      Have a look at the Timeline of this slide:
      There is only one correct answer: DragSource1 to Target1. There is an object action for this correct answer, to change the state of the other drag source to the Custom state, as you can see here:
      Setup is almost the default set up: Snap behavior will change the size and the opacity of the dropped object to 70% (size) and 80% (Opacity), and snaps to the center (Anchor). There is one attempt allowed, and the actions on Success and Failure are visible here:

      The advanced action DDSuccess4 has three statements:

      Due to hiding the drag sources with this Success event, the On Enter action of the slide has to 'reset' the situation by showing the group Gr_Draggers again. This was combined with the assignment of the user variable v_enter for this slide in the action:


      Setup Use Case 2

      Have a look at the Timeline of this slide:
      Effects are time-based, starting after the pausing point of the Drag&Drop (1.5secs which is default). Back and Next buttons have no pausing point in this slide. When the playhead is released by the Success event, it has to continue seamlessly to the end slide 6.

      For the correct answer all Christmas balls have to be dropped either in the box (2, 0, 1 and 6) or in the trashcan (3, 4 and 5). There are no object actions in this use case. 

      For setup of both drop targets size and opacity of the drag sources will change to 0% to have them disappear in the target. You can see that the actions on Success and Failure are very simple:
      Even the on Enter action of this slide can be a real 'simple' action to have the correct frame number assigned to the user variable v_enter:





      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/942186 2015-12-02T19:34:49Z 2017-01-24T19:17:52Z Replay (slide) Button

      Intro

      This pretty short article will explain several ways to create a button that will replay a slide from its first frame and is functional on that slide only. The reason is that I have been asked about this use case multiple times. 

      Questions

      First thing to check is: does this slide have an On Enter action? The default On Enter action for a slide is 'No action'. On Enter actions are however the way to go if you want to reset a slide to its initial configuration, to clean up the 'mess' that can happen on that slide by the user or by the interactivity on that slide. On example: maybe the user has popped up objects  using a hyperlink on a word or iimage? In that case you'll need an On Enter event. The action needed for a Replay button will have to make sure to 're'- enter the slide, in order to have that On Enter action done. To better understand what I mean, I created a short example movie.

      Example movie

      Watch this movie, which I have been testing both for SWF (version here) and for HTML5 output. You'll see two slides:

      1. Slide 'Title': it has an On Enter action to play an audio clip.

      2. Slide 'Pills': a user variable v_counter is used (and displayed) to store the number of clicks on the 'pills'. The timeline of this slide looks like this

        Each of the pills (shape buttons) triggers a shared action, that will show a state (with explanation), increment v_counter, wait for 2 seconds before releasing the playhead.

      On both slides you'll see two buttons: 'Replay1' will restart the slide from its first frame, without re-entering the slide. That means that the On Enter action is not executed again. The second button 'Replay2' will re-enter the slide. Listen and watch the difference (look at the counter on the second slide). Refresh the browser when you are ready to watch this example. Refreshing will also get you back to the start of the movie.

      'Replay1' - On Enter action is not repeated

      If you do not need a resetting action On Enter, a replay button can be coded very simple. If you are on the slide with the label 'Intro', this simple code will do the trick:

          Jump to slide Intro

      However you'll not find the slide 'Intro' in the dropdown list for the 'Jump to' command in the Actions tab. You need to choose 'Execute Advanced Action', and create a one-line standard advanced action.

      It is simple but I do not recommend to use this work flow. It means creating a new advanced action for each slide. A first alternative would be a shared action, defining the slide name (or number) as a parameter.

      If you need this action for many, even all slides in a project, there is a much better work flow. Create this advanced action:
        
      Why do you need an expression to subtract 1 from the number of the current slide, which is stored in cpInfoCurrentSlide? The index of the system variable cpInfoCurrentSlide starts by 1 That way it can be inserted on a slide indicate the slide number. Its value for slide 3 is '3'. To show the slide number you insert cpInfoCurrentSlide in a text container on the master slide or timed for the rest of the project.

      The index of system variable cpCmndGotoSlide starts not by 1, but by 0 (usual in programming languares). If you want to navigate to slide 3, you have to give a value '2' to cpCmndGotoSlide.  So far the reason for that Expression in the advanced action Replay1.

      This command is functional both for SWF and HTML5 output. I tested this in several browsers.

      This action is triggered by both Replay1 buttons in the Example movie. The On Enter action is not executed with this Replay, which results in:
      1. For slide 'Title': the audio clip will not be heard.
      2. For slide 'Pills': the variable v_counter is not reset to 0, and will continue to increment.
      Watch the variables I inserted top left of the slides: they show the current frame, and the frame number stored in the user variable v_enter.  If you wonder why the frame number never starts with 1, read the explanation under the next subject 'Replay2'.

      TIP

      be sure to create this action as a shared action, no need to define the system variables as parameters. Store that action with much used shared actions in a separate project. In any project you can open the Library of that project as an external Library and drag that Replay action to the library of the new project.

      Replay2 - On Enter action is repeated


      As explained under 'Questions', you'll have to enter the slide in this case, not just jump to the first frame as was done with the Expression in the scenario for 'Replay1'.

      This is a bit more complicated. I had to use 'micro-navigation', a term introduced by me in this old  blog post: navigating between frames. Look at the advanced action created for the 'Replay 2' buttons:
      This is the work flow:
      • Create a user variable v_enter that will be reused on each slide that needs a Replay button of this kind. That variable will store the number of the first frame of the slide. To achieve that I have to add a command to the already existing On Enter actions. Here are the actions for both slides:

      • When the Replay button is clicked, there is first navigation to 2 frames before the first frame of the present slide. Why 2? Theoretically 1 frame should be OK, but for HTML5 output (slower) I learned that it is better to use
      • Although I use the system variable cpCmndGotoFrameAndResume for navigation, which should release the playhead and navigate very quickly to the next slide, I detected that adding the second command 'Go to Next Slide' made the process more fluent (again for HTML5 output). 
      The result is very clear in the Example movie:
      1. For slide 'Title': the audio clip is played
      1. For slide 'Pills': the variable v_counter is reset to 0.

      Frame enigma - TIP

      If you watched the frame number closely, you will have seen that the 'first' frame (on slide 'Title') is not 1 but 3 or 4. Here is the explanation: since I wanted the Replay2 button to be active on this first slide, I needed a slide before that first slide for the micro-navigation. That slide will not be visible to the user because it is only 0,1 sec long. At a frame rate of 30fps, that means ...3 frames.



      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/920099 2015-10-23T16:18:16Z 2016-04-21T08:39:19Z 1 action = 5 Toggle Buttons

      Intro

      In the past I wrote some posts about creating Toggle buttons. The oldest article explained the use of an Expression and a system variable for a button that kept the same style but could turn on/off a functionality (created for versions 5/5.5). My excitement about shape buttons, appearing in version 6, was the inspiration for several scenarios in which the style of the toggle button changed with the on/off situation. 

      When shared actions appeared with Captivate 7, I posted some articles about the difference with advanced actions. Captivate 8 enhanced shared actions by allowing variables and literals as candidate parameters. Although Captivate 9 seems not to add any improvements to shared actions (had hoped secretly for an easier way to edit them), combining shared actions with the new multistate objects will save a lot of time. The use case described here is a good example. Start by watching the example movie to understand my interpretation of Toggle buttons.

      Example movie

      This movie has 4 slides, the third slide shows the toggle buttons. Try them out, there are two instances of the shape button that toggles the visibility of an image or a group. They use a different user variable. Beware: images do overlap on the slide. The other shape buttons are muting/playing audio, showing/hiding Closed Captioning, Table of Content and Playbar. I choose shape buttons over normal buttons because they offer more freedom for styling the InBuilt states. To navigate to the last slide you have to 'toggle' on either the playbar or the TOC for navigation.

      Concept 

      All toggle buttons have in common to be associated with a variable that can be toggled by the developer: I'm talking about Boolean variables, which can have only two logical values '0' (False/No) or '1' (True/Yes). Both system and user variables are possible. On this screenshot you see the Timeline with the 6 shape buttons, labeled to identify their functionality (SB is my indication for Shape Buttons):

      Variables

      The associated variables are in the same sequence as on the timeline, from top to bottom:

      • v_visgrp (user variable with Default value = 0) for SB_visib_group

      • v_visib (user variable with Default value = 0) for SB_visib

      • cpCmndShowPlaybar (system variable with Default value = 1) for SB_Playbar

      • cpCmndTOCVisible (system variable with Default value = 0) for SB_TOC

      • cpCmndCC (system variable with Default value = 0) for SB_CC

      • cpCmndMute (system variable with Default value = 0) for SB_Audio

      This list shows that one of the system variables doesn't have '0' as default value, cpCmndShowPlaybar. Solution for this discrepancy can be found in switching the states for the associate button, or in switching the variable itself to '0', thus hiding the Playbar. I used the second scenario: with the On Enter action for the third slide I did Hide the Playbar, which toggles cpCmndShowPlaybar to 0

      The shared action can be used for any button with such a, associated Boolean variable, system or user variable. Some examples are shown in the last slide of the example movie: cpLockTOC or a user variable to toggle an audio object.

      States

      The shape buttons have three InBuilt states: Normal, Rollover and Down. For each button I added one custom state. That state will change the shape button to show the 'OFF' state, and if necessary additional objects are added in this state. In this screenshot you see the 4 states for the shape button SB_Audio:

      This shape button has a SVG added in each state. At this moment SVG cannot be used as a Fill image for a shape button (maybe in a next version?), they are separate objects. For some states I also changed the style of the shape itself (Fill):

      1. Normal: has a SVG indicating you can mute  audio (since cpCmndMute has a default value of 0, which means that audio is playing)
      2. Rollover: Speaker only (SVG), Fill different
      3. Down: Speaker only (SVG), Fill different
      4. AudioOn: has a SVG indication to play audio; this will be the state that is visible when audio is muted, cpCmndMute = 1.

      The buttons SB_TOC, SB_CC and SB_Playbar have a similar setup: for the InBuilt states text was inserted in the shape. The custom fourth state adds two line objects (cross) over a duplicate of the Normal state. Look at the screenshot for the SB_Playbar:

      Both instances of the Visibility toggle button use SVG's to change the style of the shape button (similar to SB_Audio), but they add other objects for the 4th custom state as you can see here:

      Shared Action

      The action has to be conditional, checking the value of the Boolean variable. Only two commands are needed, both in Then and Else part: to change the state of the shape button itself and to toggle the variable. Toggling the variable between 0 and 1 will switch the functionality between On and Off. If you write this out as an advanced action, in this case for the Audio button, it would look like this:
      When creating a shared action, it is important to identify the parameters. Compulsory parameters in this action are:
      1. the button itself (SB_Audio in the screenshot above)
      2. the state 'Normal' which is used and
      3. the state 'AudioOn' which is used as well

      Candidate parameters are:

      1. The variable cpCmndMute: it has to be a parameter, because we need other Boolean variables for the other buttons
      2. Literal '1': because I choose the 4 th state (custom) for each button with this action in mind, it is not necessary to define this literal as a parameter

      This leads to the definition of the shared action with 4 parameters, the compulsory and one candidate parameter. In this last screenshot you see the parameters with their values for another button, SB_Playbar. Watch the description of the parameters.

      Conclusion

      In many situations using a Captivate playbar is not a good choice, and with states, one single shared action from your script library it is now really simple to create not only Next and Back buttons, but also every other toggle button needed on the course slides. If using shape buttons (as was the case here) you can put them on the first slide of the course, time them for the rest of the project. They will have each a unique ID, which allows you to take control of those shape buttons, to hide them when they are not needed on some slides. Good luck!








      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/899004 2015-08-30T10:50:19Z 2016-11-21T11:32:01Z Playing with Captivate 9

      Intro

      Version 9 has been released about 10 days ago, while I was on vacation. My fans know that I seldom will post immediately a 'full' review, because I want first to play around a little bit, to try out some reported new features before offering my personal reflections and tips. You will not read anything about the new Quiz features, nor about the enhancements to Responsive projects today, maybe later on in another article. There is too much to write about!

      First project

      No better way to get the feeling of new features than to create a real project from scratch. In the following movie (only one slide) you'll see that I recreated a slide that was posted in the first article about shared actions. I didn't upgrade the project, didn't use the objects, nor the actions/variables from the old project. If you watch it closely, you'll detect that I used:

      • new states work flow, both for static and interactive objects
      • imported SVG's and roundtripping with Adobe Illustrator
      • Effects 2.0 with custom curved motion paths
      • new commands in Advanced/Shared actions

      I will offer some tips about those 4 major new features when you have played with this slide. Refreshing the browser will allow you to restart the movie. Of course I discovered also some little gems hidden between the big diamonds, while exploring. 

      Example movie

      Multiple States

      In Captivate 8 it was possible to create 3 states for shape buttons, both in the Object Style Manager or individually using the Properties panel, Style tab. In this example you did see that the 'default button states' (Normal, Rollover, Down) can even have a different label, not only a fill and a stroke applied to them. Look at this screenshot of the Object State panel for the central oval shape button in the movie. Watch the default states (marked by red rectangle) and the extra 4 states I added to end up with 7 different states. 

      For the four extra states I used SHIFT-CTRL-ALT-Z to Duplicate State a couple of times. You'll find the option also in the right-click menu on a state.

      Drag&Drop objects also have InBuilt states, but will blog about Drag&Drop in a future post.

      Hidden gem

      In the Object Style Manager (I saved the style for that central shape button) the different default states for shape buttons show up, just like for any normal button. They were also saved in the OSM for Captivate 8, but not displayed in this 'cool' way :)

      SVG - Illustrator roundtripping

      I call this the (until now) missing link in the beautiful bracelet of Adobe applications that allow you to create amazing eLearning courses: Captivate, Photoshop, Audition, Edge Animate, Edge Inspect and now finally Illustrator!! Scalable Vector Graphics, contrary to bitmap images, do not suffer from quality loss on re-scaling. Moreover for simple graphics the file size is incredibly low, which is certainly an advantage when you are creating for mobile devices. Beware: file size can be large if you have complicated graphics. Look at this screenshot: I used 8 SVG's - they end up in a dedicated folder in the Library:

      You see the usage in the Library as for other assets. Example: the SVG ManGreen has been used 4 times, in the 4 states of the central shape button.
      The man-SVG's are very small, but the lightboxes with text are using a complicated filter and size is much bigger. The settings used in Illustrator to save these files as SVG are visible in the next screenshot. To preserve the font, you have to convert it to outlines.

      Effects 2.0

      The previous Effects panel is gone! Effects timelines are now embedded under the object to which they apply. Live preview with the Play button in the Timeline (or use Space bar), you can have all motion paths on different objects visible at the same time. That makes life so much easier. Curved motion paths are possible. When you hover over an effect in the Effects part of the Timeline panel, you'll see a preview of that effect. This works even with custom saved effects:


      Hidden gems

      1. You can use the same shortcut keys for effect timelines as for the object timelines to increase/decrease its length. That is a valid alternative for typing in a value in the Timing panel or for dragging with the mouse. Example: right arrow key will move the whole effect timeline 0.1sec to the right, CTRL-Right will move over 1sec, SHIFT-Right will increase the timeline duration with 0.1sec. All arrow combinations shortcut keys described in this old article: TinyTimeline Tidbits are functional. I regret that CTRL-E, which extends the duration till the end of the slide has not been included for Effect Timelines. Neither does CTRL-L move the effect timeline to the playhead position, it will move the object timeline with the Effect timeline even if the Effect timeline is the selected one.

      2. For the custom motion effects (scribble, curved, line) start with the cursor over the present location of the object, and the beginning of the path will snap to the center point of that object (more precise: the center point of the bounding box).

      3. You can uncheck 'Show motion paths' if your screen is getting too crowded, look in the Timing panel just above the fields for Effect Start and Effect Duration. BTW you can increment the values in those fields using arrow keys: UP for 0,1sec, SHIFT-UP increments to the next full second. Field has to be selected in that case. If field is not selected you can use the typical Adobe scrubber.

      New Commands

      These commands have been added:

      1. Go to Next State: only available in the list for simple actions, for all events

      2. Go to Previous State: only available for simple actions, for all events

      3. Change State: available for simple, advanced and shared actions. This command needs two paramaters: the object and the state; for a shared action both will be compulsory parameters. I used this command a lot in the example movie, both in a conditional advanced action (on the central shape button) as in a shared action triggered by the four bubble shape buttons.


      4. Delay Next Actions by: finally you will be able to time commands in the sequence for standard/conditional advanced and shared actions. This new command takes one parameter: the amount of time which can be a literal or a variable. In the next screenshot you see that I used it to play the audio clip after the custom effect (with a duration of 1.2secs) has been finished. That parameter is a 'candidate' parameter, not compulsory, when you use it in a Shared action. For more information about parameters see the article Parameters in shared actions. The situation is the same in Captivate 9 as it was in Captivate 8.
        Personally I am very excited about the this new command, which allows better control over timing by advanced/shared actions. 

      Hidden gem

      Also about timing, not a new command but an improvement of the command Apply Effects in an advanced/shared action: you can now add values for the Start time and the duration of the effect.

      More Small Gems

      1. Drag&Drop until Captivate 8 didn't have a Success Caption by default. I explained a workaround in Drag&Drop Tips. You can forget about that tip in Captivate 9, Success caption is now available. It uses the default Success Shape or Success Caption style, depending on your Preferences and theme.

        Objects used in Drag&Drop similar to interactive objects, have also 'Inbuilt states'. That is not a little gem, will post a new Drag&Drop Tips article for version 9 in the future


      2. Intelligent naming of copy/duplicate. In former versions, a copy or duplicate of an object in the same file or in another file would get a generic name. In Captivate 9 if you copy/duplicate an object with a meaningful name the copy will keep that name with an added underscore+number. Big improvement, and now you have even more reasons to set up a good naming convention for your projects. Look at this screenshot: this is a copy of the central shape button to another file:


      3. Simple action feature: another popular post (and a Youtube video) can be dropped in the trash can for Captivate 9 but I don't regret it at all. You no longer have to create a standard oneline advanced/shared action (or use micro navigation) to prevent the playhead from continuing. Just check the box that is highlighted in this screenshot:




      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/884478 2015-07-22T19:06:07Z 2016-02-24T19:03:33Z Dynamic Buttons

      Guidance

      If you’re planning on attending the Adobe Learning Summit, DevLearn, or both this fall, read on….   (If you can’t make it this year, there’s a consolation! Skip to the bottom of this post to get a tip about dynamic buttons.)

      Most of you know that I frequently blog and post about Adobe Captivate. Well, Adobe has given me the wonderful opportunity to offer free in person peer-to-peer Captivate project help at the MGM Grand Las Vegas on September 29th and 30th. Since I’m flying from my home in Belgium to present at the Adobe Learning Summit, this is a great chance to meet and help you face to face, not virtually.

      My friend and fellow Captivate user, Alice Acker, will host this event. To see as many Captivate users as possible, we’ve limited each appointment to a maximum of 30 minutes.  If you are part of a project team, we can accommodate your team at the appointment. These times are designed to limit disruption of your Adobe Learning Summit or DevLearn schedule. We’re co-located with the conferences at the MGM Grand, so there is no need to Uber or bike to us. We’ve made this super convenient for you.

      Please bring me your most headache-inducing project, and I’ll do my best to solve your quandaries.  Since these spots are limited, make sure to sign up now with your top 3 appointment choices. The slots will be filled on a first come, first served basis. We’ll do our best to schedule you for one of them. If you just want to drop in to say hi, I’d love to see you. But, please make sure that you register so we get an idea of how many Captivate users to expect.

      Once you’re successfully registered, you’ll get an email confirmation of your appointment, directions to the session, and a link to upload the project. It will really help if I can review it before the session. All information will be kept confidential. What happens in Las Vegas, stays in Las Vegas.

      Looking forward to meeting you. Tot weldra in Vegas!

      Lieve a.k.a. Lilybiri

      This is the link to the registration form Form to complete


      Dynamic buttons

      In the archive you'll find several articles about shape buttons, which appeared with version 6. I used to call them 'chameleon', because they can be useful as shapes (images), text containers, buttons, and recently also for the automatic feedback text appearing on question slides and with interactive objects. Maybe you are not yet aware of this aspect of shape button? You can insert a variable as a label on the button. On runtime the value of the variable will appear. That value can be changed by actions, and the label will change in that case, hence my title 'Dynamic'. Some ideas to use this feature?

      • Localisation: if you use custom shape buttons on master slides (or timed for the rest of the project) to replace the play bar, you can change the label on those buttons based on the language choice. If the language is chosen from a dropdown list (learning interaction) or with radio buttons (learning interaction), insert the variable associated with that interaction. Combine this with the work flow explained in Branch Aware Quiz

      • Custom Question Slide: if you want to allow a limited number of attempts, you can add the attempt number on the Submit button, or you can change the label to 'Continue' after the last attempt. Of course you'll need a companion conditional action to change the functionality of the button as well.

      • Navigation: if you use shape buttons on the master slide, they cannot be hidden/shown. But you can change the value of the variable that acts as label on each slide. Using a Back/Next button, put a null value to the label on the first slide for the Back button, and change the Next button to an Exit or Return button on the last slide (you'll need to create a conditional action in that case as well).


      Windows 10

      Just a short warning: do not hurry with upgrading to Win10.  Be patient, Captivate 8 is not guaranteed to be fully functional in this new OS. Personally I will wait to see eventual issues on forums and in groups.
      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/866339 2015-06-07T10:35:37Z 2015-07-04T04:55:48Z Matchstick Game - shared actions

      Intro

      This post is inspired by a question on the Captivate forum, have a look at this thread: 'Advanced actions for a Matchstick Game'. After reading the question, I accepted the challenge. Some advanced actions are used, mostly to reset the game, but the two 
      most important actions are shared actions. It is also a good example for a lot of tips I have offered in this blog:
      • Setup of a labeling system that makes it easier to choose parameters when applying a shared action.
      • Sequence of statements and decisions in a conditional action is very important because Captivate will always evaluate each statement and decision in sequence.
      • Choice of optional parameters for a shared action.
      • Using On Enter Slide events to reset variables and objects.
      • Using groups to simplify advanced/shared actions.

      Game - rules

      You can play the game:
      • goal is to create a word from the initial set of matchsticks by removing some of them;
      • clicking on a matchstick will remove it and a ghost image will appear instead of the original matchstick
      • you can reset the matchstick by clicking on the ghost image
      • maximum number to be removed is 6; you will be warned when you reach that number
      • you can try to remove a seventh matchstick, but I consider that as cheating :)
      • you have a Restart button

      Objects - Labeling

      The game is on one slide after the intro-slide. This is the Timeline panel:

      From bottom to top you see:

      1. Gr_Match: group with the images of the matchsticks. For labeling I divided them in 3 groups. I_MS_11 is the most left matchstick of the first group, I_MS_22 is the upper matchstick of the second group, I_MS_35 is the bottom one in the third group, etc. Those numbers will also be in the names of the Outlines, the Click boxes and the associated variables. This group is initially visible.

      2. Gr_Outline: group with the grey ghost images (outlines). Same labeling discipline: I_OL_11, I_OL_22, I_OL_35,...This group is initially invisible

      3. Gr_Txt: which is expanded on the screenshot has the three messages that are used in the game. This group is initially invisible.

      4. Gr_CB: group with click boxes over the matchstick images+outlines. They follow same labeling system: CB_11, CB_22, CB_35...

      5. Bt_Restart:  the button to restart, reset everything

      6. Tx_Task: the title

      7. Tx_Rules: the explanation

      Variables

      To track the status of each matchstick, I created a boolean variable with initial value of 0 for each of them. Labeling is similar to those for the images, outlines and click boxes: 

      • v_11, v_12, v_13, v_14, v_15   for the first group

      • v_21, v_22, v_23, v_24, v_25   for the second group

      • v_31, v_32, v_33, v_34, v_35   for the first group

      Three extra variables were needed:

      • v_moves: will track the number of removed matchsticks

      • v_correct: will track the number of correctly removed matchsticks

      • v_visit: needed to track if the intro slide is visited for the first time; a jump to that slide is used in an advanced action to reset the game

      Actions

      Advanced actions

      I will not explain the simple and the 2 advanced actions, article would be too long. In a planned cookbook for shared actions I will explain everything in depth:
      • EnterIntro: conditional advanced action with two decisions that is triggered by the On Enter Slide event for the first slide 'Intro'. It will check the value of the variable v_visit and jump to the second 'Game' slide if it is not a first visit. 

      • ResetGame: a standard advanced action is triggered by the Restart button Success event, and by the On Enter Slide event for the second slide 'Game'. It will reset all the variables and restore the initial view of this slide (no outlines, only images).

      • Simple action 'Go to Previous Slide' is triggered by the On Exit event of the second slide 'Game'.

      Shared Actions

      Two shared actions are used:
      1. MatchStickNOK: to be triggered by a click box over a matchstick that should NOT be removed. This shared action is used  9 times. It is a conditional action with 3 decisions: 'Doing', 'Checking' and 'Cheating'. In the screenshot you'll see this action, with as an example parameters are set to the '11' matchstick. That is a matchstick that should in this case trigger the second shared action.
        This shared action has 6 parameters. The only optional parameter is highlighted in this screenshot, it is the tracking variable v_x associated with the matchstick. No need to define the other variables (v_moves, v_correct) nor the literals as a parameter.



      2. MatchStickOK: to be triggered by a click box over a matchstick that should be removed. This shared action is used 6 times in this particular example. The first three decisions 'Doing', 'Checking', 'Cheating' are pretty much the same as for the previous shared action, with one exception: increment or decrement for the variable v_correct. This shared action has a fourth decision 'End' that will display a Success message if all correct matchsticks are removed. Since this can only happen when the user removes a correct matchstick, this decision was superfluous for MatchStickNOK action. The sequence of decisions is very important: the condition 'IF v_moves is equal to 6' (decision 'Checking') will also be True if 6 correct matchsticks have been removed, but the commands in 'End' will override those of 'Checking' because of the sequence. There are two screenshots here:

        This shared actions has 7 parameters since the Success Message has to be added. Only optional parameter that was upgraded to a real parameter is again v_x, the tracking variable associated with the matchstick.


      Enhancements

      I hear you! How will it be possible to use those shared actions for a Matchstick Game with another setup? I have some ideas, what about you? Please post your suggestions in a comment.





      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/855692 2015-05-13T20:35:52Z 2016-10-06T15:19:15Z Dropdown Interaction - tips

      Intro

      Recently I published some tips about learning interactions, including an explanatory table. The use case in that post showed how to use checkbox and radiobutton interactions. Last week, a user asked a question about the dropdown interaction, which he used for a custom question slide: How can I check if the user has chosen an item? That is not difficult for checkbox and radiobutton, because their associated variable will be empty, but the situation is different for the dropdown interaction, hence this tutorial.
      The most common failure that I detect on debugging advanced/shared actions with multiple decisions are due to a wrong understanding of the validation of those actions:
      • all decisions will be checked from left to right
      • there is no way of jumping out of the action when a correct condition is met.
      In the use case from the example movie, that sequence behavior is very important!

      Dropdown interaction

      The properties dialog box is pretty limited:

      In this example you see that:
      • entries are separated by commas
      • formatting allows to choose a font, font style and attribute (faux style), but font size is limited to 14pt maximum
      • the color dialog box doesn't show theme colors
      • the update button allows to see a preview of the look after formatting
      • if you want to validate the choice in the list, you need an associated variable (here v_drop); beware: you have to create the variable in the Variables dialog box
      • the first sentence mentions 'combobox' but as I understand the word combobox this is not correct: in a combobox you can not only choose from a list but you can type in a word (there was an older combobox widget), this learning interaction doesn't allow that.
      Maybe you are bit puzzled by the first entry 'Choose a language'? Contrary to the radiobutton/checkbox interactions, the variable associated with a dropdown is never empty! By default it has a value equal to the first item in the list. In the example movie, you will see before choosing, and after resetting that v_drop is equal to 'Choose a language'.

      Resetting: it is indeed possible since this latest version of Captivate not only to change the value of a variable by an action, but also to have this change reflected in the Display of the interaction. This new feature is used for the Clear button in the example movie.

      Beware: for some reason, the first time you use the interaction you will have to click twice, first click to put focus on the interaction, second click to select item. Strange :)

      Example Movie

      This movie has only 4 slides. After the 'Intro'-slide you can choose a language on slide 'Drop'. Watch the variable v_drop that is visible in a text caption next to the learning interaction. You get 3 attempts to guess the correct language, reason for the variable v_attempts. The 'Drop' slide has two interactive objects: Submit and Clear. Try out Clear to see how the interaction is reset to its initial state. You can click Submit without choosing a language, you can choose a wrong language or the correct one. The third slide you'll only see when your answer is correct. If you exhaust the three attempts without correct result, you will end up at the 4th slide 'Retry', where you are able to get back to the 'Drop' slide and start guessing again.

      Variables

      Here is a screenshot of the user variables

      As explained before v_attempts tracks the number of attempts and starts with value=3, v_drop is the associated variable for the dropdown interaction.

      I used v_dummy, a variable containing the text  'Choose a language' out of laziness, to avoid having to type that text over and over again. Be careful: it has to be exactly the text in the first item, it is not possible to use a variable in the item list.

      The variable v_groet is used on the third slide, to customize the text based on the current time of the user (cpInfoCurrentHour). The variable v_wrong is a Boolean (value=0) that will be set to 1 when the attempts are exhausted without finding the correct language.

      Events and Actions

      EnterDrop, triggered On Enter for slide Drop

      This standard action resets everything on the second slide 'Drop': the group Gr_Feedback with empty, wrong and correct feedback messages (empty, wrong, correct) is hidden, group Gr_Bt with the two interactive objects made visible, variables v_drop and v_wrong are reset to the default values.

      ResetAct, triggered by the Success event of the Clear interactive object

      A standard action that restores v_drop to its default value and hides the group Gr_Feedback.

      CheckSubmit, triggered by the Success event of the Clear interactive object

      This conditional action has 5 decisions, one for each possible situation:
      1. EmptyDone if the user clicked on Submit without making a choice and it was the last attempt
      2. Empty if the user clicked on Submit without making a choice and there are still attempts left
      3. Correct
      4. WrongDone if the user choose a wrong language and it was the last attempt
      5. Wrong if the user choose a wrong language and there are still attempts left

      The Sequence is important: if you put Empty before EmptyDone, it goes awry if it is the second attempt, because Empty would have decremented v_attempts and that means that EmptyDone would result also in a True condition, and user will lose an attempt. Same for WrongDone and Wrong, they cannot be switched. 

      ExitDrop, triggered by On Exit event of slide Drop

      Exceptionally I use the On Exit event, because in this case it will function perfectly. 
      A simple conditional action, based on the value of v_wrong.

      More...

      There is a simple Jump to slide 'Drop' on the last slide. Resetting will happen with EnterDrop action.

      The third slide has an On Enter action, to show the right caption based on the system variable cpInfoCurrentHour. 
      Do you accept the challenge to figure out that (conditional) action? No need to use my tongue :)

      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/840622 2015-04-14T16:01:24Z 2016-09-07T19:22:47Z Force first view - Captivate 8

      Intro

      As a former college professor I don't like to push students/trainees to watch everything in an eLearning course. After all, you can watch without really seeing as well, that doesn't prove anything about the real 'learning' process. Apparently not everyone agrees with my personal opinion and again a question popped up on the Captivate forums in this thread: Force navigation upon FIRST view....

      Problem

      The course was totally linear, which is a requirement for the simple work flow I will propose here. To force the student the first time to have the slide played totally before being able to continue is simple: use a custom Next button, timed at the end of each slide, do not use a playbar but a TOC for navigation to previous slides. And set up the TOC settings to allow navigation only to already visited slides.
      To improve the user experience, when he is coming back to an already visited slide, the Next button should appear from the start of the slide. That way he can skip part of the slide if wanted. The easiest way to solve that problem is by using an extra, replacement Next button. Because timing from start till end of a slide is the same for all slides, this can be a shape button put on the first slide that is timed for the rest of the project, always on top. It is not possible to use a shape button on the main master slide because such a button has no ID, which means it cannot be controlled, shown/hidden which is necessary for our use case.
      The initial buttons can also be shape buttons and for a seamless user experience I'd recommend to use the same look for both the initial and the replacement Next button. However those initial buttons need to be individual buttons on each slides because not all slides will have the same duration, especially when they have VO attached as slide audio.

      Example movie

      Watch this movie to check the solution. To make the switch between the initial Next buttons and the replacement Next button clear I used a different style. Moreover I inserted a text container with two variables: the system variable cpInfoCurrentFrame and a user variable v_frames (see later) that are used to solve the problem. To navigate back to already visited slides, open the TOC with the red curved arrow top left. The TOC close button has a similar look. Refresh the browser to start the movie again. I didn't check AutoPlay, you'll have to click on the (ugly) arrow in the middle of the slide.


      Events and Variables

      I created one user variable: v_frames. The system variable cpInfoCurrentFrame will be used as well.
      This variable will be used to store the current frame number when the user clicks on an initial Next button. Example: on the first slide the initialNext button Bt_One will appear at 5 secs and pause at 5.5 secs. When you click that button, you'll see that on the second slide the variable has the value '166' which is about the frame number of 5.5 secs at a speed of 30FPS. It is never totally exact (should be 5.5*30 which is 165, but index starts at 0, the exact number should be 164). But for the purpose it will be used, this is OK.

      The used events are:
      1. Success event for the initial Next buttons: rBt_One, Bt_Two, Bt_Three, Bt_Four. I don't need a Next button on the last, fifth slide. Those button will trigger the same advanced action NextAction:
      2. On Enter event of slides 1-4 will trigger a shared action Show_Next:
      3. Success event for the replacement Next Shape button SB_Next executes a simple action: "Go to Next Slide"
      4. On Enter event of slide 5 (last slide) will trigger a simple action: "Hide SB_Next"

      Advanced/Shared Actions

      Advanced Action "NextAction"

      This action, triggered by the initial next buttons on each slide except the last slide, has only two statements:
      The frame number of the pausing point (which is where the action is executed by design) will be stored in the user variable v_frames. Then the Go to Next Slide command is done. 
      Why did I prefer to use an advanced action over my favorite shared action? I don't need to change this action when applying to another button. You could create a shared action if you expect this action to be used in other projects because it is easier to transfer them using the library. In that case the shared action will not need any parameters. When you transfer it to another project, the user variable v_frames will be created automatically. That is certainly an advantage!

      Shared Action "Show_Next"

      This is the action that does the trick! It is a conditional action: 
      When a user enters a slide for the first time, the frame number of the first slide frame will be greater than the frame number stored in the user variable v_frames. That user variable has in that case the frame number of the Next button pausing point that was on the previous slide. But if the user comes back to this slide, v_frames will store a frame number of a similar Next button pausing point on a later slide. In that case the condition in this shared action will be correct, v_frames will be greater than the cpInfoCurrentFrame. The appropriate button is shown or hidden. It is necessary, for an unknown reason (was not the case in CP6, when I blogged about toggle buttons), you also have to enable/disable as well. This is probably due to the buttons being in exactly the same location, but it was not necessary in a previous version. 
      I defined only two parameters in this shared action:
      It is not necessary to define the user variable v_frames as a parameter because it is always reused. It is a pity that objects have always to be a parameter, because in this particular case it would have saved some time to be able to deselect SB_Next (the replacement Next button, timed for the rest of the project) as a parameter. Maybe in a future version? Some will prefer advanced actions and duplicates to be edited for each button but remember: multiple instances of a shared action do not increase the file size, whereas multiple duplicates of an advanced action do increase file size. And I like the presence of the shared actions in the Library, and easy way to use them in other projects.

      Conclusion

      I love to solve this kind of problems, trying to find an easy solution that can be reused over and over again. If you ever are stuck with such a problem, please contact me. I am available as a freelance consultant, and having taught for many years in college, be sure to get some training on top.






      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/836267 2015-04-06T17:41:11Z 2017-02-01T20:11:23Z Tips - Learning Interactions

      Intro

      Captivate 8 has included several learning interactions, that are not well documented in the official Help. You'll be able to download a descriptive table at the end of this article. In the past I have been blogging quite a few times about using Widgets. And there was a similar article 'Using Captivate Widgets? Some tips'. Learning interactions is the name used by Adobe to indicate widgets that are compatible with SWF and HTML5 output, whereas the former Widgets were meant for SWF output. Some of the widgets are still available, others have been replaced by a learning interaction. Widgets can be found in the Gallery\Widgets under the installation folder of Captivate. Learning interactions can be found also in the Gallery, but you'll use them from a duplicate folder in Public Documents, which is easier to access if you don't have full administrative rights. 

      In this article I'll offer some general tips. You will see an example movie, using the Radiobutton and Checkbox interactions but I will not explain in depth the advanced actions used for that example. 

      Inserting Learning Interactions

      There are two possible work flows:

      1. In the Big Button Bar, use the button Interactions, last option. A dialog box with thumbnails of all interactions will be opened. You'll see a badge 'New' or 'Updated' sometimes, when a new version has been pushed to your system.
      2. From the Insert menu, choose Widget and if necessary browse to the appropriate folder. I'm on Win7, you see the folder in top of the screenshot:

      The second work flow is also valid for Widgets, and can be used also if you have problems with the Thumbnails dialog box not showing up. I also prefer it because scrolling through a list with names is more efficient than with the other dialog box. Which work flow you prefer, you'll see the the dialog box to edit the properties and parameters for the interaction popping up. In this screenshot you see the dialog box for a simple radiobutton interaction with 2 options (True/False). I unchecked Highlight because that puts a rectangle behind the words 'True' and 'False'. This is one of the interactions that has an associated variable, labeled v_one in this case.


      Associated Variables

      As you'll see in the table, several interactions have one or more associated variables. In combination with advanced/shared actions this gives you lot of possibilities for using the interactions. You can have a look at the example movie, using both the radiobutton and checkbox interaction. 
      As I warned already in the article Tips about widgets, mentioned above, those variables are not created automatically because you type their name in the Properties dialog box, you have to create them in the Variables dialog box as well. The type of the variable is mentioned in the reference table that you can download from the link at the end of this article. 

      Example Movie

      After the title slide you'll see a slide with 3 Radiobutton interactions to create T/F questions. The Next button triggers a rather complicated conditional advanced action that covers all possible situations:
      • if the user clicks without answering any question
      • if all questions are answered with False (they are mutually exclusive)
      • if more than one answer is True

      If you want to test all possibilities you'll have to refresh the browser several times.

      I'm using the new possibility to control the display of the radiobuttons, they can now be cleared by controlling the variable.

      On the third slide I use the Checkbox interaction, and if you choose the first option (Captivate 8.0.1) on the radiobutton slide, the first option will already be checked for you, another application of controlling the display, in this case using the same user variable for the first T/F radiobutton and the first option of the Checkbox interaction. The advanced action triggered by the Next button will navigate you to another slide, either slide 4 or 5 as you'll find out.

      I added a text container with the four user variables v_one...v_four to show how they are changed in the movie.

      Resizing - Refresh Widget

      When using the interactions Radiobutton, Checkbox, Dropdown and Scrolling Text you'll often need to resize the interaction on the stage to make everything visible. The placeholder on the stage then can look very distorted, discover the Resize Widget button in the Properties that will appear after each resizing to have the placeholder adapt to the new size:


      Customizing - Theme colors

      All learning interactions can be customized, at least concerning the colors used. New in Captivate 8 is the possibility to have the Theme Colors palette applied to the interactions. I mentioned this already in the article about: Theme Colors. In the table I indicate which interactions do have that new feature. It is not the case for the Checkbox, nor the Radiobutton interaction. You can see the option in this screenshot of a Glossary interaction:


      Improvements for Responsive Projects

      Some interactions recently got an update to improve the user's experience when used in Responsive projects. You'll also find indication about that in the table. Whenever you see the option 'Scale Text for Responsive Projects'. On the screenshot of the Glossary interaction that option is visible.

      Static versus Interactive interactions

      In the former Widgets panel, which disappeared in the new UI of Captivate, you could see that widgets existed in three types: Static, Interactive and Question. Interactions have only two types: Static and Interactive. The difference is the same as for the standard objects: an interactive object (shape button, click box, button, Text Entry Box) has events that can trigger an (advanced/shared) a action and can have a score that can be added to the Quiz total. Non-interactive or static objects do not have those two features.

      Most learning interactions are Static. Only the Games (with exception of the old Word Search interaction) are Interactive. Beware: although the score for some Games is stored in the associated user variable, you cannot add that score to the Quiz total. The points attributed to a Game in the Reporting section, are granted to the user in the same way as most questions in Captivate (with exception of the MCQ): black-white. If the game has been played, the user will be awarded the points, whatever the score of the game was.

      Table - categories

      You can download the table here. The categories are my personal choice:

      1. Interactions without variables
        1. Objects: several small interactions
        2. Display: interactions like accordion, tabs... that allow you to show a lot of info on one slide
      2. Interactions with variables: most of my favourites are here like the checkbox, dropdown, radiobutton and scrolling text
      3. Games (with or without variables)

      Drag&Drop is to me also an interactive interaction, but because of its importance and different work flow it is not in this table.

      Waiting for your comments :)




      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/813680 2015-02-20T12:24:11Z 2016-03-01T18:53:58Z Branch Aware Quiz

      Intro

      A recent question on the forum (Duplicate Quizzing) and my plan to write an e-book dedicated to Captivate Quizzes is the reason for this post. Forum user wanted small quizzes in different languages in the same Captivate file. If the trainee chooses for a language, He should be scored only for that language. I explained that 'Branch aware', feature added to Captivate with version 6, was the way to go. Help documentation however is pretty concise: exactly 91 words.  I wanted to explore this feature more in depth, and see how to create the best experience in each language, which is not that intuitive as you'll discover. It is more the localisation of Quiz/Score slides that is cumbersome.

      Example movie

      Play this movie to see the result. After the title slide, you'll have to choose one out of three languages, or all the questions. There are three questions (same) in each language, totalling 9 questions. The score slide is not totally localized as you'll see. Each question has one attempt on question level. I provided two attempts on quiz level. You'll be able to Retake the quiz once, and to Review. Backwards navigation is not possible. Branch aware setting automatically disables navigation (no playbar). Watch the progress indicator, which I edited to 'X/Y'. Refresh your browser window if you want to replay the movie. 

      On the question slides a text caption with 4 system quizzing variables is inserted:
      1. cpQuizInfoPointsscored: score obtained by user until now
      2. cpQuizInfoTotalQuizPoints: maximum score if all questions have been taken; this can be found in the Advanced Interaction panel (F9)
      3. cpQuizInfoTotalCorrectAnswers: number of correct answers until now
      4. cpQuizInfoTotalQuestionsPerProject: total number of questions in the Quiz, also to be found in the Advanced Interaction panel (F9)

      Quiz Setup

      Quiz Preferences

      In the screenshot  you see that:
      • 'Branch aware' is checked
      • 'Allow Backwards movement' is unchecked
      • 'Show score at end of Quiz' is checked
      • 'Allow user to review the quiz' is checked
      • 'Hide Playbar in Quiz' is checked
      In Pass/Fail I allowed two attempts, and show the Retake button. Since the score slide is the last slide of the project, I didn't specify any actions on Quiz level, both are left to 'Continue', which means going to the End slide. The progress indicator was changed like this to make it universal, because you cannot localize it in this specific situation, it needs to be the same in all question slides. I changed it in Quiz, Preferences, Default Labels:
      In the movie you saw that this indicator doesn't appear as configured, probably because the factor Y, total number of slides, is unknown at the start of the quiz. 

      Object Styles/Master slides

      The feedback captions are replaced by shapes (rounded rectangles) and I edited the colors with the Theme Colors used in this custom theme. 

      For each language I created Quiz master slides (for the used question types) to localize the buttons. As usual I dragged the Next button (invisible here) under the Clear button ('Wissen' in Dutch). I didn't bother about the Back button because I accepted to delete those Back buttons when unchecking 'Allow Backwards movement'. 

      Localization remains a cumbersome work flow: you cannot translate the content of the feedback containers on the master slide, this has to be done on the slides.

      It had no sense to localize the Score master slide, because each Captivate file allows only one Score slide. Read later on why I didn't drag the Review under the Retake button, which is my normal work flow for Score slides.

      Branching

      Dashboard to Quiz

      I created a user variable v_lang that will remember the choice of the user. For its values you can use numbers, one character (my choice: 'D' for Dutch, 'F' for French, 'E' for English) or a word. This variable is populated on the dashboard slide (slide 2) with the stars. Each star is a shape button, triggering a shared standard action. In these two pictures you see screenshots of the template and of the parameters, both filled in for the Dutch button star. Statements are self-explanatory: assigning a value to v_lang, disabling all buttons, applying an effect to non-chosen buttons and showing the right text.

      If the user prefers to take all questions, by clicking on the CP-button, the value of v_lang remains empty. To make it possible to check for an empty value, I needed a second user variable v_null as explained in this post: Where is Null

      The CP-button on the slide controls the navigation with a conditional advanced action that has 4 decisions. First decision 'Empty' checks if v_lang is empty, the three other decisions check which language was chosen (values D, E or F). 

      Quiz to Score slide

      Last slide of each group of questions needs a conditional navigation because of the branching. On Exit event for question slides is not available, the action has to be triggered both by the Success and Last Attempt event in the Quiz Properties, Actions part.

      Because this action EndQuiz has never to be edited, I preferred a conditional advanced over a shared action:

      Score slide

      What is different?

      If you watch the system variables displayed in the movie, and compare them with the numbers on the Score slide, you see that they only match if all questions are taken. When only one branch has been done, you see a difference for:
      • Maximum score (cpQuizInfoTotalQuizPoints), which is used to calculate the percentage as well; it contains always the total number of questions, but the results slide shows only the maximum score for the questions in the Branch taken by the user.

      • Number of questions (cpQuizInfoTotalQuestionsPerProject) also contains the total number of questions, but on the results slide you'll see the number of questions in the Branch taken.
      Consequence is that you will not be able to create a custom score slide (see: Intermediate score slides)  when Branch aware is checked.

      I discovered another difference in the behavior of the Retake button. For a non-branching quiz, the Retake button will disappear automatically in two situations: when the Quiz attempts are exhausted or when the user passes the quiz. If you check Branch Aware, the Retake button does not disappear when the user passes, only when the Quiz Attempts are exhausted. Bit strange. To avoid confusion between the Review and the Retake button I use to drag the Review button under the Retake button. This prevents the user to Review a Quiz before having succeeded or finished the Quiz attempts. That work flow proves impossible with Branch aware checked. For that reason I had to show both Review and Retake buttons, and add a warning in the custom Feedback. I dragged the Retake button over the Continue button, because that button also can lead to confusion and should never be deleted. 

      Localization

      That was the toughest part. Only one default score slide is allowed in any Captivate project, the numbers shown in that score slide cannot be retrieved for use in custom score slides. 
      Each field on the score slide has a 'label' and a 'number' part, they are linked. You can format them separately, but you cannot delete the label and keep the number result.
      I had to cheat, because the labels needed localization, and I decided to change the color of the default labels to the same color as the background of the slide (luckily a solid one-color fill), to make them invisible. Then I made them small and dragged them to a corner of the slide. 

      That way I was able to add custom labels, which are grouped in the Timeline; each group (Gr_Dutch,....) also includes a localized title:

      The feedback on the score slide appears normally in the Review Area. It is possible to drag that area off stage. I created 8 feedback shapes and grouped them in Gr_Review. The appropriate feedback will appear due to another conditional advanced action triggered by the On Enter event of the Score slide. This action has 8 decisions, you see first 3 decisions in this screenshot; the other decisions are similar:

      The buttons are not localised, and I didn't create trilingual labels for the users that took all questions. It would be possible for the buttons, when splitting them up in a button and an overlay text, but I always get tired when having to localize Quizzes, sorry for that.

      Conclusion

      Branch aware is a great feature (if you don't have to localize). I hope you discovered with me how to set it up, and where you have to be careful. Maybe the localization tips are overkill for the lucky Captivate users who never have to create a project in another language than Captivate's language :)

      And for the fans, between the lines you could discover a tip about choosing between shared and advanced actions as well. Hope you discovered that tip?

      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/799520 2015-01-22T09:30:11Z 2015-06-14T14:02:55Z Theme Colors

      Intro

      In my previous post I explained the work flow to create a custom Theme Colors palette, starting from an Adobe Color palette (ase). Theme Colors palettes can be applied to any theme, they are stored in the Layouts folder of the Public documents, they are not project specific. This article will show the consequences of applying a new Theme Colors palette to a theme. As you probably know a theme has three principal components: object styles, master slides and skin. 

      Moreover Captivate 8.0.1 allows to apply theme colors to a bunch of learning interactions (not to all yet). That is a big improvement, because most of those interactions have their own themes and it was a lot of work in former versions to edit colors in the interactions to match the theme of the project. 


      How are Theme colors used?

      You can customize one of the existing themes by changing the Theme colors in the first place, then adding objects, changing styles, master slides etc. For a totally new theme you will probably start with the Blank theme. Maybe in a third article I will offer some tips about using Blank theme. In this post I will only talk about the other themes, and the way a new colors palette will interact with them.
      In the dropdown list under Select Theme Colors, you'll see on top the category 'Custom Theme Colors' and to the bottom 'Pretest Theme Colors'. 

      For each included theme you'll find two Theme color palettes in Captivate 8: one with the same name as the theme (in 'Preset Theme Colors'), and one with that name followed by Shade (in 'Custom Theme Colors'). Example: Flat color palette, and Flat Shade color palette. Only the Blank theme is an exception. 

      When you open the Theme Colors window, and choose Customize for a palette, you'll see 10 colors. A name has been given to each color, but those names are misleading, as I will explain. 
      I prefer to label them color 1-10. Why? What do you expect when seeing a name like 'Title', 'Sub-Title', 'Slide BG', 'Fill', Stroke? I naively (or is it my engineer's mind) supposed that the first color (Title) would be applied to the Titles on the Master slides, the second color (Sub-Title) to the subtitles on master slides, Fill and Stroke to shapes or other objects, Slide BG to the background of the slides (project background). But when I explored the themes, included with Captivate, I discovered that this is almost never the case :). If you download this file, you'll see two tables: one for text styles and one for the three states of Shapes. Some conclusions:
      1. Font color of the default Title Smart Shape Style which is used on the Master slides is the first color 'Title' in themes Flat, Green, Nimble, White and Woodgrain. Blackboard uses Text 2 (Color 4), Clean Blue, Clouds and Vivid use Skin 2 (Color 9), Half Tone uses Stroke (Color 6). 

      2. Font color of the default Sub-Title Smart Shape Style, also used on Master slides is never color 2 'Sub-Title' except for the Flat theme. All other themes use another color.

      3. Font color of Caption text uses quite a myriad of colors: Stroke (color 6), Text 1 (color 3), Sub-Title, Sub-Title tint 5 (color 2 - see tints later on), Title (color 1), Skin 2 (color 9).

      4. Same for the three font styles on Question slides: Title, Question and Answer.

      The default Shape style in the Object Style Manager has three states (Normal, Down and Rollover) because every shape can be used as a button. In the second table you'll see Stroke color, Font color, Fill color (Solid or Gradient, and Alpha) for the three states. Only the Font color seems to remain the same for each state - not always a good choice (sometimes unreadable because of change in fill). 

      Why did I create those tables? If you change the theme colors, some of the object styles, master slides and skin will change based on the new colors and on setup of the colors in the original palette. This means that the same custom color palette will create a different look, depending on the theme for which it is used.  Not all object styles are using theme colors however, some will not change color: this is the case for the new Success/Failure/Hint smart shapes that you can use to replace the captions for interactive objects and question slides (Preferences). Of course, the old Success/Failure/Hint captions cannot apply theme colors neither, but for the shapes this is possible without having to create custom captions in a graphics editor. 

      Example

      I created the color palette  'Lilybiri' based on my logo (see previous post). Browse this Picture Gallery. You'll see one slide, with that palette applied to the White, Vivid, Flat and Halftone Themes. Watch the colors of the master slides, Title, Subtitle, Caption and the 'rollover' state of an inserted shape button. You see that the result is totally different.

      If you want to change just the theme colors for an existing theme you have to check the master slides and the object styles. I would have preferred to have more consistency in the use of the theme colors in the themes. Especially in this version, because to create a custom theme you need to start from an existing theme, certainly for responsive projects. 

      Tints 

      In the first article I already explained that Captivate will create 5 tints for each of the theme colors, besides the base colors of the palette. Some of those tints are used in the existing themes: on master slides, in object styles and in the skin.
      Contrary to the base theme colors, which I indicate now with codes 1.0, 2.0 .... 10.0, you do not have any control over the way those tints are created. I use code 1.1, 1.2 ... 1.5 for the tints based on color 1.0 in my code system. If you apply a custom theme colors palette, Captivate will create those tints, but my curious mind wondered "HOW"? Because the term 'tint' was used, I suspected that looking at the HSB code would be a better idea than the provided Hexadecimal or RGB codes. HSB is used in a lot of Adobe applications to indicate Hue, Saturation and Brightness. I have now a complete table with HSB-codes for all provided theme color palettes. I didn't include it here, it was meant to discover the logic of the tints creation. And there is some consistency, my conclusions (see also the image below):
      1. For gray colors (like 4D4D4D, E6E6E6...) you'll see that Hue and Saturation remain equal to 0 and only the Brightness will decrease from tint 1 to 5.  Same of course for Black (000000) and White (FFFFFF).

      2. For normal colors the Hue remains constant (there are small variations) for all tints.

      3. First tints (1-3 or 1-4) keep high Brightness but start with lower Saturation that will increase

      4. Last tints (4-5 or 5) keep Saturation of previous tints but decrease the Brightness

      Depending on the default Theme you are using, the tints can be slightly different, but not in the same way as what I showed about the style colors in the previous point.


      Learning Interactions - Theme Colors

      Some learning interactions do have their proper themes. Now it is possible to apply the colors of the active Theme Colors palette to the interactions as well. However, they are not applied automatically, you need to use the Custom button. There are two possible work flows:

      For the (older) interactions Accordion, Tabs, Process Circle, Pyramid Stack, Timeline, Circle Matrix, Pyramid Matrix, Glossary, Word Search and Certificate

      • The interaction themes are at the left, with default theme selected; use the Custom button at the bottom

      • Default Colors are activated, and you could customize them using the Customize button, but then you'll see the old cold dialog box, which has no link to your theme colors

      • Click on Theme colors: the preview will be changed immediately, and the Customize button now appears under Theme Colors

      • When using this customize button, you'll see the Theme colors with their tints when changing a color.

      For the new games Catch AlphaNum, Jeopardy, Memory and Millionaire

      • After setting up the game, go to the second screen (mostly with an red arrow at bottom right) to Customize

      • Look for the button 'Color settings': in some games it is at the top, in other (like in the screenshot) at the bottom

      • Same work flow there: if you click on Theme colors the present color palette will be applied

      • Customize becomes available under Theme colors instead of Default colors and will show you the Theme colors palette with all the tints.

      The other interactions do not yet offer the possibility to use theme colors.

      Tips

      • Be careful when creating a custom color palette to apply to an existing theme: look at the two default palettes provided for that theme and try to assign bright colors to the same color number as those palettes, same for darker colors. Maybe the table I offered with the use of the theme colors in all themes can help.
         
      • Check the object styles after applying the new color palette, the easiest way is in the Object Style Manager; do not forget that shapes have colors for the three states

      • After checking the object styles, check the master slides: objects and background will have changed colors as well. If you use shapes for Success/Failure/Hint messages, check their style because they will not be changed to the new color palette.

      • I didn't mention the skin, but playbar as well as TOC settings will also get color changes when applying a new color palette, check them as well

      • When using learning interactions, try to change to Theme Colors if they offer that possibility, and double-check the result that you can edit with the Customize button.





      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/790674 2015-01-04T11:49:07Z 2015-06-14T14:03:45Z Colorful 2015 with Adobe Captivate

      Intro

      Color management in Adobe Captivate is improving slowly but steadily. Too bad: the Help documentation is not offering much explanation about color workflows at all. Have a look at what is explained about enhancements in Captivate 8.0.0 and 8.0.1 and tell me if this is sufficient? It is not for me, and I have a 25 years history as a Photoshop trainer. Do you know about the relationship between the Swatches panel, the Color schemes that appear in a lot of dialog boxes (not only for Fill/Stroke, but also in learning interactions), the Theme colors and the colors applied by default in the Object Style Manager, Master slides and Skin? Since many months I'm trying to figure out a good practice using the enhancements in Captivate 8. In previous versions I created color swatches in the scratch area (outside of the stage) to use with the color picker in order to achieve a consistent color use. That is at the least cumbersome compared with color management in applications like Photoshop and Illustrator.  Since October 2014 for those CC applications I'm able to create and use my Adobe Color palettes (ase), stored in the cloud, on any device and system. Adobe Color is installed on my tablets and smartphone, allowing to create color themes at any moment, often from a shapshot. That new sharing feature (Libraries) is not available (yet?) for Adobe Captivate. 

      In this first article I will try to find a way in the jungle of Captivate's color terminology and explain my present work flow to manage colors in a project by creating a custom theme color palette, starting with an 'ase' file created in Adobe Color. Let me know if you find this useful, please? In a second article focus will be on the use of Theme colors:  in object styles, master slides, skins and how to use them in (some) learning interactions (new in Captivate 8).

      Swatch Manager

      In the help you'll find a lot of screenshots where it is labeled 'Swatches'. But in CP8 title was changed to 'Swatch Manager'. I'm working in Expert UI, and have that panel always available in the right docking station, and make it floating when necessary. If you prefer the default newbie UI, there is a video in the Help that explains how you can open this panel: http://helpx.adobe.com/captivate/using/whats-new.html

      You'll see a pretty big color palette in the manager: 8 rows with 15 color/tints, starting with 12 gray tints. When you hover over a color you'll see its Hexadecimal code, top left. To see RGB or HSB codes of the existing colors is a lot more complicated. When a color is selected and you click on the color wheel on top, it is not the selected color that shows up (as I expected) but always the gray color #404040. There is no direct way to see other color codes of the swatches (like HSB, RGB), contrary to the Color Dialog box, that will show you the hexadecimal code and RGB (not HSB) when selecting a color and clicking on the Color Wheel.

      If an object is selected on the stage, you can use this Swatch Manager to apply one of the swatches as Fill or as Stroke color. For a text container (shape or caption),  in text editing mode, you can use it to apply a swatch as Text or Highlight (background color behind text) color. That is the goal of the radio buttons in the third row. Honestly, I never use that work flow, if you accidentally choose the wrong radio button, you'll change the Fill instead of the Stroke color. 

      The color picker and the color wheel (that will show HSB, RGB and hexadecimal code) on top (first row) are meant to add individual swatches. You will be asked to give a name to a new swatch, the default swatches have no names.

      TIP  

      When you customize the palette in the Swatch Manager, it becomes available for all open projects, it is not project specific. BUT!!! A big problem is that you cannot save the swatches with a project at all. Whenever you reopen the project, the default swatches palette will appear. Even when you put a PC in Sleep mode, after wake up the custom swatches palette has disappeared and you have to load it again. This is the main reason why I never use the Swatches Manager to edit colors in a project as I mentioned before, but use it only to define a Theme Colors palette. 

      The buttons in the second row are the most interesting!


      Captivate and Adobe Color

      I am using the Swatch manager to create a custom color palette, starting with an Adobe Color scheme. The buttons at the second row, from right to left, are:

      • Clear: this will delete all color swatches in the panel - not really necessary if you use Load

      • Reset: will revert to the original 8x15 palette, any added individual swatch, or loaded custom palette will be cleared

      • Save: the present palette will be saved in the Adobe Color format, extension 'ase' (Adobe Swatch Exchange). The default name will be the project name (you can change the name of course); this can be useful if you created a custom color palette in Captivate, for import into another Adobe applications like Photoshop.

      • Load: allows you to load an 'ase' file created in another Adobe application like Adobe Color. Captivate also accepts 'aco' (Adobe Color, have more information like Pantone color) files but I seldom use that palette format. You get a warning that the existing palette will be replaced by the new, but can still revert to the last option:

      • Append: will add color palette described by an ase or aco file to the existing colors.
      An Adobe Color ase file will typically have only 5 colors. There are a lot of tutorials around about using Adobe Color (formerly Kuler) and you can install it for free on any device or use it right from the web site. Just an example: you can create a color scheme from a logo in a quick way. The color scheme imported here into the Swatch Manager is based on my company's logo.
      Adobe Color is part of the Creative Cloud,with a CC subscription you'll have access to your personal color themes in the cloud from a lot of Adobe applications without having to save/load it using the ase file. Crossing my fingers that in the future this will also be possible for Captivate.

      In most cases, 5 colors will not be sufficient for Captivate to have a complete color scheme. The reason is that Theme color palettes in Captivate have 10 colors (see later). 

      Add swatches

      Second step in my work flow is to extend the palette to more colors (not necessary 10), that match the existing scheme. This can be done, swatch by swatch,  with the color picker or with the color wheel. Very often I will add white or a very light tint of one of the existing colors (using HSB), and a very dark one or black (if it is not yet present). A similar approach is used by the Tints in Theme colors (see later). Depending on the style chosen for the Adobe Color Theme, maybe you'll need a very contrasting color as well.
      In this screenshot you'll see how I used the green color to create a very bright one by keeping the Hue (H in HSB) but increasing the Brightness (B) to 100%. I added 3 swatches in total to have a palette with 8 colors.

      Color dialog box

      The color dialog box has 3 different looks, depending on the buttons on the top. The active look can be detected because that button will have a very thin black line surrounding it (maybe you'll have to get closer to the screen to see it). Those looks are, from left to right:

      • "Theme Colors": this look will appear by default if the selected object's Fill (or Stroke) has a default Object style using a Theme color, or if its color has been applied from the Theme Color palette.
        The top row shows the Theme colors (see later), under them you'll find 5 extra tints for each theme color. I regret that it is not possible to see the color code of any of the colors directly, it would be great if they showed up on hovering over a color (as hexadecimal code) or even better if you could have full info in the color wheel when clicking on a color. That is not the case (yet?). When exploring, I found that all tints have the same hue (in HSB), different Saturation and Brightness.
        At the bottom you'll find the colors as they were last used, last used color is the first in that sequence. Not that useful (my personal opinion). That row is dynamic, changes whenever you use another color.


      • "Swatches": this look will will appear by default if the selected object's Fill (or Stroke) color has been applied using the Swatches Manager.

        You will see the swatches in the upper section, and the 'last colors' palette at the bottom

      • "Color Wheel" will never show up by default. It allows you to choose a different color, either by picking it (click first on the right vertical bar to choose a hue, then you can change saturation and brightness in the big rectangle) or by entering a Hexadecimal or RGB code. Contrary to the dialog box for adding a swatch,  HSB is not available here. It also shows the last used colors.

      • "Color Picker" is the last button, no look on itself. It allows to pick a color somewhere outside of the dialog box. While moving the picker you'll see the Color Wheel showing up in the dialog box.

      A similar Color dialog box shows also up for the gradient stops when editing a Fill gradient, when customizing colors in the Theme Color palette, and in a reduced edition when customizing colors for Learning Interactions.

      Theme Colors 

      This new feature in Captivate 8 allows to change quickly the look of an existing theme (object styles, master slides, skin). Next week I will talk more extensively about those changes, because not every style will be edited automatically when applying a new palette of theme colors. My work flow, after having imported and extended a color scheme in the Swatch Manager, is to create a custom Theme color palette based on those colors. With that work flow, the color dialog box will always appear in its first look and provide besides the original Theme Colors a set of 5 extra tints for each theme color. Although there are by default 10 colors in such a palette, you can assign the same color more than once. More details about the use of the 10 colors will be provided in the next blog post.

      Contrary to the color schemes created with Adobe Color - ase file format - the Theme Colors are saved as XML files. You can find them in the Layouts Folder (under eLearning Assets in a public folder). The XML file is pointing to the RGB codes as you can see here:

      You could create a custom theme colors palette by creating new XML files, but you'll need a more exact number for RGB in that case then the one provided in Captivate. An alternative is this work flow:
      • Open the Themes list with the big button on the top bar

      • Click on the Theme Colors button, bottom right

      • Theme Colors dialog box, in its Basic view only gives you the dropdown list with color palettes


      • Click the Customize button (bottom right) to open a hidden part of the Theme Colors dialog box (with Basic button you can hide that part again)


      • You'll see the 10 colors, and clicking on a color will open the Color dialog box in its "Swatches" look. You can now customize that color. The names of the colors are not really relevant. Some colors are not really used in most themes but that is another story, which you'll discover in a later blog post.

      • When you are ready, first change the name of the theme: blue text 'White' can be edited; there is no Save as (at least I couldn't find it).

      • Click the Save button: custom Theme Colors palette is created and immediately applied to the present project. You'll find its definition in a XML file with the same name in the public folder I showed before.
      From now on you can use these theme colors for all editing. In the next blog post I'll explore how those colors are used in the current themes in Captivate, and how you can apply them to learning interactions. That post has now been published.

      Summary

      If you made it up till this paragraph, maybe you'll be confused by the Captivate Color Jungle?  Here is a short summary of the described work flow, to create Theme Colors from a custom Adobe Color scheme:
      1. Import the 'ase' file in the Swatch Manager, using the Load button

      2. Add more swatches to the default 5 colors of the scheme, using Color Wheel or Color picker in the Swatch Manager

      3. Save that extended scheme as an 'ase' file (because custom color schemes in Swatch Manager cannot be saved); that way you can reload it if necessary

      4. Open the Theme Colors dialog in its extended version, customize the 10 colors.

      5. Change the name of the default theme

      6. Save the custom Theme Colors palette

      Thanks for your patience, please leave your comments! May a lot of your wishes be fulfilled in 2015. I have some for Captivate as well :)]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/770479 2014-11-16T12:30:40Z 2016-05-01T19:03:58Z Custom Hotspot questions in Captivate 8

      Intro

      A couple of weeks ago I presented a session 'Enhance Effectiveness of Quizzes in Captivate 8' at DevLearn 2014. One of the subjects that I barely was able to tackle due to lack of time, is the creation of custom questions. You'll find several blog posts where I created custom questions using standard objects, widgets and learning interactions. On the forums I often suggest to replace the default hotspot questions by custom questions. And finally find the time to explain why I recommend this. The success of the Quiz blog posts and of this BYOL session at DevLearn make me wondering if an e-book with focus on Quizzing would be welcomed by the community? Looking for comments on that plan.

      Why?

      The default hotspot question slide has some limitations. Here are the ones I find most frustrating:
      • hotspots are always rectangular
      • it is not possible to have partial scoring
      • you cannot add shape buttons to that type of slide, because any space outside of the correct hotspots causes failure
      Thanks to my favourite Captivate object, the shape button, it is pretty easy to create a scored custom hotspot question with
      • freeform hotspots
      • partial scoring, that can be reported to a LMS by SCORM
      • allowing to add shape buttons for more functionality

      Why not?

      What are the disadvantages of a custom hotspot question slide compared with the default hotspot question slide;
      • custom question slides always take more time (although shared actions can help), especially if you want to add all question functionality (Clear, Retake etc...)
      • if you like the animations that appear on clicked hotspots, they are not added automatically in custom hotspots, there is of course a way of showing the clicked hotspots
      • although the total score will be correct when using partial scoring, some quizzing system vars will consider each correct hotspot as being a separate question; you have to be careful when using a default score slide, in which you show number of questions/correct questions
      • it is not possible to use custom questions in a question pool

      Example

      Watch this movie. After the intro slide you'll see two Hotspot questions. Both questions have partial scoring. The fourth slide is the default score slide, to show how each correct hotspot is considered to be a question as is the case with all scored objects. To remediate, I added a custom score slide as last slide (use Continue button on the 4th slide). I didn't create a Reset or Retake situation. If you want to replay, refresh the browser window. Good luck!

      Concept Hotspot Question - version 1

      This question slide has one big shape button behind four shape buttons that indicate the form of the four countries to be clicked. The big shape button when clicked, will track a wrong click. I used 3 variables for this question:
      • v_attempt: number allowed attempts; will be reused for second question, number is assigned by On Enter action
      • v_counter: counts the clicks, to be compared with v_attempt;  will be reused for second question, reset to 0 by On Enter action
      • v_wrong: counts the mistakes, is not reset because it will continue to increment on second question, is used on custom score slide.
      Here you see the timeline of this slide. The correct hotspots, shape buttons, have been duplicated to create the covers that are normal shapes with a texture fill. 

      For the incorrect hotspot (shape button) I created a conditional advanced action with two decisions:
      1. "Always" is a mimicked standard action, self-explanatory. Because this hotspot can be clicked multiple times, the last statement is necessary to place the playhead one frame back, in the active portion of the shape button.

      2. "ShowNext" checks if the number of allowed attempts is reached, and if that is the case will hide all the hotspots and shows the Next button.

      For the correct hotspots, that allow only one click, I created a shared action with two decisions

      1. "Always" is a mimicked standard action, self-explanatory. The parameters are highlighted.

      2. "Checker" is similar to the second decision for the incorrect hotspot. Parameters are highlighted.

      The On Enter action for this slide is a standard shared action that resets the value of v_counter and v_wrong to 0 and assigns a value to v_attempt.


      Concept Hotspot Question - version 2

      I will not explain this question as extensively as version 1 (maybe in a planned book about Quizzes). It has multiple incorrect hotspots, and uses an extra variable v_scorehot. Try to figure it out. As a tip, this was my timeline:

      Comments?

      As always I welcome comments about this example. As mentioned in the Intro, I would also like to know if you'd appreciate a book explaining the design, the tweaking possibilities and custom questions for Captivate quizzing.
      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/768635 2014-11-12T14:15:41Z 2016-06-08T10:18:38Z System variables in Captivate 8/9

      Intro

      Captivate 9 users: there is no change about system variables in this version, you can download the same table.

      The post 'System variables in Captivate 6' has been very popular, probably because it offers more details than what can be found in the documentation of Captivate itself. Later on I mentioned some new variables in Captivate 7 in the post New Features in 7.0.1.
      Time to upgrade the table for Captivate 8, you can download (for free) the pdf from here. The document is encrypted to discourage abuse. You will be able to print it at low resolution (150dpi) and it can be read by a screen reader. 

      The table was first proposed at the Adobe Learning Summit presentation about Advanced and Shared Actions. 

      New

      Captivate 8 only added two new variables:

      • cpInfoMobileOS in the category 'System Information': is read-only and detects which device is used, returns a number or a case-sensitive string

      • cpInfoGeoLocation in a new category 'Mobile': returns the geometric location when using a device on which such detection is enabled. This is the first variable that has not one but three components. Latitude, Longitude and Accuracy are numbers. There are several tutorials around, like this one.






      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/754846 2014-10-13T20:31:13Z 2014-10-20T16:00:42Z Captivate 8.0.1 Install? Keep your Customisation!

      Intro

      Today an important patch for version 8 was released, to upgrade to version 8.0.1.242. Like with the update to 7 I wonder why this is not a full 8.1 or even 8.5 because there are not only a lot of bug fixes, many features were extended and even added. Have a look at "What is new" for a summary. And Dr. Pooja Jaisingh already blogged and posted some other links: Free Update to Captivate 8. In this article  by my friend Michael Lund you'll find not only his first reflections but clear instructions about installing the patch. But none mentioned some of my favourite new features: using SHIFT to constrain an ellipse/rectangle shape to a circle/square and big improvements to color management. 

      But this post is not meant as a personal summary of the new features! As an advanced user I'm used to customize Captivate of course: custom themes, custom theme color palettes, custom shapes, custom effects and... custom workspaces because I'm using Captivate 8 in Expert mode. And when following Michael's (correct!) guidelines for updating, most of those custom items will get lost. If you do not are happy with the default items, never customize, do not bother to continue reading. However, if you share my frustrations about losing precious work, maybe you could find some workarounds in this article. Some of them can also help when you have to 'clean' a tired Captivate application by killing its Preferences.

      Workflow 

      Before installing an update, before deleting the Preferences folder (or using the CleanPreferences files in the subfolder 'utils'):

      1. Find the custom items in these locations (I'm on Win7, will be different on Mac):

      • Workspaces in   \Users\<yourprofile>\AppData\Local\Adobe\Captivate 8.0\Workspaces   
        which means they will be refreshed because this is in the Preferences folder. Here you see the default workspaces, each defined by two files.


      • Custom Theme Color Palettes in   \Users\Public\Public Documents\Adobe\eLearning Assets\Layouts\8.0\ThemeColors
        Layouts is one of the folders you have to delete before installing a patch.


      • Custom Themes in  \Users\Public\Public Documents\Adobe\eLearning Assets\Layouts\8.0\en_US
        I will mostly not save my custom themes in this folder, but better check if you have some there. The last item in the path can of course be different if you didn't install the US English version as I did.


      • Custom Effects contrary to the themes, I like to have some custom effects in the Gallery with other effects in a subfolder Custom:
        The Gallery can have more custom items. Eventually check also the folder en_US in the installation folder. Maybe you have edited some of the files there as well.

    • Copy all the custom items to a safe place

    • Install the update, or Clean Preferences

    • Copy the custom items back to the same locations described above.

    • Of course, if you want to go back to Expert mode to be able to use the custom workspaces, you'll have to edit the Preferences again:

      Bonus

      Wondering what SFH means in this new setting:

      Success/Failure and Hint captions can now be replaced by cool shapes, also for Question slides! And it is no secret that I'm a big fan of Shapes over the older objects. Now waiting to be able to import SVG as shapes :)

       

       


      ]]>
      ir. Lieve Weymeis
      tag:blog.lilybiri.com,2013:Post/738855 2014-09-10T14:38:51Z 2016-11-24T15:29:07Z Drag&Drop tips

      Intro

      Since Drag&Drop appeared, there are many questions on the forums about them. Although the wizard is an easy way to create quickly a simple interaction, once you explore its functionality more in depth, not everything is self-explanatory. In this post I will try to offer some tips, do not expect to get a complete tutorial.

      Tip1: Labeling

      It is not really necessary to label the objects used in a Drag&Drop for simple interactions, but if you will need to use object actions labeling drag sources and drop targets can make life so much easier. And my true fans do know that I'm a labeling freak.

      This is a warning: label all objects before creating the Drag&Drop. If you change your mind and want to add or edit names after having created the Drag&Drop links, you'll break the links from/to objects that get a new or changed name. This is certainly not the case in other situations in Captivate: it is perfectly possible to change names of objects that are used in advanced/shared actions, the names will automatically be changed in the actions. This is not the case for Drag&Drop, so try to avoid the problem by labeling objects first of all.


      Tip2: Success message

      It is a bit strange, D&D has a default Failure caption that will appear when the drag answer is incorrect, but it has no default Success caption. You have to take care of it yourself, this way:

      • Create a message, it can be a text container (use a shape, much more choice that for captions), an image, an animation, an audio clip or even a combination of several objects (group them in that case).
      • Make the message invisible, either using the option in the Properties panel, or using an action On Enter of the slide.
      • Define the action Show Message (which can be a group or an object, like defined in the first step) for the Success action in the D&D panel.

      Update: if you upgraded to Captivate 9, you can forget about this tip: it is no longer necessary to use the workaround because the Success caption (or shape) is now available in the Drag&Drop panel as an option.


      Tip3: Object Actions

      Besides the actions that are executed when the user has clicked the Submit button (which I used in Tip2), you have the possibility to trigger an action by each individual drag movement. Bit weird, but in Captivate 8 you'll find those actions not as expected under the Actions tab but under the Format Tab.

      You can use this functionality for several goals, like to:

      • show an individual message (can be text, image, audio) for each drag movement
      • simulate having the moved drag sources in a specific sequence (like books on a shelf)
      • ...

      What is not mentioned anywhere in the Help is the fact that if you specify a simple action (from the dropdown list), the playhead will be released as is the case for any simple action in a normal situation (remember my blog post with video on Youtube: 'Why choose standard over simple action?'). And that is certainly not what you want! By default a D&D interaction has a pausing point at 1.5secs (like normal question slides), but a simple object action will cause the playhead to continue, user will not be able to finish. 

      My recommendation: never use a simple action as object action! Replace it by an advanced, or better, by a shared action. For examples as mentioned above you'll probably have similar actions for all the objects, which makes shared actions the way to go. Watch this movie, you'll see what happens when a simple action is used, and how this is corrected by replacing the simple actions by shared actions.

      Movie

      The object actions on the slide with the simple actions (slide 2):

      And I replaced them on slide 4 by a one liner shared action:

      On the last slide I used a shared action as well, that hides the group and shows one explanation.




      ]]>
      ir. Lieve Weymeis