Documentation 13.11.2008

• First let's start with downloading the default skin's FLA file.
• Customization equals to modifying the default skin's FLA to your needs.
• Please read and understand the followings, it'll save you many-many time.
• Export your custom file to Flash 9 SWF, Actionscript 3 with strict mode disabled.
  

Please leave every object's (MovieClip, Button, etc.) identifier and child-parent relation intact. So you can change any object's X and Y coordinate, but if an object is in Frame 2 and is a child of Object A, then it must stay there with the same identifier.

You can change every object's size as well and you can put any graphics and child objects inside.

A step-by-step guide

Open the default skin's FLA file in the Flash design environment. Let's see the timeline.

You can place anything in Frame 1 but when the player loads the SWF file, it will immediately gotoAndStop to Frame 2. Please also leave the 2 lines of ActionScript code in Frame 1 - layer 'stop' intact, otherwise your skin file will not load from external domains.

The main stuff is in Frame 2, let's go there.

'seek and time' layer

It contains the seekbar and the time text fields. The text field 'text_elapsed' will be always left aligned, the text field 'text_full' right aligned, the 'seekbar' centered and stretched horizontally.

During resizing and stretching the player will not modify these:

• the padding between the stage's left edge and 'text_elapsed'
  
• the padding between 'seekbar', 'text_elapsed' and 'text_full'
• the padding between the stage's right edge and 'text_full'

Every object inside 'seekbar' except 'fader' must have 9-slice-scaling enabled to avoid distortion.

'buttons' layer

It contains the main control buttons. The player will preserve every padding between the buttons and the bottom edge.

The following buttons will be right aligned: 'btn_fullscr', 'btn_vol', 'volumebar', 'btn_embed', 'btn_mail', 'btn_info'. These buttons will preserve their distance to the right and bottom edges only.

The order of the buttons is not determined, you can freely reorder them.

'body' layer

This is the layer which can be 'tinted' from the JSON parameters. It can contain a simple graphic object without any identifier or if you'd like to put a button into the body layer, then it may contain another 'body' MovieClip inside, which will be the only automatically resized object.

Please enable 9-slice-scaling to avoid distortion.

The height of the 'body' layer determines the position and stretching of the video and the position of the volume bar. You can change it to any size.

'volume' layer

It contains the popping-up volume bar. You can change it to any size.

The 'bar' object inside determines the Y coordinate moving area of the 'fader' (the X will be always locked).

'panes' layer

It contains one single MovieClip, 'panes'. Inside 'panes' there are 3 sub-panes and the 'xbutton' handling the pane-close button.

The 'panes' MovieClip will be always top-right aligned, preserving every child's position inside.

You can define any width for every sub-pane, but the height is elastic: the player will always modify the last textfield's height dynamically. The padding between the last textfield and the button below it will be preserved.

'mail_pane'

It's a bit different sub-layer of the 'panes' layer because it has more features. Frame 1 of the 'mail_pane' is the mail form itself while Frame 2 is the animation frame for sending the mail.

The other difference is on the layer 'input_body' - Frame 1. The MovieClips 'email_address_body' and 'recipients_body' has 2 frames inside. The first frame is for indicating "good" input and the second frame is for "bad" input. Each "bad" input indicator frame has an animated MovieClip inside.

Objects not in any Frame

There are some important objects sitting in the Library only, they must be there.

Panes Body

It has the 'wu_panes_body' Class. This object will be shown under the panes, stretched both horizontally and vertically. It's a gradient in the default skin.

Slidebar assets/image sample

It has the 'wu_slidebar_image_sample' Class. This object is shown in the slidebar until a thumbnail is not loaded into the same place. It's size also determines how big an image in the slidebar can be. A slidebar image will be resized to fit into wu_slidebar_image_sample.width - 20 and wu_slidebar_image_sample.height - 24.

Slidebar assets/slidebar

It has the 'wu_slidebar' Class. This is the slidebar object itself.

Movietitle

When the slidebar is shown this textfield contains the movie title in big on the top left. It has the 'wu_movietitle' Class. It's X and Y coordinate will be always 10.