{{category HSP}}
!!!07. マルチメディア教材の応用例（複数の画像の操作と「透明」ボタン）
{{outline}}
----

!!07.1 複数の画像の操作

! 複数の画像をバッファに読み込んでおく
{{pre
		buffer 番号
		picload "画像ファイル名"
		
		buffer 2
		picload "georgia.jpg"
	
		buffer 3
		picload "mississippi.jpg"
}}


! buffer を使う際は、実際に使う基本画面をscreen命令で明示的に定義する（0番が基本）

{{pre
		screen 0, 横幅, 縦幅
		screen 0, 640, 640
}}


! <<仮想画面>>から基本画面への画像のコピー

! 1)　gmode　でコピーするモードと大きさを事前に指定
	gmode 0, 640, 480
* モード０で通常、モード１でメモリー間。モード０を使う。

! 2) 　gcopy で何番の仮想画面のどの範囲をコピペするかを指定する
	gcopy バッファ番号, 左上座標x, y, 横幅, 縦幅

	gcopy 2, 0, 0, 125, 98
（画像の座標は、「ペイント」に画像を読み込み調べると便利）

! 具体的な流れ
  (サブルーチン *rose参照)

{{pre
pos 200, 50					; 画像を配置する位置
	
gmode 0, 273, 262			; モード0で通常画像コピー, 画像の大きさをx, y で
gcopy 2, 0, 0;, 273, 262	; 画像の番号（buffer 2）, その画像の左上の座標, （大きさを指定できる）
							; 大きさの指定を省略したらgmodeで指定した大きさとなる
wait 200
color 255,255,255 : boxf	; 写真を出した部分を白色（255,255,255）で塗りつぶす（boxf）
;gcopy 1, 200, 50;, 273, 262	; 元の背景画像（buffer 1）に戻す
							; 左上は、上のposで開始点を指定したところ, （大きさを指定できる）
							; 大きさの指定を省略したらgmodeで指定した大きさとなる		
}}

! 具体例
*PictureFeedback2.zip

!!07.2 「透明」ボタン

* テキストのある部分（単語とか）をクリックして、反応するようにするには
* テキストを画像として読み込んでおき、
* 該当部分の範囲を指定して、
* そこをbuttonとして機能するようにする。

! 具体例
*IHaveADreamToday2.zip

! テキスト全体を画像として読み込む
* 事前に
{{pre
        buffer 1			; buffer 1に
        picload "IHaveADream.png"	; 画像を読み込む
}}
* あとで
{{pre
        *main; テキスト全体を表示
        
        gmode 0, 640, 480		; 表示モードと大きさ指定
        pos 0,0			; 左上角から、
        gcopy 1,0,0			; バッファ１の画像を表示
}}


! 該当部分の範囲を指定して、そこをbuttonとして機能するようにする。
{{pre
	pos 103, 154				; ボタンの左上の座標
	objsize 97, 24
		; そこから右へいくつ、下へいくつとエリアを指定（そのエリアをボタンとして使用）
	objimage 1, 103, 154, 103, 154, 103, 154
		; その指定した範囲をオブジェクト（ボタン）とする
		; 最初の番号が buffer番号 1
		; 次の数字の組み合わせが、表示する画像の中のボタンの左上の位置 103, 154
		; その次の数字の組み合わせが、ボタンを押したときの位置（省略可）
		; 最後の数字の組み合わせが、ボタンの上にマウスが来たときの位置（省略可）
	button gosub "", *mississippi
		; ボタンとしての機能、文字は表示させないので""とだけ
		; ボタン命令で、上で設定した画像がボタンとして使われる。
}}

! サブルーチンで、文字、音声、画像を提示する
{{pre
*mississippi
		mmplay 1
		pos 10, 510
	      	color 0,0,0
		mes "ミシシッピ州です。"
	
		gmode 1, 125, 98
		gcopy 3, 0, 0, 125, 98
	    		; 3番のバッファーがミシシッピーの画像
	
		wait 200
	
		pos 10, 510
		color 255,255,255 : boxf 10, 510
	
	return
}}
* wait 200 待った後、
* 注の部分（縦500より下の部分）を白く塗りつぶして、注の表示を「消す」