• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Custom Navigation Buttons and Determining End of Slide

New Here ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

Hi everyone,

I have created a set of custom navigation buttons for a template which I am using on a responsive design (buttons are sized, positioned and shown or not shown as appropriate for different breakpoints).

Custom Buttons 

Home, Replay Slide, Pause/Play (2 buttons with actions to hide & disable or show & enable each button), Back one slide, Forward one slide, Audio on / Mute, TOC Toggle, CC Toggle, Glossary Toggle and Resources Toggle.

All works well...When the project plays, the  pause button is enabled and displays correctly. If I click the pause button the project pauses, the pause button is hidden and disabled and the play button is shown and is enabled. If I click the play button, the project plays, the play button is hidden and disabled and the pause button is shown and is enabled. 

The issue....

What I would like is that when the project is playing and reaches the end of the last frame on each slide, the play button automatically shows and is enabled and the pause button automatically hides and is disabled.....in other words, the same functionality as you would have in an out of the box Captivate navigation bar.  

I have tried adding a button on the slide (10x10, invisible to the eye and on correct place on timeline) in top corner, hoping this would trigger Captivate to know that the project was paused when at end of last frame...no joy

I have tried using the CP system variable of cpCmndPause in a Conditional Action so that when cpCmndPause = 1, show/enable pause button and hide/disable play button...no joy

 

Has anyone been successful with doing something like this ?  All help gratefully received !!

Views

719

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

Everything in Captivate is event-based.  If you want something to happen, you have to use one of the many runtime events that are available for triggering actions.  Just placing a button on the timeline at a given point doesn't result in the button action being triggered.

In your case, have you tried using the On Slide Exit event of the slide to trigger the Advanced Action?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

Hi Rod - thanks for response.

Have tried this but still no joy (unless I am doing something wrong).

Button on timeline as shown below

Timeline

Conditional Action set on Slide Exit as shown below

Menu

Conditional Action as shown below

Action  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

Forgot to add that the Else Statement on the Conditional Action is :

  • Hide   SmartShape_PlayMenuButton
  • Disable   SmartShape_PlayMenuButton
  • Show SmartShape_PauseMenuButton
  • Enable SmartShape_PauseMenuButton
  • Continue

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

I would use the On Enter action of each slide to reset the button to its normal situation, would also have used states but that is another approach.

I am a bit puzzled by the conditional action however. You ask 'Is the slide Paused', and in that case you'll Pause it again? That doesn't seem very logical or do I miss something? Same with ELSE part: if the slide is playing, you set it to Continue? Maybe you should try to change the condition to

IF cpCmndPause is equal to 0

BTW if you want to try shared actions for toggle buttons, have a look at my blog post :1 action = 5 Toggle Buttons - Captivate blog

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

Thanks Lieve for the link to your blog...will check that out.  You're right...I dont need the Pause or Continue statements....must have been having a mad moment 🙂

Will try OnEnter and changing condition and let you know.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Aug 16, 2016 Aug 16, 2016

Copy link to clipboard

Copied

If you add eventlisteners for enterSlide and a variablevalue change you can get the last frame of every slide. The following JavaScript will do exactly what you want. On enter of every slide you can show or hide specific buttons and then within 5 frames of the end of the slide show or hide other buttons. YOu can put this in the head of the html page or in an external JS file.

var interfaceObj, eventEmitterObj, csTo;

window.addEventListener( 'moduleReadyEvent', function ( e )
{
interfaceObj = e.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

function initializeEventListeners()
{
if ( interfaceObj )
{
     if ( eventEmitterObj )
  {
         eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
   {   
    eventEmitterObj.addEventListener( 'CPAPI_SLIDEEXIT', exitSlide, false );
    setPage( e );
            });
  
   function exitSlide( e )
   {
    window.cpAPIEventEmitter.removeEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
    {
     runTimer(); }, 'cpInfoCurrentFrame'
    );        
   
    eventEmitterObj.removeEventListener( 'CPAPI_SLIDEEXIT', exitSlide, false );   
   }
  }
}
}

function setPage( e )
{

csTo = e.Data.to;
//cp.show( 'pause_btn' );
//cp.show( 'play_btn' );
  
window.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
{
  runTimer( e ); }, 'cpInfoCurrentFrame'
);
}

function runTimer()
{
if ( window.cpInfoCurrentFrame > csTo- 5 )
{
  //show or hide your elements
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 12, 2017 May 12, 2017

Copy link to clipboard

Copied

@TLCMediaDesign - Can this Javascript be run from within Captivate with the Execute Javascript action?

We're looking for the same functionality - Disabling our next button until the end of the slide, and this is the closest solution I've seen so far.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
May 15, 2017 May 15, 2017

Copy link to clipboard

Copied

The script I posted will NOT work. I'd need to do some tests to see how you could grab the last frame of the slide. The enterslide event would already have fired if you execute JS on slide enter.

I'll see what I can find and post back.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 07, 2019 Jun 07, 2019

Copy link to clipboard

Copied

Any updates on this TLCMediaDesign​?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 11, 2019 Jun 11, 2019

Copy link to clipboard

Copied

LATEST

Seems to be an impossible situation. Does it have to be JS? You did add this to an exxisting thread If you explained in a new question what you want to achieve really? There may be a simple solution.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources