サンプル 08: モーフィングと絵付きボタン


ソースは以下になります。

 
     1	#!/usr/local/bin/ruby
     2	
     3	# ビットマップとMorphのテスト
     4	
     5	# はできないことがわかりました。
     6	
     7	# ので、ボタンのテスト
     8	
     9	require 'ming'
    10	# include Ming
    11	
    12	# set_scale(1.0)
    13	
    14	m = SWFMovie.new;
    15	m.setDimension(400,400);
    16	m.setRate(10);
    17	
    18	f = SWFMorph.new;
    19	
    20	s1 = f.getShape1();        ← モーフィング元のShape
    21	s2 = f.getShape2();        ← モーフィング先のShape
    22	
    23	s1.setLine(2,0,255,255);   ← 変形元の図形を描画
    24	s1.drawLineTo(200,200);
    25	s1.drawLineTo(0,0);
    26	s1.drawLineTo(200,200);
    27	s1.drawLineTo(0,0);
    28	
    29	s2.setLine(2,255,0,0);     ← 変形先の図形を描画
    30	s2.movePenTo(0,0);
    31	s2.drawLineTo(0,200);
    32	s2.drawLineTo(200,200);
    33	s2.drawLineTo(200,0);
    34	s2.drawLineTo(0,0);
    35	
    36	i = m.add(f);              ← モーフィングを追加
    37	i.moveTo(0,0);
    38	
    39	b=SWFBitmap.new("oden0.dbl");  ← ビットマップ読み込み
    40	width=b.getWidth;
    41	height=b.getHeight;
    42	
    43	su=SWFShape.new;
    44	f = su.addFill(SWFBitmap.new("oden0.dbl"), SWFFILL_CLIPPED_BITMAP);
    45	su.setRightFill(f);
    46	su.movePenTo(0,0);
    47	su.drawLineTo(width,0);
    48	su.drawLineTo(width,height);
    49	su.drawLineTo(0,height);
    50	su.drawLineTo(0,0);             ← ビットマップで埋められた四角を描画
    51	
    52	sd=SWFShape.new;
    53	f = sd.addFill(SWFBitmap.new("oden1.dbl") , SWFFILL_CLIPPED_BITMAP);
    54	sd.setRightFill(f);
    55	sd.movePenTo(0,0);
    56	sd.drawLineTo(width,0);
    57	sd.drawLineTo(width,height);
    58	sd.drawLineTo(0,height);
    59	sd.drawLineTo(0,0);
    60	
    61	b=SWFButton.new;
    62	b.setUp(su);
    63	b.setOver(su);
    64	b.setDown(sd);
    65	b.setHit(sd);                   ← ボタンにビットマップを張り付ける
    66	
    67	i2=m.add(b);
    68	i2.moveTo(200,100);
    69	
    70	r = 0;
    71	for j in (0 .. 10)
    72	  i.setRatio(r);                  ← モーフィング率を指定
    73	  r += 0.1;
    74	  m.nextFrame;
    75	end
    76	
    77	r = 1.0;
    78	for j in (0 .. 10)
    79	  i.setRatio(r);                  ← モーフィング率指定。
    80	  r -= 0.1;
    81	  m.nextFrame;
    82	end                               ← 0〜1.0をいったりきたり
    83	
    84	m.save('example08.swf');


この例では二つのことをしています。

モーフィング

モーフィングは以下の手順で行ないます。
  1. モーフィングオブジェクトの生成 (18行目)
  2. 変形元の図形を描画 (23〜27行目)
  3. 変形先の図形を描画 (29〜34行目)
  4. モーフィングオブジェクトを表示 (36行目)
  5. 変形率を指定(70〜82行目。この例では、0.0〜1.0を往復する)
モーフィングは、変形元と変形先の図形が適切に対応していないとできません。 また、ビットマップのモーフィングのような高度な真似はできません。
どうやら、変形元と変形先で描画の「点」の対応がとれている場合にだけ、その点を 移動させる変形というのが可能なようです。

ビットマップの表示

ビットマップの表示は塗りつぶしで実現します。ビットマップを読み込んで、 塗りつぶし図形に指定します(44行目)、次にビットマップの大きさの四角を 塗りつぶしながら描画します(45行目〜50行目)。この処理を行なう、もう少し 汎用的な関数は以下になります。

 
def makeShapeWithBitmap(filename)
  b=SWFBitmap.new(filename);
  width=b.getWidth;
  height=b.getHeight;

  s=SWFShape.new;
  f = s.addFill(b, SWFFILL_CLIPPED_BITMAP);
  s.setRightFill(f);
  s.movePenTo(0,0);
  s.drawLineTo(width+2,0);
  s.drawLineTo(width+2,height+2);
  s.drawLineTo(0,height+2);
  s.drawLineTo(0,0);

  return s;
end


Masahiko KIMOTO <kimoto@ohnolab.org>
Last modified: Fri Dec 26 14:56:49 JST 2003