It is currently April 12th, 2021, 2:49 am

Help with adding SoundFile & Start Animation

Help with creating, editing & fixing problems with skins
User avatar
Aethaerx
Posts: 8
Joined: March 24th, 2021, 9:48 pm

Help with adding SoundFile & Start Animation

Post by Aethaerx »

Hi all,

I've tried a few different things from the documentation and I'm a bit stuck on how to do a few things listed below.
  • I'm trying to add a START ANIMATION that only runs once the skin is loaded and that is it. I have created a folder with all the .png files and added code to the .ini file but the animation plays in a loop. How do I get it to only play once at launch and stop at launching the skins background?
  • I'm trying to add a start up sound that goes along with the animation as well. I have created a folder with the .wav file but I'm unsure how to add the sound properly so that it plays only once and only when the skin is loaded (so along with the animation.) I have added the SoundFile to the variables section but am unsure where to go from there.
  • Say I have a second animation and this animation I want to start in a continuous loop after the person clicks a button and only stops if the person clicks the same button again. Is that possible? I'm assuming that would be a MouseUp/Down action of some sort?
  • Finally, say I want an animated button so when the user hovers their mouse over a static image button it turns into a blinking, animated button for as long as the MouseHover is there. Then upon clicking on the button it performs an action. Is that possible as well?

Code: Select all

[Rainmeter]
Update=100

[Variables]
SoundFile=#@#Sounds\wings.wav

[ImageNumberCalc]
Measure=Calc
Formula=Counter % 154

[ImageMeter]
Meter=Image
ImageName=#@#Images\Launch\LoadingImage-[ImageNumberCalc].png
AntiAlias=1
DynamicVariables=1
Any help would be greatly appreciated. I'm trying to design a complex audio player by converting what was once a popular WMP skin into a universal Rainmeter skin for people to still enjoy today- basically recreating it from the ground up using Rainmeter. I'm new to all this so I appreciate the support :)
User avatar
balala
Rainmeter Sage
Posts: 12543
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with adding SoundFile & Start Animation

Post by balala »

Aethaerx wrote: March 29th, 2021, 6:53 pm
  • I'm trying to add a START ANIMATION that only runs once the skin is loaded and that is it. I have created a folder with all the .png files and added code to the .ini file but the animation plays in a loop. How do I get it to only play once at launch.
Replace the [ImageNumberCalc] measure with the following one:

Code: Select all

