---
title: "Using Precompiled SWF Themes in Flash Uploader"
canonical: https://www.aurigma.com/docs/us8/using-precompiled-themes.htm
product: "Upload Suite 8"
---

# Using Precompiled SWF Themes in Flash Uploader

Supported technologies: ![Adobe Flash](https://www.aurigma.com/docs/us8/icons/flash.png)
 
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↗](http://fpdownload.adobe.com/pub/flex/sdk/builds/flex4/flex_sdk_4.1.0.16076A.zip)
 
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.themeUrl[ThemeUrl (ASP.NET)](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_FlashControl_ThemeUrl.htm.md)[ThemeUrl (PHP)](https://www.aurigma.com/docs/us8/FH_P_P_FlashControl_ThemeUrl.htm.md)[themeUrl (JavaScript)](https://www.aurigma.com/docs/us8/FH_P_J_$au_flashControl_themeUrl.htm.md) property.
```
var fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    flashControl: {themeUrl: 'SampleTheme.swf'}
}); 
``````aspx-cs
<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <FlashControl ThemeUrl="SampleTheme.swf" />
</aur:ImageUploaderFlash>
``````
<?php
    $uploader = new ImageUploaderFlash("Uploader1");
    $uploader->getFlashControl()->setThemeUrl("SampleTheme.swf");
?>
```
As the result, Flash Uploader will look like the following screenshot.
![](https://www.aurigma.com/docs/us8/DarkThemeScreenshot.png)
## 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.
 
1. Download **Flex SDK** from the location above.
2. 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.
 ```
    /* 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"); 
    }
    ```
3. 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.
4. Upload the `SampleTheme.swf` file on your website.
5. Specify a URL to this file as a value of the **flashControl.themeUrl** property. See code samples above.
6. Run your application and make sure that Flash Uploader looks like the following screenshot.
 ![](https://www.aurigma.com/docs/us8/DarkThemeModifiedScreenshot.png)

## See Also
 
### Reference
 
- flashControl.themeUrl Property[ThemeUrl (ASP.NET)](https://www.aurigma.com/docs/us8/FH_P_Aurigma_ImageUploaderFlash_FlashControl_ThemeUrl.htm.md)[ThemeUrl (PHP)](https://www.aurigma.com/docs/us8/FH_P_P_FlashControl_ThemeUrl.htm.md)[themeUrl (JavaScript)](https://www.aurigma.com/docs/us8/FH_P_J_$au_flashControl_themeUrl.htm.md)

### Manual
 
- [HTML5/Flash Uploader User Interface](https://www.aurigma.com/docs/us8/image-uploader-flash-user-interface.htm.md)
- [Customizing Appearance in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/customizing-appearance-iuf.htm.md)

### Other Resources
 
- [Flex SDK version 4.1↗](http://download.macromedia.com/pub/flex/sdk/flex_sdk_4.1.zip)