千社札再び。

ということで、ひさびさの更新になってしまいまして(-_-;)

こんなのをつくってみました。


GUIで文字は入力しづらいので（マスクやらなにやらあるから。。）一括入力します。



分解するとこうなってます。


図形（ポリライン）部分


文字部分


マスク部分


全体のObjectTree


家紋の画像は、都度つくるのはめんどいので、
【グレイスケールPNGで作成して、階調をアルファチャンネルに変換して、RGBで色をのせる】
ということをやってます。

FLEXで本のページをめくるように見えるGUIな件。の２

とりあえずの完成形。

こんな感じで。

なんでいまさらこんなのつくったのかって、、、だから、、、

10000ページでも右綴でも左綴でも天綴でもできるようにしたからです。

その１

その２

FLEXで本のページをめくるように見えるGUIな件。

よくありがちな、FLEX(FLASH)で、ページをめくる的なGUIが必要となり、

作ってみました。

もちろん、いろいろ探したのですが、用途に合うものは皆無のため、自分でつくりました。

用途　→　10000ページでも動作すること。

要するに、動的に画像を取ってくるところや、右綴じ、左綴じ、天綴じなんかができるということですね。

ってことで、技術的には、三角関数を使って、座標を求めたりします。

読み込んでおくべき画像は、最低６面分ですね。

まぁ下の絵をみたらわかります。

ページをめくろうとしたときの、裏とその下の画像が、左右に必要なためです。

別の問題として、透視図的に見せるとか、ページをめくるときに曲線に見せるようなことはやりません。(iPadとかやってるけどね。。)

そんなことしなくても、まぁまぁそれらしくみえます。

但し、影はつけないとそれっぽくならないので、ページの境目なんかにはそれを使います。

ドロップシャドウはやってもいいけど、負荷もかかるのでやめときます。

影アリと影なしの比較。。

で、でれでれと計算とかして、つくります。

ノートに書いてみるの図。

つづきがあるかどうかは別にして、、

つづく。

FLEXのdataGridの配列の値を+=する件。

DataGridなるものがFLEXにある。
こんなコードを書く。

datAr = new Array(
  {n:1,  type:0,  x:1.5,  y:2.5},
  {n:2,  type:1,  x:1.5,  y:2.5},
  {n:3,  type:2,  x:1.5,  y:2.5}
);
DG.dataProvider = datAr;

ここに、datArはArrayであって、datAr[0].xは1.5という数値（Number）である。
しかし、

datAr[0].x　+= 20;

とすると、いつのまにやら、datAr[0].xがStringになっており、
datAr[0].x　が、"1.520"
という文字列になっている。

datAr[0].x　= Number(datAr[0].x) + 20;

とすれば、無事に、21.5になるのだが。
まぁ、こういうもんなのだろう。。

FLEXのObjectのdeleteする件の１

だいぶ更新をサボってしまった。。
さて、表題の件、かなりあれこれ迷った挙句、根本的にここらへんの仕組みを理解していなかったので、整理を含めて書いてみる。

---

まず、データが階層構造で存在している。（JSON）
これを、Objectに変換する。
これが、表示・編集する元データとなる。
しかし、これを表示するとなると、DisplayObjectにしなきゃいけない。
よって、それを包括したクラスを作成した。
こんな感じ。※実際にはこれをさらに派生させる。

