Programmera färgspel i Hype

• Maj 17, 2024

I föregående handledning importerade vi bilderna för ett färgspel för iBooks Author^R som vi gör i Hype Pro. Nu kommer vi att lägga till de interaktiva elementen i spelet.

Öppna ditt Hype-dokument så låt oss komma igång.

Vårt första steg är att lägga till en identitet till vart och ett av de lager som behöver försvinna när du klickar. Detta inkluderar linjekonstlagren för andkroppen, vingen och näbben. Genom att tilldela vart och ett av dessa lager ett unikt element-ID kan vi sedan programmera dessa lagars synlighet med JavaScript.

1. Öppna identitetsinspektören.
   
   
2. Välj duck_body_line-lager i huvudtidslinjen.
   
   
3. Lägg till ett unikt element-ID i ID-inspektören. Låt oss använda ID: n Kropp.
   
   
4. Välj duck_wing_line-lagret och lägg till Vinge som unikt element-ID.
   
   
5. Välj duck_beak_line-lagret och lägg till Näbb som unikt element-ID.
   
   

Nu när lagren har unika element-ID kan vi lägga till åtgärden till dessa lager. Vi kommer att använda JavaScript och Display-egenskapen för att kontrollera synligheten för dessa lager. Standardvärdets visningsegenskaper för en bild är i kö, vilket innebär att bilden visas i resten av HTML och inte börjar på en ny rad.

För att dölja bilderna använder vi JavaScript för att ändra värdet för visningsegenskapen från i kö till ingen för vart och ett av linjekonstlagren. Detta avslöjar färgfyllningsskikten nedan.

object.style.display = "none"

1. Öppna åtgärdsinspektören.
   
   
2. Välj duck_body_line-lager.
   
   
3. Klicka på Plus-ikonen i avsnittet Klicka på musen (Klicka på).
   
   
4. Välj Kör JavaScript i rullgardinsmenyn Åtgärd.
   
   
5. Eftersom detta kommer att vara ett anpassat JavaScript ställer du in rullgardinsmenyn Funktion till Ny funktion. Detta öppnar ett nytt flikfönster med standard JavaScript-kod och en funktion som heter untitledFunction.
   
   
6. Ändra funktionsnamnet från untitledFunction till BodyFunction. Du kommer att se namnet på fliken ändra till BodyFunction ().
   
   Nästa kommer vi att lägga till koden för att ställa in visningsegenskapen till ingen för Kropp element. Lägg till följande kod på den tomma raden 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Gå tillbaka till flikfönstret Untitled Scene och välj duck_wing_line-lagret.
   
   
8. Upprepa föregående steg för att ändra funktionsnamnet till WingFunction och lägg till följande JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Välj duck_beak_line-lagret, ändra funktionsnamnet till BeakFunction och lägg till följande JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Det är allt. Låt oss testa i webbläsaren. Om allt går bra, exportera projektet som en iBooks Author-widget.
   
   
10. Från menyn klickar du på Arkiv - Exportera som HTML5 - Dashboard / iBooks författarwidget.
    
    

Video Instruktioner: RailsConf 2016 - Surviving the Framework Hype Cycle by Brandon Hayes (Maj 2024).