Storyline 360は強力なeラーニングオーサリングツールであり、イメージするあらゆる種類のインタラクティブ機能を作成できます。Storyline 360で作成されたシンプルでありながらクールなクリックアンドルックスタイルのインタラクションサンプルをご覧ください。
Entrance（開始）アニメーションとExit（終了）アニメーションの使われ方に注目してください。それぞれの[Team Member]ボタンをクリックすると、詳細情報が記載されたレイヤーが画面の右側からスムーズに表示され、[Close]ボタンをクリックすると右側に戻ります。このクールなキューポイントを使ったインタラクティブ機能がどのように作成されているかを知りたい場合は下記をご参照ください。
キューポイントとは？
キューポイントは、Storylineのタイムラインに挿入されるマーカーです。キューポイントを挿入するには、タイムライン上の任意の場所を右クリックし、[Create Cue Point at Playhead]をクリックします。これにより、タイムラインに番号付きのキューポイントが挿入されます。タイムライン上のキューポイントはドラッグして、好きな場所に配置できます。
タイムライン上の3つの丸で囲まれたキューポイントに注目ください。
上記のサンプルのように、これらのキューポイントをトリガーで使用して、特定のインタラクティブ機能を作ることができます。このサンプルがどのように作成されたかを詳しく見てみましょう。
このインタラクティブ機能の作成方法
上記でご覧いただいたサンプルでは、アニメーション、キューポイント、トリガーを使用してインタラクティブ効果を作成しています。この機能の組み合わせにより、コンテンツは画面の右側から表示され、ユーザーが[Close]ボタンをクリックすると元に戻ります。この滑らかな効果を構築するための手順は次のとおりです。
スライドを作成する
まず、スライドのベースレイヤーをデザインします。4つのボタン（各チームメンバー用のボタン）を持つ美しい外観のスライドを作成しました。
各レイヤーにリンクする4つのボタンが含まれるようにスライドをデザインしています。
次に各[Team Member]ボタンをクリックすると、そのチームメンバーに関する詳細情報が画面に表示されるように作成します。
レイヤーを作成する
次のステップは、チームメンバーの詳細情報を表示するレイヤーを作成します。最初のレイヤーを作成し、Team Member 1という名前を付けました。このレイヤーにいくつかのオブジェクト（灰色の長方形、[Close]ボタン、テキスト、画像）を追加してあります。これらすべてのオブジェクトをグループ化しました。これにより、タイムライン上では1つのオブジェクトとして扱うことができます。またタイムライン上の長さを編集して、合計で2秒（2s）になるようにしました。秒数まで指定したのはこれからのステップにも関係するからです。
最初のレイヤーを作成し、オブジェクトがタイムライン上でグループ化され、タイムラインの継続時間が2秒に設定します。
アニメーションを追加する
アニメーションは、このインタラクティブ機能に洗練された効果を与えるために重要な設定です。タイムライン上でこのオブジェクトのグループを選択し、entrance（開始）アニメーションとexit（終了）アニメーションを適用します。グループ内の個々のオブジェクトだけでなく、グループ全体にアニメーションを適用することが重要です。すべてのアイテムが一緒に表示され、一緒に元に戻ります。これが、グループ化することの重要な理由です。このサンプルでは、entrance（開始）アニメーションとして右からのFly Inアニメーションと、exit（終了）アニメーションとして右へのFly Outアニメーションを使用しています。どちらもduration（アニメーション効果の長さ）は00.75秒です。
キューポイントを挿入する
次に、キューポイントを挿入しました。これは簡単です。タイムライン上の任意の場所を右クリックし、[Create Cue Point at Playhead]をクリックします。この例では、キューポイントをタイムライン上の1のマークに正確に配置します。タイムラインは合計で2秒である必要があります。
トリガーを作成する
キューポイントを配置したら、このインタラクティブを機能させる3つのトリガーを作成します。最初のトリガーは、タイムラインがキューポイントに達した時（Timeline reaches）に、このレイヤー（This Layer）のタイムラインを一時停止する（Pause timeline）トリガーです。
2番目のトリガーは、閉じるボタン（Button1）に適用します。タイムラインを再開する（Resume timeline）というトリガーです。
3番目のトリガーは、レイヤーのタイムラインが最後まで到達する（Timeline ends）とレイヤーを非表示（Hide Layer）にします。
この3つのトリガーを設定すると次のようになります。レイヤーのタイムラインが開始され、最初の0.75秒間で開始アニメーションが表示されます。1秒のところでキューポイントに到達し、タイムラインが一時停止し、学習者が[Close]ボタンをクリックするまで一時停止したままになります。学習者が[Close]ボタンをクリックすると、タイムラインが再開し、かつ終了アニメーションが表示され、タイムラインが最後まで到達するとレイヤーが非表示になります。
プレビューして、最初のレイヤーが想定通りに動作したら、時間を節約するために各レイヤーを3回複製し、複製された各レイヤーを修正します。これが、アニメーション、キューポイント、3つのトリガーにより、このサンプルでご覧いただいたインタラクティブな効果を実現する方法です。
ここからファイルをダウンロードして、トリガーを詳しく見ることができます。
※ダウンロードファイルはStoryline2で作成されたファイルです。必要に応じてファイルをアップグレードしてください。
株式会社ディーシェは日本におけるArticulate製品の販売代理店です