public class spBase extends UIComponent{
。。。
public var obj:Object; // データの参照が入るよ。
。。。
//実際には、このインスタンスに、以下のように設定
xxx.obj = maindata.a[0].b.c;

要するに、

"maindata":{
  "a":[
　　　{
   "b":{
    "c":{
       "dat1":1,
       "dat2":2,
       "dat3":3
     },
     "c2":{
       "cat1":1,
       "cat2":2,
       "cat3":3
     }    
    }
   }
  ]
}

って感じで。
で、何がやりたいかというと、xxxインスタンスを削除し、maindata.a[0].b.c;を無きものにしたいのだ。
ｘｘｘインスタンス自体は、xxx.parent.removeChildAt(ｚｚ);
で消せる。しかし、そんなことをやっても、maindata.a[0].b.cは、生きてる。
ここから、悪戦苦闘が始まるのだ。

テスト開始

item:Object = new Object;
item.obj = mainData.a[0].b.c;

で、デバッガで見た状況。
たしかに同じアドレスをさしている。

もちろん、
item.obj = ｛｝；
なんて書けば、こうなる。まぁ当然である。

でも、
trace(delete item.obj);
と書くと、こうなる。
【その１】

でも、
trace(delete mainData.a[0].b.c);
と書くと、こうなる。
【その２】

問題なのは、traceしてみると、両方ともtrueを返すことだ。
その１はいいのだが（いや、厳密には良くない気がするが。）、、、その２は、明らかに他が参照しているので、falseが返されるべきなんじゃ。。。。。
まぁどっちにしても、両方実行しないと消せないのである。

ってことは、、、参照だけもってても消せないのである。
ってことは、、、やりたいと思うことが、、できないわけである。

FLASHでGUIの１

FLASH（FLEX）でGUIの場合に、まず、それぞれのエンティティを、
どういう形で持つかというところから始める。
もちろん、objectとして持つので、グラフィックスをもてる形でもつのは当然として、
ページがあったり、レイヤーがあったりするので、そこらへんの階層をどう考えるかだね。
データ上の階層と表示やGUI上の階層は一致させる必要がないけど、
たいがい、一致させとかないと、バグる元。
ってことで、FLASH（FLEXではなく）でやってたときは、
movieClipかSpriteでなんでもかんでもやってたんだけど、
FLEXではSpriteはそのまま使えないから、UIComponentでやることになるのかな。
それが最良かどうかは、やってみないとわからないので、
とりあえず、それで、POLYや画像を表示させたり、編集したりとかしてみて判断しよう。
ということで、ポリを書いてみることにする。

順を追うと、、こんな感じでテスト。
●UIComponentを継承した基本クラスを作る。
●その基本クラスをExtendsした、item用のクラスを作る。
●itemを動的に生成して、その中のgraphicsにポリを入れてみる。
●mouseDown-Move-Upに対応させて移動させてみる。

ここで、随分前にちょっと書いた、mouseイベントを最下層で拾うクラスを仕込んでみる。
要するに、
★itemにMouseDonwがくる
↓
★最下層Mouseイベント用クラスの、MouseDown/Up/Moveイベントを、
itemのpublic関数に持ってくるように設定する。

　↓

★itemにMouseDonwがくる

↓
★処理をしたあと、イベントの転送先を削除する

で、基本クラス。

public class spBase extends UIComponent{
	public var mother:Object;
	//--------------------
	function spBase(){

	}
	//--------------------
	public function init(f:Object):void{
		mother = f;
		this.addEventListener(Event.REMOVED_FROM_STAGE, removed);
		//-------------------
		//	MouseDown
		//-------------------
		var own:Object = this;
		this.addEventListener(MouseEvent.MOUSE_DOWN,
			function (e:MouseEvent):void{
				mother.app.getKAM().setMAll(own.fd,own.fu,own.fm,own.fo);
			}
		);
	}
	//--------------------
	protected function fd(e:MouseEvent):void{
		trace("Down\n");
	}
	protected function fu(e:MouseEvent):void{
		trace("Up\n");
		mother.app.getKAM().setMClear();
	}
	protected function fm(e:MouseEvent):void{
		trace("Move ");
	}
	protected function fo(e:MouseEvent):void{
		trace("Over  ");
	}
	//--------------------
	//	like a destructer
	//--------------------
	private function removed(e:Event):void{
		removeEventListener(Event.REMOVED_FROM_STAGE, removed);
	}
}

で、itemクラスの雛形。

public class spItem extends soul.spBase{
	override protected function fd(e:MouseEvent):void{
		trace("spItem::Down\n");
	}
	override protected function fu(e:MouseEvent):void{
		trace("spItem::Up\n");
		mother.app.getKAM().setMAll(null,null,null,null);
	}
	override protected function fm(e:MouseEvent):void{
		trace("spItem::Move ");
	}
	override protected function fo(e:MouseEvent):void{
		trace("spItem::Over  ");
	}
}

で、呼ぶ時。motherは、MXMLでのthisを渡している。。(-_-;)

testobj = new soul.spItem();
testobj.init(mother);//mother:MXMLのthis

FLEXでFLASH（AS）っぽく画像を表示

FLEXで画像を読み込んで表示。一番単純にして重要な機能であるが、
FLEXのサンプルとかHowTo本を見ると、
【まずImageコンポーネントを～～】
なんていう、私の趣味とかけ離れた手法がかかれている。
まぁそれはそれとして、どうActionScriptに展開されるかを確認するのも重要だが、
ここでは、FLASH-CS3っぽく表示させてみる。
すると、こんな感じ

var loader = new Loader;
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e){
 var bmp = new Bitmap;
 bmp.bitmapData = loader.content.bitmapData.clone();
 stage.addChild( bmp );
});  
var urlfile = "http://localhost/ren2.jpg";
var UR=new URLRequest(urlfile);
UR.method = URLRequestMethod.POST;
loader.load(UR);

