User:Altglass/Skin-Designer Tutorial - Revision history

Altglass at 15:34, 25 November 2007

2007-11-25T15:34:55Z

← Older revision		Revision as of 15:34, 25 November 2007
Line 1:		Line 1:
	~~#REDIRECT~~ [http://d-gfx.kognetwork.ch/VLC/skineditor/tutorial.html]		This page has moved to [http://d-gfx.kognetwork.ch/VLC/skineditor/tutorial.html the Skin Editor's homepage]

Altglass: Replacing page with '#REDIRECT [http://d-gfx.kognetwork.ch/VLC/skineditor/tutorial.html]'

2007-11-25T15:33:40Z

Replacing page with '#REDIRECT [http://d-gfx.kognetwork.ch/VLC/skineditor/tutorial.html]'

← Older revision		Revision as of 15:33, 25 November 2007
Line 1:		Line 1:
	~~==Designing Process==~~		#REDIRECT [http://d-gfx.kognetwork.ch/VLC/skineditor/tutorial.html]


	~~First of all you have to design your skin in a graphics program like Photoshop or GIMP.~~

	~~In the designing process you should think of the following components:~~

	~~:A main window containing:~~
	~~::a play/pause button~~
	~~::a next and a previous button~~
	~~::a faster and a slower button~~
	~~::a stop button~~
	~~::a time slider~~
	~~::a volume slider~~
	~~::a mute button~~
	~~::text information about the current playback~~
	~~::other buttons with specific functions like shuffle,repeat or making other windows and dialogs visible~~
	~~:A playlist window. Either integrate this into the main window or create a separate window for it. The playlist window should contain:~~
	~~::a button to add and a button to remove items from the playlist~~
	~~::a button to export and to import playlist files~~
	~~::a button to sort the playlist alphabetically~~
	~~:An equalizer window. This might also be included into the main window or elsewhere. This window should contain:~~
	~~::A slider to control the preamplification~~
	~~::10 sliders to control the different bands (60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz, 16kHz)~~
	~~::A button to turn the equalizer on/off~~

	~~When you create your skin also consider that each control/button has three states: normal, mouseover and clicked.~~

	For example you could create a big image for each window, where the window with it's controls is shown three times. One for each status. Then it is recommended that you split up this image with slices. (Slices refer to a tool in Photoshop, I don't know how or whether at all this is possible in GIMP or other programs). Then save each slice, or subimage, as a PNG file.

	http://d-gfx.kognetwork.ch/VLC/skineditor/~~airflow_slices.png~~

	~~'''Example of how your image document could look like. The red lines indicate the slices'''~~


	~~==In the Skin Editor program==~~

	~~Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.~~
	~~Then you have to make the available in the skin by clicking on the ''Add Bitmap'' button at the bottom of the ''Resources'' window.~~
	~~Select the PNG files in the file chooser. They will be added automatically as bitmap resources and identified by their file names without the extension.~~

	~~Then create a new '''window''' by clicking on the ''Add Window'' button at the bottom of the ''Windows'' window.~~
	~~Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened.~~
	If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.

	Now you'll have to add a '''layout''' to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the up and down buttons at the bottom of the ''Windows'' window.
	You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.

	After you have added the layout it should be selected in the ''Windows'' window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.

	~~Now move on to the ''Items'' Window.~~

	~~All images making up this window but should not trigger any action are represented by "Image" items.~~
	~~Normally a layout has at least one image item that represents the window's background.~~
	~~For each slice of the window that should not have any function, click on the "Add Item" button at the bottom of the ''Items'' Window and choose '''''Image'''''.~~
	Enter any ID that you feel comfortable with, just note that IDs must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the "Items" window. The currently selected item is highlighted in the preview window by a red border.
	~~By default the ''action'' attribute of an image is set to ''move''. This enables the user to drag the window around by clicking on the image. You can disable this by selecting the action ''none''.~~

	~~Controls that do not change their appearance when a certain status changed are represented by '''Button''' items.~~
	~~You should use buttons e.g. for the controls to skip to the next/previous item in the playlist etc. For the Play/Pause button you should rather select a ''checkbox'', which are considered later on.~~

	~~Now let us consider the button's attributes:~~

	~~For the up attribute choose the bitmap resource representing the image of the buttons default state.~~
	~~For the hover attribute choose the bitmap resource representing the image of the buttons state when the mouse is over it.~~
	~~For the down attribute choose the bitmap resource representing the image of the buttons state when it is pressed.~~
	~~The action that should be fired by clicking on the button can be defined with the help of the ActionEditor which can be opened by clicking on the button next to the action-textfield.~~

	~~'''Checkboxes''' are similar to buttons only that they have two states.~~
	You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.

	~~To edit the '''skin's settings''' like author etc. choose ''Edit>Theme Information'' from the menubar.~~

	~~This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the [http://www.videolan.org/vlc/skins2-create~~.html ~~Skin2 Documentation~~]~~. There the Playtree, Video and other items are described in detail. You can ignore the XML part as all the XML work is done by the editor.~~

	When you finished your skin choose ''File>Export as VLT'' and email the generated VLT file to ''vlc at videolan dot org'' or post it in the [http://forum.videolan.org/viewforum.php?f=15 forums] so that it will be added to the skins download page.

Altglass: /* In the Skin Editor program */ mockup

2007-10-12T10:45:39Z

In the Skin Editor program: mockup

Altglass: slices example

2007-09-29T14:30:40Z

slices example

← Older revision		Revision as of 14:30, 29 September 2007
Line 29:		Line 29:
	For example you could create a big image for each window, where the window with it's controls is shown three times. One for each status. Then it is recommended that you split up this image with slices. (Slices refer to a tool in Photoshop, I don't know how or whether at all this is possible in GIMP or other programs). Then save each slice, or subimage, as a PNG file.		For example you could create a big image for each window, where the window with it's controls is shown three times. One for each status. Then it is recommended that you split up this image with slices. (Slices refer to a tool in Photoshop, I don't know how or whether at all this is possible in GIMP or other programs). Then save each slice, or subimage, as a PNG file.

	''~~TODO: Add an example PSD file, maybe~~ of the ~~Airflow skin and describe how to design a window if it should be resizable~~''		http://d-gfx.kognetwork.ch/VLC/skineditor/airflow_slices.png

			'''Example of how your image document could look like. The red lines indicate the slices'''


	==In the Skin Editor program==		==In the Skin Editor program==

