Question

I am developing a web app using Flash Builder. A graphic designer came up with some designs for the app but I have never converted a photoshop document into a Flex skin or for that matter made a custom Flex skin by any means. Is it possible to take the photoshop work and put it into Flash or something? What exactly goes into Flex skins?

If I were to contact this out, how much am I looking to spend on a 8 page app?

Answer 1

In case anyone ever comes across the same issue, I found that creating a new mxml skin class will allow you to set a .jpg or .gif and set the background of a component using something like this:

Skin Class:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:s="library://ns.adobe.com/flex/spark">

  <fx:Metadata>
      [HostComponent("spark.components.Application")]
  </fx:Metadata> 

  <s:states>
      <s:State name="normal" />
      <s:State name="disabled" />
  </s:states>

<!-- This image fill also specifies padding around it -->
  <s:Rect id="backgroundRect" left="100" right="100" top="20" bottom="20">
      <s:fill>
          <s:BitmapFill source="@Embed('assets/wood-bg.png')"/>
      </s:fill>
  </s:Rect>    

  <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:SparkSkin>

MXML Component:

<s:VGroup horizontalCenter="0" verticalCenter="0">
    <s:Label text="Wood Sales Int'l" fontSize="42" />
    <s:BorderContainer borderColor="0x000000" borderWeight="3" cornerRadius="7" horizontalCenter="0" verticalCenter="0">
        <s:VGroup>
            <mx:Form fontSize="16">
                <mx:FormItem label="Userid:">
                    <s:TextInput id="userid"/>
                </mx:FormItem>
                <mx:FormItem label="Password:">
                    <s:TextInput id="pw"/>
                </mx:FormItem>
                <mx:FormItem>
                    <s:Button label="Login"/>
                </mx:FormItem>
            </mx:Form>
        </s:VGroup>
    </s:BorderContainer>
</s:VGroup>