Player Button Animation

[tass_co]

I want to make the player button animation for use it on my own skin.
Is it possible for me to do this? and how?
I would be very happy if someone could help me

GIF 9.04.2022 12-28-27.gif

files

Mini.zip

[balala]

I want to make the player button animation for use it on my own skin.
Is it possible for me to do this? and how?

Probably it is, however you should include in the frames of the trans-play-pause.png and trans-play-pause-over.png images the image of the Play button (one frame of the play-trans-normal-over.png image). This way would be possible to use Bitmap meter.
Maybe additionally you should split the above images into individual frames as well. Would be much easier to work with the individual images I think. Sorry, but my image processing skill is close to zero, so can't properly do this.

[tass_co]

Probably it is, however you should include in the frames of the trans-play-pause.png and trans-play-pause-over.png images the image of the Play button (one frame of the play-trans-normal-over.png image). This way would be possible to use Bitmap meter.
Maybe additionally you should split the above images into individual frames as well. Would be much easier to work with the individual images I think. Sorry, but my image processing skill is close to zero, so can't properly do this.

Thank you balala

I think I've done most of the work.
Play/Pause transition effects and according to the player status information, the skin status update section is left.
My brain burned out during Play/Pause transitions

I will take a break
Maybe someone will be help me for the last part

Code: Select all

[Rainmeter]
Update=25
DynamicWindowSize=1

[Variables]
Reset=1
Reset2=1
Reset3=1
Reset4=1
Reset5=1

[MeaAni01]
Measure=Calc
Formula=(MeaAni01-1+(5))%(5)*#Reset#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrOpen][!ShowMeter MtrPrevLv][!ShowMeter MtrNextLv][!ShowMeter MtrPlayLv]
DynamicVariables=1

[MeaAniClkPlay]
Measure=Calc
Formula=MeaAniClkPlay+1
IfEqualValue=6
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrPlayClick]
Disabled=1
DynamicVariables=1

[MeaAniClkPrev]
Measure=Calc
Formula=MeaAniClkPrev+1
IfEqualValue=6
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrPrevClick]
Disabled=1
DynamicVariables=1

[MeaAniClkNext]
Measure=Calc
Formula=MeaAniClkNext+1
IfEqualValue=6
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrNextClick]
Disabled=1
DynamicVariables=1

[MeaAni02a]
Measure=Calc
Formula=(MeaAni02a-1+(4))%(4)*#Reset2#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni02]
Measure=Calc
Formula=MeaAni02+(MeaAni02<3)
Disabled=1
DynamicVariables=1

[MeaAni03a]
Measure=Calc
Formula=(MeaAni03a-1+(4))%(4)*#Reset3#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni03]
Measure=Calc
Formula=MeaAni03+(MeaAni03<3)
Disabled=1
DynamicVariables=1

[MeaAni04a]
Measure=Calc
Formula=(MeaAni04a-1+(4))%(4)*#Reset4#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni04]
Measure=Calc
Formula=MeaAni04+(MeaAni04<3)
Disabled=1
DynamicVariables=1

[MtrOpen]
Meter=BitMap
MeasureName=MeaAni01
BitmapImage=openclose.png
BitmapFrames=5
BitmapExtend=1
DynamicVariables=1

[MtrPrev]
Meter=BitMap
MeasureName=MeaAni03
BitmapImage=prev.png
y=5.5
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPrev][!ShowMeter MtrPrevClick][!EnableMeasure MeaAniClkPrev]
MouseLeaveAction=[!EnableMeasure MeaAni03a][!DisableMeasure MeaAni03][!HideMeter MtrPrev][!ShowMeter MtrPrevLv]
Hidden=1
DynamicVariables=1

[MtrPrevLv]
Meter=BitMap
MeasureName=MeaAni03a
BitmapImage=prev.png
y=5.5
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni03][!DisableMeasure MeaAni03a][!HideMeter MtrPrevLv][!ShowMeter MtrPrev]
Hidden=1
DynamicVariables=1

