Edit SVG in Captivate 11.5

Intro

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

You may also ignore that the new Assets Panel (wait for an in-depth exploration in the near future) includes a set of ‘icons’ which are SVG’s. The hotspots used in 360 slides are SVG's as well, the editing functionality was added to make customizing their colors possible. All SVG’s in your project end up in a dedicated folder of the project Library.

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

.

Example slide

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



Step-by-step ‘Edit colors’

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

1. Insert SVG and resize

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

Step 2: Edit mode

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

Step 3: Select a ‘path’

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

Step 4: change color

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

SVG button states

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

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

More?

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

The Advanced action triggered by the big SVG buttone:

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

Audio in Learning Interactions

Why?

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

Static and Interactive

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

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

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

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

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

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

Audio Problem

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

Interaction available after Slide Audio

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

Steps:

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

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

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

Custom Interaction

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

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

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

Playtime with Audio and Widgets

Intro

Holiday time means playtime, travelling to me. For personal reasons not travel for me this year. So thought it a good idea to offer you some information and fun about a small country that I visited several times being the home country of my husband. In this text I will not try to explain everything. If you want explanations about some of the techniques I have been using, please post a comment. Just know that I used of course Captivate but also enjoyed the roundtrip functionalities with Audition and Photoshop in the eLearning Suite 2.5 extensively. 

In several previous articles I have been using widgets that are included with Captivate. Those were all static widgets. But recently two great widgets were published by friends, and I had a lot of fun including them in this movie.

Since months I planned to offer some tips about audio, will try to keep them really simple (KISS) and as promised without long texts.

Playtime

Watch this movie and try to have a high score playing with the widgets described further. You'll need some patience, due to the many audio clips it is bigger than the files I normally add to these posts. You can also download it if you want.

Widgets

I used two widgets, one is an interactive widget and the other is a question widget. This means that both can be (and were) used to include scores in a quiz. Here is a short description of the widgets and of course a link to the sites where you can find them. Highly recommendable, both of them!

Drag and Drop Interactive Widget 
This interactive widget was released by InfoSemantics (by Rod and Tristan Ward) and can be found here: Drag and Drop Interactive Widget. Rod explains very well the functionalities of an interactive widget and offers also a comparison with their previously released Drag and Drop Lite Question Widget. Of course, I used Advanced actions to construct the Question slides created with this recent widget. Let me know if you want me to explain those actions in a more elaborate article. I love this widget for its great range of functionalities, especially in combination with advanced actions.

Jumbled Word Widget
This question widget was released by another Captivate-friend, Yves Riel (Flash-Factor) and can be found here: Jumbled Word Widget. Because it is a question widget, it takes over all functionalities of question slides. Just one example: here I used Captivate 5.5 and the new Review feature is automatically attached to the slide with the question widget. No need for advanced actions to add scores to the Quiz in this case. But of course you also get the limitations of question slides : no way to have a partial score (as I created with the other widget for dragging the names to the map). I love this widget for its great design and it confirmed what I suspected since a while: Yves is a perfectionist!

Audio

A lot of audio was used in this movie: background (drums music), slide audio (some of the Voice overs are attached as slide audio) but the most powerful way to add/control audio is using object audio. Some reasons with examples:
  • Object audio allows you to have more than one audio clip playing simultaneously without having to create a multi-track audio file. 
    Example: slide 8 with the rollover slidelets; each slidelet has two audio clips, the first is attached to the image, and the second (Voice over) is attached to the Text Caption that appears later. This allowed also to fade out the first music clip, without effect on the Voice over.

  • You can manipulate object audio by (advanced) actions: hiding the object results in the audio not playing, showing the object plays the audio. If you want an audio to play only the first time that a slide is visited, this is a solution: attach the audio to an object that is visible to Captivate but not to the user. To myself I call those audio clips "audio objects".
    Example: the question slides constructed with the widgets have a Voice over that plays when the user takes the quiz, but not when he is reviewing the quiz. Moreover some question slides have a music clip as well, that will only play during the Quiz time, but not when reviewing. This was realized by attaching each music clip (VO and music) to a rectangle with a stroke width of 0 and a Fill with Alpha=0, thus making it invisible to the user. With an advanced action I hide those rectangles when reviewing, resulting in not playing nor the VO nor the music.

  • Same technique can be used to play another music clip in different situations.
    Example: I did not imply it in the movie because it was already very heavy, but this can be used to replace the Text Captions (Review Messages) in the Question slides created with the Drag and Drop Interactive Widget by Voice overs, or to add a Voice Over to those text captions.

I do feel that you have more questions, but I promised a no-text-heavy post this time. If you want me to explain something more in depth, please post a comment.

Have fun!