まぁ、いままでとなんら変わることもなく実行できましたね。
もちろん、これはこれとして、実際はクラスでキッチリ書きますYO。
まぁ実際はコンテナっぽいものを作って、そこに描画させることになるのかな。
だから、FLASH-AS3だと、Spriteかなんかで

var sp = new Sprite;
sp.addChild(bmp);
stage.addChild( sp );

的な。

でも、こんなことするなら、わざわざFLEXじゃなくて、FLASHですればいいじゃんって
ことなんですけど、、、まぁ、気分で使い分けてるだけっす。
mxなら、

var temp : mx.controls.Image = new mx.controls.Image;
temp.x = 30;
temp.y = 85;
temp.width = 205;
temp.height = 216;
temp.source = "http://localhost/ren2.jpg";
addElement(temp);

ですかねー。

マウスイベントを最下層でひろうために。

CS3の時代にFlashで作ったAS3を見返して、FLEX４で実行させてみます。
クラスとしては後述の【keyAndMouse】クラスとしました。
keyAndMouseと言いながらも、keyは、ctrlとshiftをチェックするだけです。
要するにFLASHの、階層全てにイベントが発生するという特徴をいかして、
たとえボタンをクリックしてもkeydownがとれるように使います。
何につかうかといえば、何らかのGUIとしか言いようがないですけど、
今作ってるものには必要なんで＾＾；＾＾；
ということで、使い方は、mxmlのなかで、

～～略～～
public function MD(e){
 LL.text = "--M1---" + kam.getCS();
}
public function MU(e){
 LL.text = "--M2---" + kam.getCS();
}
public function MM(e){
 LL.text = "--M3---" + (ct++) + "/ " + kam.getCS();
}
public function MO(e){
 LL.text = "--M4---" + kam.getCS();
}
～～略～～
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
 kam = new keyAndMouse(this); 
 kam.setMD(MD);
 kam.setMU(MU);
 kam.setMM(MM);
 kam.setMO(MO);
～～略～～

って感じです。
要するに、、最下層のマウスイベントを、自分のクラス内にもってきたい時につかうのです。
まぁサンプルはどっちにしても同じ階層ですけど、このkamなるインスタンスを、引数として
別のクラスとかにもってって、そこで使うことをイメージしてます。
CS3のFLASHで作ってたときは、コンストラクタの引数はthisではなくstageでしたが、
引数をthis.stageにすると、
メインスレッド (中断 : TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。)
といって怒られるので、thisに変更したのですが、実は、単に書く場所がマズかっただけで、
applicationCompleteHandlerで設定してやればOKでした。怠慢でした^^;^^;

ってことで、クラスは以下。たいしたことないっすけどね。
あぁ、あんまり型を書かない人なんで、すんません。。

package{
 //----------------------------------
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.ui.*;
 //----------------------------------
 public class keyAndMouse extends Sprite{
  var father  = null;
  var bControl = false;
  var bShift  = false;
  var funcMD  = null; // mouseDown event handler
  var funcMU  = null; // mouseUp   event handler
  var funcMM  = null; // mouseMove event handler
  var funcMO  = null; // mouseOver event handler
  var bKeep  = false;
  //--------------------
  var bMouseDown = false;
  //--------------------
  public function setMD(f){ funcMD = f;  }
  public function setMU(f){ funcMU = f;  }
  public function setMM(f){ funcMM = f;  }
  public function setMO(f){ funcMO = f;  }
  //--------------------
  public function getCS(){
   if(bControl && bShift) return 3;
   else if(bShift)   return 2;
   else if(bControl)  return 1;
   return 0;
  }
  //--------------------
  public function md(e){ if(funcMD) funcMD(e); }
  public function mu(e){ if(funcMU) funcMU(e); }
  public function mm(e){ if(funcMM) funcMM(e); }
  public function mo(e){ if(funcMO) funcMO(e); }
  //--------------------
  function keyAndMouse(f,bb:Boolean=true){
   bKeep = bb;
   father = f;
   this.addEventListener(Event.REMOVED_FROM_STAGE, removed);
   //-------------------
   // keyDown
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_DOWN,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = true;
     if(e.keyCode == Keyboard.SHIFT)  bShift = true;
    }
   );
   //-------------------
   // keyUp
   //-------------------
   father.addEventListener(KeyboardEvent.KEY_UP,
    function (e){
     if(e.keyCode == Keyboard.CONTROL) bControl = false;
     if(e.keyCode == Keyboard.SHIFT)  bShift  = false;
    }
   );
   //-------------------
   // mouseDown
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_DOWN,
    function (e){
     if(bMouseDown){
      if(funcMU) funcMU(e);
      bMouseDown=false;  // 微妙な仕様
      return;     // 
     }
     bMouseDown = true;
     if(funcMD) funcMD(e);
    }
   );
   //-------------------
   // mouseUp
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_UP,
    function (e){
     bMouseDown = false;
     if(funcMU){
      funcMU(e);
      if(!bKeep){
       funcMD = null;
       funcMU = null;
       funcMM = null;
      }
     }
    }
   );
   //-------------------
   // mouseMove
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_MOVE,
    function (e){
     if(funcMM) funcMM(e);
    }
   );
   //-------------------
   // mouseOver
   //-------------------
   father.addEventListener(MouseEvent.MOUSE_OVER,
    function (e){
     if(funcMO) funcMO(e);
    }
   );
   //-------------------
  }
  //--------------------
  // like a destructer
  //--------------------
  private function removed(e:Event):void{
   removeEventListener(Event.REMOVED_FROM_STAGE, removed);
  }
  //--------------------
 }
 //----------------------------------
}

