Customizing Flourish Player
Flourish player can only be customized (other than which songs are played etc.) through newly compiling it. In order to fully customize flourish player, you need:- swfmill and mtasc for compiling the player.
- An SVG editor such as Inkscape for changing the buttons.
- A text editor to adapt the used colors, fonts and layout.
1. Changing the Button Graphics
In order to change the buttons, edit the SVG graphics in the gfx/ directory with an SVG editor. The directory contains SVG files for the different buttons in different states. Simply add, remove or edit the shapes of these files to change the appereance of the buttons. The recommended tool for editing the svg files is Inkscape, as the original files were also created using Inkscape.
If you want to change the overall layout of the player, please refer to section 4 below.
In order for the new button graphics to take effect, you need to compile flourish player.
2. Changing Fonts and Background Color
In order to change font or background color, edit flourish-player.xml with a text editor. The first few lines contain entity declarations that can be used to change the background color or the font that is used in flourish player. In order to change any of these declarations, simply edit the text between the "", keep all other content of the line as it is.
If you want to change the font that flourish player uses, you also have to edit the variables FontBold and FontItalic in as/Config.as: If you are importing a bold font, set FontBold to true, otherwise set it to false; If you are importing an italic font, set FontItalic to true, otherwise set it to false.
The first few lines of flourish-player.xml also contain an entity declaration that controls which characters from the font file are embedded into the produced SVG file. If e.g. your playlist contains a song with the title "Liberté", you would have to add the character "é" to the entity, because it is not imported by default (The default characters are A-Z, a-z, 0-9, some punctuation and special characters and the German umlauts Ä, Ö, Ü, ä, ö, ü and the German ß).
In order for the new font and background color to take effect, you need to compile flourish player.
3. Changing Text and Progress and Volume Bar Color
In order to change the colors of the text and the volume bar, edit as/Config.as with a text editor. This file contains many options for the colors of flourish player. All colors in this file have to be given in the format 0xabcdef which is equal to the HTML color code #abcdef. In any line, edit only the part between the characters = and ; and keep the rest as it is.
The following options are present and changeable in this file:
- FontColor: Color of the fonts used for displaying current time and track title.
- FontSize: Size of the font used for displaying current time and track title.
- FontBold, FontItalic: Format of the font, has to match the properties of the imported TTF file (see section 2 above).
- BarOuterBorderColor: Color of the outer solid border of both volume and progress bar.
- BarInnerBorderColor: Color of the inner border of both volume and progress bar. In the progress bar, this is also the background color of the area visible if the song has not yet been completely downloaded.
- BarBackgroundColor: Color of the background of both progress and volume bar. In the progress bar, this color is also used to visualize the progress of downloading the audio data.
- PositionColor: Color of the position marker (The small line moving along the progress bar while playing the track).
- VolumeColor: Color of the triangle visualizing the current volume.
In order for the new colors to take effect, you need to compile flourish player.
4. Changing the Player Layout
In order to change the player layout, changes in both flourish-player.xml and as/Config.as have to be performed (again, both with a text editor).
In flourish-player.xml, the following entities affect the layout (change only the text between the ""):
- width, height: Width and height (in pixels) of the player.
- buttonPreviousX, buttonPreviousY: Position of the button "Previous".
- buttonPlayStopX, buttonPlayStopY: Position of the button "Play" resp. "Stop".
- buttonNextX, buttonNextY: Position of the button "Next". In as/Config.as, the following variables affect the layout (change only the text between = and ; in each line):
- ProgressBarX, ProgressBarY: Position of the progress bar.
- ProgressBarWidth, ProgressBarHeight: Progress bar dimensions, should be at least 20 x 6.
- VolumeBarX, VolumeBarY: Position of the volume bar.
- VolumeBarWidth, VolumeBarHeight: Volume bar dimensions, should be at least 20 x 8.
- TextTimerX, TextTimerY: Position of the timer (0:00) text field.
- TextTimerWidth, TextTimerHeight: Dimensions of the timer text field. Should be so large that all combinations N:NN where N is a digit can be displayed without clipping the last digit.
- TextTitleX, TextTitleY: Position of the title text field (where the current track name is displayed).
- TextTitleWidth, TextTitleHeight: Dimension of the title text field. The minimum dimension depends on how long your track names are.
Of course, after changing the layout, you need to compile flourish player. If you have changed the player dimension (width and height in flourish-player.xml), you also need to adapt the HTML file which embeds the player: There are two lines containing width="225" height="24". Both have to be adapted to reflect the new size, otherwise your player will be displayed distorted.
