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. )
It is currently March 29th, 2024, 12:49 pm
Animation on hover.
-
- Posts: 7
- Joined: July 29th, 2015, 6:59 pm
Animation on hover.
Last edited by Brian on July 30th, 2015, 2:10 am, edited 1 time in total.
Reason: Please use [hsimg] on larger images.
Reason: Please use [hsimg] on larger images.
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animation on hover.
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:
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:
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:
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.
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"]
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"]
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"]
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.
-
- Posts: 7
- Joined: July 29th, 2015, 6:59 pm
Re: Animation on hover.
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.
-
- Rainmeter Sage
- Posts: 5384
- Joined: April 12th, 2012, 9:40 pm
- Location: Cedar Point, Ohio, USA
Re: Animation on hover.
Did you Refresh All?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.
If you are still having problems, can you post your code between
Code: Select all
:: My DA Gallery :: Rainmeter DA Gallery :: Rainmeter Workshops :: Rainmeter Documentation :: BBCode Guide ::
-
- Posts: 7
- Joined: July 29th, 2015, 6:59 pm
Re: Animation on hover.
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"]
-
- Rainmeter Sage
- Posts: 5384
- Joined: April 12th, 2012, 9:40 pm
- Location: Cedar Point, Ohio, USA
Re: Animation on hover.
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).
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).
:: My DA Gallery :: Rainmeter DA Gallery :: Rainmeter Workshops :: Rainmeter Documentation :: BBCode Guide ::
-
- Posts: 7
- Joined: July 29th, 2015, 6:59 pm
Re: Animation on hover.
I have exactly 12 images all with the .png extension and are named correctly as you can see.
EDIT:
Could the images be too big at 1024x1024?
EDIT:
Could the images be too big at 1024x1024?
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animation on hover.
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.
The size of the images is not a problem.
-
- Posts: 7
- Joined: July 29th, 2015, 6:59 pm
Re: Animation on hover.
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.
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.
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animation on hover.
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:Okay thanks, it works now but how do I decrease the time of the animation? It's way too slow as it is.
See the third method on my first reply.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.