[MtrNext]
Meter=BitMap
MeasureName=MeaAni04
BitmapImage=next.png
x=45
y=5.5
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrNext][!ShowMeter MtrNextClick][!EnableMeasure MeaAniClkNext]
MouseLeaveAction=[!EnableMeasure MeaAni04a][!DisableMeasure MeaAni04][!HideMeter MtrNext][!ShowMeter MtrNextLv]
Hidden=1
DynamicVariables=1

[MtrNextLv]
Meter=BitMap
MeasureName=MeaAni04a
BitmapImage=next.png
x=45
y=5.5
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni04][!DisableMeasure MeaAni04a][!HideMeter MtrNextLv][!ShowMeter MtrNext]
Hidden=1
DynamicVariables=1

[MtrPrevClick]
Meter=BitMap
MeasureName=MeaAniClkPrev
BitmapImage=prevclick.png
y=5.5
BitmapFrames=7
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni03][!DisableMeasure MeaAni03a][!HideMeter MtrPrevClick]
Hidden=1
DynamicVariables=1

[MtrNextClick]
Meter=BitMap
MeasureName=MeaAniClkNext
BitmapImage=nextclick.png
x=45
y=5.5
BitmapFrames=7
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni04][!DisableMeasure MeaAni04a][!HideMeter MtrNextClick]
Hidden=1
DynamicVariables=1

[MtrPlay]
Meter=BitMap
MeasureName=MeaAni02
BitmapImage=play.png
x=23
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPlay][!ShowMeter MtrPlayClick][!EnableMeasure MeaAniClkPlay]
MouseLeaveAction=[!EnableMeasure MeaAni02a][!DisableMeasure MeaAni02][!HideMeter MtrPlay][!ShowMeter MtrPlayLv]
Hidden=1
DynamicVariables=1

[MtrPause]
Meter=BitMap
MeasureName=MeaAni05
BitmapImage=pause.png
x=23
BitmapFrames=5
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPause][!ShowMeter MtrPauseClick][!EnableMeasure MeaAniClkPause]
MouseLeaveAction=[!EnableMeasure MeaAni05a][!DisableMeasure MeaAni05][!HideMeter MtrPause][!ShowMeter MtrPauseLv]
Hidden=1
DynamicVariables=1

[MtrPlayLv]
Meter=BitMap
MeasureName=MeaAni02a
BitmapImage=play.png
x=23
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni02][!DisableMeasure MeaAni02a][!HideMeter MtrPlayLv][!ShowMeter MtrPlay]
Hidden=1
DynamicVariables=1

[MtrPlayClick]
Meter=BitMap
MeasureName=MeaAniClkPlay
BitmapImage=playclick.png
x=23
BitmapFrames=7
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni02][!DisableMeasure MeaAni02a][!HideMeter MtrPlayClick]
Hidden=1
DynamicVariables=1

NewSkinTest.zip

[balala]

Play/Pause transition effects and according to the player status information,

No, it's not. There is no player status information. No NowPlaying measures, which are required in order to get the status of player. When I click the Play button, nothing happens. In fact a short blink of the button, but this is all.
If this is not the whole code, please don't truncate it.
And one more: on newer skins it is almost absolutely required to include the resources (in this case the images) used by the skin into the @Resources folder. Recommend you to do this as well.

[tass_co]

I couldn't make the play/pause transitions effects.

Switching from Pause to Play works, but switching from Play to Pause does not work.

And also Pause bitmap also does not work in Play state

EDIT:
Whenever I start making a meter I always forget about the @Resources folder

No NowPlaying measures, which are required in order to get the status of player.

First of all I wanted to do the animation part. NowPlaying plugin has been added and the meter is working now.

Code: Select all

[Rainmeter]
Update=25
DynamicWindowSize=1

[Variables]
Reset=1
Reset2=1
Reset3=1
Reset4=1
Reset5=1
Reset6=1
Status=0

[MeaMedia]
Measure=NowPlaying
PlayerName=Winamp
PlayerType=State
IfCondition=MeaMedia=0
IfTrueAction=[!ShowMeter MtrPlayLv][!Update]
IfCondition2=MeaMedia=1
IfTrueAction2=[!ShowMeter MtrPause][!Update][!Redraw]
IfCondition3=MeaMedia=2
IfTrueAction3=[!HideMeter MtrPause][!ShowMeter MtrPlayLv][!Update]
IfCondition4=MeaMedia=3
IfTrueAction4=[!ShowMeter MtrPlayLv][!Update]
DynamicVariables=1


