adding a background image in flex 4.6

Question

Doing a Flex 4.6 mobile app I am trying to add an asset .png file to be displayed as the background to the application across all the different views and orientations. Has anyone worked out a way to do this yet?

Any help would be appreciated :)

Answer 1

I've been in this hole and I know the way out.

You'll need to create a skin class for your application. It doesn't have to be too complex here's what my file (appSkin.mxml) looks like.

<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Metadata>
    [HostComponent("spark.components.View")]
</fx:Metadata>

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

<s:BitmapImage  source="@Embed('assets/bg.png')" width="100%" height="100%" />

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


<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->

Then you'll need to declare that file as your application's skinClass in your application's opening tag…

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="320"
           creationComplete="creationCompleteHandler()" xmlns:views="views.*" skinClass="skins.appSkin">

Then you'll have to do one final step. Each of your View components are carrying an opaque background layer so in each of them you'll want to explicitly set that backgroundAlpha value to 0.

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="Start" backgroundAlpha="0">

And that should accomplish your mission of maintaining a common background image for your application across multiple views.

Answer 2

Try something like this:

<s:View>
 <fx:Script>
    [Embed(source="myImage.gif")]
    public var myImage :Class;
  </fx:Script>
  <s:Image source="myImage" width="100%" height="100%"/>
</s:View>

Info about Embedding images in Flex

However, I don't expect perfect results. A PNG is a pre-rendered bitmap. Most likely it will not look right across all views and orientations [and resolutions] because elements of the PNG may be skewed, stretched, or compressed, with it is resized on the fly; for example when switching from portrait to landscape.