Flex/AIR加载图片的几种方式

最新推荐文章于 2017-11-06 23:29:00 发布

原创最新推荐文章于 2017-11-06 23:29:00 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AIR #Flex #Adobe #Flash #XML

Flex/AIR 专栏收录该内容

24 篇文章

订阅专栏

本文介绍在Flex中三种不同的图片加载方法：Embed、Loader和Image组件的source属性，并对比了它们的特点。

网觅得，略作修改。

代码如下： (以下环境运行通过: Flash Builder4, Flex SDK4.1)

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   applicationComplete="application1_applicationCompleteHandler(event)">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" gap="10"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			//方式1  这种方式编译以后tsj.jpg 会直接编译进swf文件中 所以swf可以独立存在
			[Bindable]
			[Embed(source="/assets/tsj.jpg")]
			private var imgClass:Class;
			
			//方式2
			private var loader:Loader;
			
			protected function application1_applicationCompleteHandler(event:FlexEvent):void
			{
				//方式1的代码
				imageByEmbed.source = imgClass;
				
				//方式2的代码
				loader = new Loader();
				//这里需要注意: 不是_loader.addEventListener  这样是没有效果的
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderImage);
				//这里说一个技巧   当url 中有中文字体的话 使用encodeURI方法 如果没有 则可以不加
				loader.load(new URLRequest(encodeURI("assets/tsj.jpg")));

				//方式3比较简单，但注意必须设置autoLoad属性为true
				imageBySource.source = "assets/tsj.jpg";			
			}

			private function loaderImage(e:Event):void
			{
				imageByLoader.source = e.currentTarget.content;
			}
		]]>
	</fx:Script>
	
	<s:HGroup verticalAlign="middle">
		<s:Label text="方式1：Embed(source=...)："/>
		<mx:Image id="imageByEmbed" width="100" height="100"/>
		<s:Label text="等同于（这里增加了图片加载完成时的Fade效果）："/>
		<mx:Image source="@Embed(source='/assets/tsj.jpg')" creationCompleteEffect="Fade"/>
	</s:HGroup>

	<s:HGroup verticalAlign="middle">
		<s:Label text="方式2：loader："/>
		<mx:Image id="imageByLoader" width="100" height="100"/>
	</s:HGroup>

	<s:HGroup verticalAlign="middle">
		<s:Label text="方式3：source："/>
		<mx:Image id="imageBySource" width="100" height="100" autoLoad="true"/>
	</s:HGroup>

	<s:Label text="说明：方式2和3中swf都不会将图片编译进去，图片需要按路径与swf同时发布才能被显示"/>

</s:Application>