トップ 差分 一覧 Farm ソース 検索 ヘルプ PDF RSS ログイン

TextForHSP07

*disclaimer
178043

[HSP]

07. マルチメディア教材の応用例:複数の画像の操作と「透明」ボタン



 07.1 複数の画像の操作


複数の画像をバッファに読み込んでおく

		buffer 番号
		picload "画像ファイル名"

		buffer 2
		picload "georgia.jpg"
	
		buffer 3
		picload "mississippi.jpg"


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


		screen 0, 横幅, 縦幅
		screen 0, 640, 640


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


1) gmode でコピーするモードと大きさを事前に指定

gmode モード, 大きさ

gmode 0, 640, 480
  • モード0で通常、モード1でメモリー間。
    • 原則、モード0を使う。

2)  gcopy で何番の仮想画面のどの範囲をコピペするかを指定する

gcopy バッファ番号, 左上座標x, y, 横幅, 縦幅

gcopy 2, 0, 0, 125, 98

(画像の座標は、「ペイント」に画像を読み込み調べると便利)

具体的な流れ

 (サブルーチン *rose参照)

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で指定した大きさとなる		

具体例


 07.2 「透明」ボタン


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

具体例

  • IHaveADreamToday2.zip

IHaveADreamToday2.hsp(6)

テキスト全体を画像として読み込む

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


該当部分の範囲を指定して、そこをbuttonとして機能するようにする。

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

サブルーチンで、文字、音声、画像を提示する

*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より下の部分)を白く塗りつぶして、注の表示を「消す」

 07.3 マルチメディア・リーディング教材例

CuriosityRover.zip(5)

; Curiosity Rover 01
; copyleft 2017-07-12 sugiura@nagoya-u.jp

; テキストを画像として読み込んでおいて、
; 文中の語句(のエリア)を指定して、注を出す。

;-----------------------------------------------------------------------------

;--------------------------------------------------------------------------------------
; 注に使う音声を読み込んで番号をつけておく

	mmload "narration.mp3", 0
	mmload "mechanics.mp3", 1
	mmload "curiosity.mp3", 2
	mmload "algorithm.mp3", 3
	mmload "traction.mp3", 4
	mmload "jet.mp3", 5
	mmload "pasadena.mp3", 6
	mmload "extensive.mp3", 7
	mmload "signs.mp3", 8
	mmload "rugged.mp3", 9
	mmload "level.mp3", 10
	mmload "uneven.mp3", 11
	mmload "incline.mp3", 12
								
	
;------------------------------------------------------------------------------

	buffer 0							; 画像を事前に読み込んでおく場所の番号
	picload "curiosity-text.jpg"		; 画像を読み込んで、bufferに入れておく

;----------------------------------
; 注に使う画像に番号をつけていく

	buffer 2
	picload "rover.jpg"
	
	
	buffer 3
	picload "pasadena.jpg"
	
	
;-------------------------------------------------------------------------------
	screen 1, 660, 660			; ウインドウの初期化 0番、ウインドウの大きさの指定
								; bufferを使って画像を読み込んだときは、明示的にウィンドウを指定する


;------------------------------------------
*main
; テキスト全体を表示
	gsel 1
	
	gmode 0, 657, 479			; 表示モードと大きさ指定
	pos 0,0						; 左上角から、
	gcopy 0, 0, 0, 657, 479		; バッファ0の画像を表示
	
;------------------------------------------
; 一つ目のボタン:

	pos 127, 8				; ボタンの位置
	objsize 100, 20				; ボタンにする画像のサイズ(大きな画像を読み込んでおいて、その一部を
								;  ボタンとして使用することもできる。)
								; ボタンの位置とサイズで、ボタンの位置と大きさを指定することになる
	
	objimage 0, 127, 8, 127, 10, 127, 9	; ボタン画像の指定をする。
								; 最初の番号が buffer番号
								; 次の数字の組み合わせが、表示する画像の中のボタンの左上の位置
								; その次の数字の組み合わせが、ボタンを押したときの位置(省略可)
								; 最後の数字の組み合わせが、ボタンの上にマウスが来たときの位置(省略可)
								
	button gosub "", *mechanics
;-----------------------------------------
; 二つ目のボタン:

	pos 5, 30				; 左上の座標
	objsize 150, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 5, 30, 5, 32, 5, 31	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *curiosity	; ボタンとしての機能、文字は表示させないので""とだけ。
	