[MeaAni01]
Measure=Calc
Formula=(MeaAni01-1+(5))%(5)*#Reset#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrOpen][!ShowMeter MtrPrevLv][!ShowMeter MtrNextLv][!ShowMeter MtrPlayLv]
DynamicVariables=1

[MeaAniClkPlay]
Measure=Calc
Formula=MeaAniClkPlay+1
IfEqualValue=12
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrPlayClick][!ShowMeter MtrPause]
Disabled=1
DynamicVariables=1

[MeaAniClkPause]
Measure=Calc
Formula=MeaAniClkPause+1
IfEqualValue=9
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrPauseClick][!ShowMeter MtrPlay]
Disabled=1
DynamicVariables=1

[MeaAniClkPrev]
Measure=Calc
Formula=MeaAniClkPrev+1
IfEqualValue=6
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrPrevClick]
Disabled=1
DynamicVariables=1

[MeaAniClkNext]
Measure=Calc
Formula=MeaAniClkNext+1
IfEqualValue=6
IfEqualAction=[!DisableMeasure #CURRENTSECTION#][!HideMeter MtrNextClick]
Disabled=1
DynamicVariables=1

[MeaAni02a]
Measure=Calc
Formula=(MeaAni02a-1+(4))%(4)*#Reset2#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni02]
Measure=Calc
Formula=MeaAni02+(MeaAni02<3)
Disabled=1
DynamicVariables=1

[MeaAni03a]
Measure=Calc
Formula=(MeaAni03a-1+(4))%(4)*#Reset3#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni03]
Measure=Calc
Formula=MeaAni03+(MeaAni03<3)
Disabled=1
DynamicVariables=1

[MeaAni04a]
Measure=Calc
Formula=(MeaAni04a-1+(4))%(4)*#Reset4#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni04]
Measure=Calc
Formula=MeaAni04+(MeaAni04<3)
Disabled=1
DynamicVariables=1

[MeaAni05a]
Measure=Calc
Formula=(MeaAni05a-1+(4))%(4)*#Reset5#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni05]
Measure=Calc
Formula=MeaAni05+(MeaAni05<3)
Disabled=1
DynamicVariables=1

[MeaAni06a]
Measure=Calc
Formula=(MeaAni06a-1+(4))%(4)*#Reset6#
IfEqualValue=0
IfEqualAction=[!DisableMeasure #CURRENTSECTION#]
Disabled=1
DynamicVariables=1

[MeaAni06]
Measure=Calc
Formula=MeaAni06+(MeaAni06<3)
Disabled=1
DynamicVariables=1

[MtrOpen]
Meter=BitMap
MeasureName=MeaAni01
BitmapImage=openclose.png
BitmapFrames=5
BitmapExtend=1
DynamicVariables=1
x=1


[MtrPrev]
Meter=BitMap
MeasureName=MeaAni03
BitmapImage=prev.png
x=1
y=5.5
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPrev][!ShowMeter MtrPrevClick][!EnableMeasure MeaAniClkPrev][!CommandMeasure "MeaMedia" "Previous"]
MouseLeaveAction=[!EnableMeasure MeaAni03a][!DisableMeasure MeaAni03][!HideMeter MtrPrev][!ShowMeter MtrPrevLv]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPrevLv]
Meter=BitMap
MeasureName=MeaAni03a
BitmapImage=prev.png
x=1
y=5.5
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni03][!DisableMeasure MeaAni03a][!HideMeter MtrPrevLv][!ShowMeter MtrPrev]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrNext]
Meter=BitMap
MeasureName=MeaAni04
BitmapImage=next.png
x=46
y=5.5
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrNext][!ShowMeter MtrNextClick][!EnableMeasure MeaAniClkNext][!CommandMeasure "MeaMedia" "Next"]
MouseLeaveAction=[!EnableMeasure MeaAni04a][!DisableMeasure MeaAni04][!HideMeter MtrNext][!ShowMeter MtrNextLv]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrNextLv]
Meter=BitMap
MeasureName=MeaAni04a
BitmapImage=next.png
x=46
y=5.5
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni04][!DisableMeasure MeaAni04a][!HideMeter MtrNextLv][!ShowMeter MtrNext]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPrevClick]
Meter=BitMap
MeasureName=MeaAniClkPrev
BitmapImage=prevclick.png
x=1
y=5.5
BitmapFrames=7
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni03][!DisableMeasure MeaAni03a][!HideMeter MtrPrevClick]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrNextClick]
Meter=BitMap
MeasureName=MeaAniClkNext
BitmapImage=nextclick.png
x=46
y=5.5
BitmapFrames=7
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni04][!DisableMeasure MeaAni04a][!HideMeter MtrNextClick]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPlay]
Meter=BitMap
MeasureName=MeaAni02
BitmapImage=play.png
x=24
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPlay][!ShowMeter MtrPlayClick][!EnableMeasure MeaAniClkPlay][!CommandMeasure "MeaMedia" "Play"]
MouseLeaveAction=[!EnableMeasure MeaAni02][!DisableMeasure MeaAni02a][!HideMeter MtrPlay][!ShowMeter MtrPlayLv]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPlayLv]
Meter=BitMap
MeasureName=MeaAni02a
BitmapImage=play.png
x=24
BitmapFrames=4
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni05a][!DisableMeasure MeaAni05][!ShowMeter MtrPlay][!HideMeter MtrPlayLv]
;MouseOverAction=[!EnableMeasure MeaAni02a][!DisableMeasure MeaAni02][!HideMeter MtrPlayLv][!ShowMeter MtrPlay]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPlayClick]
Meter=BitMap
MeasureName=MeaAniClkPlay
BitmapImage=playclick.png
x=24
BitmapFrames=12
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni05][!DisableMeasure MeaAni05a][!HideMeter MtrPlay][!HideMeter MtrPlayLv][!ShowMeter MtrPause]
;MouseOverAction=[!EnableMeasure MeaAni02][!DisableMeasure MeaAni02a][!HideMeter MtrPlayClick][!ShowMeter MtrPause]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPause]
Meter=BitMap
MeasureName=MeaAni05
BitmapImage=pause.png
x=24.5
BitmapFrames=4
BitmapExtend=1
LeftMouseDownAction=[!HideMeter MtrPause][!ShowMeter MtrPauseClick][!EnableMeasure MeaAniClkPause][!CommandMeasure "MeaMedia" "Pause"]
MouseOverAction=[!UpdateMeter MtrPause][!Redraw]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPauseLv]
Meter=BitMap
MeasureName=MeaAni05a
BitmapImage=pause.png
x=24.5
BitmapFrames=4
BitmapExtend=1
MouseLeaveAction=[!EnableMeasure MeaAni05a][!DisableMeasure MeaAni05][!HideMeter MtrPause][!HideMeter MtrPauseLv][!ShowMeter MtrPlay]
Hidden=1
DynamicVariables=1
Group=BtnP

