複数枚の画像で行う動き(パラパラアニメ(コマアニメ)〜クリックで動作)
- 本をめくります。
画像クリックで、本をめくるようにします。
ActionScript を使用しています。
- 前述の画像を使用します。
- ラベル、画像、アクション(停止、消去、ジャンプ)をイベントリストに配置して、
イベントのプロパティを設定します。
・表示させたい画像を、表示させたい順序で配置します。
・それぞれの[フレームカウント]に、適当な値(変化させるのに使うフレーム数)を設定します。〜参考
・他は、必要に応じて設定します。
※ページをめくったあとは、動かした画像(深度:20 に配置した画像)が不要になるので、
消去しておきます。(緑枠)〜参考

- ページをめくるためのクリックポイントを作成します。
- クリックポイント用の画像をParaFlaのファイルリストに取り込み、
イベントリストに配置して、イベントのプロパティを設定します。
ここでは、クリックポイント用の画像として、10×10 サイズの画像を使用することにします。
・[フレームカウント]に、0 を設定します。
・[深度]に、他と重複しない任意の値を設定します。
・[描画位置]の[座標]、[サイス]を設定します。
クリックポイントにしたい範囲に合わせて設定します。
ここでは、10×10 サイズの画像を使用しますので、画像を拡大(横:17倍、縦:21倍)しています。
・[描画位置]の[不透明度]を、0 %にします。
クリックポイントを見えないようにするために、画像を透明にしています。
・[ボタンにする]にチェックを入れて、[アクション]で、「<スクリプト>」を選択します。
・他は、必要に応じて設定します。
※ページをめくっているときにクリックされないように、クリックポイント用の画像を消去しています。(緑枠)


- クリックポイント用の画像のスクリプト(ボタンアクション)を作成します。
スクリプトに、下記を記述します。
on (release) { // (マウスボタンが押されていて)離されたとき
this.gotoAndPlay("lbl_open_action"); // ラベル:lbl_open_action に移動する
}
- それぞれのページに文字を表示します。
ここでは、テキストを使うことにします。
- 現在のページを憶えておくための変数をクリアします。(ここでは、変数名を book_page とします。)
@イベントリストの1フレーム目で、右クリック − [アクションを挿入]を選択して、
[アクション]で、「<スクリプト>」を選択します。

A追加したアクションのスクリプト(フレームアクション)を作成します。
スクリプトに、下記を記述します。
_root.book_page = 1; // ページ(1:1〜2ページ、2:3〜4ページ、・・・)
- ファイルリストに、必要な数分のテキストを追加します。
ここでは、「1ページ目」、「2ページ目」、「3ページ目」、「4ページ目」と表示することにしますので、
テキストを4つ追加します。
- ファイルリストに、スプライトを追加します。
スプライトのサイズは、テキストのサイズ以上にします。
方法はいろいろあると思いますが、ここでは、1つのスプライトに1つのテキストを配置することにします。
ですので、テキストの数分のスプライトを追加します。
- それぞれのスプライトに、それぞれのテキストを配置します。
(テキストの数分行います。)

- テキストを配置したスプライトをイベントリストに配置して、イベントのプロパティを設定します。
・[フレームカウント]に、0 を設定します。
・[深度]に、本の深度(10)より大きく、他と重複しない任意の値を設定します。
・[描画位置]の[座標]、[サイス]を設定します。
テキストを表示したい範囲に合わせて設定します。
・[スプライトの設定]の[インスタンス名]に、他と重複しない任意の名称を設定します。
・他は、必要に応じて設定します。

