A colleague asked me recently if it is possible to build a real-time clock in Captivate. I had a hunch it is possible but wanted to verify how, if at all, this could be done. Adobe Captivate provides a number of system variables that relate to time and date.
For digital clocks, these system variables can simply be embedded in text captions. With a bit of advanced action magic, you can even account for the fact that single-digit time and date values, e.g. ‘9am’ is shown as ‘9’ and August is shown as ‘8’, do not have a leading zero, so that August (‘8′) is shown as ’08’. as shown in the example below.
Another challenge all together is building an analog clock, where the hands of the clock are moved based on the changing system variables.
I experimented with using effects, such as Rotate and RotateTo to achieve that and it works great for initially setting the clock to the current time. However, updating the clock every minute proved much more difficult and effects didn’t help with that at all. I ended up using images for each position of the minute and hour hands and advanced actions to turn them on/off based on system variables for the current minute and hour. Here is what the slide with hour and minute images looks like (I only made a few of the hour and minute images visible, otherwise it would have looked rather chaotic!)
Here is one example of a conditional action that combines AND/OR statements to check the current values for hour and minutes to show a specific image for the hour hand.
Once I had the logic for hour/minute working, I thought, “why not add a hand for the seconds as well?” I had never noticed before that while there are system variables for the current minute and hour, there is none for the current second. So, in order to provide a hand for the seconds, I needed to create a user variable that is increased every second and moved the hand accordingly. To see that ticking seconds hand is cool, but it also means that the clock may be off by as much as a minute, depending on when you enter the analog clock screen. After some testing, I decided to stick with the more accurate hour/minute clock.
Here are examples of both clock types built in Captivate. Watch them being updated in real time.
Summary: If you want to learn more about Advanced Actions (both conditional and standard actions), building a clock is a good ‘brainteaser’ project. However, while it is technically possible to build a clock in Captivate, I would suggest using Flash instead, for a much easier and more accurate implementation.
Damn that is cool, the analogue clock looks so real!
For the digital clock: the issue with minutes in versions before 6 is that only one digit will be displayed for minutes<10. I'm happy that this is solved in 6.
Thanks for pointing out that this issues is resolved in CP6. In my project, I had used conditional actions to query minutes and hours. For example, if minutes are less than 10, then show a text caption with a “0” in front of the embedded variable. One less thing to do in CP6 🙂