Flex : Sprite を継承した Flash プログラミング

インストール

( java 環境は簡単ですが、以下を参照 : 但しSDK 、実行環境のみならば、JRE をダウンロード )
http://winofsql.jp/VA003334/install050322152736_050509042337.htm

http://www.adobe.com/jp/products/flex/sdk/ からダウンロードしますが、ID が必要です。
ID がある場合は「いますぐダウンロード」を選ぶと、アカウント入力となります

Flex 2 SDK （無償）と日本語パックをダウンロードします

ダウンロードした flex_sdk_2_hf1.zip を解凍して、c:\flex2 にコピーし、
c:\flex2\bin を PATH 環境変数に追加します。

ホーム

↓ビルドを速くする為に追加( fcsh )
http://winofsql.jp/VA003334/flex2071127145227.htm

↓Tweener インストールと動作確認
http://winofsql.jp/VA003334/flex2071125121049_071125124045.htm

動作確認用のサンプルコードを取得してビルド

WEB+DB PRESS Vol.41 に掲載されているサンプルをダウンロードします。

http://gihyo.jp/magazine/wdpress/archive/2007/vol41/support
の、第3章「[サンプルアプリで学ぶ] ActionScript 3.0開発」　をダウンロードして下さい。

( toku1_AS.zip : あくまで、ライブラリ追加等の動作確認するだけなので、必ず必要ではありません )

まず、同梱されている PhotoViewer.swf をブラウザにドラッグドロップして
flash として動作するかどうかを確認します。

次に、PhotoViewer.as のあるディレクトリでコマンドプロンプトを開き、
mxmlc.exe PhotoViewer.as を実行してエラーが出る事を確かめます
( 日本語でエラーメッセージが出るはずなので、日本語パックはとりあえず保留します )

エラーをなくす為に、Tweener をダウンロードしてインストールします。

http://hosted.zeh.com.br/tweener/docs/en-us/
より、Download and installation -> download list. で以下のページよりダウンロード
http://code.google.com/p/tweener/downloads/list
( tweener_1_26_62_as3.zip ) 2007/11/25 時点

解凍されてできた、caurina ディレクトリごと、C:\flex2\frameworks\source に移動します

caurina への参照を C:\flex2\frameworks\flex-config.xml に設定します。

テキストエディタで開けて、compiler 要素の下に以下を追加して下さい

<source-path>
    <path-element>C:\flex2\frameworks\source\</path-element>
</source-path>

以上でビルドが成功するはずですが、ソース個別にオプションが指定できますので、
ソース名-config.xml というファイルをソースと同じディレクトリに置いて、以下のように記述すると良いでしょう
( こうすると、メインの config は無視されるようです )

PhotoViewer-config.xml

<flex-config>
  <use-network>true</use-network>
  <benchmark>true</benchmark>
  <compiler>
    <incremental>true</incremental>
    <source-path>
      <path-element>C:\flex2\frameworks\libs\</path-element>
      <path-element>C:\flex2\frameworks\source\</path-element>
    </source-path>
  </compiler>
</flex-config>

http経由で表示する場合は、ビルドしてもブラウザのキャッシュ上のファイルが使用されるので
ビルドを反映させたい場合は、ダミーで.swf?aaa=001 のようにアドレスバーで手動で URL を変化させて下さい

ドキュメントの取得

通常開発で必要となるリファレンスは、オンラインで以下から参照できますが、ダウンロードすると良いでしょう
http://livedocs.adobe.com/flex/201_jp/langref/index.html

↓ダウンロードページ
http://www.adobe.com/support/documentation/jp/flex/

解凍して、langref\index.html　を開くと、同じものです。

画像を表示

SWFメタタグは以下のように指定できますが、正式ドキュメントからまだ見つけられません。
というか、それぞれ、mxmlc.exe -help advanced で表示されるオプションの一つなので深く考えないでおきましょう