;-----------------------------------------
; 3つ目のボタン:

	pos 62, 59				; 左上の座標
	objsize 100, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 62, 59, 62, 61, 62, 60	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *algorithm	; ボタンとしての機能、文字は表示させないので""とだけ。

;-----------------------------------------
; 4つ目のボタン:

	pos 147, 80				; 左上の座標
	objsize 150, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 147, 80, 147, 82, 147, 81	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *traction	; ボタンとしての機能、文字は表示させないので""とだけ。

;-----------------------------------------
; 五つ目のボタン:

	pos 178, 125				; 左上の座標
	objsize 250, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 178, 125, 178, 127, 178, 126	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *jet	; ボタンとしての機能、文字は表示させないので""とだけ。

	pos 456, 124				; 左上の座標
	objsize 120, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 456, 124, 456, 126, 456, 125	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *pasadena

	pos 244, 191				; 左上の座標
	objsize 180, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 244, 191, 244, 193, 244, 192	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *extensive

	pos 465, 242				; 左上の座標
	objsize 135, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 465, 242, 465, 244, 465, 243	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *signs

	pos 6, 285				; 左上の座標
	objsize 65, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 6, 285, 6, 287, 6, 286	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *rugged

	pos 233, 286				; 左上の座標
	objsize 150, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 233, 286, 233, 288, 233, 287	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *level

	pos 493, 307				; 左上の座標
	objsize 145, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 493, 307, 493, 309, 493, 308	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *uneven

	pos 43, 328				; 左上の座標
	objsize 80, 20				; そこから右へいくつ、下へいくつとエリアを指定
	objimage 0, 43, 328, 43, 330, 43, 329	; その指定した範囲をオブジェクト(ボタン)とする
	button gosub "", *incline

;------------------------------------------------------------------
; 下部に、その他のボタンを配置
objimage -1					; objimage命令をデフォルトに戻す(buttonをデフォルトに)

*listen
	pos 580, 600
	button gosub "Listen", *narration

*stopspeech

	button gosub "Stop", *tomare

*Quit
	
	button "Quit", *owari
	
	pos 0, 480
	mes " Notes ----------------------------------------------------------------"
	


;-------------------------------------------------------------------------
stop

*owari
	end

; -------------------------------- sub ---------------------------------------

*tomare
	mmstop
return


*narration
	mmplay 0
return

;-----具体的な注

*mechanics
	mmplay 1
	pos 10, 510
	mes "mechanics = 修理工"
	
	await 3000
	pos 10, 510
	picload "white.jpg", 1
return

*curiosity
	mmplay 2
	pos 10, 510
	mes "Curiosity rover = NASAの火星探索車 Curiosity"
	
	gmode 1, 300, 168				; モード1でメモリ間コピー, x幅ドット, y幅
	gcopy 2, 0, 30, 300, 168			; ウィンドウ番号, x座標, y座標, x幅ドット, y幅
									; 2番のバッファーがジョージアの画像
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*algorithm
	mmplay 3
	pos 10, 510
	mes "algorithm = アルゴリズム、計算処理方法"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*traction
	mmplay 4
	pos 10, 510
	mes "traction control = 駆動制御機構"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*jet
	mmplay 5
	pos 10, 510
	mes "Jet Propulsion Laboratory = ジェット推進研究所"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*pasadena
	mmplay 6
	pos 10, 510
	mes "Pasadena = ロサンジェルス北東の都市"
	
	gmode 1, 269, 188				; モード1でメモリ間コピー, x幅ドット, y幅
	gcopy 3, 0, 30, 269, 188			; ウィンドウ番号, x座標, y座標, x幅ドット, y幅
									; 3番のバッファーがジョージアの画像
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*extensive
	mmplay 7
	pos 10, 510
	mes "extensive testing = 広範囲にわたるテスト実施"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*signs
	mmplay 8
	pos 10, 510
	mes "signs of wear = 磨り減った兆候、wear = 疲弊"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*rugged
	mmplay 9
	pos 10, 510
	mes "rugged = ギザギザの"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*level
	mmplay 10
	pos 10, 510
	mes "on level ground = 水平の地面では"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*uneven
	mmplay 11
	pos 10, 510
	mes "uneven terrain = 不整地"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

*incline
	mmplay 12
	pos 10, 510
	mes "incline = 勾配"
	
	wait 300
	pos 10, 510
	picload "white.jpg", 1
return

; End of Script


 References