Het kleurenspel programmeren in Hype

• Mei 1, 2024

In de vorige tutorial hebben we de afbeeldingen geïmporteerd voor een kleurspel voor iBooks Author^R die we maken in Hype Pro. Nu zullen we de interactieve elementen aan het spel toevoegen.

Open uw Hype-document en laten we aan de slag gaan.

Onze eerste stap is om een ​​identiteit toe te voegen aan elk van de lagen die moeten verdwijnen wanneer erop wordt geklikt. Dit omvat de lijntekeningenlagen voor het eendlichaam, de vleugel en de bek. Door elk van deze lagen een uniek element-ID toe te wijzen, kunnen we vervolgens de zichtbaarheid van deze lagen programmeren met JavaScript.

1. Open de identiteitscontrole.
   
   
2. Selecteer de duck_body_line laag in de hoofdtijdlijn.
   
   
3. Voeg in de identiteitscontrole een unieke element-ID toe. Laten we de ID van gebruiken Lichaam.
   
   
4. Selecteer de duck_wing_line laag en voeg toe Vleugel als de unieke element-ID.
   
   
5. Selecteer de laag duck_beak_line en voeg toe Bek als de unieke element-ID.
   
   

Nu de lagen unieke element-ID's hebben, kunnen we de actie aan deze lagen toevoegen. We zullen JavaScript en de eigenschap Display gebruiken om de zichtbaarheid van deze lagen te regelen. De standaardwaarde voor de weergave-eigenschap voor een afbeelding is in lijn, wat betekent dat de afbeelding in de rest van de HTML wordt weergegeven en niet op een nieuwe regel begint.

Om de afbeeldingen te verbergen zullen we JavaScript gebruiken om de waarde van de weergave-eigenschap te wijzigen van in lijn naar geen voor elk van de lijntekeningenlagen. Hiermee worden de onderliggende kleurvullagen zichtbaar.

object.style.display = "none"

1. Open de Acties Inspector.
   
   
2. Selecteer de duck_body_line laag.
   
   
3. Klik in het gedeelte On Mouse Click (Tap) op het Plus-pictogram.
   
   
4. Kies JavaScript uitvoeren in het vervolgkeuzemenu Actie.
   
   
5. Omdat dit een aangepaste JavaScript is, stelt u het vervolgkeuzemenu Functie in op Nieuwe functie. Dit opent een nieuw tabbladvenster met de standaard JavaScript-code en een functie met de naam untitledFunction.
   
   
6. Wijzig de functienaam van untitledFunction naar BodyFunction. U zult de naam van het tabblad zien veranderen in BodyFunction ().
   
   Vervolgens voegen we de code toe om de eigenschap display in te stellen geen voor de Lichaam element. Voeg de volgende code toe op de lege regel 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Ga terug naar het tabblad Scène zonder titel en selecteer de laag duck_wing_line.
   
   
8. Herhaal de vorige stap om de functienaam te wijzigen in WingFunction en voeg de volgende JavaScript toe.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Selecteer de laag duck_beak_line, verander de functienaam in BeakFunction en voeg de volgende JavaScript toe.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Dat is het. Laten we testen in de browser. Exporteer het project als een widget voor iBooks Author als alles goed gaat.
   
   
10. Klik in het menu op Bestand - Exporteren als HTML5 - Dashboard / iBooks Author Widget.