Problem:
Hello,
Is it possible to associate a movement (bounce type) following a mouse rollover on an image or an object?
Thank you!
ActivePresenter version: 9.0.7
OS: MacOS Catalina 10.15.7
Notes:
Hi,
You can use Change Object State action to create the bouncing effect as you want.
- Create 1 more state for each object/ image. In that state, the position of the object/ image is slightly higher than the original position:
- Add On Rollover and On Rollout events for each object.
On Rollover: choose the Higher state.
On Rollout: Choose Normal (Default) state.
By this way, when hovering the mouse to the targeted object, you will get the bouncing effect as you expect.
Regards,
Quynh Anh
Sorry, I have a poor command of the English language.
As with my previous post, I will rephrase my question. I would like that when the mouse rolls over an image or an object, the movement is continuous (like what Elementor offers in Wordpress). For example:
- a small up and down movement, that doesn’t stop, as if it was a bouncing ball.
- a small positive zoom and a small negative zoom, which does not stop, and the image or object becomes slightly smaller, bigger, smaller, etc.
If Image Presenter couldn’t do this, could Saola Animate?
But in this case, how does Saola Animate work, i.e. is it a separate program, independent from Active Presenter?
Or, does Saola Animate integrate into Active Presenter and thus increase the animation features of Active Presenter?
1 Like
Hi Gilles,
Please take a look at the sample I made here.
bounce.approj (1.0 MB)
I believe this workaround is closer to what you need rather than the previous way I guided.
For your information, I created another timeline then add Pulse effect and Custom Path animation (up and down) to the object in that timeline, then I will trigger this timeline later when adding On Rollover and On Rollout events. Here are details of the process:
- Add another timeline (in the sample, it is Timeline 1)
- Click on the object > Animations tab > Pulse effect.
- Right-click the animation on Timeline pane > Effect Settings > Set up like this:
-
Add Animation > Choose Custom Path.
- Customize the bouncing path by clicking 3 positions (the original position, the position the object bounce up, the position the object bounce back).
- Right-click the animation on Timeline pane > Effect Settings > Set up like this:
- Go to the Properties pane > Interactivity tab > Events - Actions > Add On Rollover and On Rollout events with actions and JavaScript like in the sample:
Create another timeline with the same settings if you want to add the bouncing effect to other object.
This is the only workaround at the moment in ActivePresenter as we do not support object animations from one state to another state yet.
Thank you for your patience.
Quynh Anh
In addition, for your concern about Saola Animate, as I answered in the other thread, you can create interactive web content with Saola Animate more conveniently if you know HTML and JavaScript.
At the moment, as you have been familiar with ActivePresenter, our advice is you should try how to solve the request in ActivePresenter first. If there is no other way, you can try Saola Animate later.
Getting started with Saola Animate might first consume a lot of your time. So, you can consider trying Saola Animate whenever you are ready. I believe Saola Animate will definitely wow you with its potential.
You can also integrate ActivePresenter and Saola Animate for better experience and higher productivity. Kindly look at the blog below:
If you truly want to get to know Saola Animate, we have our Tutorials site here:
Hope they help.
Best,
Quynh Anh
Thank you, I understood thanks to you how to do this. But then I have another question. How to make, when the mouse leaves the object, so that the object returns to its initial size?
As you can see in the On Rollout action in the sample, we have added a JavaScript so when the mouse leaves the object, it returns to its original size:
You just need to click on the line to see the full script, copy and paste it, then replace the object name (Freeform_7) to apply this same script to other objects.
BR,
Quynh Anh
Wow… Perfect! It works perfectly! Thank you very much!
One more question if it’s not too much: is it possible to copy these timelines that have just been created on the other slides, or is it mandatory to do it again on each slide?
Hi Gilles,
I’m afraid you have to repeat the process to apply to other objects.
You can not copy the timeline as each timeline includes various objects.
You can only copy or use batch operations with objects on the canvas, not with timelines.
(Use Batch Operations to Insert and Delete Objects in Multiple Slides)
Therefore, I understand it might take time but it’s the only workaround in ActivePresenter at the moment.
Thank you for your patience.
BR,
Quynh Anh
One last question.
In my navigation interface, I use icons, which in their “normal” state have an opacity of 120. In their “rollover” state, their opacity is maximum (equal to 255). When I also associate a “Pulse” animation, here is what happens when I move the mouse over the icon:
Immediately, the icon has its opacity increased to 255, then when it pulses, its opacity decreases to 120 when its diameter is enlarged, then when the icon recovers its initial size, its opacity is 255 again. And so on.
How can we make sure that when the rollover is done, the icon continues to have an opacity of 255 and keeps this opacity of 255 as long as the icon is pulsing and the mouse is over the icon?
Translated with DeepL Translate: The world's most accurate translator (free version)
Hi Gilloo,
As you know, the Pulse animation makes the object change its shape and opacity.
For this reason, it is not possible to make the object always have an opacity of 255 while pulsing.
But, you can consider adding a new object state with a larger size. Then, when hovering the mouse over the object, the original state turns into a new one.
It meets a part of your needs. For easy understanding, I also attach a sample project here:
change-object-states.approj (276 KB)
Hope that it helps.
Thuy
You have created this file with Active Presenter 9.1.0 and this version is not yet available for download. So I can’t open your file.
Oh, sorry. It was my mistake, @Gilloo
Here is the project created with ActivePresenter 9.0.7 for you:
change-object-states.approj (280 KB)
Thuy