skin in progress : Navaga
Posted: 09 Jan 2006 15:12
Hello everyone.
I am working on several skins but I am focussing on this one because I like the design. I'll be frank, the design is based on a Portable GPS devices by Novogo.
But I didn't want to reuse their screenshots so I completely reproduced the design. Among other things, I changed the metal part (on the right) to fit my needs, same for the LCD screen.
At the moment, the skin is not finished, some buttons need to be done, so the playlist and video windows (I temporary took the itunes and default skins' ones). It's still a beta version but I wanted to share ideas with you. I would be pleased to receive all comments (bad or good ones).
Things left to do:
- min, close, prefs, mode buttons
- mute button
- the button to change the color of the whole skin ?
- the 2 misc animations (decoration) *
- playlist and video windows (for the moment, I took itunes and default's skins ones)
Download:
Click here then click on "Free", then scroll down and you'll see a countdown (19 seconds), wait a bit and then type the 3-letters-secret-code. Once done, the download will begin.
File size = 780 kb
------------------------------------------------------------------------------------------------------------------
Ideas :
1. Huge intro animation
* I thought of this idea :
after the skin is loaded, an "introduction" (an animation) on the LCD screen would be played : for example, a fade effect from "an empty LCD screen" to a "complete LCD screen" (filled with all buttons (elapsed time, total time, title, seekbar, volumebar and cbuttons ...). A kind of transition..
I don't think it's hard to create because it can be done with a simple button with these states :
up --> the intro animation (fade effect or else)
over --> another animation (shorter this time), with a link to the the real skin
down --> the same "link" but clicked
You can test this "huge intro animation" with the skin available above (you need to uncoment some lines in the theme.xml file to see the animation).
By the way, there is a problem with this huge intro animation. Strangely, frames in the animation "jump". I think it's the frame 15 that sucks but I checked the animation but it seems ok.
Do you think it could come from the big size of the file ? (> 265 kb) ?
2. Other misc animations
Still in this skin, I added a simple misc animation to make the skin a bit prettier.
In the metal part LCD (on the right), I thought VLC could play an animation when VLC plays a file. And that works ! Uncoment the related lines in theme.xml to see the animation.
It simply works with a checkbox and the state="vlc.isPlaying" .
This is really cool because with a simple checkbox, your skin can show an animation according to the current state.
The other idea is an animation (the same here) but with a button.
This time, with action="none" and a button you can have any kind of animation on your skin (but of course, it doesn't react with state="vlc.isPlaying", the animation just appear in loop.
------------------------------------------------------------------------------------------------------------------
What do you think of the skin ?
What do you think of these ideas ?
See you.
I am working on several skins but I am focussing on this one because I like the design. I'll be frank, the design is based on a Portable GPS devices by Novogo.
But I didn't want to reuse their screenshots so I completely reproduced the design. Among other things, I changed the metal part (on the right) to fit my needs, same for the LCD screen.
At the moment, the skin is not finished, some buttons need to be done, so the playlist and video windows (I temporary took the itunes and default skins' ones). It's still a beta version but I wanted to share ideas with you. I would be pleased to receive all comments (bad or good ones).
Things left to do:
- min, close, prefs, mode buttons
- mute button
- the button to change the color of the whole skin ?
- the 2 misc animations (decoration) *
- playlist and video windows (for the moment, I took itunes and default's skins ones)
Download:
Click here then click on "Free", then scroll down and you'll see a countdown (19 seconds), wait a bit and then type the 3-letters-secret-code. Once done, the download will begin.
File size = 780 kb
------------------------------------------------------------------------------------------------------------------
Ideas :
1. Huge intro animation
* I thought of this idea :
after the skin is loaded, an "introduction" (an animation) on the LCD screen would be played : for example, a fade effect from "an empty LCD screen" to a "complete LCD screen" (filled with all buttons (elapsed time, total time, title, seekbar, volumebar and cbuttons ...). A kind of transition..
I don't think it's hard to create because it can be done with a simple button with these states :
up --> the intro animation (fade effect or else)
over --> another animation (shorter this time), with a link to the the real skin
down --> the same "link" but clicked
You can test this "huge intro animation" with the skin available above (you need to uncoment some lines in the theme.xml file to see the animation).
By the way, there is a problem with this huge intro animation. Strangely, frames in the animation "jump". I think it's the frame 15 that sucks but I checked the animation but it seems ok.
Do you think it could come from the big size of the file ? (> 265 kb) ?
2. Other misc animations
Still in this skin, I added a simple misc animation to make the skin a bit prettier.
In the metal part LCD (on the right), I thought VLC could play an animation when VLC plays a file. And that works ! Uncoment the related lines in theme.xml to see the animation.
It simply works with a checkbox and the state="vlc.isPlaying" .
This is really cool because with a simple checkbox, your skin can show an animation according to the current state.
Code: Select all
<Bitmap id="anim-deco_01_normal" file="images/anim-deco_01_normal.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
<Bitmap id="anim-deco_01_over" file="images/anim-deco_01_over.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
<Bitmap id="anim-deco_01_down" file="images/anim-deco_01_down.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
<Bitmap id="anim-deco_02_normal" file="images/anim-deco_02_normal.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
<Bitmap id="anim-deco_02_over" file="images/anim-deco_02_over.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
<Bitmap id="anim-deco_02_down" file="images/anim-deco_02_down.png" alphacolor="#ff00ff" nbFrames="10" fps="10" />
.
.
.
<Checkbox x="288" y="52"
up1="anim-deco_01_normal"
over1="anim-deco_01_over"
down1="anim-deco_01_down"
up2="anim-deco_02_normal"
over2="anim-deco_02_over"
down2="anim-deco_02_down"
state="vlc.isPlaying"
action1="none"
action2="none"
tooltiptext1="VLC waits for a file to be played"
tooltiptext2="VLC is playing the file $N"/>
The other idea is an animation (the same here) but with a button.
This time, with action="none" and a button you can have any kind of animation on your skin (but of course, it doesn't react with state="vlc.isPlaying", the animation just appear in loop.
Code: Select all
<Bitmap id="anim-personage" file="images/normal-mode/anim-personage.png" alphacolor="#ff00ff" nbFrames="10" fps="5" />
...
<Button x="328" y="85"
up="anim-personage"
over="anim-personage"
down="anim-personage"
action="none" tooltiptext="animation" />
What do you think of the skin ?
What do you think of these ideas ?
See you.
(although the downloading process is kind of horrible)
Full debug log is 
