Video like control bar for animation

Animation
1

HI
I am using Hype to create animation for e-learning iBook, so sometime may be nice to view again some part of it.
What I would like to do is to have a control bar, like the one’s appear on video clip, to control the animation, go backward… forwards and so on.
Where may I looking for implement such control?
Thank you for any help.

13
Screen Shot 2018-08-20 at 09.09.13.png1382×76 20.6 KB

2

You can control the timeline with JavaScript. This would be the most precise method. But if that's too complicated, you can simply use native Hype features to control the timeline. The trick is the "On Drag" action...

56%20AM

sunset.hypetemplate.zip (15.3 KB)

1 Like
3

Thank you vey much. I have play a bit with your suggestion and I have create the sample enclosed.
Animation Control Bar.zip (28.8 KB)

But I suppose that I need a jscript version to get one more control and flexibility, like show/hide the bar when mouse is over or not, change the button icon when clicked on them, and more even.
Have you some suggestion where may I look for such example code?

Thank you again for you support
Sergio

4

You could actually do these with timelines too. So, you could use both approaches or a mixture of two.

Hype has actions for mouseover and mouseout so you can control timelines using these actions.

Bar off screen -> Mouseover -> Bar onscreen

Button Icon -> On Mouse Click -> Change Icon -> On Mouse Click -> Change Icon Back

Example | toggleControlBar.hype.zip (28.9 KB)

Searching here on the forums would help in finding some examples of "control bars" .

Here is an example using one Hype function to toggle the background image of a rectangle (icon change)

if(element.classList.contains("play_btn")){
  hypeDocument.setElementProperty(element, "background-image", "${resourcesFolderName}/pause.png")
  element.classList.remove("play_btn");
} else {
  hypeDocument.setElementProperty(element, "background-image", "${resourcesFolderName}/play1.png")
  element.classList.add("play_btn");
}

You would set this up on a "On Mouse Click" action for whatever element you're using as a Play / Pause button.

Example | playPauseDemo.hype.zip (56.9 KB)

1 Like
5

Thank very much, I have learn a bit more :blush: