Värvimängu programmeerimine Hype'is

• Mai 11, 2024

Eelmises õpetuses importisime pildid värvimängu jaoks iBooks Autori jaoks^R mida teeme Hype Pro-s. Nüüd lisame mängu interaktiivsed elemendid.

Avage Hype-dokument ja alustame alustamist.

Meie esimene samm on lisada identiteet igale kihile, mis klõpsamisel peaks kaduma. See hõlmab pardi keha, tiiva ja noka joonise kihte. Kui omistame neile kihtidele kordumatu elemendi ID, saame nende kihtide nähtavuse JavaScripti abil programmeerida.

1. Avage identiteedi inspektor.
   
   
2. Valige peamisel ajajoonel kiht duck_body_line.
   
   
3. Lisage identiteediinspektoris kordumatu elemendi ID. Kasutame ID-d Keha.
   
   
4. Valige kiht duck_wing_line ja lisage Tiib kui unikaalse elemendi ID.
   
   
5. Valige kiht duck_beak_line ja lisage Nokk kui unikaalse elemendi ID.
   
   

Nüüd, kui kihtidel on kordumatud elemendi ID-d, saame toimingu neile kihtidele lisada. Nende kihtide nähtavuse kontrollimiseks kasutame JavaScripti ja atribuuti Kuva. Kujutise vaikeväärtus kuvamisel on järjekorras, mis tähendab, et pilt kuvatakse ülejäänud HTML-is ja see ei alga uuel real.

Piltide peitmiseks kasutame JavaScripti, et muuta kuvatava vara väärtust alates järjekorras kuni mitte ühtegi iga joonise kihi kohta. See paljastab allpool olevad värvitäidise kihid.

object.style.display = "puudub"

1. Avage toimingute inspektor.
   
   
2. Valige kiht duck_body_line.
   
   
3. Klõpsake jaotises Hiireklõps (puudutage) plussikooni.
   
   
4. Valige rippmenüüst Toiming käsk Käivita JavaScripti.
   
   
5. Kuna tegemist on kohandatud JavaScriptiga, määrake rippmenüü Funktsioon väärtuseks Uus funktsioon. See avab uue vahelehe akna vaikimisi JavaScripti koodiga ja funktsiooniga nimega untitledFunction.
   
   
6. Funktsiooni nime muutmine alates untitledFunction kuni BodyFunction. Näete, et vahekaardi nimi on BodyFunction ().
   
   Järgmisena lisame koodi, millega kuvamise atribuut seatakse mitte ühtegi Selle eest Keha element. Lisage tühjale reale 5 järgmine kood.
   
   hypeDocument.getElementById ("Body"). style.display = "puudub";
   
   
7. Minge tagasi vahekaardi Untitled Scene aknasse ja valige kiht duck_wing_line.
   
   
8. Funktsiooni nime muutmiseks väärtuseks korrake eelmist toimingut WingFunction ja lisage järgmine JavaScripti.
   
   hypeDocument.getElementById ("Wing"). style.display = "pole";
   
   
9. Valige kiht duck_beak_line, muutke funktsiooni nimeks BeakFunction ja lisage järgmine JavaScripti.
   
   hypeDocument.getElementById ("Nokk"). style.display = "puudub";
   
   See selleks. Proovime brauseris. Kui kõik läheb hästi, eksportige projekt iBooks Autori vidinana.
   
   
10. Klõpsake menüüst käsku Fail - Ekspordi HTML5-vormingus - Juhtpaneel / iBooks - autori vidin.
    
    

Video Juhiseid: WWE SummerSlam 2016 John Cena vs. AJ Styles Predictions (WWE 2K16) (Mai 2024).