- イベントリストに配置したスプライトのスクリプト(クリップアクション)を作成します。
「1ページ目」と「2ページ目」は、
1ページ目を開いているとき(変数: book_page が 1 のとき)には表示(_visible = true)にして、
それ以外のときには非表示(_visible = false)にします。
「3ページ目」と「4ページ目」は、
3ページ目を開いているとき(変数: book_page が 2 のとき)には表示(_visible = true)にして、
それ以外のときには非表示(_visible = false)にします。
スクリプトに、下記を記述します。
●MC_text1、MC_text2 のスクリプト(クリップアクション)
onClipEvent (load) { // このスプライトが表示された最初の1フレーム目のとき
if (_root.book_page == 1) { // ページが 1 の場合
this._visible = true; // このスプライトを表示にする
} else { // ページが 1 以外の場合
this._visible = false; // このスプライトを非表示にする
}
}
●MC_text3、MC_text4 のスクリプト(クリップアクション)
onClipEvent (load) { // このスプライトが表示された最初の1フレーム目のとき
if (_root.book_page == 2) { // ページが 2 の場合
this._visible = true; // このスプライトを表示にする
} else { // ページが 2 以外の場合
this._visible = false; // このスプライトを非表示にする
}
}
- クリックポイント用の画像のスクリプト(ボタンアクション)を修正します。
ページをめくったときに、ページ(変数: book_page)を+1する処理を追加します。
スクリプトに、下記を記述します。
on (release) { // (マウスボタンが押されていて)離されたとき
_root.book_page ++; // ページを+1する
this.gotoAndPlay("lbl_open_action"); // ラベル:lbl_open_action に移動する
}
- 画像を消去するアクションを追加します。(1つは、消去対象を 30 から ALL に変更します。)

- ページをめくっているときにも、テキストが表示された状態にします。
今のままですと、まず、テキストが消去されて、それから、ページがめくられ、
めくり終わると、次のテキストが表示されます。
ページをめくっているときにも、ページをめくる前の左のページのテキストと
めくった後の右のページのテキストは表示させるようにします。
めくるページのテキストを表示させるのは、ややこしそうですので割愛します。
@テキストを配置したスプライトを
イベントリストのページをめくる処理内(ラベル:lbl_open_action 以降)に配置して、
イベントのプロパティを設定します。
設定内容は前述とほぼ同様です。
[スプライトの設定]の[インスタンス名]は、前述とは別の名称を設定します。
テキストは、めくるページより後ろに配置する必要がありますので、
[深度]は、本の深度(10)より大きく、めくるページの深度(20)より小さい値にします。
また、スプライトの場合、ラベルジャンプで移動した先に、
同じ深度のスプライトが存在すると表示がおかしくなりますので、別の値を設定します。
めくるページのテキストは対象外にしていますので、ここで関係するのは、下記の3つです。
MC_text1 (「1ページ目」と表示)・・・1枚目をめくるときに関係します。
MC_text3 (「3ページ目」と表示)・・・2枚目をめくるときに関係します。
MC_text4 (「4ページ目」と表示)・・・1枚目をめくるときに関係します。

Aイベントリストに配置したスプライトのスクリプト(クリップアクション)を作成します。
この処理内では、すでにページ(変数: book_page)が+1されていますので、
「1ページ目」と「4ページ目」は、
変数: book_page が 2 のときには表示(_visible = true)にして、
それ以外のときには非表示(_visible = false)にします。
「3ページ目」は、
変数: book_page が 3 のときには表示(_visible = true)にして、
それ以外のときには非表示(_visible = false)にします。
スクリプトに、下記を記述します。
●MC_text1、MC_text4 のスクリプト(クリップアクション)
onClipEvent (load) { // このスプライトが表示された最初の1フレーム目のとき
if (_root.book_page == 2) { // ページが 2 の場合
this._visible = true; // このスプライトを表示にする
} else { // ページが 2 以外の場合
this._visible = false; // このスプライトを非表示にする
}
}
●MC_text3 のスクリプト(クリップアクション)
onClipEvent (load) { // このスプライトが表示された最初の1フレーム目のとき
if (_root.book_page == 3) { // ページが 3 の場合
this._visible = true; // このスプライトを表示にする
} else { // ページが 3 以外の場合
this._visible = false; // このスプライトを非表示にする
}
}
- テキストを増やして、閉→開、開→閉する動作、逆にめくる動作を追加します。
ちょっとした応用でできますので、説明は省略します。
サンプルでは、ラベル名、インスタンス名、深度などが、上記とは少々異なっています。
- それを動かしたものです。
目次へ 次へ