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

    Setting background image on Flash Builder 4.5 application

    GSS1 Level 1

      Hi,

       

      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

       

       

      Thanks

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

          Hi,

          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"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx"

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

               <fx:Declarations>

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

               </fx:Declarations>

          </s:Application>

           

           

          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">

           

              <fx:Metadata>

              <![CDATA[

                  /**

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

                   */

                  [HostComponent("spark.components.Application")]

              ]]>

              </fx:Metadata>

             

            

              <s:states>

                  <s:State name="normal" />

                  <s:State name="disabled" />

                  <s:State name="normalWithControlBar" />

                  <s:State name="disabledWithControlBar" />

              </s:states>

             

              <!-- 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" />

           

          </s:Skin>

           

          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/