WEB Flex : スライドショーとXMLと画層の縦横フィット

  外部XMLでURLを指定してスライドショーを行う





ブラウザでダウンロード

▼ XML のパスは FlashVars で引き渡します( URL )
  
<div id=shbase>
<pre name="code091220115720" class="brush:js">
<div id="flashcontent"></div>

<script type="text/javascript">
var flashvars = {xml:"loadImage.xml"};
var params = {
  allowScriptAccess:"always"
 ,bgcolor:"#ffffff"
 ,allowFullScreen:"true"
}; 
var attributes = {
  id: "id_sample",
  name: "id_sample"
};
// "?reload="+(new Date()).getTime() はキャッシュ対応です
swfobject.embedSWF(
	"Main.swf?reload="+(new Date()).getTime(),
	"flashcontent", 
	"600",
	"480",
	"9.0.0",
	"",
	flashvars,
	params,
	attributes
);
</script>

</pre>
</div>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code091220115720"); 
</script>
  

▼ XML のフォーマット( URL は外部 URL が使用できます )
  
<?xml version="1.0" encoding="utf-8"?>
<data>
    <options>
        <type>seq</type>
        <delay>5000</delay>
        <no>1</no>
        <comment>utf-8で保存できるように日本語で書いています</comment>
    </options>
    <images>
        <url>images/p10000312.jpg</url>
    </images>
    <images>
        <url>images/p1000113.jpg</url>
    </images>
    <images>
        <url>images/p1000295.jpg</url>
    </images>
    <images>
        <url>images/p1000347.jpg</url>
    </images>
    <images>
        <url>images/p1000392.jpg</url>
    </images>
</data>
  

type は、seq と random が使用できます

delay は、フェードインが始まってからフェードアウトが始まるまでのミリ秒です。
( フェードイン効果が 2000ミリ秒で固定になっているので、完全に表示されているのは delay - 2000 )

no は、開始画像の番号
( 記述順序を使用しています )

comment は、Panel のタイトルになります



  画像の伸縮に関して



Flex では、Image コントロールを100%にすると、コンテナに対して、収まるように伸縮されますが、
片側だけの伸縮となるので、必ずいくらか隙間が空く事になります




ですから、以下の式によってロード直後にコンテナの縦横比率に内部の画像比率を
一致させると綺麗にフィットします

Windows で言うところの、コンテナのクライアント領域は Image の縦横と一致しています。
デフォルトでは、ScaleY は常に 1 であり、正しい比率を保っていますので、これを変更して
Image の縦横比率と一致させます

  
// myImage の縦横比率に画像を合わせる
myImage.scaleY =
	(myImage.height * myImage.contentWidth) / 
	(myImage.contentHeight * myImage.width);
  



  ソースコード全体

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	applicationComplete="initApplication()"
>

<mx:Style source="Style.css" />

<mx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import flash.external.*;
	import mx.rpc.events.*;

	// 初回の XML取得 リトライ用
	private var init_flg:Boolean = true;
	// イメージ数
	private var image_cnt:int = 0;
	// カレントイメージ番号
	private var image_no:int = 0;
	// スライドショータイマー
	private var myTimer:Timer;
	// XML データ
	private var xdata:XML;
	// FlashVars
	private var param:Object;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

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

		// 別ドメインの JavaScript からの呼び出しを許可する
		Security.allowDomain("*");

		// パラメータをプロパティとして持つ Object を取得
		param = mx.core.Application.application.parameters;

	}

	// *********************************************************
	// アプリケーションの初期化( 画面関係の初期化終了後 )
	// *********************************************************
	public function initApplication():void {

		firebug("initApplication");

		myTimer = new Timer(5000);
		// 読み込みタイマーを登録   
		myTimer.addEventListener("timer", timerStart );

		// 読み込み完了イベントを登録
		myImage.addEventListener(Event.COMPLETE, loadComplete);
		// 読み込みエラーイベント
		myImage.addEventListener(IOErrorEvent.IO_ERROR, loadError);

		// フェードアウト終了後のイベント登録
		fadeOut.addEventListener(EffectEvent.EFFECT_END, loadImages);


		// キャッシュさせない為に Math.random() の値を追加しています
		srv.url = param.xml+"?id=" + Math.random();
	
		// レスポンス結果のデータフォーマット
		srv.resultFormat = "e4x";
		srv.method = "GET";
		srv.send();

		// resultHandler へチェーン

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void {

		xdata = XML(e.result);

		base.title = xdata.options.comment;
		myTimer.delay = xdata.options.delay;
		// イメージの数
		image_cnt = xdata.images.length();
		// 表示するイメージ番号
		image_no = xdata.options.no;

		// 最初のロード
		myImage.source = xdata.images[image_no-1].url

		// データ取り込み完了
		init_flg = false;

	}

	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void {

		// データ取得に失敗( ネットワークエラーか xml が無い )
		// ので5秒後に再度リトライ
		myTimer.start();

	}

	// *********************************************************
	// 画像をロードして表示
	// *********************************************************
	private function loadImages(event:EffectEvent):void {

		firebug("loadImages");
		// フェードアウト後の処理

		var counter:int;

		if ( xdata.options.type == "random" ) {
			// 前回と連続しない画像番号
			while( 1 ) {
				counter = 1 + 
					Math.floor(Math.random() * (image_cnt - 1 + 1))
				if ( counter != image_no ) {
					image_no = counter;
					break;
				}
			}
		}
		// 順次表示
		if ( xdata.options.type == "seq" ) {
			image_no++;
			if ( image_no > image_cnt ) {
				image_no = 1;
			}
		}
		// 例外
		if ( xdata.options.type != "seq" && xdata.options.type != "random" ) {
			image_no++;
			if ( image_no > image_cnt ) {
				image_no = 1;
			}
		}

		myImage.source = xdata.images[image_no-1].url

		// 読み込み完了イベントへチェーンする

	}

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

		firebug(myImage.width+"|"+myImage.height);


		// myImage の縦横比率に画像を合わせる
		myImage.scaleY =
			(myImage.height * myImage.contentWidth) / 
			(myImage.contentHeight * myImage.width);

		// 表示させてフェードインを行う
		myImage.visible = true;
		// 並行してタイマーの起動
		myTimer.start();

	}

	// *********************************************************
	// タイマー処理開始
	// *********************************************************
	private function timerStart(event:TimerEvent):void {

		firebug("timerStart");
		// タイマーを一旦停止
		myTimer.stop();

		if ( init_flg ) {
			// データ取得に失敗しているのでリトライ
			srv.send();
		}
		else {
			// 非表示にしてフェードアウト
			// フェードアウト終了イベントにチェーンする
			myImage.visible = false;
		}

	}

	// *********************************************************
	// 読み込みエラーイベント
	// *********************************************************
	private function loadError(e:IOErrorEvent):void {

		// 次のイメージでリトライ
		myTimer.start();

	}



]]>
</mx:Script>

<mx:HTTPService
	id="srv"
	showBusyCursor="true"
	result="resultHandler(event)"
	 fault="faultHandler(event)" 
/>

<mx:Fade id="fadeOut" duration="2000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>

<mx:Panel
	id="base"
	title="横向き写真用スライドショー"
	paddingLeft="0"
	paddingRight="0"
	width="540"
	height="430"
>
	<mx:Image
		id="myImage"
		width="100%"
		height="100%"
		hideEffect="{fadeOut}" showEffect="{fadeIn}"
		visible="false"
	/>

</mx:Panel>

</mx:Application>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