ansaurus

Question

Answer 1

+1 A:

One approach: in our flex application, we have a canvas behind our primary container as in

<mx:Canvas id="bgImg" width="1280" height="800"
           backgroundImage="assets/background.jpg" />
<containers:FlashContainer id="mainContainer">
<!-- HBoxs, VBoxes and loads of other components -->
</containers:FlashContainer>

So, the other elements you're looking to add would exist within the internal container with a stationary Canvas "behind" it, which holds your image.

To get this to work in Flex 4 you need to compile with the Halo theme (instead of Spark). We use flex builder and set the following flag under the project compiler preferences.

-theme=${flexlib}/themes/Halo/halo.swc

As in the following image:

alt text

gmale 2010-07-09 14:29:42

Why would you add a Canvas just for the background instead of using a background Image on the Application tag?

www.Flextras.com 2010-07-09 14:38:39

Many thanks for this. Changed the theme to Halo. Works to an extent, But the background image has now been pushed to the right?

StuBlackett 2010-07-09 14:49:48

@Flextras: we used that format in Flex 3 because it gave us lots of control over the positioning and effects of the image. We have strict requirements on the location of the background and we also add a showEffect. So when the image loads, it fades in, which looks amazingly clean and crisp. So, overall, to answer your question using a component gave us far more control. However, as we migrate to Flex 4, we're considering revising this approach to use Spark skins. However, that approach is not as simple as it should be.

gmale 2010-07-09 14:54:16

@StuBlackett: that behavior is a function of your particular MXML document. What layout does your "parent" container have? We use the **layout="absolute"**property in our Application so when that background canvas is added, it is positioned at 0,0 and to move it, we set it's *x* and *y* properties.

gmale 2010-07-09 14:58:32

@gmale where am I to set this layout="absolute" ? Does it go at the top in the <s:Application> tag at the top?

StuBlackett 2010-07-12 10:14:39

@StuBlackett: Yes. Exactly. The application is a container whose layout can be vertical, horizontal or absolute.

gmale 2010-07-13 10:42:59

Thanks for that. I've sorted it

StuBlackett 2010-07-13 10:48:05

@StuBlackett: Note: the halo version of the Application object is mx.core.Application (that is <mx:Application> as opposed to <s:Application>, which is the Spark version)

gmale 2010-07-13 10:49:39

Answer 2

A:

In the Flex 3 Model, you can set a backgroundImage on the Application tag, which should, effectively, give your whole application a background image.

In the Flex 4 Model, you need to create a custom skin class for your Application tag. Set the skin using the skinClass style. Since s:Application extends SkinnableContainer, you should be able to use the default SkinnableContainer style as a guide for adding a background image. The default background, I believe, is just a Rect w/ a solid fill.

www.Flextras.com 2010-07-09 14:43:14

Is this also possible with XML Data?

StuBlackett 2010-07-09 14:52:31

Nothing I said relates to data at all. If your background image location is located inside an XML document; you'll have to extract it as use that source value as the backgroundImage style.

www.Flextras.com 2010-07-09 15:48:12

Since you added a clarification on your original post; I'll specify that the Image is not a container and you cannot put elements inside it. If using Absolute positioning you can put other components on top of it, though.

www.Flextras.com 2010-07-09 15:49:26

Answer 3

A:

i m still working in flex3, so i would have used backgroundImage on the application tag, and also do set backgroundSize to 100%, these 2 properties r on the application tag,

may be some help 2 u

tc

Ankur Sharma 2010-07-10 07:55:49

ansaurus

tags:

views:

answers:

Background Image in Flex

related questions