ActionScript入門Wiki - Flickrから画像を読み込む

トップページ > Loader, セキュリティ > Flickrから画像を読み込む

概要

Flickrから画像を読み込んでみましょう。

Flickrは写真(画像)をアップロードして共有できるサイトです。
crossdomain.xmlを置いていて外部からの読み込み許可の設定もされているので、読み込んだ画像をBitmapDataに変換する事が出来ます。

http://farm1.static.flickr.com/crossdomain.xml
http://farm2.static.flickr.com/crossdomain.xml
http://farm3.static.flickr.com/crossdomain.xml
http://farm4.static.flickr.com/crossdomain.xml
Flickrはfarm1, farm2, farm3, farm4とサーバが4つに分かれています。
その一つ一つのサーバにcrossdomain.xmlが用意されていますが基本的にはどれを読み込んでもらっても構いません。
まとめて全部読み込むことも可能です。

http://farm3.static.flickr.com/2047/2280715132_f0a72c1088.jpg
では実際にコードを書いてみましょう。上の画像を読み込んでみることにします。

プログラム

Security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");

Security.loadPolicyFile()でcrossdomain.xmlを指定してします。

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
loader.load(new URLRequest("http://farm3.static.flickr.com/2047/2280715132_f0a72c1088.jpg"), new LoaderContext(true));

このコードは、Loaderを使用して画像を読み込むで説明したのとほとんど一緒です。
違うのは、Loader#load()の第二引数にLoaderContextオブジェクトを指定している所です。

LoaderContextクラスにはcheckPolicyFileというプロパティがあり、このプロパティにtrueを入れないとswfがcrossdomain.xmlを読み込んでくれません。
つまり読み込んだ画像をBitmapDataに変換するためには必ずLoaderContextのオブジェクトを生成し、checkPolicyFileにtrueを入れなければなりません。
コンストラクタの第一引数がcheckPolicyFileなのでnew LoaderContext(true)と一行で指定することが出来ます。

private function initHandler(event:Event):void
{
	var loader:Loader = event.currentTarget.loader;
 
	var bd:BitmapData = new BitmapData(loader.width, loader.height);
	bd.draw(loader);
	addChild(new Bitmap(bd));
}

前回と同じようにEvent.INITに対応するメソッドを作ります。
event.currentTarget.loaderで画像が入っているLoaderを取得できるのでloaderという名前に変更しておきましょう。

あとはloaderのサイズに合わせたBitmapDataを用意してdraw()でloaderの内容を描画します。

Bitmapに変換して表示してみましょう。このように表示されるはずです。

画像サイズの変更

読み込んだ画像のサイズを変更したい場合があります。
変更方法は、表示オブジェクトをBitmapDataに描画(Matrix編)で説明していますが、一応こちらでも説明しておきます。

var matrix:Matrix = new Matrix();

まずMatrixオブジェクトを生成します。

matrix.scale(150 / loader.width, 200 / loader.height);

scale()は拡大縮小の設定をするためのメソッドです。
例えばscale(3, 2)と書けば横に3倍、縦に2倍伸ばすという意味になりますし、
scale(0.4, 0.7)と書けば横に0.4倍、0.7倍と縮小する意味になります。

例えば設定したいサイズが100pxで元のサイズが50pxだとしましょう。
そうするとscaleには100px / 50pxで2を指定すればいいことになります。

逆に設定したいサイズが50pxで元のサイズが100pxだとしましょう。
scaleには50px / 100pxで0.5を指定すればいいことになります。

なので、scaleに設定する値は(設定したいサイズ / 元のサイズ)で出てきますね。
画像サイズを(150, 200)にするとしましょう。
元のサイズはloader.width, loader.heightに入っているので
(150 / loader.width, 200 / loader.height)をscale()に指定すればいいことになります。

var bd:BitmapData = new BitmapData(150, 200);

設定したいサイズが(150, 200)なのでBitmapDataのコンストラクタに(150, 200)と指定します。

var matrix:Matrix = new Matrix();
matrix.scale(150 / loader.width, 200 / loader.height);
 
var bd:BitmapData = new BitmapData(150, 200);
bd.draw(loader, matrix);
addChild(new Bitmap(bd));

Matrixオブジェクトの設定が出来たので、draw()の第二引数に指定してあげましょう。

このように表示されるはずです。

検証用コード

package
{
	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.system.LoaderContext;
	import flash.system.Security;
 
	public class Main extends Sprite
	{
		public function Main()
		{
			Security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
			loader.load(new URLRequest("http://farm3.static.flickr.com/2047/2280715132_f0a72c1088.jpg"));
		}
 
		private function initHandler(event:Event):void
		{
			var loader:Loader = event.currentTarget.loader;
 
			var matrix:Matrix = new Matrix();
			matrix.scale(150 / loader.width, 200 / loader.height);
 
			var bd:BitmapData = new BitmapData(150, 200);
			bd.draw(loader, matrix);
			addChild(new Bitmap(bd));
		}
	}
}

リンク元(0)

添付ファイル