[ImageNumberCalc]
Measure=Calc
Formula=( ImageNumberCalc + 1 )
IfCondition=(#CURRENTSECTION#>=153)
IfTrueAction=[!PauseMeasure "#CURRENTSECTION#"]
Note the value I used on the IfCondition option (153). If needed replace it with the appropriate value. I supposed there are 154 frames, counted by 0 to 153, that's why I added 153 here. If there are more or less frames, modify the value accordingly.
Aethaerx wrote: March 29th, 2021, 6:53 pm
  • I'm trying to add a start up sound that goes along with the animation as well. I have created a folder with the .wav file but I'm unsure how to add the sound properly so that it plays only once and only when the skin is loaded (so along with the animation.) I have added the SoundFile to the variables section but am unsure where to go from there.
There are more possibilities. I probably would add the following OnRefreshAction option to the [Rainmeter] section: OnRefreshAction=[Play "#SoundFile#"]. This option is executed only once, when you activate / refresh the skin.
Aethaerx wrote: March 29th, 2021, 6:53 pm
  • Say I have a second animation and this animation I want to start in a continuous loop after the person clicks a button and only stops if the person clicks the same button again. Is that possible? I'm assuming that would be a MouseUp/Down action of some sort?
Add a NumFrames2ndAnim variable to the [Variables] section, in which you store the number of frames of the second animation (for instance I added this to the [Variables] section: NumFrames2ndAnim=50, supposing there are 50 frames in the second animation).
Add the following measure to the code:

Code: Select all

[MeasureSecondAnimation]
Measure=Calc
Formula=(( MeasureSecondAnimation + 1 ) % #NumFrames2ndAnim# )
Paused=1
Use the above measure into the new (second) animation. For example the second animation will look this way:

Code: Select all

[ImageMeterOf2ndAnimation]
Meter=Image
ImageName=#@#Images\Launch\LoadingImage-[MeasureSecondAnimation].png
X=0r
Y=10R
AntiAlias=1
DynamicVariables=1
Don't forget to adjust the value of the NumFrames2ndAnim variable and the values of the above X and Y option. I used arbitrary values.
Finally use the following LeftMouseUpAction option on the button (which can be an Image meter, or a Button meter, but in this second case, you can replace the LeftMousrupAction option with a ButtonCommand option; see the differences between them here): LeftMouseUpAction=[!TogglePauseMeasure "MeasureSecondAnimation"].
With the above solution, you get this second animation paused on the refresh / activation of skin, get it started on click and get it paused on the next click. The pause happens immediately when you click, no matter where the animation is. If needed, the above code can be modified ina way to get the pause only when the animation reaches the last frame. Is it needed?
Aethaerx wrote: March 29th, 2021, 6:53 pm
  • Finally, say I want an animated button so when the user hovers their mouse over a static image button it turns into a blinking, animated button for as long as the MouseHover is there. Then upon clicking on the button it performs an action. Is that possible as well?
Yep, it definitely is, but in this case the button must be an Image meter (see the above description, about the possibility to use a Button meter instead).
For instance add the following new measure to the code:

Code: Select all

[MeasureBlinking]
Measure=Calc
Formula=(( MeasureBlinking + 1 ) % 2 )
Disabled=1
UpdateDivider=10
Note the UpdateDivider=10 option, which I added to get one update of the measure per second (corelated with the Update=100 option, used into the [Rainmeter] section).
Add the following options to the button:

Code: Select all

[MeterButton]
...

ImageAlpha=(1+254*(1-[MeasureBlinking]))
...
MouseOverAction=[!EnableMeasure "MeasureBlinking"]
MouseLeaveAction=[!DisableMeasure "MeasureBlinking"]
DynamicVariables=1
User avatar
Aethaerx
Posts: 8
Joined: March 24th, 2021, 9:48 pm

Re: Help with adding SoundFile & Start Animation

Post by Aethaerx »

Thank you so much for all your previous help above. I've been successfully implementing the first 2 steps you assisted me with. Before I move on to the 2nd two steps you mentioned above I had a couple extra general questions I just wanted answered before I continue my work:
  • When the loading animation stops does that last frame that remains on-screen act as the background I should be using for the app? This is a music player so the final frame in the animation is the music player "Open" for example so do I start building my buttons around that or do I need to actually code in a proper background image to load once the final animation frame has finished? If so, how would I change the animation code you provided above to end with loading a proper background image? If the final frame IS the background image I work with for the media player then nevermind.
  • Since I am using a loading animation how do I delay any buttons or additional "material" from loading until the loading animation is either complete and stays at the final frame which is my background image (or until the loading animation ends and loads a background image).
User avatar
balala
Rainmeter Sage
Posts: 12543
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with adding SoundFile & Start Animation

Post by balala »

Aethaerx wrote: March 30th, 2021, 8:38 pm
  • When the loading animation stops does that last frame that remains on-screen act as the background I should be using for the app?
I suppose not exactly, because it is an ordinary Image meter, but it can be used as a background. Doubt there would be any impediment.
Aethaerx wrote: March 30th, 2021, 8:38 pm This is a music player so the final frame in the animation is the music player "Open" for example so do I start building my buttons around that or do I need to actually code in a proper background image to load once the final animation frame has finished? If so, how would I change the animation code you provided above to end with loading a proper background image? If the final frame IS the background image I work with for the media player then nevermind.[/list]
I'm not sure I entirely follow, but I probably would add some hidden buttons (might be either Button meters or Image meters), then after finishing the animation, would reveal them.
Aethaerx wrote: March 30th, 2021, 8:38 pm
  • Since I am using a loading animation how do I delay any buttons or additional "material" from loading until the loading animation is either complete and stays at the final frame which is my background image (or until the loading animation ends and loads a background image).
First add a Hidden=1 option to all meters which have to be hidden at the beginning. Then add [!ShowMeter "Buttons"] bangs (one such bang for each meter) to the IfTrueAction option of the [ImageNumberCalc] measure (besides the already used [!PauseMeasure "#CURRENTSECTION#"] bang). Alternatively a meter group might be created, containing all those meters, then a simple !ShowMeterGroup bang could be used instead of the individual !ShowMeter bangs.

The best would be you to pack the whole config and upload the package here. This way we'd have all needed files, to can test and give you better advices, because now I can say only generalities, not having the files. Depending on the details, there might be many differences.
User avatar
Aethaerx
Posts: 8
Joined: March 24th, 2021, 9:48 pm

Re: Help with adding SoundFile & Start Animation

Post by Aethaerx »

Hi,

The google drive link to the zip file is below. It was too large to attach here. The Player-Background.png is in the @Resources/Images folder. As a follow up to my last post, I want to make sure when the animation stops this player background is what is showing. I want to make sure I am doing it correctly in the .ini file. After this is done I'll proceed to start adding the buttons with the delay to show up only when the background loads after the launch animation ends.

https://drive.google.com/file/d/1-4LAB7F0RqQ7quzZJZOy_X71V6tWzP9C/view?usp=sharing

Just to compare...this is what the original Windows Media Player skin looks like I'm trying to recreate in Rainmeter. (See link below) It's a .wmz file. Just double click it to open Windows Media Player and it opens with the skin active so you can see the sounds/animations and what I'm trying to achieve :)

https://drive.google.com/file/d/1-5emj7G7FeanVV6T9t1UOKMREbLaRsGy/view?usp=sharing
User avatar
balala
Rainmeter Sage
Posts: 12543
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with adding SoundFile & Start Animation

Post by balala »

Aethaerx wrote: April 6th, 2021, 4:11 pm The google drive link to the zip file is below. It was too large to attach here. The Player-Background.png is in the @Resources/Images folder. As a follow up to my last post, I want to make sure when the animation stops this player background is what is showing. I want to make sure I am doing it correctly in the .ini file. After this is done I'll proceed to start adding the buttons with the delay to show up only when the background loads after the launch animation ends.
Do you want to load this image as background, when the animation stops / ends?
If you do, add the following bangs to the IfTrueAction option of the [ImageNumberCalc] (besides the already existing bang): [!SetOption ImageMeter ImageName "#@#Images\Player-Background.png"][!SetOption ImageMeter UpdateDivider "-1"][!UpdateMeter "ImageMeter"][!Redraw]. Along with this I also would disable the [ImageNumberCalc] measure, replacing the existing [!PauseMeasure "#CURRENTSECTION#"] bang with [!DisableMeasure "#CURRENTSECTION#"]. If you set a new image to the meter at the end of animation (through the first !SetOption bang above), the meausre is not used anymore, so it can be disabled.
To add the buttons when the animation stops, as described, you can add a Hidden=1 and a Group=Buttons options to all buttons, then a [!ShowMeterGroup "Buttons"] bang to the IfTrueAction option of the [ImageNumberCalc] measure.
With both the above modifications, the IfTrueAction option of the [ImageNumberCalc] measure would look like this: IfTrueAction=[!DisableMeasure "#CURRENTSECTION#"][!SetOption ImageMeter ImageName "#@#Images\Player-Background.png"][!SetOption ImageMeter UpdateDivider "-1"][!UpdateMeter "ImageMeter"][!Redraw].
And one more comment: when the skin is loaded / refreshed, you get an ImageName: Unable to open: XXX\Rainmeter\Skins\TM - Batman Music Player\@Resources\Images\LaunchAnimation\LoadingImage-0.png (TM - Batman Music Player\TM - Batman Music Player.ini) error message in the log. This message is given by the fact that when you refresh the skin, the [ImageNumberCalc] measure for one update cycle returns 0. Accordingly the [ImageMeter] meter would want to open the appropriate LoadingImage-0.png file. But such a file doesn't exist and this leds to the error message. The solution is pretty simple: just add an image named LoadingImage-0.png to the TM - Batman Music Player\@Resources\Images\LaunchAnimation\ folder. Doesn't matter too much which file do you add, I probably would copy the LoadingImage-1.png image, renaming it to LoadingImage-0.png (so finally there would be two images with the same content: LoadingImage-0.png and LoadingImage-1.png).