Using Precompiled SWF Themes in Flash Uploader

Supported technologies: Adobe Flash

Flash Uploader, as other Flash applications, allows changing its appearance using a precompiled (*.swf) theme file. This file should contain CSS styles, images, and fonts required for customizing the user interface. To compile CSS to SWF use Flex SDK.

Important

You should use the Flex version 4.1 to compile your themes. Newer versions may fail. Download Flex 4.1

As an example, you can use the SampleTheme.swf skin included in Upload Suite SDK. To change Flash Uploader just set an URL to the SWF files as a value of the flashControl.themeUrlThemeUrl (ASP.NET)ThemeUrl (PHP)themeUrl (JavaScript) property.

JavaScript

var fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    flashControl: {themeUrl: 'SampleTheme.swf'}
});

ASP.NET

<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <FlashControl ThemeUrl="SampleTheme.swf" />
</aur:ImageUploaderFlash>

PHP

<?php
    $uploader = new ImageUploaderFlash("Uploader1");
    $uploader->getFlashControl()->setThemeUrl("SampleTheme.swf");
?>

As the result, Flash Uploader will look like the following screenshot.

Customizing Flash Uploader Skin

You can use SampleTheme.swf as a base to create your own skin. To do this, find SampleTheme.css in the C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\FlashUploaderThemes\DarkSample\ folder, modify styles, and then compile it to SWF using Flex SDK. The following steps demonstrate how it can be done.

Download Flex SDK from the location above.

Modify styles in SampleTheme.css and put images or fonts, used in a new look and feel, to the Resources/ folder on your website. Classes in the CSS file, which contain settings of a user interface, are self-documented. It will not be so hard to understand settings of what element are stored in a particular class. As an example, we change the title font, make the Send button bigger, and change the Upload Pane background color. See snippets of the SampleTheme.css file below; modified lines are highlighted with italic.

CSS

/* Change font of the title */			
			
.titleText
{
	color: #fff991;
	font-size: 28;
	font-weight: bold; 
	padding-left: 6;
	padding-top: 5;
	padding-bottom: -5;
}			

/* Make the Upload button wider */

.sendButton
{
	fill-alphas: 1.0, 1.0;
	fill-colors: #1f1f1f, #1f1f1f;
	border-color: #e3ce94;
	theme-color: #4f4f4f;
	
	font-family: EmbeddedThemeFont;
	font-size: 14;
	
	color: #fff991;
	text-roll-over-color: #fff991;
	
	width: 150;
	height: 27; 
}

/* Change the Upload Panel background */

.tileList
{
	internal-padding: 10;
	
	border-color: #dbdbdb;
	border-sides: "top bottom";
	border-style: solid;
	border-thickness: 1;
	
	roll-over-alpha: 0.0;
	roll-over-border-color: #b68f72;	
	
	background-color: #b68f72;
	selection-alpha: 1.0;
	selection-color: #6a635d;
	selection-border-color: #7f6629;
	selection-corner-radius: 2;
	
	background-disabled-color:#33302e;
	
	has-descr-icon: Embed("./Resources/HasDescription.png"); 
}

Compile SampleTheme.css to SWF. To do this, use the mxmlc command-line utility located at the bin/ folder of Flex SDK.
```
mxmlc "C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\FlashUploaderThemes\DarkSample\SampleTheme.css"
```
The SampleTheme.swf appears in the folder were the SampleTheme.css file resides.
Upload the SampleTheme.swf file on your website.
Specify a URL to this file as a value of the flashControl.themeUrl property. See code samples above.
Run your application and make sure that Flash Uploader looks like the following screenshot.

Using Precompiled SWF Themes in Flash Uploader

Customizing Flash Uploader Skin

See Also

Reference

Manual

Other Resources