size and placement of buttons on controllbar Created Nov 4, 2009

Flowplayer doesn't extend many button properties externally, so you're looking at customizing or writing your own skin for the control bar.

I haven't looked at the control SWF code in a while, but I assume it's made up of a basic FLA file, with ActionScript behind it. In most all cases you can use AS to modify movieclips, including positioning and sizing. But, some people are more comfortable doing things in the Flash IDE so they work from there. (Me, I can't stand the Flash authoring program and try to do everything I can in code.)

In the end, though, the final horizontal positioning of the buttons will involve code, as the positions change as the width of the player changes.

Be sure to read this page if you haven't already:

http://flowplayer.org/documentation/skinning/custom-skins.html

Thanks, I figured out through some trial and error how to get the buttons spaced correctly, for the most part. Here are some remaining issues that I would like to resolve, that the documentation either doesn't address directly, or that I cannot find anything on in the forum. Thanks for the help... working demo of below issues athttp://pomona.edu/dev/home/video-test.asp

1. I would like to switch placement of volume slider and time display
2. I would like to get rid of border around time display
3. I would like to get rid of scrubber playhead/dragger (perhaps just make this element have 0 opacity in flash file?)
4. Another post, but I want the entire controlbar to be 100% width with 8 pixels on left, right, and bottom margin.

Another issue which I find confusing: I had the playhead and volume progress bars set at the same exact height, yet the volume displayed so tiny that it was hardly clickable as compared to the payhead progressbar. I had to set different numbers to get them the same ratio...is there a reason for this?)

Here is SkinDefaults.as:

package {
    import flash.display.DisplayObject;

    public class SkinDefaults {

        public static function get values():Object {
            return {
                bottom: "8px", left: 8, right: 0, height: 32, width: "auto", zIndex: 2,
                backgroundColor: "#7f7f7e",
                backgroundGradient: "none",
                border: 0, borderRadius: "4px",
				
				// highlighted time text
                timeColor: "#c4e970",
                durationColor: "#000000",

                // scrubber slider background color
                // sliderColor: "#252524",
				sliderColor: "#3d3d3c",
                // gradient used in the scrubber slider background
                sliderGradient: "none",

                // volume slider background color
                volumeSliderColor: '#313130',

                // volume slider background gradient
                volumeSliderGradient: "none",

                buttonColor: "#313130",
                buttonOverColor: "#f0f3e8",
				
				// area already covered
                progressColor: "#c4e970",
                progressGradient: "none",
				
				// loaded and ready to be played
                bufferColor: "#313130",
                bufferGradient: "none",
                tooltipColor: "#f0f3e8",
                tooltipTextColor: "#474846",
                // border radius of the time display. 0 means square corners, larger values mean more rounded corners.
                timeBorderRadius: 4,
                timeBgColor: '#4a4b4c',

                // border radius of the scrubber bar
                scrubberBorderRadius: 2,

                // border radius of the volume bar
                volumeBorderRadius: 2,

                // how much the scrubber handle should take of the controlbar total height
                scrubberHeightRatio: .10,
                // how much the scrubber horizontal bar should take of the scrubber total height
                scrubberBarHeightRatio: 1,

                // how much the volume slider handle should take of the controlbar total height
                volumeSliderHeightRatio: .15,
                // how much the horizontal volume bar should take of the volume slider total height
                volumeBarHeightRatio: 1,

                // how much the time view colored box is of the total controlbar height
                timeBgHeightRatio: 0.5

            }
        }

        /** 
    * Use this to tweak how much space there is after a widget. The space is left between 
    * widgets when thay are stacked horizontally to the controlbar. You wan use widget.name 
    * to identify what widget is in question. The names of the different widgets are: 
    * "play", "stop", "next", "prev", "scrubber", "volume", "mute", and "fullscreen". 
    */ 
  	public static function getSpaceAfterWidget( 
             widget:DisplayObject, 
             widgetIsOnRightEdge:Boolean):Number { 
 
        // add some space after the time display 
        if (widget.name == "time") return 0; 
 
        	return widgetIsOnRightEdge ? 0 : 16; 
  		}	
		

        public static function getScrubberRightEdgeWidth(nextWidgetToRight:DisplayObject):Number {
            if (nextWidgetToRight && nextWidgetToRight.name == "time") return 0;
            return 0;
        }
		
		
        public static function get margins():Array {
            return [0, 8, 0, 8];
        }
    }
}

I imagine at least some of this is going to take recoding of the controlbar code, and I mean beyond the default setup code - the actual logic as you discover what does/doesn't work when doing things like scaling objects larger or smaller.

You might look for user Liam Gooding, as his company has been involved in creating custom skins for Flowplayer. Like me, he's not connected with Flowplayer, but runs an independent consultancy.

You can do anything if you get to the right code. Whether or not taking the opacity down to 0% of any control will have any effect depends on what you want, as (usually) in ActionScript the invisible control will still have a mouse event attached to it. This could lead to confusion by users. You may need to instead remove the control, remove the event, or place it completely outside the visible stage area.

Revising AS code in Flowplayer isn't going to be in any of the docs, as it assumes you're an ActionScript programmer and are willing to lose your hair in figuring out how to change things! So, for what it appears you're trying to do you're in pioneer territory.

Sharing of code/experiences is encouraged, if you have the time and inclination.

Thanks...I guess I will see what I can do about the ordering of the buttons. Any ideas on how to get rid of the border around the time background box though?

Sorry, no. Is that a movieclip defined in the FLA? If so, you could do it there.

However, it is also possible that in the controlbar code they're creating the outline dynamically with lineto statements. Check for those, and if so comment them out.

Thanks, I will look into this.

Btw, if anyone knows which particular .as file to manipulate to change the order the elements in the controlbar appear that would be great! I have glanced over everything briefly and cannot locate anything promising, especially since I am not that experience in actionscript.

This looks promising...

Open:

Controls.as

in the controlbar source.

Look for:

private function arrangeRightEdgeControls

and note he creates an array of existing controls, in right to left order.

This array is then passed to a method called 'arrangeControls' which places the controls onto the controlbar.

Do be aware that you should have a very good reason to change the order of the controls. Like many players these days, the ones in Flowplayer are based on the "YouTube UI model" (the difference being is that YT uses a vertical volume bar). YouTube is used by tens of millions of people daily, and it's what people are used to. (The ordering also makes very good sense.) Be that as it may, this is why Flowplayer is provided with source, so you can change it any way you want.

As for the border around the time indicator, the above named file appears to refer to a class named 'TimeView' which I bet would be the one you'd want to look at. Therefore, check out TimeView.as. A promising entry is a method:

private function drawBackground

with some graphics primitives you can play with. Look especially at the Flash graphics.lineStyle method. The first parameter sets the thickness of the line.

Anyway, good luck with the remainder of your project.

thanks...those worked like a charm!