I. はじめに - FlyingCat Builder

I. はじめに
1. FlyingCatBuilder について
"あなたのオリジナルデジタルえほんを作りましょう。コーディングは必要ありません。"
FlyingCatBuilder は、とても親しみやすいデジタルえほん制作ツールです。プログラミングのス
キルがなくても、アプリケーションの制作、Apple と Android のグローバルな App マーケット
での配信が可能です。FlyingCatBuilder は、まるでパワーポイントのような感覚で、簡単に使う
ことができます。
以下のガイドラインを読んで、制作を始めましょう！
2. システム環境
FlyingCatBuilder と FlyingCatViewer をダウンロードするには、下記条件が必要です。
Mac
o OS X 10.7 Lion
o OS X 10.8 Mountain Lion o OS X 10.9 Mavericks
o OS X 10.10 Yosemite
Windows
o Windows 7 (推奨)
o Windows 8
3. ダウンロードとインストール
FlyingCat Builder は、http://flyingcat.bookjam.net/ からダウンロードし、無料で使用できます。
4. 端末のプレビュー環境設定
FlyingCatBuilder で作ったあなたの作品は、モバイル端末でプレビューできます。ここでは端末
上の FlyingCatViewer を利用してプレビューする方法を説明します。
【モバイル端末に FlyingCatViewer をダウンロード】
・iOS ( iPad, iPhone, iPod Touch) - App store で”FlyingCatViewer”と検索
・Android(Google Play) - Google Play Store で”FlyingCatViewer”と検索
・Kindle Fire - Amazon App store で”FlyingCatViewer”と検索
【FlyingCat Builder と FlyingCat Viewer を同じ Wi-Fi ネットワークで接続】
モバイル端末で作品をプレビューするためには、FlyingCat Builder と FlyingCat Viewer を同じ
Wi-Fi ネットワークで繋ぐ必要があります。次の手順に従って Wi-Fi 環境の設定を行ってくださ
い。
1. コンピュータが Wi-Fi ネットワークに接続されていることを確認し、ネットワーク
名を確認します。
2. モバイル端末の Wi-Fi 設定から、コンピュータで使用しているものと同じ Wi-Fi
を選択します。
3. モバイル端末の Wi-Fi の IP アドレスを確認します。
4. コンピュータ上の FlyingCat Builder と端末上の FlyingCat Viewer を開きます。
5. ファイルを開く>FlyingCatBuilder のプレビューマネージャーをクリックします。
6. FlyingCat Viewer の IP アドレスがリスト内にあるか確認し、クリックして選択、
プレビューを実行します。
7. プレビューの方法を選択します。
・Fill
: 幅と高さが画面サイズに合わせて等倍でリサイズされます。通常、
ほとんどの端末で左右に黒い帯が表示されます。
・Fit
: 幅と高さが等倍で画面サイズに合わせリサイズされます。通常、
多くの端末で左右に黒い帯が表示されます。
・Stretch
: 端末の画面サイズに合わせリサイズされます。
＜プレビューできない場合＞
・FlyingCat Builder と FlyingCat Viewer を同時に開いてください。
・コンピュータとモバイル端末、両方の Wi-Fi ネットワークを確認してください。
5. 端末をケーブルで PC につないでいる際のプレビュー
PC と端末をケーブルでつなぐことによって、端末上で作品をプレビューすることができます。
リンク( https://vimeo.com/116049023 )で、環境設定方法を確認して下さい。
6. プレビュー
正しく上記の手順に従えば、プレビューの準備完了です！テストプレビューをしたい場合は、
リンク( http://flyingcat.bookjam.net/download/flyingcatsample01.mgl )から mgl ファイルをダウ
ンロードしてください。
【モバイル端末でプレビュー】
（flyingcatsample01.mgl を使って手順を説明します）
1. “端末を選択”
をクリック、プレビューしたい端末の IP アドレスを選択します。
2. FlyingCatBuilder と FlyingCatViewer が正しく接続されると、メッセージが表示さ
れます。次回移行簡単に接続できるよう”常に”を選択してください。
＜各オプションの説明＞
・常に : 常に FlyingCatViewer で作品をプレビューします。FlyingCatViewer を
スワイプ、選択することで、この設定を解除することができます。
・今回だけ : 今回は FlyingCatViewer でプレビューします。次回プレビューした
際には再度メッセージが表示されます。
・今はしない : 今回は FlyingCatViewer でのプレビューはされず、もう 1 度プレ
ビューしたい際には再度メッセージが表示されます。
・しない: FlyingCatViewer でのプレビューは実行されません。再度プレビューし
た場合も、メッセージは表示されません。FlyingCatViewer をスワイプ、
選択することで、この設定を解除することができます。
3. “常に”を選んだ場合、FlyingCat Viewer はデータをダウンロードしプレビューを
開始します。
4. プレビューリクエストに答えると、データのダウンロードを開始します。
5. 端末で作品をチェックしてください。
Ⅱ. FlyingCatBuilder の使い方
1. ワークスペース
ここでは FlyingCat の基本的な用語、メニュー項目、アイコンの使い方について学ぶことができ
ます。
【ツールバー】
頻繁に使用する機能は、ツールバー上にそれぞれのアイコンが配置されています。それぞれの
アイコンについて説明します。
: 新しい MGL ファイルを作成します。
・新規作成
・開く
: 既にある MGL ファイルを開きます。
・保存
: 現在の MGL ファイルを保存します。
・インポート
: 画像や音、映像を”オブジェクトライブラリ”に取り込みます。ファイル
のタイプに合わせて自動的に分類されます。
・コピー
: オブジェクトやアクションをコピーします。
・カット
: オブジェクトのみ、またはアクションを一緒に切り取ります。
: オブジェクトや、オブジェクトに付随したアクションを貼り付けます。
・貼り付け
アクションを貼り付けたい場合、貼り付けたいアクションのボックスを
選択してください。
・戻る
: ひとつ前に戻ります。
・進む
: ”戻る”で取り消した作業を再び実行します。
・右端に整列
・中心に整列
・左端に整列
: 選択したオブジェクトを右端に
: 選択したオブジェクトを中心に
: 選択したオブジェクトを左端に
えます。
えます。
えます。
: 選択したオブジェクトを上端に
・上端に整列
: 選択したオブジェクトを中央に
・中央に整列
: 選択したオブジェクトを下端に
・下端に整列
えます。
えます。
えます。
・前面へ
: 選択したオブジェクトをひとつ前面へ移動します。
・背面へ
: 選択したオブジェクトをひとつ背面へ移動します。
: 選択したオブジェクトを最前面へ移動します。
・最前面へ
・最背面へ
: 選択したオブジェクトを最背面へ移動します。
・水平に並べる
: 選択したオブジェクトをページ中央で水平に並べます。
・垂直に並べる
: 選択したオブジェクトをページ中央で垂直に並べます。
・中心へ移動
: 選択したオブジェクトを、ページの中心に移動します。
・端末を選択
: 同じ Wi-Fi ネットワークでつながっている FlyingCat Viewer に接続され
ている端末を選択します。
・プレビュー
: 選択された端末で作品全体をプレビューします。
・現在のページをプレビュー
: 選択された端末で、現在作業中のページをプレビュー
します。
・ズームイン
: キャンバスを拡大します。
・ズームアウト
: キャンバスを縮小します。
・フィットイン
: キャンバスの大きさを、コンピュータのスクリーンのサイズに合わせ
てリサイズします。
【アクションライブラリ】
既存のアクションファイルを選択して、オブジェクトにアクションを加えます。ドラッグ＆ド
ロップで、オブジェクトにアクションを加えることができます。アクションを選択し、追加し
たい画像やオブジェクトに移動させます。それぞれのアクションの詳細についてはⅢ. アクショ
ンの設定
基本編を参照してください。
【ユーザーのオブジェクトライブラリ】
インポートした全ての画像、サウンド、映像を確認することができます。これらのオブジェク
トは、ドラッグ＆ドロップでキャンバスに追加することができます。
【プロパティエディタ】
パネル上のオブジェクト、アクション、ページのプロパティを設定できます。
【アウトライナー】
オブジェクト間の関係を確認することができます。
1. アウトライナータブ上にあるオブジェクトの情報を見ることができます。
2. オブジェクトのロックや、表示/非表示の設定をすることができます。
3. オブジェクトを他のアウトライナーにドラッグすることで、オブジェクト間に
グループ設定をすることができます。
4. アウトライナーのレイヤーの追加、表示/非表示の設定ができます。
【ページナビゲーション】
ページナビゲーションパネルでは、ページの追加、削除、整理、検索をすることができます。
2. 新しいえほんの作成
新規作成アイコンをクリック、もしくはファイル>新規作成で新しいえほんを作成することがで
きます。
新しいえほんをつくる際、以下のように基本上を設定するウィンドウが表示されます。
【キャンバスの情報】
一般的なデバイス向けのキャンバスのサイズが表示されます表示された以外のサイズで制作が
したい場合は、キャンバスのサイズを自分で設定することができます。
例えば、”iPad - 1024×768”を選択すると、えほんは他の端末においては最適化されません。こ
の場合、他のデバイスで公開する際に、3 つの方法を選択することができます。
・Fill
: 幅と高さが画面サイズに合わせて等倍でリサイズされます。通常、
ほとんどの端末で左右に黒い帯が表示されます。
・Fit
: 幅と高さが等倍で画面サイズに合わせリサイズされます。通常、
多くの端末で左右に黒い帯が表示されます。
・Stretch
: 端末の画面サイズに合わせリサイズされます。
・方向
えほんの向きを横向き・縦向きのいずれかに設定できます。
・サイズ
キャンバスのサイズを設定できます。
・えほんの情報
作品を公開、共有、保存する際に情報の設定が必要となります。
・タイトル
・作者
・概要 : えほんの簡単な説明を入力してください。
・サムネイル : App store で使用されるアイコン用のサムネイルを追加してください。
3. ファイルの保存とファイルを開く
以下のボタンで mgl ファイルの保存、ファイルを開くことができます。
保存する
ツールバーにあるアイコンをクリック、もしくはファイル>保存で、mgl ファイルの保存をする
ことができます。
ファイルを開く
ツールバーにあるアイコンをクリック、もしくはファイル>開くで、mgl ファイルを開くことが
できます。
4. オブジェクトのインポート
画像やサウンド、映像をキャンバスに追加するには、まずそれらをオブジェクトライブラリに
インポートする必要があります。(画像、サウンド、映像を同時に取り込んだ場合、ファイルの
種類によって自動的に分類されます)。
画像とサウンドをインポート
・ツールバーにあるインポートアイコンをクリック、もしくはファイル>インポートで、画像
やサウンドをインポートすることができます。
・コンピュータにインポートしたい画像やサウンドを選択します。
・ユーザーオブジェクトライブラリの画像タブで、インポートした画像を確認することが
できます。
・オブジェクトライブラリのサウンドタブで、インポートしたサウンドを確認することが
できます。
・オブジェクトライブラリの映像タブで、インポートした映像を確認することができます。
キャンバスにオブジェクトを追加
ドラッグ&ドロップで、キャンバスにインポートしたオブジェクトを追加することができます。
キャンバスにテキストオブジェクトを追加
挿入>テキスト、もしくは右クリックでテキストオブジェクトをキャンバスに追加することがで
きます。
5. アクションを追加
アクションライブラリから、キャンバス上のオブジェクトに直接ドラッグ&ドロップでアクショ
ンを追加することができます。
例:
1. ch001.png をユーザーオブジェクトのイメージライブラリからキャンバス
へドラッグ&ドロップします。
2. ジャンプアクションアイコンを、アクションライブラリから ch001.png に
直接、もしくは画像横のボックスにドラッグ＆ドロップします。
3. ツールバーにある Web プレビューボタンをクリックします。
4. タップして、オブジェクトがジャンプするかを確認します。
6. ページ、BGM の設定
（flyingcatsample02.mgl を使って手順を説明します）
リンク(http://flyingcat.bookjam.net/download/flyingcatsample02.mgl )からサンプルファイルを
ダウンロードしてください。
新しいページの追加
1. ページナビゲーションの[+]ボタンをクリック
ページの削除
1. ページナビゲーションのツールバーで、削除したいページを選択
2. 右クリック
3. 削除オプションを選択
ページをコピー/貼り付け
1. ページナビゲーションでコピーしたいページを選択
2. 右クリック
3. “コピー”を選択
4. ページナビゲーションで、コピーページを追加したい場所を選択
5. 右クリック
6. “貼り付け”を選択
ページの移動
1. 移動させたいページを選択
2. 移動させたいページを、移動したい場所のページとページの間にドラッグ
3. ページをドロップ
7. アウトライナー
レイヤー、グループ機能
（flyingcatsample03.mgl を使って手順を説明します）
リンク( http://flyingcat.bookjam.net/download/flyingcatsample03.mgl )からサンプルファイルを
ダウンロードしてください。
オブジェクト間のグループ設定
オブジェクト間のフループ設定をすることで、ひとつのオブジェクト（親）が動くときに、他
のオブジェクト（子）が同じ動きをさせることができます。
以下の手順でテストすることができます。
1. ユーザーオブジェクトライブラリの画像タブから、ch030.png、
ch032.png、ch035.png をドラッグ、キャンバスへドロップ
- アウトライナータブで画像の番号を確認することができます。
- チェックボックスを使って画像をキャンバス上で非表示にすることが
できます。
- アウトライナーで階層的に画像を管理することができます。
2. アウトライナータブで、ch032.png を ch030.png の上にドラッグ＆
ドロップ
3. そこで、 ch032.png(子)が ch030.png(親)の階層的に下に表示されている
ことを確認します。
4. キャンバスで ch030.png(親)をドラッグすると、ch032.png(子)も同様の
動きをします。
オブジェクト間のグループ設定の解除
1. ch032.png をアウトライナータブのレイヤー1 にドラッグします。
2. すると、ch032.png と ch030.png の関連は解除されます。
3. ch030.png(親だった画像)をキャンバスで動かしても、ch032.png
(子だった画像)は動きません
レイヤーの順序を変更する
1. アウトライナー上で ch035.png を ch030.png と ch032.png の間に配置します。
2. 順序が ch030.png < ch032.png <ch035.png から ch030.png < ch035.png <
ch032.png になったことが確認できます。
III. アクションの設定
基本編
1. アクションとプロパティ
“アクション”は、オブジェクトに動きを加えるものです。アクション機能を理解するために、い
くつかの用語を説明します。
・プロパティ : それぞれのアクションが持つ様々な特徴です。
アクションプロパティは、アクションの設定(ジャンプアクションの
高さ、継続時間、繰り返す回数の設定など)や、トリガーの設定(次の
ステータス、トリガーの選択)などの設定を含みます。
⃝アクションの設定は、それぞれのアクションによって異なりますが、
高さや繰り返す回数、継続時間、角度などの設定を含みます。
・トリガーの設定 :
⃝次のステータス : 現在のアクションが終わった後の状態を設定します。
⃝トリガーの選択：アクションのトリガーの種類（タッチ、振る、
タップなど)を選択します。
・トリガー : アクションを実行させるきっかけ（タッチ、タップなど）のことを
意味します。通常”タッチ”がデフォルトで設定されていますが、
”トリガーの選択”で設定することができます。
・ステータス : アクションが割り当てられているオブジェクトの現在の状態のこと
を意味します。
2. アクションのプロパティ
【移動】
オブジェクトを A 地点から B 地点へ動かします。
設定
・Y : Y 座標
・X : X 座標
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【ジャンプ】
オブジェクトをジャンプさせます。
設定
・高さ : ジャンプする高さ
・回数 : ジャンプする回数
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【揺れる】
オブジェクトを軸に沿って揺らします。
設定
・Y : Y 座標
・X : X 座標
・角度 : 揺れる角度
・回数 : 揺れる回数
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【反転】
オブジェクトを軸に沿って反転させます。
設定
・方向 : 反転する方向
・回数 : 反転する回数
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【点滅】
オブジェクトを点滅させます。
設定
・回数 : 点滅する回数
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【フェード】
オブジェクトの透明度を変化させます。
設定
・透明度 : 透明度の設定(0 になると透明になり、1 になると非透明になります)
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【回転】
軸に沿ってオブジェクトを回転させます。
設定
・中心 X : 回転の中心となる X 座標
・中心 Y : 回転の中心となる Y 座標
・角度 : 角度
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【スケール】
オブジェクトを拡大/縮小します。
設定
・スケール率 : オブジェクトのサイズ変化率
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【歪み】
オブジェクトを斜めに歪ませます。
設定
・種類 : 歪ませ方
・水平 : 水平方向の歪みの値
・垂直 : 垂直方向の歪みの値
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
3. サウンド
【サウンド】
オブジェクトがトリガーとなり、サウンドを再生します。サウンドはサウンドライブラリから
直接ドラッグしてキャンバス上にドロップすることができます。
設定
・回数 : サウンドが流れる回数
・継続時間 : アクションが継続される時間(繰り返し再生を含む)
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
4. 物理的なアクション
物理的なアクションは、操作中のモバイル端末の重力センサーに基づいて実行されます。物理
的なアクションと紐付いたオブジェクトは、互いに影響し合います(たとえば、衝突など)。物
理的なアクションを使うことより、様々な異なる表現を生み出すことができます。また、Web
viewer で確認する際は、キャンバスの右側に重力を定義することで、マウスを使用して確認が
できます。
【スイング】
端末を傾けると中心軸に基づきスイングします。
設定
・角度 : スイングする角度
・中心 X : スイングの中心となる X 座標
・中心 Y : スイングの中心となる Y 座標
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【浮遊】
オブジェクトが画面の底に落ちます。端末を動かすことで、画面の底をかえることができます。
画面を移動するオブジェクトが浮遊しているように見せることができます。
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【跳ねる】
バネがついているかのようにオブジェクトが動きます。
設定
・弾性 : オブジェクトの跳ね返り方の設定(数値が高いほど強く、0 だとバウンドしません)
・伸縮性 : オブジェクトが伸び方の設定
・回転 : オブジェクトの回転運動を定義し、元の位置からどれくらいねじれるかを設定
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
注 : バネの動きをするためには、同じステータス、トリガーを設定した上でドラッグする必要
があります。ドラッグして追加するだけではなく、”回転”の設定を行って下さい。
【ドラッグ】
画面上でオブジェクトをドラッグして移動させます。
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
5. ページアクション
ページ間のナビゲーションを可能にするアクションを設定します。ページ間のナビゲーション
を可能にする動きです。
【次のページへ】
次のページへ移動します。
設定
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【前のページへ】
前のページへ移動します。
設定
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【指定したページへ】
指定したページへ移動します。
設定
・To : 移動先のページの設定
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
6. その他
その他のアクション。
【待機】
一定時間オブジェクトを待機させます。
設定
・待機 : 待機時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【リンク】
オブジェクトをウェブサイトへリンクさせます。
設定
・URL : 移動する Web ページの URL
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
IV. アクションの設定
応用編
これまでは、FlyingCat Builder の基礎を学んできました。ここからは、ターゲットオブジェクト、
アクションの組み合わせ、アニメーション、ビデオなど、応用的なアクションの設定について
学んでいきましょう。
1. ステータスとアクションの組み合わせ
ドラッグ&ドロップで、それぞれのオブジェクトの右側に配置されている赤と青のステータスボ
ックスに、アクションやサウンドを追加することができます。
【ステータス】
オブジェクトの横にある青いボックスはステータスを表しています。ステータス内に配置され
たアクションは、トリガーの働きかけによって実行されます。アクションが終わると（”次のス
テータス”の設定によって）ステータスは変化するか、同じステータスにとどまります。
【グローバルステータス】
グローバルステータスの赤いボックスに配置されたアクションは、オブジェクトの現在のステ
ータスにかかわらず、トリガーの働きによって常に実行されます。
【アクションの組み合わせ】
1. 水平配列
同じステータスに水平的にアクションを設置し、同じトリガーを設定した場合、全てのアクシ
ョンは同時に実行されます。
2. 垂直配列
異なるステータスに垂直にアクションを配置した場合、同じトリガーを設定したとしても、そ
れらのアクションは同時に実行されることはありません。アクションは、次のステータスのセ
ッティングに基づいて順次実行されます。
2. トリガーとターゲットオブジェクト
通常、アクションがはじまるには、そのアクションが設定されたオブジェクトがトリガーとな
りますが、ターゲットオブジェクト機能を利用して、他のオブジェクトをアクションのトリガ
ーにすることができます。
例:
1. ch030.png と ch035.png をキャンバスにドラッグ
2. ch030.png へジャンプアクションを追加
3. ジャンプアクションのアイコンをクリック
4. Ctrl キーを押しながら、赤い T のアイコンを ch035.png のアクションボックス
にドラッグ&ドロップ
5. すると、上図のようにリンクが表示される
6. ch035.png をタップすると、ch030.png がジャンプする
3. アニメーションと映像
【アニメーション】
アニメーションファイルや、アニメーションを作成するための連続した画像を読み込むことが
できます。
PNG 画像をインポート
1. アニメーションのスタートフレームとなる ani_01.png をインポート
キャンバスにドラッグ&ドロップ
2. ani_01 のアクションボックスに”アニメーションスプライト”のアクションを追加
3. ポップアップが表示されるので、ani_01.png と ani_02.png をインポート
GIF 画像をインポート
1. “インポート”ボタンで、ani_gif_01.gif をインポート
2. Ctrl キーを押しながら、キャンバスにドラッグ&ドロップ
ヒント :
1. アニメーションの最初の画像の幅と高さは 2048 以下でなくてはいけません。
2. アニメーションに使用できる画像の最大の大きさは
(2048/最初の画像の幅)*(2048/最初の画像の高さ)
【アニメーションの編集】
アニメーションのオプションを変更することができます。
設定
・スタートフレーム : アニメーションの最初の画像
・エンドフレーム : アニメーションの最後の画像
・リピート : アクションが繰り返される回数
・継続時間 : アクションが継続される時間
トリガーの設定
・ターゲットオブジェクト : 選択されたアクションの対象となるオブジェクトを設定します。
・トリガーの選択 : アクションを実行させるトリガーを選択します。
・複合されたアクションの設定 : 他のアクションと同時に実行されてしまう場合の設定を
します。
・次のステータス : アクションが終わった後のステータスを設定します。
【映像】
映像をインポートすることができます。
映像をインポート
1. ファイル > インポートをクリック
2. 映像ファイルを選択
3. 映像ファイルをユーザオブジェクトライブラリーの映像タブから選択し、キャンバスに
ドラッグする
4. 映像をプレビューする
設定
・X : X 座標
・Y : Y 座標
・透明 : 透明度の設定
・大きさ : 映像のサイズ
・回転 : 角度の設定
・オートプレイ : ページが読み込まれた際の自動再生の設定
・コントロールを表示 : 映像のコントロールボタンの有無の設定
V. Q&A
ヒントとコツ
- 1 つの BGM がえほん全体で流れるように設定できますか？
はい、可能です。BGM を開始したいページ(1 ページ目)に BGM を追加して、プロパティエディ
タにて下図のように”ページタブ”を選択します。
このタブで、ドロップダウンメニューの”ファイル名”から BGM を選択します。(事前にファイル
がインポートされているか確認してください。) 下図のように、再生したいファイルを選択し、”
リピート”のボックスにチェックを入れてください。
リピートをクリックすると、作品を通して途切れることなく BGM が再生されます。停止する特
定のページを選択しない限り、最後のページまで、楽曲は自動的にリピート再生されます。
BGM の停止
特定のページまでいくと BGM が停止されるように設定したい場合は、同じ要領で、停止したい
ページに BGM を追加します。プロパティエディタでは、同じファイルを選択する必要がありま
すが、この場合は、停止ボタンをクリックします。
BGM のリピートと停止機能を理解するために、いくつか例を上げます
例1:
2 ページあるえほんで、えほん全体に BGM を流し、それをリピートで再生したい場合
最初の”1 ページ”にファイルを追加し、プロパティエディタの”リピート”をクリックします。 2
ページでは、ドロップダウンメニューから、停止したい BGM(ページ 1 で選択したものと同じ)
を選択し、”リピート”と”停止”にチェックを入れます。
それぞれのページのプロパティエディタは、下図のようになります。
例 2 : 2 ページのえほんで、えほん全体で BGM を鳴らし、曲が終了したらリピートせずにその
まま停止させたい場合
この場合、最初のページでファイルを選択し、リピートをクリックしなければ、BGM が一度停
止するとそのままリピートせずにとまったままにすることができます。
例 3 : 1-2 ページと、3-4 ページにおいて別の BGM をそれぞれのページ内においてリピート再生
させたい場合
この場合、1 ページにおいて”リピート”ボックスにチェックを入れ、2 ページにおいて同じファ
イルを選択し、”リピート”と”停止”にチェックを入れます。同じ手順を 3 ページと 4 ページにお
いても行い、ここでは別のファイルを選択します。下図のようになります。
- 自分でフォント(アラビア語、日本語、ギリシャ語など)をインポートすることはできますか？
はい、ご自身でフォントをインポートすることができます。最新版の FlyingCat では、自動的に
あなたのコンピュータのフォントを読み込みますので、あなたがコンピュータにインストール
したフォントは Builder においても同様に表示されます。
- サウンドの再生中に、停止/再生をすることはできますか？
サウンドの再生サウンドを再生したい場合は、他のアクションと同様にオブジェクトのステー
タスボックスにドラッグします。”トリガーの選択”にてトリガーを選択し、他の設定はデフォル
トのままにしておきます。
サウンドを停止サウンドの再生が終了する前に停止したい場合、停止するトリガーとして機能
する特定のボタンやオプションを設定する必要があります。たとえば下図のように、“キャンセ
ル”のテキストボックを”キャンセルボタン”にすることができます。他にも、オブジェクトや画
像をこのように設定することもできます。
それでは、サウンドアクションの隣に”待機”アクションを追加してみましょう。そこで、Ctrl キ
ーを押しながらキャンセルトリガーとして機能させたいオブジェクトのステータスボックスに”
待機”のアクションをドラッグします。
“待機”アクションのプロパティエディタにおいて、”トリガーの選択”と”複合されたアクションの
設定”を設定します。”複合されたアクションの設定”のフォロップダウンメニューから、”キャン
セル”を選択してください。プロパティエディタは下の図のようになります。
- ひとつのオブジェクトが動くと、他のオブジェクトが同じ動きをするような、オブジェクト同
士を結びつけることはできますか？
はい、”グループ機能”と呼ばれる機能で、オブジェクト間の関係を設定することができます。こ
の機能では、ひとつのオブジェクト(親)を動かすと、他のオブジェクト(子)がまったく同じ動き
をするように設定することができます。
グループ機能を設定するには、アウトライナーウィンドウでオブジェクトを選択する必要があ
ります。アウトライナーウィンドウは、図 1 のように Builder の右側にあります。
アウトライナーで、”子”として設定したいオブジェクトを選択します(複数選択することも可能
です)。図 2 を参照してください。
オブジェクトを選択したら、”親”として設定したいオブジェクトに直接ドラッグ&ドロップしま
す。”子”として設定したオブジェクトは、図 3 のように”親”となるオブジェクトの下に表示され
ます。このようにオブジェクトをリンクさせれば、”子”として設定したオブジェクトは”親”のア
クションの真似をするように同じ動きをします。
図1
図2
図3
- 2 つの MGL ファイルを 1 つにまとめることができますか？
はい、可能です。2 つ、もしくはそれ以上の MGL ファイルを 1 つにまとめるには、ひとつのフ
ァイルのページを選択し、他のファイルの上にコピー＆ペーストするだけで可能です。ページ
ナビゲーションで、ペーストしたい場所を選択しているか確認してください。
FlyingCatBuilder では、同時に 1 つ以上のドキュメントを開くことができます。2 つ目のドキュ
メントを開くと、ツールバーに下図のような 3 つのボタンが表示されます。
最初のボタンをクリックすると、1 つ目のプロジェクトが最小化され、2 つ目のプロジェクトが
表示されます。どちらのスクリーンも最小化すると、下図のようにキャンバスの下の部分に表
示され、いつでも簡単に表示したいドキュメントを選択することができます。
- アクションを無制限にリピートさせることはできますか？
可能です。アクションを追加するときに、プロパティエディタの”リピート”ボックスを-1 に設定
してください。プロパティエディタは下図のようになります。
- “複合されたアクションの設定”のそれぞれのオプションはどのような効果があるのでしょう
か？
これら 3 つのオプションはターゲットとなる画像の同じステータス内に複数のアクションが配
置されている場合においてのみ使用されます。ターゲット画像とは、アクションのトリガーと
して設定した画像のことを指します。
例 : 下図では、少年をタップすると少女がジャンプします。この場合、ステータスにはひとつ
だけアクションが配置されているので、”複合されたアクションの設定”は必要ありません。
そこで、同じステータスにもうひとつアクションを追加し、トリガーを同じ”タップ”に設定する
場合、このオプションを設定する必要があります。下図では、同じステータスに”ジャンプ”と”
揺れる”のアクションが設定されています。
“複合されたアクションの設定”のドロップダウンメニューから、”ミックス”を選択した場合、少
女をタップして”揺れる”のアクションが実行された時に、”ジャンプ”のアクションのトリガーと
なる少年をタップすると、それぞれのアクションがミックスされ、少女のアクションである”ジ
ャンプ”と”揺れる”が同時に実行されます。
ターゲット画像によってトリガーされた”ジャンプ”によって、少女の”揺れる”のアクションを停
止させたい場合、”ターゲット画像によるアクションを優先”のオプションを選択する必要があり
ます。少女をタップすると、少女の”揺れる”アクションが実行されますが、少女が揺れている時
に少年をタップすると、”揺れる”のアクションは停止され、”ジャンプ”のアクションのみが実行
されます。
それでは、少女が揺れている時に、”ジャンプ”をトリガーとして機能させたくない場合について
考えてみましょう。
つまり、少女がいかなるアクションも実行していない時においてのみ、ターゲット画像がトリ
ガーとなり”ジャンプ”が実行される場合です。
まとめると…
ミックス : 複数のアクションが同時に実行されます。
キャンセル : オブジェクトのアクションより、ターゲット画像によってトリガーされたアクシ
ョンが優先されます。
オブジェクトのアクションを優先：ターゲット画像がトリガーとなって実行されるアクション
より、オブジェクトのアクションが優先されます。

Download Report