Image クラス

  画像および SWF の表示



実行時に、JPEG、PNG、GIF、および SWF のファイルを読み込むには、Image コントロールを使用します。
@Embed(source='filename') を使用すると、これらのファイルをコンパイル時に埋め込みます



  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Image source="@Embed(source='winofsql2.png')"/> 

</mx:Application>
  

イメージを埋め込んだ場合、Flex の SWF ファイルの一部となるため、ロードは直接的に行われます。
但し、アプリケーションのサイズがそのぶん大きくなるので、アプリケーションの初期化プロセスは遅くなります。
埋め込みイメージはイメージファイルに変更を加えるたびにアプリケーションを再コンパイルする必要があります。

リソースを埋め込まない場合は、実行時にリソースをロードします。
SWF ファイルが実行されるローカルなファイルシステムからリソースをロードすることもできますし、
ネットワーク上の HTTP 要求を通じて、リモートリソースにアクセスすることもできます。
イメージは、Flex アプリケーションとは独立しているため、イメージの名前さえ同じであれば修正を加えたとしても
再コンパイルの必要はありません。
イメージの参照により、アプリケーションの初期ロード時間に余分なオーバーヘッドが生じることはありません。
但し、イメージを Flash Player にロードするときに遅延が生じる場合があります。



  
source="RelativePath | AbsolutePath | URL"
  
  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:VBox>
		<mx:TextInput
			id="urlText"
			width="400"
			text="http://winofsql.jp/flex2/Image_01.swf"
		/>
		<mx:Button
			click="img.source = urlText.text"
			label="画像変更"
		/>
	</mx:VBox>

	<mx:Image id="img" source="http://winofsql.jp/image/winofsql2.png"/>

</mx:Application>
  

use-network を false に設定すると、ローカルファイルシステムのリソースにアクセスできますが、
ネットワーク上のリソースにはアクセスできません。
デフォルトの true に設定すると、ネットワーク上のリソースにアクセスできますが、
ローカルファイルシステムのリソースにはアクセスできません。



  Tweener によるロゴアニメーション



※ Tweener に関しては、↓を参照して下さい
http://winofsql.jp/VA003334/flex2071211155843.htm


新しいウインドウで実行

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
	<![CDATA[
		import caurina.transitions.Tweener;
		private var _x:int = 0;
		private var _y:int = 0;
		// 回転しながら左下
		private function Act1():void  {
			_x = img.x;
			_y = img.y;
			Tweener.addTween(img, {
				onComplete:Act2,
				x: _x-200,
				y: _y+100,
				delay: 0.2,
				rotation: 360,
				transition:'easeInOutQuart',
				time:1
			});
		}
		// 回転しながら右下
		private function Act2():void  {
			Tweener.addTween(img, {
				onComplete:Act3,
				x: _x,
				y: _y+200,
				delay: 0,
				rotation: 360,
				transition:'easeInOutQuart',
				time:1
			});
		}
		// 回転しながら右上
		private function Act3():void  {
			Tweener.addTween(img, {
				onComplete:Act4,
				x: _x+200,
				y: _y+100,
				delay: 0,
				rotation: 360,
				transition:'easeInOutQuart',
				time:1
			});
		}
		// 消えていく
		private function Act4():void  {
			Tweener.addTween(img, {
				onComplete:reset,
				alpha:0,
				time:0.7
			});
		}
		// 出現しながらすばやく元の位置へ
		private function reset():void  {
			Tweener.addTween(img, {
				alpha:1,
				x: _x,
				y: _y,
				transition:'easeInBack',
				time:0.5
			});
		}
	]]>
</mx:Script>

	<mx:VBox>
		<mx:Button
			click="Act1();"
			label="Tweener実行"
		/>
	</mx:VBox>

	<mx:Image id="img" source="http://winofsql.jp/image/winofsql2.png"/>

</mx:Application>
  











  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