４８
【タイムライン】
標準で１秒間に 12 フレームのコマが割り当てられており、時間軸に沿ってアニメーションを展 開することができます。
【アクションスクリプト】
アクションスクリプトは Flash 用に開発されたアクションスクリプトは簡略化されたプログラム 言語のひとつです。マウスやキーなどの操作でアニメーションを動かすなど、対話型のコンテンツ を作成することができます。
（２）描画
Flash では様々な図形を簡単に描くことができます。描いた画像はベクトルデータになるので、
拡大しても同じ形状で、きれいに表示することができます。
【円を描く】
「ツール」の「楕円ツール」 をクリックし、ステージの上で斜めにドラッグすると、その線 分に応じた形の楕円を描くことができます。[shift]キーを押しながらドラッグすると円になりま す。
楕円を描く前に楕円ツールの「プロパティインスペクタ」で「線のカラー」、「塗りのカラー」、「線 の太さ」、「線のスタイル」を設定することができます。
４９
「カラーミキサー」で放射状、線状のグラデーションを設定して「バケツツール」 で塗るこ とができます。
【四角形を描く】
「ツール」の「矩形ツール」 をクリックし、ステージの上でドラッグするとその線分を対角線 とした長方形を描くことができます。[shift]キーを押しながらドラッグすると正方形になります。
矩形ツールの「プロパティインスペクタ」で楕円ツールと同様な設定をすることができます。
【図形の拡大・縮小・回転・伸縮・傾斜】
「ツール」の「自由変形ツール」 をクリックします。ステージ上の円や長方形など、変形し たい図形の全体を含むような範囲を選択し、ハンドルを表示させます。ハンドルの辺や頂点をドラ ッグすると、拡大、縮小、回転、辺の伸縮、傾斜などの変形の操作を行えます。
球体の描き方
① 「カラーミキサー」の「塗りのスタイル」を「放射状」にします。
② グラデーションの開始カラーを明るい色、終了カラーを暗い色を選択します。
③ 楕円ツールでステージに楕円を描きます。
④ 「バケツツール」で楕円の内部をクリックします。
クリックした点を中心にしたグラデーションができます。
⑤ 楕円の輪郭線をクリックし、[Delete]キーで削除すると球体が完成します。
５０
【曲線を変形させる】
「ツール」の「ダイレクト選択ツール」 を選択し、図形の輪郭線上をクリックします。輪郭線 上にあるポインタをドラッグしますと滑らかな曲線で変形することができます。
【ブラシツール・鉛筆ツールで描く】
「ツール」の「ブラシツール」 や、「鉛筆ツール」 を使ってフリーハンドで描くことができ ます。
「鉛筆ツール」の「オプション」で曲線の補正方法を選択します。イラストを描く場合は「スム ーズ」が適しています。
５１
【消しゴムツール】
「ツール」の「消しゴムツール」 をクリックし、既に描かれた線や塗りをドラッグで消すこ
とができます。「消しゴムツール」のオプションで「流し消す」 を選択すると、クリックで選択 された線や塗りを消すことができます。はみ出した部分のみ消す場合に便利です。
（３）マウス操作で図形を動かすことができるＷｅｂページの作成
ここでは、マウスをドラッグする操作で図形を動かすことができるＷｅｂページを作成します。
図形を移動、分類、整理するような教材に発展できます。
【新規シンボルの作成】
メニューの「ファイル」→「新規」をクリックし、白紙のステージが表示させます。メニューの
「挿入」→「新規シンボル」をクリックし、「新規シンボルの作成」のダイアログで「名前」を「ボ ール」と入力し、「タイプ」は「ムービークリップ」を選択します。
「OK」をクリックすると「シンボル編集モード」になり、ステージの中央に「＋」記号が現れ ます。、「＋」記号がほぼ中心になるようにして次のような図形を描きます。
。
５２
ステージの左上にある をクリックし、「シンボル編集モード」から「シーン編集モ ード」に切り替えると、白紙のステージが現れます。この段階で、作成した「ボール」はシンボル としてライブラリに登録されました。
【インスタンスの配置】
メニューの「ウィンドウ」→「ライブラリ」をクリックし、「ライブラリウィンドウ」を開くと 先ほど作成した「ボール」という名前のシンボルがあることが確認できます。
ライブラリにあるの「ボール」という名前のシンボルをステージにドラッグしインスタンスを配 置します。
アクションスクリプトを記述するためにはインスタンスに名前を付けておく必要があります。
「プロパティインスペクタ」の＜インスタンス名＞となっているテキストボックスをクリックし、
５３
「ball1」という名前を付けます（インスタンス名は必ず半角英数字にしてください。）。
【アクションスクリプトの記述】
インスタンスの「ball1」のアクションパネルを開き、次のようにスクリプトを入力します。
【パブリッシュプレビュー】
作業中のアニメーションがＷｅｂページでどのように表示されるかを確認します。メニューの
「ファイル」→「パブリッシュプレビュー」→「HTML」をクリックすると、ブラウザが開き、画 面に現れたボールをドラッグで移動できることを確認します。
【保存】
Flashの作業を保存するには、メニューの「ファイル」→「名前を付けて保存」をします。fla形
式のファイルを保存します。
【パブリッシュ】
Flash で作成したものを fla 形式以外の形式のファイルに書き出すことをパブリッシュといいま
す。メニューの「ファイル」→「パブリッシュ」でHTML形式と swf形式のファイルか作られま す。この HTML形式のファイルを開くと、マウス操作で図形を動かすことができるＷｅｂページ ができたことが確認できます。
on (press) {
startDrag("", true);
}
on (release) { stopDrag();
}
１行目 マウスの左ボタンを押したら ２行目 ドラッグを可能にせよ ３行目
４行目 マウスの左ボタンを離したら ５行目 ドラッグをやめよ
６行目
５４
（４）ボールの衝突を判定するＷｅｂページの作成
ステージに２つのインスタンスを配置し、それぞれドラッグできるようにします。その二つのイ ンスタンスの重なり（衝突）を判定し、衝突したら吸着するようなアクションスクリプトを記述し ます。選択問題やパズル的な教材に応用できます。
【インスタンスの配置】
（３）で作成したインスタンスとは別に、ライブラリにあるシンボル「ボール」をもう１つステ ージ上にドラッグします。
追加したボールのインスタンスに半角英数字で「ball2」という名称をつけます。
【アクションスクリプトの記述】
インスタンスの「ball2」のアクションパネルを開き、次のようにスクリプトを入力します。
on (press) {
startDrag("", true);
this.̲alpha = 50;
}
on (release) { stopDrag();
this.̲alpha = 100;
if (this.hitTest(this.̲parent.ball1) == true) { this.̲x = this.̲parent.ball1.̲x;
this.̲y = this.̲parent.ball1.̲y;
} }
１行目 マウスの左ボタンを押したら ２行目 ドラッグを可能にし、
３行目 不透明度を 50％にする。
４行目
５行目 マウスの左ボタンを離したら ６行目 ドラッグを不能にし
７行目 不透明度を 100％にする
８行目 もし、ボール１と重なっていたら ９行目 ｘ座標はボール１と同じにし １０行目 ｙ座標はボール１と同じにせよ １１行目
１２行目
。
５５
「ファイル」→「パブリッシュプレビュー」→「HTML」で確認するとボールをドラッグするこ とができ、「ball1」と衝突すると「ball1」に吸着します。「ball1」にも同様なアクションスクリプ トを記述するとどちらのボールをドラッグしても衝突を判定し、他方に吸着するようになります。
（４）と同様に「名前を付けて保存」と「パブリッシュ」をして完成です。
（５）発展
Flashの多くの機能を活用できるようになると、教材への応用の範囲は広がります。他の機能を
活用した教材例を総合教育センターのホームページ http://www.edu-ctr.pref.kanagawa.jp/flash/
に掲載しています。
５６ 図２ 最新版のバージョン情報