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);
	}

	// *********************************************************
	// 処理1
	// *********************************************************
	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>
  




yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[flex2]
claudebot
24/03/29 23:53:42
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube