It is currently November 29th, 2020, 7:31 pm

Animation on hover.

Help with creating, editing & fixing problems with skins
AMouldyLemon
Posts: 7
Joined: July 29th, 2015, 6:59 pm

Animation on hover.

Post by AMouldyLemon »

Hi,
I have tried using two different methods posted around the web but both do not work how I need them too. (http://rainmeter.net/forum/viewtopic.php?f=5&t=8388, http://docs.rainmeter.net/tips/animated-gif-files)
Basically, I need the image to be stationary when not hovered over and then an animation to play when hovered over.

This is the starting image:

I want the image to be animated to start "glowing" and end on this image:
(Don't mock my photoshop skills. :twisted: )
Last edited by Brian on July 30th, 2015, 2:10 am, edited 1 time in total.
Reason: Please use [hsimg] on larger images.
User avatar
balala
Rainmeter Sage
Posts: 11827
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animation on hover.

Post by balala »

Do you have individual images? Supposing so, name them 0.png, 1.png and so on. Place them into the @Resources folder and try this code:

Code: Select all

[Rainmeter]
Update=1000

[MeasureNumberCalc]
Measure=Calc
Formula=(( MeasureNumberCalc + 1 ) % 6 )
Paused=1

[MeterBG]
Meter=Image
ImageName=#@#[MeasureNumberCalc].png
X=0
Y=0
DynamicVariables=1
MouseOverAction=[!UnpauseMeasure "MeasureNumberCalc"]
MouseLeaveAction=[!PauseMeasure "MeasureNumberCalc"]
When you refresh the skin, the [MeasureNumberCalc] measure is paused. When you're hovering the mouse over the image, the measure is unpaused and the animation will start. When you're leaving the image, the measure is paused once again and the animation stops. This case the animation will stop where it is, not necesary at the last image.
Another possibility would be to replace the Paused=1 option onto the [MeasureNumberCalc] measure, with this one: Disabled=1 and modify the MouseOverAction and MouseLeaveAction options of the [MeterBG] meter to these:

Code: Select all

[MeterBG]
...
MouseOverAction=[!EnableMeasure "MeasureNumberCalc"]
MouseLeaveAction=[!DisableMeasure "MeasureNumberCalc"]
This time when you're hovering the mouse over the image, the animation will start from the begining, but when you're leaving it, no matter where the animation is, always will jump to the first image.
A third method would run the once started animation until its end, no matter when you leave the image:

Code: Select all

[MeasureNumberCalc]
Measure=Calc
Formula=(( MeasureNumberCalc + 1 ) % 6 )
IfCondition=(MeasureNumberCalc=0)
IfTrueAction=[!PauseMeasure "MeasureNumberCalc"]
Paused=1

[MeterBG]
Meter=Image
ImageName=#@#[MeasureNumberCalc].png
X=0
Y=0
DynamicVariables=1
MouseOverAction=[!UnpauseMeasure "MeasureNumberCalc"]
See that when you hover the mouse over the image, the animation is started and it'll be paused just when it reaches 0.
All these animations work with 6 images, named 0.png, 1.png, ... 5.png. If you have a different number of images (and I suppose you have), replace the number 6 on the Formula of [MeasureNumberCalc] measure with the proper number. Be careful to have the images named as I described (numbers from 0 and png format). If you have any other format (eg jpg), replace the .png with the needed extension (.jpg), on the ImageName option of the [MeterBG] meter.
AMouldyLemon
Posts: 7
Joined: July 29th, 2015, 6:59 pm

Re: Animation on hover.

Post by AMouldyLemon »

Thank you for your response, I tried using your first method which I believe is most suitable for me and have ran into a problem. The skin doesn't load at all. I have made the @Resources folder and have named the images appropriately and also changed the formula's division to 12.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4192
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Animation on hover.

Post by eclectic-tech »

AMouldyLemon wrote:Thank you for your response, I tried using your first method which I believe is most suitable for me and have ran into a problem. The skin doesn't load at all. I have made the @Resources folder and have named the images appropriately and also changed the formula's division to 12.
Did you Refresh All?

If you are still having problems, can you post your code between tags?
AMouldyLemon
Posts: 7
Joined: July 29th, 2015, 6:59 pm

Re: Animation on hover.

Post by AMouldyLemon »

I did refresh. I have done everything correct outside of the code, I can't determine what is wrong.

Code: Select all

[Rainmeter]
Update=1000

[MeasureNumberCalc]
Measure=Calc
Formula=(( MeasureNumberCalc + 1 ) % 12 )
Paused=1

[MeterBG]
Meter=Image
ImageName=#@#[MeasureNumberCalc].png
X=0
Y=0
DynamicVariables=1
MouseOverAction=[!UnpauseMeasure "MeasureNumberCalc"]
MouseLeaveAction=[!PauseMeasure "MeasureNumberCalc"]
User avatar
eclectic-tech
Rainmeter Sage
Posts: 4192
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Animation on hover.

Post by eclectic-tech »

That code looks fine. And it works on my system exactly as described. For some reason the skin cannot find your images...

One problem would be the images you have are NOT in the ".png" format...
What is the extension on your images, are they ".jpg" or ".bmp" perhaps?

If so, just change the end extension type on the ImageName=#@#... line from .png to your image type.

EDIT: The images must be in the "@Resources" folder of the skin containing this code, and they must be named "0.png" through "12.png" (or the corrected extension type).
AMouldyLemon
Posts: 7
Joined: July 29th, 2015, 6:59 pm

Re: Animation on hover.

Post by AMouldyLemon »

I have exactly 12 images all with the .png extension and are named correctly as you can see.
Image
EDIT:
Could the images be too big at 1024x1024?
User avatar
balala
Rainmeter Sage
Posts: 11827
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animation on hover.

Post by balala »

The problem is the location of the @Resources folder: move it into the root folder of the skin (in your case into the Icons folder). So, the path of the @Resources folder should be: My Documents\Rainmeter\Skins\Icons\@Resources.
The size of the images is not a problem.
AMouldyLemon
Posts: 7
Joined: July 29th, 2015, 6:59 pm

Re: Animation on hover.

Post by AMouldyLemon »

Okay thanks, it works now but how do I decrease the time of the animation? It's way too slow as it is.

EDIT:
Is it possible to have the animation run until the starting image no matter where the mouse is? For example: Hover over the image then the animation starts, leave the image mid way and the animation will continue until it reaches 0.png again.
User avatar
balala
Rainmeter Sage
Posts: 11827
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animation on hover.

Post by balala »

AMouldyLemon wrote:Okay thanks, it works now but how do I decrease the time of the animation? It's way too slow as it is.
Decrease the Update value in the [Rainmeter] section. Be careful, beacuse when you reduce it, the CPU usage will increase, so you have to find a good value, depending on your hardware configuration and the loaded skin/skins.
AMouldyLemon wrote:Is it possible to have the animation run until the starting image no matter where the mouse is? For example: Hover over the image then the animation starts, leave the image mid way and the animation will continue until it reaches 0.png again.
See the third method on my first reply.