ActivePresenter Saola Animate Pricing Download

Move forward and back timeline while moving mouse left/right

Problem: How can I scroll forward and back trough the timeline when moving my mouse left / right (with lmb pressed) over an object?

Saola Animate version: 2.7.1

OS: W10/64

Notes:

Hi Klaas,

Timeline will scroll automatically when you drag your mouse out of its left/right edge.

Regards

There is more ways to look at my question I realize now ;-).

What i mean is when I have an object in a previewed animation in the browser with objects on the screen. When I put my mouse on an object, click with lmb and move to the right or left. Then I want to make an object e.g. turn (like a steering wheel) when moving to left/right like the user is turning the wheel. In my perception in this scenario the mousepointer moving left and right is moving the timeline left and right so the animation that is developed on the timeline takes place then.

Perhaps this behaviour can even be accomplished a lot easier in another way?

Hi Klaas,

I can understand you question now :grinning:
Saola Animate doesn’t support drag event and action to control timeline yet so you need to write your own script or use a 3rd JavaScript library to do that.
The script should handle drag event, calculate the drag distance, convert the distance to timeline timestamp, and update the timeline at that timestamp.

For demonstration purpose, I’ve prepared a sample using jQuery UI draggable:
scrub timeline.saolapack (2.9 KB)
But please be noticed that jQuery UI need to be patched to make it work on touch screens, so you should find a better lib.

Regards

Handling rotation of objects can be achieved using Cartesian coordinates to Polar coordinates if you need accuracy such as with clock hands.

However, if you simply want something non-coding, then you can use hotspots to set the rotation amount.

http://sandbox.interaktiv.co.uk/saola/rotate/ just move your mouse left or right over the wheel.

steering.saolapack (2.9 KB)

The project just uses hotspots with a mouse over event. By naming the hotspots the value of the rotation amount, each one uses the same function to set the CSS rotation value for the steering wheel.

Hi Toan, thank you for your reply. For me that is to techical for the project i’m working on.

Rgds,
Klaas

Hi Mackavi,

Thank you for this options. Yes I was looking for a simple option and not for coding and I will look into this tomorrow. I’ll let you know how it works out for me.

This is working nice! Still you need javascript for this that I’m not confortable with but I can see how you put things together.

Thanks again for the example