Altglass: /* In the Skin Editor program */

2007-09-26T12:28:03Z

In the Skin Editor program

← Older revision		Revision as of 12:28, 26 September 2007
Line 64:		Line 64:
	You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.		You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.

	This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the Skins2 Documentation at [http://www.videolan.org/vlc/skins2-create.html]. There the Playtree, Video and other items are described in detail.		This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the Skins2 Documentation at [http://www.videolan.org/vlc/skins2-create.html]. There the Playtree, Video and other items are described in detail. You can ignore the XML part as all the XML work is done by the editor. To edit the skin's settings like author etc. choose Edit>Theme Information from the menubar.

			When you finished your skin choose File>Export as VLT and email the generated VLT file to vlc at videolan dot org or post it in the forums so that it will be added to the skins download page.

Altglass at 12:08, 26 September 2007

2007-09-26T12:08:52Z

← Older revision		Revision as of 12:08, 26 September 2007
Line 62:		Line 62:

	Checkboxes are similar to buttons only that they have two states.		Checkboxes are similar to buttons only that they have two states.
	You can choose a boolean variable from http://www.videolan.org/vlc/skins2-create.html#boolexpr to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.		You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.

			This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the Skins2 Documentation at [http://www.videolan.org/vlc/skins2-create.html]. There the Playtree, Video and other items are described in detail.

Altglass at 12:05, 26 September 2007

2007-09-26T12:05:30Z

← Older revision		Revision as of 12:05, 26 September 2007
Line 35:		Line 35:
	Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.		Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.
	Then you have to make the available in the skin by clicking on the "Add Bitmap" button at the bottom of the "Resources" window.		Then you have to make the available in the skin by clicking on the "Add Bitmap" button at the bottom of the "Resources" window.
	Select the PNG files in the file chooser. They will be added automatically and identified by their file names without the extension.		Select the PNG files in the file chooser. They will be added automatically as bitmap resources and identified by their file names without the extension.

	Then create a new window by clicking on the "Add Window" button at the bottom of the "Windows" window.		Then create a new window by clicking on the "Add Window" button at the bottom of the "Windows" window.
Line 47:		Line 47:

	Now move on to the "Items" Window.		Now move on to the "Items" Window.
	~~First of all you have to add a "Group" item. Currently VLC requires that you add the layout's items to a group instead of directly adding them to the layout.~~

	After you have selected ~~your new layout~~		All images making up this window but should not trigger any action are represented by "Image" items.
			Normally a layout has at least one image item that represents the window's background.
			For each slice of the window that should not have any function, click on the "Add Item" button at the bottom of the "Items" Window and choose "Image".
			Enter any ID that you feel comfortable with, just note that ID's must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the "Items" window. The currently selected item is highlighted in the preview window by a red border.
			By default the "action" attribute of an image is set to "move". This enables the user to drag the window around by clicking on the image. You can disable this by selecting the action "none".

			Controls that do not change their appearance when a certain status changed are represented by "Button" items.
			You should use buttons e.g. for the controls to skip to the next/previous item in the playlist etc. For the Play/Pause button you should rather select a checkbox, which are considered later on.
			For the up attribute choose the bitmap resource representing the image of the buttons default state.
			For the hover attribute choose the bitmap resource representing the image of the buttons state when the mouse is over it.
			For the down attribute choose the bitmap resource representing the image of the buttons state when it is pressed.
			The action that should be fired by clicking on the button must be chosen from the list at [http://www.videolan.org/vlc/skins2-create.html#actions]. In later versions of the Skin Editor (probably v.0.5) there will also exist an action editor.

			Checkboxes are similar to buttons only that they have two states.
			You can choose a boolean variable from http://www.videolan.org/vlc/skins2-create.html#boolexpr to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.

Altglass at 11:23, 26 September 2007

2007-09-26T11:23:05Z

← Older revision		Revision as of 11:23, 26 September 2007
Line 24:		Line 24:
	::10 sliders to control the different bands (60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz, 16kHz)		::10 sliders to control the different bands (60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz, 16kHz)
	::A button to turn the equalizer on/off		::A button to turn the equalizer on/off

			When you create your skin also consider that each control/button has three states: normal, mouseover and clicked.

			For example you could create a big image for each window, where the window with it's controls is shown three times. One for each status. Then it is recommended that you split up this image with slices. (Slices refer to a tool in Photoshop, I don't know how or whether at all this is possible in GIMP or other programs). Then save each slice, or subimage, as a PNG file.

			''TODO: Add an example PSD file, maybe of the Airflow skin and describe how to design a window if it should be resizable''

			==In the Skin Editor program==

			Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.
			Then you have to make the available in the skin by clicking on the "Add Bitmap" button at the bottom of the "Resources" window.
			Select the PNG files in the file chooser. They will be added automatically and identified by their file names without the extension.

			Then create a new window by clicking on the "Add Window" button at the bottom of the "Windows" window.
			Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened.
			If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.

			Now you'll have to add a layout to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the up and down buttons at the bottom of the "Windows" window.
			You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.

			After you have added the layout it should be selected in the "Windows" window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.

			Now move on to the "Items" Window.
			First of all you have to add a "Group" item. Currently VLC requires that you add the layout's items to a group instead of directly adding them to the layout.

			After you have selected your new layout

Altglass: Designing Process

2007-09-26T10:58:41Z

Designing Process

New page

==Designing Process==

First of all you have to design your skin in a graphics program like Photoshop or GIMP.

In the designing process you should think of the following components:

:A main window containing:
::a play/pause button
::a next and a previous button
::a faster and a slower button
::a stop button
::a time slider
::a volume slider
::a mute button
::text information about the current playback
::other buttons with specific functions like shuffle,repeat or making other windows and dialogs visible
:A playlist window. Either integrate this into the main window or create a separate window for it. The playlist window should contain:
::a button to add and a button to remove items from the playlist
::a button to export and to import playlist files
::a button to sort the playlist alphabetically
:An equalizer window. This might also be included into the main window or elsewhere. This window should contain:
::A slider to control the preamplification
::10 sliders to control the different bands (60Hz, 170Hz, 310Hz, 600Hz, 1kHz, 3kHz, 6kHz, 12kHz, 14kHz, 16kHz)
::A button to turn the equalizer on/off

← Older revision		Revision as of 10:45, 12 October 2007
Line 37:		Line 37:

	Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.		Choose to create a new skin and save it in it's own folder. Into this folder you should copy all your PNG images.
	Then you have to make the available in the skin by clicking on the "Add Bitmap" button at the bottom of the "Resources" window.		Then you have to make the available in the skin by clicking on the ''Add Bitmap'' button at the bottom of the ''Resources'' window.
	Select the PNG files in the file chooser. They will be added automatically as bitmap resources and identified by their file names without the extension.		Select the PNG files in the file chooser. They will be added automatically as bitmap resources and identified by their file names without the extension.

	Then create a new window by clicking on the "Add Window" button at the bottom of the "Windows" window.		Then create a new '''window''' by clicking on the ''Add Window'' button at the bottom of the ''Windows'' window.
	Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened.		Choose an id for the window, e.g. "Main" if it is the main window. The X and Y attributes determine where the window appears the first time the skin is opened.
	If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.		If you set drag-drop to true, files can be dropped into this window and will be added to the playlist. If play on drop is true the dropped files will be played immediately after they have been dropped into the window, otherwise the will be just added to the end of the playlist.

	Now you'll have to add a layout to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the up and down buttons at the bottom of the "Windows" window.		Now you'll have to add a '''layout''' to the window. Layouts determine different appearances of a window. For simple skins there are only needed on layout per window. Note that if you use several layouts, the last in the list will be shown the first time the skin is opened. You can modify the position of a layout in the hierarchy by selecting it an using the up and down buttons at the bottom of the ''Windows'' window.
	You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.		You'll have to choose an id for the layout, you should always select ids that represent what is displayed. Under initial width and height you have to enter the dimensions of the window when this layout is displayed. If your window is not resizable you can ignore the other attributes and leave them at -1.

	After you have added the layout it should be selected in the "Windows" window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.		After you have added the layout it should be selected in the ''Windows'' window and a preview window of your layout should have opened to the right. It should be filled with a gray/white tile pattern. This pattern symbolizes transparency, so the parts of your layout where you see this pattern will not be visible in VLC.

	Now move on to the "Items" Window.		Now move on to the ''Items'' Window.

	All images making up this window but should not trigger any action are represented by "Image" items.		All images making up this window but should not trigger any action are represented by "Image" items.
	Normally a layout has at least one image item that represents the window's background.		Normally a layout has at least one image item that represents the window's background.
	For each slice of the window that should not have any function, click on the "Add Item" button at the bottom of the "Items" Window and choose "Image".		For each slice of the window that should not have any function, click on the "Add Item" button at the bottom of the ''Items'' Window and choose '''''Image'''''.
	Enter any ID that you feel comfortable with, just note that ~~ID's~~ must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the "Items" window. The currently selected item is highlighted in the preview window by a red border.		Enter any ID that you feel comfortable with, just note that IDs must be unique. Set the image attribute to the id of the bitmap resource representing this image. Set the X and Y attributes to the position where the image should appear. After having added the image you can also move it around with the cursor if you have selected in the "Items" window. The currently selected item is highlighted in the preview window by a red border.
	By default the "action" attribute of an image is set to "move". This enables the user to drag the window around by clicking on the image. You can disable this by selecting the action "none".		By default the ''action'' attribute of an image is set to ''move''. This enables the user to drag the window around by clicking on the image. You can disable this by selecting the action ''none''.

			Controls that do not change their appearance when a certain status changed are represented by '''Button''' items.
			You should use buttons e.g. for the controls to skip to the next/previous item in the playlist etc. For the Play/Pause button you should rather select a ''checkbox'', which are considered later on.

			Now let us consider the button's attributes:

	~~Controls that do not change their appearance when a certain status changed are represented by "Button" items.~~
	~~You should use buttons e.g. for the controls to skip to the next/previous item in the playlist etc. For the Play/Pause button you should rather select a checkbox, which are considered later on.~~
	For the up attribute choose the bitmap resource representing the image of the buttons default state.		For the up attribute choose the bitmap resource representing the image of the buttons default state.
	For the hover attribute choose the bitmap resource representing the image of the buttons state when the mouse is over it.		For the hover attribute choose the bitmap resource representing the image of the buttons state when the mouse is over it.
	For the down attribute choose the bitmap resource representing the image of the buttons state when it is pressed.		For the down attribute choose the bitmap resource representing the image of the buttons state when it is pressed.
	The action that should be fired by clicking on the button ~~must~~ be ~~chosen from~~ the ~~list at [http://www.videolan.org/vlc/skins2-create.html#actions]. In later versions~~ of the ~~Skin Editor (probably v.0.5) there will also exist an~~ action ~~editor~~.		The action that should be fired by clicking on the button can be defined with the help of the ActionEditor which can be opened by clicking on the button next to the action-textfield.

	Checkboxes are similar to buttons only that they have two states.		'''Checkboxes''' are similar to buttons only that they have two states.
	You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.		You can choose a boolean variable from [http://www.videolan.org/vlc/skins2-create.html#boolexpr] to set the condition of the checkbox. You have to enter for both states, if the condition resolves to true or to false, the up,hover and down bitmap resources.

	This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the ~~Skins2 Documentation at~~ [http://www.videolan.org/vlc/skins2-create.html]. There the Playtree, Video and other items are described in detail. You can ignore the XML part as all the XML work is done by the editor~~. To edit the skin's settings like author etc. choose Edit>Theme Information from the menubar~~.		To edit the '''skin's settings''' like author etc. choose ''Edit>Theme Information'' from the menubar.

			This should be enough as a brief introduction to the usage of the skin editor. For more advanced usage view the [http://www.videolan.org/vlc/skins2-create.html Skin2 Documentation]. There the Playtree, Video and other items are described in detail. You can ignore the XML part as all the XML work is done by the editor.

	When you finished your skin choose File>Export as VLT and email the generated VLT file to vlc at videolan dot org or post it in the forums so that it will be added to the skins download page.		When you finished your skin choose ''File>Export as VLT'' and email the generated VLT file to ''vlc at videolan dot org'' or post it in the [http://forum.videolan.org/viewforum.php?f=15 forums] so that it will be added to the skins download page.