[SWF(width=”600″, height=”480″, frameRate=”30″, backgroundColor=”#FFFFFF”)]

lbox.as(utf-8)

// *********************************************************
// mxmlc lbox.as でビルド
//
// ◎ 背景は白
// ◎ 指定画像をオリジナルサイズで表示
// *********************************************************
package {

import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import flash.system.*;

// 背景色
[SWF(backgroundColor="#FFFFFF")]

// 表示用クラス 【Sprite】を継承
public class lbox extends Sprite {

	// *********************************************************
	// コンストラクタ
	// *********************************************************
	public function lbox():void {

		var loader:Loader = new Loader();

		// 読み込み完了イベントを登録
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

		// 読み込み
		loader.load(new URLRequest("http://winofsql.jp/image/winofsql.png"));

	}

	// *********************************************************
	// 読み込み完了イベント
	// *********************************************************
	private function loadComplete(e:Event):void {
		addChild(e.target.loader);

		// 配置( 左詰め、上 )
		stage.align = StageAlign.TOP_LEFT;
		// 伸縮モード( そのまま )
		stage.scaleMode = StageScaleMode.NO_SCALE;
	}

}}

Stage クラスはメイン描画領域を表します。
ステージとは Flash® コンテンツが表示される領域全体のことです。
Stage オブジェクトはグローバルにアクセスすることはできません。
アクセスするには、DisplayObject インスタンスの stage プロパティを介する必要があります。

単純に表示するだけの HTML への設置

実は、いろいろあるのですが、将来的には以下でOK
ライブラリとして使用する場合は、OBJECT と EMBED で width=0 と height=0 に変更します

lbox.htm

<object 
	classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
	codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0'
	id='MyApp'
	width='184'
	height='63'
>
	<param name='src' value='lbox.swf'>
	<param name='allowScriptAccess' value='always'>

	<embed 
		pluginspage='http://www.macromedia.com/go/getflashplayer' 
		src='lbox.swf'
		name='MyApp'
		width='184'
		height='63'
	/>
</object>

で、いろいろとは、Microsoft の訴訟問題で実装に制限が出ていた為、SWFObject 等を使用して
対応しているのが現状なのですが、来年には解決するはずです。

↓Microsoft IE Eolas社問題
http://kipimix.com/taisaku.htm
http://d.hatena.ne.jp/nitoyon/20071109/ie_activex_activation

今しばらくは、.js ファイルを作って以下のようにする必要があります

load.js( http://winofsql.jp/php/cnvtext/frame.htm で作成 )

str='';
str+="<object  \n	classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ";
str+="\n	codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' ";
str+="\n	id='MyApp' \n	width='184' \n	height='63' \n> ";
str+="\n	<param name='src' value='lbox.swf'> ";
str+="\n	<param name='allowScriptAccess' value='always'> ";
str+="\n \n	<embed  \n		pluginspage='http://www.macromedia.com/go/getflashplayer' ";
str+=" \n		src='lbox.swf' \n		name='MyApp' \n		width='184' ";
str+="\n		height='63' \n	/> \n</object> \n ";
str+="";
document.write(str);

<SCRIPT language="javascript" type="text/javascript" src="load.js"></SCRIPT>

JavaScript からアクセスする為のメソッドの追加

アクセスは、http 経由で行う必要があります( ファイルシステムは不可です )

load.js はこちら

lbox.as(utf-8)

// *********************************************************
// mxmlc lbox.as でビルド
//
// ◎ 背景は白
// ◎ 指定画像をオリジナルサイズで表示
// *********************************************************
package {

import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import flash.system.*;
import flash.external.*;

// 背景色
[SWF(backgroundColor="#FFFFFF")]

// 表示用クラス 【Sprite】を継承
public class lbox extends Sprite {

	// *********************************************************
	// コンストラクタ
	// *********************************************************
	public function lbox():void {

		var loader:Loader = new Loader();

		// 読み込み完了イベントを登録
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

		// 読み込み
		loader.load(new URLRequest("http://winofsql.jp/image/winofsql.png"));

	}

	// *********************************************************
	// 読み込み完了イベント
	// *********************************************************
	private function loadComplete(e:Event):void {
		addChild(e.target.loader);

		// 配置( 左詰め、上 )
		stage.align = StageAlign.TOP_LEFT;
		// 伸縮モード( そのまま )
		stage.scaleMode = StageScaleMode.NO_SCALE;

		// JavaScript に公開するメソッドの登録
		ExternalInterface.addCallback("flexCopyClipboard",copyClipboard);
	}

	// *********************************************************
	// クリップボードへ文字列をコピー
	// *********************************************************
	public function copyClipboard(data:String):void {

			System.setClipboard(data);

	}

}}

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML テンプレート</TITLE>
<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 関数
// *********************************************************
function doAction() {

	var txt = document.getElementById("text").value;

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		document.getElementById("MyApp").flexCopyClipboard(txt);
	}
	else {
		if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
			document.getElementsByName("MyApp")[1].flexCopyClipboard(txt);
		}
		else {
			document.getElementsByName("MyApp")[0].flexCopyClipboard(txt);
		}
	}


}

</SCRIPT>
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>

<INPUT
	type="button"
	value="クリップボードヘコピー"
	onClick='doAction();'
>

<HR>

<TEXTAREA
	id=text
	cols=100
	rows=10

>日本語データ</TEXTAREA>

<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="load.js">
</SCRIPT>

<DIV id="log">
</DIV>

</BODY>
</HTML>

flex2 から JavaScript へのアクセス

ExternalInterface　のスタティックメソッドである call を呼び出すだけのようです

load.js はこちら

lbox.as(utf-8)

// *********************************************************
// mxmlc lbox.as でビルド
//
// ◎ 背景は白
// ◎ 指定画像をオリジナルサイズで表示
// *********************************************************
package {

import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import flash.system.*;
import flash.external.*;

// 背景色
[SWF(backgroundColor="#FFFFFF")]

// 表示用クラス 【Sprite】を継承
public class lbox extends Sprite {

	// *********************************************************
	// コンストラクタ
	// *********************************************************
	public function lbox():void {

		var loader:Loader = new Loader();

		// 読み込み完了イベントを登録
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

		// 読み込み
		loader.load(new URLRequest("http://winofsql.jp/image/winofsql.png"));

	}

	// *********************************************************
	// 読み込み完了イベント
	// *********************************************************
	private function loadComplete(e:Event):void {
		addChild(e.target.loader);

		// 配置( 左詰め、上 )
		stage.align = StageAlign.TOP_LEFT;
		// 伸縮モード( そのまま )
		stage.scaleMode = StageScaleMode.NO_SCALE;

		// JavaScript に公開するメソッドの登録
		ExternalInterface.addCallback("flexCopyClipboard",copyClipboard);
	}

	// *********************************************************
	// クリップボードへ文字列をコピー
	// *********************************************************
	public function copyClipboard(data:String):void {

			System.setClipboard(data);
			ExternalInterface.call("flexLog", 
				"copyClipboard が呼び出されました<br>");

	}

}}

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML テンプレート</TITLE>
<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 関数
// *********************************************************
function doAction() {

	var txt = document.getElementById("text").value;

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		document.getElementById("MyApp").flexCopyClipboard(txt);
	}
	else {
		if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
			document.getElementsByName("MyApp")[1].flexCopyClipboard(txt);
		}
		else {
			document.getElementsByName("MyApp")[0].flexCopyClipboard(txt);
		}
	}


}

