fc2ブログ

price-change:blog

色んな情報テンコモリ

ActionScript3.0 | ImageクラスをBitmapクラスに変換してmxmlコンポーネントに追加

ActionScript3.0 | ImageクラスをBitmapクラスに変換してmxmlコンポーネントに追加

ブログの更新をさぼっているように見せかけて、ActionScript3.0 のお勉強を始めてしまいました。flash初体験なので試行錯誤して遊んでいる今日この頃です。

そんな前置きはさておき、画像を読み込んで Canvas に追加して拡大したり縮小したりするという単純な物をシコシコと作っているんだけども、Image クラスの load メソッドで画像を読み込んだものは、拡大縮小すると画像がギザギザになるの。でも、スムーズにしたいの。したいーしたいよー。と思って調べてみたら、Bitmapsmoothing プロパティを true に設定すればOKということが判明したの。

でも、読み込んだ画像は Image クラス、スムーズに出来るのは Bitmap クラス…。ここは素直に URLLoader で読み込んで…と思わないところがあたいの良いところ。意地でも Image を Bitmap へ変換してスムーズに拡大しちゃうんだからね!という密かな思いを心に秘め、ググったりマニュアルとにらめっこすること早一週間、答えが導かれました。

まずはImage から Bitmap 画像への変換方法


// var img:Image;
var bd : BitmapData = new BitmapData(img.contentWidth, img.contentHeight);
bd.draw(img);
var bitmap:Bitmap = new Bitmap(bd);

こんな感じでokみたい。でもこれだけじゃ Canvas コンポーネントに追加( addChild() )出来ません(><)/ UIComponent の子供じゃなきゃ仲間に入れて上げないよーだっていじわるされちゃう…。そこで UIComponent の遺伝子を獲得すべく、継承することにレッツチャレンジ。


ファイル名 BitmapImage.as

package {

	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import mx.controls.Image;
	import mx.core.UIComponent;

	
	public class BitmapImage extends UIComponent
	{
		public var bitmap:Bitmap;
		
		public function BitmapImage():void
		{
			super();
		}
		
		public function convert(img:Image):void
		{
			var bd : BitmapData = new BitmapData(img.contentWidth, img.contentHeight);
			bd.draw(img);
			bitmap = new Bitmap(bd);

			addChild(bitmap);
		}
	}
	
}

こんな感じで晴れて UIComponent の子供になれた BitmapImage くんは Canvas くんの仲間に入れるのであった。


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			
			import flash.events.Event;
			import flash.events.MouseEvent;
			import mx.controls.Image;
			import BitmapImage;
			
			private function init():void
			{
				var img:Image = new Image();
				
				img.addEventListener(Event.COMPLETE, completeHandler);
				img.load("http://g-ec2.images-amazon.com/images/I/41jA88dFiCL._AA100_.jpg");
			}


			private function completeHandler(e:Event):void
			{
				var img:Image = Image(e.currentTarget);
				
				var bi:BitmapImage = new BitmapImage();
				bi.convert(img);
				bi.bitmap.smoothing = true;
				
				bi.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
				cv.addChild(bi);
			}
			
			
			private function mouseDownHandler(e:Event):void
			{
				var bi:BitmapImage = BitmapImage(e.currentTarget);
				bi.bitmap.scaleX += 0.1;
				bi.bitmap.scaleY += 0.1;
			}
		]]>
	</mx:Script>
	<mx:Canvas id="cv" width="500" height="400" backgroundColor="0xffffff"></mx:Canvas>

</mx:Application>

と思ったら大間違い!クロスドメイン問題で読み込んだ画像が表示されません(><) 仕方無いのでサーバー側で何とかしてみた。


<?php

$url = $_GET['url'];

if (preg_match("/^http://.+.images-amazon.com/.+?.jpg$/", $url))
{
	header('Content-Type: image/jpeg');
	echo file_get_contents($url);
	exit;
}
header('HTTP/1.0 400 Bad Request');

?>

正規表現部分は超適当なので参考にしないで下さい。また環境によって動かない場合もあるので自分でチェックチェック。

参考記事
スポンサーサイト



テーマ:Flash - ジャンル:コンピュータ