iBooks Authorのハイプ-ギャラリー

• かもしれません 21, 2024

前のチュートリアルでは、iBooksで使用するためにHypeにシンプルなギャラリーを構築しました^R 著者。このHype for iBooks Authorチュートリアルでは、HypeウィジェットをiBAに最適にするインタラクティブ機能とアニメーションを追加します。

これで、[マウスクリック時]アクションを[戻る]ボタンと[次へ]ボタンに追加できます。

1. [戻る]ボタンの画像を選択します。 [アクションインスペクター]で、[マウスクリック時]の横のプラスアイコンをクリックします。アクションをシーンにジャンプするように設定します。シーンを前のシーンに設定します。トランジションをクロスフェードに設定し、デフォルトの継続時間を維持します。
   
   
2. [次へ]ボタンについても繰り返しますが、シーンを[次のシーン]に設定します。
   
   ボタンができたので、ギャラリーの他の3つの画像のシーンを複製できます。
   
   
3. シーンを右クリックし、シーンの複製を選択します。 2回繰り返します。シーンの名前を「Layout1」、「Layout2」、および「Layout3」に変更します。
   
   新しいシーンごとにiPadの画像を変更しましょう。
   
   
4. Layout1シーンを選択し、iPadイメージを右クリックして、[削除]を選択します。
   
   
5. Elementsメニューを使用して、別のiPadイメージをインポートします。メニューバーから、[配置]-[背面に送信]をクリックして、iPadの画像をボタンの下に移動します。
   
   
6. 他の2つのシーンに対して前の手順を繰り返します。
   
   プレビューアイコンをクリックして、ブラウザでプロジェクトをテストします。すべてうまくいけば、ギャラリーを閲覧できるはずです。次に、ボタンをいくつか調整する必要があります。最初のシーンから[戻る]ボタンを削除し、最後のシーンの次のボタンを新しい[戻る]ボタンに置​​き換えます。
   
   
7. 最初のシーンを選択します。 [戻る]ボタンを右クリックし、[削除]を選択します。
   
   
8. 最後のシーンに移動します。 [次へ]ボタンを右クリックして、[削除]を選択します。
   
   
9. [要素]メニューを使用して、[戻る]ボタンをインポートします。スケールを50％に減らし、右側に配置します。
   
   次に、ユーザーを最初のシーンに戻すアクションをReturnボタンに追加する必要があります。
   
   
10. [戻る]ボタンを選択します。アクションインスペクターで、[マウスクリック時]アクションを追加します。アクションをシーンにジャンプするように設定します。シーンを最初のシーン（クイズ）およびクロスフェードへの移行に設定します。
    
    もう一度テストしましょう。すべてうまくいけば、iBooks Authorで使用するためにエクスポートできます。
    
    
11. メニューバーから、[ファイル]-[HTML5としてエクスポート]-[ダッシュボード/ iBooks Authorウィジェット]をクリックします。
    
    

PSDカバー-iPadモックアップ
//www.psdcovers.com/

バック

動画の説明: iBooks Author Training: Lesson 27 - 3D Widget in iBooks Author (かもしれません 2024).