SQLの窓

2012年05月04日


★ 超シンプル FLV プレーヤー ★ / Adobe AIR Flex の簡単サンプル(コンソールビルドパッケージ)

Flex4 の SDK と Java の SDK があれば、テキストエディタだけで開発できます。
推奨エディタは MKEditor で、ビルドが簡単にできるようにプロジェクトしてあり
ます。

AIR は実際問題、配布パッケージを作成しないのであれば、AIR のランタイムは必
要ありません。

※ Java7 は、パッケージ作成時にエラーが出たので、Java6 が推奨環境です。

Flex3 の時に作成したものを flex_sdk_4.6 で動作するように調整しましたので、
Flex4 では、VideoPlayer というコントロールがあって、自前でコントロールする
必要は無いのですが、VideoDisplay で作成しています。その為、コントロールの
イベントやその他の実装のサンプルとしては解りやすいと思います。
( ▼ Flex3 のころの 記述を少しコメントで残しています )
// myVid.playheadUpdateInterval = 1;
// myVid.load();




▼ 実行画面


( ウインドウのサイズ変更は、右下の角をドラッグします )


MKEditotr で簡単に修正やビルドができます

http://www.mk-square.com/
▼
SOFTWARE => MKEditor for Windows => Download Information
▼
MKEditor for Windows Version 3.9.9-J



開発環境

1) Java6 ( Java7 では、パッケージ作成でエラーが出ます )
( SDK の bin ディレクトリを PATH 環境変数に設定する必要があります )
2) flex_sdk_4.6
( SDK の場所は、パッケージ内の設定ファイルに記述します / Java も OK )
3) Microsoft Visual C++ 2010 再頒布可能パッケージ (x86)
( 既にインストールされている場合は fcsh 実行時にエラーが出ません )

※ 日本語ドキュメントのダウンロードは公式では無いですが以下にあるようです
http://help.adobe.com/ja_JP/Flex/4.0/Flex_4_docs.zip
と言うか、以前は公式にリンクがあったのですが内容が古い為、公式なリンクが
消えているのが実情だと思います。過去にも何度かこういう事がありました。

Flex4 リファレンス : 日本語オンライン

その他のオンラインドキュメント

Adobe AIR
Android と iOS 用の設定
Flex3 日本語汎用マニュアル
Adobe Flex 4.6 英文マニュアル

関連する記事

ビルド手順(1) : コマンドプロンプトの設定
ビルド手順(2) : SDKの設定
ビルド手順(3) : コマンドプロンプトでビルド
デバッグ実行
デバッグ用ログ出力
Flex で定義されているスキンを使って『外観』をかっこよく
AIR アプリケーション記述ファイルについて
FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する
Spark のスキンを使った時のウインドウサイズ変更オペレーション

重要な公式テクニカルアーティクル

Flex 4 マスターシリーズ #04 Flex 4 CSS
Flex 4 マスターシリーズ #05 Spark コンポーネント
Flex 4 マスターシリーズ #07 Spark Skining part 1
Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts


<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData();"
	nativeDragEnter="Check_DragEnter(event)"
	nativeDragDrop="Check_DropFile(event)"

	usePreloader="true"
	showStatusBar="false"

	titleIcon="{imgSmile}"
	title="エクスプローラから flv をドラッグ・ドロップできます"

	skinClass="spark.skins.spark.SparkChromeWindowedApplicationSkin"
>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel {
	backgroundColor:black;
}

</fx:Style>

