Making image span across several components in Flex - apache-flex

Question

Recently I've found a nice on-line diagramming tool - LovelyCharts. I like the way UI is designed - you can view screenshot here. I wonder how to make an image that span across multiple components, like the LovelyCharts logo in the upper right corner of the screenshot. Could anybody kick me in the right direction?

Answer 1

You need to create an image with a transparent background. The JPEG format does not support transparent backgrounds so you need to use GIF or another format. Then embed the image as in the following code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Canvas width="476"
height="264">
<mx:Label x="103"
y="110"
text="Some text"
width="155"/>
<mx:Image x="115"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Canvas>
You can position the image where you want on the canvas, overlapping other components if you like. Here is an example of an image with a transparent background, http://commons.wikimedia.org/wiki/File:Gluecksklee_%28transparent_background%29.gif

Answer 2

This should definitely work for you. The layout of the application is absolute and there are two examples of images - one declared inside the canvas tags and the other outside
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas width="476"
height="264"
x="50"
y="0"
borderStyle="solid"
borderThickness="5"
borderColor="black">
<mx:Label x="103"
y="110"
text="Some text"
width="155"/>
<mx:Image x="115"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Canvas>
<mx:Image x="30"
y="110"
width="100"
height="100"
source="#Embed('assets/transparent_back.gif')"/>
</mx:Application>