1 Reply Latest reply on Jul 12, 2011 7:06 AM by Guriya Kalyani

    Setting background image on Flash Builder 4.5 application




      I would like to set a background image on my Flash Builder 4.5 application. Does anyone know how to do this? Haven't seen an example that does this. Flex 3 made this very easy to do, but not 4.5




        • 1. Re: Setting background image on Flash Builder 4.5 application
          Guriya Kalyani


          It is possible  to do it in Flex 4.5 and a lot more using skinning.

          Say, you have a project MyFlex, in the main.mxml of it :

          Type the below :


          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"



                             minWidth="955" minHeight="600" skinClass="<cursor_pos>">


                     <!-- Place non-visual elements (e.g., services, value objects) here -->





          At the cursor pos, invoke 'code-hint' and 'Create Skin'. You get a dialog to create the skin, give the name as 'abc' and finish

          In the generated abc.mxml, you can set the background image as :


          <!--- The default skin class for the Spark Application component.


                 @see spark.components.Application


                @langversion 3.0

                @playerversion Flash 10

                @playerversion AIR 1.5

                @productversion Flex 4


          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"

                  xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">





                   * A strongly typed property that references the component to which this skin is applied.








                  <s:State name="normal" />

                  <s:State name="disabled" />

                  <s:State name="normalWithControlBar" />

                  <s:State name="disabledWithControlBar" />



              <!-- fill -->


                  A rectangle with a solid color fill that forms the background of the application.

                  The color of the fill is set to the Application's backgroundColor property.


               <s:Image source="flex-icon.png" smooth="true" left="0" right="0" top="0" bottom="0" />


                  <!--- @copy spark.components.SkinnableContainer#contentGroup -->

                  <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />




          Refer the below blog for more details. Let me know if you still face issues


          http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in- flex-gumbo/