Intro

In the past I already posted some articles with tips about inserting Slides from those projects in your project. To customize those slides you often want to edit texts and replace images. If you are new to Captivate, finding an image can be frustrating. You expect to be able to select an image by clicking it on the stage, but that is not always the case. This article will try to help you in your search. Follow the steps in sequence. Depending on the situation you will not need all steps. Meanwhile you may discover some ‘tools’ as well.

Text mostly is not that hard to find, although there are some exceptions which will be mentioned. All steps here, except when indicated, are valid both for non-responsive (blank) and responsive projects. Example screenshots are taken from the available Quick Start Projects.

If you find this helpful, will write another article about customizing interactions. That will be not as easy, and may need more learning about tools.

Steps

Step 1: Timeline panel

In the newbie UI the timeline panel is collapsed at the bottom, and you see only its title bar. Open the Timeline panel by clicking the Title bar. This is your primary tool. You may ignore that this panel can also be used to select objects like images and text containers instead of clicking them on the stage. Especially when you have a lot of objects, which overlap, this may be an easier for selection. Selected objects have a different color (darker blue) than unselected objects.

If you can select the image on the stage or on the Timeline panel, and you want only to replace that particular image, it is easy. Look in its Properties panel, where you’ll see the name of the image. Click that name and point to the new image. I would recommend to have it imported to the Library (see further), but you can also find it on your system. Once it is imported, it will automatically appear in the Project Library.

Screenshot is for the slide ’70/30 Layout with image horizontally’ from the QSP ‘Alliance’.

Tips:

• If you have several slides where you want to replace this same image, it is better to find the image in the Library. Use ‘Find in Library’ from the right-click menu on the image. Edit the image in a graphics application, where you can replace it. Keep the original name and all instances of that image will be replaced in your project.

Extra

I didn’t encounter this other possibility yet on a Ready-to-go slide but have not checked all of them. It is possible to have an image as background on a slide. In that case it will be visible on the state, but not on the Timeline. You can only see that image as shown in this screenshot:

You see that a Custom background is used. It is an Image, and under ‘Slide Color’ you see a preview of the image. Clicking the small triangle at the bottom allows you to choose another image.

Step 2: Image on Master slide

If you cannot select the image on the stage, nor in the Timeline it may be on the used Master slide.

Click the Master slide button, and the Filmstrip will be replaced by the Master Slide panel. The master slide on which your slide is based will automatically be selected. It is possible that need to scroll to see that selection, it is a thick blue border.

Keep the Timeline panel, it is also used by master slides. Try to select the image either on the stage or in the Timeline. If you are able to do so, you can replace that image the same way as on a slide. All slides based on this master slide will be updated automatically and show the new image.

Screenshot is for the slide ‘Image 1’ from the QSP ‘Wellbeing’.

Extra:

Similar to slides (and more used) an image can be used as Custom background in a master slide.

For a Fluid Boxes project it is also possible that a Fluid box is filled with an image. Same comment as with the background for master slide. I have not detected this use of images in the QSP-slides which I have screened.

Step 3: Multistate objects

No luck so far, no images on timeline of slide nor master slide? You are able to view that image when previewing the course, but it is not visible in the editing environment on the stage? In that case the mysterious image is probably in a state of a Multistate object. Same can be possible for text, which appears when previewing but is invisible on the stage when editing.

Find the multi-state object for hidden images?

Preview the slide (in browsers) and try out the interaction, mostly by clicking buttons or arrows. Try to remember one of the images which you want to replace.

When back in the editing environment, you probably will have an image on the stage. Use the right-click menu to ‘Find in Library’. The developers of the QSPs will have labeled the images in a consistent way. Try to find the image by scrolling in the neighbourhood of the selected image.

To see if it is used in a multistate object, click the Usage button in the Library. If this confirms that the image is on the same slide, you have found the multistate object.

Screenshot: this is the slide ‘Slideshow Layout’ from the QSP ‘Business’. The image which shows on the stage is labeled ‘photo_1’.  Near that image I found the one needing to be switched ‘photo_4’ and it is confirmed that this image is also used on slide 2., in state4.

Open the Object State panel by clicking the State view button in the Properties panel for the Multistate object.

In the Object State panel, find state4.  You can now follow the same workflow to exchange for another image as described on top for the very first step:

When you are finished editing states, you can return to more editing for the slide after clicking the Exit State button on top (bit far away IMO).

To find a hidden text, it is not so easy because texts are not in the Library. You need to preview. If the hidden text appears after having clicked some interactive object (button, arrow) try to remember its location and size. In that location you may have another text or image, but it can also be an invisible shape. In editing environment try clicking in the remembered location. If you see a selection rectangle with handles, try its State view button.

Typical slides with multistate objects are the Flipcard slides and the Accordion slides.  If you cannot find a text… ask here or in the Adobe forums. I have helped identifying multistate objects for multiple users.

Intro

You prefer step-by-step workflow for this second lesson over a video. Great. Let us start with this second lesson,  explaining how to use the shared actions from the first project in your project. Believe me: it is as intuitive as the first lesson.

Workflow: (re)Use shared actions in your projects

Step 1: Preparation

