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>
  




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


[flex3]
claudebot
24/04/19 08:49:16
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