ActionScript Learning 110618

6.18.2011

Flashで本のページをめくる動作を表現する。

ActionScript Learning 110615で制作した「めくる動作の表現」を改良して、 本のページをめくるような表現を制作する。

ページの端をドラッグすることでページがめくれる。
本のように綴じられたページを表現するために、ドラッグ中に移動制限の設定を変更する必要があった。ページをめくる表現の演出として影を追加した。

SAMPLE VIEW CODE


package {
	
	import flash.display.*;
	import flash.text.*;
	import flash.filters.*;
	import flash.geom.*;
	import flash.events.*;
	import flash.ui.*;

	public class NMain extends MovieClip {
		
		//-------------------------------------------------------------------------------- Properties

		private var _this:*;
		private var _stage:Stage;
		
		
		//-------------------------------------------------------------------------------- Constractor
		
		public function NMain() {
			
			_this = this;
			_stage = stage;
			
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			
			Init();
		}
		
		
		//-------------------------------------------------------------------------------- Function
		 
		/**
		 * initialize
		 */
		public function Init():void {

			setup();
		}
		
		/**
		 * setup
		 */
		private var pagecounter:int;
		private var sheetwid:Number;
		private var sheethei:Number;
		private var hitarea:Number;
		private var doflip:Boolean;

		private function setup():void {
			
			pagecounter = 1;
			
			sheetwid = 280;
			sheethei = 280;
			hitarea = 40;
			
			setup_pages();
			
			setup_flippage_l();
			
			setup_flippage_r();
		}
		
		/**
		 * setup pages
		 */
		private var _page_l:MovieClip;
		private var _page_r:MovieClip;
		
		private function setup_pages():void {
			
			_page_l = page();
			_page_l.x = Math.round(_stage.stageWidth / 2 - sheetwid);
			_page_l.y = Math.round(_stage.stageHeight / 2 - sheethei / 2);
			
			page_settext(_page_l, pagecounter);
			_this.addChild(_page_l);
			
			_page_r = page();
			_page_r.x = Math.round(_stage.stageWidth / 2);
			_page_r.y = Math.round(_stage.stageHeight / 2 - sheethei / 2);
			
			page_settext(_page_r, pagecounter + 1);
			_this.addChild(_page_r);
		}
		
		/**
		 * setup flippage_l
		 */
		private var _flippage_l:MovieClip;
		private var _flip_show_l:MovieClip;
		private var _flip_hide_l:MovieClip;

		private function setup_flippage_l():void {
			
			_flippage_l = new NM_Bookflip();
			_flippage_l.x = _page_l.x;
			_flippage_l.y = _page_l.y;
			
			var args = {};
			args.stage = _stage;
			args.fliptype = "lr";
			args.sheetwid = sheetwid;
			args.sheethei = sheethei;
			args.hitarea = hitarea;
			
			_flippage_l.Init(args);			
			
			_flip_show_l = page();
			_flip_hide_l = page();
			
			_flippage_l.setPageShow(_flip_show_l);
			_flippage_l.setPageHide(_flip_hide_l);

			_flippage_l.addEventListener("start", flip_start_l);			
			_flippage_l.addEventListener("stop", flip_stop_l);			
			_flippage_l.addEventListener("over", flip_over_l);			
			_flippage_l.addEventListener("turn", flip_turn_l);			
			_flippage_l.addEventListener("return", flip_return_l);			
			_flippage_l.addEventListener("turned", flip_turned_l);			
			_flippage_l.addEventListener("returned", flip_returned_l);
			
			_this.addChild(_flippage_l);
		}
		//
		private function flip_start_l(eo:* = null):void {
			
			Mouse.cursor = "hand";
			
			_flippage_r.FlipOff();
			
			page_settext(_flip_show_l, pagecounter - 1);
			page_settext(_flip_hide_l, pagecounter);
			page_settext(_page_l, pagecounter - 2);
			
			_this.setChildIndex(_flippage_l, _this.numChildren - 1);
		}
		//
		private function flip_stop_l(eo:* = null):void {
			
			Mouse.cursor = "auto";
			
			_flippage_r.FlipOn();
		}
		//
		private function flip_over_l(eo:* = null):void {
			
			Mouse.cursor = "hand";
		}
		//
		private function flip_turn_l(eo:* = null):void {
			
			Mouse.cursor = "auto";
		}
		//
		private function flip_return_l(eo:* = null):void {
			
			Mouse.cursor = "auto";
		}
		//
		private function flip_turned_l(eo:* = null):void {
			
			pagecounter -= 2;	
			
			page_settext(_page_r, pagecounter + 1);
		}
		//
		private function flip_returned_l(eo:* = null):void {
			
			page_settext(_page_l, pagecounter);
		}
		
		/**
		 * setup flippage_r
		 */
		private var _flippage_r:MovieClip;
		private var _flip_show_r:MovieClip;
		private var _flip_hide_r:MovieClip;

		private function setup_flippage_r():void {
			
			_flippage_r = new NM_Bookflip();
			_flippage_r.x = _page_l.x;
			_flippage_r.y = _page_l.y;
			
			var args = {};
			args.stage = _stage;
			args.fliptype = "rl";
			args.sheetwid = sheetwid;
			args.sheethei = sheethei;
			args.hitarea = hitarea;
			
			_flippage_r.Init(args);			
			
			_flip_show_r = page();
			_flip_hide_r = page();
			
			_flippage_r.setPageShow(_flip_show_r);
			_flippage_r.setPageHide(_flip_hide_r);

			_flippage_r.addEventListener("start", flip_start_r);			
			_flippage_r.addEventListener("stop", flip_stop_r);			
			_flippage_r.addEventListener("over", flip_over_r);			
			_flippage_r.addEventListener("turn", flip_turn_r);			
			_flippage_r.addEventListener("return", flip_return_r);			
			_flippage_r.addEventListener("turned", flip_turned_r);			
			_flippage_r.addEventListener("returned", flip_returned_r);
			
			_this.addChild(_flippage_r);
		}
		//
		private function flip_start_r(eo:* = null):void {
			
			Mouse.cursor = "hand";
			
			_flippage_l.FlipOff();
			
			page_settext(_flip_show_r, pagecounter + 2);
			page_settext(_flip_hide_r, pagecounter + 1);
			page_settext(_page_r, pagecounter + 3);
			
			_this.setChildIndex(_flippage_r, _this.numChildren - 1);
		}
		//
		private function flip_stop_r(eo:* = null):void {
			
			Mouse.cursor = "auto";
			
			_flippage_l.FlipOn();
		}
		//
		private function flip_over_r(eo:* = null):void {
			
			Mouse.cursor = "hand";
		}
		//
		private function flip_turn_r(eo:* = null):void {
			
			Mouse.cursor = "auto";
		}
		//
		private function flip_return_r(eo:* = null):void {
			
			Mouse.cursor = "auto";
		}
		//
		private function flip_turned_r(eo:* = null):void {
			
			pagecounter += 2;	
			
			page_settext(_page_l, pagecounter);
		}
		//
		private function flip_returned_r(eo:* = null):void {
			
			page_settext(_page_r, pagecounter + 1);
		}
		
		
		/**
		 * page
		 */
		private function page():MovieClip {
			
			var _page:MovieClip = new MovieClip();
			_page.cacheAsBitmap = true;
			
			var g = _page.graphics;
			g.lineStyle(1, 0xEFEFEF, 1);
			g.beginFill(0xFFFFFF, 1);
			g.drawRect(0, 0, sheetwid, sheethei);
			g.endFill();
			
			g.lineStyle(1, 0x222222, 1);
			g.beginFill(0xFFFFFF, 1);
			g.drawRect(15, 15, sheetwid - 30, sheethei - 30);
			g.endFill();
			
			var _textmc = new textmc();
			_textmc.name = "textmc";
			
			_page.addChild(_textmc);
			
			return _page;
		}
		/** */
		private function page_settext(tgtpage:MovieClip, textnum:int):void {
			
			var _textmc = tgtpage.getChildByName("textmc");
			var t = _textmc.getChildByName("t");
			
			t.width = 0;
			t.height = 0;
			t.autoSize = "left";
			t.multiline = false;
			t.wordWrap = false;
			//t.border = true;
			
			var f:TextFormat = new TextFormat();
			f.size = 1000;
			f.color = 0x222222;
			f.letterSpacing = -10;
			f.indent = 0;
			f.rightMargin = -new Number(f.letterSpacing);
			
			t.defaultTextFormat = f;			
			t.text = new String(textnum);
			
			var offset = 60;
			
			_textmc.width = sheetwid - offset;
			_textmc.scaleY = _textmc.scaleX;

			if(_textmc.height > sheethei - offset) {
				
				_textmc.height = sheethei - offset;
				_textmc.scaleX = _textmc.scaleY;
			}
			
			_textmc.x = Math.round((sheetwid - _textmc.width) / 2);
			_textmc.y = Math.round((sheethei - _textmc.height) / 2);
		}
		

		
	}
}



category : ActionScript / Flash

Demonstrations

Feature Samples

Author

虹村 マキオウ (nizimura makiou)

猫と太極拳を愛する横浜在住のフリーランスクリエイターです。

logo

Demo and Sample

Category