as3_外部XML読み込みで表示するスクロールバナー

前回のAS3でXML読み込みから、読み込んだだけじゃなにもならないので
よく企業ページなどで見かけるスクロールバナーのFLashを外部読み込みXMLで作りました。バリューコマースとかUnited arowsとか

バナー画像をjpg,pngなどで準備して、そのファイル名とリンク先URLをXMLで記入すれば使えます。
PHPなどのサーバーサイド技術と連携すれば、管理画面でバナー登録してFLASHの更新などができるようになります。

使い方

サイズ変更しない場合
デフォルトサイズは全体が640×40ピクセルで、1つのバナーサイズは160×40ピクセルになってます。
160×40ピクセルのバナー画像を準備して
banner_data.xmlをテキストエディタで開きバナーファイルの分だけ書き換えます。

<?xml version="1.0" encoding="utf-8"?>
<root>
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
	<banner image="バナー画像.jpg" link="リンク先"  target="_blank" />
</root>

scrbanner.swfをページに張り付ければOKです。

バナーサイズを変更したい場合は
scrbanner.flaを開いて、Flash上でステージサイズを任意サイズに変更してください
また、1つのバナーサイズはscrbanner.asファイルの
10,11行目の2か所を変更すればOKです。

package  {
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	
	public class scrbanner extends MovieClip {
		
		public const SCR_WIDTH:int = stage.stageWidth; 	//画面の横幅設定
		public const BNR_WIDTH:int = 160; 	//バナーの横幅設定
		public const BNR_HEIGHT:int = 40; 	//バナーの縦幅設定
		
		private const BNR_NUM:int = SCR_WIDTH / BNR_WIDTH; //1画面に入るバナー数
		private var loadURL:String;
		public var loadxml : XML;

ダウンロード

スクロールの解説

今回のスクロールはXMLに登録された分だけ表示して、繰り返し無限ループします。
無限ルールの方法は、1ループ分のバナーの塊の後ろに、もう1ループくっつけて1回ループが終わった時点で最初の位置に戻る。という処理を行ってます。
見た目には無限ループしてるように見えるという仕組みです。

ループするには、ステージ表示エリアに入る分のバナー(例だと4つ)を最後尾に追加しておく必要があります。

st1

ただし。バナー数がステージに入る数より多いときは、単純に後ろに4つ追加でいいのですが、もし、バナー数がステージに入る数より少なかった場合はちょっと面倒になります。
下記図参照。
st2

この場合、ステージを超える数までバナーの塊を繰り返して、ステージエリアを超えたら(赤い線)そこからステージの数分追加という処理をしています。
以下今回のサンプルコード。BNR_NUMにはステージに入るバナーの数がはいってます。

var i:int=0;
				while (i<BNR_NUM){  //ステージを超えるまで繰り返し
					for each(var element:XML in xmlList){
						//バナー作成
						bannermc[i]=new bannerclass(element.@image);
						bannermc[i].x = i * BNR_WIDTH;
						scrollmc.addChild(bannermc[i]);
						i++;
					}
				}
				//バナーの数 * サイズで、スクロールの判定用に、全体の最大サイズを設定 (左へスクロールなので -1をかける)
				scrollmc.bannerwidth = i * BNR_WIDTH *-1 ;
				
				//永久スクロール用に、画面に入る数のバナー数を、最後にまた1から追加
				var lastfour:int=i;
				while (i-lastfour<BNR_NUM){
					for each( element in xmlList){
						//バナー作成
						bannermc[i]=new  bannerclass(element.@image);																																					
						bannermc[i].x = i * BNR_WIDTH;
						scrollmc.addChild(bannermc[i]);
						i++;
						if(i-lastfour>=BNR_NUM) break;
					}
				}



Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)







as3_XMLを読み込む

actionscript3.0になってからXML関連がとても扱いやすくなりました。
E4Xというものでアクセスできるとか

まずASのXML読み込み処理自体はこんな感じで、URL Requestを作って読み込ます。

var url : URLRequest = new URLRequest("読みたいファイル名.xml");
url_loader = new URLLoader();
url_loader.load(url);
url_loader.addEventListener (Event.COMPLETE,LoaderInfoCompleteFunc);

//読み込みが終わったら
function LoaderInfoCompleteFunc (event : Event) {
	var loadxml:XML = new XML(url_loader.data);
	/*
		いろいろ処理
	*/
}

いろいろ処理の部分でXMLを解析して様々な処理をするんですが
そこが目的のデータにアクセスがしやすくなってます。
基本は. で階層をたどって
@を使うと属性の内容をとれます。

例えばこんなXMLで

<root>
	<shop id="112">
		<name>apple</name>
		<url>http://apple.co.jp</url>
	</shop>
	<shop id="52">
		<name>microsoft</name>
		<url>http://microsoft.co.jp</url>
	</shop>
	<shop id="32">
		<name>sony</name>
		<url>http://sony.co.jp</url>
	</shop>
</root>

2番目のshop の要素idを表示したい場合は

trace(loadxml.shop[1].@id);

結果は52です。

3番目のshop のnameの内容を表示したい場合は

trace(loadxml.shop[2].name);

結果はsony
という感じでドットシンタックスで分かりやすく目的の情報にたどり着けます。

あと、shopノードの数だけ繰り返してnameを表示したい場合は
XMLListを作って

var xmlList:XMLList = loadxml.shop;
for each(var element:XML in xmlList){
	trace(element.name);
}

結果は
apple
microsoft
sony
です。
as2から比べたらとても分かりやすくなりました。

今回のサンプルファイルはこちら



Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)