Hypeでのカラーゲームのプログラミング

• かもしれません 12, 2024

前のチュートリアルでは、iBooks Authorのカラーリングゲームの画像をインポートしました^R Hype Proで作成しています。次に、ゲームにインタラクティブな要素を追加します。

Hypeドキュメントを開いて、始めましょう。

最初のステップは、クリックしたときに消える必要がある各レイヤーにIDを追加することです。これには、アヒルの胴体、翼、くちばしのラインアートレイヤーが含まれます。これらの各レイヤーに一意のエレメントIDを割り当てることにより、これらのレイヤーの可視性をJavaScriptでプログラムできます。

1. Identity Inspectorを開きます。
   
   
2. メインタイムラインでduck_body_lineレイヤーを選択します。
   
   
3. IDインスペクターで、一意の要素IDを追加します。のIDを使用しましょう 体.
   
   
4. duck_wing_lineレイヤーを選択して追加します 羽 一意の要素IDとして。
   
   
5. duck_beak_lineレイヤーを選択して追加します くちばし 一意の要素IDとして。
   
   

レイヤーに一意の要素IDが追加されたので、これらのレイヤーにアクションを追加できます。 JavaScriptとDisplayプロパティを使用して、これらのレイヤーの可視性を制御します。画像のデフォルトの表示プロパティ値は 列をなして、これは画像がHTMLの残りの部分に表示され、新しい行で開始されないことを意味します。

画像を非表示にするには、JavaScriptを使用して表示プロパティ値を変更します 列をなして に なし ラインアートレイヤーごとに。これにより、下の塗りつぶしレイヤーが表示されます。

object.style.display = "none"

1. アクションインスペクターを開きます。
   
   
2. duck_body_lineレイヤーを選択します。
   
   
3. [マウスクリック（タップ）]セクションで、プラスアイコンをクリックします。
   
   
4. [アクション]ドロップダウンメニューで、[JavaScriptを実行]を選択します。
   
   
5. これはカスタムJavaScriptになるため、[関数]ドロップダウンメニューを[新しい関数]に設定します。これにより、デフォルトのJavaScriptコードとuntitledFunctionという名前の関数で新しいタブウィンドウが開きます。
   
   
6. 関数名を untitledFunction に ボディ機能。タブの名前がBodyFunction（）に変わります。
   
   次に、表示プロパティを設定するコードを追加します なし のために 体 素子。空の行5に次のコードを追加します。
   
   hypeDocument.getElementById（ "Body"）。style.display = "none";
   
   
7. [無題のシーン]タブウィンドウに戻り、duck_wing_lineレイヤーを選択します。
   
   
8. 前の手順を繰り返して、関数名を WingFunction 次のJavaScriptを追加します。
   
   hypeDocument.getElementById（ "Wing"）。style.display = "none";
   
   
9. duck_beak_lineレイヤーを選択し、関数名を くちばし 次のJavaScriptを追加します。
   
   hypeDocument.getElementById（ "Beak"）。style.display = "none";
   
   それでおしまい。ブラウザでテストしましょう。すべてうまくいけば、プロジェクトをiBooks Authorウィジェットとしてエクスポートします。
   
   
10. メニューから、[ファイル]-[HTML5としてエクスポート]-[ダッシュボード/ iBooks Authorウィジェット]をクリックします。
    
    

動画の説明: 【VantanFLIPCHANNEL】パーソナルカラー【１】 似合う色を知ろう (かもしれません 2024).