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?
+1
A:
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
Phil C
2009-08-11 13:56:39
Thank you, but it doesn't work as expected. The image is being clipped to fit the canvas.
2009-08-12 05:57:51
That is because it is added as a child of the canvas - notice how the mx:Image tag is between the opening and closing mx:Canvas tags. If you want it to cross the edges of the canvas then you need to declare it outside the Canvas tags
Phil C
2009-08-12 08:05:41
Another thing to note - the layout of the application was vertical. If you change this to absolute then you can lay easily overlap components.Look at the second answer
Phil C
2009-08-12 08:11:12
A:
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>
Phil C
2009-08-12 08:13:06