<fx:Script>
<![CDATA[

	import spark.components.*;
	import spark.events.*;
	import org.osmf.events.*;
	import org.osmf.media.*;
	import flash.filesystem.*;
	import flash.events.Event;
	import mx.controls.Alert;
	import mx.logging.targets.*;
	import mx.logging.*;

//	import spark.skins.spark.*;

	[Bindable]
	[Embed("smile.png")]
	private static var imgSmile:Class;
	private var nSize:int = 1;
	private var rootObject:WindowedApplication;
	private	var nativeMenu:ContextMenu;

	private var logger:ILogger = Log.getLogger("MyLogger");

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

//		this.setStyle( "skinClass", SparkChromeWindowedApplicationSkin );

		// メッセージ
		logger.info( "initData() が実行されました" );

		// 再生イベントの発生間隔
//		myVid.playheadUpdateInterval = 1;

		// プログレスバーの初期化
		progressBar.setProgress(0, 100);

		// Mainw.xml の値を変更
//		this.height = 600;

		// 初期ボリューム
		myVid.volume = 0.7;

		// *************************************************
		// コンテキストメニュー定義
		// *************************************************
		rootObject = WindowedApplication(mx.core.FlexGlobals.topLevelApplication)
		nativeMenu = new ContextMenu();
		nativeMenu.hideBuiltInItems();

		addContextMenu(
			"x 1",
			function():void {
				changeSize(1);
			}
		);
		addContextMenu(
			"x 2",
			function():void {
				changeSize(2);
			}
		);
		addContextMenu(
			"x 0.5",
			function():void {
				changeSize(3);
			}
		);
		addContextMenu(
			"ベースを最大化",
			function():void {
				myVid.stage.displayState = 'fullScreen';
			}
		);
		addContextMenu(
			"ベースを標準",
			function():void {
				myVid.stage.displayState = 'normal';
			}
		);
		rootObject.contextMenu = nativeMenu;

	}

	// *********************************************************
	// コンテキストメニュー追加
	// *********************************************************
	public function addContextMenu(
		label:String,
		listener:Function
	):void {

		var menuItem:ContextMenuItem;
		menuItem = new ContextMenuItem(label);
		menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,listener);
		nativeMenu.customItems.push(menuItem);

	}

	// *********************************************************
	// 外部からドラッグ開始
	// *********************************************************
	private function Check_DragEnter(e:NativeDragEvent):void {

		var clip:Clipboard = e.clipboard;
		if ( clip.hasFormat( ClipboardFormats.FILE_LIST_FORMAT ) ) {
			NativeDragManager.acceptDragDrop(this);
		}
	}

	// *********************************************************
	// 外部からドロップ
	// *********************************************************
	private function Check_DropFile(e:NativeDragEvent):void {

		var clip:Clipboard = e.clipboard;
		var file_list:Array;
		file_list = clip.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

		var str:String = file_list[0].nativePath;
		var part:Array = str.split(".");
		var len:int = part.length;
		var ext:String = (part[len-1]).toUpperCase();

		if ( ext == "MP4" || ext == "FLV" ) {
			myVid.source = file_list[0].nativePath;
//			myVid.load();
			progressBar.setProgress(0, 100);
		}
		else {
			Alert.show( "flv か mp4 を使用して下さい" );
		}
	}

	// *********************************************************
	// ストップ( リセット )処理
	// *********************************************************
	public function play_Reset():void {

		// STOP ボタンを使用した場合は巻き戻すが、
		// 最後まで表示した場合は巻き戻さない
		myVid.autoRewind = true;
		myVid.stop();
		myVid.autoRewind = false;
	}


	// *********************************************************
	// シーク
	// *********************************************************
	private function setTime( e:MouseEvent ):void {

		myVid.seek( ( e.localX * myVid.duration )/ progressBar.width );
		logger.info("seek");


	}

	// *********************************************************
	// サイズ変更
	// *********************************************************
	private function changeSize( nSize:int ):void {

		switch( nSize ) {
			case 1:
				myVid.width = myVid.videoObject.videoWidth;
				myVid.height = myVid.videoObject.videoHeight;
				break;
			case 2:
				myVid.width = myVid.videoObject.videoWidth * 2;
				myVid.height = myVid.videoObject.videoHeight * 2;
				break;
			case 3:
				myVid.width = myVid.videoObject.videoWidth / 2;
				myVid.height = myVid.videoObject.videoHeight / 2;
				break;
		}

	}

	// *********************************************************
	// 再生ヘッド位置の表示
	// *********************************************************
	private function currentTimeChange( e:TimeEvent ):void {

		progressBar.setProgress(
			e.time,
			e.currentTarget.duration
		);

	}

	// *********************************************************
	// スライダー変更イベント
	// *********************************************************
	private function changeVolume( ):void {

		myVid.volume = hSlider.value;

	}

	// *********************************************************
	// スライダー変更イベント
	// *********************************************************
	private function readyVideo( ):void {

		try {
			changeSize(1);
			this.height = myVid.videoObject.videoHeight + 200;
			if ( this.width < myVid.videoObject.videoWidth ) {
				this.width = myVid.videoObject.videoWidth + 10;
			}
		}
		catch(e:*){
		}

	}

]]>
</fx:Script>

<s:Panel
	title="超シンプル flv プレーヤー"
	percentHeight="100"
	percentWidth="100"
>
	<s:VGroup width="100%">

		<s:HGroup>
			<s:Button
				label="Play"
				click="myVid.play();"
				width="60"
			/>
			<s:Button
				label="Pause"
				click="myVid.pause();"
				width="60"
			/>
			<s:Button
				label="Stop"
				click="play_Reset();"
				width="60"
			/>
			<s:HSlider
				 id="hSlider"  
				 minimum="0"  
				 maximum="1"  
				 value="0.7"  
				 snapInterval="0.1"  
				change="changeVolume();"
			/>
		</s:HGroup>

		<mx:ProgressBar
			id="progressBar"
			mode="manual"
			label=""
			width="100%"
			click="setTime(event)"
			visible="true"
		/>

		<s:VideoDisplay
			id="myVid"
			autoPlay="false"
			autoRewind="false"
			complete="progressBar.setProgress(100,100);"
			source="sample.mp4"
			currentTimeChange="currentTimeChange(event);"
			creationComplete="readyVideo();"
		/>

	</s:VGroup>



</s:Panel>

</s:WindowedApplication>

this.setStyle でスキンを読み込む場合は、import spark.skins.spark.*;
を指定して下さい。

css のネームスペースについては、Flex 4 マスターシリーズ #04 Flex 4 CSS を参照してください


【Flexの最新記事】
posted by lightbox at 2012-05-04 23:00 | Flex | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり