Programmieren des Farbspiels in Hype
Im vorherigen Tutorial haben wir die Bilder für ein Malspiel für iBooks Author importiertR. das machen wir in Hype Pro. Jetzt werden wir die interaktiven Elemente zum Spiel hinzufügen.

Öffnen Sie Ihr Hype-Dokument und legen Sie los.

Unser erster Schritt besteht darin, jeder Ebene eine Identität hinzuzufügen, die beim Klicken verschwinden muss. Dies schließt die Strichzeichnungen für den Entenkörper, den Flügel und den Schnabel ein. Indem wir jedem dieser Layer eine eindeutige Element-ID zuweisen, können wir die Sichtbarkeit dieser Layer mit JavaScript programmieren.

  1. Öffnen Sie den Identitätsinspektor.

  2. Wählen Sie die Ebene duck_body_line in der Hauptzeitleiste aus.

  3. Fügen Sie im Identitätsinspektor eine eindeutige Element-ID hinzu. Verwenden wir die ID von Körper.

  4. Wählen Sie die Ebene duck_wing_line aus und fügen Sie sie hinzu Flügel als eindeutige Element-ID.

  5. Wählen Sie die Ebene duck_beak_line aus und fügen Sie sie hinzu Schnabel als eindeutige Element-ID.

Nachdem die Ebenen eindeutige Element-IDs haben, können wir diesen Ebenen die Aktion hinzufügen. Wir werden JavaScript und die Display-Eigenschaft verwenden, um die Sichtbarkeit dieser Ebenen zu steuern. Der Standardwert für die Anzeigeeigenschaft für ein Bild ist in der ReiheDies bedeutet, dass das Bild im Rest des HTML-Codes angezeigt wird und nicht in einer neuen Zeile beginnt.

Um die Bilder auszublenden, verwenden wir JavaScript, um den Wert der Anzeigeeigenschaft von zu ändern in der Reihe zu keiner für jede der Strichgrafikebenen. Dadurch werden die Farbfüllschichten unten angezeigt.

object.style.display = "keine"

  1. Öffnen Sie den Aktionsinspektor.

  2. Wählen Sie die Ebene duck_body_line aus.

  3. Klicken Sie im Abschnitt On Mouse Click (Tap) auf das Plus-Symbol.

  4. Wählen Sie im Dropdown-Menü Aktion die Option JavaScript ausführen.

  5. Da dies ein benutzerdefiniertes JavaScript ist, setzen Sie das Dropdown-Menü Funktion auf Neue Funktion. Dadurch wird ein neues Registerkartenfenster mit dem Standard-JavaScript-Code und einer Funktion namens untitledFunction geöffnet.

  6. Ändern Sie den Funktionsnamen von untitledFunction zu BodyFunction. Der Name der Registerkarte wird in BodyFunction () geändert.

    Als nächstes fügen wir den Code hinzu, auf den die Anzeigeeigenschaft gesetzt werden soll keiner für die Körper Element. Fügen Sie den folgenden Code in die leere Zeile 5 ein.

    hypeDocument.getElementById ("Body"). style.display = "none";

  7. Gehen Sie zurück zum Registerkartenfenster "Ohne Titel" und wählen Sie die Ebene "duck_wing_line" aus.

  8. Wiederholen Sie den vorherigen Schritt, um den Funktionsnamen in zu ändern WingFunction und fügen Sie das folgende JavaScript hinzu.

    hypeDocument.getElementById ("Wing"). style.display = "none";

  9. Wählen Sie die Ebene duck_beak_line aus und ändern Sie den Funktionsnamen in Schnabelfunktion und fügen Sie das folgende JavaScript hinzu.

    hypeDocument.getElementById ("Beak"). style.display = "none";

    Das ist es. Lassen Sie uns im Browser testen. Wenn alles gut geht, exportieren Sie das Projekt als iBooks Author-Widget.

  10. Klicken Sie im Menü auf Datei - Als HTML5 exportieren - Dashboard / iBooks Author Widget.


Video-Anleitungen: Wildes LED-Geblinke (March 2024).