How flex loads Resources

 

Flex software often needs some external resources, such as slices, sounds, SWF, or fonts. The first one can be introduced and loaded when the software is running, in the second case, it is often necessary to directly Compile these resources (Compile) into the software, that is, directly embed the resources (Embedding Assets ). In Flex, image, movie, MP3, and TrueType text can be directly embedded.

Direct resource reference

This method is slower than the second method, but more flexible to use. However, I personally feel that flex controls are not easy to design,

The Image can receive Class and Bitmap, but the Icon cannot receive Bitmap. The Icon can only receive Class objects. This has brought a lot of trouble to the users. However, many people have encountered this problem, so many people on the internet use IconUtility to directly reference resources.

Package COM. emavaj. myfriend. util <br/> {<br/> Import flash. display. bitmapdata; <br/> Import flash. display. loader; <br/> Import flash. display. loaderinfo; <br/> Import flash. events. event; <br/> Import flash. geom. matrix; <br/> Import flash.net. URLRequest; <br/> Import flash. system. loadercontext; <br/> Import flash. utils. dictionary; </P> <p> Import MX. containers. accordionclasses. accordionheader; <br/> Import MX. CO Ntrols. tabbarclasses. tab; <br/> Import MX. core. bitmapasset; <br/> Import MX. core. uicomponent; </P> <p>/** <br/> * provides a workaround for using Run-Time loaded graphics in styles and properties which require a class reference <br/> */ <br/> public class iconutility extends bitmapasset <br/>{</P> <p> Private Static Var dictionary: dictionary; </P> <p>/** <br/> * used to associate run-time graphics with a T Arget <br/> * @ Param target a reference to the component associated with this icon <br/> * @ Param source a URL to a JPG, PNG or GIF file you wish to be loaded and displayed <br/> * @ Param width defines the width of the graphic when displayed <br/> * @ Param height defines the height of graphic when displayed <br/> * @ return a reference to the iconutility class which may be treated as a bitmapas Set <br/> * @ example <mx: button id = "button" icon = "{iconutility. getclass (button, 'HTTP: // www.yourdomain.com/images/test.jpg')} "/> <br/> */<br/> Public static function getclass (target: uicomponent, source: String, width: number = Nan, height: Number = Nan): Class {<br/> If (! Dictionary) {<br/> dictionary = New Dictionary (false); <br/>}< br/> // If (source is string) {<br/> var Loader: loader = new loader (); <br/> loader. load (New URLRequest (source as string), new loadercontext (true); <br/> // source = loader; <br/> //} <br/> dictionary [target] = {Source: loader, width: width, height: height };< br/> return iconutility; <br/>}</P> <p>/** <br/> * @ private <br/> */<br/> Public functio N iconutility (): void {<br/> addeventlistener (event. added, addedhandler, false, 0, true) <br/>}</P> <p> private function addedhandler (Event: Event ): void {<br/> If (parent) {<br/> If (parent is accordionheader) {<br/> var header: accordionheader = parent as accordionheader; <br/> getdata (header. data); <br/>} else if (parent is tab) {<br/> var tab: tab = parent as tab; <br/> getdata (tab. data); <br/>}else {<br /> Getdata (parent); <br/>}</P> <p> private function getdata (Object: Object ): void {<br/> var data: Object = dictionary [object]; <br/> If (data) {<br/> var Source: object = data. source; <br/> If (data. width> 0 & data. height> 0) {<br/> bitmapdata = new bitmapdata (data. width, Data. height, true, 0x00ffffff); <br/>}< br/> If (source is loader) {<br/> var Loader: loader = source as loader; <br/> If (! Loader. content) {<br/> loader. contentloaderinfo. addeventlistener (event. complete, completehandler, false, 0, true); <br/>} else {<br/> displayloader (loader ); <br/>}</P> <p> private function displayloader (Loader: loader ): void {<br/> If (! Bitmapdata) {<br/> bitmapdata = new bitmapdata (loader. content. width, loader. content. height, true, 0x00ffffff); <br/>}< br/> bitmapdata. draw (loader, new matrix (bitmapdata. width/loader. width, 0, 0, bitmapdata. height/loader. height, 0, 0); <br/> If (parent is uicomponent) {<br/> var component: uicomponent = parent as uicomponent; <br/> component. invalidatesize (); <br/>}</P> <p> private function completehandler (Event: Event ): void {<br/> If (event & event.tar get is loaderinfo) {<br/> displayloader(event.tar get. loader as loader); <br/>}</P> <p >}< br/>} 

 

 

The second method is to embed resources.

 

Benefits of embedded resources:

1. Access to embedded resources is faster than accessing resources at runtime;

2. You can use a simple variable access method to reference the embedded resources in multiple places. This variable represents resources and improves code writing efficiency;

Disadvantages of embedded resources:

1. the SWF file size is increased because resources are directly included;

2. The increase in the SWF file slows down the initialization speed;

3. After the resource changes, re-compile the SWF file;

Example 1: a simple example of embedding a resource:

<? Xml version = "1.0"?>
<! -- Embed/ButtonIcon. mxml -->
<Mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml”>
<Mx: Button label = "Icon Button" icon ="@ Embed(sourcew.'logo.gif ')"/>
</Mx: Application>

Use the @ embed( to embed the image of logo.gif directly into the program and use it as the Icon of the Button.

Example 2: Use variables to reference embedded Resources

<? Xml version = "1.0"?>
<! -- Embed/ButtonIconClass. mxml -->
<Mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml">
<Mx: Script>
<! [CDATA [
[Embed (source = "logo.gif")]
[Bindable]
Public var imgCls: Class;
]>
</Mx: Script> adobe flex 3 BETA 2

<Mx: button label = "icon button 1" icon = "{ImgCls} "/>
<Mx: button label = "icon button 2" icon = "{ImgCls} "/>

Embed a logo.gif image in the upper-case mode and allow the variable imgcls to reference the resource. [Bindable] indicates that the imgcls variable can be bound to Data. Then, you can reference the variable of the embedded resource in multiple places (see red bold ).

You can also use the embed () command,Embed resources in a style sheetThis is usually used when setting the skin of the UI component. The following code:

<? XML version = "1.0"?>
<! -- Embed/buttoniconcss. mxml -->
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml">
<Mx: style>
. Mycustombutton {
OverSkin:Embed (source = "overIconImage.gif ");
UpSkin:Embed (source = "upIconImage.gif ");
DownSkin:Embed (source = "downIconImage.gif ");
}
</Mx: Style>
<Mx: Button label = "Icon Button Style Def" styleName = "myCustomButton"/>
</Mx: Application>

The code above indicates the normal button (up), mouse over, mouse down status, use different skin. OverSkin, upSkin, and downSkin are the skin attributes of a Button.