March 7, 2019
YouTube-style timer in Captivate
Comments
(2)
March 7, 2019
YouTube-style timer in Captivate
Newbie 1 posts
Followers: 0 people
(2)

Does anyone have a working solution for displaying the movie duration using system variables and JavaScript? E.g. 01:15 / 03:30

  • I know that the movie duration is available in the TOC, but I don’t want the latter to be visible all the time
  • I have been able to calculate the total time of the project using the cpInfoFrameCount system variable
  • But I’m stuck with the current time. The cpInfoCurrentFrame system variable is what I need, but I can’t convert it to the mm:ss format:
    • I can display cpInfoCurrentFrame in a caption and it increments as the movie progresses. So far so good.
    • If I use a Captivate while loop for the conversion to mm:ss, the “Execute JavaScript” action is only executed once e.g. (while cpInfoCurrentFrame < cpInfoFrameCount)
    • I can’t add a JavaScript while loop for some reason as an action: it is removed when I save the action.
    • The “Expression” action is not powerful enough.

Any ideas?

2 Comments
2019-03-11 14:32:36
2019-03-11 14:32:36

Thank you, but I already had the buttons. I solved it as follows and still have to test, but for now the timer start/stops automatically and also works correctly with pause, resume, next/prev slide etc.:

In Captivate, create two user variables: totalTime and elapsedTime
Insert these variables into a Smartshape: $$elapsedTime$$ / $$totalTime$$ should be the result. Display the Smartshape for the rest of the project.
Add an external JavaScript file to your project, using the method described in https://elearning.adobe.com/2018/09/bring-use-external-javascript-library-captivate-2019/
Create the external JavaScript file and add the JavaScript below

//The following functions create the timer in the Captivate modules

//When the movie starts, see https://helpx.adobe.com/captivate/using/common-js-interface.html
window.cpAPIEventEmitter.addEventListener(“CPAPI_MOVIESTART”, calculateTotalTime());

//Calculate the total time:
// – Get the total number of frames and divide them this by 30 (30 frames per second)
// – The minutes are the total number of seconds, divided by 60 (rounded)
// – The seconds are the remainder when dividing the total number of seconds by 60 (rounded)
// – Finally: create string with ‘0’ added if necessary
function calculateTotalTime() {
numberFrames = window.cpAPIInterface.getVariableValue(“cpInfoFrameCount”);
totalSec = numberFrames / 30;
totalTimeMin = Math.floor(totalSec / 60);
totalTimeSec = Math.floor(totalSec % 60);
totalTime = str_pad_left(totalTimeMin,’0′,2)+’:’+str_pad_left(totalTimeSec,’0′,2);
window.cpAPIInterface.setVariableValue(“totalTime”, totalTime);
}
//Calculate the current time:
// – When the frame changes, get its number and divide it by 30 (30 frames per second)
// – The minutes are the number of elapsed seconds, divided by 60 (rounded)
// – The seconds are the remainder when dividing the number of elapsed seconds by 60 (rounded)
// – Finally: create string with ‘0’ added if necessary
window.cpAPIEventEmitter.addEventListener(“CPAPI_VARIABLEVALUECHANGED”, function(){
frameNumber = window.cpAPIInterface.getVariableValue(“cpInfoCurrentFrame”);
elapsedSec = frameNumber / 30;
elapsedTimeMin = Math.floor(elapsedSec / 60);
elapsedTimeSec = Math.floor(elapsedSec % 60);
elapsedTime = str_pad_left(elapsedTimeMin,’0′,2)+’:’+str_pad_left(elapsedTimeSec,’0′,2);
window.cpAPIInterface.setVariableValue(“elapsedTime”,elapsedTime);
},”cpInfoCurrentFrame”);

//Prettyprint the minutes and the seconds
//source: https://stackoverflow.com/questions/3733227/javascript-seconds-to-minutes-and-seconds#3733257
function str_pad_left(string,pad,length) {
return (new Array(length+1).join(pad)+string).slice(-length);
}

Like
2019-03-08 16:30:41
2019-03-08 16:30:41

Very old blog, example is in SWF. Another blog I have to update about using system variables to display time. I didn’t use JS at all: Display Time 

Like
Add Comment