[MtrPauseClick]
Meter=BitMap
MeasureName=MeaAniClkPause
BitmapImage=pauseclick.png
x=24.5
BitmapFrames=9
BitmapExtend=1
MouseOverAction=[!EnableMeasure MeaAni05][!DisableMeasure MeaAni05a][!HideMeter MtrPause][!HideMeter MtrPauseLv][!ShowMeter MtrPlay]
Hidden=1
DynamicVariables=1
Group=BtnP

[balala]

I couldn't make the play/pause transitions effects.

Switching from Pause to Play works, but switching from Play to Pause does not work.

And also Pause bitmap also does not work in Play state

I wouldn't do this. Recommend not to switch from one to the other, but as I said in my first reply, create the proper bitmap image, containing all needed frames. The five frames of the pause.png and the image of a play button (probably the first or last frame from the Play.png or playclick.png image). Or as said, maybe even better was to create individual images from these frames. The idea is not to have to switch between two images, but to have all needed frames either into one single bitmap or as stand-alone images.
However if you do it this way there is a problem in your code. There are two Bitmap meters, from which only one should be shown at a time ([MtrPlayLv] and [MtrPause]). But in many cases you hiding / showing one, but do nothing with the other. For instance here is the [MeaMedia] measure:

Code: Select all

[MeaMedia]
Measure=NowPlaying
PlayerName=Winamp
PlayerType=State
IfCondition=MeaMedia=0
IfTrueAction=[!ShowMeter MtrPlayLv][!Update]
IfCondition2=MeaMedia=1
IfTrueAction2=[!ShowMeter MtrPause][!Update][!Redraw]
IfCondition3=MeaMedia=2
IfTrueAction3=[!HideMeter MtrPause][!ShowMeter MtrPlayLv][!Update]
IfCondition4=MeaMedia=3
IfTrueAction4=[!ShowMeter MtrPlayLv][!Update]
DynamicVariables=1

