Flash | Almondlab

jQueryのプラグインでFLASHの埋め込み。

2010.01.05 / Notes

jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery FLASH</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>
</head>
<body>

<div id="flash">
<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>
</div><!-- flash -->

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery FLASH</title>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

</head>

<body>

<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>

</div>

</body>

</html>

<head>タグ内にjQuery本体とjquery.flash.jsを読み込んで、div#flashに対して埋め込みの記述をします。
最低限必要なのはSWFファイルのパスのみで、width、heightは省略できます。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});

</script>

$(document).ready(function() {

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});

});

</script>

FLASHにパラメータを渡す場合は、次のようにflashvarsをオブジェクトで追加します。

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

1	$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

jquery.flash.jsプラグインページ

FLASHでビットマップのフルスクリーン表示。

2010.01.02 / Labs

外部ビットマップデータを読み込んで、ウィンドウ全面に表示されるように拡大・縮小を行います。ウィンドウのサイズが変更されたら、それに合わせてビットマップもリサイズします。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.net.URLRequest;	

	public class Main extends Sprite {
		
		public function Main() {
			var loader:Loader = new Loader();
			var info:LoaderInfo = loader.contentLoaderInfo;
			
			//ビットマップデータの読み込み
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(new URLRequest("image.jpg"));
			
			//ステージのスケールを固定で、原点を左上に
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//ビットマップの読み込みが完了した時
			function onComplete(event:Event):void {
				var bmd:BitmapData = new BitmapData(info.width, info.height);
				var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);
				
				//ビットマップを描画
				bmd.draw(loader);
				stage.addChild(bm);
				adjustBitmap(bm);
			}
			
			//ビットマップをステージのサイズに合わせる
			function adjustBitmap(bm:Bitmap):void {
				var inner:Number = bm.width/bm.height; //ビットマップの縦横比
				var outer:Number; //ステージの縦横比
				
				//ステージのサイズが変更された時
				stage.addEventListener(Event.RESIZE, transSize);
				transSize();
				
				//ビットマップを拡大・縮小
				function transSize():void {
					var size_x:uint = stage.stageWidth;
					var size_y:uint = stage.stageHeight;
					
					outer = size_x/size_y;
					
					//ビットマップ、ステージの縦横比を比較してサイズを変更
					if (inner >= outer) {
						size_x = size_x*(inner/outer);
					} else {
						size_y = size_y*(outer/inner);
					}
					bm.width = size_x;
					bm.height = size_y;
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.net.URLRequest;

public class Main extends Sprite {

public function Main() {

var loader:Loader = new Loader();

var info:LoaderInfo = loader.contentLoaderInfo;

//ビットマップデータの読み込み

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

loader.load(new URLRequest("image.jpg"));

//ステージのスケールを固定で、原点を左上に

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

//ビットマップの読み込みが完了した時

function onComplete(event:Event):void {

var bmd:BitmapData = new BitmapData(info.width, info.height);

var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);

//ビットマップを描画

bmd.draw(loader);

stage.addChild(bm);

adjustBitmap(bm);

}

//ビットマップをステージのサイズに合わせる

function adjustBitmap(bm:Bitmap):void {

var inner:Number = bm.width/bm.height; //ビットマップの縦横比

var outer:Number; //ステージの縦横比

//ステージのサイズが変更された時

stage.addEventListener(Event.RESIZE, transSize);

transSize();

//ビットマップを拡大・縮小

function transSize():void {

var size_x:uint = stage.stageWidth;

var size_y:uint = stage.stageHeight;

outer = size_x/size_y;

//ビットマップ、ステージの縦横比を比較してサイズを変更

if (inner >= outer) {

size_x = size_x*(inner/outer);

} else {

size_y = size_y*(outer/inner);

}

bm.width = size_x;

bm.height = size_y;

}

photo by : Josefrén