## Aurigma Image Uploader Flash 1.0

# Using Precompiled Themes

- Collapse All Sections
- See Also
- Language Filter ( all languages )

Image Uploader Flash, 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.

As an example, you can use the SampleTheme.swf skin included in Image Uploader Flash SDK. To change Image Uploader Flash appearance to this theme just specify the flashControl.themeUrl property with the path to this file.

### JavaScript

    var fu = $au.imageUploaderFlash({id: 'Uploader1'});

    fu.flashControl({themeUrl: 'SampleTheme.swf'});

### ASP.NET

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

### PHP

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

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

## Customizing Image Uploader Flash 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\Image Uploader Flash 1.0\Themes\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 add your images and fonts to the Resources folder. The classes in CSS file containing settings of user interface are self-documented, so it will be not so hard to understand settings of what element are stored in a particular class. As an example, we change font of the title, enlarge the Send button width, and change the List View 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 Send 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 List View 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\Image Uploader Flash 1.0\Themes\DarkSample\SampleTheme.css

   The SampleTheme.swf appears in the folder were the SampleTheme.css file resides.

4. Move the SampleTheme.swf to your web application.
5. Specify the path to this file as a value of the flashControl.themeUrl property. See code samples above.

6. Run your application and make sure that Image Uploader Flash looks like the following screenshot.

## See Also

### Reference

- flashControl.themeUrl Property

### Manual

- Image Uploader Flash User Interface
- Customizing Appearance

- ThemeUrl (ASP.NET)
- ThemeUrl (PHP)
- themeUrl (Java Script)

- ThemeUrl (ASP.NET)
- ThemeUrl (PHP)
- themeUrl (Java Script)

- ThemeUrl (ASP.NET)
- ThemeUrl (PHP)
- themeUrl (Java Script)