おしゃべり黒板の制作過程

Macromedia FlashMXで作成します。


 
「おしゃべり黒板」とは、ソフトボードのボタンキーを押すと、黒板に押された文字が表示され、同時に何が押されたか音声で出力される。おしゃべりボタンで文字列を最初から読み上げる。また、タブキーで、矢印キー対応にする。

1 図形を描く−ダイナミックテキストを置く ・・・・・  osyaberi0.fla


【キーワード】ステージ、描画、レイヤー、グラフィックシンボル、ダイナミックテキスト、変数、ライブラリー、レイヤー名
 
(1)ステージ上に背景となる図形を描く
  黒板を描く・・・・・・・・・・・・・・・・・>グラフィックでシンボル化 bord1
  ソフトボード台を描く・・・・・・・・・>グラフィックでシンボル化 bord2
   レイヤー名に名前をつける・・・>Bord

(2)レイヤーを増やし、ダイナミックテキストを置く

  

  40ポイント、複数行、変数名output

  レイヤー名に名前をつける・・・・・>Dynamic

2 ボタンを作り、タブインデックスをつける・・・・・・  osyaberi1.fla


【キーワード】ボタンシンボル、タブインデックス、キーフレーム、アクションスクリプト、アクションフレーム、複製、静止テキスト、インスタンス名、for(){}
 

(1)「挿入」−「新規シンボル」で、probotan の名前、タイプはグラフィックで38ピクセルのボタンの形状を作成する。

(2)「挿入」−「新規シンボル」で、btn1の名前、タイプはボタンで新規シンボル作成にし、「アップ」にグラフィックのprobotanを配置する。(「ウィンドウ」−「ライブラリ」でライブラリを開いておくとよい)

(3)「ヒット」の位置で右ボタンを押し、「キーフレームの挿入」をする。

(4)「ダウン」の位置で右ボタンを押し、「キーフレームの挿入」をする。

(5)「ダウン」位置で図形を90%縮小にする。

(6)レイヤーを増やし、静止テキストを配置し、「あ」を入れる。26ポイント
(7) (4)〜(5)の要領で、ダウン位置の形状を設定する。
(8)ステージにもどり、レイヤーBotanを増やし、作成したボタンをライブラリからステージに配置する。
(9)ライブラリのbtn1 を複製し、btn2と名前を付け替えし、必要な数だけ作る。
(10)作成したボタンのテキストを修正する。「あ」→「い」
(11)作成したボタンを、レイヤーBotanで、Bord2上に並べる。
(12)レイヤーを増やし、Scriptと名付け、アクションフレームに
maxbtn=10;
  for (var i = 1; i<maxbtn; i++) {
this["btn"+i].tabIndex = i;
  }
 

と、スクリプトを記述する。

(13)ボタンのプロパティで、インスタンス名を btn1,btn2とつける。

3 ボタンにボタンアクションをつける  osyaberi2.fla


【キーワード】ボタンアクション ファンクション 変数
 
   「あ」のボタンアクション  myNameという変数に あ という文字を与え、
ファンクション Check に その変数を送る。
on (release) {
myName="あ";
_root.Check(myName);
}


4 サウンドレコーダで、音声を録音する


【キーワード】サウンドレコーダー、音声の録音
 
  「スタート」−「プログラム」−「アクセサリ」−「エンターティメント」
録音、修正、保存の仕方

「あ」「い」・・・あ.wav い.wav・・・・と名前を付ける。


5 ボタンが押されたら音声が出るようにする  osyaberi3.fla


【キーワード】ファイル読み込み、リンケージ、newSound、attachSound()

 

(1)「ファイル」−「読み込み」で、音声ファイルをライブラリに読み込む

(2)ライブラリを開いて、一つ一つの音声ファイルを選び、右ボタンを押し、リンケージを設定する。

(3)PutSoundという変数に音を割り当てる。
  ソフトボードで押された文字は、moji変数にインスタンス名で代入されてくる
  その文字を、outputというダイナミック変数に代入する
  その文字の音声をライブラリから読み込み、発生させる
そのため、アクションフレームに以下を記述する。
PutSound = new Sound();
function Check(moji) {
PutSound.attachSound(moji);
output += moji;
PutSound.start();
}


6 「話す」ボタンと「消す」ボタンを作り、アクションを書く。osyaberi4.fla


【キーワード】ボタンのステージ配置、インスタンス名、ボタンアクション、文字の取り出し
文字列の代入、文字の読み上げ、遅延ルーチン
 

(1)「話す」ボタンを作って配置する。インスタンス名は btn○ で○の所は続き番号

ボタンアクションを書く   ボタンが押されたら talk というファンクションを実行

on (release) {
_root.talk();
}

(2)「一つ消す」ボタンを作って配置し、インスタンス名を btn○ ○は続き番号
  ボタンアクションを書く  ボタンが押されたら、kesu というファンクションを実行