See that only in the IOfTrueAction3 option you have used a meter to hide one and show the other ([!HideMeter MtrPause] and [!ShowMeter MtrPlayLv]). On all other IfTrueAction options you only show one or the other meter, but don1t hide the one which shouldn't be seen. Rainmeter doesn't hide those meter by itself, you have to do this with the appropriate bangs:

Code: Select all

[MeaMedia]
Measure=NowPlaying
PlayerName=Winamp
PlayerType=State
IfCondition=MeaMedia=0
IfTrueAction=[!ShowMeter MtrPlayLv][!HideMeter MtrPause][!Redraw]
IfCondition2=MeaMedia=1
IfTrueAction2=[!ShowMeter MtrPause][!ShowMeter MtrPlayLv[!Redraw]
IfCondition3=MeaMedia=2
IfTrueAction3=[!HideMeter MtrPause][!ShowMeter MtrPlayLv][!Redraw]
IfCondition4=MeaMedia=3
IfTrueAction4=[!ShowMeter MtrPlayLv][!HideMeter MtrPause][!Redraw]
DynamicVariables=1

You have to check the whole code and apply everywhere the above trick, where you have any of these !ShowMeter / !HideMeter bangs.
Note that besides adding the appropriate bangs, I replaced the [!Update] bangs with [!Redraw]. When you're showing or hiding a meter, there is no need to update the skin. A redraw is enough. And one more: it's completely useless to put the [!Update] and the [!Redraw] bangs one next to the other. When you update a skin (with the [!Update] bang) a redraw of the skin is also done. If you're using the [!Redraw] bang as well, two redraws are done, which is not a too good idea, because redrawing the skin is one of the most resource consuming operation, so should be avoided as much as possible.

[tass_co]

Ok then. I will rewrite the code. only one bitmap
I'm not good on formulas.
I dont know cutting image on calc meter.
but I will try
Thanks

[balala]

Ok then. I will rewrite the code. only one bitmap
I'm not good on formulas.

To be honest I can't really follow what is the purposes of all those Calc measures ([MeaAni01], [MeaAniClkPlay], [MeaAniClkPause], [MeaAniClkPrev], [MeaAniClkNext], [MeaAni02a]) and so on). What are you using them for?

I dont know cutting image on calc meter.

Sorry, this make no sense. What do you mean by "cutting image"? You can't generally make / execute image related operations on Calc measures. also note that those are Calc measures, not meters. A Calc meter doesn't even exist.

[tass_co]

To be honest I can't really follow what is the purposes of all those Calc measures ([MeaAni01], [MeaAniClkPlay], [MeaAniClkPause], [MeaAniClkPrev], [MeaAniClkNext], [MeaAni02a]) and so on). What are you using them for?

I used it to work layer by layer for animations (idle, over, click and leave)

Sorry, this make no sense. What do you mean by "cutting image"? You can't generally make / execute image related operations on Calc measures. also note that those are Calc measures, not meters. A Calc meter doesn't even exist.

for example, we have one bitmap. The first 4 pictures are for play, 5-9 for pause, 10-15 for reverse play animation.
In Calc meter, we can do it with a single bitmap using different formulas. i meant that

[balala]

for example, we have one bitmap. The first 4 pictures are for play, 5-9 for pause, 10-15 for reverse play animation.
In Calc meter, we can do it with a single bitmap using different formulas. i meant that

There is no such thing as Calc meter. Calc is a measure, not a meter.
So would you want to use a measure to get a value in one of the above intervals, in appropriate cases and show the corresponding frame of the bitmap? Sorry but I'm not sure I really understand your intention.