To follow this workflow, you need a project with at least two slides:

1. Content on the first slide is not important, it is meant to allow you to test the project.
2. Second slide needs to have these objects:
   • Two multi-state objects. Content is not important: audio, video, graphics, text or combinations in the states. Only requirement: same number of states in both objects (although you can have some identical states). They are labeled Container1/SVGContainer in the Timeline below.
   •  A shape or caption which will be used to insert the variable v_counter. You will insert the variable later on. Labeled SS_Counter in the Timeline.
   • Two navigation buttons: Next and Back. They are labeled SB_Back and SB_Next in my project (shape buttons)
   • A button to jump back to slide 1, with the action ‘Jump to slide 1’ or ‘Go to Previous Slide’. I used a SVG as button, labeled SVB_Home.

Here is an example of the Timeline of the project I use, the names are mentioned above::

If you are eager to start but do not have time to create a custom project, you can download this one:
Lesson2Start

Please do not use the SVGs from SVGContainer in your projects. They were extracted from a licensed AI file.

Step 2: Variables

Have a look at the variables, using menu Project, Variables.  The default view will show you the two user variables which are added to each project:

Step 3: Open External Library

Use the File menu, option Import, External Library. You have to point to the original project which has the shared actions on board.  In this case that will be the start project which you used in the previous practice; “SlideShow”.

The project will not open, but its library appears as a floating window in the left top corner of your screen. You will probably need to increase its height, and collapse the Images folder to see the Shared Actions folder clearly. 

You can use any object directly from this external Library in your project. I used the Home button (SVG). However for the Shared Actions, it is better to not use this method. It can be done if there is only one independent shared action, but in this example the three actions are somehow linked due to the used variables.

Step 4: Drag shared actions to project Library

Select the three shared actions in the external Library, and drag them to the project library. They will appear in that library with the Usage set to 0. Be sure to drag all the actions  at once. Reason:  they share some variables. which could lead to the creation of multiple instances of the variables. You will check this in step 5.

Step 5: Check variables

Use Project, Variables and… surprise! The variables used in the shared actions have appeared, including their default value and description

You can now insert the variable v_counter  in the text (see Timeline) SS_Counter, using the X button in the Properties panel, Character part.

The text will look like this:

…. $$v_counter$$

Beware: if you see more than one instance of a variable, it means that you didn’t drag ALL the shared actions at once. In that case, please delete the shared actions, delete the variables and retry Step 4.

Step….

You can now repeat what you learned in the previous lesson: drag the shared actions to the slide and to the navigation buttons, and choose a ‘value’ for the parameters.

Do not forget to test if everything is working as expected. Use F11, Preview HTML I Browser for the best preview.

More?

The step-by-step workflows described in this and the previous blog (or in the video and the next video to be published soon)) can be used for all the interactions in the Demo project, provide you have the shared actions. Not only for those rather simple interactions! It is also possible for more complicated projects like the Matchstick game, which I published recently, and for many more use cases.

I sincerely hope that at least some Captivate users will realize possibilities.  Ask an expert to design shared actions which can be used by any Captivate developer,  without having to dive into advanced actions, variables etc. .

I may post an 'epilogue' to this short crash course, listing up some Q&A. If you have a question to contribute, do not hesitate to post it in a comment.

Preparation

In Lesson 1 you started from an existing project, which had created objects for the Slide show AND shared actions in the project Library. Topic of the lesson: workflow to attach the shared actions to a slide event (On Enter) and to buttons (Success event). Lesson ended with the proposal to create a personal project with two slides. First slide is a title slide with only a Start button (Go to Next slide). Second slide needs two multistate objects. Number of states is not important but has to be the same for both objects (you can have identical states if wished).  Two navigation buttons (Back and Forward) and a button to get back to the first slide and your homework is done.

For this video lesson you need:

• The original project, which I provided in Lesson 1. If you lost it, here is another link (dropbox)
  SlideShow
  
  
• Your project. If you are really lazy, you download my project as used in the video. Please, do not reuse the SVGs, they are created from a licensed Adobe Stock file. You can use them only for practice the video workflow.
  StartLesson2

Video

You will transfer the shared actions to your custom project, and reuse them.

After finishing the workflow, you can compare your result with 'Lesson2'

Preparation

You have read the introduction and watched the Demo project. This lesson will explain the interaction 'SlideShow' which you did see in the demo. You may download this start project, which has two slides. Exploration is explained in the video:

SlideShowStart

Video

You will be exploring the start file, discovering the shared actions in the Library, and the variables. You will attach the shared action to  a slide event (On Enter) and to button Success events, in both cases you will choose the parameter values.

The result of the completed lesson should look like you can see under this link. I left the playbar for your convenience.

SlideShowEnd

Preparing Lesson 2

Lesson 2 will show how you can transfer and use the shared actions to your project. If you want tot follow, prepare a project:

• with two slides
• second slide needs two multistate objects with the same amount of states
• second slide needs two navigation buttons (back/next) and a home button (jumping to slide 1)

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

Watch this video:

Why?

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

Merging of Audio clips (slide audio)

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

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

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

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

Copy/Paste Segment 

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

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

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

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

Library and Audio

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

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

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

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