日本時代区分年表
/**
* Copyright aasdb ( http://wonderfl.net/user/aasdb )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/pOya
*/
package {
import flash.display.Sprite;
import flash.geom.Point;
[SWF(frameRate=60)]
public class Nihonshi extends Sprite {
// 日本史年表を表示させるテスト。
// スクロール部は、sowcodWonderflさんの
//「似非iPhone風スクロール」をそのまま利用しています。
private var _container:ScrollContainer;
private var _content:Content;
public function Nihonshi() {
this._content = new MyContent();
this._container = new ScrollContainer();
this._container.content = this._content;
this._container.size = new Point(465,465);
this.addChild(this._container);
}
}
}
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.display.Sprite;
import flash.display.Graphics;
// スクロールコンテナに入れるオブジェクトはこれを実装する。
interface Content {
function get sprite() : Sprite; // 描画オブジェクトを取得
function get size() : Point; // サイズを取得
}
// スクロールコンテナの中に入れてるコンテンツ。
class MyContent extends Sprite implements Content {
private var margin_top:Number = 150;
private var margin_left:Number = 100;
private var scale:Number = 200;
private var h:Number = 20;
private var data:XML =
<table>
<period>
<name>弥生時代</name>
<color>0xAA0000</color>
<from>0</from>
<to>300</to>
</period>
<period>
<name>古墳時代</name>
<color>0x00AA00</color>
<from>300</from>
<to>593</to>
</period>
<period>
<name>飛鳥時代</name>
<color>0x0000AA</color>
<from>593</from>
<to>710</to>
</period>
<period>
<name>奈良時代</name>
<color>0xAAAA00</color>
<from>710</from>
<to>794</to>
</period>
<period>
<name>平安時代</name>
<color>0x00AAAA</color>
<from>794</from>
<to>1192</to>
</period>
<period>
<name>鎌倉時代</name>
<color>0xAA00AA</color>
<from>1192</from>
<to>1333</to>
</period>
<period>
<name>南北朝時代</name>
<color>0x505050</color>
<from>1333</from>
<to>1392</to>
</period>
<period>
<name>室町時代</name>
<color>0x500000</color>
<from>1392</from>
<to>1467</to>
</period>
<period>
<name>戦国時代</name>
<color>0x005000</color>
<from>1467</from>
<to>1590</to>
</period>
<period>
<name>安土桃山時代</name>
<color>0xFF2222</color>
<from>1590</from>
<to>1603</to>
</period>
<period>
<name>江戸時代</name>
<color>0x22EE22</color>
<from>1603</from>
<to>1868</to>
</period>
<period>
<name>明治</name>
<color>0xFF2222</color>
<from>1868</from>
<to>1912</to>
</period>
<period>
<name>大正</name>
<color>0x000050</color>
<from>1912</from>
<to>1926</to>
</period>
<period>
<name>昭和</name>
<color>0x500000</color>
<from>1926</from>
<to>1989</to>
</period>
</table>
public function MyContent() {
this.drawSelf();
}
public function get sprite() : Sprite {
return this;
}
public function get size() : Point {
// コンテンツの大きさ
return new Point(5000,600);
}
public function drawSelf():void {
var g:Graphics = this.graphics;
for(var n:Number=0; n<21; n++){
var ty:TextField = new TextField;
ty.text = String(n*100);
ty.x = margin_left + scale*n;
ty.y = margin_top;
addChild(ty);
}
var count:Number = data.period.length();
for(var i:Number=0; i<count; i++){
var t:TextField = new TextField;
var p:Object = data.period[i];
var r:Sprite = new Sprite;
var yr:TextField = new TextField;
r.graphics.beginFill(Number(p.color));
r.graphics.drawRect(0,0,scale/100*(p.to-p.from),30);
r.x = margin_left + scale/100*p.from;
r.y = margin_top + h;
t.text = p.name;
t.textColor = 0xFFFFFF;
t.x = margin_left + scale/100*p.from + 10;
t.y = margin_top + h + 10;
yr.text = p.from;
yr.x = margin_left + scale/100*p.from;
yr.y = margin_top + h + 30;
addChild(r);
addChild(t);
addChild(yr);
}
}
}
// ベースのコンテナ
class AreaContainer extends Sprite {
private var _content:Content = null;
private var _size:Point;
private var _hitArea:Sprite;
private var _contentSprite:Sprite;
// setter and getter
public function set content(value:Content):void {
if(this._content != null) this._contentSprite.removeChild(this._content.sprite);
this._content = value;
this._contentSprite.addChild(this._content.sprite);
}
public function get content():Content { return this._content; }
public function set size(value:Point):void {
// サイズに合わせてクリック可能領域も調整
this._size = value;
this._hitArea.width = value.x;
this._hitArea.height = value.y;
}
public function get size():Point { return this._size; }
// constructor
public function AreaContainer() {
// クリック可能領域作成
this._hitArea = createHitArea();
this.addChild(this._hitArea);
this.hitArea = this._hitArea;
this._contentSprite = new Sprite();
this.addChild(this._contentSprite);
}
private function createHitArea():Sprite {
var sp:Sprite = new Sprite();
sp.visible = false;
var hitg:Graphics = sp.graphics;
hitg.beginFill(0x000000);
hitg.drawRect(0,0,100,100);
hitg.endFill();
return sp;
}
}
// スクロール機能付きコンテナ
class ScrollContainer extends AreaContainer {
private var _firstP:Point; // クリックした時点のマウス座標
private var _beforeP:Point; // 前フレームのマウス座標
private var _baseP:Point; // クリックした時点でのコンテンツの座標
private var _beforeContentP:Point; // 前フレームのコンテンツの座標
private var _velocity:Point; // 移動速度
private var _isMouseDown:Boolean;
private var _hScrollBar:ScrollBar;
private var _vScrollBar:ScrollBar;
override public function set size(value:Point):void {
super.size = value;
this._vScrollBar.height = value.y * value.y / this.content.size.y;
this._hScrollBar.width = value.x * value.x / this.content.size.x;
this._vScrollBar.x = this.size.x - this._vScrollBar.width;
this._hScrollBar.y = this.size.y - this._hScrollBar.height;
}
public function ScrollContainer() {
this._vScrollBar = new ScrollBar();
this._vScrollBar.width = 10;
this.addChild(this._vScrollBar);
this._hScrollBar = new ScrollBar();
this._hScrollBar.height = 10;
this.addChild(this._hScrollBar);
this._vScrollBar.visible = this._hScrollBar.visible = false;
// イベント登録
this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
this.addEventListener(Event.ENTER_FRAME,onEnterFrame);
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
private function onMouseDown(ev:MouseEvent):void {
this._isMouseDown = true;
this._beforeP = new Point(this.mouseX, this.mouseY);
this._firstP = this._beforeP.clone();
this._baseP = new Point(this.content.sprite.x, this.content.sprite.y);
this._beforeContentP = this._baseP.clone();
this._vScrollBar.visible = this._hScrollBar.visible = true;
}
private function onEnterFrame(ev:Event):void {
var maxP:Point = content.size.subtract(this.size); // 最大スクロール値
var newContentP:Point;
if(this._isMouseDown) {
// ドラッグ中
var newP:Point = new Point(this.mouseX, this.mouseY);
var diffP:Point = newP.subtract(this._firstP);
newContentP = this._baseP.add(diffP);
// 端オーバー時の処理
if(newContentP.x > 0) newContentP.x = newContentP.x / 2;
if(newContentP.y > 0) newContentP.y = newContentP.y / 2;
if(newContentP.x < -maxP.x)
newContentP.x = (maxP.x + newContentP.x) / 2 + -maxP.x;
if(newContentP.y < -maxP.y)
newContentP.y = (maxP.y + newContentP.y) / 2 + -maxP.y;
// 座標の適用
this.content.sprite.x = newContentP.x;
this.content.sprite.y = newContentP.y;
this._velocity = newContentP.subtract(this._beforeContentP);
} else {
if(this._beforeContentP.x > 0)
this._velocity.x = this._velocity.x * 0.9 - this._beforeContentP.x * 0.05;
if(this._beforeContentP.y > 0)
this._velocity.y = this._velocity.y * 0.9 - this._beforeContentP.y * 0.05;
if(this._beforeContentP.x < -maxP.x)
this._velocity.x = this._velocity.x * 0.9 - (maxP.x + this._beforeContentP.x) * 0.05;
if(this._beforeContentP.y < -maxP.y)
this._velocity.y = this._velocity.y * 0.9 - (maxP.y + this._beforeContentP.y) * 0.05;
newContentP = (new Point(this.content.sprite.x, this.content.sprite.y)).add(this._velocity);
this._velocity = new Point(this._velocity.x * 0.95, this._velocity.y * 0.95);
if(this._velocity.length < 0.1) {
this._velocity = new Point();
this._vScrollBar.visible = this._hScrollBar.visible = false;
}
this.content.sprite.x += this._velocity.x;
this.content.sprite.y += this._velocity.y;
}
// スクロールバー
this._vScrollBar.y = - this.size.y * this.content.sprite.y / this.content.size.y;
this._hScrollBar.x = - this.size.x * this.content.sprite.x / this.content.size.x;
this._beforeContentP = newContentP;
this._beforeP = newP;
}
private function onMouseUp(ev:MouseEvent):void {
this._isMouseDown = false;
}
}
class ScrollBar extends Sprite {
public function ScrollBar() {
this.drawSelf();
}
private function drawSelf() : void {
var g:Graphics = this.graphics;
g.beginFill(0x808080,0.5);
g.drawRect(0,0,50,50);
g.endFill();
}
}