flex 绑定资源

　　Adobe Flex supports several image formats, including GIF, JPEG, PNG, SVG, and SWF files. You can import these images into your applications by using the Image control. Flex also includes the SWFLoader control for loading Flex applications. You typically use the Image control for loading static graphic files and SWF files, and use the SWFLoader control for loading Flex applications. The Image control is also designed to be used in custom item renderers and item editors. For more information on the SWFLoader control, see SWFLoader control.  Image组件导入静态的图像文件与SWF文件 ，SWFLoader导入Flex applications, Flex supports importing GIF, JPEG, PNG, and SWF files at run time, and embedding GIF, JPEG, PNG, SVG, and SWF at compile time. The method you choose depends on the file types of your images and your application parameters.  flex支持在运行时导入GIF,jpeg,png,swf文件，在编译时绑定GIF,JPEG,PNG,SVG,SWF。采用哪个方式取决于你的图像类型与应用参数。
　　Embedded images load immediately, because they are already part of the Flex SWF file. However, they add to the size of your application and slow down the application initialization process. Embedded images also require you to recompile your applications whenever your image files change. For an overview of resource embedding, see Embedding Assets. 
　　绑定images会立即导入，它是作为flex swf文件的一部分，但是它会增加应用的体积，减慢应用的初始化进程，当你的图片改了，应用需要你重新编译。
　　字体：
　　1 使用设备字体，
　　.myClass {
　　fontFamily: Arial, Helvetica, "_sans";
　　color: Red;
　　fontSize: 12;
　　fontWeight: bold;
　　}
　　第三个是设备字体 ，在你的应用中，当前两种字体找不到的时候，会使用第三种字体。
　　Flash Player supports three device fonts. The following table describes these fonts: Using device fonts does not affect the size of the SWF file because the fonts reside on the client. However, using device fonts can affect performance of the application because it requires that Flash Player interact with the local operating system. Also, if you use only device fonts, your selection is limited to three fonts 使用设备字体不会影响swf的体积，因为字体文件存在在客户电脑上，但是会影响性能，因为它要求flash player与本地操作系统交互。
　　2 绑定字体
　　你可以帮定TrueType font (TTF) or OpenType font (OTF)类型的字体，
　　绑定字体的好处：
　　Client environment does not need the font to be installed. 
　　Embedded fonts are anti-aliased, which means that their edges are smoothed for easier readability. This is especially apparent when the text size is large. 
　　Embedded fonts can be partially or fully transparent. 
　　Embedded fonts can be rotated. 
　　Embedded fonts provide smoother playback when zooming. 
　　Text appears exactly as you expect when you use embedded fonts. 
　　When you embed a font, you can use the advanced anti-aliasing information that provides clear, high-quality text rendering in SWF files. Using advanced anti-aliasing greatly improves the readability of text, particularly when it is rendered at smaller font sizes. For more information about advanced anti-aliasing, see Using advanced anti-aliasing. 
　　不利之处有：
　　Embedded fonts, in general, decrease the legibility of the text at sizes smaller than 10 points. All embedded fonts use anti-aliasing to render the font information on the client screen. As a result, fonts may look fuzzy or illegible at small sizes. To avoid this fuzziness, you can use advanced anti-aliasing to render fonts in Flex applications. For more information, see Using advanced anti-aliasing. 
　　绑定字体语法
　　@font-face {
　　src: url("location") | local("name"); //url是字体文件的路径，local是字体的名字
　　fontFamily: alias;
　　[fontStyle: normal | italic | oblique;]
　　[fontWeight: normal | bold | heavy;]
　　[advancedAntiAliasing: true | false;]
　　}
　　as 绑定字体
　　[Embed(source='../assets/MyriadWebPro-Bold.ttf', 
　　fontWeight='bold', 
　　fontName='myBoldMyriadFont', 
　　mimeType='application/x-font', 
　　advancedAntiAliasing='true'
　　)] 
　　private var font2:Class;
　　绑定系统字体或者本地字体，可以：     [Embed(systemFont='Myriad Web Pro', 
　　fontStyle='italic', 
　　fontName='myItalicFont', 
　　mimeType='application/x-font', 
　　advancedAntiAliasing='true'
　　)] 
　　private var font2:Class;
　　To get the system font name in Windows, install the Font properties extension. Then right-click the font's file in Windows Explorer and select the Names tab. Use the value under Font Family Name as the systemFont value.   使用advanced anti-aliasing      advanced anti-aliasing 特性能当字体很小的时候使字体看起来很清楚，更锐利。
　　By default, fonts that you embed in Flex applications use the advanced anti-aliasing information. This default is set by the fonts.advanced-anti-aliasing compiler option in the flex-config.xml file (the default value is true). You can override this default value by setting the value in your style sheets or changing it in the configuration file. To disable advanced anti-aliasing in style sheets, you set the advancedAntiAliasing style property to false
　　使用advanced anti-aliasing 能降低你编译的性能，虽然在运行时不需要太在意，但是应该注意到如果你频繁编译，当你导入swf时会促使轻微的延迟，比如，使用4，5个字体时会促使内存使用增加 4 MB。
　　检测绑定字体：
　　可以使用SystemManager 类的isFontFaceEmbedded方法这个字体是否是绑定字体或者是否它已经被全局注册使用字体类的register() 
　　@font-face {
　　src: url(../assets/MyriadWebPro.ttf);
　　fontFamily: myPlainFont;
　　advancedAntiAliasing: true;
　　}
　　.myStyle1 {
　　fontFamily: myPlainFont; 
　　fontSize:12pt
　　}
　　
　　flex包括几个字体管理器去处理绑定字体，字体管理器能定义绑定字体与绘制每个字符，这个过程叫做转码，分别有 BatikFontManager, JREFontManager, and AFEFontManager 三种管理器，
　　The Batik and JRE font managers can transcode TrueType fonts. The AFE font manager adds support for OpenType fonts.
　　The Batik font manager 仅仅转码通过url绑定的TrueType 字体，不转码系统字体，一般的，当你帮定字体时制定了字体的路径，那么flex编译器默认使用Batik font manager ，它提供了平滑的渲染，更精确的line度量，它能影响多行文本与计算行的长度。
　　The JRE font manager 转码TrueType system fonts 。但是质量的输出没有前者好，如果你安装了字体在你的本地系统，flex编译器将使用JRE font manager 。
　　The AFE font manager 仅仅转码OpenType 字体，仅仅是路径字体而不是系统字体，
　　You determine which font managers the compiler can use in the flex-config.xml file. The default setting is to use all of them, as the following example shows:  字体管理器调用的默认顺序是反方向的，即BatikFontManager最先被调用  。
　　那么，为了转码 OpenType 字体，需要去改变字体管理器的顺序，你需要-managers flash.fonts.JREFontManager flash.fonts.BatikFontManager flash.fonts.AFEFontManager。
　　绑定双字节的字体：
　　如果你绑定双字节字体，你需要设置一组最小字符，如果你帮定整个字体，那么swf将非常大，你能在定义Unicode character ranges in the flex-config.xml file ，然后能饮用这个范围的字符。
　　flex预先定义了常见的双字节语言的字符范围，比如Thai, Kanji, Hangul, and Hebrew in the flash-unicode-table.xml file。这个文件不会被处理，但是会包括进来为你提供各种范围的数据。例如在这个文件里有这样的定义
　　
　　Thai
　　U+0E01-U+0E5B
　　
　　To use this language in your Flex application, copy the character range to the flex-config.xml file or pass it on the command line by using the fonts.languages.language-range option. Add the full definition as a child tag to the  tag, as the following example shows:
　　
　　
　　
　　
　　thai
　　U+0E01-U+0E5B
　　
　　
　　
　　...
　　 You can import various types of media, including images, SWF files, and sound files.  Flex supports embedding JPEG, GIF, and PNG files. You can use these images for icons, skins, and other types of application assets. You might want to manipulate an embedded image at run time. To manipulate it, you determine the data type of the object representing the image and then use the appropriate ActionScript methods and properties of the object. For example, you use the [Embed] metadata tag in ActionScript to embed a GIF image, as the following code shows: In this example, you define a class named imgCls that represents the embedded image. When embedding JPEG, GIF, and PNG files, Flex defines imgCls as a reference to a subclass of the mx.core.BitmapAsset class, which is a subclass of the flash.display.Bitmap class.  In ActionScript, you can create and manipulate an object that represents the embedded image before passing it to a control. To do so, you create an object with the type of the embedded class, manipulate it, and then pass the object to the control, as the following example shows:             
　　The executing SWF file for the previous example is shown below: id="EmbedSound" classid="clsid:d27cdb6e-ae6d-11cf-96b8-44455354000 0" width="600" height="300" codebase="http://download.macromedia.com/pub/shock wave/cabs/flash/swflash.cab#version=7,0,0,0" align="middle"> In this example, you define a class named sndCls that represents the embedded MP3 file. When embedding MP3 files, Flex defines sndCls as a reference to a subclass of the mx.core.SoundAsset, which is a subclass of the flash.media.Sound class.  Flex can handle any legal filename, including filenames that contain spaces and punctuation marks. If the MP3 filename includes regular quotation marks, be sure to use single quotation marks around the filename. You do not have to embed the sound file to use it with Flex. You can also use the Sound class to load a sound file at run time. For more information, see the Sound class in the Adobe Flex Language Reference. Flex fully supports embedding Flash SWF files. You can embed different types of SWF files.  Embedding SWF files for Flash Player 8 and earlier  You can embed SWF files created for Flash Player 8 and earlier. When embedded, your Flex application cannot interact with the embedded SWF file. That is, you cannot use ActionScript in a Flex application to access the properties or methods of a SWF file created for Flash Player 8 or earlier. For example, you use the [Embed] metadata tag in ActionScript to embed a SWF file, as the following code shows: In this example, you define a class named imgCls that represents the embedded SWF file. Flex defines imgCls as a reference to a subclass of the mx.core.MovieClipLoaderAsset class, which is a subclass of the flash.display.MovieClip class. Therefore you can manipulate the image by using the methods and properties of the MovieClipLoaderAsset class.  Embedding SWF symbols Flex lets you reference exported symbols in an embedded SWF file. If the symbol has dependencies, Flex embeds them also; otherwise, Flex embeds only the specified symbol from the SWF file. To reference a symbol, you specify the symbol parameter:  This capability is useful when you have a SWF file that contains multiple exported symbols, but you want to load only some of them into your Flex application. Loading only the symbols that your application requires makes the resulting Flex SWF file smaller than if you imported the entire SWF file. A Flex application can import any number of SWF files. However, if two SWF files have the same filename and the exported symbol names are the same, you cannot reference the duplicate symbols, even if the SWF files are in separate directories.  If the SWF file contains any ActionScript code, Flex prints a warning during compilation and then strips out the ActionScript from the embed symbol. This means that you can only embed the symbol itself.  The following example imports a green square from a SWF file that contains a library of different shapes:  The executing SWF file for the previous example is shown below: id="EmbedSWFSymbol" classid="clsid:d27cdb6e-ae6d-11cf-96b8-44455354000 0" width="600" height="400" codebase="http://download.macromedia.com/pub/shock wave/cabs/flash/swflash.cab#version=7,0,0,0" align="middle"> If you use the [Embed] metadata tag in ActionScript to embed the symbol, you can access the object that represents the symbol, as the following code shows: In this example, you define a class named imgCls that represents the embedded symbol. Internally, Flex defines imgCls as a reference to a subclass of either one of the following classes:  SpriteAsset For single-frame SWF files Embedding SWF files that represent Flex applications You can embed SWF files that represent Flex applications. For example, you use the [Embed] metadata tag in ActionScript to embed a SWF file, as the following code shows: In this example, you define a class named flexAppCls that represents the embedded SWF file. Flex defines flexAppCls as a reference to a subclass of the mx.core.MovieClipLoaderAsset class, which is a subclass of the flash.display.MovieClip class. Therefore you can manipulate the embedded SWF file by using the methods and properties of the MovieClipLoaderAsset class.  You typically embed a Flex application when you do not require the embedding application to interact with the embedded application. If the embedding application requires interactivity with the embedded application, you might consider implementing it as a custom component, rather than as a separate application. Alternatively, if you use the SWFLoader control to load the Flex application at run time, the embedding application can interact with the loaded application to access its properties and methods. For more information and examples, see Interacting with a loaded Flex application.  Flex supports the 9-slice scaling of embedded images. This feature lets you define nine sections of an image that scale independently. The nine regions are defined by two horizontal lines and two vertical lines running through the image, which form the inside edges of a 3 by 3 grid. For images with borders or fancy corners, 9-slice scaling provides more flexibility than full-graphic scaling. The following example show an image, and the same image with the regions defined by the 9-slice scaling borders: 
　　
　　When you scale an embedded image that uses 9-slice scaling, all text and gradients are scaled normally. However, for other types of objects the following rules apply: If you rotate the image, all subsequent scaling is normal, as if you did not define any 9-slice scaling. To use 9-slice scaling, define the following four parameters in your embed statement: scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight. For more information on these parameters, see Embed parameters. An embedded SWF file may already contain 9-slice scaling information specified by using Adobe Flash Professional. In that case, the SWF file ignores any 9-slice scaling parameters that you specify in the embed statement.  The following example uses 9-slice scaling to maintain a set border, regardless of how the image itself is resized.             
　　The executing SWF file for the previous example is shown below: The original image is 30 by 30 pixels. The preceding code produces a resizable image that maintains a 5-pixel border: 
　　
　　If you had omitted the 9-slice scaling, the scaled image would have appeared exactly like the unscaled image, as the following image shows:  
　　
　　In this example, you define a class named imgCls that represents the embedded image. If the image is a SWF file that uses 9-slice scaling, Flex defines imgCls as a subclass of the mx.core.SpriteAsset class, which is a subclass of the flash.display.Sprite class. Therefore you can use all of the methods and properties of the SpriteAsset class to manipulate the object.  You can embed any file type in a Flex application as a bit map array. However, Flex does not recognize or process files other than those described previously. If you embed any other file type, you must provide the transcode logic to properly present it to the application user.  To load a file type that is not specifically supported by Flex, use the [Embed] metadata tag to define the source file and MIME type "application/octet-stream". Then define a new class variable for the embedded file. The embedded object is a ByteArrayAsset type object. The following code embeds a bitmap (.bmp) file and displays properties of the embedded object when you click the Show Properties button. To display or use the object in any other way, you must provide code to create a supported object type.          
　　
　　
　　Anais wrote:  
　　Does Flex support embedding open-type fonts?   
　　-------------------------------------------------- ------------------------------  
　　danger42 wrote:  
　　Yes, but embedding fonts uses a different syntax. More info here:  
　　http://livedocs.adobe.com/flex/3/html/fonts_04.htm l#133099   I want to embed an image at runtime. 
　　[Embed(source="logo.gif")] 
　　[Bindable] 
　　public var imgCls:Class; 
　　setStyle("upSkin", imgCls);  
　　The problem is that the "logo.gif" is a string named iconName in my case.. 
　　The content of iconName (eg. "logo.gif") is stored in a database. 
　　I tried  
　　1.  [Embed(source="iconName")] 
　　2.  setStyle("upSkin", iconName) 
　　3.  
　　var image:Image = new Image(); 
　　image.source=iconName; 
　　setStyle("upSkin", image); 
　　and ... 
　　I do understand why it went wrong in the 3 cases above. 
　　Is there a best practice to do something like this? I have just found a solution for my problem. 
　　http://blog.benstucki.net/?p=42
　　With lots of thanks to Ben Stucki. What about embedding a video? 
　　AFAIK from Google search result, there is no official support on embedding flv/mov into flex yet, so I take an alternative route, which is not success yet. 
　　I have built a swf with Flash 8 as the library. Inside the library, there are 12 videos set to be controlled by the timeline, each is placed into a MovieClip with identifier set as "videoSymbol1"..."videoSymbol12" respectively. 
　　Then I use a class to collect all these embedded MovieClips. 
　　package{ 
　　public class SymbolLibrary{ 
　　[Bindable] 
　　[Embed(source = "/assets/Asset.swf", symbol = "videoSymbol1")] 
　　public static var symbolCls_1:Class; 
　　[Bindable] 
　　[Embed(source = "/assets/Asset.swf", symbol = "videoSymbol2")] 
　　public static var symbolCls_2:Class; 
　　. 
　　. 
　　. 
　　[Bindable] 
　　[Embed(source = "/assets/Asset.swf", symbol = "videoSymbol12")] 
　　public static var symbolCls_12:Class; 
　　} 
　　} 
　　However, if I try to create a few objects of different classes within the same screen update interval, mostly all the objects becomes the last called class on display, or the Video inside the movie become messed. However, if the object belongs to the class "symbolCls_1", it will just be fine. 
　　var c1:UIComponent; 
　　var c2:UIComponent; 
　　. 
　　. 
　　. 
　　var c12:UIComponent; 
　　for(var i:int=1;iFLEX 3). Is it possible to embed into an array?   I have almost 100 similar images, and I need to be able to access them via an array.    I would like to something like this: 
　　[Embed(source="logo1.gif")] 
　　[Bindable] 
　　public var imageSet[1]:Class; 
　　[Embed(source="logo2.gif")] 
　　[Bindable] 
　　public var imageSet[2]:Class; 
　　Any idea how to go about this?  Thanks. 
　　-=Bob @Bob McCown: 
　　If you don't mind using MXML syntax instead of AS proper, you can do it like this for example: 
　　 
　　 
　　 
　　 
　　 
　　 
　　 
　　 
　　 
　　 
　　 This page says: 
　　SpriteAsset For single-frame SWF files 
　　MovieClipLoaderAsset For multiframe SWF files 
　　This is incorrect. The correct documentation is as follows: 
　　SpriteAsset For single-frame SWF files 
　　MovieClipAsset For multiframe SWF files I had some trouble when scale 9 skinning, where I intended to scale in one direction only... here's what worked for me. 
　　 
　　I was using height="100%" but that didn't seem to work... the bound variable makes explicitHeight get set, so I'm not totally surprised. 
　　The default value of maintainAspectRatio is false... I guess this takes precedence over the obvious clue that the image is intended to be scaled in different directions when scale 9 is applied. 
　　Since I was intending to scale only vertically and the image being scaled is 25 wide I started with scale 9 param of scaleGridLeft='0', scaleGridRight='25'. This made scale 9 not work at all. 
　　Finally I didn't want to declare a local var to set the scale params, so here is an example of defining scale 9 in mxml. How do I scale an image to be used as a Button icon? I have an image of size 48x48 and i would like to scale it down to 24x24 and use this scaled image as image icon.  
　　Have been searching the internet to no lukc. I am sure framework provides a way to accomplish that..  Whatever image you embed is a Bitmap, so, it has it's bitmapData property containing BitmapData object. You can extract that data, manipulate it, create new image from it etc, but only at runtime. At compile time you cannot define the size of the image to be embedded. So, normally, you want to scale the icons before you embed them. Consider Icon has been designed and exported as pdf. 
　　Is it possible to embed the icon from pdf ? 
　　How to embed the icons from pdf ? 
　　Embed(source="assets/images/image.pdf",mimeType="a pplication/octet-stream"); 
　　The above is not working .. This embed is working, though, it probably doesn't do what you have expected - it embeds a binary file which is your PDF with an icon. 
　　Currently there's no strait forward solution for embedding PDF files - though, as long as AS3 can read binary data you can parse the PDF file you embed and extract the icon from there. I would imagine this to be a very cumbersome way to do it... so, right for now, if you need to import vector graphics (or why else would you need the PDF file for?), you can use Flex' ability to parse SVG (if, again, for whatever reason you cannot make an SWF, which is a preferred option). Even though Flex doesn't currently support SVG syntax at full volume, it is a way to go, because the SVG support is likely to be improved... Hi babu, 
　　You should consider using pdf2swf to be able to embed the image. Here's the link: http://www.swftools.org/. Embedding SVG is great, but is it possible to export it again as an SWF using the features of as3?  A hack like that would make it possible to produce something like an AIR converter program to ease the terrible pain people are feeling converting SVG's to SWF for web apps like prezi.