Animations

[Joel_G]

Hi VLan'ers!

I've recently been working on a new skin, It happens to be a retrofit of an ancient media player(pre mp3 ), and I have come unstuck with writing the animation xml, even kept to the manual. However all I get is a full view of the animation frames stacked(but correctly aligned for the first frame) checked and re-checked code as well as commenting it out. Thought it must be me, so I tried the WYSIWYG editor, which shows the red bounding box correctly, but same result when loaded by VLC.

I'm using 2.1.6 Rincewind on Ubuntu

Test piece from WYSIWYG

Code: Select all

<Theme version="2.0"><ThemeInfo name="Unnamed Theme" author="joel" email="Unknown" webpage="http://www.videolan.org/vlc/"/><!-- Created using the VLC Skin Editor 0.8.6.dev (http://www.videolan.org/vlc/skineditor.html) --> <Bitmap id="wave_Wave" file="wave/Wave.png" alphacolor="#FF00FF"/> <Bitmap id="wave_Level" file="wave/Level.png" alphacolor="#FF00FF" nbframes="10" fps="2"/> <Window id="wave" x="569" y="104"> <Layout id="Unnamed Layout #3" width="569" height="104"> <Image id="wavebg" image="wave_Wave"/> <Panel id="Unnamed Panel #5" x="83" y="9" width="300" height="70"> <Image id="Unnamed Image #8" x="250" y="51" image="wave_Level"/> </Panel> </Layout> </Window> </Theme>

I'm hoping its just a bug in Rincewind, and then I'll just update, or the Bitmat is more like getting frames for sliders(then manual would be out of date) and I can just update my code.

Any advice would be well received!!

Thanks for reading!
Joel

[Etoh]

Is this comment from 2010 helpful?

Hi,

Animated images should work fine. AFAIK, there are no limitations at all.

Maybe one common error is to give the 'height' parameter the height value of a frame.
Actually, 'height' expects the whole png height size ( i.e height_for_one_frame * nbframes ).
If you give the height of a frame, it means the first frame is divided into nbframes subframes.....

Erwan10

[Joel_G]

Thanks Etoh,

That how I understand it, Height divided by nbframes.

oddly I have just realised WYSIWYG has not defined the height or width and is using the whole file.

here is my current code snipets

Code: Select all

<Bitmap id="play.vfd.png" file="wave/playani.png" nbframes="8" fps="2" height="40" width="151" alphacolor="#000000"/>

Code: Select all

<Image id="vfd.playing" image="play.vfd.png" x="1" y="1"/>

I'm wondering if its possible to define frames like you would for sliders. I'll give that a try too.

Does any one know of a skin with animations I could try?

Joel

[Joel_G]

Just found the command

Code: Select all

vlc -I skins2 -v

[Etoh]

Thanks Etoh,

That how I understand it, Height divided by nbframes.

The quote I gave said the opposite, that one should use the height of one frame MULTIPLIED by nbframes.

[erwan10]

That how I understand it, Height divided by nbframes.

Not sure how to construe this last sentence !

Let's take an example.
Suppose your frame is a 10x10 square, you've got 20 frames and you play 2 frames per second, then you provide a 10 x 200 png image (frames stored vertically) and eventually you describe it in the following way :

<Bitmap id="play.vfd.png" file="wave/playani.png" nbframes="20" fps="2" width="10" height="200" alphacolor="#000000"/>

[Joel_G]

Yep sorry, so Height "40" of source image gets divided into "8" frames, so should end up with an animation of 5px high.

Code: Select all

<Bitmap id="player.vfd.png" file="wave/playani.png" alphacolor="#000000"> <SubBitmap id="play.vfd.png" x="0" y="0" height="40" width="151" nbframes="8" fps="2"/> </Bitmap>

Code: Select all

<Window id="wave" x="250" y="175"> <Layout id="wavelayout1" width="569" height="104" minwidth="-1" maxwidth="-1" minheight="-1" maxheight="-1"> <Panel id="wave.component" x="0" y="0" width="569" height="104"> <Image id="wave.component.background" image="wavebg.png" action="move"/> </Panel> <Panel id="wave.vfd" x="83" y="9" width="356" height="63"> <Image id="vfd.playing" image="play.vfd.png" x="1" y="1"/> </Panel> <Panel id="wave.controls.cbuttons" x="80" y="77" width="305" height="22"> <Button up="wave.cbuttons.play.up" down="wave.cbuttons.play.down" over="wave.cbuttons.play.over" action="vlc.play()" id="main.normal.cbuttons.play" x="129" y="0" tooltiptext="Play"/> <Button up="wave.cbuttons.pause.up" down="wave.cbuttons.pause.down" over="wave.cbuttons.pause.over" action="vlc.pause()" id="main.normal.cbuttons.pause" x="172" y="0" tooltiptext="Pause"/> </Panel> </Layout> </Window>

no errors when loading and I even tried deliberately miss spelling nbframes and fps, just to see if the parser would chuck a wobbly, which it did. but still end up with the whole image, not one frame at a time.

I'm gonna try my skin in another build, through virtual box.

[erwan10]

Oops ... In fact, I was referring to subbitmaps.

if you have one single png file image, let's say the aforementioned 10x200 png file, then width and height are automatically computed.
So you just have to write :
<Bitmap id="play.vfd.png" file="wave/playani.png" nbframes="20" fps="2" alphacolor="#000000"/>

if you have a huge image file in which the stack of frames is only a subset, then you need to give the exact location ( x and y parameters) and size (width and height parameter) as a subbitmap, let's say the stack of frames is located at (10,10) in the huge file, then you write it as follow :
<Bitmap id="huge.png" file="wave/huge_image.png" alphacolor="#000000">
<SubBitmap id="play.vfd.png" x="10" y="10" width="10" height="200" nbframes="20" fps="2"/>
</Bitmap>

[erwan10]

<Bitmap id="player.vfd.png" file="wave/playani.png" alphacolor="#000000">
<SubBitmap id="play.vfd.png" x="0" y="0" height="40" width="151" nbframes="8" fps="2"/>
</Bitmap>

Another mistake, id Must always be unique. I guess that is the reason why the animation doesn't start.

[Joel_G]

yeah sorry for the curve ball, I tried both, same result.

Tried skin in in another build 2.2.1 weatherwax, same result.

Odd thing is, its the same result as if I had commented out nbframes and fps, just plain big image. But it parses ok.

I really appreciate the help guys. I'll get most of the rest done so its not a mess and I can show others.

Joel

[Joel_G]

do the ids have to conform to nomenclature? like "window.group.buttons" or "any_thing.hdfggf.goes" as long as its unique?

added "er" to go sub-bitmap just for troubleshooting (was off the top of my head till I workout what I'm naming every thing going to have multiple windows and layouts, and 10x more buttons than the average skin, going to be epic! and kind of as ridiculous as the original )

[erwan10]

No nomenclature. the only prerequisite is to ensure ids are unique throughout the project.
Otherwise, from what I recall, the skin engine doesn't complain very much. At run time, a lookup will always return the first id available. Subsequent ids with the same value will just never be accessible.

Odd thing is, its the same result as if I had commented out nbframes and fps, just plain big image. But it parses ok.

Ensure the image points to the right id especially if you use the Bitmap/Subbitmap pattern. You need to point to the subbitmap id, not to the bitmap id ! Otherwise, it works as a regular bitmap without animation

[Joel_G]

Did a bit of detective work.

This works,

Code: Select all

<Button id="vfd.playing" up="play.vfd.png" x="1" y="1"/>

This Does not.

Code: Select all

<Image id="vfd.playing" image="play.vfd.png" x="1" y="1"/>

Thanks again fella's!
Joel