FLEXのMain.mxmlはどのように実行されるのか

まぁいわゆるMXMLというやつ。
これをコンパイルするとどうなるかというと、いったんActionScriptになるようですよね。
ということで、プロジェクト-プロパティでFLEXコンパイラの追加引数に【-keep】を追加。
さらに、ボタンをひとつ配置して、クリックイベントとだけ追加して、コンパイル。
MXMLとしては、こんな感じになる

<fx:Script>
  <![CDATA[
   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
   }

  ]]>
 </fx:Script>

変換されると、こんな感じ

public class Main
    extends spark.components.Application
{
……略……
protected function BTNID_clickHandler(event:MouseEvent):void
{
 // TODO Auto-generated method stub
}
……略……

ということで、Main.mxmlというのが、Mainクラスになって、<fx:Script>の中が、そのままMainクラスになるという単純な構造のようだ。
ということで、最下層でいろいろやりたければ、

<fx:Script>
  <![CDATA[
   var aaa:Number = 0;
   public function test():void
   {
    var d:Date = new Date();
    var s:String = d.toTimeString();
    trace(s);
    trace(aaa++);
   }

   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    test();// TODO Auto-generated method stub
   }

  ]]>
 </fx:Script>

なんて、適当なことをかいても、無事に、

public class Main
    extends spark.components.Application
{
……略……
　var aaa:Number = 0;
   public function test():void
   {
    var d:Date = new Date();
    var s:String = d.toTimeString();
    trace(s);
    trace(aaa++);
   }

   protected function BTNID_clickHandler(event:MouseEvent):void
   {
    test();// TODO Auto-generated method stub
   }

という風に変換されます。
ということで、あとは、【creationComplete】や【initialize】あたりに初期設定をいれてあれこれいじくりまわせばそれでOKってことですね。
うんそっか。簡単な話でしたね。

キーとマウスのハンドリング。

自分で書いた以前のコードを見たところ、

キーのup/down

マウスのup/down/move/over

をstageから所得するようなクラスを作成していた。

これが正しいかどうかわからないが、とりあえず、この方法としてみる。

正確には、stageから所得ではなく、

コンストラクタの引数にstageを渡しているだけの話である。

なんでstageからとるかというと、最下層から取りたかっただけである。

ActionScriptのイベントは、下の層から発生するので、かならずstageで拾うことができた気がするのだが、結論から言うととれないこともあった。

それはそれとして、もう忘れてしまったので、実際に出現したときに対応を考える。

→たしか、、なんらかのコントロールをはりつけると、、shiftは拾えるがctrlは拾えないという事態が発生したような記憶がある。

ということで、マウスとキー（文字入力という意味ではなく、主に、ctrl/shiftあたり）の所得は、stageのみで行い、本来イベントの欲しいところのSprite/MovieClipにイベントハンドらっぽい関数を設定して、そこを呼ぶようにする。
stageのみで行い、本来イベントの欲しいところのSprite/MovieClipにイベントハンドらっぽい関数を設定して、そこを呼ぶようにする。

この画像は、http://gelsol.sub.jp/learning/displaylist/001.html
からの引用です。