Renaun Erickson » Flex default bgcolor is it a color or an image?

Flex default bgcolor is it a color or an image?

July 22nd, 2006 中文

By the docs it’s covered by an image, so its a color. Let me explain what I am getting at, I was reading Ted’s post on preloaders. If you download the source and run the code from a new project in Flex Builder 2 you get a background flicker. The flicker I am talking about is the Blue-ish defualt Flex application color. I was trying to figure out how the default blue-ish color background was showing up. As I didn’t change any code from the downloaded source code.

I found this information in the livedocs.

The Application container’s style uses an image as the default background image. This image obscures any background color settings that you might make. So, to make the value of the bgcolor property display properly, you must clear the Application container’s backgroundImage style property. To do this, you can set it to the value of a space character, as the following example shows:
Application { backgroundImage: ” “; }

No it is talking about the default background color setting being obscured by an image. But what doesn’t make sense is I tried setting the style backgroundImage: ” “; as stated above and it does not do anything.

What I had to do to get rid of the flicker was actually look at the HTML source of Ted’s example and compare to the one generated by my local Flex Builder 2 project. The difference was the “bgcolor” attribute. This attribute is set by the compile through a parameter ${bgcolor} in the index.template.html template. I tried to find the proper way to set some value in the application or the Flex Builder 2 project properties but couldn’t find anything. So to fix the flicker I ended up modifying the index.template.html, changing all ${bgcolor} with #ffffff.

To view it for your self take a look at:
Ted’s example link

Download source in new Flex Builder project link

You’ll see the bgcolor=”#ffffff” in Ted’s html and bgcolor=”#869ca7″.

Entry Filed under: Adobe Flex, Rich Internet Applications

11 Comments Add your own

1. Ted Patrick | 2006-07-22 at 7.44 pm

If you want to remove the background color do this:

In Flex Builder:

1. Right Click on the Project + Properties
2. Click > Flex Compiler
3. Add this line to the compiler arguments:

-locale en_US -default-background-color #FFFFFF

This will force the background SWF color to White or #FFFFFF.

It is unfortunate but custom compiler options can only be set in the project not in MXML. :(

I will note that in the next build.

Ted :)
2. Renaun Erickson | 2006-07-22 at 7.46 pm

Thanks, I was hoping it wasn’t a compiler argument.
3. Ted Patrick | 2006-07-23 at 10.05 am

The compiler argument will change the SWF header color, there are 2 proprties in the Application tag that can help here:

The backgroundGradientColors array allow you to specify 2 colors to change the default background gradient. Adding the property below will create a vertical grey to white background

backgroundGradientColors=”[#cccccc, #ffffff]”

The other option is embedding an image as the background, you can use SWF, GIF, PNG, JPG for this.

backgroundImage=”welcome.gif”

Additionally if you specify the Embed 9 slice scale arguments you can control scaling of the image or SWF

backgroundImage=”{backWelcomeImage}”

With all these options you can make the background do just about anything you want to.

Cheers,

Ted :)
4. Ted Patrick | 2006-07-23 at 10.08 am

<mx:Script>
<![CDATA[ [
Embed(source="logowithborder.gif", scaleGridTop="5", scaleGridBottom="25", scaleGridLeft="5", scaleGridRight="25")]
[Bindable]
public var backWelcomeImage:Class;
]]>
</mx:Script>
5. Renaun Erickson | 2006-07-23 at 12.44 pm

See what I tried was to blank out the image, as it stated in the docs, and then have the backgroundGradientColors attribute color it in. But that did not work.

I did not try making a transparent png as the backgroundImage to see if the backgroundGradientColors would come through.

That scaleGridXxxx is cool to know, thx for the info.
6. jacob | 2006-07-28 at 10.51 am

how do you get an repeating background image in flex?
and if you don’t want to repeat the background but set it in the center of the application?
greetz me.
7. Romain | 2006-08-10 at 8.17 am

Finally, how can I have a transparent background?
I tried what the livedocs stated (add a style : Application { backgroundImage: ” “; } (….)
To make your application’s background transparent, set the alpha property on the tag to 0) but that does not work.

What I want to do is to have a div defined behind the SWF in HTML page, and then I want to see some parts of the div with the transparancy part of the SWF. But for the moment I just have white rectangular swf hidding the div… no transparency at all.

Thanks for your help
8. Renaun Erickson | 2006-08-10 at 9.05 am

You’ll have to set the wmode=transparent on the HTML tag for it to be transparent over HTML elements.

NOTE: There is a performance degrade when using wmode=transparent.
9. Chris Ellem | 2006-11-01 at 7.34 pm

Thanks Renaun and Ted!!!

Useful and Informative Blog…

Bye the way

a transparent background image works a treat!

Thanks Again

Chris
10. blanco | 2007-03-10 at 10.07 am

hey i got the background to change however i want it to be gradiant?? where do i put this?

please help
11. Renaun Erickson | 2007-03-11 at 5.47 pm

Use the backgroundGradientColors style attribute.

Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post | Subscribe to the comments via RSS Feed

S	M	T	W	T	F	S
« Jun				Aug »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Flex default bgcolor is it a color or an image?

11 Comments Add your own

Leave a Comment

Calendar

Most Recent Posts