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付)

24 comments.

  1. […] ダウンロード ] 前回のスクロールバナーを減速イージングで表現するとこんな感じ。 kml_flashembed […]

  2. こんにちは。
    見ていて非常に良かったので、参考にさせていただきました。
    ステージサイズを縦方向に変更した場合、初期表示位置(Y座標)を変更したいのですが、Y座標指定がわからずにいます。(ToT)
    よろしければ、ご指南いただけますか?
    バナー設定、line10,11あたりに追記すれば、指定できるのではと思っているのですが。

  3. ページ閲覧ありがとうございます!!!

    いただいたご質問なのですが、ステージが広い場合に、スクロールバナーの座標をステージの下のほうへ移動したい。ということで良かったでしょうか?
    その場合は、1つ1つのbannerをグループ化してある、scrollクラスというのがあるので、scrollオブジェクトのy 座標に数値をいれれば可能です。
    ダウンロードできるサンプルの中でいうと、scrbanner.asの中の36行目でscrollオブジェクトを作っていてその次の行で、x とy に
    scrollmc.y=scrollmc.x =0;
    と言った感じで0座標をいれています。
    この行を
    scrollmc.x =0;
    scrollmc.y=200;
    などに変更すれば、バナー全体のy座標が200に移動します。

    何か別なことでしたら、またご連絡ください。

  4. 早速のご連絡、厚く御礼申し上げます。
    ご指南いただいたおかげで、意図した座標に配置することができました。
    scrollクラスで座標を設定しているとはつゆ知らず、ソース全体を見ることをせず、見落としておりました。
    親切にご回答いただきましたことに深謝いたします。ありがとうございました。

  5. はじめまして。ようやくActionScript3.0を触り始めた初心者です。
    スクロールの解説、大変解りやすく参考になりました!

    ロールオーバーした時にスクロールを止めるにはどうしたら良いのかと思い、
    考えてみたのですが解らず・・・
    ENTER_FRAMEをなんとか止めないとダメだと思っているのですが、
    お時間ございましたらご教示していただければ幸いです。

  6. はじめまして、閲覧ありがとうございます。
    スクロールを止めるということですが、こんな方法でやってみました。(以下解説)
    現在常にスクロールしているEnterFrameの中にスクロールするかしないかのスイッチをつけて
    そのスイッチがON(true)のときはスクロールする、OFF(false)のときはスクロールしない。
    というような処理を追加します。
    そして、バナークラスのロールオーバー、アウトに、そのスイッチをON,OFFするような処理を書いておけば、
    スクロールを止めることが出来るかと思います。
    こちらからサンプルをダウンロードください。
    bannerclass.asとscrollclass.asに修正をしていますが新規追加の行にはコメントで「新規追加」と書いてありますのでご確認ください。

  7. 素早いご回答ありがとうございました!
    removeEventListenerで止めてから再度addEventListenerしようかと考えていたのですが、
    どう処理を書いたら良いのか???でした。
    スマートな解決方法をご教示していただき感謝です。
    さらに解りやすいサンプルは非常に助かりました!ありがとうございまいした!

  8. はじめまして。ちょうどこのようなサンプルをさがしていたところで、非常に助かっています。
    さて、自作のFLASHに貴殿のサンプルを組み込んでみたところ、最上階層にスクロールバナーが表示されます。
    これを、(ASに何らかのパラメーターを加えて)任意のレイヤーに表示させることは可能でしょうか?

  9. 閲覧ありがとうございます。

    asで作成したオブジェクトを任意のレイヤーに表示したい場合に分かりやすい方法として
    配置したいレイヤー上に空MCのダミーオブジェクトを配置して、そのMCにaddChild方法があります。

    サンプル用意しましたので、見ていただくと分かると思います。
    http://hondakiyoshi.com/as/scrollbanner/as3_scrbanner_dummy.zip
    レイヤー上にDummyというMCを配置して、scrbanner.asの63行目で
    addChild(scrollmc);として最上位にaddChildしている部分を
    Dummy.addChild(scrollmc);と書き変えてDummyの中に配置します。

    この方法を利用すると、以前にBB様が質問されていた、任意の座標に配置というのもスクリプトで数値指定ではなく
    ステージ上で配置できるので、視覚的に場所指定したい場合にも応用できます。

  10. ご回答ありがとうございます!
    ご提示いただいたサンプルでやりたかったことが実現できました。
    ダミーMCにaddChildするテクは、今後いろいろな場面で使えそうです。

    #なぜか自分のFLAに組み込んでパブリッシュするとReferenceError: Error #1056が出てしまい悩んだのですが、調べてみるとパブリッシュ設定の「ステージのインスタンスを自動宣言」にチェックすればいいと分かりました。
    このサンプルを使われる他の方も気を付けてください。

  11. 初めまして。かなり嬉しいサンプルで助かっております。
    こちらのサンプルを100%表示で使った際にループしていて、最後尾まできたら設定したx軸の所で前が消えてまたループとなってしまうんですが、なにか解消法はありますか?

  12. こんにちは。とても勉強にもなり、実用性のあるサンプルを公開していただいて、感謝しています。
    さて、バナー部分をページを開くたびにシャッフルするようにしたいと思い、function shuffleを作成してLine06を変更し、1つめのグループは処理を行うことができました。
    しかし、2つめのループは、1つめと同じようにLine20を変更してもうまくいきません。
    配列をうまく使えば解決できるのではと思うのですが、可能でしょうか。
    どうぞ、宜しくお願いします。

  13. >mk2さん
    シャッフルは、XML読んでバナーを並べるときに可能と思いますが、line06とかLine20とはどこのことでしょうか??

  14. はじめまして。ctionScript初心者なのですがとても勉強になりました。
    今、スクロールにマウスの左右の動きでスクロールする方向を変える処理を試みているのですが、うまくいきません。このような処理は可能でしょうか?

  15. 逆に動いた場合の処理をいれることで可能です。

  16. 以前、お世話になりました者です。
    お手数お掛けしますが、再度、ご質問させてください。
    as側で固定している画像サイズを↓
    public const BNR_WIDTH:int = 160; //バナーの横幅設定
    public const BNR_HEIGHT:int = 40; //バナーの縦幅設定
    autoにして読み込むxml側のサイズで表示することは可能ですか?
    幅が一緒でない画像を固定幅に変形させないで表示したいのですが。
    お忙しいところ恐縮ですが、対応法がございましたらご教授ください。

  17. 初めまして。
    現在、AS3.0の勉強を始めた者です。
    こう言ったサンプルをダウンロードして実際中身が見えるのが大変勉強になります。

    この横スクロールは、hoverした時、投下処理で若干薄めになってますが、
    そこの記述がどこになるのか分かりません。
    逆に、ここがいじれればhoverした際、枠や矢印画像を乗せる等出来ると思うのですがご教授頂ければと思います。

  18. すばらしいサンプルをありがとうございます。
    上記のスクロールを止める方法で、サンプルと同じように、bannerclass.asとscrollclass.asに修正をしましたが、
    ********************************
    TypeError: Error #1010: 条件は未定義であり、プロパティがありません。
    at bannerclass/bnover()
    TypeError: Error #1010: 条件は未定義であり、プロパティがありません。
    at bannerclass/bnout()
    ********************************
    とFlash cs4ではoutputが出て、スクロールを止めることができません。
    存在しないプロパティにアクセスしたときのランタイムエラーですか?
    お忙しい中、申し訳ありませんが、ご教授いただけますか?

  19. scrbanner.asの最後の
    Dummy.addChild(scrollmc);
    Dummyを削除すると、問題なくスクロールが止まり、エラーもでませんでした。
    しかし、ダミーMCのテクはすばらしいので利用したいと苦戦しております。ご教授いただければ大変助かります。よろしくお願いします。

  20. 香月様
    お返事おそくなりました。もう解決してるか、わかりませんが
    ホバーの処理はASで書いてません。ライブラリのbunner_fadeinで普通にトゥイーンアニメーションしていますのでそこのアルファを変更で直せます。

  21. CS4がないのでわからないですが、CS5で確認したところ、サンプルのダウンロードファイルは普通にコンパイルできました。止めるサンプルを再度ダウンロードして確認いただけますか?

  22. はじめまして。私は現在、AS3.0の勉強を始めて1週間のものです。
    毎日頭から煙を吐きつつ、こちらのサンプルも参考にさせていただいております。
    ありがとうございます。

    質問なのですが
    このバナー群を2行にしたい場合はどうしたらよいのでしょうか?
    加えて1行目と2行目のバナーの内容も変えたいと思っております。

    ご教授いただけたら幸いです。

  23. 初めまして。Flash as全くの初心者&勉強中です。。
    ここを拝見しまして大変わかりやすく勉強になります。
    早速、ご質問させて頂きたいのですが、横スクロールを縦方向
    『下から上に』といった変更は可能でしょうか?
    お手数おかけしますが、お時間のある時にでも
    お教え頂けたましたら幸いです。

  24. 縦と横は、Xに行なってる処理を全部Yに変えればいけると思います。

Post a comment.