Tip:
Highlight text to annotate it
X
それでは、インタラクティブ性を追加してみましょう。
最初のページに戻ります。
それでは始めます。
ここのボタンです
スタートボタンを
クリックしてみます,
そしてアクションを追加します.
この add ボタンです。
いくつかの新しいアクションがありますが、ここでは
"go to page"を選択します。.
名前をつけます。
"gotoPage2"としました. 任意の分かりやすい名前をつけてください,
Kwikが提供するフルネームを使っていただいても構いません.
分かりやすいものならば、それでよいです。
ロールオーバのイベントは今回は使いません. ここでは "Page Transition"という新しいコマンドを使いましょう。
これによって、様々なページ遷移が可能です。
では、遷移として、それでは crossfade を選んでみます。
.
Kwik は2番目のページは P2しかないととして認識しています。 遷移は新しい機能です。
.
多くのユーザからaudioの追加のリクエストがありました。
ボタンのクリックでサウンドをならすといった事例です。 では、サウンドを追加してみましょう。
"goto page"に追加します.
こんな感じでやってみることにします。
設定の画面に戻って、画像のエクスポートを無効にしておきます。
保存.
では、プレビューをみてみましょう。
エクスポートが速くなります。
コロナで見てみましょう。
cross fadeの遷移が見えましたか?
フォトショップに戻ります。
ページ1に戻ります。
"ButURL"をクリックします。
もう一つボタンを追加します。
"Go To URL"とします。
さらに,
"visitButton"
URLを入力します。ここでは www.Kwiksher.com
audioも追加できます。
できました。
Cubeをクリックしてみます。
アニメーションを追加してみましょう。
"CubeAnim"とします.
ここでアニメーションのタイプとして "Movie clip"という ものがあります。.
この movie clipタイプを選択した場合
アニメーションのファイルを
指定してください。
Movie clipとは、ご存知のように複数のシーケンスからなる 画像ファイルです。同じ名前で始まるファイル名を持っています。
これらによって,
アニメーションを可能にします。
注意することとしては、同じ名前をもって、名前の最後に
アンダーバーで番号をつけます。 これで KwikがMovie Clipと認識して
画像を取り込みます。
見てみましょう.
こんな感じで画像ファイルがあります、1から6まで。
1から6のどれを選択してもよいです。
Kwikは、一連のファイルを取り込みます。 これらのファイルのサイズは
80 x 80です.
ファイルの数は6とKwikは認識します。. ここでやっておくこととして,
アニメがずっとループするのか、何回かで終了するのかです。
位置もこのままの位置のまま残ります。 残します。
また最初のフレームに戻したくもありません。
すでにその場所にあるからです。
どうなるか見てみましょう。
こんな感じです。
アニメーションができてますね。では 最後のページを見てみましょう。
"p2"にいきます。
ではここで、go to buttonを
gotoPage1に
してみます.
Go to Page
になるわけです,
お分かりのように.
ページ遷移を持たせてみます。
"Over from Bottom"です.
"theCube"に go to pageさせてみます.
この大きなエリアをクリックして ボタンを作成します。
このボタンを
"playVideo"とします。
ここでやっておかなければいけないのは、 ビデオファイルを指定することです。
ローカルでも
Web上でも,
指定することができます。
注意として、ビデオファイルはコロナの
仕様に合わせてください,
640 x 480 ピクセルにしました.
また 0:04:50.330,0 :04:52.240 mp4, m4v, or movのどれかです。
つまり, .H264 の videoフォーマットとなります.
制御のコントロールを表示できます。 こんな感じで
作成します.
注意として、ビデオは、コロナのシミュレータでは再生できません。
したい場合は、ちょっとしたトリックを使います。 やってみましょう。
just now.
Okay.
最初のページに行きます。
前のページに
戻ることもできます。
ビデオをクリックしても何もおこりません。 シミュレータで、ビデオを確認するためには
メニューのファイルを開いて
buildを選択して,
iOsを選んで
署名を設定して
ここでは一般的なものをつかって
Xcode Simulatorのビルドを選びます。
これによって
Xcodeのシミュレータが起動して ビデオの再生が可能です。
こんな感じ。
で, ここをクリックすると
ビデオが再生されます。
Alright! では最後に、小さいキューブです。 アニメーションを追加しましょう。
このアニメは線形なアニメです。前にご紹介 したものです。
キューブをX座標の方向に動かしましょう。
画面の端まで。
全部、OKとします。ここで Easingという新しい 機能を紹介します。
線形なアニメーションを使います。 そして
クリックしてみると
ごらんのとおり
線形な一定な速度でキューブが動きます。
これをEasingに変えてみます。
"CrazyCube"を選んでみてください。
Easinのツールを
かえてみます。
"InOutQuad"にしてみます.
再度プレビューしてみると
変化が分かりましたか?
キューブ?
もう一回.
再度キューブが動きます。
最初、速くて、速度が遅くなります。
もう一回最初に戻ってやってみましょう。
いくつかのEasingをやってみて、 お好みの遷移にしてみてください。
最後の新しい機能の紹介として
audio関連のものがあります。
audioのファイルの追加だけでなく、ずっと BGMのように
再生しつづけることもできます。
ページ(パラグラフ)に合わせた音を再生できます。
サンプル例として、パラグラフに合わせたボイスがはいった音を 再生させています。
これは再生したら終わりです。 繰り返す必要はありません。
また再生の開始を3秒送らせて再生させます。
ページが開かれたあとに、タイミングよく再生される
ように設定します。 やってみましょう。
プレビューしてみます.
Click してみます。
[Final Example]
[Final Example]
はい、できました! このKwikの新しいバージョンで 開発してみてください。新しい機能が多く追加されました。
新しい機能の要望やご質問等があれば何なりとフィードバック をください。