function flexLog( str ) {

	document.getElementById("log").innerHTML += str;

}

</SCRIPT>
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>

<INPUT
	type="button"
	value="クリップボードヘコピー"
	onClick='doAction();'
>

<HR>

<TEXTAREA
	id=text
	cols=100
	rows=10

>日本語データ</TEXTAREA>

<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="load.js">
</SCRIPT>

<DIV id="log">
</DIV>

</BODY>
</HTML>

誰でもできる Tween テスト

↓実行ページ
http://lightbox.on.coocan.jp/html/flex_img.htm

load.js はこちら

// *********************************************************
// mxmlc lbox.as でビルド
//
// ◎ 背景は白
// ◎ 指定画像をオリジナルサイズで表示
// *********************************************************
package {

import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.net.*;
import flash.system.*;
import flash.external.*;
import caurina.transitions.Tweener;

// 背景色
[SWF(backgroundColor="#DDDDDD")]

// 表示用クラス 【Sprite】を継承
public class lbox extends Sprite {

	// *********************************************************
	// コンストラクタ
	// *********************************************************
	public function lbox():void {

		var loader:Loader = new Loader();

		// 読み込み完了イベントを登録
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

		// 読み込み
		loader.load(new URLRequest("http://winofsql.jp/image/winofsql.png"));

	}

	// *********************************************************
	// 読み込み完了イベント
	// *********************************************************
	private function loadComplete(e:Event):void {
		addChild(e.target.loader);

		// 配置( 左詰め、上 )
		stage.align = StageAlign.TOP_LEFT;
		// 伸縮モード( そのまま )
		stage.scaleMode = StageScaleMode.NO_SCALE;

		// JavaScript に公開するメソッドの登録
		ExternalInterface.addCallback("flexAction",flexAction_01);
	}

	// *********************************************************
	// 処理１
	// *********************************************************
	public function flexAction_01(data:Number):void {

		if ( data == 1 ) {
			Tweener.addTween(this, {
				x: 600,
				y: 200,
				delay: 0.2,
				rotation: 360,
				transition:"easeOutElastic",
				time:3
			});
		}
		if ( data == 2 ) {
			Tweener.addTween(this, {
				x: 0,
				y: 0,
				delay: 0.2,
				rotation: 720,
				transition:"easeOutInBounce",
				time:10
			});
		}

	}

}}

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML テンプレート</TITLE>
<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="http://homepage2.nifty.com/lightbox/prototype.js">
</SCRIPT>
<SCRIPT language="javascript" type="text/javascript">

// *********************************************************
// 関数
// *********************************************************
function doAction(no) {

	if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
		document.getElementById("MyApp").flexAction(no);
	}
	else {
		if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
			document.getElementsByName("MyApp")[1].flexAction(no);
		}
		else {
			document.getElementsByName("MyApp")[0].flexAction(no);
		}
	}


}

</SCRIPT>
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>

<INPUT
	id=b1
	type="button"
	value="アクション1"
	onClick='doAction(1);$("b1").disabled=true;$("b2").disabled=false;'
>

<INPUT
	id=b2
	type="button"
	value="アクション2"
	onClick='doAction(2);$("b1").disabled=false;$("b2").disabled=true;'
	disabled
>

<HR>

<SCRIPT 
	language="javascript"
	type="text/javascript"
	src="load.js">
</SCRIPT>

</BODY>
</HTML>