画像をスクロールする

(サンプル一覧を表示する)

画像をスクロールするテストをしてみました。

スクロール機能は、scrollRect プロパティに矩形を設定することで実現します。
scrollRect の矩形から はみ出た部分の画像は、自動的に非表示になります。

写真素材は、LittleHut さんからお借りしました。
Flash の実行画面
画像をスクロールする

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

画像をスクロールする
矢印キーが効かない時は、
Flash の画面を 1 度クリックしてみてください。

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.geom.Rectangle;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.ui.Keyboard;
	
	/**
	 * 画像をスクロールするサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.jpg')]
		private var image:Class;
		
		/**
		 * 画像の入ったビットマップ
		 */
		private var bitmap:Bitmap;
		
		/**
		 * メッセージを表示するテキストフィールド
		 */
		private var textField:TextField;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化メソッド
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// 背景に画像の範囲を示す四角形を描く
			graphics.lineStyle(2, 0xCCCCCC);
			graphics.drawRect((stage.stageWidth - 170) / 2,
							  (stage.stageHeight - 140) / 2,
							  170,
							  140);
							  
			// テキストフィールドの準備
			textField = new TextField();
			textField.autoSize = TextFieldAutoSize.LEFT;
			textField.x = 10;
			textField.y = 200;
			textField.text = "矢印キーを押してください。\n押した方向に画像をスクロールします。";
			addChild(textField);
			
			// スクロール範囲の設定
			// 初期位置 : X = -10, Y = -10
			// 大きさ : 幅 = 170px, 高さ = 140px
			var rect:Rectangle;
			rect = new Rectangle(-10, -10, 170, 140);
			
			// ビットマップの準備
			bitmap = new image;
			// (画面の真ん中に表示)
			bitmap.x = (stage.stageWidth - 170) / 2;
			bitmap.y = (stage.stageHeight - 140) / 2;
			// (スクロール範囲の設定。はみ出た部分は表示されない)
			bitmap.scrollRect = rect;
			
			// ビットマップを画面に表示する
			addChild(bitmap);
			
			// キーが押された時のイベントを登録
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
		}
		
		/**
		 * キーが押された時のイベント
		 * @param	e
		 */
		private function onKeyDown(e:KeyboardEvent):void 
		{
			// 矩形を表すオブジェクトに、現在のスクロール位置を入れる
			var rect:Rectangle = bitmap.scrollRect;
			
			// 押されたキーによって、スクロール範囲を変える
			// スクロール範囲の最大値 (画像の端から 10px) を超えないように処理する。
			switch (e.keyCode) 
			{
				case Keyboard.LEFT:
					rect.x -= 5;
					if (rect.x < -10)
						rect.x = -10;
					break;
				case Keyboard.RIGHT:
					rect.x += 5;
					if (rect.x > 330 - 170)
						rect.x = 330 - 170;
					break;
				case Keyboard.UP:
					rect.y -= 5;
					if (rect.y < -10)
						rect.y = -10;
					break;
				case Keyboard.DOWN:
					rect.y += 5;
					if (rect.y > 250 - 140)
						rect.y = 250 - 140;
					break;
			}
			
			// スクロール範囲を設定
			bitmap.scrollRect = rect;
		}
		
	}
	
}
		

外部リンク