on (release) {
_root.kesu();
}

(3)「全部消す」のボタンを作って配置し、インスタンス名を btn○ ○は続き番号
   ボタンアクションを書く   ボタンが押されたら 変数outputの中身を空にする
on (release) {
this.output ="";
}

(4)フレームアクションにファンクションのスクリプトを書く
○kesuファンクション
 lenという変数に、ダイナミック変数outputに代入された文字列の数に1引いた数を代入する 変数strに、後尾の文字一つ抜いた文字列を代入し、outputに代入する
function kesu() {
len = output.length-1;
str = output.substr(0, len);
output = str;
}

○talkファンクション・・打ち込まれた文字列を最初から一文字ずつ声を出して読む関数
function talk() {
len = output.length;
for (var i = 0; i<len; i++) {
str = output.substr(i, 1);
//strにi番目の文字を代入する
PutSound.attachSound(str);
PutSound.start();
Delay();
}
}

○遅延ルーチン
function Delay() {
delayTime = 400;
startTime = getTimer();
currentTime = getTimer();
while (currentTime-startTime<delayTime) {
currentTime = getTimer();
}
}


  7 濁音対象の文字が選ばれたら「゛」のボタンが現れる  osyaberi5.fla


 
【キーワード】文字コードの取り出し、文字コードの文字変換
 
(1)「゛」のボタンをつくる

2の要領で作成し、インスタンス名は btn○  ○は続き番号

(2)ボタンのボタンスクリプトを記述する。
on (release) {
myName="゛";
_root.wapuro(myName);
}

(3)「゛」のボタンは、「か」などの濁音が作れる文字が押されたら現れるようにするためのスクリプトを、アクションフレームに記述する。
   濁点のボタンを消しておくためのアクションスクリプト
_root.btn○._visible=false;
    btn.○は、「゛」のインスタンス名
(4)「か」などのボタンアクションの書き換え
on (release) {
myName="か";
_root.wapuro(myName);
_root.btn○._visible = true;         //btn.○は濁点のインスタンス名
}

(5)濁音があるボタンを押した場合の処理のアクションスクリプトの記述
function wapuro(moji){
output+=moji;
kensaku(moji);
VisibleFalse();
PutSound.attachSound(moji);
PutSound.start();
}
function Kensaku(moji){
if(moji=="゛"){
kesu();
var naosi=output.slice(len-1,len);
//文字コードを取り出す
var AsciiNum=output.charCodeAt(output.length-1);
var kaesi=AsciiNum+1;
//文字コードを文字に変換
var MojiStr=String.fromCharCode(kaesi);
kesu();
output+=MojiStr;
PutSound.attachSound(MojiStr);
}
}
function VisibleFalse(){
_root.btn○._visible=false;       btn.○は、濁音ボタンのインスタンス名
}


8 「は」行のボタンで、「゛」の他に「゜」がつく場合の処理


7を下に、練習課題

ヒント1:「゛」ボタンのボタンスクリプト

on (release) {
myName="゛";
_root.wapuro(myName);
}

ヒント2:「゜」ボタンのスクリプト

on (release) {
myName="゜";
_root.wapuro(myName);
}

ヒント3:フレームアクションkensaku()ファンクションの書き換え

function Kensaku(moji) {
//濁音の場合//
if (moji == "゛") {
kesu();
var naosi = output.slice(len-1, len);
//文字コードを取り出す
var AsciiNum = output.charCodeAt(output.length-1);
var kaesi = AsciiNum+1;
//文字コードを文字に変換
var MojiStr = String.fromCharCode(kaesi);
kesu();
output += MojiStr;
PutSound.attachSound(MojiStr);
//撥音の場合//
} else if (moji == "゜") {
kesu();
var naosi = output.slice(len-1, len);
var AsciiNum = output.charCodeAt(output.length-1);
var kaesi = AsciiNum+2;
var MojiStr = String.fromCharCode(kaesi);
kesu();
output += MojiStr;
PutSound.attachSound(MojiStr);
}
}

 


9 「は」のボタンで、「わ」と発音させたい場合の処理  osyaberi6.fla


(1) 「、」のボタンを作る。

(2)フレーム・アクションを書き換える。

function talk() {
len = output.length;
for (var i = 0; i<len; i++) {
str = output.substr(i, 1);
//strにi番目の文字を代入する
var Mark = output.substr(i+1, 1);
//Markにi+1番目の文字を代入する
if (Mark == "、" && str == "は") {
PutSound.attachSound("わ");
//i番目が「は」で、i+1番目の文字が「、」なら「わ」と発音
} else if (Mark == "、" && str == "へ") {
PutSound.attachSound("え");
} else {
PutSound.attachSound(str);
//そうでなければそのまま発音させる
}
PutSound.start();
Delay();
}
}