VCASMO

Labs

Designer

Customization Guide

Visual Editor for Simple Skinning

When you watch any presentation, if it is allow embed, you can find a "Customize" link under the embed code.

Customize link

Click it will bring you to the "Visual Editor for Simple Skinning".

Visual Editor for Simple Skinning

You can config the parameter for the embed code to set up your presentation appearance and finally get the embed code. Therefore, it is the most easily way for you to skin the presentation without go through the following more low level how to do the simple skinning by edit your own code.

Simple Skinning

You can doing some simple skinning by editing the embed code for the presentation. It involves some HTML knowledge, and if you have experience in insert Flash into HTML, then it is more easy task for you to do. Simple skinning is through insert some extra parameters (Flash terms: FlashVars) to the embed code.

For example, the following is a sample embed code:

<object width="440" height="360">
    <param name="movie" value="http://www.vcasmo.com/swf/vcasmo.swf"></param>
    <param name="flashvars" value="pid=102&st=257"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowScriptAccess" value="always"></param>
    <embed src="http://www.vcasmo.com/swf/vcasmo.swf"
        flashvars="pid=102&st=257"
        allowFullScreen="true"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        width="440" height="360">
    </embed>
</object>

Look at the bolded red text, it is the "FlashVars". The format is "parameterName=value", and it is connected by "&", there are two parts of FlashVars in the embed code. For the first part within <param>, it is for Internet Explorer, the second part with in <embed>, it is for non-IE browser such as: Firefox, Safari, Opera.

(Note: if your presentation do not have subtitle, you will not see "&st257" part)

Therefore, when you adding extra parameter, you must remember editing both two part, otherwise, some of browser will not work. The following are the extra parameters you can add to:

Attribute Parameter Remark
Presentation ID pid=n n=Number. It is the unique value for loading your presentation. It is already included in embed code and you should not edit it.
Subtitle ID st=n n=Number. It is the optional value for include subtitle in the presentation. It is already included in embed code and you should not edit it.
Presentation is auto play at start autoplay=1  
Logo logoType=1 VCASMO logo in black.
  logoType=2 VCASMO logo in white.
  logoType=3 VCASMO logo with "Powered by".
  logoType=0 Remove VCASMO logo. You must pay for white label version for your presentation before adding this parameter. Otherwise, the presentation player detected it is invalid remove logo, it will auto unload the presentation.

(for white label version presentation only)
logoPath logoPath=http://www.yourdomain.com/logo.gif If you pay for white label version for your presentation, you can also replace VCASMO logo with your own. Set the logoPath value = your image file URL. Supported format: SWF (Flash 8 or below), Gif (non-animated), JPG and PNG. Note: If you use your own logo, you do not need to add logoType=0 in the FlashVars, because your logo is automatic replaced VCASMO logo.

(for white label version presentation only)
logoOffsetY logoOffsetY=n n=Number. Customize logo will be placed at the bottom of the player, so if you want to set the margin bottom, you should add this parameter. e.g. logo is upper from bottom 10px: logoOffsetY=10


(for white label version presentation only)
Chromeless player, remove border noborder=1 Remove the border of presentation player. Demo
Remove the controller bar nocontrols=1 Remove the controller bar of the presentation player. Demo
Customize Border border=http://www.yourdomain.com/border.gif You can design own border and upload to your server, point the border file by adding border=file path. Supported format: SWF (Flash 8 or below), Gif (non-animated), JPG and PNG. Please note that the border image will auto resize to fit the size of presentation. So to avoid distortion, you should design the border image same size as the embedded presentation size. You can also consider to use Flash with slice-9 technique to create your border, but you have to detect screen resize event for resize your slice-9 movie clip by yourself (sample FLA) Demo

When you design the border, please be minded the position of video, slide, controller bar and vcasmo logo, in order avoid cover any important design element of the border image. (sample PSD file) Demo
Advanced skinning file configfile=http://www.yourdomain.com/skin.xml Please refer the next section about Advanced Skinning

Example - customize border and autoplay:

<object width="440" height="360">
    <param name="movie" value="http://www.vcasmo.com/swf/vcasmo.swf"></param>
    <param name="flashvars" value="pid=102&st=257&autoplay=1&border=http://www.yourdomain.com/border.gif"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowScriptAccess" value="always"></param>
    <embed src="http://www.vcasmo.com/swf/vcasmo.swf"
        flashvars="pid=102&st=257&autoplay=1&border=http://www.yourdomain.com/border.gif"
        allowFullScreen="true"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        width="440" height="360">
    </embed>
</object>

 

If you are using SWFObject to insert the presentation, you can use so.addVariable('parameterName', 'value'); for one parameter line by line. ("so" is the instance name of SWFObject, so you may use different instance name, be careful)

Advanced Skinning

Download advanced skinning sample

You can open the XML file as reference to understand how to construct an advanced skinning. You have to upload the XML file with the skin files into your server under the same folder. You should upload the crossdomain.xml included the zip file to the same folder, too. To tell the presentation player to use customize skin, add parameter:

configfile=http://www.yourdomain.com/skin.xml
to the embed code. Then the presentation player will use your own customize skin.

(Note: Flash Player has cross-domain data loading security restriction. crossdomaim.xml is a file allow presentation player located at VCASMO.com to load your skin XML file in your server. If you have already deployed own crossdomain.xml, you can no need to upload extra crossdomain.xml to the folder when skin files located. You can just add vcasmo.com to your crossdomain.xml. For example:

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.adobe.com/xml/schemas/PolicyFile.xsd">
    <allow-access-from domain="*.yourotherdomain.com" />
    <allow-access-from domain="*.vcasmo.com" />
    <site-control permitted-cross-domain-policies="master-only"/>
</cross-domain-policy>

More detail about skin XML file is coming soon...

Offline Version Skinning (Static Web File)

Offline version will default load skin.xml in the same folder where the offline files located. Therefore, if you want to skin the offline version. You can following the above skinning guide. Just you must name skin XML file as skin.xml and upload the XML file with the skin files to the same folder where offline version located. Note: Offline static web file version using SWFObject to embed the presentation player, so for adding extra parameter to config the player. You have to use SWFObject syntax.

Note: since the presentation player Flash file and skin XML file are located under same domain, no crossdomain.xml is needed.

Offline Version Skinning (Standalone Executable)

You can only using advanced skinning to skin offline version which is for local standalone executable or CD/DVD. The player will default load skin.xml and skin files in the same folder where the offline files located.

Official Skinning Service

We provide commercial skinning service to our users. If you want to know more detail and pricing. You can contact us.