Home Tutorial Flex Flex-components Flex Embed Assets Process

 
 

Flex Embed Assets Process
Posted on: April 3, 2010 at 12:00 AM
In flex application, you can use external assets like images etc . Then you can put the location of the assets and load these in run time after that you want to compile your application having with these assets, this is called embedding the asset.

Embed Assets in Flex:-

In flex application, you can use external assets like images etc . Then you can put the location of the assets and load these in run time after that you want to compile your application having with these assets, this is called embedding the asset. You can embed images, movie and other files in your application. In this process your assets which you want to embed with the application , are include in the SWF file. The application are load that assets at run time. In this example you can see how to embed image in the flex application.

Example:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

<mx:Script>

<![CDATA[

[Bindable]

[Embed(source="assets/button.jpeg")]

public var imgCls:Class;

]]>

</mx:Script>

<mx:Style>

.myCustomButton {

overSkin:Embed(source="assets/button.jpeg");

upSkin:Embed(source="assets/button1.jpeg");

downSkin:Embed(source="assets/button2.jpeg");

}

</mx:Style>

<mx:Panel width="400" height="400">

<mx:Button icon="@Embed(source='assets/button1.jpeg')"/>

<mx:Button id="mybutton" icon="{imgCls}"/>

<mx:Button id="mybutton2" styleName="myCustomButton"/>

</mx:Panel>

</mx:Application>

In this tutorial there are three way to embedded image with the application-

1. Direct with the components.

User can embed image with the component when uses it then assets are compile with this component like this.

<mx:Button icon="@Embed(source='assets/button1.jpeg')"/>

2.Through action script.

User can embed image in the <mx:Script>tag with the bendable variable like this,

[Bindable]

[Embed(source="assets/button.jpeg")]

public var imgCls:Class;

After that bind this variable with the component.

<mx:Button id="mybutton" icon="{imgCls}"/>

3. Through style.

User can embed the assets with style when it is require in the style. The process of that embed is,

<mx:Style>

.myCustomButton {

overSkin:Embed(source="assets/button.jpeg");

upSkin:Embed(source="assets/button1.jpeg");

downSkin:Embed(source="assets/button2.jpeg");

}

</mx:Style>

 After that use to set property styleName like this

<mx:Button id="mybutton2" styleName="myCustomButton"/>

These are the process to embed image with the component in flex.

Output:-

 

Related Tags for Flex Embed Assets Process:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.